/* ==========================================================================
   Heartist by Aviv — Design System
   Flowers × Art × Nature
   ========================================================================== */

@font-face{
  font-family:'Suez One';
  font-style:normal; font-weight:400; font-display:block;
  src:url('../fonts/suez-hebrew.woff2') format('woff2');
  unicode-range:U+0590-05FF,U+20AA,U+FB1D-FB4F;
}
@font-face{
  font-family:'Suez One';
  font-style:normal; font-weight:400; font-display:block;
  src:url('../fonts/suez-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F;
}
@font-face{
  font-family:'Heebo';
  font-style:normal; font-weight:100 900; font-display:block;
  src:url('../fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range:U+0590-05FF,U+20AA,U+FB1D-FB4F;
}
@font-face{
  font-family:'Heebo';
  font-style:normal; font-weight:100 900; font-display:block;
  src:url('../fonts/heebo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F;
}

:root{
  /* --- palette (Heartist boutique) ---
     single source of truth — five literal colors, nothing else. Every
     other variable below (kept under their old names on purpose, so no
     call site anywhere in the project needed to be rewritten) is an
     alias back to one of these five, so there is exactly one place to
     ever change a color again. */
  --color-blush-ivory:#FBF6EC;
  --color-deep-olive:#5E1420;
  --color-soft-sage:#E3D2AC;
  --color-burnt-coral:#7E1F2D;
  --color-dark-brown:#3A2A22;

  /* blush-ivory  → dominant background (~70%): page background, cards,
                    forms, modals, all light content areas
     deep-olive   → structural anchor (~15%): header, footer, dark
                    sections, default/resting solid buttons
     dark-brown   → body copy on light backgrounds (~2%, used only as
                    text — never a fill)
     burnt-coral  → the one accent (~8%): primary CTAs, links, active/
                    selected/hover states, ornamental lines
     soft-sage    → minor secondary surfaces only (~5%), never a whole
                    section, never mixed with coral in the same element */
  --paper:var(--color-blush-ivory);
  --wash:var(--color-blush-ivory);
  --wash-deep:var(--color-blush-ivory);
  --ink:var(--color-deep-olive);
  --ink-soft:rgba(58,42,34,.8); /* dark-brown, softened — secondary text that stays AA-safe everywhere */
  --burgundy:var(--color-burnt-coral);
  /* same coral family, darkened just enough to clear 4.5:1 text contrast
     on --paper (the base --burgundy only reaches 2.35:1 there). Text-only
     — never a background or border color; those keep using --burgundy. */
  --pink-accessible:#7E1F2D;
  --blush:var(--color-blush-ivory);
  --rosewood:var(--color-burnt-coral);
  --champagne:#B79B66;
  --sage:var(--color-soft-sage);
  --brown:var(--color-dark-brown);
  --linen:rgba(58,42,34,.4);         /* muted dark-brown — disabled/faded text */
  --linen-line:rgba(183,155,102,.5);   /* olive-based hairline — frames/dividers on cream */
  --linen-line-strong:rgba(183,155,102,.75);

  /* --- type --- */
  --font-display:'Frank Ruhl Libre','Suez One','Heebo',Georgia,serif;
  --font-body:'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- layout --- */
  --container:1320px;
  --edge:clamp(1.25rem, 4vw, 3.25rem);
  --gap-sm:.6rem;
  --gap:1.5rem;
  --gap-lg:clamp(2rem, 5vw, 4.5rem);
  --radius:0; /* deliberately zero everywhere — brand rule */

  /* fixed-header clearance: single source of truth for every section that
     needs to sit below .site-header (page-hero, product sidebar, contact
     split, about hero, ...) — read via var(--header-h), never a hardcoded
     px value. Placeholder here; set to the real measured height below. */
  --header-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:980px){
  /* nav row is hidden below 980px, so the header is shorter */
  :root{ --header-h:66px; }
}

*,*::before,*::after{box-sizing:border-box;}
/* global sticky-footer shell: <body> is a column flex container so the
   footer is always pushed to the bottom of the viewport on short pages
   (an empty catalog grid, for instance) without position:fixed/absolute —
   <main> (flex:1 0 auto, below) is the only thing that stretches; header
   and footer keep their natural height. On pages with enough content to
   already exceed the viewport this is a no-op — html/body simply grow
   past 100% as before. background is set on both html and body so no
   browser-default white ever shows, including during mobile overscroll. */
html{margin:0; min-height:100%; background:var(--paper); scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--brown);
  font-family:var(--font-body);
  direction:rtl;
  text-align:right;
  line-height:1.65;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

main{flex:1 0 auto;}

/* skip-link — invisible until it receives keyboard focus, so it changes
   nothing for mouse/touch users or the default visual reading of any
   page; lets keyboard/screen-reader users bypass the header + nav
   without needing to Tab through all 8 links on every page load. */
.skip-link{
  position:absolute; top:-96px; inset-inline-start:16px; z-index:400;
  background:var(--ink); color:var(--paper); padding:.85rem 1.4rem;
  font-size:.875rem; font-weight:500; text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:16px;}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
input,textarea,select{font-family:inherit; font-size:1rem;}
ul{margin:0; padding:0; list-style:none;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.15;
  margin:0;
  text-wrap:balance;
}
/* every page's main heading carries deep olive — a deliberate, sitewide
   anchor for the color, not a one-off detail. h2-h4 stay dark-brown by
   default (inherited from body); individual sections alternate to coral
   explicitly where the design calls for it (see index.html). */
h1{color:var(--ink); font-weight:300;}

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.875rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--champagne); flex:none;}

.container{max-width:var(--container); margin:0 auto; padding-inline:var(--edge);}

section{padding-block:clamp(3rem,7vw,6.5rem);}
.section-wash{background:var(--wash);}

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  margin-bottom:clamp(1.75rem,4vw,3.25rem); flex-wrap:wrap;
}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.75rem); max-width:14ch;}
.section-head p{color:var(--ink-soft); max-width:42ch; font-size:1rem; margin-top:.6rem;}
.section-head .head-cta{flex:none;}

/* ---------------------------------- buttons ---------------------------------- */
/* the coral accent is the site's one CTA color — .btn (the plain default)
   is the primary action everywhere: add-to-cart, submit, main CTAs.
   Hover darkens to the deep-olive anchor, never a new hue. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.9rem; font-size:.875rem; font-weight:500; letter-spacing:.01em;
  background:var(--burgundy); color:var(--cream, #FBF6EC); border:1px solid var(--burgundy);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  white-space:nowrap;
}
.btn:hover, .btn:focus-visible{background:#45101B; border-color:#45101B; color:var(--paper);}
.btn:active{transform:scale(.98);}
.btn:disabled{cursor:not-allowed;}
/* secondary/outline style — transparent with a thin deep-olive frame */
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--ink);}
.btn-ghost:hover, .btn-ghost:focus-visible{background:var(--ink); color:var(--paper); border-color:var(--ink);}
/* for outline buttons sitting on a dark (olive) surface, where an
   olive-on-olive frame would vanish */
.btn-outline-light{background:transparent; color:var(--paper); border:1px solid rgba(243,222,207,.75);}
.btn-outline-light:hover{background:var(--paper); color:var(--ink); border-color:var(--paper);}
/* the site's other solid button — deep olive, used for WhatsApp/checkout
   actions so it reads as a distinct, secondary solid next to the coral
   primary CTA rather than doubling up on coral */
.btn-wa{background:var(--ink); color:var(--paper); border-color:var(--ink); width:100%;}
.btn-wa:hover{background:var(--burgundy); color:var(--paper); border-color:var(--burgundy);}
/* explicit coral variant, same value as the .btn default now — kept as
   its own class since several pages already reference it by name */
.btn-burgundy{background:var(--burgundy); color:var(--paper); border-color:var(--burgundy);}
.btn-burgundy:hover, .btn-burgundy:focus-visible{background:var(--ink); color:var(--paper); border-color:var(--ink);}
/* for buttons sitting on a coral or sage surface, where a coral fill
   still needs to read clearly against the surface behind it */
.btn-on-burgundy{background:var(--burgundy); color:var(--paper); border-color:var(--burgundy);}
.btn-on-burgundy:hover, .btn-on-burgundy:focus-visible{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn-sm{padding:.6rem 1.15rem; font-size:.875rem;}
.btn[disabled]{opacity:.4; pointer-events:none;}
.btn-date-required{opacity:.5;}
.btn svg{width:14px; height:14px; flex:none;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--burgundy); outline-offset:2px;
}

/* ---------------------------------- header ----------------------------------
   Deep burgundy, sitewide — deliberately matches the Hero panel on the home
   page so the two areas read as one continuous composition.

   Two stacked rows: a top row (cart at the physical left, wordmark truly
   centered via being the only element left in normal flow, hamburger at the
   physical right) and a nav row centered underneath it. Cart/toggle are
   position:absolute so neither one can ever pull the wordmark off true
   center, regardless of their own widths. --header-h is the single source
   of truth for this header's total rendered height — every page section
   that needs to clear the fixed header (page-hero, product sticky sidebar,
   contact split, about hero, ...) reads it via var(--header-h) instead of
   a hardcoded pixel value, with one mobile override below since the nav
   row (and so the header's height) disappears under 980px. */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  display:flex; align-items:center;
  background:var(--ink);
  transition:padding-block .35s var(--ease);
  border-bottom:0;
  padding-block:15px;
}
.site-header.is-solid{
  padding-block:11px;
}
/* one single row, wrapped in the same .container every other section on
   the site uses (~1320px, centered) — brand stays put at the physical
   right (RTL: first DOM child), nav fills the middle and hugs its own
   end (so "צרו קשר" always sits exactly 80px from the cart, regardless
   of viewport width — see .cart-btn's margin below), cart is an ordinary
   flex sibling (never position:absolute, never pinned past the container
   edge), toggle only shows up under 980px. align-items:center on the row
   vertically centers all of it. */
.header-row{display:flex; align-items:center; width:100%;}

.site-logo{display:flex; align-items:center; flex:none;}

/* header/footer/nav font-sizes below are fixed px, not rem: these shared chrome
   components must render pixel-identically on every page regardless of any
   individual page's own root font-size (the home page sets its own local root
   font-size for its body content, which must not leak into shared chrome). */
.wordmark{font-family:var(--font-display); font-size:25.5px; letter-spacing:.01em; color:var(--wash); display:flex; flex-direction:column; align-items:center; text-align:center; line-height:1;}
.wordmark small{font-family:var(--font-body); font-size:9.3px; letter-spacing:.22em; text-transform:uppercase; color:var(--wash); opacity:.9; margin-top:4.8px; font-weight:600;}

/* fills the remaining space after the brand and packs its own links
   against its own end edge (left, in RTL) — the natural leftover space
   this creates shows up as breathing room right after the brand instead,
   and it guarantees the last link sits flush against the cart's 80px
   margin below, not floating some unpredictable distance from it. */
.main-nav{flex:1; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:clamp(24px, 2.4vw, 46px);}
.main-nav a{
  font-size:1.125rem; font-weight:500; color:var(--wash); position:relative; padding:5.1px 0;
}
.main-nav a::after{
  content:""; position:absolute; right:0; bottom:-2px; width:0; height:1px; background:var(--champagne);
  transition:width .25s var(--ease);
}
.main-nav a:hover::after, .main-nav a.active::after{width:100%;}
.main-nav a.active{font-weight:500;}

/* the one fixed distance in this row: 80px between "צרו קשר" and the
   cart icon, regardless of how much .main-nav's own item gap has
   tapered at this viewport width */
.cart-btn{flex:none; margin-inline-start:80px;}

.nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; background:none; border:0; padding:0; flex:none;
  margin-inline-start:24px;
}
.nav-toggle span{height:1px; background:var(--wash); width:26px; transition:transform .25s var(--ease), opacity .25s var(--ease);}

/* mobile/tablet: nav disappears (replaced by the hamburger's slide-out
   .mobile-nav), so .main-nav no longer occupies the middle of the row —
   giving cart-btn margin-inline-start:auto instead of its fixed 80px is
   what pushes it (and the toggle right after it) all the way to the
   row's far end, with the brand staying put at the near end. Neither
   icon is ever position:absolute, and both stay inside .container. */
@media (max-width:980px){
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .cart-btn{margin-inline-start:auto;}
}

.mobile-nav{
  position:fixed; inset:0; z-index:99; background:var(--paper);
  display:flex; flex-direction:column; padding:100px var(--edge) 42.5px;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.mobile-nav.is-open{opacity:1; transform:none; pointer-events:auto;}
.mobile-nav ul{display:flex; flex-direction:column; gap:0;}
/* 9.5px top+bottom padding puts ~19px of visual air between one item's
   text and the next (within the 18-20px target) — text size untouched */
.mobile-nav a{
  font-family:var(--font-display); font-size:1.75rem; padding:9.5px 0; border-bottom:1px solid var(--linen-line); display:block;
}
.mobile-nav .btn{margin-top:34px; align-self:flex-start;}
body.nav-open{overflow:hidden;}

/* ---------------------------------- hero ---------------------------------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-media{position:absolute; inset:0;}
.hero-media .ph{position:absolute; inset:0;}
.hero-media .stem{position:absolute; inset:0; transform:scale(1.06); transition:transform 1.4s var(--ease);}
.hero.is-ready .hero-media .stem{transform:scale(1);}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(44,34,16,.62) 0%, rgba(44,34,16,.06) 46%, rgba(44,34,16,.02) 100%);
}
.hero-content{
  position:relative; z-index:2; color:var(--paper);
  padding-bottom:clamp(3rem,7vw,5.5rem); width:100%;
}
.hero-content .eyebrow{color:rgba(243,222,207,.85);}
.hero-content .eyebrow::before{background:var(--champagne);}
.hero-content h1{
  font-size:clamp(2.4rem,6vw,4.6rem); max-width:16ch; margin-top:1rem;
  letter-spacing:-.01em;
}
.hero-content h1 em{font-style:normal; color:var(--blush);}
.hero-content p{max-width:38ch; color:rgba(243,222,207,.88); margin-top:1.1rem; font-size:1rem;}
.hero-actions{display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap;}
.hero-scroll{
  position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%); z-index:2;
  color:rgba(243,222,207,.8); font-size:.875rem; letter-spacing:.14em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.hero-scroll::after{content:""; width:1px; height:34px; background:rgba(243,222,207,.55); animation:scrollpulse 2.2s ease-in-out infinite;}
@keyframes scrollpulse{0%,100%{opacity:.25;} 50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){ .hero-scroll::after{animation:none;} }

/* ---------------------------------- placeholder photography ---------------------------------- */
.ph{
  position:relative; overflow:hidden; background:var(--wash);
  isolation:isolate;
}
.ph::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(120% 140% at var(--px,30%) var(--py,20%), var(--pc1,var(--blush)), transparent 60%),
    radial-gradient(110% 130% at var(--sx,85%) var(--sy,90%), var(--pc2,var(--champagne)), transparent 55%),
    linear-gradient(var(--pa,160deg), var(--pc3,var(--ink-soft)), var(--pc4,var(--wash)));
}
.ph::after{
  content:""; position:absolute; inset:0; opacity:.45; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
.ph .ph-tag{
  position:absolute; bottom:.6rem; inset-inline-start:.6rem; z-index:1;
  font-size:.875rem; letter-spacing:.04em; color:rgba(243,222,207,.92);
  background:rgba(44,34,16,.5); padding:.28rem .55rem;
}
.ph-1{--pc1:var(--blush); --pc2:var(--champagne); --pc3:var(--ink-soft); --pc4:var(--wash); --pa:150deg;}
.ph-2{--pc1:var(--wash); --pc2:var(--ink-soft); --pc3:var(--blush); --pc4:var(--champagne); --pa:200deg; --px:70%; --sy:20%;}
.ph-3{--pc1:var(--champagne); --pc2:var(--wash); --pc3:var(--ink-soft); --pc4:var(--blush); --pa:120deg; --px:20%; --sx:75%;}
.ph-4{--pc1:var(--ink-soft); --pc2:var(--blush); --pc3:var(--champagne); --pc4:var(--wash); --pa:180deg; --px:60%; --py:70%;}
.ph-5{--pc1:var(--blush); --pc2:var(--wash); --pc3:var(--champagne); --pc4:var(--ink-soft); --pa:100deg;}

/* ---------------------------------- product / catalog cards ---------------------------------- */
.grid{display:grid; gap:var(--gap-lg);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:1080px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .grid-4, .grid-3, .grid-2{grid-template-columns:1fr; gap:2.5rem;} }

.card-product{display:block; group:card;}
.card-product .frame{aspect-ratio:4/5; position:relative; overflow:hidden;}
.card-product .frame .ph{position:absolute; inset:0;}
.card-product .frame .ph .stem{position:absolute; inset:0; transition:transform .6s var(--ease);}
.card-product:hover .frame .ph .stem{transform:scale(1.055);}
/* real product photos (flower catalog) — same crop/hover treatment as the
   ph placeholder above, just for an actual <img> instead of a css-gradient
   block. Additive only; nothing above is touched. */
.card-product .frame img{width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .6s var(--ease);}
.card-product:hover .frame img{transform:scale(1.055);}
.card-product .meta{padding-top:1rem; display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;}
.card-product h3{font-size:1rem; font-weight:500;}
.card-product .from{font-size:.875rem; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums;}

/* treats catalog + treat product page's "related" strip — reuse
   .card-product as-is (same image handling, same hover), just center the
   name/price under the image instead of the default space-between row
   every other catalog uses. Scoped so product.html's own related strip
   (flowers/letters/pots) is untouched. */
[data-treats-grid] .card-product .meta,
[data-treat-product-page] [data-related] .card-product .meta{
  flex-direction:column; align-items:center; text-align:center; gap:.3rem;
}

/* ---------------------------------- filter tabs ---------------------------------- */
.filters{display:flex; gap:.5rem; flex-wrap:wrap;}
.filters button{
  background:none; border:1px solid transparent; padding:.75rem 1.1rem; font-size:.875rem; color:var(--ink-soft);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.filters button:hover{color:var(--ink);}
.filters button.active{background:var(--ink); color:var(--paper);}

/* ---------------------------------- category tiles (home) ---------------------------------- */
.cat-tile{position:relative; overflow:hidden; aspect-ratio:3/4; display:flex; align-items:flex-end;}
.cat-tile .ph{position:absolute; inset:0;}
.cat-tile .ph .stem{position:absolute; inset:0; transition:transform .7s var(--ease);}
.cat-tile:hover .ph .stem{transform:scale(1.06);}
.cat-tile::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(44,34,16,.55), transparent 55%);}
.cat-tile .cat-label{position:relative; z-index:1; padding:1.5rem; color:var(--paper); width:100%; display:flex; justify-content:space-between; align-items:flex-end;}
.cat-tile .cat-label h3{font-size:1.375rem;}
.cat-tile .cat-label span{font-size:.875rem; opacity:.85;}

/* ---------------------------------- product page ---------------------------------- */
.product-layout{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:flex-start;}
@media (max-width:960px){ .product-layout{grid-template-columns:1fr; gap:2.5rem;} .product-info{position:static;} }

.gallery-main{aspect-ratio:4/5; position:relative; overflow:hidden;}
.gallery-main .ph{position:absolute; inset:0;}
.gallery-main .ph .stem{position:absolute; inset:0; transition:opacity .35s var(--ease);}
/* real product photo (flower catalog) — additive only, same box as the ph
   placeholder above. object-position:center keeps the bouquet's own center
   uncropped on both desktop and mobile regardless of viewport width. */
.gallery-main img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
.gallery-thumbs{display:flex; gap:.6rem; margin-top:.6rem;}
.gallery-thumbs button{width:74px; height:92px; flex:none; position:relative; overflow:hidden; border:1px solid transparent; padding:0; opacity:.55; transition:opacity .2s var(--ease), border-color .2s var(--ease);}
.gallery-thumbs button.active{opacity:1; border-color:var(--ink);}
.gallery-thumbs button img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
.gallery-thumbs button .ph{position:absolute; inset:0;}

.product-info{position:sticky; top:calc(var(--header-h) + 12px);}
.product-info .cat-tag{font-size:.875rem; color:var(--ink-soft); letter-spacing:.06em; font-weight:500;}
.product-info h1{font-size:clamp(1.9rem,3vw,2.5rem); margin-top:5px;}
.product-info .price{font-size:1.375rem; margin-top:12px; font-variant-numeric:tabular-nums; font-weight:500;}
/* second .desc (data-desc, after price) is left empty by flowerFamilyAsProduct()
   so the description shows once, right under the name — see js/catalog.js */
.product-info .desc{color:var(--ink-soft); margin-top:12px; font-size:1rem; max-width:44ch;}
.product-info .desc:empty{display:none;}

.field-block{margin-top:10px; padding-top:10px; border-top:1px solid var(--linen-line);}
.field-block > label, .field-block > .label{
  display:block; font-size:.875rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; margin-bottom:9px;
}

.size-options{display:flex; gap:.6rem;}
.size-options button{
  flex:1; height:52px; padding:0 .5rem; border:1px solid var(--linen-line-strong); background:var(--paper); font-size:.875rem; font-weight:500;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.size-options button:hover{border-color:var(--ink);}
/* selected = coral frame + coral text, clearly marking the choice without
   a heavy solid fill — the light background never changes */
.size-options button.active{background:var(--paper); color:var(--pink-accessible); border-color:var(--burgundy);}

.fulfil-options{display:flex; gap:.6rem;}
.fulfil-options button{
  flex:1; padding:.85rem .75rem; border:1px solid var(--linen-line-strong); background:var(--paper); font-size:.875rem; text-align:center;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.fulfil-options button.active{background:var(--paper); color:var(--pink-accessible); border-color:var(--burgundy);}
.fulfil-note{font-size:.875rem; color:var(--ink-soft); margin-top:.7rem;}

.addon-list{display:flex; flex-direction:column; gap:.7rem;}
.addon-item{
  display:flex; align-items:center; gap:.9rem; border:1px solid var(--linen-line); padding:.7rem;
  cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.addon-item:hover{border-color:var(--linen-line-strong);}
.addon-item.active{border-color:var(--ink); background:var(--wash);}
.addon-item .ph{width:52px; height:52px; flex:none;}
.addon-item .a-name{font-size:.875rem; font-weight:500;}
.addon-item .a-price{font-size:.875rem; color:var(--ink-soft); margin-top:.15rem; font-variant-numeric:tabular-nums;}
.addon-item .a-check{
  margin-inline-start:auto; width:19px; height:19px; border:1px solid var(--linen-line-strong); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:.875rem; color:transparent;
}
.addon-item.active .a-check{background:var(--ink); border-color:var(--ink); color:var(--paper);}

textarea.greeting{
  width:100%; border:1px solid var(--linen-line-strong); background:var(--paper); padding:.85rem; font-size:.875rem;
  resize:vertical; min-height:100px;
}
textarea.greeting:focus-visible{outline:2px solid var(--burgundy); outline-offset:1px;}
.word-count{font-size:.875rem; color:var(--ink-soft); margin-top:5px; text-align:left; font-variant-numeric:tabular-nums;}
.word-count.limit{color:var(--ink); font-weight:500;}

.seasonal-note{
  display:flex; gap:.7rem; align-items:flex-start; margin-top:17px; padding:.9rem 1rem;
  background:var(--wash); font-size:.875rem; color:var(--ink-soft); line-height:1.55;
}

/* treats — food-item notices. .notice-box is the plain "אפייה ביתית" line
   (same tone as .seasonal-note); .warning-box uses the accent border to
   read as more prominent for the allergen disclosure, using only existing
   palette tokens (no new colors introduced). */
.notice-box{margin-top:12px; padding:.9rem 1rem; background:var(--wash); font-size:.875rem; color:var(--ink-soft); line-height:1.55;}
.warning-box{
  margin-top:12px; padding:.9rem 1rem; background:var(--wash); border-right:3px solid var(--burgundy);
  font-size:.875rem; color:var(--brown); line-height:1.55; font-weight:500;
}

.order-cta{margin-top:22px;}
.order-summary{font-size:.875rem; color:var(--ink-soft); margin-top:7px; text-align:center;}

/* ---------------------------------- date picker ---------------------------------- */
.date-field{position:relative;}
.date-trigger{
  width:100%; text-align:right; border:1px solid var(--linen-line-strong); background:var(--paper);
  height:52px; padding:0 1rem; font-size:.875rem; display:flex; justify-content:space-between; align-items:center;
}
.date-trigger .chosen{font-weight:500;}
.date-trigger .placeholder{color:var(--ink-soft); font-weight:400;}
.date-panel{
  position:absolute; top:calc(100% + .5rem); right:0; left:0; z-index:20;
  background:var(--paper); border:1px solid var(--linen-line-strong); box-shadow:0 14px 32px rgba(44,34,16,.15);
  padding:1.1rem; display:none;
}
.date-panel.open{display:block;}
.date-panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem;}
.date-panel-head button{background:none; border:1px solid var(--linen-line-strong); width:28px; height:28px; display:flex; align-items:center; justify-content:center;}
.date-panel-head .month-label{font-family:var(--font-display); font-size:1rem;}
.date-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; text-align:center;}
.date-grid .dow{font-size:.875rem; color:var(--ink-soft); padding-bottom:.4rem;}
.date-grid button{
  aspect-ratio:1; background:none; border:1px solid transparent; font-size:.875rem; font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.date-grid button:disabled{color:var(--linen); cursor:default;}
.date-grid button.empty{visibility:hidden;}
.date-grid button:not(:disabled):hover{border-color:var(--ink);}
.date-grid button.selected{background:var(--ink); color:var(--paper);}
.date-legend{font-size:.875rem; color:var(--ink-soft); margin-top:.9rem; border-top:1px solid var(--linen-line); padding-top:.8rem;}

/* ---------------------------------- reviews ---------------------------------- */
.review-wall{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linen-line);}
@media (max-width:860px){ .review-wall{grid-template-columns:1fr;} }
.review-card{background:var(--paper); padding:2rem 1.75rem; display:flex; flex-direction:column; gap:1.1rem;}
.review-card .r-photo{aspect-ratio:1; width:100%;}
.review-card blockquote{margin:0; font-family:var(--font-display); font-size:1.125rem; line-height:1.4;}
.review-card .r-name{font-size:.875rem; color:var(--ink-soft); display:flex; align-items:center; gap:.5rem;}
.review-card .r-name::before{content:""; width:16px; height:1px; background:var(--champagne);}

/* ---------------------------------- story teaser ---------------------------------- */
.story{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-lg); align-items:center;}
@media (max-width:860px){ .story{grid-template-columns:1fr;} }
.story .ph{aspect-ratio:5/6;}
.story-copy p{color:var(--ink-soft); margin-top:1.1rem; font-size:1rem; max-width:44ch;}
.story-copy h2{font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:12ch;}

/* ---------------------------------- workshops ---------------------------------- */
.workshop-card{display:block;}
.workshop-card .frame{aspect-ratio:5/4; position:relative; overflow:hidden;}
.workshop-card .frame .ph{position:absolute; inset:0;}
.workshop-card .frame img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease);}
.workshop-card:hover .frame img{transform:scale(1.05);}
.workshop-card .frame .ph .stem{transition:transform .6s var(--ease);}
.workshop-card:hover .frame .ph .stem{transform:scale(1.05);}
.workshop-card .w-meta{padding-top:1.1rem;}
.workshop-card h3{font-size:1.375rem;}
.workshop-card p{color:var(--ink-soft); font-size:.875rem; margin-top:.5rem; max-width:38ch;}
.workshop-card .w-link{font-size:.875rem; margin-top:.8rem; display:inline-flex; gap:.4rem; color:var(--ink); font-weight:500;}

/* workshops.html catalog grid only — its four cards get a full button
   instead of the plain text link used elsewhere (e.g. the "related
   workshops" strip on a workshop's own detail page, left unchanged). The
   card becomes a flex column stretched to the grid row's full height
   (grid's default align-items:stretch), and .w-meta is flex:1 so the
   button — pushed down via margin-top:auto — always sits on the same
   horizontal line across all four cards, regardless of how long each
   title/description is. */
[data-workshop-grid] .workshop-card{display:flex; flex-direction:column;}
[data-workshop-grid] .workshop-card .w-meta{display:flex; flex-direction:column; flex:1;}
[data-workshop-grid] .workshop-card .w-link{
  margin-top:auto; width:100%; box-sizing:border-box;
  padding:.85rem 1.2rem; min-height:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--burgundy); color:var(--paper);
  font-size:.875rem; font-weight:500; gap:0;
  border:0; border-radius:0; cursor:pointer;
  transition:background .2s var(--ease);
}
[data-workshop-grid] .workshop-card:hover .w-link,
[data-workshop-grid] .workshop-card:focus-visible .w-link{background:var(--ink); color:var(--paper);}

/* ---------------------------------- fact strip ---------------------------------- */
.fact-strip{
  background:var(--ink); color:var(--paper); padding-block:clamp(2.5rem,5vw,3.5rem);
}
.fact-strip .container{display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;}
.fact-strip .fact-mark{font-family:var(--font-display); font-size:1.75rem; color:var(--blush); flex:none;}
.fact-strip p{font-size:1rem; max-width:56ch; margin:0;}
.fact-strip p b{color:var(--champagne); font-weight:500;}

/* ---------------------------------- footer ---------------------------------- */
/* dark (olive) footer — all text flips to light per the palette contrast rule */
.site-footer{background:var(--ink); border-top:0; padding-top:40px; padding-bottom:20px; color:var(--paper); line-height:1.65; flex-shrink:0;}
@media (max-width:768px){
  .site-footer{padding-top:32px; padding-bottom:20px;}
}
/* one central container at the exact same width as the header (both just
   carry the shared .container class — no separate hardcoded width, so
   the two always land on identical edges). Four EQUAL, symmetrical
   columns, top-aligned so uneven column heights never shift them. */
.footer-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:40px;
  align-items:start; text-align:center;
}
.footer-grid > div{display:flex; flex-direction:column; align-items:center;}
.footer-social{display:flex; align-items:center; gap:16px; margin-top:14px;}
.footer-social a{display:flex; color:var(--paper); opacity:.85; transition:opacity .2s var(--ease);}
.footer-social a:hover{opacity:1;}
.footer-social svg{width:20px; height:20px;}

@media (max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px 24px; padding-inline:24px;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr; gap:28px; padding-inline:24px;}
  /* brand + icons stay centered; the three link columns switch to a
     readable right-aligned list instead — align-items:stretch (not
     flex-end, which is ambiguous cross-axis-in-RTL territory) lets each
     child take the column's full width, so text-align:right positions
     the text at the column's own physical right edge */
  .footer-grid > div:not(.footer-col-brand){align-items:stretch;}
  .footer-grid > div:not(.footer-col-brand) h4,
  .footer-grid > div:not(.footer-col-brand) ul{width:100%; align-items:stretch;}
  .footer-grid > div:not(.footer-col-brand) h4,
  .footer-grid > div:not(.footer-col-brand) li,
  .footer-grid > div:not(.footer-col-brand) a{text-align:right;}
}

/* clean body-font headings — medium/semi-bold, not the heavy display
   font the site's h1-h4 default to */
.footer-grid h4{
  font-family:var(--font-body); font-size:1rem; font-weight:500;
  letter-spacing:.04em; text-transform:uppercase; color:var(--paper); opacity:.9;
  margin-bottom:16px;
}
.footer-grid ul{display:flex; flex-direction:column; align-items:center; gap:9px;}
.footer-grid li{color:var(--paper); font-size:.875rem;}
.footer-grid a{font-size:.875rem; color:var(--paper); border-bottom:1px solid transparent; transition:border-color .2s var(--ease);}
.footer-grid a:hover{border-color:var(--champagne);}
/* the wordmark keeps the brand's own display font — everything else in
   the footer moved to the clean body font above */
.footer-wordmark{font-family:var(--font-display); font-size:32px; color:var(--paper);}
.footer-tag{font-size:.875rem; color:var(--paper); opacity:.9; margin-top:12px; max-width:26ch; line-height:1.6;}

/* one balanced, centered line — copyright and studio credit joined into
   a single sentence instead of pinned to opposite edges */
.footer-bottom{
  margin-top:28px; padding:16px var(--edge) 0; border-top:1px solid rgba(243,222,207,.25);
  display:flex; justify-content:center; font-size:.75rem; color:var(--paper); opacity:.9;
  max-width:var(--container); margin-inline:auto;
}
@media (max-width:768px){
  .footer-bottom{padding-inline:24px; text-align:center;}
}

.wa-float{
  position:fixed; bottom:24px; inset-inline-start:24px; z-index:80;
  width:54px; height:54px; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(44,34,16,.28);
  transition:background .2s var(--ease);
}
.wa-float:hover{background:var(--burgundy); color:var(--brown);}
.wa-float svg{width:24px; height:24px;}

/* play/pause control for autoplaying background videos — same dark-circle
   language as .wa-float, scaled down and overlaid in a corner so it never
   sits over the center of the footage. Always visible (not hover-only),
   so it's reachable on touch devices with no hover state. */
.video-toggle{
  position:absolute; bottom:14px; inset-inline-end:14px; z-index:2;
  width:40px; height:40px; border:0; border-radius:50%; padding:0; cursor:pointer;
  background:rgba(44,34,16,.55); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s var(--ease);
}
.video-toggle:hover, .video-toggle:focus-visible{background:rgba(44,34,16,.8);}
.video-toggle svg{width:18px; height:18px;}

/* ---------------------------------- back to top ---------------------------------- */
.back-to-top{
  position:fixed; bottom:24px; inset-inline-end:24px; z-index:90;
  width:44px; height:44px; background:var(--burgundy); color:var(--brown);
  display:flex; align-items:center; justify-content:center; border:0; cursor:pointer; padding:0;
  opacity:0; visibility:hidden; pointer-events:none;
  /* visibility switches instantly on the way IN (so the fade-in is visible
     from the first frame) but only after the opacity fade-out finishes on
     the way OUT (see .is-visible below) — a plain fade, no slide/jump,
     and the button drops out of tab order while hidden. */
  transition:opacity .25s var(--ease), visibility 0s linear .25s, background .2s var(--ease);
}
.back-to-top.is-visible{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .25s var(--ease), visibility 0s linear 0s, background .2s var(--ease);
}
.back-to-top:hover, .back-to-top:focus-visible{background:var(--ink); color:var(--paper);}
.back-to-top svg{width:20px; height:20px;}
@media (max-width:640px){
  .back-to-top{bottom:16px; inset-inline-end:16px;}
}
@media (prefers-reduced-motion: reduce){
  .back-to-top{transition:opacity .01ms, visibility 0s linear, background .2s var(--ease);}
  .back-to-top.is-visible{transition:opacity .01ms, visibility 0s linear, background .2s var(--ease);}
}

/* ---------------------------------- cart ---------------------------------- */
/* a single instance now (see header markup in js/partials.js) — sits in
   the header's one row, an ordinary flex sibling of the nav, never
   position:absolute and never pinned past the container edge. Its exact
   position (80px after "צרו קשר" on desktop, margin-inline-start:auto on
   mobile) is set on .cart-btn up in the header section. */
.cart-btn{
  position:relative;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; color:var(--wash); cursor:pointer;
}
.cart-btn svg{width:26px; height:26px;}
.cart-btn:hover, .cart-btn:focus-visible{color:var(--champagne);}
/* round badge, deliberately breaking the sitewide zero-radius rule for this
   one element — a small tag perched at the icon's own top corner with only
   a light clip into it (not centered over it), position:absolute so it
   never affects header height or the button's flex centering. */
.cart-badge{
  position:absolute; top:2px; inset-inline-end:2px; box-sizing:border-box;
  min-width:19px; height:19px; padding:0 3px; border-radius:999px; border:0; box-shadow:none;
  background:var(--champagne); color:var(--brown); font-size:.75rem; font-weight:500;
  display:none; align-items:center; justify-content:center; line-height:1;
}

.cart-overlay{
  position:fixed; inset:0; background:rgba(44,34,16,.45); z-index:199;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
body.cart-open{overflow:hidden;}
body.cart-open .cart-overlay{opacity:1; pointer-events:auto;}

.cart-drawer{
  position:fixed; top:0; bottom:0; inset-inline-start:0; width:min(420px,100%); z-index:200;
  background:var(--paper); display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform .3s var(--ease);
  box-shadow:0 0 40px rgba(44,34,16,.25);
}
html[dir="rtl"] .cart-drawer{transform:translateX(100%);}
body.cart-open .cart-drawer{transform:none;}

.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between; padding:1.5rem 1.5rem 1.1rem;
  border-bottom:1px solid var(--linen-line);
}
.cart-drawer-head h2{font-size:1.375rem;}
.cart-close{background:none; border:0; font-size:1.75rem; line-height:1; cursor:pointer; color:var(--ink); padding:.25rem .5rem;}
.cart-close:hover{color:var(--burgundy);}

.cart-drawer-body{flex:1; overflow-y:auto; padding:1.25rem 1.5rem;}
.cart-empty{color:var(--ink-soft); font-size:.875rem;}

.cart-row{display:grid; grid-template-columns:56px 1fr auto; gap:.9rem; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--linen-line);}
.cart-row-ph{width:56px; height:56px; position:relative; overflow:hidden; flex:none;}
.cart-row-name{font-weight:500; font-size:.875rem;}
.cart-row-size{font-size:.875rem; color:var(--ink-soft); margin-top:.15rem;}
.cart-row-extra{font-size:.875rem; color:var(--ink-soft); margin-top:.15rem; opacity:.85;}
.cart-row-price{font-size:.875rem; color:var(--ink-soft); margin-top:.15rem; font-variant-numeric:tabular-nums;}
.cart-row-qty{grid-column:2; display:flex; align-items:center; gap:.6rem; margin-top:.4rem;}
.cart-row-qty button{width:24px; height:24px; border:1px solid var(--linen-line-strong); background:var(--paper); cursor:pointer; font-size:.875rem; line-height:1;}
.cart-row-qty span{min-width:1.2rem; text-align:center; font-variant-numeric:tabular-nums; font-size:.875rem;}
.cart-row-remove{grid-column:3; grid-row:1 / span 2; align-self:start; background:none; border:0; color:var(--ink-soft); font-size:.875rem; text-decoration:underline; cursor:pointer; padding:0;}
.cart-row-remove:hover{color:var(--burgundy);}

.cart-drawer-foot{padding:1.25rem 1.5rem 1.5rem; border-top:1px solid var(--linen-line);}
.cart-total{display:flex; justify-content:space-between; font-size:1.125rem; font-weight:500; margin-bottom:1rem;}
.cart-drawer-foot .btn{width:100%; justify-content:center; display:flex;}
@media (max-width:560px){ .cart-drawer{width:100%;} }

/* ---------------------------------- modals (checkout + success) ---------------------------------- */
body.modal-open{overflow:hidden;}
.modal-overlay{
  position:fixed; inset:0; background:rgba(44,34,16,.5); z-index:299;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.modal-overlay.is-open{opacity:1; pointer-events:auto;}

.modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); z-index:300;
  width:min(440px,92vw); max-height:88vh; overflow-y:auto;
  background:var(--paper); padding:2rem clamp(1.5rem,4vw,2.25rem) 2.25rem;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
  box-shadow:0 24px 60px rgba(44,34,16,.3);
}
.modal[aria-hidden="false"]{opacity:1; pointer-events:auto; transform:translate(-50%,-50%);}
.modal h2{font-size:1.375rem; margin-bottom:.4rem;}
.modal-sub{font-size:.875rem; color:var(--ink-soft); margin-bottom:1.5rem;}
.modal-close{
  position:absolute; top:.9rem; inset-inline-end:.9rem; background:none; border:0;
  font-size:1.75rem; line-height:1; cursor:pointer; color:var(--ink); width:36px; height:36px;
}
.modal-close:hover{color:var(--burgundy);}

.modal-field{margin-top:1.2rem;}
.modal-field:first-of-type{margin-top:0;}
.modal-label{display:block; font-size:.875rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); font-weight:500; margin-bottom:.5rem;}
.modal-field input, .modal-field textarea, .modal-field select{
  width:100%; border:1px solid var(--linen-line-strong); background:var(--paper); padding:.8rem .9rem; font-size:.875rem;
}
.modal-field textarea{resize:vertical; min-height:88px;}
.modal-field select{appearance:none; color:var(--ink);}
.modal-field input:focus-visible, .modal-field textarea:focus-visible, .modal-field select:focus-visible{outline:2px solid var(--burgundy); outline-offset:1px;}
/* dark-brown, not the coral accent — coral-on-ivory text falls short of
   accessible contrast, and error/validation copy is exactly where that
   matters most; the wording itself is what signals "error" here */
.field-error{font-size:.875rem; color:var(--brown); margin-top:4px; min-height:1em;}
[data-checkout-form] button[type="submit"]{margin-top:1.6rem;}

.success-thanks{font-family:var(--font-display); font-size:1.125rem; line-height:1.5; color:var(--ink); margin-top:.5rem;}
.loyalty-box{margin-top:1.75rem; padding-top:1.5rem; border-top:1px solid var(--linen-line);}
.loyalty-box p{font-size:.875rem; color:var(--ink-soft); margin-bottom:1rem;}
.loyalty-actions{display:flex; gap:.75rem; flex-wrap:wrap;}

/* ---------------------------------- page hero (inner pages) ---------------------------------- */
.page-hero{padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,4.5rem)); padding-bottom:clamp(2.5rem,5vw,4rem);}
.page-hero .eyebrow{margin-bottom:1rem;}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem); max-width:18ch;}
.page-hero p{color:var(--ink-soft); max-width:50ch; margin-top:1rem; font-size:1rem;}

/* shared, opt-in vertical-spacing system for inner pages that open with
   the eyebrow + title + intro-sentence pattern (flowers, treats,
   workshops, faq, ...). Deliberately a second class, not a change to
   .page-hero itself — the home page and contact page don't use
   .page-hero at all, and any current or future .page-hero page that
   doesn't add "inner-hero" is completely unaffected. Values are the
   ones already used on the workshops page: 28px between the header and
   the eyebrow (on top of the fixed var(--header-h) header-clearance), and 20px
   between the intro sentence and wherever this page's content starts
   right after it. The eyebrow→title and title→sentence gaps are already
   uniform sitewide via the shared rules above, so nothing extra is
   needed for those two steps. */
.page-hero.inner-hero{padding-top:calc(var(--header-h) + 28px); padding-bottom:20px;}

.breadcrumb{font-size:.875rem; color:var(--ink-soft); display:flex; gap:.5rem; align-items:center; margin-bottom:1rem;}
.breadcrumb a:hover{color:var(--ink);}

/* ---------------------------------- FAQ ---------------------------------- */
.faq-list{max-width:900px;}
.faq-item{border-bottom:1px solid var(--linen-line);}
.faq-q{
  width:100%; text-align:right; background:none; border:0; padding:1.5rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--font-body); font-size:1.125rem; font-weight:500; line-height:1.5;
}
.faq-q .plus{font-family:var(--font-body); font-size:1.75rem; font-weight:400; color:var(--ink); flex:none; transition:transform .3s var(--ease);}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.faq-a p{padding-bottom:1.5rem; color:var(--ink-soft); font-size:1rem; line-height:1.85; max-width:68ch;}

/* ---------------------------------- contact ---------------------------------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-lg);}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact-card{border:1px solid var(--linen-line); padding:1.6rem;}
.contact-card h3{font-size:1rem; margin-bottom:.4rem;}
.contact-card p{color:var(--ink-soft); font-size:.875rem; margin:0;}
.contact-card p + p{margin-top:.3rem;}
.zone-table{width:100%; border-collapse:collapse; font-size:.875rem;}
.zone-table th, .zone-table td{padding:.7rem .5rem; border-bottom:1px solid var(--linen-line); text-align:right;}
.zone-table th{color:var(--ink-soft); font-weight:500; font-size:.875rem; text-transform:uppercase; letter-spacing:.04em;}
.zone-table td:last-child, .zone-table th:last-child{text-align:left; font-variant-numeric:tabular-nums;}

/* ---------------------------------- reveal / motion ---------------------------------- */
/* .reveal elements are visible by default (no FOUC risk for anything
   already on screen at load) — main.js only opts elements that are
   off-screen at load into the pre-reveal/fade-in treatment below. */
.reveal{transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.pre-reveal{opacity:0; transform:translateY(22px);}
.reveal.pre-reveal.in{opacity:1; transform:none;}
.reveal-stagger.in > *{transition-delay:calc(var(--i,0) * 70ms);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .hero-media .stem{transform:none; transition:none;}
}

/* ---------------------------------- utility ---------------------------------- */
.center{text-align:center;}
.mt-0{margin-top:0;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
.visually-hidden-label{margin-bottom:.4rem; display:block; font-size:.875rem; color:var(--ink-soft);}


/* ==========================================================================
   2026 "ABUNDANCE" CHROME — header, footer, floating buttons, page
   transitions. Appended override layer (same specificity as the rules above,
   later in the cascade). Scope is limited to shared chrome; no page body,
   button or form style elsewhere in this file is touched.
   Palette: warm cream + peony rose + brushed gold + leaf-warm cocoa text.
   Deliberately NO black / near-black anywhere — the feeling is a luxury
   patisserie-florist: light, rich, abundant. Wordmark is Cormorant Garamond
   (Latin caps); page headings are set per page (home uses Frank Ruhl Libre).
   ========================================================================== */
@font-face{
  font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/frank-ruhl-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/frank-ruhl-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:400 500; font-display:swap;
  src:url('../fonts/cormorant-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/cormorant-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}


:root{
  --cream:#FBF6EC;        /* page ground */
  --petal:#F4DED7;        /* soft blush surface */
  --sand:#F1E6D0;         /* champagne surface */
  --rose:#7E1F2D;         /* bordeaux — THE one action colour: buttons, hovers, badges (cream text 9.2:1) */
  --wine:#5E1420;         /* deep bordeaux — headings, brand mark, footer (cream text 12:1) */
  --cocoa:#3A2A22;        /* body text, warm brown (12.7:1 on cream) */
  --gold:#B79B66;         /* hairlines, ornaments, icons */
  --gold-deep:#8C6A25;    /* gold used as TEXT on light (4.6:1 on cream) */
  --gold-lt:#E6D3A8;      /* champagne on bordeaux panels */
  --champ:#E3D2AC;        /* champagne fill (floating buttons, story button) */
  --font-wordmark:'Cormorant Garamond','Frank Ruhl Libre',Georgia,'Times New Roman',serif;
}

/* ---- header: light, glassy cream with a gold hairline ---- */
.site-header{
  background:rgba(251,246,236,.9);
  -webkit-backdrop-filter:saturate(1.3) blur(18px); backdrop-filter:saturate(1.3) blur(18px);
  border-bottom:1px solid rgba(183,155,102,.38);
  transition:background .45s var(--ease), border-color .45s var(--ease), padding-block .35s var(--ease);
  view-transition-name:site-header;
}
body.nav-open .site-header{background:var(--cream);}
.wordmark{
  font-family:var(--font-wordmark); font-weight:500; font-size:31px; line-height:1;
  letter-spacing:.16em; text-transform:uppercase; color:var(--wine);
}
.wordmark small{
  font-family:var(--font-body); font-weight:500; font-size:8.5px; letter-spacing:.46em;
  text-transform:uppercase; color:var(--gold-deep); opacity:1; margin-top:6px;
}
.main-nav{gap:clamp(22px,2.6vw,44px);}
.main-nav a{font-size:1rem; font-weight:400; letter-spacing:.015em; color:var(--cocoa); transition:color .3s var(--ease);}
.main-nav a:hover, .main-nav a:focus-visible{color:var(--rose);}
.main-nav a::after{background:var(--gold); bottom:-4px;}
.main-nav a.active{font-weight:500; color:var(--wine);}
.cart-btn{color:var(--wine);}
.cart-btn:hover, .cart-btn:focus-visible{color:var(--rose);}
.cart-btn svg{stroke-width:1.4;}
.cart-badge{background:var(--rose); color:var(--cream);}
.nav-toggle span{background:var(--wine);}
.site-header a:focus-visible, .site-header button:focus-visible,
.wa-float:focus-visible, .back-to-top:focus-visible{outline-color:var(--wine);}

/* ---- footer: deep bordeaux, closes the page like the story panel does ---- */
.site-footer{
  background:linear-gradient(135deg,#7E1F2D 0%,#5E1420 100%); color:var(--cream);
  border-top:1px solid rgba(183,155,102,.5);
  padding-top:64px; padding-bottom:26px;
}
@media (max-width:768px){ .site-footer{padding-top:44px; padding-bottom:22px;} }
.footer-wordmark{
  font-family:var(--font-wordmark); font-weight:500; font-size:40px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cream);
}
.footer-tag{color:var(--cream); opacity:.88;}
.footer-grid h4{
  font-family:var(--font-body); font-size:1rem; font-weight:500; letter-spacing:.02em;
  text-transform:none; color:var(--gold-lt); opacity:1; margin-bottom:18px;
}
.footer-grid li{color:var(--cream); opacity:.88;}
.footer-grid a{color:var(--cream); transition:color .25s var(--ease), border-color .25s var(--ease);}
.footer-grid a:hover{color:var(--gold-lt); border-color:var(--gold-lt);}
.footer-social a{color:var(--cream); opacity:.88;}
.footer-social a:hover{opacity:1; color:var(--gold-lt);}
.footer-bottom{border-top:1px solid rgba(230,211,168,.3); color:var(--cream); opacity:.8;}
.site-footer a:focus-visible{outline-color:var(--cream);}

/* ---- floating buttons ---- */
.wa-float{
  background:var(--champ); color:var(--wine);
  border:1px solid rgba(183,155,102,.9); box-shadow:0 10px 28px rgba(94,20,32,.3);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.wa-float:hover{background:var(--rose); color:var(--cream); transform:translateY(-2px);}
.back-to-top{background:var(--cream); color:var(--wine); border:1px solid rgba(183,155,102,.7);}
.back-to-top:hover, .back-to-top:focus-visible{background:var(--rose); color:var(--cream);}
.video-toggle{background:rgba(251,246,236,.78); color:var(--wine); border:1px solid rgba(183,155,102,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.video-toggle:hover, .video-toggle:focus-visible{background:var(--cream);}

/* ---- cross-document page transitions (Chrome/Edge/Safari 18.2+; other
   browsers simply navigate normally). The header keeps its own transition
   name so it stays put while page bodies cross-fade. ---- */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:vt-out .26s var(--ease) both;}
::view-transition-new(root){animation:vt-in .42s var(--ease) both;}
@keyframes vt-out{to{opacity:0;}}
@keyframes vt-in{from{opacity:0; transform:translateY(10px);}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){animation:none !important;}
}

/* ---- gallery treatment for catalog / related cards (all inner pages):
   same gold hairline "mat" and serif names as the home page ---- */
.grid{gap:clamp(1.9rem,3.4vw,3.2rem);}
.card-product .frame{background:var(--sand); outline:1px solid rgba(183,155,102,.5); outline-offset:9px;}
.card-product .frame::after{
  content:""; position:absolute; inset:14px; border:1px solid rgba(251,246,236,.92);
  opacity:0; transform:scale(1.05); pointer-events:none;
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.card-product:hover .frame::after, .card-product:focus-visible .frame::after{opacity:1; transform:none;}
.card-product .meta{padding-top:1.4rem;}
.card-product h3{font-family:var(--font-display); font-weight:400; font-size:1.125rem;}
.card-product .from{font-size:.875rem; letter-spacing:.03em;}

/* flower family card: name + the sizes on offer, price on the far side */
.card-product .meta .name{display:flex; flex-direction:column; gap:.2rem;}
.card-product .sizes{font-size:.875rem; letter-spacing:.14em; color:var(--ink-soft); text-align:right;}


/* ---- mobile order bar: bordeaux, full width, stays at the bottom of the
   screen on shop pages (<body data-order-bar>) under 769px. The round
   floating WhatsApp button is hidden there; back-to-top lifts above it. ---- */
.order-bar{display:none;}
@media (max-width:768px){
  body[data-order-bar] .order-bar{
    position:fixed; inset-inline:0; bottom:0; z-index:85;
    display:flex; align-items:center; justify-content:center; gap:.7rem;
    min-height:56px; padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom,0px));
    background:var(--rose); color:var(--cream);
    font-weight:500; font-size:1rem; letter-spacing:.03em;
    border-top:1px solid rgba(183,155,102,.7); box-shadow:0 -8px 24px rgba(94,20,32,.2);
  }
  body[data-order-bar] .order-bar svg{width:22px; height:22px; flex:none;}
  body[data-order-bar] .order-bar:focus-visible{outline:2px solid var(--cream); outline-offset:-6px;}
  body[data-order-bar] .wa-float{display:none;}
  body[data-order-bar]{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px));}
  body[data-order-bar] .back-to-top{bottom:calc(72px + env(safe-area-inset-bottom,0px));}
}
@media (prefers-reduced-motion: no-preference){
  @keyframes order-bar-in{from{transform:translateY(100%);} to{transform:none;}}
  @media (max-width:768px){ body[data-order-bar] .order-bar{animation:order-bar-in .5s .6s var(--ease) both;} }
}


/* ---- "להזמנה בוואטסאפ" button on flower cards (catalog + home). The card
   is a <div> now: the picture/name area is one link to the product page,
   the button is a second, separate link — never a link inside a link. ---- */
.card-product .card-link, .feat-item .feat-link{display:block; color:inherit;}
.card-order{
  display:flex; align-items:center; justify-content:center;
  margin-top:1.1rem; padding:.85rem 1rem; min-height:44px;
  border:1px solid rgba(126,31,45,.55); color:var(--rose); background:transparent;
  font-size:1rem; font-weight:500; letter-spacing:.03em;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.card-order:hover, .card-order:focus-visible{background:var(--rose); border-color:var(--rose); color:var(--cream);}
.card-product:hover .frame::after, .card-product:focus-within .frame::after{opacity:1; transform:none;}

/* ---- workshop cards (workshops.html grid + "other workshops" strip):
   gold hairline mat, serif names, and a quiet outlined button that fills on
   hover — same language as the flower cards ---- */
.workshop-card .frame{background:var(--sand); outline:1px solid rgba(183,155,102,.5); outline-offset:9px;}
.workshop-card .frame::after{
  content:""; position:absolute; inset:14px; border:1px solid rgba(251,246,236,.92);
  opacity:0; transform:scale(1.05); pointer-events:none;
  transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.workshop-card:hover .frame::after, .workshop-card:focus-visible .frame::after{opacity:1; transform:none;}
.workshop-card .w-meta{padding-top:1.5rem;}
.workshop-card h3{font-family:var(--font-display); font-weight:400; font-size:1.375rem; color:var(--ink);}
.workshop-card p{font-size:1rem;}
[data-w-others] .workshop-card{display:flex; flex-direction:column;}
[data-w-others] .workshop-card .w-meta{display:flex; flex-direction:column; flex:1;}
[data-workshop-grid] .workshop-card .w-link, [data-w-others] .workshop-card .w-link{
  margin-top:auto; width:100%; box-sizing:border-box; min-height:44px; padding:.85rem 1.2rem;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--rose); border:1px solid rgba(126,31,45,.55);
  font-size:1rem; font-weight:500; letter-spacing:.03em;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
[data-workshop-grid] .workshop-card:hover .w-link, [data-workshop-grid] .workshop-card:focus-visible .w-link,
[data-w-others] .workshop-card:hover .w-link, [data-w-others] .workshop-card:focus-visible .w-link{background:var(--rose); border-color:var(--rose); color:var(--cream);}
[data-w-others] .workshop-card .w-meta p, [data-workshop-grid] .workshop-card .w-meta p{margin-bottom:1.2rem;}


/* ---------- "customers' choice" flower on a card corner (family.badge) ---------- */
.card-product{position:relative;}
.fav-badge{position:absolute; top:-34px; left:-34px; z-index:3; width:96px; height:96px; display:flex; align-items:center; justify-content:center; pointer-events:none; filter:drop-shadow(0 4px 9px rgba(58,42,34,.3));}
.fav-badge svg{position:absolute; inset:0; width:100%; height:100%;}
.fav-badge span{position:relative; font-size:.875rem; font-weight:500; line-height:1.15; text-align:center; color:#fff;}
@media (max-width:640px){ .fav-badge{top:-26px; left:-14px; width:88px; height:88px;} }


/* ---------- delivery window picker (under the date) ---------- */
.slot-row{margin-top:1rem;}
.slot-row .slot-label{display:block; margin-bottom:.5rem;}
.slot-options{flex-wrap:wrap;}
.slot-options button{flex:1 1 auto; min-width:7.5rem;}
.slot-note{margin:.6rem 0 0; font-size:.9375rem; color:var(--wine); font-weight:500;}
.slot-note:empty{display:none;}


/* ==========================================================================
   PRODUCT PAGE — gallery frame + order card (gold hairline mat, bordeaux CTA)
   Applies to product.html (and any page using .product-layout)
   ========================================================================== */
.product-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(2.5rem,6vw,5.5rem); align-items:start;}
.product-layout .gallery{position:sticky; top:calc(var(--header-h) + 1.5rem); width:100%; max-width:540px; margin-inline:auto; padding:12px;}
.product-layout .gallery-main{background:var(--sand); outline:1px solid rgba(183,155,102,.55); outline-offset:10px;}
.product-layout .gallery .fav-badge{top:-22px; left:-22px;}
@media (max-width:640px){ .product-layout .gallery .fav-badge{top:-14px; left:-6px; width:84px; height:84px;} }
.gallery-disclaimer{text-align:center;}
.product-info{position:static;}

.breadcrumb{color:var(--cocoa);}
.breadcrumb a{color:var(--wine);}

.product-info .cat-tag{display:inline-flex; align-items:center; gap:.7rem; color:var(--gold-deep); font-size:.875rem; font-weight:500; letter-spacing:.14em;}
.product-info .cat-tag::before{content:""; width:30px; height:1px; background:var(--gold);}
.product-info h1{font-family:var(--font-display); font-weight:300; font-size:clamp(2.6rem,4.4vw,3.9rem); line-height:1.05; letter-spacing:-.015em; color:var(--wine); margin-top:.6rem;}
.product-info .desc{color:var(--cocoa); font-size:1.125rem; line-height:1.75; max-width:46ch; margin-top:.9rem;}
.product-info .price{font-family:var(--font-display); font-weight:400; font-size:1.5rem; color:var(--wine); margin-top:1.3rem; padding-bottom:1.8rem; border-bottom:1px solid rgba(183,155,102,.5);}

/* the "stage": a blush backdrop with the faded gold bloom print at the edges,
   so the bouquet and its order form sit in a room instead of on a blank page */
.pdp-stage, .page-stage{
  --bloom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150' fill='none' stroke='%23B79B66' stroke-width='1'%3E%3Cg transform='translate(75 75)'%3E%3Cellipse cy='-15' rx='5.5' ry='12'/%3E%3Cellipse cy='-15' rx='5.5' ry='12' transform='rotate(72)'/%3E%3Cellipse cy='-15' rx='5.5' ry='12' transform='rotate(144)'/%3E%3Cellipse cy='-15' rx='5.5' ry='12' transform='rotate(216)'/%3E%3Cellipse cy='-15' rx='5.5' ry='12' transform='rotate(288)'/%3E%3Ccircle r='3'/%3E%3C/g%3E%3C/svg%3E");
  position:relative; isolation:isolate; overflow:hidden; background:#F7EBE4; border-bottom:1px solid rgba(183,155,102,.6); padding-bottom:clamp(3rem,5vw,5rem);
}
.pdp-stage::before, .page-stage::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--bloom); background-size:150px 150px; opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse at 50% 48%,transparent 36%,#000 100%); mask-image:radial-gradient(ellipse at 50% 48%,transparent 36%,#000 100%);
}
.product-layout .gallery-main{box-shadow:0 30px 50px -34px rgba(58,42,34,.45);}

/* price, then a small gold ornament instead of a plain rule */
.product-info .price{border:0; padding-bottom:0;}
.product-info .price::after{content:none;}

/* order sheet: one clean white sheet, soft shadow, one gold hairline — no numbers, no double borders */
.order-card{margin-top:2.1rem; padding:clamp(1.5rem,2.6vw,2.25rem); display:flex; flex-direction:column; gap:1.9rem;
  background:#FFFDF9; border:1px solid rgba(183,155,102,.6); box-shadow:0 26px 44px -30px rgba(58,42,34,.38);}
.order-card .field-block{margin:0; padding:0; border:0;}
.order-card .field-block > .label, .order-card .field-block > label{
  display:block; font-size:1.0625rem; font-weight:500; letter-spacing:.01em; text-transform:none; color:var(--wine); margin-bottom:.75rem;
}

/* choice buttons: roomy tiles in the display serif; selected = bordeaux */
.order-card .size-options, .order-card .fulfil-options{gap:.75rem;}
.order-card .size-options button, .order-card .fulfil-options button{
  height:62px; border:1px solid rgba(183,155,102,.75); background:#fff; color:var(--wine); font-family:var(--font-display); font-size:1.3125rem; font-weight:400;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.order-card .fulfil-options button, .slot-options button{font-family:var(--font-body); font-size:1.0625rem;}
.order-card .size-options button:hover:not(:disabled), .order-card .fulfil-options button:hover{border-color:var(--rose); box-shadow:0 0 0 1px var(--rose) inset;}
.order-card .size-options button.active, .order-card .fulfil-options button.active{background:var(--rose); color:#fff; border-color:var(--rose); box-shadow:none;}
.order-card .size-options button:disabled{opacity:.4;}

.order-card .date-trigger, .order-card [data-custom-name-input], .order-card textarea.greeting, .order-card select.date-trigger{
  min-height:56px; border:1px solid rgba(183,155,102,.75); background:#fff; color:var(--cocoa); font-size:1.0625rem; padding-inline:1rem;
}
.order-card .date-trigger:hover, .order-card .date-trigger:focus-visible, .order-card textarea.greeting:focus-visible{border-color:var(--rose);}
.order-card textarea.greeting{padding:1rem; min-height:110px; line-height:1.7; resize:none;}
.order-card .word-count{color:var(--cocoa);}
.order-card .fulfil-note{color:var(--cocoa);}
.order-card .seasonal-note{margin:0; padding:1rem 1.1rem; background:#F7EBE4; border:0; border-inline-start:2px solid var(--gold); color:var(--cocoa); font-size:.9375rem; line-height:1.75;}
.order-card .seasonal-note:empty{display:none;}
.order-card .qty-stepper button{width:46px; height:46px; border:1px solid rgba(183,155,102,.75); background:#fff; color:var(--wine); font-size:1.25rem;}
.order-card .qty-stepper span{font-size:1.25rem; font-family:var(--font-display);}

/* call to action */
.order-cta{margin:0; padding-top:.2rem; display:flex; flex-direction:column; gap:.9rem; align-items:stretch;}
.btn-primary-cta{
  width:100%; min-height:64px; display:flex; align-items:center; justify-content:center; background:var(--rose); color:#fff; border:1px solid var(--rose);
  font-size:1.1875rem; font-weight:500; letter-spacing:.06em; cursor:pointer; box-shadow:0 14px 26px -16px rgba(94,20,32,.7);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn-primary-cta:hover, .btn-primary-cta:focus-visible{background:#45101B; border-color:#45101B; transform:translateY(-1px);}
.btn-primary-cta:disabled, .btn-primary-cta.btn-date-required{opacity:1; background:var(--rose); cursor:pointer;}
.btn-wa-order{align-self:center; display:inline-block; padding:.2rem 0; color:var(--wine); font-size:1.0625rem; font-weight:500; border-bottom:1px solid var(--gold); transition:color .25s var(--ease), border-color .25s var(--ease);}
.btn-wa-order[hidden]{display:none;}
.btn-wa-order:hover, .btn-wa-order:focus-visible{color:var(--rose); border-color:var(--rose);}
.order-cta .order-summary{margin:0; font-size:1rem; color:var(--cocoa); text-align:center;}
.order-cta .add-to-cart-confirm{margin:0; font-size:1rem; color:var(--wine); font-weight:500;}

/* reassurance: three thin icons with the lines already used on the site */
.assure-row{list-style:none; margin:1.8rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;}
.assure-row li{display:flex; flex-direction:column; align-items:center; gap:.55rem; text-align:center; color:var(--wine); font-size:.9375rem; line-height:1.4;}
.assure-row li + li::before{display:none;}
.assure-row[hidden]{display:none;}
.assure-row svg{display:block; width:28px; height:28px; fill:none; stroke:var(--gold-deep); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;}

@media (max-width:960px){
  .product-layout{grid-template-columns:minmax(0,1fr); gap:2.5rem;}
  .product-layout .gallery{position:relative; top:auto; max-width:480px;}
  /* the cart button stays reachable while the form scrolls on a phone */
  .order-cta{position:sticky; bottom:0; z-index:6; margin-inline:calc(-1 * clamp(1.25rem,2.6vw,2.25rem)); padding:.9rem clamp(1.25rem,2.6vw,2.25rem) 1rem; background:rgba(255,253,249,.98); border-top:1px solid rgba(183,155,102,.5);}
  .btn-wa-order{display:none;}   /* the floating WhatsApp button already covers this on a phone */
  .order-cta{gap:.45rem;}
  .order-cta .order-summary{font-size:.9375rem;}
  body:has([data-product-page]) .wa-float{bottom:128px;}
  .assure-row{grid-template-columns:1fr; text-align:right;}
  .assure-row li{flex-direction:row; text-align:right;}
}


/* ---- gallery with several photos: thumbnail strip beside the main photo ---- */
.gallery-main img{transform:scale(var(--z,1)); transform-origin:var(--x,50%) var(--y,50%); transition:transform .5s var(--ease);}
.gallery.has-thumbs{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"thumbs main" "note note"; gap:1.1rem 1.4rem; align-items:start;}
.gallery.has-thumbs .gallery-thumbs{grid-area:thumbs; display:flex; flex-direction:column; gap:.8rem; margin:0;}
.gallery.has-thumbs .gallery-main{grid-area:main; cursor:zoom-in;}
.gallery.has-thumbs .gallery-disclaimer{grid-area:note;}
.gallery.has-thumbs .gallery-thumbs button{width:76px; height:96px; border:1px solid rgba(183,155,102,.55); opacity:.7; background:var(--sand);}
.gallery.has-thumbs .gallery-thumbs button img{transform:scale(var(--z,1)); transform-origin:var(--x,50%) var(--y,50%);}
.gallery.has-thumbs .gallery-thumbs button:hover{opacity:1;}
.gallery.has-thumbs .gallery-thumbs button.active{opacity:1; border-color:var(--rose); box-shadow:0 0 0 1px var(--rose);}
.product-layout:has(.gallery.has-thumbs){grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);}
.product-layout .gallery.has-thumbs{max-width:740px;}
@media (max-width:960px){
  .product-layout:has(.gallery.has-thumbs){grid-template-columns:minmax(0,1fr);}
  .gallery.has-thumbs{grid-template-columns:minmax(0,1fr); grid-template-areas:"main" "thumbs" "note";}
  .gallery.has-thumbs .gallery-thumbs{flex-direction:row; justify-content:center;}
}

/* ---- folds under the order form ---- */
.pdp-more{margin-top:2.2rem; border-top:1px solid rgba(183,155,102,.55);}
.pdp-more[hidden]{display:none;}
.pdp-more details{border-bottom:1px solid rgba(183,155,102,.55);}
.pdp-more summary{list-style:none; cursor:pointer; padding:1.15rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; color:var(--wine); font-size:1.0625rem; font-weight:500;}
.pdp-more summary::-webkit-details-marker{display:none;}
.pdp-more summary::after{content:"+"; font-family:var(--font-display); font-size:1.5rem; font-weight:300; color:var(--gold-deep); line-height:1;}
.pdp-more details[open] summary::after{content:"–";}
.pdp-more-body{padding:0 0 1.3rem; color:var(--cocoa); font-size:1rem; line-height:1.8;}
.pdp-more-body p{margin:.8rem 0 0;}
.zone-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.1rem 2rem;}
.zone-list li{display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px dotted rgba(183,155,102,.6);}
.zone-list li span:last-child{font-variant-numeric:tabular-nums; color:var(--wine);}
@media (max-width:640px){ .zone-list{grid-template-columns:1fr;} }

/* ---- add-on cards ("להוסיף פינוק?") ---- */
.order-card .addon-list{display:grid; grid-template-columns:1fr 1fr; gap:.8rem;}
.order-card .addon-item{flex-direction:column; align-items:stretch; text-align:center; gap:.6rem; padding:.9rem; border:1px solid rgba(183,155,102,.6); background:#fff; position:relative;}
.order-card .addon-item .ph, .order-card .addon-item img{width:100%; height:92px;}
.order-card .addon-item.active{border-color:var(--rose); box-shadow:0 0 0 1px var(--rose) inset; background:#fff;}
.order-card .addon-item .a-name{font-size:1rem; color:var(--wine);}
.order-card .addon-item .a-price{font-size:.9375rem; color:var(--cocoa);}
.order-card .addon-item .a-check{position:absolute; top:.6rem; left:.6rem; background:#fff; border:1px solid rgba(183,155,102,.75); color:transparent;}
.order-card .addon-item.active .a-check{background:var(--rose); border-color:var(--rose); color:#fff;}

.lock-note{margin:.8rem 0 0; padding:.8rem 1rem; background:#F7EBE4; border-inline-start:2px solid var(--gold); color:var(--cocoa); font-size:.9375rem; line-height:1.7;}
.lock-note a{color:var(--rose); text-decoration:underline; text-underline-offset:3px; font-weight:500;}


/* ==========================================================================
   ORDER SHEET — bespoke touches: medallion, line-extended labels, bouquet-size tiles,
   quick dates, gift-card greeting, framed button
   ========================================================================== */
.order-card{position:relative; padding-top:clamp(2.6rem,3.4vw,3.1rem);}
.order-card::before{
  content:""; position:absolute; top:-23px; left:50%; width:46px; height:46px; margin-left:-23px; border-radius:50%;
  background:#F7EBE4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='-13 -13 26 26' fill='none' stroke='%23B79B66' stroke-width='1'%3E%3Cellipse cy='-5.4' rx='2.1' ry='4.6'/%3E%3Cellipse cy='-5.4' rx='2.1' ry='4.6' transform='rotate(72)'/%3E%3Cellipse cy='-5.4' rx='2.1' ry='4.6' transform='rotate(144)'/%3E%3Cellipse cy='-5.4' rx='2.1' ry='4.6' transform='rotate(216)'/%3E%3Cellipse cy='-5.4' rx='2.1' ry='4.6' transform='rotate(288)'/%3E%3Ccircle r='1.2'/%3E%3C/svg%3E") center/26px no-repeat;
  border:1px solid rgba(183,155,102,.7);
}
.order-card .field-block > .label, .order-card .field-block > label{display:flex; align-items:center; gap:.9rem;}
.order-card .field-block > .label::after, .order-card .field-block > label::after{content:""; flex:1; height:1px; background:linear-gradient(to left, rgba(183,155,102,.55), rgba(183,155,102,0));}

/* sizes: one bloom that grows from S to XL above the letter */
.order-card .size-options button{height:104px; flex-direction:column; justify-content:flex-end; gap:.5rem; padding:0 .4rem .7rem;}
.order-card .size-options button::before{
  content:""; display:block; width:var(--s,20px); height:var(--s,20px); background:currentColor; opacity:.95;
  -webkit-mask:var(--bloom-line) center/contain no-repeat; mask:var(--bloom-line) center/contain no-repeat;
  --bloom-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -13 26 26' fill='none' stroke='black' stroke-width='1.3'%3E%3Cellipse cy='-5.4' rx='2.7' ry='5.6'/%3E%3Cellipse cy='-5.4' rx='2.7' ry='5.6' transform='rotate(72)'/%3E%3Cellipse cy='-5.4' rx='2.7' ry='5.6' transform='rotate(144)'/%3E%3Cellipse cy='-5.4' rx='2.7' ry='5.6' transform='rotate(216)'/%3E%3Cellipse cy='-5.4' rx='2.7' ry='5.6' transform='rotate(288)'/%3E%3Ccircle r='1.3' fill='black'/%3E%3C/svg%3E");
}
.order-card .size-options button:nth-child(1){--s:22px;}
.order-card .size-options button:nth-child(2){--s:30px;}
.order-card .size-options button:nth-child(3){--s:38px;}
.order-card .size-options button:nth-child(4){--s:46px;}

/* the greeting as a little gift card */
.order-card textarea.greeting{background:#FBF6EC; text-align:center; font-family:var(--font-display); font-size:1.25rem; font-weight:300; line-height:1.9; padding:1.3rem 1.4rem; min-height:140px; color:var(--wine);}
.order-card textarea.greeting::placeholder{color:rgba(58,42,34,.6); font-family:var(--font-body); font-size:1rem; font-weight:400;}
.order-card .word-count{text-align:center;}

/* button with a fine inner hairline, like the framed photos */
.btn-primary-cta{outline:1px solid rgba(230,211,168,.5); outline-offset:-6px;}


/* ---- "complete the gift": linked cards to the treat pages (flowers) ---- */
.addon-links{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem;}
.addon-link{display:flex; flex-direction:column; gap:.55rem; text-align:center; color:var(--wine); transition:transform .3s var(--ease);}
.addon-link .al-img{aspect-ratio:1; background:var(--sand); border:1px solid rgba(183,155,102,.6); overflow:hidden;}
.addon-link .al-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease);}
.addon-link:hover .al-img img{transform:scale(1.05);}
.addon-link .al-name{font-size:1rem; font-weight:500;}
@media (max-width:480px){ .addon-links{grid-template-columns:repeat(3,1fr); gap:.6rem;} .addon-link .al-name{font-size:.9375rem;} }

/* typography: no single word alone on a last line (headings balanced, paragraphs "pretty") */
h1, h2, h3, h4, .page-hero p, .card-product h3, .section-head p{text-wrap:balance;}
p, li, blockquote, .desc, .faq-a p, label{text-wrap:pretty;}


/* ==========================================================================
   CLUB POP-UP (design C: deep bordeaux, faded gold bloom print, champagne button)
   ========================================================================== */
html.club-pop-lock{overflow:hidden;}
.club-pop-overlay{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:1.25rem; background:rgba(58,42,34,.45); opacity:0; transition:opacity .35s var(--ease); overflow-y:auto;}
.club-pop-overlay.is-open{opacity:1;}
.club-pop{
  --bloom-lt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150' fill='none' stroke='%23E2CFA4' stroke-width='1'%3E%3Cg transform='translate(75 75)'%3E%3Cellipse cy='-15' rx='5.5' ry='12'/%3E%3Cellipse cy='-15' rx='5.5' ry='12' transform='rotate(72)'/%3E%3Cellipse cy='-15' rx='5.5' ry='12' transform='rotate(144)'/%3E%3Cellipse cy='-15' rx='5.5' ry='12' transform='rotate(216)'/%3E%3Cellipse cy='-15' rx='5.5' ry='12' transform='rotate(288)'/%3E%3Ccircle r='3'/%3E%3C/g%3E%3C/svg%3E");
  position:relative; isolation:isolate; overflow:hidden; width:min(600px,100%); margin:auto; padding:clamp(2.4rem,5vw,3.4rem) clamp(1.5rem,5vw,3rem) clamp(1.8rem,4vw,2.6rem);
  background:linear-gradient(135deg,#7E1F2D 0%,#5E1420 100%); color:#FBF6EC; text-align:center; display:flex; flex-direction:column; gap:1.1rem;
  transform:translateY(14px) scale(.98); transition:transform .45s var(--ease); box-shadow:0 40px 80px -30px rgba(40,8,14,.7);
}
.club-pop-overlay.is-open .club-pop{transform:none;}
.club-pop::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:var(--bloom-lt); background-size:150px 150px; opacity:.2;}
.club-pop-x{position:absolute; top:10px; left:12px; width:44px; height:44px; border:0; background:transparent; color:#FBF6EC; font-size:2rem; line-height:1; cursor:pointer; opacity:.8;}
.club-pop-x:hover, .club-pop-x:focus-visible{opacity:1;}
.club-pop-tag{font-size:.875rem; letter-spacing:.22em; color:#E6D3A8;}
.club-pop h2{margin:0; font-family:var(--font-display); font-weight:300; font-size:clamp(1.9rem,5vw,2.7rem); line-height:1.15; color:#FBF6EC;}
.club-pop-rule{height:1px; width:70px; margin:0 auto; background:rgba(230,211,168,.55);}
.club-pop p{margin:0;}
.club-pop-sub{font-size:1.125rem; color:#F4E7D4;}
.club-pop-note{font-size:1.0625rem; font-weight:500; color:#E6D3A8;}
.club-pop-form{display:flex; flex-direction:column; gap:1.05rem; margin-top:.3rem;}
.club-pop-field input{display:block; width:100%; background:transparent; border:0; border-bottom:1px solid rgba(251,246,236,.65); padding:.85rem .1rem; font-size:1.0625rem; color:#FBF6EC; text-align:right; font-family:var(--font-body); border-radius:0;}
.club-pop-field input::placeholder{color:#FBF6EC; opacity:.75;}
.club-pop-field input:focus-visible{outline:0; border-bottom-color:#E6D3A8; box-shadow:0 1px 0 #E6D3A8;}
.club-pop-consent{display:flex; gap:.6rem; align-items:flex-start; text-align:right; font-size:.9375rem; line-height:1.55; color:#F4E7D4;}
.club-pop-consent input{margin-top:.3rem; flex:none; accent-color:#E6D3A8;}
.club-pop-error{font-size:.9375rem; color:#F6C9C9; text-align:right; margin:.35rem 0 0 !important;}
.club-pop-error:empty{display:none;}
.club-pop-go{display:flex; align-items:center; justify-content:center; width:100%; min-height:58px; border:0; background:#E8DAB8; color:#45101B; font-size:1.125rem; font-weight:500; letter-spacing:.06em; cursor:pointer; font-family:var(--font-body); transition:background .25s var(--ease), color .25s var(--ease);}
.club-pop-go:hover, .club-pop-go:focus-visible{background:#FBF6EC;}
.club-pop-go:disabled{opacity:.6; cursor:not-allowed;}
.club-pop-code{width:fit-content; margin-inline:auto; padding-inline:2.4rem; text-decoration:none;}
.club-pop-code[hidden]{display:none;}
.club-pop-result{min-height:1em; font-size:1rem; color:#FBF6EC; text-align:center;}
.club-pop-result:empty{display:none;}
.club-pop-next[hidden]{display:none;}
.club-pop-fine{font-size:.875rem; color:#E6D3A8;}
.club-pop-fine a{color:#E6D3A8; text-decoration:underline; text-underline-offset:3px;}
/* after joining: the fields give way to thanks + the WhatsApp button */
.club-pop-form.is-done .club-pop-field, .club-pop-form.is-done .club-pop-consent, .club-pop-form.is-done [data-club-error], .club-pop-form.is-done .club-pop-go.club-submit-btn, .club-pop-form.is-done .club-hp{display:none;}
.club-pop-form.is-done .club-pop-result{font-family:var(--font-display); font-size:clamp(1.7rem,4vw,2.2rem); font-weight:300; color:#FBF6EC; margin-top:.3rem;}
.club-pop-form.is-done .club-pop-next{font-size:1.25rem; font-weight:500; color:#E6D3A8; margin:0;}
.club-pop:has(.is-done) .club-pop-note, .club-pop:has(.is-done) .club-pop-sub{display:none;}
.club-pop .club-hp{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
@media (prefers-reduced-motion:reduce){ .club-pop-overlay, .club-pop{transition:none;} }


/* ==========================================================================
   WORKSHOPS PAGE — compact stage hero + the four workshops side by side
   ========================================================================== */
.ws-hero{text-align:center; padding-top:calc(var(--header-h) + clamp(1.4rem,2.4vw,2rem)); padding-bottom:clamp(1.4rem,2.4vw,2rem); display:flex; flex-direction:column; align-items:center; gap:.7rem;}
.ws-hero .eyebrow{display:inline-flex; align-items:center; gap:.8rem; color:var(--gold-deep); font-size:.875rem; font-weight:500; letter-spacing:.2em; margin:0;}
.ws-hero .eyebrow::before, .ws-hero .eyebrow::after{content:""; width:34px; height:1px; background:var(--gold);}
.ws-hero h1{font-family:var(--font-display); font-weight:300; font-size:clamp(2.6rem,5.4vw,4.2rem); line-height:1; letter-spacing:-.02em; color:var(--wine); margin:0;}
.ws-hero p{margin:0; max-width:52ch; font-size:clamp(1.0625rem,1.4vw,1.25rem); line-height:1.65; color:var(--cocoa);}
.ws-facts{display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 2.2rem; margin:.3rem 0 0; padding:.7rem 0 0; border-top:1px solid rgba(183,155,102,.55);}
.ws-facts[hidden]{display:none;}
.ws-facts div{display:flex; align-items:baseline; gap:.55rem;}
.ws-facts dt{font-size:.875rem; letter-spacing:.14em; color:var(--gold-deep); font-weight:500;}
.ws-facts dd{margin:0; font-size:1.0625rem; color:var(--wine);}
.page-stage.ws-stage{padding-block:0;}

.ws-rows{background:var(--cream); padding:clamp(1.8rem,3vw,2.6rem) 0 clamp(3rem,5vw,4.5rem);}
.ws-rows > div{max-width:1400px; margin-inline:auto; padding-inline:var(--edge);}
[data-workshop-grid]{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.6rem,2.8vw,2.8rem); align-items:stretch;}
.ws-card{display:flex; flex-direction:column; gap:1.5rem;}
/* photo in a gold-hairline mat, same shape for all four */
.ws-bg{display:block; position:relative; margin:10px; aspect-ratio:1/1.08; overflow:hidden; background:var(--sand); outline:1px solid rgba(183,155,102,.6); outline-offset:9px; box-shadow:0 30px 48px -34px rgba(58,42,34,.5);}
.ws-bg img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease);}
.ws-card:hover .ws-bg img{transform:scale(1.05);}
/* text block: titles, blurbs and buttons line up across the four cards */
.ws-text{flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.75rem; padding-top:.2rem;}
.ws-text h2{font-family:var(--font-display); font-weight:400; font-size:clamp(1.3rem,1.7vw,1.6rem); line-height:1.25; color:var(--wine); margin:0; min-height:2.5em; display:flex; align-items:center; justify-content:center;}
.ws-text h2 a{color:inherit;}
.ws-desc{margin:0; font-size:1.0625rem; line-height:1.65; color:var(--cocoa); min-height:3.3em;}
.ws-btn{margin-top:auto; display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:52px; padding-inline:1rem; background:transparent; color:var(--rose); border:1px solid var(--rose); font-size:1rem; font-weight:500; letter-spacing:.04em; transition:background .3s var(--ease), color .3s var(--ease);}
.ws-btn:hover, .ws-btn:focus-visible, .ws-card:hover .ws-btn{background:var(--rose); color:#fff;}
@media (max-width:1100px){ [data-workshop-grid]{grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4rem 1.8rem;} }
@media (max-width:560px){ [data-workshop-grid]{grid-template-columns:minmax(0,1fr);} .ws-bg{max-width:420px; margin-inline:auto; width:calc(100% - 20px);} .ws-text h2, .ws-desc{min-height:0;} }

/* add-on cards: photo, name, price and (for the vase) a direct add-to-cart button */
.addon-links{align-items:start;}
.addon-link .al-img{display:block; aspect-ratio:1; background:var(--sand); border:1px solid rgba(183,155,102,.6); overflow:hidden;}
.addon-link .al-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease);}
.addon-link:hover .al-img img{transform:scale(1.05);}
.addon-link .al-name{color:var(--wine); font-size:1rem; font-weight:500;}
.addon-link .al-price{font-family:var(--font-display); font-size:1.125rem; color:var(--wine); margin-top:-.2rem;}
.addon-link .al-add{margin-top:.2rem; min-height:44px; padding-inline:.6rem; border:1px solid var(--rose); background:transparent; color:var(--rose); font-size:.9375rem; font-weight:500; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease);}
.addon-link .al-add:hover, .addon-link .al-add:focus-visible{background:var(--rose); color:#fff;}
.addon-msg{grid-column:1/-1; margin:.2rem 0 0; font-size:.9375rem; color:var(--wine); font-weight:500;}
.addon-msg:empty{display:none;}

/* add-ons as light little chips: small photo, name (+ price) and a round "+" — easy on the eye */
.order-card .addon-links{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:.6rem; align-items:stretch;}
.order-card .addon-link{display:flex; flex-direction:row; align-items:center; gap:.7rem; padding:.4rem .5rem .4rem .6rem; border:1px solid rgba(183,155,102,.55); background:#fff; text-align:right; transition:border-color .25s var(--ease);}
.order-card .addon-link:hover{border-color:var(--rose); transform:none;}
.order-card .addon-link .al-img{flex:none; width:52px; height:52px; aspect-ratio:auto;}
.order-card .addon-link .al-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:0; line-height:1.3;}
.order-card .addon-link .al-name{font-size:1rem;}
.order-card .addon-link .al-price{margin:0; font-size:1rem; color:var(--cocoa); font-family:var(--font-body);}
.order-card .addon-link .al-add{flex:none; margin:0; width:38px; height:38px; min-height:0; padding:0; border-radius:50%; font-size:1.4rem; line-height:1; display:flex; align-items:center; justify-content:center;}
.order-card .addon-link .al-add.is-added{background:var(--rose); color:#fff;}

.order-card .addon-link .al-select{border:0; border-bottom:1px solid rgba(183,155,102,.7); background:transparent; color:var(--cocoa); font-size:1rem; padding:.1rem 0; max-width:100%; font-family:var(--font-body); border-radius:0;}
.order-card .addon-link .al-select:focus-visible{outline:2px solid var(--rose); outline-offset:2px;}
.order-card .addon-link .al-add[hidden]{display:none;}

/* "choose a bouquet first" notice (letter / heart / number) and the flash on the field that needs attention */
.bq-notice{display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; padding:1rem 1.1rem; background:#F7EBE4; border-inline-start:3px solid var(--rose);}
.bq-notice p{margin:0; font-size:1.0625rem; line-height:1.65; color:var(--wine); font-weight:500;}
.bq-pick{display:inline-flex; align-items:center; min-height:46px; padding-inline:1.5rem; background:var(--rose); color:#fff; font-size:1rem; font-weight:500; letter-spacing:.03em; transition:background .25s var(--ease);}
.bq-pick:hover, .bq-pick:focus-visible{background:#45101B;}
@keyframes fieldFlash{0%{box-shadow:0 0 0 0 rgba(126,31,45,0);} 25%{box-shadow:0 0 0 6px rgba(126,31,45,.28);} 100%{box-shadow:0 0 0 0 rgba(126,31,45,0);}}
.field-flash{animation:fieldFlash 1.3s ease-out 1; scroll-margin-top:120px;}
@media (prefers-reduced-motion:reduce){ .field-flash{animation:none; outline:2px solid var(--rose);} }

/* tighter order sheet: empty error lines take no room, fewer big gaps between the fields */
.order-card .field-error:empty{display:none; min-height:0; margin:0;}
.order-card .field-error{min-height:0; margin:.4rem 0 0;}
.order-card{gap:1.45rem;}
.order-card .word-count{margin-top:.35rem;}
.order-card .field-block > .label, .order-card .field-block > label{margin-bottom:.6rem;}
.order-card textarea.greeting{min-height:96px;}
.order-card .seasonal-note:empty{display:none;}


/* ---------- catalog toolbar: category filters (right) + the sort dropdown (left) ---------- */
.catalog-toolbar{display:flex; align-items:center; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; margin-bottom:clamp(1.8rem,3.4vw,2.6rem); padding-bottom:1.1rem; border-bottom:1px solid var(--linen-line);}
.catalog-toolbar .sort-wrap{margin-inline-start:auto; position:relative;}
.catalog-toolbar .sort-wrap[hidden]{display:none;}
.sort-btn{display:inline-flex; align-items:center; gap:.6rem; min-height:46px; padding:0 1.1rem; background:#fff; border:1px solid rgba(183,155,102,.7); color:var(--wine); font-size:1rem; cursor:pointer; font-family:var(--font-body); transition:border-color .25s var(--ease);}
.sort-btn:hover, .sort-btn[aria-expanded="true"]{border-color:var(--rose);}
.sort-label{color:var(--gold-deep); font-size:.875rem; letter-spacing:.14em; font-weight:500;}
.sort-current{font-weight:500;}
.sort-chev{width:12px; height:8px; margin-inline-start:.2rem; transition:transform .25s var(--ease);}
.sort-btn[aria-expanded="true"] .sort-chev{transform:rotate(180deg);}
.sort-list{position:absolute; top:calc(100% + 6px); inset-inline-end:0; z-index:20; min-width:100%; width:max-content; margin:0; padding:.35rem 0; list-style:none; background:#fff; border:1px solid rgba(183,155,102,.7); box-shadow:0 22px 40px -22px rgba(58,42,34,.5);}
.sort-list[hidden]{display:none;}
.sort-list li{display:flex; align-items:center; gap:.7rem; padding:.7rem 1.1rem .7rem 1.4rem; font-size:1rem; color:var(--cocoa); cursor:pointer; white-space:nowrap;}
.sort-list li:hover, .sort-list li:focus-visible{background:#F7EBE4; color:var(--wine); outline:none;}
.sort-list li[aria-selected="true"]{color:var(--wine); font-weight:500;}
.sort-check{width:14px; height:14px; flex:none; position:relative;}
.sort-list li[aria-selected="true"] .sort-check::before{content:""; position:absolute; inset:0; background:var(--gold-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5 5.5 11 12 3' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5 5.5 11 12 3' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;}
@media (max-width:560px){ .catalog-toolbar{flex-direction:column; align-items:stretch;} .catalog-toolbar .sort-wrap{margin-inline-start:0;} .sort-btn{width:100%; justify-content:space-between;} .sort-list{inset-inline-start:0; inset-inline-end:0; width:auto;} }

/* treat pages: the dynamic fields live in one wrapper, so they get the same even rhythm as the rest of the sheet */
.order-card [data-dynamic-fields]{display:flex; flex-direction:column; gap:1.45rem;}
.order-card [data-dynamic-fields]:empty{display:none;}
.order-card .notice-box, .order-card .warning-box{margin:0;}


/* ==========================================================================
   ABOUT PAGE — stage hero, alternating story chapters with arched photo windows
   (empty windows until real photos arrive), a bordeaux quote band, a closing stage
   ========================================================================== */
.ab-main > section{padding-block:0;}
.ab-hero{padding-block:0;}
.ab-hero-inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; padding-top:calc(var(--header-h) + clamp(2.2rem,4vw,3.4rem)); padding-bottom:clamp(2.4rem,4.4vw,3.6rem);}
.ab-eyebrow{display:inline-flex; align-items:center; gap:.8rem; color:var(--gold-deep); font-size:.875rem; font-weight:500; letter-spacing:.2em; margin:0;}
.ab-eyebrow::before, .ab-eyebrow::after{content:""; width:34px; height:1px; background:var(--gold);}
.ab-hero h1{font-family:var(--font-display); font-weight:300; font-size:clamp(2.6rem,6.4vw,5rem); line-height:1.05; letter-spacing:-.02em; color:var(--wine); margin:0;}
.ab-orn{display:flex; align-items:center; gap:1rem; width:min(260px,70%); color:var(--gold);}
.ab-orn span{flex:1; height:1px; background:currentColor; opacity:.6;}
.ab-orn svg{width:26px; height:26px; flex:none;}

.ab-chapter{padding-block:clamp(2.6rem,5vw,4.4rem); background:var(--cream);}
.ab-row{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2.4rem,6vw,6rem); align-items:center; max-width:1180px;}
.ab-chapter-flip .ab-media{order:2;}
.ab-media{display:flex; justify-content:center;}
/* an oval window with a faded bloom, waiting for a real photo */
.ab-window{width:min(380px,100%); aspect-ratio:4/5; border-radius:50%; position:relative; margin:12px; background:var(--sand); outline:1px solid rgba(183,155,102,.7); outline-offset:11px; box-shadow:0 34px 56px -38px rgba(58,42,34,.5); display:flex; align-items:center; justify-content:center; color:var(--gold); overflow:hidden;}
.ab-window::before{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(247,235,228,.9), rgba(241,230,208,0) 70%);}
.ab-window svg{display:none;}
.ab-window::after{content:""; position:relative; width:130px; height:130px; flex:none; opacity:.8;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='-13 -13 26 26' fill='none' stroke='%23B79B66' stroke-width='.6'%3E%3Cellipse cy='-5.4' rx='2.1' ry='4.6'/%3E%3Cellipse cy='-5.4' rx='2.1' ry='4.6' transform='rotate(72)'/%3E%3Cellipse cy='-5.4' rx='2.1' ry='4.6' transform='rotate(144)'/%3E%3Cellipse cy='-5.4' rx='2.1' ry='4.6' transform='rotate(216)'/%3E%3Cellipse cy='-5.4' rx='2.1' ry='4.6' transform='rotate(288)'/%3E%3Ccircle r='1.2'/%3E%3C/svg%3E") center/contain no-repeat;}
.ab-text{display:flex; flex-direction:column; gap:1.25rem; max-width:560px;}
.ab-text h2{font-family:var(--font-display); font-weight:300; font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.15; letter-spacing:-.01em; color:var(--wine); margin:0;}
.ab-text p{margin:0; font-size:1.1875rem; line-height:1.95; color:var(--cocoa);}
.ab-text .ab-lede{font-size:1.375rem; line-height:1.85; color:var(--wine); font-family:var(--font-display); font-weight:300;}

.ab-band{--bloom-lt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150' fill='none' stroke='%23E2CFA4' stroke-width='1'%3E%3Cg transform='translate(75 75)'%3E%3Cellipse cy='-15' rx='5.5' ry='12'/%3E%3Cellipse cy='-15' rx='5.5' ry='12' transform='rotate(72)'/%3E%3Cellipse cy='-15' rx='5.5' ry='12' transform='rotate(144)'/%3E%3Cellipse cy='-15' rx='5.5' ry='12' transform='rotate(216)'/%3E%3Cellipse cy='-15' rx='5.5' ry='12' transform='rotate(288)'/%3E%3Ccircle r='3'/%3E%3C/g%3E%3C/svg%3E"); position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(135deg,#7E1F2D 0%,#5E1420 100%); color:#FBF6EC;}
.ab-band::before{content:""; position:absolute; inset:0; z-index:-1; background-image:var(--bloom-lt); background-size:150px; opacity:.18;}
.ab-band-inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.9rem; padding-block:clamp(2.8rem,5.4vw,4.4rem);}
.ab-band-flower{width:30px; height:30px; color:#E6D3A8;}
.ab-band-flower svg{width:100%; height:100%;}
.ab-quote{margin:0; font-family:var(--font-display); font-weight:300; font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1.3; max-width:24ch; color:#FBF6EC;}
.ab-cite{margin:0; font-size:1rem; letter-spacing:.14em; color:#E6D3A8;}

.ab-closing{padding-block:0;}
.ab-closing-inner{display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.2rem; max-width:720px; padding-block:clamp(3rem,5.6vw,4.8rem);}
.ab-closing h2{font-family:var(--font-display); font-weight:300; font-size:clamp(2rem,3.8vw,3rem); color:var(--wine); margin:0;}
.ab-closing p{margin:0; font-size:1.1875rem; line-height:1.9; color:var(--cocoa);}
.ab-btn{display:inline-flex; align-items:center; justify-content:center; min-height:58px; margin-top:.6rem; padding-inline:2.8rem; background:var(--rose); color:#fff; border:1px solid var(--rose); font-size:1.0625rem; font-weight:500; letter-spacing:.05em; outline:1px solid rgba(230,211,168,.5); outline-offset:-6px; transition:background .3s var(--ease);}
.ab-btn:hover, .ab-btn:focus-visible{background:#45101B; border-color:#45101B;}
@media (max-width:860px){
  .ab-row{grid-template-columns:minmax(0,1fr); gap:2.2rem;}
  .ab-chapter-flip .ab-media{order:0;}
  .ab-window{width:min(320px,100%);}
  .ab-text{max-width:none;}
}

/* sort control, quieter: a text line with a fine gold underline instead of a boxed button */
.sort-btn{min-height:40px; padding:0 .15rem .15rem; background:transparent; border:0; border-bottom:1px solid rgba(183,155,102,.75); gap:.55rem; color:var(--cocoa);}
.sort-btn:hover, .sort-btn[aria-expanded="true"]{border-bottom-color:var(--rose); color:var(--wine);}
.sort-label{color:var(--gold-deep); font-size:.875rem; letter-spacing:.16em; font-weight:500;}
.sort-label::after{content:"·"; margin-inline-start:.55rem; color:rgba(183,155,102,.9);}
.sort-current{font-weight:400; font-size:1rem; color:var(--wine);}
.sort-list{background:var(--cream); border:1px solid rgba(183,155,102,.55); box-shadow:0 18px 30px -22px rgba(58,42,34,.35); padding:.25rem 0; top:calc(100% + 8px);}
.sort-list li{padding:.6rem 1.1rem .6rem 1.3rem; font-size:1rem;}
.sort-list li:hover, .sort-list li:focus-visible{background:rgba(183,155,102,.16);}

/* about: the chapters own their vertical breathing room (the rule above would otherwise zero it out) */
.ab-main > section.ab-chapter{padding-block:clamp(2.4rem,4.6vw,3.8rem);}
.ab-main > section.ab-chapter + section.ab-band, .ab-main > section.ab-band + section.ab-chapter{margin-top:0;}


/* sort control, final: a small sort icon and the single word "מיון"; the choices open beneath */
.sort-btn{display:inline-flex; align-items:center; gap:.65rem; min-height:40px; padding:.35rem .2rem; background:transparent; border:0; color:var(--wine);}
.sort-btn .sort-ico{width:20px; height:20px; stroke:var(--gold-deep); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s var(--ease);}
.sort-btn .sort-label{color:var(--wine); font-size:1.0625rem; letter-spacing:.02em; font-weight:400; border-bottom:1px solid rgba(183,155,102,.8); padding-bottom:1px;}
.sort-btn .sort-label::after{content:none;}
.sort-btn:hover .sort-label, .sort-btn[aria-expanded="true"] .sort-label{border-bottom-color:var(--rose);}
.sort-btn:hover .sort-ico, .sort-btn[aria-expanded="true"] .sort-ico{stroke:var(--rose);}
.sort-btn .sort-chev{display:none;}

/* open list: tied to the trigger (a small caret under the icon), same type size and warmth */
.sort-list{top:calc(100% + 9px); inset-inline-end:-.4rem; min-width:0; padding:.3rem 0; background:var(--cream); border:1px solid rgba(183,155,102,.6); box-shadow:0 14px 26px -20px rgba(58,42,34,.4);}
.sort-list::before{content:""; position:absolute; top:-6px; inset-inline-end:1.35rem; width:10px; height:10px; background:var(--cream); border-top:1px solid rgba(183,155,102,.6); border-inline-start:1px solid rgba(183,155,102,.6); transform:rotate(45deg);}
.sort-list li{padding:.5rem 1rem .5rem 1.2rem; font-size:1rem; gap:.55rem; position:relative;}
.sort-list li + li{border-top:1px solid rgba(183,155,102,.22);}
.sort-check{width:12px; height:12px;}
.sort-list li[aria-selected="true"]{font-weight:500; color:var(--wine);}

/* sort control: slightly smaller */
.sort-btn{min-height:34px; gap:.5rem; padding:.25rem .15rem;}
.sort-btn .sort-ico{width:16px; height:16px;}
.sort-btn .sort-label{font-size:.9375rem;}
.sort-list li{font-size:.9375rem; padding:.45rem .9rem .45rem 1.1rem;}
.sort-list::before{inset-inline-end:1.1rem;}
.catalog-toolbar{padding-bottom:.35rem;}
.sort-btn{min-height:30px; padding-block:.1rem;}

/* every catalog toolbar has the same height, so the sort sits at the same spot on flowers / treats / pots */
@media (min-width:561px){ .catalog-toolbar{box-sizing:border-box; min-height:54px; align-items:center;} }

/* sale price: regular price struck through, sale price in bordeaux */
.was-price{color:var(--ink-soft); font-weight:400; text-decoration-thickness:1px; margin-inline-end:.35rem;}
.sale-price{color:var(--wine); font-weight:500;}
.product-info .price .sale-until{display:block; font-family:var(--font-body); font-size:.875rem; font-weight:400; color:var(--gold-deep); letter-spacing:.02em; margin-top:.3rem;}

/* a day + hours unit never breaks across lines */
.nw{white-space:nowrap;}