/* ==========================================================================
   Amelia Flowers — Tirana. Built on the Modernist system: zero radius,
   flush-left, hairline rules. Editorial, not soft.

   Two families, and no more. Playfair Display carries every heading, price
   and product name — it is the closest match to the high-contrast serif of
   the Amelia lockup, so the type and the logo read as one voice. Archivo
   stays on body copy, navigation, labels and buttons, where a serif at
   11–13px uppercase would fall apart. Both ship the full Latin Extended set,
   so ë, ç, Ë and Ç render from the webfont rather than from a fallback.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Playfair+Display:wght@400..800&display=swap');

:root{
  --color-bg:#f3f2f2;
  --color-surface:#eae9e9;
  --color-ink:#141211;
  --color-text:#201e1d;
  /* The accent is the wine red of the Amelia lockup (#830b25), lifted a
     little so it still reads as a colour on a button rather than as black.
     Revert this block alone to go back to the old orange-red. */
  --color-accent:#9c0f2e;
  --color-accent-600:#870b26;
  --color-accent-700:#6e0a20;
  --color-accent-100:#fdf3f5;
  --color-accent-200:#f4dde3;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);
  --color-divider-strong: color-mix(in srgb, #201e1d 82%, transparent);

  --n-100:#f8f4f4; --n-200:#eae7e7; --n-300:#d7d3d3; --n-400:#bab6b6;
  --n-500:#9b9797; --n-600:#7d7979; --n-700:#605d5d; --n-800:#444141; --n-900:#2d2b2b;

  --font-head:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Archivo",system-ui,sans-serif;

  --container: 1320px;
  --gutter: 40px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-s: .3s;
  --dur-m: .6s;
  --dur-l: 1s;

  /* The system is otherwise square by design. These are scoped to the
     product card and the pieces that sit inside it. */
  --radius-card: 20px;
  --radius-pill: 999px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:16px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html.no-scroll,body.no-scroll{overflow:hidden}
img{display:block;max-width:100%}
/* <picture> only exists to offer a WebP alongside the JPEG. display:contents
   removes its box, so every `.something img` rule keeps applying exactly as
   it did when the img was a direct child. */
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--color-accent);color:#fff}
/* Playfair is a high-contrast serif: it needs a touch more leading than the
   condensed-sans setting it replaces, or ascenders meet the descenders of the
   line above — and Albanian sets gj, ç and ë constantly. 700 rather than 800
   keeps the hairlines in the thick/thin contrast that makes the face elegant;
   800 fills them in. No font-stretch: Playfair carries no width axis. */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;letter-spacing:-.012em;line-height:1.1;margin:0}
.hero-title,.quote blockquote{font-weight:700}
.p-name,.card-title{font-weight:600}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
@media (max-width:720px){:root{--gutter:20px}}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font:700 11px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent-700);
}
.kicker::before{content:"";width:22px;height:2px;background:var(--color-accent)}
.kicker.on-dark{color:#f2c3ce}
.kicker.on-dark::before{background:var(--color-accent)}

.idx{font:600 12px/1 ui-monospace,"SFMono-Regular",Menlo,monospace;color:var(--n-500);letter-spacing:.02em}

.hr{height:2px;border:0;margin:0;background:var(--color-divider)}
.hr.strong{background:var(--color-divider-strong)}

/* ---------------- image placeholder ----------------
   Shown when a photo is missing, so an empty slot reads as a deliberate
   editorial panel rather than a broken image. Drop the real photo in and
   this disappears on its own. */
.img-slot{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px;background:
    repeating-linear-gradient(135deg,transparent 0 12px,color-mix(in srgb,var(--color-accent) 7%,transparent) 12px 13px),
    linear-gradient(160deg,var(--color-accent-100),var(--color-surface));
  border:2px solid var(--color-divider);overflow:hidden;
}
.img-slot::before{
  content:"";position:absolute;top:18px;left:18px;width:26px;height:26px;
  border-top:2px solid var(--color-accent);border-left:2px solid var(--color-accent);
}
.img-slot b{
  font-family:var(--font-head);font-weight:700;font-size:13px;
  letter-spacing:.02em;color:var(--color-text);position:relative;z-index:1;
}
.img-slot span{
  font:600 10px var(--font-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-accent-700);margin-bottom:6px;position:relative;z-index:1;
}
.img-slot em{font:400 11px var(--font-body);font-style:normal;color:var(--n-600);margin-top:4px;position:relative;z-index:1}
/* hero sits under a dark scrim — its placeholder inverts to keep the
   headline legible and the panel from glowing through. */
.hero .img-slot{
  background:
    repeating-linear-gradient(135deg,transparent 0 12px,color-mix(in srgb,var(--color-accent) 22%,transparent) 12px 13px),
    linear-gradient(160deg,#2a2422,var(--color-ink));
  border-color:rgba(255,255,255,.14);justify-content:center;align-items:center;text-align:center;
}
.hero .img-slot b{color:rgba(255,255,255,.9)}
.hero .img-slot em{color:rgba(255,255,255,.5)}
.hero .img-slot span{color:#eba3b3}
.hero .img-slot::before{border-color:var(--color-accent)}
.p-media,.pd-media,.split-media,.reveal-mask{position:relative}
/* ---------------- logo ----------------
   The Amelia wordmark is a wider, shorter shape than a plain text logotype,
   so it is set by height and left to find its own width — never a fixed
   width, which would squash it. 30px keeps the cap height of AMELIA at
   roughly the optical size of the navigation beside it; 26px made the
   letterforms thinner than the hairline rules around them.
   Over the hero the mark is knocked out to white; on a light page and on
   the solid header it stays the wine red it was drawn in. */
.brand-lockup{height:30px;width:auto;display:block;transition:height .4s var(--ease-in-out)}
.site-header:not(.solid) .brand-lockup{filter:brightness(0) invert(1)}
.on-light .site-header:not(.solid) .brand-lockup{filter:none}
/* The header shrinks on scroll; the mark comes with it so the lockup never
   crowds the border underneath it. */
.site-header.solid .brand-lockup{height:27px}
@media (max-width:900px){.brand-lockup,.site-header.solid .brand-lockup{height:27px}}
/* Only the genuinely narrow handsets. A 375–390px phone keeps the 27px mark;
   below that the lockup and the language pill start competing for the bar. */
@media (max-width:360px){.brand-lockup,.site-header.solid .brand-lockup{height:23px}}
.brand{flex:none}
.foot-lockup{height:34px;width:auto;filter:brightness(0) invert(1)}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;
  padding:16px 22px;border:2px solid transparent;cursor:pointer;position:relative;overflow:hidden;
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .35s var(--ease-out)}
.btn span{position:relative;z-index:1}
.btn-primary{background:var(--color-accent);color:#fff}
.btn-primary::after{content:"";position:absolute;inset:0;background:var(--color-ink);transform:translateX(-101%);transition:transform .4s var(--ease-in-out);z-index:0}
.btn-primary:hover::after{transform:translateX(0)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-primary span,.btn-primary svg{position:relative;z-index:1}
.btn-dark{background:var(--color-ink);color:var(--color-bg)}
.btn-dark:hover{background:var(--color-accent)}
.btn-outline{background:transparent;color:var(--color-text);border-color:var(--color-text)}
.btn-outline:hover{border-color:var(--color-accent);color:var(--color-accent)}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-outline-light:hover{border-color:#fff}
.btn-block{width:100%}
/* WhatsApp uses its own brand green — deliberately outside the palette so
   customers recognise it instantly as the messaging step. */
.btn-wa{background:#25D366;color:#0b3d1f}
.btn-wa:hover{background:#1eb457}
.btn-wa svg{width:19px;height:19px}
.wa-block{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:14px}
.wa-note{max-width:46ch;margin:0;font-size:13.5px;line-height:1.6;color:var(--n-700)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost-icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;position:relative}
.btn-ghost-icon svg{width:20px;height:20px}

/* ---------------- header ---------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);
  transition:background .4s var(--ease-in-out),padding .4s var(--ease-in-out),border-color .4s;
  border-bottom:2px solid transparent;
}
.site-header.solid{background:var(--color-bg);border-color:var(--color-divider);padding:14px var(--gutter)}
.site-header .brand{font-family:var(--font-head);font-weight:700;font-size:22px;letter-spacing:-.01em;display:flex;align-items:center;gap:2px}
.site-header .brand .dot{color:var(--color-accent)}
.header-inner{display:flex;align-items:center;gap:44px}
.main-nav{display:flex;gap:34px}
.main-nav a{font:600 13px var(--font-body);letter-spacing:.01em;position:relative;padding:4px 0}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:currentColor;transition:right .3s var(--ease-out)}
.main-nav a:hover::after,.main-nav a.active::after{right:0}
.header-tools{display:flex;align-items:center;gap:18px}
.on-light .site-header:not(.solid) .brand,
.on-light .site-header:not(.solid) .main-nav a,
.on-light .site-header:not(.solid) .lang-pill,
.on-light .site-header:not(.solid) .icon-btn{color:var(--color-text)}
.site-header:not(.solid) .brand,
.site-header:not(.solid) .main-nav a,
.site-header:not(.solid) .lang-pill,
.site-header:not(.solid) .icon-btn{color:#fff}
.site-header:not(.solid) .lang-pill{border-color:rgba(255,255,255,.5)}

.lang-pill{display:inline-flex;border:2px solid var(--color-divider-strong);overflow:hidden}
.lang-pill button{padding:6px 12px;font:700 11px var(--font-body);letter-spacing:.06em}
@media (max-width:900px){.lang-pill button{padding:11px 14px}}
/* Three language buttons at the touch-size padding, a cart, a menu button and
   the lockup do not all fit across a 320px bar — the row pushed the page into
   a horizontal scroll. Narrowing the pill (its height, and so its tap target,
   is unchanged) is what gives the row back. */
@media (max-width:360px){
  .lang-pill button{padding:11px 8px}
  .header-tools{gap:8px}
  .site-header{padding-left:16px;padding-right:16px}
}
.lang-pill button.active{background:var(--color-accent);color:#fff}

.icon-btn{position:relative;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center}
/* Extends the tappable box to 44px around the 26px icon without moving it:
   the padding grows the hit area, the negative margin gives the space back
   to the layout. */
@media (max-width:900px){
  .icon-btn{padding:9px;margin:-9px;box-sizing:content-box}
  .header-tools{gap:10px}
}
.icon-btn svg{width:22px;height:22px}
.cart-count{position:absolute;top:-8px;right:-10px;min-width:16px;height:16px;padding:0 3px;background:var(--color-accent);color:#fff;font:700 10px var(--font-body);display:grid;place-items:center}
.menu-toggle{display:none}

@media (max-width:900px){
  .main-nav{display:none}
  .menu-toggle{display:inline-flex}
  .header-inner{gap:16px}
}

/* mobile menu overlay */
.mobile-menu{
  position:fixed;inset:0;z-index:250;background:var(--color-ink);color:var(--color-bg);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-in-out);
}
.mobile-menu.open{clip-path:inset(0 0 0 0)}
.mobile-menu a{
  font-family:var(--font-head);font-weight:700;font-size:clamp(30px,9vw,46px);
  letter-spacing:-.01em;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);
  opacity:0;transform:translateY(22px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.mobile-menu.open a{opacity:1;transform:translateY(0)}
.mobile-menu.open a:nth-child(1){transition-delay:.18s}
.mobile-menu.open a:nth-child(2){transition-delay:.25s}
.mobile-menu.open a:nth-child(3){transition-delay:.32s}
.mobile-menu.open a:nth-child(4){transition-delay:.39s}
.mobile-menu .mm-foot{margin-top:40px;font-size:13px;color:var(--n-500);opacity:0;transition:opacity .5s .5s}
.mobile-menu.open .mm-foot{opacity:1}
.menu-toggle{width:26px;height:26px;align-items:center;justify-content:center;flex-direction:column;gap:5px;z-index:260;position:relative}
.menu-toggle i{display:block;width:20px;height:2px;background:currentColor;transition:transform .35s var(--ease-in-out),opacity .2s}
body.menu-open .menu-toggle{color:#fff}
body.menu-open .menu-toggle i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .menu-toggle i:nth-child(2){opacity:0}
body.menu-open .menu-toggle i:nth-child(3){transform:translateY(-3.5px) rotate(-45deg)}

/* ---------------- marquee ---------------- */
.marquee{
  background:var(--color-ink);color:var(--color-bg);overflow:hidden;white-space:nowrap;
  padding:11px 0;position:relative;z-index:5;
}
.marquee-track{display:inline-flex;animation:marquee 26s linear infinite}
.marquee span{display:inline-flex;align-items:center;gap:14px;padding:0 20px;font:700 12px var(--font-body);letter-spacing:.1em;text-transform:uppercase}
.marquee span::after{content:"✦";color:var(--color-accent)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------- hero ---------------- */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--color-ink)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.6s var(--ease-out)}
.hero.loaded .hero-media img{transform:scale(1)}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,12,11,.55) 0%,rgba(15,12,11,.1) 38%,rgba(15,12,11,.2) 70%,rgba(15,12,11,.78) 100%)}
.hero-wipe{position:absolute;inset:0;background:var(--color-accent);transform-origin:top;z-index:3;transform:scaleY(0)}
.js .hero-wipe{transform:scaleY(1)}
.hero.loaded .hero-wipe{animation:wipe 1s var(--ease-in-out) forwards}
@keyframes wipe{to{transform:scaleY(0)}}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gutter) 76px}
.hero-eyebrow{color:rgba(255,255,255,.85);font:700 12px var(--font-body);letter-spacing:.18em;text-transform:uppercase}
.hero-eyebrow span{display:inline-block;transform:translateY(0)}
.hero-title{color:#fff;font-size:clamp(46px,9vw,116px);max-width:16ch}
/* The reveal mask clips at the padding box, so each line needs bottom padding
   for descenders — Albanian leans on gj / ç / ë constantly. The negative
   margin cancels the padding so line spacing is unchanged. */
.hero-title .line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.hero-title .line span{display:block;transition:transform .9s var(--ease-out)}
.js .hero-title .line span{transform:translateY(110%)}
.hero.loaded .hero-title .line span{transform:translateY(0)}
.hero-title .line:nth-child(2) span{transition-delay:.08s}
.hero-sub{color:rgba(255,255,255,.92);font-size:17px;max-width:44ch;margin:22px 0 0;transition:opacity .8s var(--ease-out) .5s,transform .8s var(--ease-out) .5s}
.js .hero-sub{opacity:0;transform:translateY(16px)}
.hero.loaded .hero-sub{opacity:1;transform:translateY(0)}
.hero-actions{display:flex;gap:14px;margin-top:30px;transition:opacity .8s var(--ease-out) .65s,transform .8s var(--ease-out) .65s}
.js .hero-actions{opacity:0;transform:translateY(16px)}
.hero.loaded .hero-actions{opacity:1;transform:translateY(0)}
.hero-scroll{position:absolute;right:var(--gutter);bottom:34px;z-index:2;display:flex;align-items:center;gap:10px;color:#fff}
.hero-scroll .line{width:1px;height:46px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.hero-scroll .line::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:#fff;animation:scrollline 2.2s var(--ease-in-out) infinite}
@keyframes scrollline{50%{top:100%}100%{top:100%}}
.hero-scroll span{writing-mode:vertical-rl;font:700 10px var(--font-body);letter-spacing:.16em;text-transform:uppercase}

/* ---------------- hero on small screens ----------------
   Two buttons side by side leave ~160px each, which breaks "Shop bouquets"
   onto a second line. Let them keep their natural width and wrap to a new
   row instead, and drop the scroll cue — it shares the bottom-right corner
   with the second button once they wrap, and it tells a touch user nothing. */
@media (max-width:720px){
  .hero-actions{flex-wrap:wrap}
  .hero-actions .btn{white-space:nowrap}
  .hero-scroll{display:none}
  .hero-content{padding-bottom:56px}
}

/* ---------------- reveal ----------------
   Scoped to .js so a JS failure leaves content visible rather than at opacity:0. */
.js [data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:translateY(0)}
.js [data-reveal="img"]{transform:none}
[data-reveal="img"] .reveal-mask{overflow:hidden;position:relative}
.js [data-reveal="img"] img{transform:scale(1.18);transition:transform 1.4s var(--ease-out)}
.js [data-reveal="img"].in img{transform:scale(1)}
.js [data-reveal="img"] .reveal-mask::after{content:"";position:absolute;inset:0;background:var(--color-accent);transform-origin:left;z-index:2;transform:scaleX(0)}
.js [data-reveal="img"].in .reveal-mask::after{animation:swipe .9s var(--ease-in-out) forwards}
@keyframes swipe{0%{transform-origin:left;transform:scaleX(0)}45%{transform-origin:left;transform:scaleX(1)}55%{transform-origin:right;transform:scaleX(1)}100%{transform-origin:right;transform:scaleX(0)}}
.js [data-reveal-stagger] > *{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js [data-reveal-stagger].in > *{opacity:1;transform:translateY(0)}
.js [data-reveal-stagger].in > *:nth-child(1){transition-delay:.02s}
.js [data-reveal-stagger].in > *:nth-child(2){transition-delay:.1s}
.js [data-reveal-stagger].in > *:nth-child(3){transition-delay:.18s}
.js [data-reveal-stagger].in > *:nth-child(4){transition-delay:.26s}
.js [data-reveal-stagger].in > *:nth-child(5){transition-delay:.34s}
.js [data-reveal-stagger].in > *:nth-child(6){transition-delay:.42s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js [data-reveal],.js [data-reveal-stagger] > *{opacity:1 !important;transform:none !important}
}

/* ---------------- section basics ---------------- */
section{position:relative}
.section{padding:120px 0}
.section-tight{padding:80px 0}
@media (max-width:900px){.section{padding:80px 0}.section-tight{padding:56px 0}}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:52px;flex-wrap:wrap}
.section-head h2{font-size:clamp(30px,4.4vw,52px)}
.section-tag{display:flex;align-items:center;gap:14px;margin-bottom:16px}

/* category chips */
.chip-row{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  padding:9px 18px;border:2px solid var(--color-divider-strong);font:700 12px var(--font-body);
  letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:.25s var(--ease-out);white-space:nowrap;
}
.chip:hover{border-color:var(--color-accent);color:var(--color-accent-700)}
.chip.active{background:var(--color-ink);border-color:var(--color-ink);color:#fff}

/* ---------------- product grid / card ---------------- */
/* Was a 2px gap over a dark backing, which drew the hairline rules between
   cards. Real gaps now, so each card is its own object. */
.grid-products{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
@media (max-width:960px){.grid-products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid-products{grid-template-columns:1fr}}
.p-card{
  /* A shade lighter than the page, so the rounded shape reads as a card
     rather than as a photograph that happens to have soft corners. */
  background:var(--n-100);display:flex;flex-direction:column;position:relative;
  /* overflow clips the photograph to the rounded corners, so the media needs
     no radius of its own. */
  border:2px solid var(--color-divider);border-radius:var(--radius-card);overflow:hidden;
  transition:border-color .3s var(--ease-out),transform .4s var(--ease-out);
}
.p-card:hover{border-color:var(--color-divider-strong);transform:translateY(-4px)}
.p-card .p-media{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--n-200)}
.p-card .p-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.p-card:hover .p-media img{transform:scale(1.07)}
.p-card .p-quick{
  position:absolute;left:14px;right:14px;bottom:14px;display:flex;gap:8px;
  opacity:0;transform:translateY(10px);transition:.3s var(--ease-out);
}
.p-card:hover .p-quick{opacity:1;transform:translateY(0)}
.p-tag{position:absolute;top:14px;left:14px;background:var(--color-accent);color:#fff;font:700 10px var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;z-index:2;border-radius:var(--radius-pill)}
.p-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.p-cat{font:600 10.5px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--n-600)}
.p-name{font-family:var(--font-head);font-weight:600;font-size:19px;letter-spacing:-.005em;line-height:1.25}
.p-desc{font:400 13px/1.5 var(--font-body);color:var(--n-700);margin:0;flex:1}
.p-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.p-price{font-family:var(--font-head);font-weight:700;font-size:16px}
.add-btn{
  width:42px;height:42px;background:var(--color-ink);color:#fff;display:grid;place-items:center;flex:none;
  border-radius:50%;transition:background .25s,transform .25s;
}
.add-btn:hover{background:var(--color-accent)}
.add-btn.bump{animation:bump .4s var(--ease-out)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(.82)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.add-btn svg{width:17px;height:17px}

/* ---------------- story split ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split-media{aspect-ratio:4/5;overflow:hidden;position:relative}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-text{padding:0 var(--gutter)}
.split.reverse{direction:rtl}
.split.reverse > *{direction:ltr}
/* Stacked in one column the text sits directly under the photograph, and the
   two-column gap of 0 left the kicker flush against the image edge. Must come
   after the .split-text shorthand above, which resets padding-top. */
@media (max-width:900px){.split-text{padding-top:38px}}
.stat-row{display:flex;gap:48px;margin-top:36px}
.stat b{display:block;font-family:var(--font-head);font-weight:700;font-size:40px;color:var(--color-accent)}
.stat span{font:600 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--n-600)}

/* ---------------- dark band ---------------- */
.band-dark{background:var(--color-ink);color:var(--color-bg)}
.band-dark .kicker{color:#f2c3ce}
.band-dark .hr{background:rgba(255,255,255,.16)}

/* quote */
.quote{max-width:900px}
.quote blockquote{font-family:var(--font-head);font-weight:700;font-size:clamp(28px,4vw,46px);line-height:1.24;letter-spacing:-.01em;margin:0}
.quote cite{display:block;margin-top:26px;font:600 13px var(--font-body);font-style:normal;color:var(--n-600)}
.band-dark .quote cite{color:var(--n-400)}

/* testimonial cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--color-divider-strong)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}}
.t-card{background:var(--color-bg);padding:30px 28px}
.t-stars{color:var(--color-accent);letter-spacing:2px;font-size:14px}
.t-card p{font-size:14.5px;line-height:1.6;margin:16px 0 0;color:var(--n-800)}
.t-name{margin-top:20px;font:700 12px var(--font-body);letter-spacing:.03em}

/* newsletter */
.newsletter{display:flex;gap:0;max-width:520px;border:2px solid var(--color-divider-strong)}
/* min-width:0 so the field can actually shrink. A flex item's default
   min-width:auto is its intrinsic size — around 170px for a text input — which
   on a narrow phone pushed the Subscribe button past the right edge and gave
   the page a horizontal scroll. */
.newsletter input{flex:1;min-width:0;border:0;background:transparent;padding:16px 18px;outline:none}
.newsletter button{padding:16px 22px;background:var(--color-ink);color:#fff;font:700 12px var(--font-body);letter-spacing:.05em;text-transform:uppercase}
.newsletter button:hover{background:var(--color-accent)}

/* ---------------- footer ---------------- */
.site-footer{background:var(--color-ink);color:var(--n-300);padding:76px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-brand{font-family:var(--font-head);font-weight:700;font-size:26px;color:#fff}
.foot-col h6{font:700 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--n-500);margin:0 0 16px}
.foot-col a,.foot-col p{display:block;color:var(--n-300);font-size:13.5px;margin:0 0 10px;transition:color .2s}
@media (max-width:900px){.foot-col a{padding:7px 0;margin:0}}
.foot-col a:hover{color:var(--color-accent)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:var(--n-500)}
.social-row{display:flex;gap:14px;margin-top:18px}
.social-row a{width:36px;height:36px;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center}
.social-row a:hover{border-color:var(--color-accent);color:var(--color-accent)}
.social-row svg{width:16px;height:16px}

/* ---------------- cart drawer ---------------- */
.overlay{position:fixed;inset:0;background:rgba(15,12,11,.5);opacity:0;pointer-events:none;transition:opacity .4s var(--ease-in-out);z-index:300}
.overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--color-bg);z-index:301;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .5s var(--ease-in-out);
}
.cart-drawer.open{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:24px var(--gutter);border-bottom:2px solid var(--color-divider-strong)}
.cart-head h3{font-size:20px}
.cart-items{flex:1;overflow-y:auto;padding:10px var(--gutter)}
.cart-row{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--color-divider)}
.thumb{position:relative;flex:none;overflow:hidden;background:var(--n-200)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-cart{width:76px;height:90px}
.thumb-mini{width:52px;height:62px}
/* compact placeholder for cart thumbnails — label would not fit at this size */
.thumb .img-slot{padding:0;justify-content:center;align-items:center;border-width:1px}
.thumb .img-slot b,.thumb .img-slot em,.thumb .img-slot span{display:none}
.thumb .img-slot::before{position:static;width:14px;height:14px;opacity:.7}
.cart-row-body{flex:1;display:flex;flex-direction:column;gap:6px}
.cart-row-top{display:flex;justify-content:space-between;gap:10px}
.cart-row-name{font-weight:700;font-size:14px}
.cart-remove{font-size:11px;color:var(--n-600);text-decoration:underline;align-self:flex-start}
.cart-remove:hover{color:var(--color-accent)}
.qty-stepper{display:inline-flex;align-items:center;border:2px solid var(--color-divider-strong)}
.qty-stepper button{width:30px;height:30px;font-weight:700}
.qty-stepper button:hover{background:var(--color-ink);color:#fff}
.qty-stepper span{width:30px;text-align:center;font:700 13px var(--font-body)}
/* The drawer is where quantities actually get changed on a phone, and 30px
   squares are below what a thumb can hit reliably. Remove gets a real box
   rather than an 11px line of underlined text. */
@media (max-width:900px){
  .qty-stepper button{width:42px;height:42px;font-size:16px}
  .qty-stepper span{width:42px;font-size:14px}
  .cart-remove{padding:12px 0;font-size:12px}
}
.cart-empty{padding:60px 0;text-align:center;color:var(--n-600)}
.cart-foot{padding:22px var(--gutter) 28px;border-top:2px solid var(--color-divider-strong)}
.cart-subtotal{display:flex;justify-content:space-between;font-weight:700;font-size:18px;margin-bottom:16px;font-family:var(--font-head)}

/* ---------------- forms (checkout) ---------------- */
.field{margin-bottom:18px}
.field label{display:block;font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--n-700);margin-bottom:8px}
.field .req{color:var(--color-accent)}
.input{
  width:100%;padding:14px 16px;background:var(--color-bg);border:2px solid var(--color-divider-strong);
  font:15px var(--font-body);transition:border-color .2s;
}
.input:focus{outline:none;border-color:var(--color-accent)}
textarea.input{resize:vertical;min-height:90px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.field-error{display:none;color:var(--color-accent-700);font-size:12px;margin-top:6px}
/* Honeypot — moved off-screen rather than display:none, which some bots
   detect and skip. Kept out of the tab order and the a11y tree. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field.invalid .input{border-color:var(--color-accent)}
.field.invalid .field-error{display:block}

.pay-card{
  border:2px solid var(--color-accent);background:var(--color-accent-100);
  padding:20px;display:flex;gap:16px;align-items:flex-start;
}
.pay-card .pay-icon{width:44px;height:44px;background:var(--color-accent);color:#fff;display:grid;place-items:center;flex:none}
.pay-card .pay-icon svg{width:22px;height:22px}
.pay-card h4{font-size:15px;margin-bottom:4px}
.pay-card p{font-size:13px;color:var(--n-700);margin:0}
.pay-check{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--color-accent);display:grid;place-items:center;flex:none}
.pay-check svg{width:13px;height:13px;color:#fff}

.checkout-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
@media (max-width:900px){.checkout-grid{grid-template-columns:1fr;gap:40px}}
.summary-card{background:var(--color-surface);padding:28px}
.summary-row{display:flex;justify-content:space-between;font-size:14px;padding:10px 0;border-bottom:1px solid var(--color-divider)}
.summary-row.total{border-bottom:0;font-family:var(--font-head);font-weight:700;font-size:19px;padding-top:16px}
.mini-cart-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--color-divider)}
.mini-cart-item .name{font-weight:700;font-size:13.5px}
.mini-cart-item .meta{font-size:12px;color:var(--n-600)}

/* confirmation */
.confirm-wrap{display:none;text-align:center;padding:120px 0}
.confirm-wrap.show{display:block}
.confirm-check{
  width:96px;height:96px;border-radius:50%;background:var(--color-accent);margin:0 auto 32px;
  display:grid;place-items:center;
}
.confirm-check svg{width:44px;height:44px;color:#fff}
.confirm-check svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .6s var(--ease-out) .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.order-num{display:inline-block;margin-top:8px;padding:8px 16px;border:2px solid var(--color-divider-strong);font:700 15px ui-monospace,Menlo,monospace;letter-spacing:.04em}

/* page hero (interior pages) */
.page-hero{padding:170px 0 60px;border-bottom:2px solid var(--color-divider-strong)}
.page-hero h1{font-size:clamp(38px,6vw,64px)}
.breadcrumb{display:flex;gap:8px;align-items:center;font:600 12px var(--font-body);color:var(--n-600);margin-bottom:18px}
.breadcrumb a:hover{color:var(--color-accent)}

/* product detail */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
@media (max-width:900px){.pd-grid{grid-template-columns:1fr;gap:32px}}
.pd-media{aspect-ratio:4/5;overflow:hidden;background:var(--n-200)}
.pd-media img{width:100%;height:100%;object-fit:cover}
.pd-price{font-family:var(--font-head);font-weight:700;font-size:30px;color:var(--color-accent-700);margin:14px 0 22px}
.pd-desc{font-size:15px;line-height:1.7;color:var(--n-800);max-width:52ch}
/* The stepper is 136px of fixed 42px squares, so on a 320px phone the add
   button had nowhere to shrink to — together they were wider than the column
   and pushed the whole page sideways. Let the button drop to its own row. */
.pd-qty-row{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0}
.pd-qty-row .btn{flex:1 1 150px;min-width:0}
.pd-meta{display:flex;gap:28px;margin-top:34px;padding-top:26px;border-top:2px solid var(--color-divider)}
.pd-meta div{font-size:12.5px;color:var(--n-700)}
.pd-meta b{display:block;font:700 11px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--n-900);margin-bottom:4px}

/* toast */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,140%);z-index:400;
  background:var(--color-ink);color:#fff;padding:16px 24px;font:700 13px var(--font-body);
  display:flex;align-items:center;gap:12px;transition:transform .5s var(--ease-out);
}
.toast.show{transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;color:var(--color-accent)}

/* misc */
.mt-0{margin-top:0}
.text-muted{color:var(--n-600)}
.center{text-align:center}
.va-none{display:none !important}
[data-lang-fade]{transition:opacity .25s var(--ease-in-out)}
.fading{opacity:0}


/* The footer address doubles as the directions link — underlined on hover so
   it reads as clickable next to the plain opening-hours line above it. */
.foot-directions{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .25s var(--ease-out),color .25s var(--ease-out)}
.foot-directions:hover{color:#fff;text-decoration-color:var(--color-accent)}

/* ---------------- visit / map ---------------- */
.visit-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
@media (max-width:900px){.visit-grid{grid-template-columns:1fr;gap:34px}}
.visit-grid h2{font-size:clamp(30px,4vw,50px);max-width:14ch}
.visit-body{margin:20px 0 0;max-width:42ch;font-size:16px;line-height:1.7;color:var(--n-700)}

.visit-facts{margin:32px 0 0;border-top:2px solid var(--color-divider)}
.visit-facts > div{
  display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:baseline;
  padding:14px 0;border-bottom:2px solid var(--color-divider);
}
.visit-facts dt{font:700 11px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--n-600)}
.visit-facts dd{margin:0;font-size:15px}
.visit-facts a:hover{color:var(--color-accent-700)}
/* Side by side, exactly equal, with one gap between them. flex rather than a
   two-column grid so the pair falls back to stacked when the column gets too
   narrow for both labels — a grid would hold two columns and squash the
   wider Google label onto a second line, leaving buttons of unequal height.
   The basis is the width the longer label needs; below that they wrap. */
.visit-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.visit-ctas .btn{flex:1 1 170px;white-space:nowrap}

/* The photo panel holds a fixed ratio so the section never reflows as the
   image loads. Squarer on a phone, where a wide strip crops to nothing. */
.visit-map{
  display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--n-200);border:2px solid var(--color-divider);
}
@media (max-width:900px){.visit-map{aspect-ratio:1/1}}
.visit-map img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.visit-map:hover img{transform:scale(1.05)}
/* A light top-and-bottom darkening keeps the photograph sitting behind the
   chip rather than competing with it, whichever image is dropped in. */
.visit-map::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,12,11,.3) 0%,rgba(15,12,11,.04) 38%,rgba(15,12,11,.5) 100%);
}

.visit-map-chip{
  position:absolute;left:0;bottom:0;z-index:2;display:inline-flex;align-items:center;gap:12px;
  max-width:calc(100% - 24px);background:var(--color-ink);color:#fff;padding:13px 20px;
  font:700 11px var(--font-body);letter-spacing:.12em;text-transform:uppercase;
  transition:background .3s var(--ease-out);
}
.visit-map-chip svg{width:15px;height:15px;flex:none;transition:transform .3s var(--ease-out)}
.visit-map:hover .visit-map-chip{background:var(--color-accent)}
.visit-map:hover .visit-map-chip svg{transform:translateY(-2px)}