/* Cafe Retta Bintaro — stylesheet for the caferetta-content mu-plugin. Ported from the original static site (assets/promo.css, the inline \3c style> of index.html, assets/product-gallery.css and assets/editorial-menu.css, in that load order). Every selector is prefixed with "body.cr-site" (class added by the plugin). That extra specificity is deliberate: it lets these rules win over Elementor's kit CSS (".elementor-kit-N h2 {…}") and frontend CSS (".elementor img {…}") no matter which file loads last. Keep the prefix on any rule you add. */ :root{ --ink:#252720; --forest:#2f3b2f; --sage:#a8b29a; --cream:#f3eee3; --paper:#fbf7ef; --latte:#c9a47f; --rust:#aa5c3c; --line:rgba(37,39,32,.14); --white:#fffdf8; --shadow:0 30px 80px rgba(37,39,32,.13); } *{box-sizing:border-box} html{scroll-behavior:smooth} /* ==== Guards: restore browser defaults the original relied on ==== Elementor's Site Settings (kit) can style body, headings, paragraphs and links site-wide; re-assert what the static page got from the browser. */ body.cr-site{font-size:16px;font-weight:400;letter-spacing:normal} body.cr-site h1,body.cr-site h2,body.cr-site h3,body.cr-site h4,body.cr-site h5,body.cr-site h6{font-family:inherit;font-weight:700;font-style:normal;text-transform:none;color:inherit;line-height:inherit;letter-spacing:normal} body.cr-site h3{font-size:1.17em;margin:1em 0} body.cr-site p{margin:1em 0} /* ==== From assets/promo.css ==== */ body.cr-site .promo-section{background:linear-gradient(180deg,var(--cream) 0%,#fff8ed 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} body.cr-site .promo-head{max-width:680px;margin-bottom:48px} body.cr-site .promo-head p{color:#66695f;max-width:520px} body.cr-site .promo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} body.cr-site .promo-card{background:var(--paper);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);position:relative;border:1px solid var(--line)} body.cr-site .promo-card .cover{display:block;aspect-ratio:4/3;background:#d8cdb5} body.cr-site .promo-card .cover img{width:100%;height:100%;object-fit:cover;display:block} body.cr-site .promo-card .body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:14px;flex:1} body.cr-site .promo-card h3{font-family:"Playfair Display",serif;font-size:clamp(22px,2.4vw,30px);line-height:1.15;margin:0;color:var(--ink)} body.cr-site .promo-card .price{display:inline-flex;align-items:baseline;gap:8px;font-weight:700;color:var(--forest)} body.cr-site .promo-card .price strong{font-size:clamp(28px,3vw,40px);letter-spacing:-.02em} body.cr-site .promo-card .price span{font-size:11px;letter-spacing:.18em;color:var(--rust);font-weight:700;text-transform:uppercase} body.cr-site .promo-card ul{margin:0;padding-left:18px;font-size:14px;line-height:1.6;color:#45473f} body.cr-site .promo-card ul li{margin-bottom:4px} body.cr-site .promo-card .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto} body.cr-site .promo-card .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:rgba(47,59,47,.08);color:var(--forest);padding:6px 12px;border-radius:100px;font-weight:700} body.cr-site .promo-card .tag.warn{background:rgba(170,92,60,.12);color:var(--rust)} body.cr-site .promo-card .meta-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#777b70;letter-spacing:.04em} body.cr-site .promo-card .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} body.cr-site .promo-card .actions a{font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px} body.cr-site .promo-card .body h3:first-child{margin-top:18px} body.cr-site .promo-empty{font-size:14px;color:#66695f} body.cr-site .promo-empty a{color:var(--forest);text-decoration:underline;text-underline-offset:3px} @media (max-width:860px){ body.cr-site .promo-grid{grid-template-columns:1fr} body.cr-site .promo-card .body{padding:22px} } /* ==== From index.html \3c style> ==== */ body.cr-site{ margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",system-ui,sans-serif; line-height:1.6; overflow-x:hidden; } body.cr-site img{display:block;width:100%} body.cr-site a{color:inherit;text-decoration:none} body.cr-site .container{width:min(1180px,calc(100% - 40px));margin:auto} body.cr-site .nav-wrap{ position:fixed;z-index:50;left:0;right:0;top:0; background:rgba(251,247,239,.86); backdrop-filter:blur(16px); border-bottom:1px solid rgba(37,39,32,.06) } body.cr-site .nav{height:78px;display:flex;align-items:center;justify-content:space-between} body.cr-site .brand{display:flex;align-items:center;gap:12px;letter-spacing:.08em} body.cr-site .brand-mark{ display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--forest); border-radius:50%;font-family:"Playfair Display",serif;font-size:24px;font-style:italic } body.cr-site .brand b{display:block;font-size:13px;line-height:1.2} body.cr-site .brand small{display:block;font-size:9px;letter-spacing:.25em;margin-top:3px} body.cr-site .nav-links{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:600} body.cr-site .nav-links>a:not(.nav-cta){position:relative} body.cr-site .nav-links>a:not(.nav-cta)::after{ content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--forest);transition:.25s } body.cr-site .nav-links>a:hover::after{right:0} body.cr-site .nav-cta{border:1px solid var(--forest);padding:11px 16px;border-radius:100px} body.cr-site .nav-toggle{display:none;border:0;background:transparent;padding:8px} body.cr-site .nav-toggle span{display:block;width:24px;height:1px;background:var(--ink);margin:6px} body.cr-site .hero{ min-height:860px;padding:150px 0 80px;display:grid;align-items:center;position:relative; background: radial-gradient(circle at 80% 20%, rgba(168,178,154,.27), transparent 33%), linear-gradient(135deg,#fbf7ef 0%,#f0e8d9 100%); } body.cr-site .hero-glow{ position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(170,92,60,.09); filter:blur(10px);left:-100px;bottom:40px } body.cr-site .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center} body.cr-site .eyebrow{ font-size:11px;letter-spacing:.24em;font-weight:700;color:var(--rust);margin:0 0 18px } body.cr-site h1,body.cr-site h2{font-family:"Playfair Display",serif;letter-spacing:-.045em;line-height:.95;margin:0} body.cr-site h1{font-size:clamp(68px,7vw,110px)} body.cr-site h1 em,body.cr-site h2 em{font-weight:600;color:var(--forest)} body.cr-site .hero-lead{font-size:18px;max-width:590px;margin:30px 0;color:#54564d} body.cr-site .hero-actions{display:flex;gap:12px;flex-wrap:wrap} body.cr-site .btn{ display:inline-flex;justify-content:center;align-items:center;padding:15px 22px;border-radius:100px; font-size:13px;font-weight:700;border:1px solid var(--forest);transition:.25s } body.cr-site .btn-primary{background:var(--forest);color:var(--white)} body.cr-site .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(47,59,47,.2)} body.cr-site .btn-ghost:hover{background:rgba(47,59,47,.06)} body.cr-site .btn-light{background:var(--paper);color:var(--forest);border-color:var(--paper)} body.cr-site .hero-meta{display:flex;gap:36px;margin-top:52px;padding-top:24px;border-top:1px solid var(--line)} body.cr-site .hero-meta div{display:flex;flex-direction:column} body.cr-site .hero-meta strong{font-size:16px} body.cr-site .hero-meta span{font-size:11px;color:#777b70;margin-top:3px} body.cr-site .hero-visual{position:relative;min-height:610px} body.cr-site .visual-main{ position:absolute;right:10px;top:0;width:88%;border-radius:220px 220px 28px 28px;overflow:hidden; box-shadow:var(--shadow);background:#d7c7af } body.cr-site .visual-main img{height:auto;aspect-ratio:4/5;object-fit:cover} body.cr-site .photo-note{ position:absolute;left:22px;bottom:18px;background:rgba(251,247,239,.82);backdrop-filter:blur(12px); padding:8px 12px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.08em } body.cr-site .floating-card{ position:absolute;left:-10px;bottom:70px;background:var(--white);padding:16px 20px 16px 14px;border-radius:18px; box-shadow:0 18px 50px rgba(37,39,32,.14);display:flex;gap:13px;align-items:center } body.cr-site .floating-card .cup{font-size:28px} body.cr-site .floating-card strong{display:block;font-size:13px} body.cr-site .floating-card small{font-size:10px;color:#777b70} body.cr-site .stamp{ position:absolute;right:-14px;top:100px;width:88px;height:88px;border-radius:50%;background:var(--rust);color:#fff; display:grid;place-items:center;text-align:center;font-size:10px;line-height:1.35;font-weight:700;letter-spacing:.12em; transform:rotate(9deg);box-shadow:0 15px 35px rgba(170,92,60,.25) } body.cr-site .strip{background:var(--forest);color:#f6efe2;padding:17px 0;overflow:hidden} body.cr-site .strip-track{display:flex;gap:28px;justify-content:center;align-items:center;white-space:nowrap;font-size:11px;letter-spacing:.22em;font-weight:700} body.cr-site .strip-track > *{flex:0 0 auto} body.cr-site .strip i{color:var(--latte);font-style:normal} body.cr-site .section{padding:120px 0} body.cr-site .split{display:grid;grid-template-columns:.82fr 1.18fr;gap:100px} body.cr-site .section-heading{position:sticky;top:130px;align-self:start} body.cr-site h2{font-size:clamp(52px,6vw,86px)} body.cr-site .big-copy{font-family:"Playfair Display",serif;font-size:29px;line-height:1.3;margin:0 0 55px} body.cr-site .feature-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)} body.cr-site .feature-grid article{padding:30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} body.cr-site .feature-grid span{font-size:10px;color:var(--rust);font-weight:700} body.cr-site .feature-grid h3{font-size:17px;margin:30px 0 8px} body.cr-site .feature-grid p{font-size:13px;color:#6a6e63;margin:0} body.cr-site .menu-section{background:var(--cream)} body.cr-site .menu-head{display:flex;justify-content:space-between;gap:60px;align-items:end;margin-bottom:60px} body.cr-site .menu-head>p{max-width:420px;color:#66695f;margin:0} body.cr-site .menu-cta{ display:flex;flex-direction:column;gap:18px;padding-top:24px;font-size:13px } body.cr-site .menu-cta>p{margin:0;color:#3b3f36} body.cr-site .order-channels{display:flex;flex-wrap:wrap;gap:12px} body.cr-site .order-btn{ display:inline-flex;align-items:center;gap:8px; padding:12px 20px;border-radius:100px; font-family:inherit;font-weight:700;font-size:14px; text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease; border:1.5px solid currentColor } body.cr-site .order-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.08)} body.cr-site .order-gofood{background:#fff;color:#ee2737;border-color:#ee2737} body.cr-site .order-gofood:hover{background:#ee2737;color:#fff} body.cr-site .order-grabfood{background:#fff;color:#00b14f;border-color:#00b14f} body.cr-site .order-grabfood:hover{background:#00b14f;color:#fff} body.cr-site .order-label{font-weight:500;opacity:.75;font-size:12px;text-transform:uppercase;letter-spacing:.04em} body.cr-site .order-brand{font-size:16px;font-weight:800} body.cr-site .order-arrow{font-size:14px;margin-left:2px} body.cr-site .order-toggle{ display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6d7067; padding-top:8px;border-top:1px dashed #d8d3c5;margin-top:6px } body.cr-site .order-toggle>span{font-weight:600} body.cr-site .order-toggle button{ appearance:none;background:transparent;border:1px solid #d8d3c5;border-radius:100px; padding:5px 12px;font-family:inherit;font-size:11px;font-weight:600;color:#3b3f36; cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease } body.cr-site .order-toggle button:hover{background:var(--ink);color:#fff;border-color:var(--ink)} body.cr-site .order-toggle button[data-active="true"]{background:var(--ink);color:#fff;border-color:var(--ink)} body.cr-site .space-section{background:var(--paper)} body.cr-site .space-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:55px} body.cr-site .gallery{ display:grid;grid-template-columns:minmax(380px,2fr) 1fr;grid-template-rows:repeat(2,1fr);gap:18px } body.cr-site .gallery figure{margin:0;position:relative;overflow:hidden;border-radius:20px;aspect-ratio:1} body.cr-site .gallery-a{grid-column:1;grid-row:1/3;aspect-ratio:1/1} body.cr-site .gallery-a img{height:100%} body.cr-site .gallery img{width:100%;height:100%;object-fit:cover} body.cr-site .gallery figcaption{ position:absolute;left:18px;bottom:18px;background:rgba(251,247,239,.86);backdrop-filter:blur(10px); padding:8px 12px;border-radius:100px;font-size:11px;font-weight:600 } body.cr-site .gallery-quote{ grid-column:1/-1;border-radius:20px;background:var(--forest);color:#f5efe4;padding:30px;display:flex;flex-direction:column;justify-content:end } body.cr-site .gallery-quote span{font-family:"Playfair Display",serif;font-size:70px;line-height:.6;color:var(--latte)} body.cr-site .gallery-quote p{font-family:"Playfair Display",serif;font-size:30px;margin:14px 0 3px} body.cr-site .gallery-quote small{color:#cdd3c9} body.cr-site .visit{background:#efe5d3} body.cr-site .visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center} body.cr-site .visit-details{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin:48px 0} body.cr-site .visit-details>div{padding-top:16px;border-top:1px solid rgba(37,39,32,.2)} body.cr-site .visit-details small{font-size:9px;letter-spacing:.18em;font-weight:700;color:var(--rust)} body.cr-site .visit-details p{font-size:14px;margin:9px 0 0} body.cr-site .visit-note{ font-family:"Playfair Display",serif;font-style:italic;font-size:15px;color:#4a4f44; background:rgba(47,59,47,.06);border-left:3px solid var(--forest); padding:14px 18px;border-radius:6px;margin:8px 0 28px;line-height:1.5 } body.cr-site .map-card{ min-height:560px;border-radius:28px;position:relative;overflow:hidden;background: linear-gradient(35deg,transparent 47%,rgba(47,59,47,.12) 48%,rgba(47,59,47,.12) 50%,transparent 51%), linear-gradient(145deg,transparent 46%,rgba(47,59,47,.1) 47%,rgba(47,59,47,.1) 49%,transparent 50%), #cbd1bc; background-size:110px 110px,150px 150px,auto; box-shadow:var(--shadow) } body.cr-site .map-card{display:block;cursor:pointer} body.cr-site .map-card:focus-visible{outline:3px solid var(--rust);outline-offset:6px} body.cr-site .map-card:hover .map-label strong{text-decoration:underline} body.cr-site .map-card::before,body.cr-site .map-card::after{ content:"";position:absolute;background:#efe9d7;border-radius:100px;transform:rotate(-20deg) } body.cr-site .map-card::before{width:520px;height:35px;left:-80px;top:120px} body.cr-site .map-card::after{width:600px;height:26px;right:-180px;bottom:140px;transform:rotate(36deg)} body.cr-site .map-pin{ position:absolute;left:53%;top:44%;width:72px;height:72px;border-radius:50% 50% 50% 0; background:var(--rust);color:#fff;display:grid;place-items:center;font-family:"Playfair Display",serif;font-size:30px; transform:rotate(-45deg);box-shadow:0 14px 35px rgba(86,54,38,.25);z-index:3 } body.cr-site .map-pin::first-letter{transform:rotate(45deg)} body.cr-site .map-label{ position:absolute;left:30px;right:30px;bottom:30px;padding:18px;background:rgba(251,247,239,.88); backdrop-filter:blur(12px);border-radius:16px;z-index:4 } body.cr-site .map-label strong{display:block} body.cr-site .map-label small{color:#74786d} body.cr-site .cta-section{background:var(--rust);color:#fff5eb;padding:110px 0} body.cr-site .cta-inner{text-align:center} body.cr-site .cta-inner .eyebrow{color:#f1d0bd} body.cr-site .cta-inner h2{max-width:800px;margin:0 auto 35px} body.cr-site footer.cr-footer{padding:45px 0;background:#22271f;color:#f4eee2} body.cr-site .footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;align-items:end} body.cr-site .footer-brand .brand-mark{border-color:#f4eee2} body.cr-site footer.cr-footer p{font-size:12px;color:#b8bdb1;margin:0} body.cr-site .footer-note{text-align:right} body.cr-site .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s ease} body.cr-site .reveal.visible{opacity:1;transform:none} @media (max-width: 960px){ body.cr-site .nav-links{ position:absolute;top:78px;left:0;right:0;background:var(--paper);padding:24px 20px 30px; display:none;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line) } body.cr-site .nav-links.open{display:flex} body.cr-site .nav-toggle{display:block} body.cr-site .hero{min-height:auto;padding-top:130px} body.cr-site .hero-grid,body.cr-site .split,body.cr-site .visit-grid{grid-template-columns:1fr;gap:60px} body.cr-site .hero-visual{min-height:580px;max-width:620px;width:100%;margin:auto} body.cr-site .section-heading{position:static} body.cr-site .menu-head{align-items:start;flex-direction:column} } @media (max-width: 650px){ body.cr-site .container{width:min(100% - 28px,1180px)} body.cr-site .section{padding:85px 0} body.cr-site h1{font-size:58px} body.cr-site h2{font-size:50px} body.cr-site .hero-meta{gap:18px;justify-content:space-between} body.cr-site .hero-meta strong{font-size:14px} body.cr-site .hero-visual{min-height:470px} body.cr-site .visual-main{width:92%;right:0} body.cr-site .floating-card{left:0;bottom:10px} body.cr-site .stamp{right:-2px;top:60px} body.cr-site .feature-grid{grid-template-columns:1fr} body.cr-site .menu-cta{align-items:flex-start;gap:20px;flex-direction:column} body.cr-site .strip-track{padding:0 16px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%)} body.cr-site .strip-track::-webkit-scrollbar{display:none} body.cr-site .gallery{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:14px} body.cr-site .gallery figure{aspect-ratio:auto;height:auto;min-height:300px} body.cr-site .gallery-a{grid-row:auto;min-height:380px} body.cr-site .gallery-a img{height:auto;position:absolute;inset:0;width:100%;object-fit:cover} body.cr-site .visit-details{grid-template-columns:1fr} body.cr-site .map-card{min-height:420px} body.cr-site .footer-grid{grid-template-columns:1fr;align-items:start} body.cr-site .footer-note{text-align:left} } /* ==== From assets/product-gallery.css ==== */ body.cr-site .brand .brand-mark{object-fit:contain;background:white;flex-shrink:0;border:0} body.cr-site #menu,body.cr-site #official-menu{scroll-margin-top:100px} body.cr-site .gallery-note{font-size:12px;color:#616458;max-width:760px;margin:18px 0 26px} body.cr-site [hidden]{display:none!important} body.cr-site .official-menu{margin-top:70px;padding-top:48px;border-top:1px solid var(--line)} body.cr-site .official-menu-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:28px} body.cr-site .official-menu-head h3{font-family:"Playfair Display",serif;font-size:clamp(32px,4vw,48px);line-height:1.15;margin:0} body.cr-site .official-menu-head p:not(.eyebrow){max-width:380px;color:#616458;font-size:14px;margin:0} body.cr-site .menu-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} body.cr-site .menu-preview{display:block;width:100%;padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:18px;text-align:left;cursor:zoom-in;font:inherit;color:var(--forest)} body.cr-site .menu-preview img{height:330px;object-fit:contain;background:white;border-radius:8px} body.cr-site .menu-preview>span{display:block;padding:16px 8px 4px;font-weight:700} body.cr-site .menu-preview>span>span{float:right;color:var(--rust)} body.cr-site .menu-preview small{display:block;font-size:12px;font-weight:400;color:#616458} body.cr-site .product-card:focus-visible,body.cr-site .menu-preview:focus-visible,body.cr-site .viewer :focus-visible{outline:3px solid var(--rust);outline-offset:4px} body.cr-site.viewer-open{overflow:hidden} body.cr-site .viewer{padding:0;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);width:min(1100px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);overflow:hidden} body.cr-site .viewer::backdrop{background:rgba(20,26,20,.78);backdrop-filter:blur(5px)} body.cr-site .viewer-shell{display:flex;flex-direction:column;height:min(850px,calc(100dvh - 26px));min-width:0} body.cr-site .viewer-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px} body.cr-site .viewer-header h2{font:600 18px/1.4 "DM Sans",sans-serif;letter-spacing:0;margin:0;overflow-wrap:anywhere} body.cr-site .viewer button{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:100px;background:var(--paper);color:var(--forest);padding:10px 16px;min-height:44px} body.cr-site .viewer-header button{flex-shrink:0} body.cr-site .viewer-toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 12px;align-items:center} body.cr-site .viewer-toolbar button{padding:8px 12px;font-size:12px} body.cr-site .viewer-toolbar button:disabled{opacity:.45;cursor:default} body.cr-site .viewer-pan{flex:1;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;background:#e6e1d7;position:relative;touch-action:pan-x pan-y pinch-zoom} body.cr-site .viewer-pan img{display:block;max-width:none;height:auto;margin:0} body.cr-site .viewer:not(.is-menu) .viewer-pan img{width:100%;height:100%;object-fit:contain} @media(max-width:700px){ body.cr-site .official-menu-head{flex-direction:column;align-items:start;gap:18px} body.cr-site .menu-pages{gap:12px} body.cr-site .menu-preview{padding:8px;border-radius:12px} body.cr-site .menu-preview img{height:210px} body.cr-site .menu-preview>span{padding:12px 2px 4px;font-size:13px} body.cr-site .menu-preview small{font-size:10px} body.cr-site .viewer-header{padding:12px} body.cr-site .viewer-header h2{font-size:15px} body.cr-site .viewer-header button{padding:8px 12px;font-size:12px} body.cr-site .viewer-toolbar{padding:0 12px 10px;gap:6px} } /* ==== Menu showcase — from assets/editorial-menu.css ==== The original hard-coded 11 grid-template-areas, one per product. Here the same desktop geometry comes from each item's "Showcase layout" (Menu Items → edit), so items can be added or reordered: feature = full-width seasonal banner (480px tall) hero = tall card in column 1, spans two 200px rows ("Favorit") standard = 200px tile, fills columns 2–3 next to a hero Default order Mont Blue · Americano · 4 tiles · Pancake Special · 4 tiles reproduces the original exactly. */ body.cr-site .product-grid{ display:grid;grid-template-columns:minmax(280px,1.2fr) 1fr 1fr;gap:14px; padding-bottom:52px /* = the original's empty #gallery-status row under the grid (padding: a margin would collapse) */ } body.cr-site .product-card{ position:relative;display:block;min-width:0;height:200px;padding:0;border:0;border-radius:22px;overflow:hidden; background:#2a2620;color:var(--ink);font:inherit;text-align:left;cursor:pointer; transition:transform .2s,box-shadow .2s } body.cr-site .product-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(37,39,32,.1)} body.cr-site .product-card .img-wrap{position:absolute;inset:0;display:block;width:100%;height:100%;background:transparent} body.cr-site .product-card .img-wrap img{width:100%;height:100%;object-fit:cover;display:block} body.cr-site .product-caption{ position:absolute;inset:auto 0 0 0;padding:18px 22px 22px;min-height:0; background:linear-gradient(transparent 0%,rgba(15,12,8,.55) 55%,rgba(15,12,8,.78) 100%); display:flex;flex-direction:column;justify-content:flex-end;gap:0 } body.cr-site .product-caption strong{ display:block;margin:0;font-family:"Playfair Display",serif;font-style:italic;font-weight:600;font-size:18px; line-height:1.1;letter-spacing:-.005em;color:#fffdf8;text-shadow:0 2px 14px rgba(0,0,0,.45) } /* Hero (Favorit) */ body.cr-site .product-card.is-hero{grid-column:1;grid-row:span 2;height:auto;min-height:414px} body.cr-site .product-card.is-hero .product-caption{padding:28px 30px 30px} body.cr-site .product-card.is-hero .product-caption strong{font-size:clamp(28px,3.2vw,38px);font-weight:700} body.cr-site .product-chip{ position:absolute;top:16px;left:16px;z-index:3; background:rgba(251,247,239,.95);backdrop-filter:blur(6px);color:var(--ink); font-family:"DM Sans",sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;line-height:1.6; text-transform:uppercase;padding:7px 13px;border-radius:100px } /* Feature (seasonal, full width) */ body.cr-site .product-card.is-feature{grid-column:1/-1;height:480px;background:#fbf7ef} body.cr-site .product-card.is-feature .img-wrap{display:flex;align-items:center;justify-content:center;padding:24px 60px} body.cr-site .product-card.is-feature .img-wrap img{height:100%;width:auto;max-width:100%;object-fit:contain;margin:0 auto} body.cr-site .product-card.is-feature .product-caption{ /* top:50% — the original left top/bottom auto, so the