/* Premium layer v1 — opening screen (header + hero).
   Keeps the existing identity: white floating header, brand red, warm cream ground,
   DM Sans with Cormorant Garamond italic accents. Loaded last; scoped by [data-premium]. */
:root{
  --p-ease:cubic-bezier(.2,.8,.2,1);
  /* Opening entrance: starts unhurried and settles softly — the snappier --p-ease made copy "jump" into place. */
  --p-enter:cubic-bezier(.33,.08,.24,1);
  --p-spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.089 24.1%,1.085 25.9%,1.06 28.7%,.998 34.8%,.979 38.4%,.976 42.5%,1.001 54.8%,1.003 61.2%,1);
  --p-shadow:0 14px 34px -18px rgba(70,40,25,.38);
}

/* Shared: status chip, stacked headline lines, hand-drawn swash, arrow button. */
.hero.hero-full[data-premium] .hero-line{display:block}
.hero.hero-full[data-premium] em.hero-line{position:relative}
.hero-swash{display:block;width:min(230px,62%);height:20px;margin:0 auto;overflow:visible}
.hero-swash path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:0;opacity:.75;animation:p-draw 1.3s var(--p-ease) .95s both}
.hero-status{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 15px 0 12px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.01em;background:rgba(255,255,255,.86);color:var(--ink);box-shadow:0 8px 22px -12px rgba(70,40,25,.45);margin:0 0 18px}
.hero-dot{position:relative;width:8px;height:8px;border-radius:999px;background:#c9b8a8;flex-shrink:0}
.hero-dot.is-open{background:#3f9b55}
.hero-dot.is-open::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#3f9b55;animation:p-live 2.2s ease-out infinite}
.hero.hero-full[data-premium] .btn-arrow{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin-right:-12px;border-radius:999px;background:rgba(255,255,255,.18);transition:transform .55s var(--p-spring)}
.hero.hero-full[data-premium] .btn-arrow .icon{width:17px;height:17px}
.hero.hero-full[data-premium] .btn:active .btn-arrow{transform:translateX(5px)}
.hero.hero-full[data-premium] .btn{transition:transform .55s var(--p-spring),background-color .3s,box-shadow .3s}
.hero.hero-full[data-premium] .btn:active{transform:scale(.97)}
.hero-secondary{display:flex;align-items:center;gap:28px}


/* ===== Header: floating islands that merge into one glass capsule on scroll =====
   Left island: menu + city. Centre: the logo on its own. Right island: search, account, cart.
   Scrolling down tucks it away; any upward scroll brings it back. */
/* Safety net: nothing may widen the page sideways (clip, unlike hidden, keeps position:sticky working). */
html,body{overflow-x:clip}
:root{--p-island:rgba(255,255,255,.8);--p-island-line:rgba(255,255,255,.72);--p-island-shadow:0 10px 26px -14px rgba(70,40,25,.42)}
body:not(.is-qr-menu) .header[data-premium],body:not(.is-qr-menu).is-scrolled .header[data-premium]{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;
  background:transparent;border:1px solid transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background-color .5s var(--p-ease),border-color .5s var(--p-ease),box-shadow .5s var(--p-ease),transform .6s var(--p-ease),top .5s var(--p-ease),height .5s var(--p-ease),max-width .6s var(--p-ease);
  animation:p-drop 1.1s var(--p-enter) .05s backwards}
.header[data-premium] .header-left,.header[data-premium] .header-actions{display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--p-island);border:1px solid var(--p-island-line);box-shadow:var(--p-island-shadow);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);transition:background-color .5s var(--p-ease),box-shadow .5s var(--p-ease),border-color .5s var(--p-ease)}
.header[data-premium] .header-left{justify-self:start}
.header[data-premium] .header-actions{justify-self:end}
.header[data-premium] .brand{justify-self:center;filter:drop-shadow(0 1px 12px rgba(255,255,255,.85));transition:width .55s var(--p-ease),filter .5s}
.header[data-premium] .menu-trigger,.header[data-premium] .header-search,.header[data-premium] .header-account{border-radius:999px;transition:background-color .25s,transform .5s var(--p-spring)}
.header[data-premium] :is(.menu-trigger,.header-search,.header-account,.header-city,.bag-button):active{transform:scale(.92)}
.header[data-premium] :is(.menu-trigger,.header-search,.header-account):hover{background:rgba(40,37,41,.06)}
.header[data-premium] .header-city{border-radius:999px;transition:background-color .25s,transform .5s var(--p-spring)}
.header[data-premium] .header-city>i:last-child{display:none}
.header[data-premium] .bag-button{position:relative;transition:transform .5s var(--p-spring),background-color .3s}
body:not(.is-qr-menu).is-scrolled .header[data-premium]{background:rgba(255,255,255,.84);border-color:rgba(255,255,255,.85);box-shadow:0 16px 36px -20px rgba(70,40,25,.45);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%)}
.is-scrolled .header[data-premium] .header-left,.is-scrolled .header[data-premium] .header-actions{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.is-scrolled .header[data-premium] .brand{filter:none}
body.header-tucked:not(.is-qr-menu) .header[data-premium]{transform:translateY(calc(-100% - 28px))}
/* The old reading-progress line reads as a stray mark inside a capsule; the new header drops it. */
.header[data-premium]::after{display:none}
.header[data-premium].cart-pulse .bag-button{animation:p-bag .6s var(--p-spring)}
@keyframes p-bag{40%{transform:scale(1.16)}}

@media (max-width:760px){
  /* On phones the header is the compact capsule from the first frame: same size before and
     after scrolling, so three icons never get squeezed inside a separate island. Over the
     hero the glass is a touch lighter; scrolling only firms it up. */
  body:not(.is-qr-menu) .header[data-premium],body:not(.is-qr-menu).is-scrolled .header[data-premium]{top:calc(8px + env(safe-area-inset-top,0px));left:10px;right:10px;width:calc(100% - 20px);height:52px;padding:0 2px;border-radius:999px;gap:6px}
  body:not(.is-qr-menu) .header[data-premium]{background:rgba(255,255,255,.74);border-color:rgba(255,255,255,.8);box-shadow:0 12px 30px -18px rgba(70,40,25,.42);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
  .header[data-premium] .header-left,.header[data-premium] .header-actions{padding:3px;gap:0;background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .header[data-premium] .brand{filter:none}
  .header[data-premium] .menu-trigger{width:36px;min-width:36px;height:40px;justify-content:center;padding:0}
  .header[data-premium] .menu-trigger .icon{width:21px;height:21px}
  .header[data-premium] .header-city{display:flex;align-items:center;gap:5px;height:40px;padding:0 10px 0 8px;max-width:121px;font-size:13.5px;font-weight:500;color:var(--ink);border-radius:999px}
  .header[data-premium] .header-city span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .header[data-premium] .header-city .icon{width:15px;height:15px;color:var(--red-dark)}
  /* Long names (a neighbourhood such as "Ahmet Yesevi") keep their pin and a readable size; the old
     header hid the icon and shrank the text past 10 letters. */
  .header[data-premium] .header-city>i:first-child{display:inline-flex;flex:none}
  .header[data-premium] .header-city span[data-long=true]{font-size:12.5px;letter-spacing:-.01em}
  .header[data-premium] .brand,.is-scrolled .header[data-premium] .brand{width:84px}
  .header[data-premium] .header-search,.header[data-premium] .bag-button{width:36px;height:40px;min-height:40px;padding:0;display:grid;place-items:center;border-radius:999px}
  .header[data-premium] .header-search .icon,.header[data-premium] .bag-button .icon{width:20px;height:20px}
  .header[data-premium] .cart-count{position:absolute;top:1px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--red)!important;color:#fff!important;border:0;font-size:10.5px;font-weight:600;line-height:18px;text-align:center;transition:transform .5s var(--p-spring),opacity .3s}
  .header[data-premium] .cart-count.is-zero{opacity:0;transform:scale(.4)}
}
@media (max-width:355px){
  .header[data-premium] .header-city{max-width:96px;font-size:12.5px}
  .header[data-premium] .brand,.is-scrolled .header[data-premium] .brand{width:80px}
  .header[data-premium] :is(.menu-trigger,.header-search,.bag-button){width:34px;min-width:34px}
}
@media (min-width:761px){
  body:not(.is-qr-menu) .header[data-premium],body:not(.is-qr-menu).is-scrolled .header[data-premium]{top:18px;left:24px;right:24px;width:calc(100% - 48px);max-width:1360px;height:64px;padding:0;border-radius:999px}
  body:not(.is-qr-menu).is-scrolled .header[data-premium]{top:12px;max-width:1180px;padding:0 6px}
  .header[data-premium] .header-left,.header[data-premium] .header-actions{padding:5px;gap:4px}
  .header[data-premium] .menu-trigger{height:46px;padding:0 16px 0 12px;gap:10px}
  .header[data-premium] .header-city{height:46px;padding:0 18px 0 14px;gap:7px;border-radius:999px}
  .header[data-premium] .header-search,.header[data-premium] .header-account{width:46px;height:46px;display:grid;place-items:center}
  .header[data-premium] .bag-button{height:46px;min-height:46px;padding:0 18px;border-radius:999px}
  .header[data-premium] .brand{width:150px}
  .is-scrolled .header[data-premium] .brand{width:124px}
}
@media (prefers-reduced-motion:reduce){body.header-tucked .header[data-premium]{transform:none}}

@keyframes p-draw{from{stroke-dashoffset:260}}
@keyframes p-live{from{transform:scale(1);opacity:.55}70%,to{transform:scale(2.8);opacity:0}}
@keyframes p-settle{from{transform:scale(1.045)}to{transform:none}}
/* Entrances: a short rise with a soft fade-in, transform and opacity only (cheap for the GPU). They run
   while the splash fades, so nothing is ever blank on screen. */
@keyframes p-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes p-drop{from{opacity:0;translate:0 -10px}}

@media (max-width:760px){
  /* Hero, sized from the photo itself: in the mobile shot the tea glass starts at 26% of the
     image height and the plates end at 68%. The image is shown full-width (height = 168.6vw), so
     the tea is placed 16px under the floating header (safe area + 76px) and the photo area ends
     42px under the plates. Everything — chip, headline, both buttons and the rating — fits above
     Safari's bottom bar on a 6.1" iPhone. */
  .hero.hero-full[data-premium]{--hero-photo:min(calc(env(safe-area-inset-top,0px) + 118px + 70.8vw),56svh);height:auto;min-height:0;display:block;padding:0 0 30px;overflow:hidden}
  .hero.hero-full[data-premium] .hero-media{position:relative;inset:auto;z-index:0;height:var(--hero-photo);height:round(var(--hero-photo),1px);overflow:visible;isolation:isolate;transform:none}
  /* One overlay reaching well past the photo area: the photo melts into cream with no clip edge
     anywhere, even while it drifts on scroll. */
  .hero.hero-full[data-premium] .hero-media::after{content:"";position:absolute;inset:0 0 -330px;z-index:1;background:linear-gradient(180deg,rgba(242,233,220,0) calc(var(--hero-photo) - 80px),rgba(242,233,220,.62) calc(var(--hero-photo) - 36px),rgb(242,233,220) calc(var(--hero-photo) - 4px));pointer-events:none}
  .hero.hero-full[data-premium] .hero-media picture{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 76px - 43.8vw);bottom:auto;display:block;width:auto;height:auto}
  .hero.hero-full[data-premium] .hero-media img{position:static;display:block;width:100%;height:auto;object-fit:fill;-webkit-mask-image:none;mask-image:none;animation:p-settle 2.2s var(--p-enter) both}
  .hero.hero-full[data-premium] .hero-shade{display:none}
  .hero.hero-full[data-premium] .hero-content{position:relative;inset:auto;z-index:2;max-width:none;margin:-50px 0 0;padding:0 max(22px,env(safe-area-inset-right,0px)) 0 max(22px,env(safe-area-inset-left,0px));text-align:center;transform:none}
  .hero.hero-full[data-premium] .hero-content>*{animation:p-rise 1s var(--p-enter) both}
  .hero.hero-full[data-premium] .hero-content>.hero-status{animation-delay:.12s}
  .hero.hero-full[data-premium] .hero-content>h1{animation-delay:.2s}
  .hero.hero-full[data-premium] .hero-content>.hero-cta{animation-delay:.3s}
  .hero.hero-full[data-premium] .hero-content>.hero-rating{animation-delay:.38s}
  .hero.hero-full[data-premium] .hero-status{margin:0 0 14px;background:rgba(255,255,255,.92);color:var(--ink);white-space:nowrap;box-shadow:0 10px 24px -14px rgba(40,25,18,.6)}
  .hero.hero-full[data-premium] .hero-kicker{display:none}
  .hero.hero-full[data-premium] h1{margin:0;font-size:40px;line-height:1.02;font-weight:500;letter-spacing:-.045em;color:var(--ink)}
  .hero.hero-full[data-premium] h1 em{display:block;margin-top:3px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:55px;line-height:.98;letter-spacing:-.02em;color:var(--red-dark)}
  .hero.hero-full[data-premium] .hero-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:420px;margin:18px auto 0}
  .hero.hero-full[data-premium] .hero-cta>.btn{width:100%;height:60px;min-height:60px;padding:0 28px;border-radius:999px;justify-content:center;gap:14px;font-size:17.5px;letter-spacing:-.01em;font-weight:600;line-height:1;box-shadow:0 18px 34px -16px rgba(188,7,17,.6)}
  .hero.hero-full[data-premium] .hero-all-link{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:999px;border:1px solid rgba(170,151,134,.42);background:rgba(255,255,255,.78);color:var(--ink);font-size:16.5px;font-weight:500;transition:transform .5s var(--p-spring),background-color .3s}
  .hero.hero-full[data-premium] .hero-all-link:active{transform:scale(.97);background:#fff}
  .hero.hero-full[data-premium] .hero-all-link .icon{width:20px;height:20px;color:var(--red-dark)}
  .hero.hero-full[data-premium] .hero-cta>.btn .btn-arrow{width:36px;height:36px;margin-right:-14px}
  .hero.hero-full[data-premium] .hero-cta>.btn .btn-arrow .icon{width:18px;height:18px}
  .hero.hero-full[data-premium] .hero-rating{margin-top:12px}
}
@media (max-width:355px){
  .hero.hero-full[data-premium] h1{font-size:36px}
  .hero.hero-full[data-premium] h1 em{font-size:50px}
}
@media (prefers-reduced-motion:reduce){
  .header,.hero.hero-full[data-premium] .hero-media img,.hero.hero-full[data-premium] .hero-content>*,.hero-swash path,.hero-dot.is-open::after{animation:none!important}
}

/* ===== Opening paths: "Ne hazırlayalım?" =====
   Right under the opening photo: two paths, one full-width card per row on phones (side by side on
   desktop), and a quiet row for browsing every product. Photos are placeholders until the
   new shoot. */
/* ===== Opening scene =====
   Every entrance waits (paused on its first frame) behind the splash and starts the moment app.js
   lifts it (html.is-ready): the photo settles, the header drops in, then chip, headline, buttons
   and rating rise in one sequence while the splash fades. */
html:not(.is-ready) .header,html:not(.is-ready) .header *,html:not(.is-ready) .hero-full,html:not(.is-ready) .hero-full *{animation-play-state:paused!important}

/* Google rating under the opening buttons (placeholders until the business supplies the values). */
.hero-rating{display:inline-flex;align-items:center;justify-content:center;gap:9px;max-width:none;font-size:13.5px;line-height:1.3;color:var(--muted);white-space:nowrap;text-decoration:none}
.hero-rating b{font-weight:600;color:var(--ink)}
.hero-rating[hidden]{display:none}
a.hero-rating{-webkit-tap-highlight-color:transparent}
/* Two rows of stars: a pale one, and a gold one clipped to the score (4,6 → 92%). */
.hero-stars{position:relative;display:inline-flex}
.hero-stars>span{display:inline-flex;gap:1px}
.hero-stars>span:first-child{color:rgba(211,154,44,.3)}
.hero-stars>span:last-child{position:absolute;inset:0;color:#d39a2c;clip-path:inset(0 calc(100% - var(--fill,100%)) 0 0)}
.hero-stars svg{width:14px;height:14px;fill:currentColor;stroke:none}
@media (min-width:761px){
  .hero.hero-full[data-premium] .hero-all-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink)}
  .hero.hero-full[data-premium] .hero-all-link .icon{width:18px;height:18px;color:var(--red-dark)}
  .hero.hero-full[data-premium] .hero-rating{display:flex;justify-content:flex-start;margin-top:22px}
}
.paths[data-premium]{max-width:1240px;margin:0 auto;padding:36px 16px 6px}
.paths-head{max-width:520px;margin:0 auto 22px;text-align:center}
.paths-head .eyebrow{justify-content:center}
.paths-head h2{margin:8px 0 6px;font-size:34px;line-height:1.05;font-weight:500;letter-spacing:-.04em;color:var(--ink)}
.paths-head h2 em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:1.3em;letter-spacing:-.02em;color:var(--red-dark)}
.paths-head p{margin:0;font-size:15.5px;line-height:1.5;color:var(--muted)}
.paths-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.path-card{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;isolation:isolate;border-radius:24px;background:#e9dccb;color:#fff;text-decoration:none;box-shadow:0 18px 34px -24px rgba(70,40,25,.6);-webkit-tap-highlight-color:transparent;transition:transform .55s var(--p-spring)}
.path-card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--p-ease)}
.path-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(30,19,14,0) 36%,rgba(30,19,14,.74) 100%)}
.path-copy{position:absolute;left:18px;right:70px;bottom:18px;display:grid;gap:4px}
.path-copy strong{font-size:23px;font-weight:600;line-height:1.12;letter-spacing:-.025em}
.path-copy small{font-size:14px;line-height:1.35;color:rgba(255,255,255,.86)}
.path-arrow{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:var(--red);color:#fff;box-shadow:0 10px 22px -10px rgba(188,7,17,.7);transition:transform .55s var(--p-spring),background-color .3s}
.path-arrow .icon{width:18px;height:18px}
.path-card:active{transform:scale(.97)}
.path-all{grid-column:1/-1;display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 14px 14px 16px;border-radius:24px;border:1px solid rgba(170,151,134,.34);background:#fff;color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .55s var(--p-spring)}
.path-all:active{transform:scale(.98)}
.path-thumbs{display:flex;flex:none}
.path-thumbs img{width:44px;height:44px;margin-left:-14px;border:2px solid #fff;border-radius:999px;object-fit:cover;box-shadow:0 6px 12px -8px rgba(40,25,18,.6)}
.path-thumbs img:first-child{margin-left:0}
.path-all .path-copy{position:static;flex:1;min-width:0;gap:2px}
.path-all .path-copy strong{font-size:16px;letter-spacing:-.01em}
.path-all .path-copy small{font-size:12.5px}
.path-all .path-copy small{color:var(--muted)}
.path-all .path-arrow{position:static;flex:none;width:36px;height:36px;background:var(--ink);color:#fff;box-shadow:none}
.path-all .path-arrow .icon{width:16px;height:16px}
@media (hover:hover){
  .path-card:hover img{transform:scale(1.05)}
  .path-card:hover .path-arrow,.path-all:hover .path-arrow{transform:translateX(3px)}
}
@media (max-width:355px){.path-copy strong{font-size:20px}.path-copy small{font-size:13px}}
@media (min-width:761px){
  .paths[data-premium]{padding:72px 32px 12px}
  .paths-head{margin-bottom:34px}
  .paths-head h2{font-size:52px}
  .paths-head p{font-size:17px}
  .paths-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .path-card{aspect-ratio:4/3}
  .path-copy strong{font-size:26px}
  .path-copy small{font-size:14.5px}
  .path-all{min-height:88px;padding:18px 20px}
}
/* Interim page for a path whose flow is not built yet: shows the planned steps. */
.flow-soon[data-premium]{max-width:640px;margin:0 auto;padding-top:92px}
@media (min-width:761px){.flow-soon[data-premium]{padding-top:130px}}
.flow-soon .flow-lead{margin:10px 0 22px;font-size:17px;line-height:1.6;color:var(--muted)}
.flow-steps{counter-reset:step;display:grid;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.flow-steps li{counter-increment:step;display:flex;align-items:center;gap:14px;min-height:56px;padding:0 18px;border-radius:18px;border:1px solid rgba(170,151,134,.3);background:#fff;font-size:16px;font-weight:500;color:var(--ink)}
.flow-steps li::before{content:counter(step);display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:999px;background:var(--cream,#f2e9dc);color:var(--red-dark);font-size:14px;font-weight:600}
.flow-soon .flow-note{margin:0 0 18px;font-size:14.5px;color:var(--muted)}

/* Focus rings are for keyboard users only (body.keyboard-navigation is set on Tab). A tap — or a dialog
   placing focus on its first button — must never leave a red outline on a phone. */
body:not(.keyboard-navigation) :focus-visible{outline:none}
.sheet-body:focus{outline:none}

/* ===== "Nereye gönderelim?" — bottom sheet on phones, floating card on desktop =====
   Steps slide sideways (back slides the other way); the sheet rises from the bottom, drops away
   when closed, and can be pulled down by its grip. */
/* display only while open: a plain display rule would override the closed dialog's hidden state */
dialog.sheet{flex-direction:column;height:auto;max-width:none;padding:0;border:0;color:var(--ink);background:#fcfaf7;overflow:hidden}
dialog.sheet[open]{display:flex}
dialog.sheet>div{display:flex;flex-direction:column;flex:1;min-height:0}
dialog.sheet::backdrop{background:rgba(32,22,18,.36);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:p-fade .35s ease both}
dialog.sheet.is-closing::backdrop{animation:p-fade-out .28s ease both}
@media (max-width:760px){
  dialog.sheet{position:fixed;inset:auto 0 0;width:100%;max-width:none;height:auto;max-height:min(88dvh,740px);margin:0;border-radius:28px 28px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -24px 60px -24px rgba(40,25,18,.4)}
  dialog.sheet[open]{animation:p-sheet-up .55s var(--p-ease) both}
  dialog.sheet.is-closing{animation:p-sheet-down .28s cubic-bezier(.4,0,1,1) both}
}
@media (min-width:761px){
  dialog.sheet{margin:auto;width:min(480px,calc(100% - 32px));max-height:min(82vh,760px);border-radius:28px;box-shadow:0 40px 90px -40px rgba(40,25,18,.5)}
  dialog.sheet[open]{animation:p-sheet-pop .45s var(--p-ease) both}
  dialog.sheet.is-closing{animation:p-sheet-sink .22s ease-in both}
  .sheet .sheet-grip{visibility:hidden;height:2px;margin-top:6px}
}
@keyframes p-sheet-up{from{transform:translateY(100%)}}
@keyframes p-sheet-down{to{transform:translateY(100%)}}
@keyframes p-sheet-pop{from{transform:translateY(18px) scale(.97);opacity:0}}
@keyframes p-sheet-sink{to{transform:translateY(10px) scale(.98);opacity:0}}
@keyframes p-fade{from{opacity:0}}
@keyframes p-fade-out{to{opacity:0}}
@keyframes p-step-in{from{transform:translateX(28px)}}
@keyframes p-step-back{from{transform:translateX(-28px)}}
@keyframes p-pop{from{transform:scale(.55)}}
.sheet-grip{flex:none;width:42px;height:5px;margin:10px auto 0;border-radius:999px;background:rgba(40,37,41,.16);touch-action:none;cursor:grab}
.sheet-head{flex:none;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;padding:8px 14px 10px;touch-action:none}
.sheet-head h2{margin:0;text-align:center;font-size:18.5px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sheet-head .icon-button{width:40px;height:40px;padding:0;border-radius:999px;background:rgba(40,37,41,.06);color:var(--ink);display:grid;place-items:center}
.sheet-head .icon-button .icon{width:19px;height:19px}
.sheet-head-space{width:40px;height:40px}
.sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px 18px 24px;animation:p-step-in .42s var(--p-ease) both}
.sheet-body.is-back{animation-name:p-step-back}
.sheet-lead{margin:0 6px 18px;text-align:center;font-size:15px;line-height:1.5;color:var(--muted)}
.place-options{display:grid;gap:10px}
.place-option{display:grid;grid-template-columns:50px minmax(0,1fr) 18px;align-items:center;gap:14px;width:100%;min-height:82px;padding:14px 16px;border-radius:22px;border:1px solid rgba(170,151,134,.32);background:#fff;text-align:left;color:var(--ink);transition:transform .5s var(--p-spring),border-color .3s,box-shadow .3s}
.place-option:active{transform:scale(.98)}
.place-current{display:inline-flex;align-items:center;gap:4px;margin-top:2px;font-size:12.5px;font-weight:500;color:#2f7d45}
.place-current .icon{width:13px;height:13px;stroke-width:2.4}
.place-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:#f5ede3;color:var(--red-dark)}
.place-icon .icon{width:23px;height:23px}
.place-copy{display:grid;gap:3px;min-width:0}
.place-copy strong{font-size:17.5px;font-weight:600;letter-spacing:-.015em}
.place-copy small{font-size:13.5px;line-height:1.35;color:var(--muted)}
.place-option>.icon:last-child{width:18px;height:18px;color:var(--muted)}
.place-search{display:flex;align-items:center;gap:10px;height:54px;padding:0 18px;border-radius:999px;border:1px solid rgba(170,151,134,.38);background:#fff;transition:border-color .25s,box-shadow .25s}
.place-search:focus-within{border-color:rgba(188,7,17,.6);box-shadow:0 0 0 3px rgba(227,6,19,.08)}
.place-search .icon{width:19px;height:19px;color:var(--muted)}
.place-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:16px;color:var(--ink)}
.place-locate{display:inline-flex;align-items:center;gap:8px;height:40px;margin:12px 0 0;padding:0 16px 0 12px;border-radius:999px;background:#f5ede3;color:var(--red-dark);font-size:14.5px;font-weight:600;transition:transform .5s var(--p-spring),opacity .2s}
.place-locate .icon{width:18px;height:18px}
.place-locate:active{transform:scale(.96)}
.place-locate.is-busy{opacity:.55;pointer-events:none}
.place-error{margin:10px 4px 0;font-size:13.5px;line-height:1.45;color:var(--red-dark)}
.place-error:empty{display:none}
.place-districts{display:flex;gap:8px;margin:16px -18px 2px;padding:2px 18px 6px;overflow-x:auto;scrollbar-width:none}
.place-districts::-webkit-scrollbar{display:none}
.place-chip{flex:none;height:36px;padding:0 15px;border-radius:999px;border:1px solid rgba(170,151,134,.38);background:#fff;font-size:13.5px;font-weight:500;color:var(--ink);transition:background-color .2s,color .2s,border-color .2s}
.place-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.place-results{margin-top:4px}
.place-hint{margin:14px 4px 4px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.place-empty{margin:18px 4px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.place-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:60px;padding:10px 6px;border-bottom:1px solid rgba(170,151,134,.2);text-align:left;color:var(--ink);transition:background-color .2s}
.place-row:last-child{border-bottom:0}
.place-row:active{background:rgba(40,37,41,.04)}
.place-row strong{display:block;font-size:16px;font-weight:500;letter-spacing:-.01em}
.place-row small{font-size:12.5px;color:var(--muted)}
.place-row em{flex:none;font-style:normal;font-size:14.5px;font-weight:600;color:var(--ink)}
/* Out of courier range: a quiet tag instead of a price (fees appear once a neighbourhood is chosen) */
.place-row .place-tag{padding:3px 9px;border-radius:999px;background:#f4ede6;font-size:12.5px;font-weight:600;color:var(--muted)}
.place-row>.icon{width:17px;height:17px;color:var(--muted)}
.place-result{display:grid;justify-items:center;text-align:center;padding:6px 0 0}
.place-check{display:grid;place-items:center;width:60px;height:60px;border-radius:999px;background:#3f9b55;color:#fff;box-shadow:0 14px 28px -14px rgba(63,155,85,.8);animation:p-pop .6s var(--p-spring) .08s both}
.place-check .icon{width:28px;height:28px;stroke-width:2.4}
.place-result h3{margin:16px 0 2px;font-size:25px;line-height:1.15;font-weight:600;letter-spacing:-.03em}
.place-sub{margin:0;font-size:14.5px;color:var(--muted)}
.place-facts{width:100%;margin:20px 0 14px;padding:2px 18px;border-radius:20px;border:1px solid rgba(170,151,134,.28);background:#fff;text-align:left}
.place-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid rgba(170,151,134,.2)}
.place-facts div:last-child{border-bottom:0}
.place-facts dt{flex:none;font-size:14px;color:var(--muted)}
.place-facts dd{margin:0;font-size:15px;line-height:1.4;font-weight:600;text-align:right;color:var(--ink)}
.place-facts dd small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--muted)}
.place-note{margin:0 4px 16px;font-size:13px;line-height:1.5;color:var(--muted)}
.place-done{width:100%;height:56px;min-height:56px;border-radius:999px;justify-content:center;gap:12px;font-size:16.5px;font-weight:600;box-shadow:0 18px 34px -18px rgba(188,7,17,.6)}
.place-change{margin-top:8px;padding:10px 12px;font-size:14.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){dialog.sheet,dialog.sheet::backdrop,.sheet-body,.place-check,dialog.panel.search-screen{animation:none!important}}

/* ===== Home: category shelves =====
   Each category is a shelf that scrolls sideways (snapping card by card); about two and a third
   cards show on a phone so the next one invites a swipe. */
.shelves[data-premium]{padding:44px 0 24px}
.shelves-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 18px}
.shelves-head h2{margin:0;font-size:28px;line-height:1.1;font-weight:500;letter-spacing:-.04em;color:var(--ink)}
.shelves-count{font-size:14px;color:var(--muted)}
.shelf-nav-sentinel{display:block;height:1px;margin-top:9px}
.shelf-nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:25;display:flex;gap:22px;overflow-x:auto;padding:8px 18px 12px;background:#fcfaf7;border-bottom:1px solid rgba(170,151,134,.22);transition:transform .6s var(--p-ease),box-shadow .3s;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
.shelf-nav::-webkit-scrollbar,.shelf-track::-webkit-scrollbar{display:none}
.shelf-jump{position:relative;flex:none;padding:4px 0;font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--muted);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:color .25s}
.shelf-jump::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transform-origin:50% 50%;transition:transform .4s var(--p-ease)}
.shelf-jump[aria-current="true"]{color:var(--ink)}
.shelf-jump[aria-current="true"]::after{transform:scaleX(1)}
/* Once stuck, the bar is solid (no edge fade) and steps below the header whenever the header shows. */
.shelf-nav.is-stuck{-webkit-mask-image:none;mask-image:none;box-shadow:0 12px 22px -20px rgba(40,25,18,.55)}
body:not(.header-tucked) .shelf-nav.is-stuck{transform:translateY(66px)}
.shelf-jump:active{color:var(--ink)}
.shelf{margin-top:26px;scroll-margin-top:calc(env(safe-area-inset-top,0px) + 132px)}
.shelf-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 18px;margin-bottom:12px}
.shelf-top h3{margin:0;font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.shelf-more{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none}
.shelf-more span{color:var(--ink)}
.shelf-more .icon{width:15px;height:15px}
.shelf-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(42vw,210px);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:18px;padding:2px 18px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shelf-card{display:flex;flex-direction:column;min-width:0;scroll-snap-align:start}
.shelf-photo{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;overflow:hidden;border-radius:20px;background:#efe4d6;box-shadow:0 14px 28px -22px rgba(70,40,25,.55);-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring)}
.shelf-photo:active{transform:scale(.97)}
.shelf-photo img{display:block;width:100%;height:100%;object-fit:cover}
.shelf-placeholder{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(120% 90% at 30% 20%,#fbf6ef 0%,#f1e6d8 62%,#ead9c6 100%);color:rgba(150,82,58,.5)}
.shelf-placeholder svg{width:46%;height:46%;stroke-width:1.5}
.shelf-placeholder[data-cat="zeytinyagli"],.shelf-placeholder[data-cat="salata-meze"]{background:radial-gradient(120% 90% at 30% 20%,#f8f6ec 0%,#e9e6d4 62%,#dfdbc3 100%);color:rgba(96,104,62,.55)}
.shelf-placeholder[data-cat="tatli"],.shelf-placeholder[data-cat="pasta-kek"]{background:radial-gradient(120% 90% at 30% 20%,#fcf4f1 0%,#f3e2dc 62%,#ebd2ca 100%);color:rgba(170,60,62,.48)}
.shelf-ship{position:absolute;left:8px;top:8px;display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 6px 14px -8px rgba(40,25,18,.5)}
.shelf-ship .icon{width:16px;height:16px}
.shelf-info{display:flex;flex-direction:column;gap:8px;flex:1;padding:10px 2px 0}
.shelf-info h4{margin:0;min-height:2.6em;font-size:15px;line-height:1.3;font-weight:500;letter-spacing:-.01em}
.shelf-info h4 button{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0;font:inherit;text-align:left;color:var(--ink);-webkit-tap-highlight-color:transparent}
.shelf-buy{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto}
.shelf-buy .price{margin:0;font-size:16px;font-weight:650;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.shelf-buy .price small{margin-left:3px;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}
.shelf-card .card-controls{flex:none}
:is(.shelf-card,.search-item) .add-button{display:grid;place-items:center;width:38px;height:38px;min-height:38px;padding:0;border:0;border-radius:999px;background:var(--red);color:#fff;box-shadow:0 10px 18px -10px rgba(188,7,17,.75);transition:transform .45s var(--p-spring)}
:is(.shelf-card,.search-item) .add-button:active{transform:scale(.9)}
:is(.shelf-card,.search-item) .add-button .icon{width:18px;height:18px;stroke-width:2.2}
:is(.shelf-card,.search-item) .add-button .add-label{display:none}
:is(.shelf-card,.search-item) .add-button:disabled{background:#e9e1d8;color:var(--muted);box-shadow:none;width:auto;padding:0 10px;font-size:12px}
:is(.shelf-card,.search-item) .card-quantity{display:inline-flex;align-items:center;height:38px;margin:0;border:0;border-radius:999px;background:var(--ink);color:#fff;overflow:hidden}
:is(.shelf-card,.search-item) .card-quantity button{display:grid;place-items:center;width:32px;height:38px;color:#fff;background:transparent}
:is(.shelf-card,.search-item) .card-quantity button .icon{width:15px;height:15px;stroke-width:2.2}
:is(.shelf-card,.search-item) .card-quantity output{min-width:18px;font-size:14px;font-weight:600;color:#fff}
:is(.shelf-card,.search-item) .stock-label{font-size:11.5px;color:var(--muted)}
.shelves-all{display:flex;align-items:center;justify-content:center;gap:8px;margin:30px 18px 0;height:52px;border-radius:999px;border:1px solid rgba(170,151,134,.38);background:#fff;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.shelves-all .icon{width:17px;height:17px}
@media (min-width:761px){
  .shelves[data-premium]{max-width:1240px;margin:0 auto;padding:72px 0 40px}
  .shelves-head,.shelf-top{padding-inline:32px}
  .shelves-head h2{font-size:40px}
  .shelf-nav,.shelf-track{padding-inline:32px;scroll-padding-inline:32px}
  .shelf-track{grid-auto-columns:220px;gap:18px}
  .shelves-all{max-width:420px;margin:40px auto 0}
}




/* ===== Cart sheet ===== */
dialog.panel.sheet .panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px 8px 20px;border:0;background:transparent;touch-action:none}
dialog.panel.sheet .panel-header h2{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.panel-count{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:6px;padding:0 7px;border-radius:999px;background:#f1e8dc;font-size:13px;font-weight:600;vertical-align:2px}
dialog.panel.sheet .panel-header .icon-button{width:40px;height:40px;padding:0;border-radius:999px;background:rgba(40,37,41,.06);display:grid;place-items:center}
dialog.panel.sheet .panel-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 18px 18px}
dialog.panel.sheet .panel-footer{flex:none;padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(170,151,134,.22);background:#fcfaf7}
.cart-place{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:18px;border:1px solid rgba(170,151,134,.3);background:#fff;text-align:left;color:var(--ink)}
.cart-place.is-empty{border-color:rgba(188,7,17,.35);background:#fff8f6}
.cart-place-icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:14px;background:#f5ede3;color:var(--red-dark)}
.cart-place-icon .icon{width:19px;height:19px}
.cart-place-copy{display:grid;gap:2px;flex:1;min-width:0}
.cart-place-copy strong{font-size:15.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-place-copy strong em{font-style:normal;font-weight:400;color:var(--muted)}
.cart-place-copy small{font-size:13px;color:var(--muted)}
.cart-place-change{flex:none;font-size:14px;font-weight:600;color:var(--red-dark)}
.cart-lines{margin-top:6px}
.cart-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 0;border-bottom:1px solid rgba(170,151,134,.2)}
.cart-line:last-child{border-bottom:0}
.cl-photo{display:block;width:64px;height:64px;padding:0;overflow:hidden;border-radius:14px;background:#efe4d6}
.cl-photo img{display:block;width:100%;height:100%;object-fit:cover}
.cl-info{min-width:0}
.cl-info h3{margin:2px 0 2px;font-size:15.5px;line-height:1.3;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.cl-unit{margin:0;font-size:13px;color:var(--muted)}
.cl-info .stock-label{display:block;margin-top:4px;font-size:12px;color:var(--red-dark)}
.cl-remove{margin-top:6px;padding:0;font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.cl-side{display:grid;justify-items:end;gap:8px}
.cl-side .price{margin:2px 0 0;font-size:15.5px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.cl-qty{display:inline-flex;align-items:center;height:36px;margin:0;border:1px solid rgba(170,151,134,.4);border-radius:999px;background:#fff;overflow:hidden}
.cl-qty button{display:grid;place-items:center;width:32px;height:36px;background:transparent;color:var(--ink)}
.cl-qty button .icon{width:14px;height:14px;stroke-width:2.2}
.cl-qty output{min-width:18px;text-align:center;font-size:14px;font-weight:600}
.cart-pairs{margin:18px -18px 0;padding:16px 0 4px;border-top:1px solid rgba(170,151,134,.2)}
.cart-pairs h3{margin:0 18px 10px;font-size:16.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.pair-track{display:grid;grid-auto-flow:column;grid-auto-columns:124px;gap:10px;overflow-x:auto;padding:0 18px 4px;scroll-snap-type:x mandatory;scroll-padding-inline:18px;scrollbar-width:none}
.pair-track::-webkit-scrollbar{display:none}
.pair-card{display:flex;flex-direction:column;gap:6px;scroll-snap-align:start}
.pair-photo{display:block;width:124px;height:124px;padding:0;overflow:hidden;border-radius:16px;background:#efe4d6}
.pair-photo img{display:block;width:100%;height:100%;object-fit:cover}
.pair-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;min-height:2.6em;font-size:13.5px;line-height:1.3;color:var(--ink)}
.pair-buy{display:flex;align-items:center;justify-content:space-between}
.pair-buy span{font-size:14px;font-weight:650}
.pair-add{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:var(--red);color:#fff}
.pair-add .icon{width:15px;height:15px;stroke-width:2.2}
dialog.panel.sheet .coupon-control{margin-top:16px;border-radius:16px;border:1px solid rgba(170,151,134,.28);background:#fff;padding:0 14px}
dialog.panel.sheet .coupon-control summary{display:flex;align-items:center;justify-content:space-between;height:48px;font-size:14.5px;font-weight:500;color:var(--ink);list-style:none;cursor:pointer}
dialog.panel.sheet .coupon-control summary::-webkit-details-marker{display:none}
dialog.panel.sheet .coupon-control>div{display:flex;gap:8px;padding:0 0 12px}
dialog.panel.sheet .coupon-control input{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(170,151,134,.4);font-size:16px;text-transform:uppercase}
dialog.panel.sheet .coupon-control .btn{height:44px;min-height:44px;padding:0 16px;border-radius:999px}
dialog.panel.sheet #coupon-status{margin:0 0 8px;font-size:13px;color:var(--muted)}
dialog.panel.sheet #coupon-status:empty{display:none}
dialog.panel.sheet #cart-totals .total-line{display:flex;justify-content:space-between;gap:12px;margin:0 0 6px;font-size:14px;color:var(--muted)}
dialog.panel.sheet #cart-totals .total-line.grand{margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(170,151,134,.22);font-size:16px;font-weight:650;color:var(--ink)}
dialog.panel.sheet #cart-totals .tax-note{display:none}
.cart-go{display:flex;align-items:center;gap:10px;width:100%;height:56px;min-height:56px;margin-top:12px;padding:0 20px;border-radius:999px;font-size:16.5px;font-weight:600;box-shadow:0 18px 34px -18px rgba(188,7,17,.6)}
.cart-go>span:first-child{flex:1;text-align:left}
.cart-go-total{font-weight:650}
.cart-go .icon{width:18px;height:18px}
.cart-empty{display:grid;justify-items:center;gap:6px;padding:26px 8px 18px;text-align:center}
.cart-empty-mark{display:grid;place-items:center;width:64px;height:64px;margin-bottom:6px;border-radius:999px;background:#f5ede3;color:var(--red-dark)}
.cart-empty-mark .icon{width:28px;height:28px}
.cart-empty h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em}
.cart-empty p{margin:0 0 12px;font-size:15px;color:var(--muted)}
.cart-empty .btn{height:52px;min-height:52px;padding:0 24px;border-radius:999px}
.cart-empty-link{margin-top:4px;padding:10px;font-size:14.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* ===== Floating cart capsule (phones) =====
   Scoped by id: the old bar styled every button inside it as a red rectangle. */
@media (max-width:760px){
  #mobile-cart-bar.mobile-cart-bar{position:fixed;left:50%;right:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:block;width:min(calc(100% - 28px),440px);height:auto;margin:0;padding:0;border:0;background:none;box-shadow:none;transform:translateX(-50%)}
  #mobile-cart-bar.mobile-cart-bar[hidden]{display:none}
  #mobile-cart-bar .cart-capsule{display:flex;align-items:center;gap:12px;width:100%;height:60px;padding:0 7px 0 9px;border-radius:999px;background:rgba(34,30,32,.94);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -16px rgba(30,20,15,.7);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring)}
  #mobile-cart-bar .cart-capsule:active{transform:scale(.98)}
  /* the last three products, overlapping, the newest in front */
  #mobile-cart-bar .cc-thumbs{display:flex;flex:none;align-items:center;padding-left:2px}
  #mobile-cart-bar .cc-thumb{position:relative;display:block;width:40px;height:40px;overflow:hidden;border-radius:999px;background:#efe4d6;box-shadow:0 0 0 2px #221e20}
  #mobile-cart-bar .cc-thumb+.cc-thumb{margin-left:-14px}
  #mobile-cart-bar .cc-thumb:nth-child(1){z-index:3}
  #mobile-cart-bar .cc-thumb:nth-child(2){z-index:2;filter:brightness(.86)}
  #mobile-cart-bar .cc-thumb:nth-child(3){z-index:1;filter:brightness(.72)}
  #mobile-cart-bar .cc-thumb img{display:block;width:100%;height:100%;object-fit:cover}
  #mobile-cart-bar .cc-thumb .shelf-placeholder svg{width:62%;height:62%}
  #mobile-cart-bar .cc-thumb.is-new{animation:cc-thumb-in .6s var(--p-spring) both}
  #mobile-cart-bar .cc-text{display:grid;flex:1;min-width:0;gap:1px;text-align:left;line-height:1.15}
  #mobile-cart-bar .cc-text small{font-size:12px;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.62)}
  #mobile-cart-bar .cc-total{font-size:17px;font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
  #mobile-cart-bar .cc-go{display:grid;place-items:center;flex:none;width:46px;height:46px;padding:0;border-radius:999px;background:var(--red);box-shadow:0 10px 20px -10px rgba(227,6,19,.8);transition:transform .5s var(--p-spring)}
  #mobile-cart-bar .cc-go .icon{width:19px;height:19px;stroke-width:2.1}
  #mobile-cart-bar .cart-capsule:active .cc-go{transform:translateX(3px)}
  #mobile-cart-bar.cc-pulse .cart-capsule{animation:p-capsule .7s var(--p-spring)}
}
/* one soft breath when something is added */
@keyframes p-capsule{35%{transform:scale(1.03)}}
@keyframes cc-thumb-in{from{transform:translateX(-16px) scale(.55);opacity:0}}

/* ===== Full-screen search ===== */
dialog.panel.search-screen{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#fcfaf7;box-shadow:none;animation:p-search-in .32s var(--p-ease) both}
dialog.panel.search-screen::backdrop{background:transparent}
dialog.panel.search-screen #panel-content{display:flex;flex-direction:column;height:100%}
.search-top{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 12px;border-bottom:1px solid rgba(170,151,134,.2)}
.search-field{display:flex;align-items:center;gap:10px;flex:1;height:50px;padding:0 16px;border-radius:999px;border:1px solid rgba(170,151,134,.38);background:#fff}
.search-field:focus-within{border-color:rgba(188,7,17,.55);box-shadow:0 0 0 3px rgba(227,6,19,.07)}
.search-field .icon{width:19px;height:19px;color:var(--muted)}
.search-field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:16.5px;color:var(--ink)}
.search-field input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-cancel{flex:none;padding:8px 2px;font-size:15.5px;font-weight:500;color:var(--ink)}
.search-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px calc(28px + env(safe-area-inset-bottom,0px))}
.search-block{margin-top:20px}
.search-block-top{display:flex;align-items:baseline;justify-content:space-between}
.search-label{margin:14px 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.search-block .search-label{margin-top:0}
.search-clear{padding:4px 0;font-size:13.5px;color:var(--muted)}
.search-recent{display:flex;flex-direction:column}
.search-recent-item{display:flex;align-items:center;gap:12px;height:48px;border-bottom:1px solid rgba(170,151,134,.18);font-size:15.5px;color:var(--ink);text-align:left}
.search-recent-item .icon{width:16px;height:16px;color:var(--muted)}
.search-cats{display:flex;flex-wrap:wrap;gap:8px}
.search-cat{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;border:1px solid rgba(170,151,134,.36);background:#fff;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
.search-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(170,151,134,.18)}
.search-item-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:0;text-align:left;color:var(--ink)}
.search-thumb{flex:none;width:56px;height:56px;overflow:hidden;border-radius:14px;background:#efe4d6}
.search-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.search-copy{display:grid;gap:2px;min-width:0}
.search-copy strong{overflow:hidden;font-size:15.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.search-copy small{overflow:hidden;font-size:13px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.search-item .card-controls{flex:none}
.search-empty>p:first-child{margin:22px 0 4px;font-size:16px;color:var(--ink)}
@keyframes p-search-in{from{opacity:0;transform:translateY(14px)}}

/* ===== Home: kitchen story, facts, FAQ ===== */
.home-story[data-premium]{margin:52px 16px 0;padding:0;overflow:hidden;border-radius:28px;background:#f2e9dc;text-align:left;box-shadow:0 26px 50px -40px rgba(60,30,20,.7)}
.story-photo{position:relative;aspect-ratio:5/4;overflow:hidden;background:#2a2320}
.story-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.02)}
.story-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,12,10,.05) 30%,rgba(18,12,10,.78) 100%)}
.story-photo-copy{position:absolute;left:20px;right:20px;bottom:20px;z-index:1}
.home-story-kicker{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#f2cfc0}
.story-photo-copy h2{margin:6px 0 0;font-size:33px;line-height:1.02;font-weight:500;letter-spacing:-.04em;color:#fff}
.story-photo-copy h2 em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:1.32em;letter-spacing:-.02em;color:#f6dccf}
.story-body{padding:20px 18px 22px}
.home-story-text{margin:0 2px;font-size:16px;line-height:1.6;color:var(--ink)}
.story-proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:18px}
.proof{display:grid;align-content:start;justify-items:start;gap:6px;min-width:0;padding:16px;border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 12px 24px -22px rgba(70,40,25,.6);-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring)}
.proof:active{transform:scale(.97)}
.proof small{display:block;max-width:100%;overflow:hidden;font-size:12.5px;line-height:1.3;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.proof-score{font-family:'Cormorant Garamond',Georgia,serif;font-size:46px;line-height:.82;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.proof-google .hero-stars svg{width:13px;height:13px}
.proof-ig-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#f7e8db,#f1d3c6);color:var(--red-dark)}
.proof-ig-icon .icon{width:20px;height:20px}
.proof-ig strong{margin-top:2px;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.story-more{display:inline-flex;align-items:center;gap:6px;margin:18px 2px 0;padding-bottom:3px;border-bottom:1px solid rgba(40,37,41,.35);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.story-more .icon{width:16px;height:16px}
.home-facts[data-premium]{display:grid;margin:14px 16px 0;padding:2px 16px;border:0;border-radius:24px;background:#fff;box-shadow:0 0 0 1px rgba(170,151,134,.16),0 18px 32px -28px rgba(70,40,25,.65)}
.fact{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid rgba(170,151,134,.18)}
.fact:last-child{border-bottom:0}
.fact-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#f5ede3;color:var(--red-dark)}
.fact-icon .icon{width:19px;height:19px}
.fact strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.fact small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--muted)}
.fact-value{font-size:14.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;text-align:right}
.fact-value:empty{display:none}
.home-faq[data-premium]{max-width:none;margin:48px 16px 0;padding:0 0 52px;text-align:left}
.home-faq[data-premium] h2{margin:0 0 16px;font-size:30px;line-height:1.05;font-weight:500;letter-spacing:-.04em;text-align:left;color:var(--ink)}
.home-faq[data-premium] h2 em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:1.32em;letter-spacing:-.02em;color:var(--red-dark)}
.faq-tabs{display:flex;gap:4px;margin:0 0 14px;padding:4px;border-radius:999px;background:#f2e9dc;overflow-x:auto;scrollbar-width:none}
.faq-tabs::-webkit-scrollbar{display:none}
.faq-tabs button{flex:1 0 auto;height:40px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background-color .3s,color .3s,box-shadow .3s}
.faq-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 6px 16px -10px rgba(40,25,18,.5)}
.faq-panel{display:grid;gap:10px;animation:p-faq-in .38s var(--p-ease) both}
/* Vertical only: a sideways entrance pushed the cards past the screen edge and let the page pan. */
@keyframes p-faq-in{from{opacity:.0;transform:translateY(8px)}}
.faq-panel[hidden]{display:none}
.faq-list details{border:0;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(170,151,134,.16),0 12px 26px -24px rgba(70,40,25,.6)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 16px 16px 18px;font-size:15.5px;line-height:1.35;font-weight:500;color:var(--ink);list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:none;display:none}
.faq-mark{position:relative;flex:none;width:28px;height:28px;border-radius:999px;background:#f5ede3;transition:background-color .35s var(--p-ease)}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;left:9px;right:9px;top:50%;height:1.6px;margin-top:-.8px;border-radius:2px;background:var(--ink);transition:transform .4s var(--p-ease),background-color .35s}
.faq-mark::after{transform:rotate(90deg)}
.faq-list details[open] .faq-mark{background:var(--ink)}
.faq-list details[open] .faq-mark::before,.faq-list details[open] .faq-mark::after{background:#fff}
.faq-list details[open] .faq-mark::after{transform:rotate(0)}
.faq-list details>p{margin:0;padding:0 56px 18px 18px;font-size:14.5px;line-height:1.62;color:var(--muted)}
/* Opening glides where the browser can animate <details> content; elsewhere it simply opens. */
:root{interpolate-size:allow-keywords}
.faq-list details::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--p-ease),content-visibility .4s allow-discrete}
.faq-list details[open]::details-content{block-size:auto}
.faq-help{display:grid;gap:14px;margin-top:16px;padding:18px;border-radius:22px;background:#f2e9dc}
.faq-help p{display:grid;gap:3px;margin:0}
.faq-help strong{font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.faq-help span{font-size:13.5px;color:var(--muted)}
.faq-help-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.faq-help-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:999px;background:#fff;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring)}
.faq-help-btn:active{transform:scale(.97)}
.faq-help-btn.is-primary{background:var(--ink);color:#fff}
.faq-help-btn .icon{width:18px;height:18px}
@media (min-width:761px){
  .home-story[data-premium]{display:grid;grid-template-columns:1.15fr 1fr;max-width:1176px;margin:80px auto 0}
  .story-photo{aspect-ratio:auto;min-height:440px}
  .story-photo-copy{left:36px;bottom:32px}
  .story-photo-copy h2{font-size:46px}
  .story-body{align-self:center;padding:40px 44px}
  .home-story-text{font-size:17px}
  .home-facts[data-premium]{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;max-width:1176px;margin:20px auto 0;padding:6px 28px}
  .fact{border-bottom:0}
  .home-faq[data-premium]{max-width:860px;margin:72px auto 0}
  .home-faq[data-premium] h2{font-size:40px}
  .faq-tabs{display:inline-flex}
  .faq-help{grid-template-columns:1fr auto;align-items:center}
}

/* ===== Footer: a burgundy closing =====
   A last line and the way back to the paths, then the shop's address, phone and hours in plain
   sight, four round contact buttons, a few links and the small legal row. */
.footer[data-premium]{position:relative;margin:0;padding:0 18px calc(112px + env(safe-area-inset-bottom,0px));overflow:hidden;border:0;background:radial-gradient(130% 55% at 50% 0%,#7e2631 0%,#621a24 52%,#4e131b 100%);color:#f6ede3;text-align:center}
.footer[data-premium] .footer-close{padding:58px 0 40px;border-bottom:1px solid rgba(246,237,227,.14)}
.footer[data-premium] .footer-close-line{margin:0;font-size:34px;line-height:1.02;font-weight:500;letter-spacing:-.04em;color:#f6ede3}
.footer[data-premium] .footer-close-line em{display:block;margin-top:2px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:1.38em;letter-spacing:-.02em;color:#f2cfc0}
.footer[data-premium] .footer-close-cta{display:inline-flex;align-items:center;gap:10px;height:54px;margin-top:26px;padding:0 24px 0 26px;border-radius:999px;background:#f6ede3;color:#5e1822;font-size:16px;font-weight:600;text-decoration:none;box-shadow:0 18px 36px -18px rgba(0,0,0,.55);-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring)}
.footer[data-premium] .footer-close-cta:active{transform:scale(.97)}
.footer[data-premium] .footer-close-cta svg.icon{width:18px;height:18px;color:#5e1822;stroke:currentColor}
.footer[data-premium] .footer-inner{max-width:720px;margin:0 auto;padding-top:36px}
.footer[data-premium] .footer-logo{display:inline-block;width:128px}
.footer[data-premium] .footer-logo img{display:block;width:100%;height:auto;filter:brightness(0) invert(1);opacity:.96}
.footer[data-premium] .footer-address{margin:18px 0 0;padding:0;border:0;background:none}
.footer[data-premium] .footer-street{display:block;font-size:15px;line-height:1.55;color:rgba(246,237,227,.88);text-decoration:none}
.footer[data-premium] .footer-phone{display:inline-block;margin-top:12px;font-size:22px;font-weight:600;letter-spacing:.01em;color:#fff;text-decoration:none}
.footer[data-premium] .footer-hours{margin:4px 0 0;font-size:13.5px;color:rgba(246,237,227,.7)}
.footer[data-premium] .footer-actions{display:flex;justify-content:center;gap:12px;margin:26px 0 0}
.footer[data-premium] .footer-action,.footer[data-premium] .footer-socials a{display:grid;justify-items:center;gap:8px;width:74px;font-size:12px;font-weight:500;color:rgba(246,237,227,.86);text-decoration:none;-webkit-tap-highlight-color:transparent}
.footer[data-premium] .footer-socials{display:contents}
.footer[data-premium] .footer-action>i{display:grid;place-items:center;width:50px;height:50px;border-radius:999px;border:1px solid rgba(246,237,227,.2);background:rgba(246,237,227,.08);transition:transform .5s var(--p-spring),background-color .3s}
.footer[data-premium] .footer-action:active>i{transform:scale(.92);background:rgba(246,237,227,.16)}
.footer[data-premium] .footer-action>i>svg.icon{width:20px;height:20px;color:#f6ede3;stroke:currentColor}
.footer[data-premium] .footer-socials a svg{width:50px;height:50px;padding:14.5px;border-radius:999px;border:1px solid rgba(246,237,227,.2);background:rgba(246,237,227,.08);color:#f6ede3}
.footer[data-premium] .footer-bottom{display:grid;gap:14px;margin:28px 0 0;padding:18px 0 0;border:0;border-top:1px solid rgba(246,237,227,.14);background:none}
.footer[data-premium] .footer-meta{display:flex;align-items:center;justify-content:center;gap:18px;font-size:12.5px;color:rgba(246,237,227,.56)}
/* Two short lists — Keşfet and Yardım — centred like the rest of the closing, then the legal links in
   one quiet line (sales contract, KVKK, privacy, cookies stay one tap away on every page), and © with
   the faint business sign-in. */
.footer[data-premium] .footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:32px 0 0;padding:26px 0 0;border-top:1px solid rgba(246,237,227,.14);text-align:center}
.footer[data-premium] .footer-col{display:grid;align-content:start;gap:12px}
.footer[data-premium] .footer-col-title{margin:0 0 2px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#f2cfc0}
.footer[data-premium] .footer-col a{justify-self:center;font-size:15.5px;font-weight:500;color:#f6ede3;text-decoration:none;-webkit-tap-highlight-color:transparent}
.footer[data-premium] .footer-col a:active{opacity:.7}
.footer[data-premium] .footer-legal-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin:0;font-size:12.5px;color:rgba(246,237,227,.56)}
.footer[data-premium] .footer-legal-line :is(a,button){padding:0;font:inherit;color:inherit;text-decoration:none}
.footer[data-premium] .footer-admin{flex:none;font-size:12px;color:rgba(246,237,227,.38);text-decoration:none}
@media (min-width:761px){
  .footer[data-premium]{padding:0 32px 48px}
  .footer[data-premium] .footer-close{padding:84px 0 56px}
  .footer[data-premium] .footer-close-line{font-size:52px}
}

/* ===== Full-screen menu (burgundy) =====
   Opens as a circle growing from the menu button; the paths, the category tiles, the everyday links
   and the contact rise in one after another. */
dialog.navigation.nav-screen{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:#561620;color:#f6ede3;box-shadow:none;transform:none;animation:nav-in .62s var(--p-ease) backwards}
dialog.navigation.nav-screen::backdrop{background:transparent}
dialog.navigation.nav-screen.is-closing{animation:nav-out .3s cubic-bezier(.4,0,1,1) both}
@keyframes nav-in{from{clip-path:circle(0% at calc(100% - 34px) calc(env(safe-area-inset-top,0px) + 34px))}to{clip-path:circle(150% at calc(100% - 34px) calc(env(safe-area-inset-top,0px) + 34px))}}
@keyframes nav-out{from{clip-path:circle(150% at calc(100% - 34px) calc(env(safe-area-inset-top,0px) + 34px))}to{clip-path:circle(0% at calc(100% - 34px) calc(env(safe-area-inset-top,0px) + 34px))}}
/* The old menu's 24px side padding made this one feel narrow; the shell alone sets the margins. */
.nav-screen #navigation-content{min-height:100%;padding:0}
/* The warm glow lives on its own layer: Safari tints its bars from a fixed element's plain colour, so the
   screen itself stays one solid burgundy (and no clip-path is left on it once it has opened). */
dialog.navigation.nav-screen::before{content:"";position:absolute;inset:0 0 auto;z-index:-1;height:100dvh;background:radial-gradient(100% 52% at 82% 30%,rgba(140,43,61,.78) 0%,rgba(140,43,61,0) 72%);pointer-events:none}
.nav-shell{display:flex;flex-direction:column;min-height:100dvh;padding:calc(8px + env(safe-area-inset-top,0px)) 20px calc(22px + env(safe-area-inset-bottom,0px))}
.nav-shell>:not(.nav-paths),.nav-paths>a{animation:p-rise .7s var(--p-enter) both;animation-delay:calc(var(--i,0) * 55ms + 160ms)}
/* The menu's top row stands exactly where the header's capsule stood: delivery point on the left, the
   logo in the middle, close on the right, so opening the menu changes the colours and nothing moves. */
.nav-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:6px;height:52px;margin:0 -10px;padding:0 5px}
.nav-place{justify-self:start;display:inline-flex;align-items:center;gap:5px;max-width:100%;height:40px;padding:0 12px 0 9px;border:1px solid rgba(246,237,227,.18);border-radius:999px;background:rgba(246,237,227,.08);color:#f6ede3;font-size:13.5px;font-weight:500;-webkit-tap-highlight-color:transparent}
.nav-place span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nav-place .icon{flex:none;width:15px;height:15px;color:#f2cfc0}
.nav-logo{display:block;justify-self:center;width:84px}
.nav-logo img{display:block;width:100%;height:auto;filter:brightness(0) invert(1)}
.nav-close{justify-self:end;display:grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid rgba(246,237,227,.2);background:rgba(246,237,227,.08);color:#f6ede3;-webkit-tap-highlight-color:transparent}
.nav-close .icon{width:20px;height:20px}
.nav-paths{display:grid;margin-top:22px;border-top:1px solid rgba(246,237,227,.14)}
.nav-big{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;border-bottom:1px solid rgba(246,237,227,.14);color:#f6ede3;text-decoration:none;-webkit-tap-highlight-color:transparent}
.nav-big strong{display:block;font-size:29px;line-height:1.05;font-weight:500;letter-spacing:-.04em}
.nav-big small{display:block;margin-top:5px;font-size:13.5px;color:rgba(246,237,227,.64)}
.nav-big .navigation-link-count{all:unset;font:inherit;color:inherit}
.nav-big>.icon{flex:none;width:22px;height:22px;color:#f2cfc0;transition:transform .5s var(--p-spring)}
.nav-big:active>.icon{transform:translateX(4px)}
.nav-label{margin:30px 0 12px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#f2cfc0}
.cat-track{display:grid;grid-auto-flow:column;grid-auto-columns:108px;gap:12px;overflow-x:auto;margin:0 -20px;padding:0 20px 6px;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cat-track::-webkit-scrollbar{display:none}
.cat-tile{display:grid;align-content:start;gap:2px;min-width:0;color:inherit;text-decoration:none;scroll-snap-align:start;-webkit-tap-highlight-color:transparent}
.cat-tile-photo{display:block;aspect-ratio:1;overflow:hidden;border-radius:20px;background:#efe4d6;transition:transform .5s var(--p-spring)}
.cat-tile:active .cat-tile-photo{transform:scale(.95)}
.cat-tile-photo img{display:block;width:100%;height:100%;object-fit:cover}
.cat-tile-photo .shelf-placeholder svg{width:50%;height:50%}
.cat-tile-name{margin-top:8px;overflow:hidden;font-size:13.5px;line-height:1.2;font-weight:600;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
.cat-tile small{font-size:11.5px;opacity:.62}
.nav-screen .cat-tile-photo{box-shadow:0 14px 26px -18px rgba(0,0,0,.7)}
.nav-story{position:relative;display:block;margin-top:30px;overflow:hidden;border-radius:24px;color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent;box-shadow:0 24px 40px -28px rgba(0,0,0,.7)}
.nav-story img{display:block;width:100%;height:172px;object-fit:cover;transform:scale(1.02);transition:transform .8s var(--p-ease)}
.nav-story:active img{transform:scale(1.05)}
.nav-story::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,12,16,0) 30%,rgba(40,12,16,.82) 100%)}
.nav-story-copy{position:absolute;left:18px;right:64px;bottom:16px;z-index:1;display:grid;gap:2px}
.nav-story-copy small{font-size:11.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:#f2cfc0}
.nav-story-copy strong{font-size:28px;line-height:1.1;font-weight:500;letter-spacing:-.03em}
.nav-story-copy em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:13px;color:rgba(255,255,255,.82)}
.nav-story-copy em .icon{width:13px;height:13px;color:#f5c869;fill:#f5c869}
.nav-story-go{position:absolute;right:16px;bottom:16px;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:#fff;color:#561620}
.nav-story-go .icon{width:18px;height:18px}
.nav-links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:22px;margin-top:22px}
.nav-links :is(a,button){display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;height:52px;padding:0 2px;border:0;border-bottom:1px solid rgba(246,237,227,.14);border-radius:0;background:none;color:#f6ede3;font:inherit;font-size:16px;font-weight:500;text-align:left;text-decoration:none;-webkit-tap-highlight-color:transparent}
.nav-links span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nav-links small{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#f6ede3;color:#5e1822;font-size:11.5px;font-weight:650}
.nav-links :is(a,button)::after{content:'';flex:none;width:7px;height:7px;margin-right:4px;border-top:1.6px solid rgba(246,237,227,.5);border-right:1.6px solid rgba(246,237,227,.5);transform:rotate(45deg)}
.nav-links button:has(small)::after{display:none}
.nav-contact{margin-top:auto;padding-top:28px}
.nav-contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nav-pill{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:999px;border:1px solid rgba(246,237,227,.3);color:#f6ede3;font-size:15px;font-weight:600;text-decoration:none;-webkit-tap-highlight-color:transparent}
.nav-pill.is-light{border-color:#f6ede3;background:#f6ede3;color:#5e1822}
.nav-pill .icon{width:18px;height:18px}
.nav-hours{margin:14px 0 0;font-size:13px;text-align:center;color:rgba(246,237,227,.66)}
/* The legal small print closes the menu, quietly. */
.nav-foot{margin-top:22px;padding-top:16px;border-top:1px solid rgba(246,237,227,.12);text-align:center}
.nav-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:0;font-size:12.5px}
.nav-legal a{color:rgba(246,237,227,.62);text-decoration:none}
.nav-small{display:flex;justify-content:center;align-items:center;gap:16px;margin:10px 0 0;font-size:12.5px;color:rgba(246,237,227,.5)}
.nav-small a{display:inline-flex;align-items:center;gap:6px}
.nav-small .icon{width:15px;height:15px}
.nav-small a{color:rgba(246,237,227,.78);text-decoration:none}
@media (prefers-reduced-motion:reduce){dialog.navigation.nav-screen,.nav-shell>*,.nav-paths>a{animation:none!important}}

/* ===== Search, refined ===== */
.search-chips{display:flex;flex-wrap:wrap;gap:8px}
.search-chip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px;border-radius:999px;border:1px solid rgba(170,151,134,.3);background:#fff;font-size:14px;font-weight:500;color:var(--ink);-webkit-tap-highlight-color:transparent}
.search-chip.is-recent .icon{width:14px;height:14px;color:var(--muted)}
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}
.search-screen .cat-tile-name{color:var(--ink)}
.search-screen .cat-tile small{color:var(--muted);opacity:1}
.search-screen .cat-tile-photo{box-shadow:0 12px 24px -20px rgba(70,40,25,.6)}
.search-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
.search-count{margin:16px 0 12px}
.search-hint{margin:2px 0 6px;font-size:14.5px;color:var(--muted)}
.search-field{height:52px}

/* ===== Product cards, hand-finished =====
   The add button sits on the photo's corner, white so it reads on any picture, and grows into a small
   white quantity pill once the product is in the cart. Under the photo only the name and the price with
   its unit, close together: a one-line name no longer leaves a hole above the price. */
.shelf-media{position:relative}
.shelf-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(60,38,24,.06);pointer-events:none}
.shelf-controls{position:absolute;right:8px;bottom:8px;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:6px}
.shelf-card .shelf-controls .add-button{flex:none;width:40px;min-width:0;height:40px;min-height:40px;padding:0;border-radius:999px;background:rgba(255,255,255,.96);color:var(--red);box-shadow:0 10px 20px -10px rgba(40,22,14,.55),0 0 0 1px rgba(60,38,24,.05);-webkit-tap-highlight-color:transparent}
.shelf-card .shelf-controls .add-button .icon{width:19px;height:19px;stroke-width:2.3}
.shelf-card .shelf-controls .add-button:disabled{width:auto;height:30px;min-height:30px;padding:0 12px;font-size:12px;font-weight:550;background:rgba(255,255,255,.9);color:var(--muted);box-shadow:none}
.shelf-card .shelf-controls .card-quantity{height:40px;padding:0 2px;border-radius:999px;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 10px 20px -10px rgba(40,22,14,.55),0 0 0 1px rgba(60,38,24,.05);transform-origin:right center}
.shelf-card .shelf-controls .card-quantity button{width:34px;height:40px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.shelf-card .shelf-controls .card-quantity button:active{transform:scale(.86)}
.shelf-card .shelf-controls .card-quantity button .icon{width:16px;height:16px;stroke-width:2.2}
.shelf-card .shelf-controls .card-quantity output{min-width:16px;font-size:14.5px;font-weight:650;color:var(--ink);text-align:center}
.shelf-card .shelf-controls .stock-label{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.94);font-size:11.5px;font-weight:550;color:var(--ink);box-shadow:0 8px 16px -10px rgba(40,22,14,.5)}
.shelf-card .shelf-controls .cc-in{animation:p-pill .55s var(--p-spring)}
@keyframes p-pill{from{transform:scale(.4);opacity:0}}
.shelf-card .shelf-info{display:block;flex:none;padding:10px 2px 0}
.shelf-card .shelf-info h4{min-height:0;margin:0;font-size:14.5px;line-height:1.32;font-weight:500;letter-spacing:-.005em}
.shelf-card .shelf-info .price{margin:4px 0 0;font-size:15px;font-weight:650;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.shelf-card .shelf-info .deposit-note{margin:3px 0 0;font-size:12px;line-height:1.35;color:var(--muted)}
/* The full list (and related products) in the same cards, two to a row on a phone. */
.product-grid:has(>.shelf-card){gap:26px 12px}
@media (min-width:761px){.product-grid:has(>.shelf-card){gap:36px 20px}}
.shelf-card .shelf-info .price small{margin-left:3px;font-size:12.5px;font-weight:400;letter-spacing:0;color:var(--muted)}

/* ===== Product detail sheet =====
   A real photo large; a drawn tile kept short, signed with its shelf's name. Then the name and price,
   how much is already in the cart, delivery for the chosen place, a way to ask about ingredients, what
   goes with it — and the add bar, always at hand at the bottom. */
/* No bottom padding: a sticky bar keeps clear of its scroller's padding, which left a strip of content
   showing under the add bar. */
.ps-body{padding-top:0;padding-bottom:0}
.ps-photo{position:relative;overflow:hidden;aspect-ratio:5/4;border-radius:24px;background:#efe4d6;box-shadow:0 18px 36px -26px rgba(70,40,25,.6)}
.ps-photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(60,38,24,.06);pointer-events:none}
.ps-photo img{display:block;width:100%;height:100%;object-fit:cover}
.ps-photo.is-art{aspect-ratio:16/9;box-shadow:none}
.ps-photo.is-art .shelf-placeholder{place-items:center;padding-bottom:26px;box-sizing:border-box}
.ps-photo.is-art .shelf-placeholder svg{width:auto;height:44%}
.ps-art-label{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:21px;letter-spacing:-.01em;color:rgba(120,62,44,.72)}
.ps-photo.is-art:has([data-cat="zeytinyagli"],[data-cat="salata-meze"]) .ps-art-label{color:rgba(84,92,52,.78)}
.ps-photo.is-art:has([data-cat="tatli"],[data-cat="pasta-kek"]) .ps-art-label{color:rgba(150,52,56,.72)}
.ps-title{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:18px 0 0}
.ps-name{margin:0;font-size:24px;line-height:1.15;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.ps-price{flex:none;margin:0;font-size:20px;font-weight:650;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.ps-price small{margin-left:3px;font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted)}
.ps-body .deposit-note{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.ps-incart{display:inline-flex;align-items:center;gap:7px;margin:12px 0 0;padding:7px 13px 7px 10px;border-radius:999px;background:#f7ebe4;color:var(--red-dark);font-size:13.5px;font-weight:550}
.ps-incart .icon{width:16px;height:16px}
.ps-desc{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.ps-facts{display:grid;margin:18px 0 0;padding:4px 14px;list-style:none;border-radius:20px;border:1px solid rgba(170,151,134,.26);background:#fff}
.ps-facts li{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0}
.ps-facts li+li{border-top:1px solid rgba(170,151,134,.2)}
.ps-fact-icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:999px;background:#f8f1e9;color:var(--red-dark)}
.ps-fact-icon .icon{width:18px;height:18px}
.ps-facts strong{display:block;font-size:14.5px;line-height:1.3;font-weight:600;color:var(--ink)}
.ps-facts small{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--muted)}
.ps-ask{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.ps-ask>span:nth-child(2){flex:1;min-width:0}
.ps-ask>.icon{flex:none;width:17px;height:17px;color:var(--muted);transition:transform .5s var(--p-spring)}
.ps-ask:active>.icon{transform:translateX(4px)}
.ps-pairs{margin:26px 0 0}
.ps-pairs h4{margin:0 0 12px;font-size:18px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ps-pair-track{display:grid;grid-auto-flow:column;grid-auto-columns:132px;gap:12px;overflow-x:auto;margin:0 -18px;padding:0 18px 6px;scroll-snap-type:x mandatory;scroll-padding-inline:18px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.ps-pair-track::-webkit-scrollbar{display:none}
.ps-pair-track .shelf-photo{border-radius:18px}
.ps-pair-track .shelf-card .shelf-info h4{font-size:13.5px}
.ps-pair-track .shelf-card .shelf-info .price{font-size:14px}
.ps-pair-track .shelf-card .shelf-controls{right:6px;bottom:6px}
.ps-pair-track .shelf-card .shelf-controls .add-button{width:34px;height:34px;min-height:34px}
.ps-pair-track .shelf-card .shelf-controls .card-quantity{height:34px}
.ps-pair-track .shelf-card .shelf-controls .card-quantity button{width:28px;height:34px}
.ps-buy{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;margin:22px -18px 0;padding:16px 18px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(252,250,247,0),#fcfaf7 26%)}
.ps-qty{display:inline-flex;align-items:center;height:56px;margin:0;border:1px solid rgba(170,151,134,.38);border-radius:999px;background:#fff;overflow:hidden}
.ps-qty button{display:grid;place-items:center;width:44px;height:56px;background:transparent;color:var(--ink);-webkit-tap-highlight-color:transparent}
.ps-qty button:active{transform:scale(.86)}
.ps-qty button .icon{width:17px;height:17px;stroke-width:2.2}
.ps-qty output{min-width:22px;text-align:center;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.ps-add{flex:1;height:56px;min-height:56px;border-radius:999px;justify-content:center;gap:6px;font-size:16px;font-weight:600;white-space:nowrap;box-shadow:0 18px 34px -18px rgba(188,7,17,.6);transition:transform .5s var(--p-spring)}
.ps-add:active{transform:scale(.97)}
#ps-total{font-variant-numeric:tabular-nums}
.ps-soldout{margin:18px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));font-size:15px;color:var(--muted)}

/* ===== All products =====
   A large title under the floating header, the delivery line, the home shelves' tabs (stuck while the
   list scrolls), a sort chip and the grid/list switch; then the cards, section by section in "Tüm
   ürünler". */
/* The page sets its own space under the floating header (main's padding was sized for the old one). */
#main:has(>.coll[data-premium]){padding-top:0}
.coll[data-premium]{padding:calc(env(safe-area-inset-top,0px) + 74px) 0 8px}
.coll-head{padding:0 18px}
.coll-back{display:inline-flex;align-items:center;gap:3px;height:36px;margin:0 0 10px -8px;padding:0 12px 0 6px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring)}
.coll-back:active{transform:scale(.95)}
.coll-back .icon{width:19px;height:19px}
.coll-title{margin:0;font-size:38px;line-height:1.04;font-weight:500;letter-spacing:-.045em;color:var(--ink)}
.coll-title em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:1.14em;letter-spacing:-.02em;color:var(--red-dark)}
.coll-meta{margin:8px 0 0;font-size:14px;color:var(--muted)}
.coll-place{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;margin:18px 0 0;padding:9px 14px 9px 10px;border:1px solid rgba(170,151,134,.26);border-radius:18px;background:#fff;text-align:left;color:var(--ink);-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring)}
.coll-place:active{transform:scale(.985)}
.coll-place-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:999px;background:#f8f1e9;color:var(--red-dark)}
.coll-place-icon .icon{width:18px;height:18px}
.coll-place-text{flex:1;min-width:0}
.coll-place-text strong{display:block;font-size:14.5px;line-height:1.3;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.coll-place-text small{display:block;margin-top:1px;font-size:13px;line-height:1.35;color:var(--muted)}
.coll-place>.icon:last-child{flex:none;width:16px;height:16px;color:var(--muted)}
.coll .shelf-nav-sentinel{margin-top:20px}
.coll-tools{display:flex;align-items:center;gap:8px;padding:14px 18px 2px}
.coll-sort{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 12px;border:1px solid rgba(170,151,134,.34);border-radius:999px;background:#fff;font-size:13.5px;color:var(--muted);-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring)}
.coll-sort:active{transform:scale(.96)}
.coll-sort b{font-weight:600;color:var(--ink)}
.coll-sort .icon{width:16px;height:16px;color:var(--ink)}
.coll-query{display:inline-flex;align-items:center;gap:2px;max-width:46%;height:38px;padding:0 3px 0 14px;border-radius:999px;background:#f7ebe4;color:var(--red-dark);font-size:13.5px;font-weight:550}
.coll-query>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.coll-query button{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:999px;color:var(--red-dark)}
.coll-query .icon{width:15px;height:15px}
.coll-view{display:inline-flex;margin-left:auto;padding:3px;border-radius:999px;background:#f1e9df}
.coll-view button{display:grid;place-items:center;width:38px;height:32px;border-radius:999px;color:var(--muted);-webkit-tap-highlight-color:transparent;transition:background-color .3s,color .3s,box-shadow .3s}
.coll-view button .icon{width:17px;height:17px}
.coll-view [aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 4px 10px -6px rgba(40,22,14,.45)}
.coll-body{padding:14px 18px 0}
.coll-group{margin-top:30px}
.coll-group:first-child{margin-top:6px}
.coll-group-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.coll-group-top h2{margin:0;font-size:22px;line-height:1.15;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.coll-group-top span{font-size:13.5px;color:var(--muted)}
/* List view: a small photo, the name and price, the add control at the row's end. */
.coll-body.is-list .product-grid{grid-template-columns:minmax(0,1fr);gap:0}
.coll-body.is-list .shelf-card{position:relative;flex-direction:row;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid rgba(170,151,134,.2)}
.coll-body.is-list .shelf-media{position:static;flex:none;width:84px}
.coll-body.is-list .shelf-photo{border-radius:16px}
.coll-body.is-list .shelf-ship{display:none}
.coll-body.is-list .shelf-controls{right:0;bottom:auto;top:50%;transform:translateY(-50%)}
.coll-body.is-list .shelf-card .shelf-info{flex:1;min-width:0;padding:0 52px 0 0}
.coll-body.is-list .shelf-card:has(.card-quantity) .shelf-info{padding-right:118px}
.coll-body.is-list .shelf-card .shelf-info h4{font-size:15px}
.coll .empty-state{padding:28px 0}
/* Sort sheet */
.sort-body{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.sort-options{display:grid}
.sort-options button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:0 4px;border-bottom:1px solid rgba(170,151,134,.2);font-size:16px;color:var(--ink);text-align:left;-webkit-tap-highlight-color:transparent}
.sort-options button:last-child{border-bottom:0}
.sort-options button .icon{flex:none;width:20px;height:20px;color:var(--red);opacity:0;transform:scale(.5);transition:opacity .25s,transform .45s var(--p-spring)}
.sort-options [aria-checked="true"]{font-weight:600}
.sort-options [aria-checked="true"] .icon{opacity:1;transform:none}
@media (min-width:761px){
  .coll[data-premium]{max-width:1240px;margin:0 auto;padding-top:150px}
  .coll-head,.coll-tools,.coll-body{padding-inline:32px}
  .coll-title{font-size:56px}
  .coll-place{max-width:440px}
  .coll-body.is-list .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px}
  }

/* ===== App screens (phones): every page but home and the QR menu =====
   The site header, footer and floating WhatsApp step aside; the screen has its own bar — back on the
   left, search and cart on the right — and the large title folds into the bar's middle once it slides
   under it, the tabs sticking right beneath. The list ends quietly with a word of help. */
.screen-bar,.coll-end{display:none}
/* A route change places the header at once (shown or tucked for where the page lands): no drop-in. */
body.route-settling .header[data-premium],body.route-settling .header[data-premium] *,body.route-settling .shelf-nav{transition:none!important}
body.is-screen .whatsapp-float{display:none!important}
@media (max-width:760px){
  /* important: the scrolled header rule (body:not(.is-qr-menu).is-scrolled …) is more specific */
  body.is-screen .header[data-premium],body.is-screen .footer{display:none!important}
  .coll-back,body.is-screen .breadcrumb{display:none}
  body.is-screen #main{padding-top:calc(env(safe-area-inset-top,0px) + 58px);padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .coll[data-premium]{padding:calc(env(safe-area-inset-top,0px) + 64px) 0 calc(112px + env(safe-area-inset-bottom,0px))}
  .screen-bar{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;height:calc(env(safe-area-inset-top,0px) + 58px);padding:env(safe-area-inset-top,0px) 12px 0;box-sizing:border-box;pointer-events:none}
  .screen-bar::before{content:"";position:absolute;inset:0;background:rgba(252,250,247,.9);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 1px 0 rgba(170,151,134,.24);opacity:0;transition:opacity .35s var(--p-ease)}
  body.screen-condensed .screen-bar::before{opacity:1}
  body.screen-condensed:has(.shelf-nav.is-stuck) .screen-bar::before{box-shadow:none}
  .screen-bar>*{position:relative;pointer-events:auto}
  .screen-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 8px 20px -12px rgba(40,22,14,.5),0 0 0 1px rgba(60,38,24,.05);-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring),box-shadow .35s var(--p-ease),background-color .35s}
  .screen-btn:active{transform:scale(.9)}
  body.screen-condensed .screen-btn{background:transparent;box-shadow:none}
  .screen-btn .icon{width:21px;height:21px}
  .screen-btn[data-action="screen-back"] .icon{width:23px;height:23px;stroke-width:1.9}
  .screen-title{justify-self:center;max-width:100%;margin:0;font-size:16.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(8px);transition:opacity .3s var(--p-ease),transform .5s var(--p-show)}
  body.screen-condensed .screen-title{opacity:1;transform:none}
  .screen-actions{justify-self:end;display:flex;gap:8px}
  .screen-bag{position:relative}
  .screen-count{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:10.5px;font-weight:650;line-height:19px;text-align:center;box-shadow:0 0 0 2px #fcfaf7;transition:transform .5s var(--p-spring),opacity .3s}
  .screen-count.is-zero{opacity:0;transform:scale(.4)}
  .screen-bag.cart-pulse{animation:p-bag .6s var(--p-spring)}
  body.is-screen .shelf-nav{top:calc(env(safe-area-inset-top,0px) + 58px)}
  body.is-screen .shelf-nav.is-stuck{transform:none}
  .coll-end{display:grid;justify-items:center;gap:16px;margin:40px 18px 0;padding:28px 0 0;border-top:1px solid rgba(170,151,134,.22);text-align:center}
  .coll-end p{display:grid;gap:4px;margin:0}
  .coll-end strong{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
  .coll-end p span{font-size:14px;color:var(--muted)}
  .coll-end-actions{display:flex;gap:10px}
  .coll-end-btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:1px solid rgba(170,151,134,.36);border-radius:999px;background:#fff;font-size:14.5px;font-weight:550;color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring)}
  .coll-end-btn:active{transform:scale(.96)}
  .coll-end-btn .icon{width:17px;height:17px}
}

/* ===== Help centre (sheet) =====
   One tall sheet over the page: tabs for delivery, contact, questions and documents; documents read in
   their own view with a table of contents. White cards on the warm ground, as the rest of the shop. */
dialog.sheet.help-sheet{height:min(92dvh,860px);max-height:none}
.help-tabs{flex:none;display:flex;gap:22px;overflow-x:auto;padding:0 20px;border-bottom:1px solid rgba(170,151,134,.22);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.help-tabs::-webkit-scrollbar{display:none}
.help-tabs a{position:relative;flex:none;padding:8px 0 13px;font-size:15px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.help-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--red);transform:scaleX(0);transition:transform .4s var(--p-ease)}
.help-tabs [aria-selected="true"]{color:var(--ink)}
.help-tabs [aria-selected="true"]::after{transform:scaleX(1)}
.help-head h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.help-body{padding:18px 16px calc(30px + env(safe-area-inset-bottom,0px))}
.help-card{padding:16px;border:1px solid rgba(170,151,134,.26);border-radius:22px;background:#fff}
.help-card+.help-card,.help-actions+.help-card,.help-card+.help-insta{margin-top:12px}
.help-card-top{display:flex;align-items:flex-start;gap:12px}
.help-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:999px;background:#f8f1e9;color:var(--red-dark)}
.help-icon .icon{width:18px;height:18px}
.help-card h3{margin:1px 0 4px;font-size:17px;line-height:1.25;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.help-card-top p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.help-points{display:grid;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.help-points li{position:relative;padding-left:16px;font-size:14px;line-height:1.45;color:var(--ink)}
.help-points li::before{content:"";position:absolute;left:3px;top:.62em;width:5px;height:5px;border-radius:999px;background:#d8b7a6}
.help-place{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:10px 12px 10px 10px;border:1px solid rgba(170,151,134,.22);border-radius:16px;background:#fcf7f1;text-align:left;color:var(--ink);-webkit-tap-highlight-color:transparent}
.help-place>.icon:last-child{flex:none;width:16px;height:16px;color:var(--muted)}
.help-hours{display:grid;margin:12px 0 0}
.help-hours div{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-top:1px solid rgba(170,151,134,.18);font-size:14.5px}
.help-hours dt{color:var(--ink)}
.help-hours dt small{margin-left:6px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red-dark)}
.help-hours dd{margin:0;color:var(--muted);font-variant-numeric:tabular-nums}
.help-hours .is-today dt,.help-hours .is-today dd{font-weight:600;color:var(--ink)}
.help-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.help-action{display:grid;justify-items:center;gap:5px;min-width:0;padding:16px 6px 14px;border:1px solid rgba(170,151,134,.26);border-radius:20px;background:#fff;color:var(--ink);text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring)}
.help-action:active{transform:scale(.96)}
.help-action .icon{width:22px;height:22px;color:var(--red-dark)}
.help-action span{font-size:14.5px;font-weight:600}
.help-action small{max-width:100%;overflow:hidden;font-size:11.5px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.help-action.is-primary{border-color:transparent;background:var(--red);color:#fff;box-shadow:0 16px 30px -18px rgba(188,7,17,.7)}
.help-action.is-primary .icon{color:#fff}
.help-action.is-primary small{color:rgba(255,255,255,.82)}
.help-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none}
.help-link .icon{width:16px;height:16px}
.help-note{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.help-insta{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid rgba(170,151,134,.26);border-radius:20px;background:#fff;color:var(--ink);text-decoration:none}
.help-insta strong{display:block;font-size:15px;font-weight:600}
.help-insta small{display:block;font-size:12.5px;color:var(--muted)}
.help-insta>.icon:last-child{flex:none;margin-left:auto;width:16px;height:16px;color:var(--muted)}
.help-faq h3{margin:18px 4px 10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red-dark)}
.help-faq:first-child h3{margin-top:2px}
/* Questions use the home FAQ's cards (.faq-list); here only the topic headings and spacing. */
.help-faq details+details{margin-top:8px}
.help-ask{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:14px 16px;border-radius:20px;background:#f7ebe4}
.help-ask p{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.help-ask .help-link{margin:0;color:var(--red-dark)}
.help-intro{margin:2px 4px 14px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.help-docs{overflow:hidden;border:1px solid rgba(170,151,134,.26);border-radius:22px;background:#fff}
.help-doc-row{display:flex;align-items:center;gap:12px;min-height:62px;padding:12px 16px;color:var(--ink);text-decoration:none;-webkit-tap-highlight-color:transparent}
.help-doc-row+.help-doc-row{border-top:1px solid rgba(170,151,134,.2)}
.help-doc-row>span{flex:1;min-width:0}
.help-doc-row strong{display:block;font-size:15px;font-weight:550}
.help-doc-row small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.help-doc-row>.icon{flex:none;width:18px;height:18px;color:var(--muted)}
.help-doc-row:active{background:#fcf7f1}
.help-doc-meta{margin:0 2px 12px;font-size:13px;color:var(--muted)}
.help-draft{display:block;margin:0 0 16px;padding:14px 16px;border:1px solid #efd9bc;border-radius:18px;background:#fbf2e4;font-size:13.5px;line-height:1.55;color:#6d4b23}
.help-toc{margin:0 0 22px;padding:12px 16px 6px;border:1px solid rgba(170,151,134,.26);border-radius:20px;background:#fff}
.help-toc p{margin:0 0 4px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red-dark)}
.help-toc button{display:block;width:100%;padding:9px 0;border-top:1px solid rgba(170,151,134,.18);font-size:14.5px;line-height:1.35;color:var(--ink);text-align:left;-webkit-tap-highlight-color:transparent}
.help-toc p+button{border-top:0}
.help-doc-text{padding:0 2px;font-size:16px;line-height:1.7;color:#3d3633}
.help-doc-text h2{margin:28px 0 8px;font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.02em;color:var(--ink);scroll-margin-top:14px}
.help-doc-text h2:first-child{margin-top:4px}
.help-doc-text p{margin:0 0 12px}
.help-doc-text ul,.help-doc-text ol{margin:0 0 12px;padding-left:20px}
.help-doc-text li{margin-bottom:6px}
.help-doc-text a{color:var(--red-dark);text-underline-offset:3px}
.help-doc-text .legal-contact{margin:10px 0 14px;padding:14px 16px;border:1px solid rgba(170,151,134,.26);border-radius:16px;background:#fff;font-size:14.5px}
.help-doc-text .legal-contact p{margin:4px 0}
@media (min-width:761px){dialog.sheet.help-sheet{width:min(640px,calc(100% - 32px));height:min(86vh,820px)}}

/* ===== Hikâyemiz (editorial screen) ===== */
.story-screen{padding-bottom:12px}
.story-hero-photo{overflow:hidden;aspect-ratio:4/3.3;border-radius:0 0 32px 32px;background:#efe4d6}
.story-hero-photo img{display:block;width:100%;height:100%;object-fit:cover}
.story-hero-copy{padding:26px 22px 4px}
.story-kicker{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red-dark)}
.story-hero-copy h1{margin:0;font-size:46px;line-height:1;font-weight:500;letter-spacing:-.045em;color:var(--ink)}
.story-hero-copy h1 em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:1.12em;letter-spacing:-.02em;color:var(--red-dark)}
.story-lead{margin:16px 0 0;font-size:18px;line-height:1.55;color:#3d3633}
.story-chapter{display:grid;gap:16px;margin:38px 18px 0}
.story-chapter-photo{overflow:hidden;aspect-ratio:4/3;border-radius:24px;background:#efe4d6;box-shadow:0 18px 36px -26px rgba(70,40,25,.55)}
.story-chapter-photo img{display:block;width:100%;height:100%;object-fit:cover}
.story-chapter-photo .shelf-placeholder svg{width:34%;height:34%}
.story-chapter-text{padding:0 4px}
.story-chapter-kick{display:flex;align-items:baseline;gap:10px;margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red-dark)}
.story-chapter-kick span{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-style:italic;font-weight:500;letter-spacing:0;color:var(--red-dark)}
.story-chapter h2{margin:0;font-size:28px;line-height:1.1;font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.story-chapter-text>p:not(.story-chapter-kick){margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--muted)}
.story-chapter-link{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.story-chapter-link .icon{width:17px;height:17px;color:var(--red);transition:transform .5s var(--p-spring)}
.story-chapter-link:active .icon{transform:translateX(4px)}
.story-proof-row{margin:40px 18px 0}
.story-close{margin:28px 18px 0;padding:34px 22px 30px;border-radius:28px;background:#561620;color:#f6ede3;text-align:center}
.story-close p{margin:0 0 20px;font-size:28px;line-height:1.15;font-weight:500;letter-spacing:-.03em}
.story-close em{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:1.3em;color:#f2cfc0}
.story-close-btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 24px;border-radius:999px;background:#f6ede3;color:#561620;font-size:16px;font-weight:600;text-decoration:none;transition:transform .5s var(--p-spring)}
.story-close-btn:active{transform:scale(.97)}
.story-close-btn .icon{width:17px;height:17px}
@media (max-width:760px){
  /* the kitchen photo runs up under the screen bar; its round buttons sit on the picture */
  .story-screen{margin-top:calc(-1 * (env(safe-area-inset-top,0px) + 58px))}
}
@media (min-width:761px){
  .story-screen{max-width:1080px;margin:0 auto;padding:40px 32px 24px}
  .story-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
  .story-hero-photo{border-radius:32px}
  .story-hero-copy h1{font-size:64px}
  .story-chapter{grid-template-columns:1fr 1fr;align-items:center;gap:48px;margin:72px 0 0}
  .story-chapter:nth-of-type(even) .story-chapter-photo{order:2}
  .story-proof-row,.story-close{max-width:560px;margin-left:auto;margin-right:auto}
}

/* ===== Notifications: a dark island from the top =====
   Drops from under the status bar over the header, with a slight settle; a small tinted icon (or the
   product's photo), one line, at most one light action. It never covers the capsule, the WhatsApp
   button or the products; a tap or a swipe up puts it away. Kept in the top layer (popover). */
#toast.toast{position:fixed;inset:calc(env(safe-area-inset-top,0px) + 8px) auto auto 50%;z-index:1000;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(calc(100% - 20px),460px);min-height:52px;height:auto;margin:0;padding:7px 18px 7px 8px;overflow:visible;border:0;border-radius:26px;background:rgba(28,24,26,.97);color:#fff;box-shadow:0 20px 44px -18px rgba(20,12,8,.72),inset 0 1px 0 rgba(255,255,255,.07);font-size:14.5px;line-height:1.35;font-weight:500;letter-spacing:-.005em;text-align:left;opacity:0;transform:translate(-50%,calc(-100% - 24px)) scale(.94);transition:transform .55s cubic-bezier(.22,1.12,.36,1),opacity .28s ease;pointer-events:none;touch-action:none}
#toast.toast.visible{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
#toast.toast:not(.visible){transition:transform .34s cubic-bezier(.4,0,1,1),opacity .26s ease .04s}
#toast .toast-icon,#toast .toast-thumb{flex:none;display:grid;place-items:center;width:36px;height:36px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.1);color:#f2cfc0}
#toast .toast-icon .icon{width:18px;height:18px;stroke-width:2}
#toast[data-kind="ok"] .toast-icon{background:rgba(95,191,117,.18);color:#86d69a}
#toast[data-kind="warn"] .toast-icon{background:rgba(240,162,74,.2);color:#f4b46c}
#toast .toast-thumb{background:#efe4d6}
#toast .toast-thumb img{display:block;width:100%;height:100%;object-fit:cover}
#toast .toast-thumb .shelf-placeholder svg{width:62%;height:62%}
#toast .toast-text{min-width:0}
#toast .toast-text.is-swap{animation:toast-swap .32s var(--p-ease)}
#toast .toast-action{flex:none;height:34px;margin:0 -10px 0 4px;padding:0 15px;border-radius:999px;background:#fff;color:#221e20;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
@keyframes toast-swap{from{opacity:0;transform:translateY(5px)}}
@media (min-width:761px){#toast.toast{inset:28px auto auto 50%}}
@media (prefers-reduced-motion:reduce){#toast.toast,#toast.toast:not(.visible){transform:translate(-50%,0);transition:opacity .2s}}
/* The capsule says what was added for a moment, then returns to the count and total. */
@media (max-width:760px){
  #mobile-cart-bar .cart-capsule{background:#221e20;-webkit-backdrop-filter:none;backdrop-filter:none}
  #mobile-cart-bar .cc-say{overflow:hidden;font-size:15.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis}
  #mobile-cart-bar .cc-text.is-swap>*{animation:toast-swap .34s var(--p-ease) both}
  #mobile-cart-bar .cc-text.is-swap>small{animation-delay:.04s}
}

/* Opening entrances play only on arrival; internal navigation renders immediately. */
:is(.has-navigated,.skip-opening) :is(.header[data-premium],.hero-full .hero-media img,.hero-full .hero-content,.hero-full .hero-content>*,.hero-swash path,.paths-head,.path-card,.path-all){animation:none!important}
:is(.has-navigated,.skip-opening) .reveal-ready{opacity:1;transform:none;transition:none}

/* ===== Home: centred story link and questions title ===== */
.story-body .story-more{display:flex;width:max-content;margin:18px auto 0}
.home-faq[data-premium] h2{text-align:center}

/* ===== Cake designer =====
   The drawing on a warm stage first, then the step bar, the step's option cards and the bar with Back and
   Next. On a desktop the drawing stays beside the steps. Only the changed part of the drawing moves. */
.cd[data-premium]{max-width:1080px;margin:0 auto;padding:4px 16px calc(130px + env(safe-area-inset-bottom,0px))}
.cfg-h1 em,.cd-title em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:1.14em;letter-spacing:-.02em;color:var(--red-dark)}
.cd-stage{position:relative;overflow:hidden;border-radius:28px;background:radial-gradient(120% 90% at 50% 16%,#fffaf4 0%,#f6ece1 58%,#eee0d0 100%);box-shadow:inset 0 0 0 1px rgba(170,151,134,.18)}
/* The site's old rule gives every svg a dark stroke; the drawing draws its own lines only. */
.cd-cake{display:block;width:100%;height:auto;max-height:31vh;margin:0 auto;padding:10px 6px 0;box-sizing:border-box;stroke:none;fill:none}
.cd-ref{position:absolute;top:12px;right:12px;display:grid;justify-items:center;gap:3px;padding:4px 4px 5px;border-radius:16px;background:rgba(255,255,255,.92);box-shadow:0 10px 22px -14px rgba(40,22,14,.5);animation:cd-pop .5s var(--p-ease) both}
.cd-ref img{display:block;width:52px;height:52px;border-radius:12px;object-fit:cover}
.cd-ref span{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--red-dark)}
.cd-panel{margin-top:18px}
.cd-title{margin:0 4px 14px;font-size:27px;line-height:1.1;font-weight:500;letter-spacing:-.035em;color:var(--ink);outline:none}
.cd-fieldset{margin:0;padding:0;border:0;min-width:0}
.cd-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cd-opt{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cd-opt input,.cd-ex input{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none}
.cd-opt-body{display:flex;flex-direction:column;gap:10px;height:100%;padding:14px;box-sizing:border-box;border:1.5px solid rgba(170,151,134,.28);border-radius:20px;background:#fff;transition:border-color .25s,box-shadow .25s,background-color .25s,transform .45s var(--p-spring)}
.cd-opt:active .cd-opt-body{transform:scale(.97)}
.cd-opt input:checked+.cd-opt-body{border-color:var(--red);background:#fffaf8;box-shadow:0 12px 26px -18px rgba(188,7,17,.55)}
.cd-opt input:focus-visible+.cd-opt-body{outline:2px solid var(--ink);outline-offset:2px}
.cd-opt-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:#f8f1e9;color:var(--red-dark);transition:background-color .25s,color .25s}
.cd-opt-mark svg{width:24px;height:24px}
.cd-opt input:checked+.cd-opt-body .cd-opt-mark{background:var(--red);color:#fff}
.cd-opt-text strong{display:block;font-size:15px;line-height:1.25;font-weight:600;color:var(--ink)}
.cd-opt-text small{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;color:var(--muted)}
.cd-swatch{display:block;width:26px;height:26px;border-radius:999px;background:linear-gradient(135deg,var(--a) 0 50%,var(--b) 50% 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cd-swatch[style*="--dash"]{background:#fff;box-shadow:inset 0 0 0 1.6px #c8b4a2;border:0;outline:1.6px dashed #c8b4a2;outline-offset:-5px}
.cd-examples{margin-top:20px}
.cd-sub{margin:0 4px 10px;font-size:14.5px;font-weight:600;color:var(--ink)}
.cd-sub small{font-weight:400;color:var(--muted)}
.cd-ex-track{display:flex;gap:10px;overflow-x:auto;margin:0 -16px;padding:3px 16px 6px;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cd-ex-track::-webkit-scrollbar{display:none}
.cd-ex{position:relative;flex:none;width:108px;scroll-snap-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cd-ex-photo{display:grid;place-items:center;width:108px;height:108px;overflow:hidden;border-radius:18px;background:#f1e7dc;box-shadow:0 0 0 0 var(--red);transition:box-shadow .25s,transform .45s var(--p-spring)}
.cd-ex:active .cd-ex-photo{transform:scale(.96)}
.cd-ex-photo img{display:block;width:100%;height:100%;object-fit:cover}
.cd-ex input:checked+.cd-ex-photo{box-shadow:0 0 0 3px var(--red)}
.cd-ex-none .cd-ex-photo .icon{width:22px;height:22px;color:var(--muted)}
.cd-ex-label{display:block;margin-top:7px;font-size:12.5px;line-height:1.3;text-align:center;color:var(--ink)}
.cd-note{margin-top:16px}
.cd-note>summary{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink);list-style:none;cursor:pointer}
.cd-note>summary::-webkit-details-marker{display:none}
.cd-note>summary::after{content:none!important;display:none}
.cd-note>summary .icon{width:16px;height:16px;color:var(--red-dark)}
.cd-note>summary [hidden]{display:none}
.cd-note .co-field{margin-top:10px}
.cd-days{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cd-days::-webkit-scrollbar{display:none}
.cd-day{flex:none;display:grid;justify-items:center;gap:1px;min-width:58px;padding:8px 6px;border:1.5px solid rgba(170,151,134,.3);border-radius:16px;background:#fff;-webkit-tap-highlight-color:transparent;transition:background-color .25s,border-color .25s}
.cd-day small{font-size:11.5px;color:var(--muted)}
.cd-day strong{font-size:20px;line-height:1.1;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cd-day[aria-pressed="true"]{border-color:var(--ink);background:var(--ink)}
.cd-day[aria-pressed="true"] :is(strong,small){color:#fff}
.cd-day[aria-pressed="true"] small{opacity:.72}
.cd-date-field{margin-top:16px}
.cd-help{margin:12px 4px 0;font-size:13px;line-height:1.5;color:var(--muted)}
.cd-recap{margin:0;overflow:hidden;border:1px solid rgba(170,151,134,.26);border-radius:20px;background:#fff}
.cd-recap div{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 14px}
.cd-recap div+div{border-top:1px solid rgba(170,151,134,.18)}
.cd-recap dt{font-size:12.5px;color:var(--muted)}
.cd-recap dd{margin:0;font-size:14.5px;line-height:1.35;font-weight:550;color:var(--ink);overflow-wrap:anywhere}
.cd-edit{font-size:13px;font-weight:600;color:var(--red-dark)}
.cd .cake-summary-help{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border-radius:16px;background:#f7ebe4;font-size:13.5px;color:var(--ink)}
.cd .cake-summary-help a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);text-decoration:none}
.cd .cake-summary-help .icon{width:16px;height:16px}
.cd-panel .form-error{margin:12px 4px 0;padding:10px 14px;border-radius:14px;background:#fff1ef;color:#9b1c16;font-size:13.5px}
.cd-panel .form-error:empty{display:none}
.cd-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:10px;max-width:640px;margin:0 auto;padding:16px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(252,250,247,0),#fcfaf7 30%)}
.cd-back{flex:none;display:grid;place-items:center;width:56px;height:56px;border:1px solid rgba(170,151,134,.36);border-radius:999px;background:#fff;color:var(--ink);-webkit-tap-highlight-color:transparent;transition:transform .45s var(--p-spring)}
.cd-back .icon{width:22px;height:22px}
.cd-back:active{transform:scale(.92)}
.cd-next{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;height:56px;padding:0 20px 0 24px;border-radius:999px;background:var(--red);color:#fff;font-size:16.5px;font-weight:600;text-decoration:none;box-shadow:0 18px 34px -16px rgba(188,7,17,.7);-webkit-tap-highlight-color:transparent;transition:transform .45s var(--p-spring)}
.cd-next:active{transform:scale(.98)}
.cd-next .icon{width:18px;height:18px}
.cd-send{justify-content:center}
.cd-send .icon{width:20px;height:20px}
/* the drawing comes alive only where it changed */
.cd-cake .cd-tier,.cd-cake .cd-flame,.cd-cake .cd-spark,.cd-cake .cd-topper,.cd-cake .cd-deco{transform-box:fill-box}
.cd-anim-tiers .cd-tier{transform-origin:50% 100%;animation:cd-grow .7s var(--p-spring) both;animation-delay:calc(var(--i) * 70ms)}
.cd-anim-tiers .cd-deco,.cd-anim-tiers .cd-words,.cd-anim-tiers .cd-topper{animation:cd-fade .5s ease .2s both}
.cd-anim-deco .cd-deco{animation:cd-pop .55s var(--p-ease) both}
.cd-anim-top .cd-topper{animation:cd-drop .7s var(--p-spring) both}
.cd-anim-flavor :is(.cd-cakebody,.cd-deco){animation:cd-fade .45s ease both}
.cd-anim-words .cd-words{animation:cd-fade .4s ease both}
.cd-flame{transform-origin:50% 100%;animation:cd-flicker 1.5s ease-in-out infinite}
.cd-spark{transform-origin:50% 50%;animation:cd-twinkle 2.6s ease-in-out infinite}
@keyframes cd-grow{from{transform:scale(.9,.55);opacity:.3}}
@keyframes cd-pop{from{opacity:0;transform:translateY(5px)}}
@keyframes cd-drop{from{opacity:0;transform:translateY(-20px)}}
@keyframes cd-fade{from{opacity:0}}
@keyframes cd-flicker{50%{transform:scale(.9,.84) skewX(4deg)}}
@keyframes cd-twinkle{50%{transform:scale(.7);opacity:.55}}
@media (prefers-reduced-motion:reduce){.cd-cake *{animation:none!important}}
@media (min-width:761px){
  .cd[data-premium]{padding:150px 32px 60px}
  .cd-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:start}
  .cd-stage{position:sticky;top:120px}
  .cd-cake{max-height:none}
  .cd-stage .cd-cake{max-height:62vh}
  .cd-bar{position:sticky;bottom:0;margin:18px 0 0;padding-inline:0}
}

/* ===== Day plate (gün tabağı) =====
   The cake designer's frame (stage, step bar, panel, bar) with a white plate on the stage: each chosen
   kind sits on it as a round of its photo, stacked for two or three a guest; the stage warms for morning
   and deepens for evening. Product cards are photo tiles with a per-guest stepper once chosen. */
.gt-stage{transition:background .6s ease}
.gt-stage[data-time="aksam"]{background:radial-gradient(120% 90% at 78% 8%,#fbefe9 0%,#efddd3 56%,#e4cbbf 100%)}
.gt-stage[data-time="sabah"]{background:radial-gradient(120% 90% at 22% 6%,#fffbf3 0%,#f7ecdf 56%,#eee0cf 100%)}
.gt-scene{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(10px,4vw,22px);padding:20px 12px 6px}
.gt-plate{position:relative;flex:none;width:min(64vw,31vh,300px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 55%,#f6f0e9 57%,#fffdfb 61%,#fbf7f2 80%,#ece3d8 99.5%,rgba(236,227,216,0) 100%);box-shadow:0 34px 38px -30px rgba(70,38,22,.55),0 10px 16px -12px rgba(70,38,22,.25),inset 0 -4px 10px rgba(150,120,95,.16),inset 0 3px 3px rgba(255,255,255,.9)}
.gt-plate::before{content:'';position:absolute;inset:4%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(190,168,146,.22);pointer-events:none}
.gt-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:0 22%;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:17px;line-height:1.25;text-align:center;color:rgba(124,116,119,.82);transition:opacity .3s}
.gt-empty[hidden]{display:grid;opacity:0}
.gt-cutlery{flex:none;width:13px;height:auto;aspect-ratio:16/120;max-height:26vh;stroke:#cbbfb3;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none;filter:drop-shadow(0 3px 2px rgba(80,50,30,.12))}
.gt-knife path:last-child{fill:#e6ddd3}
.gt-bite{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;transform:translate(-50%,-50%);transition:left .62s var(--p-spring),top .62s var(--p-spring),width .62s var(--p-spring),opacity .3s,transform .34s ease}
.gt-food{position:absolute;inset:0;overflow:hidden;border-radius:50%;background:#f1e7dc;box-shadow:0 8px 12px -8px rgba(60,30,15,.5),0 0 0 2px rgba(255,255,255,.85)}
.gt-food img{width:100%;height:100%;object-fit:cover}
.gt-food .shelf-placeholder svg{width:52%;height:52%}
.gt-under{transform:translate(calc(var(--k) * 11%),calc(var(--k) * -9%)) rotate(calc(var(--k) * 9deg));filter:brightness(.9) saturate(.9)}
.gt-count{position:absolute;right:-2%;bottom:0;z-index:1;padding:2px 7px;border-radius:999px;background:rgba(32,20,16,.88);color:#fff;font-size:11px;font-weight:650;line-height:1.5;font-variant-numeric:tabular-nums;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.gt-bite.is-entering>.gt-food:last-of-type,.gt-bite.is-entering>.gt-under{animation:gt-place .7s var(--p-spring) both}
.gt-bite.is-leaving{opacity:0;transform:translate(-50%,-62%) scale(.7)}
@keyframes gt-place{from{opacity:0;transform:translateY(-34%) scale(.62)}}
/* time cards: the sun and the moon in the round mark */
.gt-times .cd-opt-mark svg{width:26px;height:26px}
/* guests */
.gt-people{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1.5px solid rgba(170,151,134,.28);border-radius:24px;background:#fff}
.gt-people>button{display:grid;place-items:center;width:58px;height:58px;border-radius:999px;background:#f6efe7;color:var(--ink);transition:transform .45s var(--p-spring),background-color .25s}
.gt-people>button:active{transform:scale(.9)}
.gt-people>button .icon{width:22px;height:22px}
.gt-people output{display:flex;align-items:baseline;gap:7px}
.gt-people output strong{font-size:44px;line-height:1;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ink)}
.gt-people output small{font-size:15px;color:var(--muted)}
.gt-quick{display:flex;gap:8px;margin-top:12px}
.gt-quick button{flex:1;height:42px;border:1.5px solid rgba(170,151,134,.3);border-radius:999px;background:#fff;font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;transition:background-color .25s,border-color .25s,color .25s}
.gt-quick button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.gt-more a{font-weight:600;color:var(--red-dark);text-decoration:underline;text-underline-offset:3px}
/* product tiles */
.gt-hint{margin:-4px 4px 12px;font-size:13px;color:var(--muted)}
.gt-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gt-opt{display:flex;flex-direction:column;border:1.5px solid rgba(170,151,134,.26);border-radius:20px;background:#fff;overflow:hidden;transition:border-color .25s,box-shadow .25s,opacity .25s}
.gt-opt.is-on{border-color:var(--red);box-shadow:0 12px 26px -18px rgba(188,7,17,.55)}
.gt-opt.is-off:not(.is-on){opacity:.48}
.gt-pick{display:flex;flex-direction:column;align-items:stretch;padding:6px 6px 10px;text-align:left;-webkit-tap-highlight-color:transparent;transition:transform .45s var(--p-spring)}
.gt-pick:active{transform:scale(.97)}
.gt-pick:disabled{opacity:1}
.gt-thumb{position:relative;display:block;aspect-ratio:1.18;overflow:hidden;border-radius:15px;background:#f1e7dc}
.gt-thumb img{width:100%;height:100%;object-fit:cover}
.gt-tick{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.92);color:transparent;box-shadow:0 4px 10px -4px rgba(0,0,0,.35);transition:background-color .25s,color .25s,transform .45s var(--p-spring)}
.gt-tick .icon{width:14px;height:14px;stroke-width:2.6}
.gt-opt.is-on .gt-tick{background:var(--red);color:#fff;transform:scale(1.06)}
.gt-name{display:block;margin:9px 6px 0;font-size:14.5px;line-height:1.25;font-weight:600;color:var(--ink)}
.gt-meta{display:block;margin:3px 6px 0;font-size:12px;line-height:1.35;color:var(--muted)}
.gt-per{display:flex;align-items:center;justify-content:space-between;margin:0 8px 8px;padding:4px;border-radius:999px;background:#fbf3ee;animation:cd-pop .4s var(--p-ease) both}
.gt-per>button{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 1px 0 rgba(170,151,134,.3)}
.gt-per>button .icon{width:15px;height:15px}
.gt-per>span{display:grid;justify-items:center;gap:1px;line-height:1.1;color:var(--ink)}
.gt-per>span strong{font-size:14px;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
.gt-per small{font-size:10.5px;font-weight:450;color:var(--muted)}
/* day */
.gt .cd-day:disabled{opacity:.42}
.gt-band{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:12px 14px;border-radius:18px;background:#f8f1ea}
.gt-band>svg{flex:none;width:28px;height:28px;color:var(--red-dark)}
.gt-band strong{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.gt-band small{display:block;font-size:12.5px;color:var(--muted)}
/* summary */
.gt-lines{margin:12px 0 0;padding:0;list-style:none;overflow:hidden;border:1px solid rgba(170,151,134,.26);border-radius:20px;background:#fff}
.gt-lines li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px}
.gt-lines li+li{border-top:1px solid rgba(170,151,134,.18)}
.gt-lines li.is-off{background:#fff6f4}
.gt-line-img{display:block;width:44px;height:44px;overflow:hidden;border-radius:999px;background:#f1e7dc}
.gt-line-img img{width:100%;height:100%;object-fit:cover}
.gt-line-img .shelf-placeholder svg{width:56%;height:56%}
.gt-line-text strong{display:block;font-size:14px;line-height:1.3;font-weight:600;color:var(--ink)}
.gt-line-text small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--muted)}
.gt-line-price{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.gt-total{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:14px 16px;border-radius:20px;background:var(--ink);color:#fff}
.gt-total span{font-size:15px;font-weight:600}
.gt-total small{display:block;margin-top:2px;font-size:12px;font-weight:400;opacity:.7}
.gt-total strong{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* the running total in the Next button */
.gt .cd-send{gap:9px}
@media (prefers-reduced-motion:reduce){.gt-bite,.gt-bite *{animation:none!important;transition:none!important}}
@media (min-width:761px){
  .gt-plate{width:min(30vw,52vh,380px)}
  .gt-scene{padding:44px 20px 18px}
  .gt-cutlery{width:16px}
  .gt-options{grid-template-columns:repeat(3,1fr)}
}

/* ===== Configurator frame (cake designer, day plate) =====
   Phone: the picture runs edge to edge under the app bar (its buttons float over it) and the steps come
   up over it on a rounded sheet: a thin progress line ("Adım 3 / 7", "Tüm adımlar"), the question as the
   heading, the options. Once the picture scrolls away a small copy of it stands in the bar's middle. The
   bottom bar is frosted: one line of what is being made (and the plate's total), then Back and Next.
   Desktop: the title, then the picture held beside the steps. One 16px gutter everywhere. */
.cfg-note{position:absolute;left:0;right:0;bottom:14px;margin:0;font-size:11px;letter-spacing:.01em;text-align:center;color:rgba(124,116,119,.78)}
.cfg-sentinel{position:absolute;left:0;right:0;bottom:42%;height:1px;pointer-events:none}
.cfg-stage-in{position:relative;display:grid;place-items:center;height:100%;box-sizing:border-box}
.cfg .cd-cake{width:100%;height:100%;max-height:none;padding:6px 0 0}
.cfg-progress{margin:0 0 16px}
.cfg-track{display:flex;gap:4px}
.cfg-track i{flex:1;height:3px;border-radius:3px;background:rgba(170,151,134,.24);transition:background-color .4s var(--p-ease)}
.cfg-track i.is-done{background:rgba(40,37,41,.78)}
.cfg-track i.is-now{background:var(--red)}
.cfg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.cfg-count{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);font-variant-numeric:tabular-nums}
.cfg-all{display:inline-flex;align-items:center;gap:3px;height:30px;margin-right:-6px;padding:0 6px 0 10px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);-webkit-tap-highlight-color:transparent}
.cfg-all .icon{width:15px;height:15px}
.cfg-all:active{background:rgba(170,151,134,.14)}
.cfg .cd-panel{margin-top:0}
.cfg .cd-title{margin:0 0 16px;font-size:29px;line-height:1.08}
.cfg .gt-hint,.cfg .cd-sub{margin-left:0;margin-right:0}
.cfg .cd-help{margin-left:0;margin-right:0}
.cfg .cd-panel .form-error{margin-left:0;margin-right:0}
.cfg .cd-bar{flex-direction:column;align-items:stretch;gap:9px}
.cfg-info{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:17px;margin:0 6px;font-size:13px;line-height:1.3;color:var(--muted)}
.cfg-info span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-info strong{flex:none;font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.cfg-actions{display:flex;gap:10px}
.cfg .cake-summary-help{flex-direction:row;justify-content:space-between;text-align:left}
.cfg-next{display:flex;flex:1;min-width:0}
.cfg-next>.cd-next{flex:1;min-width:0}
/* Back slides in from the edge on the second step and out on the first; Next widens or narrows with it */
.cfg .cd-back{transition:transform .45s var(--p-spring),width .46s var(--p-ease),margin .46s var(--p-ease),opacity .3s var(--p-ease),border-width .46s var(--p-ease)}
.cfg .cd-back.is-gone{width:0;min-width:0;padding:0;margin-right:-10px;border-width:0;opacity:0;overflow:hidden;pointer-events:none}
/* the small picture in the app bar */
.cfg-title{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 4px;border:0;background:none;font:inherit;font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cfg-mini{display:grid;place-items:center;flex:none;width:34px;height:34px;overflow:hidden;border-radius:999px;background:radial-gradient(circle at 50% 30%,#fffaf4,#efe2d3);box-shadow:inset 0 0 0 1px rgba(170,151,134,.22)}
.cfg-mini .cd-cake{width:31px;height:31px;padding:0}
.cfg-mini .cd-cake *{animation:none!important}
.cfg-mini .gt-plate.is-mini{width:28px;box-shadow:0 2px 4px -2px rgba(70,38,22,.45)}
.cfg-mini .gt-plate::before{display:none}
.cfg-mini .gt-bite{transition:none}
.cfg-mini .gt-food{box-shadow:0 0 0 .5px rgba(255,255,255,.9)}
.cfg-mini .shelf-placeholder svg{display:none}
/* every step, from "Tüm adımlar" */
.cfg-list{margin:0;padding:0;list-style:none}
.cfg-list li+li{border-top:1px solid rgba(170,151,134,.18)}
.cfg-list button{display:flex;align-items:center;gap:14px;width:100%;padding:13px 2px;text-align:left;-webkit-tap-highlight-color:transparent}
.cfg-list button:disabled{opacity:.4}
.cfg-dot{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:999px;background:#f4ece3;font-size:13px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.cfg-dot .icon{width:14px;height:14px;stroke-width:2.6}
.cfg-dot:has(.icon){background:var(--ink);color:#fff}
.cfg-list [aria-current="step"] .cfg-dot{background:var(--red);color:#fff}
.cfg-li{flex:1;min-width:0}
.cfg-li strong{display:block;font-size:15.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.cfg-li small{display:block;margin-top:2px;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfg-list button>.icon{width:16px;height:16px;color:var(--muted)}
@media (max-width:760px){
  .cfg[data-premium]{padding:0 16px calc(176px + env(safe-area-inset-bottom,0px))}
  .cfg-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .cfg-stage{margin:calc(-58px - env(safe-area-inset-top,0px)) -16px 0;padding:calc(env(safe-area-inset-top,0px) + 58px) 0 26px;height:calc(env(safe-area-inset-top,0px) + 58px + clamp(250px,40svh,340px));box-sizing:border-box;border-radius:0;box-shadow:none}
  .cfg .cd-ref{top:8px;right:14px}
  .cfg-note{bottom:4px}
  .cfg .cfg-stage-in{padding-bottom:20px}
  .cfg .cd-side{min-height:calc(100svh - 58px - env(safe-area-inset-top,0px))}
  .cfg .cd-side{position:relative;z-index:2;margin:-26px -16px 0;padding:20px 16px 0;border-radius:26px 26px 0 0;background:#fcfaf7;box-shadow:0 -14px 30px -24px rgba(70,40,25,.45)}
  .cfg .cd-bar{max-width:none;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(252,250,247,.9);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 -1px 0 rgba(170,151,134,.2)}
  .cfg .gt-scene{height:100%;box-sizing:border-box;padding:6px 12px 0}
  .cfg .gt-plate{width:min(62vw,calc(clamp(250px,40svh,340px) - 64px),300px)}
  .cfg .gt-cutlery{max-height:calc(clamp(250px,40svh,340px) - 110px)}
}
@media (min-width:761px){
  .cfg[data-premium]{padding:124px 32px 64px}
  .cfg-h1{margin:0 0 28px;font-size:52px;line-height:1.05;font-weight:500;letter-spacing:-.045em;color:var(--ink)}
  .cfg-stage{height:min(72vh,640px)}
  .cfg .cd-side{min-width:0}
  .cfg :is(.cd-ex-track,.cd-days){margin-inline:0;padding-inline:0;scroll-padding-inline:0}
  .cfg .cd-bar{margin:22px 0 0;padding:12px 2px 18px;background:rgba(252,250,247,.92);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 -1px 0 rgba(170,151,134,.22)}
  .cfg .gt-scene{height:100%;box-sizing:border-box}
}

/* ===== Checkout: one screen =====
   The folded summary, then white cards for delivery, address, contact and payment, and a fixed bar that
   names the first missing thing and places the order. Inputs are 16px so iOS does not zoom. */
.co[data-premium]{max-width:640px;margin:0 auto;padding:6px 16px calc(160px + env(safe-area-inset-bottom,0px))}
.co-title{margin:4px 4px 16px;font-size:36px;line-height:1.05;font-weight:500;letter-spacing:-.045em;color:var(--ink)}
.co-title em{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:1.14em;letter-spacing:-.02em;color:var(--red-dark)}
.co-summary,.co-card{border:1px solid rgba(170,151,134,.26);border-radius:22px;background:#fff}
.co-summary{overflow:hidden}
.co-summary>summary{display:flex;align-items:center;gap:12px;padding:12px 14px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.co-summary>summary::-webkit-details-marker{display:none}
.co-summary>summary::after{content:none!important;display:none}
.co-thumbs{display:flex;flex:none}
.co-thumb{display:block;width:38px;height:38px;overflow:hidden;border-radius:999px;background:#efe4d6;box-shadow:0 0 0 2px #fff}
.co-thumb+.co-thumb{margin-left:-12px}
.co-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.co-thumb .shelf-placeholder svg{width:62%;height:62%}
.co-sum-text{display:grid;min-width:0}
.co-sum-text strong{font-size:15px;font-weight:600;color:var(--ink)}
.co-sum-text small{font-size:12.5px;color:var(--muted)}
.co-sum-total{margin-left:auto;font-size:16.5px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.co-summary>summary>.icon{flex:none;width:18px;height:18px;color:var(--muted);transition:transform .35s var(--p-ease)}
.co-summary[open]>summary>.icon{transform:rotate(180deg)}
.co-sum-body{padding:4px 14px 14px;border-top:1px solid rgba(170,151,134,.2)}
.co-sum-body .summary-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(170,151,134,.16)}
.co-sum-body .summary-item img{flex:none;width:46px;height:46px;border-radius:12px;object-fit:cover;background:#efe4d6}
.co-sum-body .summary-item>div{flex:1;min-width:0}
.co-sum-body .summary-item h3{margin:0;font-size:14.5px;line-height:1.3;font-weight:550;color:var(--ink)}
.co-sum-body .summary-item p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.co-sum-body .summary-item>span{font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.co-sum-body #checkout-totals{margin-top:12px}
.co-sum-body .total-line{display:flex;justify-content:space-between;gap:12px;margin:0 0 6px;font-size:14px;color:var(--muted)}
.co-sum-body .total-line.grand{margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(170,151,134,.2);font-size:16px;font-weight:650;color:var(--ink)}
.co-sum-body :is(.tax-note,.shipping-note,.tiny){margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.co-edit-cart{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:600;color:var(--ink)}
.co-edit-cart .icon{width:16px;height:16px}
.co-card{margin-top:14px;padding:16px}
.co-h{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red-dark)}
/* delivery: the place with method and fee, tap to change */
.co-place{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid rgba(170,151,134,.22);border-radius:16px;background:#fcf7f1;color:var(--ink);text-align:left;-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring)}
.co-place:active{transform:scale(.985)}
.co-place>.icon:first-child{flex:none;width:20px;height:20px;color:var(--red-dark)}
.co-place>span:not(.co-change){flex:1;min-width:0}
.co-place strong{display:block;font-size:15px;line-height:1.3;font-weight:600}
.co-place small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.co-change{flex:none;font-size:13.5px;font-weight:600;color:var(--red-dark)}
.co-change .icon{width:18px;height:18px}
.co-place.is-missing{border-color:rgba(227,6,19,.3);background:#fff6f4}
/* when: two choices, then days and two-hour windows as chips */
.co-when{margin:12px 0 0;padding:0;border:0;min-width:0}
.co-seg-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.co-seg,.co-day,.co-slot{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.co-seg input,.co-day input,.co-slot input{position:absolute;inset:0;margin:0;opacity:0;pointer-events:none}
.co-seg>span{display:grid;gap:2px;height:100%;padding:12px 14px;border:1.5px solid rgba(170,151,134,.3);border-radius:16px;transition:border-color .25s,background-color .25s}
.co-seg strong{font-size:15px;font-weight:600;color:var(--ink)}
.co-seg small{font-size:12.5px;color:var(--muted)}
.co-seg input:checked+span{border-color:var(--red);background:#fff6f4}
.co-seg.is-disabled{cursor:default;opacity:.5}
.co-when-note{margin:10px 2px 0;font-size:13px;line-height:1.45;color:var(--muted)}
.co-days{display:flex;gap:8px;overflow-x:auto;margin:12px -16px 0;padding:2px 16px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.co-days::-webkit-scrollbar{display:none}
.co-day{flex:none}
.co-day>span{display:grid;justify-items:center;gap:1px;min-width:58px;padding:8px 6px;border:1.5px solid rgba(170,151,134,.3);border-radius:16px;transition:background-color .25s,border-color .25s,color .25s}
.co-day small{font-size:11.5px;color:var(--muted)}
.co-day strong{font-size:20px;line-height:1.1;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.co-day input:checked+span{border-color:var(--ink);background:var(--ink)}
.co-day input:checked+span :is(strong,small){color:#fff}
.co-day input:checked+span small{opacity:.72}
.co-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.co-slot>span{display:block;padding:11px 4px;border:1.5px solid rgba(170,151,134,.3);border-radius:12px;font-size:13.5px;font-weight:550;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums;transition:border-color .25s,background-color .25s,color .25s}
.co-slot input:checked+span{border-color:var(--red);background:#fff6f4;color:var(--red-dark)}
:is(.co-seg,.co-day,.co-slot) input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.co-cargo{display:flex;align-items:flex-start;gap:10px;margin:12px 2px 0;font-size:14px;color:var(--ink)}
.co-cargo>.icon{flex:none;width:18px;height:18px;color:var(--red-dark)}
.co-cargo small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.co-card .fulfillment-warning{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding:12px 14px;border-radius:14px;background:#fff6ec;color:#7a4a12;font-size:13.5px}
.co-card .fulfillment-warning .icon{width:18px;height:18px}
.co-card .fulfillment-warning p{flex:1;margin:0}
/* fields */
.co-field{display:grid;gap:6px;margin-top:12px}
.co-card>.co-field:first-of-type,.co-card>h2+.co-field{margin-top:0}
.co-field>span{font-size:13px;font-weight:600;color:var(--ink)}
.co-field>span small{font-weight:400;color:var(--muted)}
.co-field :is(input,textarea){width:100%;box-sizing:border-box;padding:13px 14px;border:1.5px solid rgba(170,151,134,.32);border-radius:14px;background:#fcfaf7;font:inherit;font-size:16px;line-height:1.4;color:var(--ink);transition:border-color .2s,background-color .2s}
.co-field textarea{min-height:84px;resize:vertical}
.co-field :is(input,textarea):focus{outline:none;border-color:var(--ink);background:#fff}
.co-field :is(input,textarea)[aria-invalid="true"]{border-color:var(--red);background:#fff6f5}
.co-card .location-control{margin-top:12px}
.co-card .location-find{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;border:1px solid rgba(170,151,134,.36);border-radius:999px;background:#fff;font-size:13.5px;font-weight:550;color:var(--ink)}
.co-card .location-find .icon{width:16px;height:16px;color:var(--red-dark)}
.co-card .location-note{margin:6px 2px 0;font-size:12px;color:var(--muted)}
.co-card .location-status:empty{display:none}
.co-note{margin-top:12px}
.co-note>summary{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink);list-style:none;cursor:pointer}
.co-note>summary::-webkit-details-marker{display:none}
.co-note>summary::after{content:none!important;display:none}
.co-note>summary .icon{width:16px;height:16px;color:var(--red-dark);transition:transform .35s var(--p-ease)}
.co-note[open]>summary .icon{transform:rotate(45deg)}
/* payment */
.co-method{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1.5px solid var(--ink);border-radius:16px}
.co-method>.icon:first-child{flex:none;width:22px;height:22px;color:var(--ink)}
.co-method>span{flex:1;min-width:0}
.co-method strong{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.co-method small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.co-method>.icon:last-child{flex:none;width:20px;height:20px;color:var(--red)}
.co-method-alt{margin-top:10px;font-size:13.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.co-pay-note{margin:10px 2px 0;font-size:12.5px;color:var(--muted)}
.co-pay-note:empty{display:none}
.co-card [hidden]{display:none!important}
.co-ack{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--ink);cursor:pointer}
.co-ack input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--red)}
.co-ack a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.co-ack.is-invalid{color:var(--red-dark)}
/* the confirm bar */
.co-bar{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:16px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(252,250,247,0),#fcfaf7 30%)}
.co-bar .form-error{max-width:608px;margin:0 auto 8px;padding:10px 14px;border-radius:14px;background:#fff1ef;color:#9b1c16;font-size:13.5px;line-height:1.45}
.co-bar .form-error:empty{display:none}
.co-go{display:flex;align-items:center;gap:10px;width:100%;max-width:608px;height:58px;margin:0 auto;padding:0 20px 0 22px;border-radius:999px;background:var(--red);color:#fff;font-size:16.5px;font-weight:600;box-shadow:0 18px 34px -16px rgba(188,7,17,.7);-webkit-tap-highlight-color:transparent;transition:transform .5s var(--p-spring),opacity .25s}
.co-go:active{transform:scale(.98)}
.co-go[disabled]{opacity:.7}
.co-go-label{flex:1;text-align:left}
.co-go-total{font-weight:650;font-variant-numeric:tabular-nums}
.co-go .icon{flex:none;width:18px;height:18px}
.co-empty{padding-top:24px}
@media (min-width:761px){
  .co[data-premium]{padding:150px 16px 40px}
  .co-bar{position:sticky;bottom:0;margin:16px -16px 0}
}

/* ===== Calm chrome =====
   While any dialog is open the page underneath holds still (iOS 16+ honours overflow on the root); the
   gutter stays so a desktop scrollbar does not shift the layout. */
html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}
/* Header: reading downwards the icons fade first and the capsule slips up and away, accelerating;
   scrolling back it drops in on a long, soft deceleration and the icons follow a beat later, left to
   right. Transform and opacity only. */
:root{--p-show:cubic-bezier(.16,1,.3,1);--p-hide:cubic-bezier(.32,0,.67,0)}
body:not(.is-qr-menu) .header[data-premium],body:not(.is-qr-menu).is-scrolled .header[data-premium]{transition:background-color .5s var(--p-ease),border-color .5s var(--p-ease),box-shadow .5s var(--p-ease),transform .8s var(--p-show),opacity .45s var(--p-ease),top .5s var(--p-ease),height .5s var(--p-ease),max-width .6s var(--p-ease)}
body.header-tucked:not(.is-qr-menu) .header[data-premium]{transform:translateY(calc(-100% - 28px)) scale(.96);opacity:0;transition:background-color .5s var(--p-ease),border-color .5s var(--p-ease),box-shadow .5s var(--p-ease),transform .44s var(--p-hide),opacity .26s ease-in .14s,top .5s var(--p-ease),height .5s var(--p-ease),max-width .6s var(--p-ease)}
.header[data-premium] .header-left,.header[data-premium] .header-actions{transition:background-color .5s var(--p-ease),box-shadow .5s var(--p-ease),border-color .5s var(--p-ease),opacity var(--p-fade,.5s) var(--p-ease) var(--p-beat,0s),translate .7s var(--p-show) var(--p-beat,0s)}
.header[data-premium] .brand{transition:width .55s var(--p-ease),filter .5s,opacity var(--p-fade,.5s) var(--p-ease) var(--p-beat,0s),translate .7s var(--p-show) var(--p-beat,0s)}
.header[data-premium] .header-left{--p-beat:.1s}
.header[data-premium] .brand{--p-beat:.15s}
.header[data-premium] .header-actions{--p-beat:.2s}
body.header-tucked:not(.is-qr-menu) .header[data-premium] :is(.header-left,.brand,.header-actions){opacity:0;translate:0 -5px;--p-fade:.18s}
body.header-tucked:not(.is-qr-menu) .header[data-premium] .header-left{--p-beat:0s}
body.header-tucked:not(.is-qr-menu) .header[data-premium] .brand{--p-beat:.03s}
body.header-tucked:not(.is-qr-menu) .header[data-premium] .header-actions{--p-beat:.06s}
/* The shelf tabs step with the header: down on the same deceleration, up on an ease that lands softly. */
.shelf-nav{transition:transform .8s var(--p-show),box-shadow .3s}
body.header-tucked .shelf-nav{transition:transform .5s cubic-bezier(.45,0,.2,1),box-shadow .3s}
/* Cart capsule: always laid out on phones, so it never pops. It rises in with a slight settle and dips
   away below the screen edge at the top of the home page, under any open sheet or the menu, on pages
   that hide it, and when the cart empties. */
@media (max-width:760px){
  #mobile-cart-bar.mobile-cart-bar{transition:transform .7s cubic-bezier(.22,1.18,.36,1),opacity .4s var(--p-ease),visibility 0s}
  body:not(.is-qr-menu) #mobile-cart-bar.mobile-cart-bar[hidden],
  body.is-home:not(.is-scrolled):not(.is-qr-menu) #mobile-cart-bar.mobile-cart-bar,
  html:has(dialog[open]) body:not(.is-qr-menu) #mobile-cart-bar.mobile-cart-bar{display:block!important;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,calc(100% + 26px + env(safe-area-inset-bottom,0px))) scale(.94);transition:transform .42s var(--p-hide),opacity .28s ease-in .06s,visibility 0s linear .44s}
}
@media (prefers-reduced-motion:reduce){
  body.header-tucked:not(.is-qr-menu) .header[data-premium]{transform:none;opacity:1}
  body.header-tucked:not(.is-qr-menu) .header[data-premium] :is(.header-left,.brand,.header-actions){opacity:1;translate:none}
  #mobile-cart-bar.mobile-cart-bar{transition:opacity .2s!important}
}
/* Menu open: the browser's own bars (status bar, toolbar) take the menu's burgundy. Safari tints them
   from the root colour (theme-color on older iOS and Android); app.js switches it once the circle has
   nearly filled the screen and back as it starts to close. The menu's edges share that exact colour so
   the bars and the screen meet without a seam. */
html.nav-chrome,html.nav-chrome body{background-color:#561620}

/* Content reveals rise into place but are never blank: a quick scroll must not show empty cards. */
.reveal-ready{opacity:1;transition:transform .85s var(--p-ease);transition-delay:var(--reveal-delay,0ms)}

/* ===== Scroll motion on the compositor =====
   The photo drifts slower than the page and leans in; the copy only softens and lifts once it
   starts leaving under the top edge, so buttons never look faded while in full view. Driven by scroll-driven animations, so the browser runs it off the main
   thread in step with the finger — nothing is recalculated per frame in JavaScript. Without
   support the opening screen simply stays still. */
@keyframes p-hero-drift{to{transform:translate3d(0,64px,0) scale(1.07)}}
@keyframes p-hero-drift-wide{to{transform:translate3d(0,35px,0) scale(1.05)}}
@keyframes p-hero-lift{to{transform:translate3d(0,-40px,0);opacity:.15}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero.hero-full[data-premium] .hero-content{animation:p-hero-lift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
  @media (prefers-reduced-motion:no-preference) and (max-width:760px){
    .hero.hero-full[data-premium] .hero-media picture{will-change:transform;animation:p-hero-drift linear both;animation-timeline:scroll(root);animation-range:0 85svh}
  }
  @media (prefers-reduced-motion:no-preference) and (min-width:761px){
    .hero.hero-full[data-premium] .hero-media{will-change:transform;animation:p-hero-drift-wide linear both;animation-timeline:scroll(root);animation-range:0 100svh}
  }
}
@keyframes p-path-in{from{translate:0 40px;scale:.95}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .paths-head,.path-card,.path-all{animation:p-path-in linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  }
}

/* ===== QR menu =====
   Read at the table: a calm masthead, sticky category tabs that jump to their section and follow the
   scroll, the search in the same bar, rows like a printed menu (name and unit, a dotted leader, the
   price), a small round photo where there is one, and a read-only sheet for the details. */
body.is-qr-menu .header[data-premium]{display:none!important}
body.is-qr-menu #main{padding-top:0}
.qm[data-premium]{max-width:720px;margin:0 auto;padding:calc(26px + env(safe-area-inset-top,0px)) 0 calc(40px + env(safe-area-inset-bottom,0px))}
.qm-mast{display:grid;justify-items:center;padding:8px 20px 24px;text-align:center}
.qm-logo{display:block;width:112px}
.qm-logo img{display:block;width:100%;height:auto}
.qm-place{margin:18px 0 0;font-size:11.5px;font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:var(--red-dark)}
.qm-mast h1{margin:6px 0 0;font-size:46px;line-height:1;font-weight:500;letter-spacing:-.045em;color:var(--ink)}
.qm-welcome{margin:10px 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;font-style:italic;color:var(--muted)}
.qm-mast::after{content:'';width:44px;height:1px;margin-top:22px;background:rgba(170,151,134,.55)}
.qm-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px 16px;background:rgba(252,250,247,.92);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 1px 0 rgba(170,151,134,.22)}
.qm-tabs{display:flex;flex:1;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.qm-tabs::-webkit-scrollbar{display:none}
.qm-tabs button{flex:none;height:36px;padding:0 14px;border:1px solid rgba(170,151,134,.3);border-radius:999px;background:#fff;font:inherit;font-size:14px;font-weight:550;color:var(--muted);white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background-color .3s,border-color .3s,color .3s}
.qm-tabs button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.qm-find{flex:none;display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(170,151,134,.3);border-radius:999px;background:#fff;color:var(--ink)}
.qm-find .icon{width:18px;height:18px}
.qm-search,.qm-find-close{display:none}
.qm-bar.is-finding :is(.qm-tabs,.qm-find){display:none}
.qm-bar.is-finding .qm-search{display:flex;flex:1;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid var(--ink);border-radius:999px;background:#fff}
.qm-search .icon{flex:none;width:17px;height:17px;color:var(--muted)}
.qm-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink)}
.qm-bar.is-finding .qm-find-close{display:block;flex:none;padding:0 4px;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--ink)}
.qm-list{padding:0 20px}
.qm-section{padding-top:28px}
.qm-h{display:flex;align-items:baseline;gap:10px;margin:0;padding-bottom:10px;border-bottom:1.5px solid var(--ink);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.qm-h small{font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--muted)}
.qm .menu-item{all:unset;display:block;border-bottom:1px solid rgba(170,151,134,.2)}
.qm-row{display:flex;align-items:flex-end;gap:12px;width:100%;padding:14px 0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;-webkit-tap-highlight-color:transparent;transition:background-color .2s}
.qm-row:active{background:rgba(170,151,134,.08)}
.qm-thumb{flex:none;align-self:center;width:52px;height:52px;overflow:hidden;border-radius:999px;background:#f1e7dc;box-shadow:0 6px 12px -8px rgba(60,30,15,.45)}
.qm .qm-thumb img{display:block;width:100%;height:100%;margin:0;border-radius:0;object-fit:cover;aspect-ratio:auto}
.qm-text{display:grid;gap:2px;min-width:0}
.qm-text strong{font-size:16.5px;font-weight:550;line-height:1.3;letter-spacing:-.01em}
.qm-text small{font-size:12.5px;color:var(--muted)}
.qm-leader{flex:1;min-width:16px;margin-bottom:6px;border-bottom:1.5px dotted rgba(124,116,119,.45)}
.qm-price{display:grid;flex:none;justify-items:end;font-size:16.5px;font-weight:600;font-variant-numeric:tabular-nums}
.qm-price em{font-size:10.5px;font-style:normal;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--red-dark)}
.qm-empty{padding:56px 10px;text-align:center}
.qm-empty h2{font-size:22px}
.qm-empty p{margin-top:6px;color:var(--muted)}
.qm-foot{margin:36px 20px 0;padding-top:20px;border-top:1px solid rgba(170,151,134,.25);font-size:13px;text-align:center;color:var(--muted)}
.qm-foot p{margin:0 0 4px}
.qm-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:14px!important}
.qm-links a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(40,37,41,.3);text-underline-offset:3px}
.qm-detail .sheet-body{padding:0 20px calc(26px + env(safe-area-inset-bottom,0px))}
.qm-detail-photo{display:grid;overflow:hidden;aspect-ratio:4/3;border-radius:22px;background:#f1e7dc}
.qm-detail-photo img{width:100%;height:100%;object-fit:cover}
.qm-detail-photo .shelf-placeholder svg{width:30%;height:30%}
.qm-detail-cat{margin:16px 0 0;font-size:11.5px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--red-dark)}
.qm-detail-card h3{margin:6px 0 0;font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.qm-detail-price{margin:8px 0 0;font-size:15px;color:var(--muted)}
.qm-detail-price strong{font-size:22px;font-weight:600;color:var(--ink)}
.qm-detail-desc{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--ink)}
.qm-detail-note{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;padding:12px 14px;border-radius:14px;background:#f7efe8;font-size:13.5px;color:var(--muted)}
.qm-detail-note .icon{flex:none;width:17px;height:17px;margin-top:1px}
@media (min-width:761px){.qm[data-premium]{padding-top:48px}.qm-mast h1{font-size:56px}.qm-bar{padding-left:20px;padding-right:20px}}

/* Badges the business sets by hand: Çok satan (burgundy) and Yeni (white, red letters). */
.shelf-tags{position:absolute;left:8px;top:8px;z-index:2;display:flex;align-items:center;gap:6px}
.shelf-tags .shelf-ship{position:static}
.shelf-badge,.ps-badge,.qm-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:#5e1822;color:#fff;font-size:11.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap;box-shadow:0 6px 14px -8px rgba(40,25,18,.55)}
.shelf-badge.is-new,.ps-badge.is-new,.qm-badge.is-new{background:#fff;color:var(--red-dark)}
.ps-badge{display:flex;width:max-content;margin:0 0 8px;box-shadow:none}
.ps-badge.is-new{background:#fff0f0}
.ps-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ps-badges .ps-badge{margin:0}
.qm-badge{height:20px;margin-left:8px;padding:0 8px;font-size:10.5px;vertical-align:2px;box-shadow:none}
.qm-badge.is-new{background:#fff0f0}
.coll-body.is-list .shelf-tags{display:none}

/* Category selection settles into the existing catalog shell. */
.coll-nav .shelf-jump{transition:color .22s ease,background-color .22s ease,box-shadow .22s ease}

/* Payment-first checkout; official brand assets retain their original colors. */
.checkout-brand-band{display:flex;justify-content:center;margin:22px 0 14px;padding:0 3px}
.checkout-brand-band>img{display:block;width:min(100%,430px);height:auto;max-height:35px;object-fit:contain}
.co-method.is-unavailable{border:1px solid var(--line);background:rgba(145,119,95,.035)}
.co-method>.co-pay-chip{flex:none;padding:5px 9px;border-radius:7px;background:var(--line);color:var(--muted);font-size:10px;font-weight:550;white-space:nowrap}
.co-privacy-link{margin:12px 0 0;font-size:11px;line-height:1.6;color:var(--muted)}
.co-privacy-link a{color:inherit;text-underline-offset:3px}
.co-go:disabled{background:#e9e4df;color:#89817a;box-shadow:none;cursor:default;transform:none;opacity:1}
.co-go:disabled .co-go-total{color:inherit}