/* =====================================================================
   POCKET PSH PSH — Experts of the 4th sense: smell  ·  Global stylesheet
   Brand palette: gold + deep green on warm cream / near-black
   ===================================================================== */

:root{
  --ink:        #1a1a1a;
  --ink-soft:   #4a4a4a;
  --muted:      #8a8073;
  --line:       #e7e0d4;
  --ivory:      #f7f4ef;
  --cream:      #fbf9f5;
  --sand:       #efe9df;
  --gold:        #c39a2b;   /* brand gold, readable on cream */
  --gold-dark:   #9c7817;
  --gold-bright: #e8c04a;   /* highlight / on-dark gold */
  --green:       #17693b;   /* brand green */
  --green-dark:  #0f4a29;
  --green-bright:#26985a;
  --white:      #ffffff;
  --danger:     #b14b4b;
  --success:    #17693b;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --shadow-sm: 0 4px 20px rgba(26,26,26,.06);
  --shadow-md: 0 14px 40px rgba(26,26,26,.10);
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  font-size:16px;
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  letter-spacing:.5px;
  margin:0 0 .4em;
}
h1{ font-size:clamp(2.4rem,5vw,4rem); }
h2{ font-size:clamp(2rem,3.6vw,2.9rem); }
h3{ font-size:1.5rem; }

a{ color:inherit; text-decoration:none; transition:color .25s var(--ease); }
a:hover{ color:var(--gold-dark); }

img{ max-width:100%; display:block; }

.container{ width:100%; max-width:1280px; margin:0 auto; padding:0 24px; }
.container-narrow{ max-width:840px; }

.section{ padding:84px 0; }
.section-sm{ padding:54px 0; }

.text-center{ text-align:center; }
.muted{ color:var(--muted); }

/* eyebrow / kicker label */
.kicker{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-dark); font-weight:500; margin-bottom:14px; display:block;
}

.section-head{ max-width:620px; margin:0 auto 52px; text-align:center; }
.section-head p{ color:var(--ink-soft); margin:0; }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:400; padding:15px 34px; border:1px solid var(--ink); cursor:pointer;
  background:var(--ink); color:var(--white); border-radius:var(--radius);
  transition:all .3s var(--ease); white-space:nowrap;
}
.btn:hover{ background:var(--gold-dark); border-color:var(--gold-dark); color:#fff; }
.btn-outline{ background:transparent; color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:#fff; }
.btn-gold{ background:var(--gold); border-color:var(--gold); }
.btn-gold:hover{ background:var(--gold-dark); border-color:var(--gold-dark); }
.btn-light{ background:#fff; color:var(--ink); border-color:#fff; }
.btn-light:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:11px 22px; font-size:.7rem; }

/* =====================================================================
   ANNOUNCEMENT BAR
   ===================================================================== */
.announce{
  background:var(--green-dark); color:#f2ead6;
  text-align:center; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  padding:9px 16px; font-weight:300;
}

/* =====================================================================
   HEADER / NAV
   ===================================================================== */
.site-header{ position:sticky; top:0; z-index:60; background:rgba(251,249,245,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px; }
.brand{ display:inline-flex; align-items:center; gap:12px; }
.brand-mark{ width:auto; height:44px; flex:none; }
.brand-words{ font-family:var(--serif); font-size:1.32rem; letter-spacing:.2em; font-weight:700;
  text-transform:uppercase; line-height:1.05; color:var(--green-dark); }
.brand-words em{ font-style:normal; color:var(--gold-dark); }
.brand-words small{ display:block; font-family:var(--sans); font-size:.5rem; letter-spacing:.26em;
  color:var(--muted); margin-top:3px; font-weight:400; text-transform:uppercase; }

.nav-links{ display:flex; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  position:relative; padding:6px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold-dark); transition:width .3s var(--ease); }
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-icons{ display:flex; align-items:center; gap:18px; }
.icon-btn{ background:none; border:0; cursor:pointer; color:var(--ink); padding:4px;
  display:inline-flex; position:relative; }
.icon-btn svg{ width:22px; height:22px; }
.cart-count{ position:absolute; top:-7px; right:-9px; background:var(--gold); color:#fff;
  font-size:.6rem; min-width:17px; height:17px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; padding:0 4px; font-family:var(--sans); }
.hamburger{ display:none; }

/* search bar */
.search-wrap{ position:fixed; inset:0 0 auto 0; background:var(--cream); z-index:80;
  transform:translateY(-100%); transition:transform .4s var(--ease); box-shadow:var(--shadow-md);
  padding:26px 0; }
.search-wrap.open{ transform:translateY(0); }
.search-form{ display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--ink);
  padding-bottom:12px; }
.search-form input{ flex:1; border:0; background:none; font-family:var(--serif); font-size:1.6rem;
  color:var(--ink); outline:none; }
.search-form input::placeholder{ color:var(--muted); }
.search-close{ background:none; border:0; font-size:1.4rem; cursor:pointer; color:var(--ink); }

/* mobile nav drawer */
.mobile-nav{ position:fixed; inset:0; background:rgba(26,26,26,.4); z-index:90; opacity:0;
  visibility:hidden; transition:.3s; }
.mobile-nav.open{ opacity:1; visibility:visible; }
.mobile-nav-panel{ position:absolute; top:0; left:0; bottom:0; width:80%; max-width:320px;
  background:var(--cream); padding:28px 26px; transform:translateX(-100%);
  transition:transform .35s var(--ease); overflow-y:auto; }
.mobile-nav.open .mobile-nav-panel{ transform:translateX(0); }
.mobile-nav-panel a{ display:block; padding:14px 0; border-bottom:1px solid var(--line);
  font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }

/* =====================================================================
   CART DRAWER
   ===================================================================== */
.cart-drawer{ position:fixed; inset:0; z-index:100; visibility:hidden; }
.cart-drawer.open{ visibility:visible; }
.cart-overlay{ position:absolute; inset:0; background:rgba(26,26,26,.45); opacity:0;
  transition:opacity .35s; }
.cart-drawer.open .cart-overlay{ opacity:1; }
.cart-panel{ position:absolute; top:0; right:0; bottom:0; width:100%; max-width:430px;
  background:var(--cream); display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .4s var(--ease); box-shadow:var(--shadow-md); }
.cart-drawer.open .cart-panel{ transform:translateX(0); }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:24px 26px;
  border-bottom:1px solid var(--line); }
.cart-head h3{ margin:0; font-size:1.1rem; letter-spacing:.18em; text-transform:uppercase;
  font-family:var(--sans); font-weight:400; }
.cart-body{ flex:1; overflow-y:auto; padding:10px 26px; }
.cart-foot{ border-top:1px solid var(--line); padding:22px 26px; }
.cart-foot .row{ display:flex; justify-content:space-between; margin-bottom:16px;
  font-size:.95rem; letter-spacing:.05em; }
.cart-foot .row strong{ font-size:1.15rem; }

.cart-line{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.cart-line img{ width:74px; height:90px; object-fit:cover; background:var(--sand); border-radius:3px; }
.cart-line .meta{ flex:1; }
.cart-line .meta h4{ font-family:var(--sans); font-weight:400; font-size:.92rem; margin:0 0 4px; }
.cart-line .price{ color:var(--gold-dark); font-size:.9rem; }
.cart-line .remove{ background:none; border:0; color:var(--muted); cursor:pointer; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; padding:0; margin-top:8px; }
.cart-line .remove:hover{ color:var(--danger); }
.cart-empty{ text-align:center; padding:60px 20px; color:var(--muted); }

.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:3px;
  margin-top:8px; }
.qty button{ background:none; border:0; width:30px; height:30px; cursor:pointer; font-size:1rem;
  color:var(--ink); }
.qty input{ width:36px; border:0; text-align:center; font-family:var(--sans); background:none;
  -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button{ -webkit-appearance:none; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(120deg,#efe7d8 0%,#e6dac6 55%,#d8c4a0 100%); }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.9; }
.hero .container{ position:relative; z-index:2; }
.hero-inner{ max-width:560px; }
.hero h1{ margin-bottom:18px; }
.hero p{ font-size:1.12rem; color:var(--ink-soft); max-width:440px; margin-bottom:34px; }
.hero .btn{ margin-right:14px; }

/* =====================================================================
   PRODUCT CARD / GRID
   ===================================================================== */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px 28px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }

.product-card{ position:relative; display:flex; flex-direction:column; }
.product-card .media{ position:relative; overflow:hidden; background:var(--sand);
  border-radius:var(--radius); aspect-ratio:4/5; }
.product-card .media img{ width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), opacity .5s var(--ease); }
.product-card .media img.alt{ position:absolute; inset:0; opacity:0; }
/* .has-promo is set by product-card.php only when the product really has
   promotional artwork. Without this guard, a product with no .alt image
   would fade its packshot out on hover and show an empty card. */
.product-card.has-promo:hover .media img.main{ opacity:0; }
.product-card.has-promo:hover .media img.alt{ opacity:1; transform:scale(1.04); }

.product-badges{ position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px;
  z-index:3; }
.badge{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; padding:5px 10px;
  border-radius:2px; font-weight:500; color:#fff; background:var(--ink); }
.badge-sale{ background:var(--danger); }
.badge-new{ background:var(--success); }
.badge-best{ background:var(--gold-dark); }
.badge-limited{ background:#6b5b95; }
.badge-gift{ background:#7a6a4a; }

.quick-add{ position:absolute; left:12px; right:12px; bottom:12px; z-index:3; opacity:0;
  transform:translateY(12px); transition:all .35s var(--ease); }
.product-card:hover .quick-add{ opacity:1; transform:translateY(0); }

.product-info{ padding:18px 2px 0; text-align:center; }
.product-info .cat{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px; }
.product-info h3{ font-size:1.16rem; margin:0 0 6px; }
.product-info h3 a:hover{ color:var(--gold-dark); }
.product-info .rating{ color:var(--gold); font-size:.8rem; letter-spacing:1px; margin-bottom:8px; }
.product-info .rating span{ color:var(--muted); }
.price-row{ display:flex; gap:10px; justify-content:center; align-items:baseline; }
.price{ font-size:1.05rem; color:var(--ink); letter-spacing:.04em; }
.price-old{ color:var(--muted); text-decoration:line-through; font-size:.9rem; }

/* =====================================================================
   CATEGORY TILES
   ===================================================================== */
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cat-tile{ position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:3/4;
  display:flex; align-items:flex-end; }
.cat-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease); }
.cat-tile:hover img{ transform:scale(1.06); }
.cat-tile .label{ position:relative; z-index:2; width:100%; padding:26px; color:#fff;
  background:linear-gradient(transparent,rgba(26,26,26,.55)); }
.cat-tile .label h3{ color:#fff; margin:0; font-size:1.5rem; }
.cat-tile .label span{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; opacity:.85; }

/* =====================================================================
   STORY / SPLIT SECTION
   ===================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:64px; }
.split.reverse .split-media{ order:2; }
.split-media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; background:var(--sand); }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split-text h2{ margin-bottom:18px; }
.split-text p{ color:var(--ink-soft); margin-bottom:22px; }

/* feature collection band */
.feature-band{ background:var(--ink); color:#f3eee4; }
.feature-band .kicker{ color:var(--gold); }
.feature-band h2{ color:#fff; }
.feature-band p{ color:#cfc6b6; }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.testi-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 30px; text-align:center; box-shadow:var(--shadow-sm); }
.testi-card .stars{ color:var(--gold); letter-spacing:2px; margin-bottom:16px; }
.testi-card p{ font-family:var(--serif); font-size:1.22rem; font-style:italic; color:var(--ink);
  margin-bottom:20px; line-height:1.5; }
.testi-card .who{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* =====================================================================
   NEWSLETTER
   ===================================================================== */
.newsletter{ background:var(--sand); }
.newsletter .inner{ max-width:560px; margin:0 auto; text-align:center; }
.newsletter form{ display:flex; gap:10px; margin-top:26px; }
.newsletter input{ flex:1; padding:15px 18px; border:1px solid var(--line); background:#fff;
  font-family:var(--sans); font-size:.92rem; border-radius:var(--radius); outline:none; }
.newsletter input:focus{ border-color:var(--gold); }
.form-msg{ margin-top:14px; font-size:.85rem; letter-spacing:.04em; min-height:20px; }
.form-msg.ok{ color:var(--success); }
.form-msg.err{ color:var(--danger); }

/* trust / marquee strip */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.trust-item h4{ font-family:var(--sans); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  margin:10px 0 4px; }
.trust-item p{ font-size:.82rem; color:var(--muted); margin:0; }
.trust-item .ico{ font-size:1.4rem; color:var(--gold-dark); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ background:var(--ink); color:#cfc6b6; padding:72px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.site-footer h4{ font-family:var(--sans); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; margin-bottom:20px; font-weight:400; }
.site-footer .brand-mark{ height:52px; }
.site-footer .brand-words{ color:#fff; font-size:1.2rem; }
.site-footer .brand-words em{ color:var(--gold-bright); }
.site-footer .brand-words small{ color:#9a917f; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer ul li{ margin-bottom:11px; }
.site-footer a{ color:#cfc6b6; font-size:.9rem; }
.site-footer a:hover{ color:var(--gold); }
.footer-about p{ font-size:.92rem; line-height:1.7; max-width:320px; }
.footer-social{ display:flex; gap:14px; margin-top:20px; }
.footer-social a{ width:38px; height:38px; border:1px solid #3a3a3a; border-radius:50%;
  display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ border-color:var(--gold); background:var(--gold); color:#fff; }
.footer-bottom{ border-top:1px solid #2c2c2c; margin-top:54px; padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.78rem; color:#8a8275; letter-spacing:.04em; }

/* Registered-company line. Set a step smaller and dimmer than the copyright
   above it so the legal identity is present and findable without pulling
   attention away from the Pocket Psh Psh brand. */
.footer-legal{ margin-top:12px; font-size:.7rem; line-height:1.7;
  color:#6f6759; letter-spacing:.03em; }

/* =====================================================================
   PAGE HEADER (collection / about / contact)
   ===================================================================== */
.page-head{ background:var(--sand); padding:70px 0 60px; text-align:center; }
.page-head .kicker{ margin-bottom:10px; }
.page-head p{ color:var(--ink-soft); max-width:560px; margin:6px auto 0; }
.breadcrumb{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  margin-bottom:14px; }
.breadcrumb a:hover{ color:var(--gold-dark); }

/* =====================================================================
   SHOP TOOLBAR / FILTERS
   ===================================================================== */
.shop-layout{ display:grid; grid-template-columns:230px 1fr; gap:48px; align-items:start; }
.filter-panel h4{ font-family:var(--sans); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  margin:0 0 16px; font-weight:500; }
.filter-list{ list-style:none; padding:0; margin:0 0 36px; }
.filter-list li{ margin-bottom:4px; }
.filter-list a{ display:block; padding:7px 0; font-size:.9rem; color:var(--ink-soft);
  letter-spacing:.03em; border-bottom:1px solid transparent; }
.filter-list a:hover{ color:var(--ink); }
.filter-list a.active{ color:var(--gold-dark); font-weight:400; }

.shop-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;
  padding-bottom:16px; border-bottom:1px solid var(--line); }
.shop-toolbar .count{ font-size:.84rem; color:var(--muted); letter-spacing:.05em; }
.shop-toolbar select{ border:1px solid var(--line); padding:9px 14px; font-family:var(--sans);
  font-size:.84rem; background:#fff; border-radius:3px; cursor:pointer; }

.filter-toggle{ display:none; }

/* =====================================================================
   PRODUCT DETAIL
   ===================================================================== */
.pdp{ display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:start; }
.pdp-gallery .main-img{ background:var(--sand); border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/5; }
.pdp-gallery .main-img img{ width:100%; height:100%; object-fit:cover; }
.pdp-thumbs{ display:flex; gap:12px; margin-top:14px; }
.pdp-thumbs button{ width:78px; height:96px; border:1px solid var(--line); background:var(--sand);
  border-radius:3px; overflow:hidden; cursor:pointer; padding:0; }
.pdp-thumbs button.active{ border-color:var(--gold); }
.pdp-thumbs img{ width:100%; height:100%; object-fit:cover; }

.pdp-info .cat{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  margin-bottom:10px; }
.pdp-info h1{ font-size:clamp(2.2rem,4vw,3rem); margin-bottom:14px; }
.pdp-rating{ color:var(--gold); letter-spacing:2px; margin-bottom:18px; }
.pdp-rating span{ color:var(--muted); font-size:.85rem; letter-spacing:.04em; margin-left:8px; }
.pdp-price{ display:flex; gap:14px; align-items:baseline; margin-bottom:24px; }
.pdp-price .price{ font-size:1.7rem; }
.pdp-price .price-old{ font-size:1.1rem; }
.pdp-desc{ color:var(--ink-soft); margin-bottom:28px; line-height:1.8; }

.notes{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0;
  margin-bottom:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.notes .note h5{ font-family:var(--sans); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-dark); margin:0 0 6px; }
.notes .note p{ margin:0; font-size:.9rem; color:var(--ink-soft); }

.pdp-actions{ display:flex; gap:14px; align-items:stretch; margin-bottom:18px; flex-wrap:wrap; }
.pdp-actions .qty{ margin-top:0; }
.pdp-actions .qty button{ width:44px; height:52px; }
.pdp-actions .qty input{ width:48px; }
.pdp-actions .btn{ flex:1; }

.pdp-meta{ font-size:.86rem; color:var(--muted); letter-spacing:.04em; }
.pdp-meta .in-stock{ color:var(--success); }
.pdp-meta .low-stock{ color:var(--danger); }

.accordion{ margin-top:24px; border-top:1px solid var(--line); }
.accordion details{ border-bottom:1px solid var(--line); }
.accordion summary{ cursor:pointer; padding:18px 0; font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase; list-style:none; display:flex; justify-content:space-between; }
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{ content:"+"; color:var(--gold-dark); font-size:1.2rem; }
.accordion details[open] summary::after{ content:"−"; }
.accordion .acc-body{ padding:0 0 20px; color:var(--ink-soft); font-size:.92rem; }

/* =====================================================================
   CART PAGE
   ===================================================================== */
.cart-table{ width:100%; border-collapse:collapse; }
.cart-table th{ text-align:left; font-family:var(--sans); font-weight:500; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding-bottom:16px;
  border-bottom:1px solid var(--line); }
.cart-table td{ padding:22px 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.cart-prod{ display:flex; gap:18px; align-items:center; }
.cart-prod img{ width:84px; height:104px; object-fit:cover; background:var(--sand); border-radius:3px; }
.cart-prod h4{ font-family:var(--sans); font-weight:400; font-size:1rem; margin:0 0 4px; }
.cart-prod .cat{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cart-summary{ background:var(--sand); border-radius:var(--radius); padding:34px; }
.cart-summary h3{ font-family:var(--sans); font-size:.9rem; letter-spacing:.18em; text-transform:uppercase;
  margin:0 0 24px; }
.cart-summary .row{ display:flex; justify-content:space-between; margin-bottom:14px; font-size:.94rem;
  color:var(--ink-soft); }
.cart-summary .row.total{ border-top:1px solid var(--line); padding-top:18px; margin-top:18px;
  font-size:1.15rem; color:var(--ink); }
.cart-grid{ display:grid; grid-template-columns:1fr 360px; gap:54px; align-items:start; }

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:8px; }
.field input, .field textarea, .field select{ width:100%; padding:14px 16px; border:1px solid var(--line);
  font-family:var(--sans); font-size:.95rem; background:#fff; border-radius:var(--radius); outline:none;
  transition:border-color .25s; }
.field input:focus, .field textarea:focus{ border-color:var(--gold); }
.field textarea{ min-height:150px; resize:vertical; }
.contact-info .ci-item{ display:flex; gap:16px; margin-bottom:26px; }
.contact-info .ci-item .ico{ color:var(--gold-dark); flex-shrink:0; }
.contact-info h4{ font-family:var(--sans); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 4px; }
.contact-info p{ margin:0; color:var(--ink-soft); }

/* =====================================================================
   CONTENT / INFORMATIONAL PAGES (policies, guides, FAQ, support)
   ===================================================================== */
.prose{ max-width:820px; margin:0 auto; }
.prose h2{ font-size:1.7rem; margin:48px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.18rem; font-family:var(--sans); font-weight:500; letter-spacing:.04em;
  margin:30px 0 8px; }
.prose p{ color:var(--ink-soft); margin:0 0 16px; line-height:1.85; }
.prose ul, .prose ol{ color:var(--ink-soft); margin:0 0 18px; padding-left:22px; line-height:1.85; }
.prose li{ margin-bottom:8px; }
.prose a{ color:var(--gold-dark); text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--ink); font-weight:500; }
.prose .lead{ font-family:var(--serif); font-size:1.4rem; line-height:1.6; color:var(--ink);
  font-style:italic; margin-bottom:32px; }
.prose .updated{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  margin-bottom:36px; }
.prose hr{ border:0; border-top:1px solid var(--line); margin:40px 0; }
.callout{ background:var(--ivory); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--radius); padding:22px 26px; margin:26px 0; }
.callout p:last-child{ margin-bottom:0; }

/* info / feature cards grid (shipping, returns, guide, support) */
.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.info-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.info-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.info-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; box-shadow:var(--shadow-sm); }
.info-card .ico{ font-size:1.8rem; color:var(--gold-dark); margin-bottom:14px; }
.info-card h3{ font-size:1.15rem; margin-bottom:8px; }
.info-card p{ color:var(--ink-soft); font-size:.93rem; margin:0; line-height:1.7; }
.info-card .meta{ display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-dark); margin-top:14px; }

/* fragrance guide families */
.family-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.family-card{ display:flex; gap:18px; padding:26px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--white); }
.family-card .swatch{ width:54px; height:54px; border-radius:50%; flex-shrink:0; }
.family-card h3{ font-size:1.2rem; margin:0 0 6px; }
.family-card p{ color:var(--ink-soft); font-size:.92rem; margin:0; }

/* concentration table */
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table th, .spec-table td{ text-align:left; padding:16px 14px; border-bottom:1px solid var(--line);
  font-size:.94rem; }
.spec-table th{ font-family:var(--sans); font-weight:500; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }
.spec-table td:first-child{ font-weight:500; color:var(--ink); }

/* numbered steps */
.steps{ counter-reset:step; max-width:760px; margin:0 auto; }
.step{ display:flex; gap:22px; padding:24px 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:0; }
.step .num{ counter-increment:step; flex-shrink:0; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--gold); color:var(--gold-dark); display:flex; align-items:center;
  justify-content:center; font-family:var(--serif); font-size:1.3rem; }
.step .num::before{ content:counter(step); }
.step h3{ margin:0 0 6px; font-size:1.1rem; }
.step p{ margin:0; color:var(--ink-soft); }

@media (max-width:860px){
  .info-grid, .info-grid.cols-2, .info-grid.cols-4{ grid-template-columns:1fr 1fr; }
  .family-grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .info-grid, .info-grid.cols-2, .info-grid.cols-4{ grid-template-columns:1fr; }
  .prose .lead{ font-size:1.2rem; }
}

/* floating whatsapp */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:70; width:56px; height:56px;
  background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4); transition:transform .25s; }
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; fill:#fff; }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120px);
  background:var(--ink); color:#fff; padding:14px 26px; border-radius:var(--radius); z-index:120;
  font-size:.82rem; letter-spacing:.08em; transition:transform .4s var(--ease); box-shadow:var(--shadow-md); }
.toast.show{ transform:translateX(-50%) translateY(0); }

/* utility */
.empty-state{ text-align:center; padding:80px 20px; }
.empty-state h3{ margin-bottom:10px; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .product-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .split{ gap:40px; }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .hamburger{ display:inline-flex; }
  .shop-layout{ grid-template-columns:1fr; }
  .filter-panel{ display:none; }
  .filter-panel.open{ display:block; margin-bottom:24px; }
  .filter-toggle{ display:inline-flex; }
  .pdp{ grid-template-columns:1fr; gap:36px; }
  .cart-grid{ grid-template-columns:1fr; gap:34px; }
  .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .split, .split.reverse{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .cat-grid, .testi-grid{ grid-template-columns:1fr 1fr; }
  .trust-grid{ grid-template-columns:1fr 1fr; gap:30px; }
}
@media (max-width:600px){
  .section{ padding:56px 0; }
  .product-grid, .grid-3{ grid-template-columns:repeat(2,1fr); gap:24px 16px; }
  .cat-grid, .testi-grid{ grid-template-columns:1fr; }
  .newsletter form{ flex-direction:column; }
  .hero{ min-height:78vh; }
  .hero .btn{ margin-bottom:10px; }
  .cart-table thead{ display:none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{ display:block; width:100%; }
  .cart-table tr{ border-bottom:1px solid var(--line); padding:14px 0; }
  .cart-table td{ border:0; padding:6px 0; }
  .pdp-actions{ flex-direction:column; }
  .pdp-actions .qty{ justify-content:center; }
  .container{ padding:0 18px; }
}

/* =====================================================================
   POCKET PSH PSH — brand additions
   ===================================================================== */

/* Footer contact block */
.footer-contact{ list-style:none; padding:0; margin:22px 0 0; }
.footer-contact li{ display:flex; align-items:center; gap:11px; margin-bottom:10px; font-size:.9rem; }
.footer-contact svg{ width:17px; height:17px; flex:none; color:var(--gold-bright); }
.footer-contact a{ font-size:.9rem; }

/* Green accent variants of the shared button */
.btn-green{ background:var(--green); border-color:var(--green); color:#fff; }
.btn-green:hover{ background:var(--green-dark); border-color:var(--green-dark); color:#fff; }

/* "Inspired by" line on cards and the product page */
.inspired{
  display:inline-block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-weight:400;
}
.inspired b{ color:var(--gold-dark); font-weight:500; }

/* Scent facts table on the product page */
.scent-facts{ list-style:none; padding:0; margin:26px 0 0; border-top:1px solid var(--line); }
.scent-facts li{
  display:grid; grid-template-columns:130px 1fr; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:.92rem;
}
.scent-facts dt, .scent-facts .k{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding-top:3px;
}
.scent-facts .v{ color:var(--ink-soft); }

/* How-to-use steps */
.how-to{ background:var(--ivory); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px; margin-top:30px; }
.how-to h4{ font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green-dark); margin:0 0 14px; font-weight:500; }
.how-to p{ margin:0; white-space:pre-line; font-size:.94rem; color:var(--ink-soft); line-height:1.9; }

@media (max-width:600px){
  .brand-mark{ height:36px; }
  .brand-words{ font-size:1.02rem; letter-spacing:.14em; }
  .brand-words small{ font-size:.44rem; letter-spacing:.2em; }
  .announce{ font-size:.6rem; letter-spacing:.12em; padding:8px 12px; }
  .scent-facts li{ grid-template-columns:1fr; gap:4px; }
}

/* Branded hero (no lifestyle photography supplied yet — the mark carries it) */
.hero-brand{
  background:
    radial-gradient(ellipse at 22% 30%, rgba(195,154,43,.30), transparent 58%),
    linear-gradient(140deg, #0f4a29 0%, #10361f 46%, #12130e 100%);
  color:#f4efe2; text-align:center; justify-content:center;
}
.hero-brand .hero-inner{ max-width:720px; margin:0 auto; }
.hero-brand .hero-logo{ height:132px; width:auto; margin:0 auto 26px; }
.hero-brand h1{ color:#fff; margin-bottom:20px; }
.hero-brand p{ color:#ded5c2; margin:0 auto 34px; max-width:520px; }
.hero-brand .kicker{ color:var(--gold-bright); }
.btn-on-dark{ color:#fff; border-color:rgba(255,255,255,.55); }
.btn-on-dark:hover{ background:#fff; color:var(--green-dark); border-color:#fff; }

@media (max-width:600px){
  .hero-brand .hero-logo{ height:92px; margin-bottom:18px; }
  .hero-brand .btn{ margin-right:0; }
}

/* Numbered goal list (About) */
.goal-list{ list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px 40px; }
.goal-list li{ display:flex; gap:20px; align-items:flex-start; padding:22px 0;
  border-bottom:1px solid var(--line); }
.goal-list .n{ flex:none; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--green); color:#fff; font-family:var(--serif); font-size:1.15rem; }
.goal-list h4{ font-family:var(--sans); font-size:.86rem; letter-spacing:.14em;
  text-transform:uppercase; margin:6px 0 6px; font-weight:500; }
.goal-list p{ margin:0; font-size:.94rem; color:var(--ink-soft); }

/* Packshots are photographed on white — contain, never crop */
.product-card .media{ background:#fff; border:1px solid var(--line); }
.product-card .media img{ object-fit:contain; padding:6%; }
.card-inspired{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:2px 0 4px; }
.pdp-gallery .main-img{ background:#fff; border:1px solid var(--line); }
.pdp-gallery .main-img img{ object-fit:contain; padding:5%; }
.pdp-thumbs button{ background:#fff; }
.pdp-thumbs img{ object-fit:contain; padding:6%; }
.footer-social-note{ font-size:.86rem; color:#9a917f; margin-top:20px; max-width:320px; }
.footer-social-note strong{ color:var(--gold-bright); font-weight:500; }

/* =====================================================================
   DECORATION LAYER
   Backgrounds are procedurally generated brand textures (assets/img/bg),
   ornaments are hand-drawn SVG (assets/img/deco). Nothing here is stock
   photography, so there is no licence attached to any of it.
   ===================================================================== */

/* ---- photographic hero ---- */
.hero-brand{
  background:
    linear-gradient(180deg, rgba(10,14,10,.18), rgba(10,14,10,.42)),
    url("../img/bg/hero-shot.webp") center/cover no-repeat,
    linear-gradient(140deg,#0f4a29,#12130e);
}
.hero-brand::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../img/deco/grain.svg"); opacity:.12; mix-blend-mode:overlay;
}
.hero-brand .hero-inner{ position:relative; z-index:2; }
.hero-brand .hero-logo{ filter:drop-shadow(0 12px 32px rgba(0,0,0,.55)); }

/* NOTE: the drawn sprigs that used to flank the hero were removed once the
   photographic hero landed — it already carries eucalyptus and rosemary at
   both edges, and two sets of foliage fought each other. */


/* ---- section grounds ---- */
.bg-champagne{ background:url("../img/bg/band-champagne-shot.webp") center/cover no-repeat; }
.bg-blush    { background:url("../img/bg/band-blush-shot.webp")     center/cover no-repeat; }
.bg-forest   { background:url("../img/bg/band-forest-shot.webp")    center/cover no-repeat; color:#efe7d5; }
.bg-noir     { background:url("../img/bg/band-noir-shot.webp")      center/cover no-repeat; color:#efe7d5; }
.bg-paper    { background:url("../img/bg/paper-cream.webp")    center/cover no-repeat; }

.bg-forest h2, .bg-noir h2, .bg-forest h3, .bg-noir h3{ color:#fff; }
.bg-forest p, .bg-noir p{ color:#cfc4ad; }
.bg-forest .kicker, .bg-noir .kicker{ color:var(--gold-bright); }

/* the feature band already had its own dark treatment — give it the texture */
.feature-band{ background:url("../img/bg/band-noir-shot.webp") center/cover no-repeat, var(--ink); }

/* ---- lattice / botanical pattern overlays ---- */
.pattern-lattice{ position:relative; }
.pattern-lattice::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../img/deco/pattern-lattice.svg") repeat; opacity:.5;
}
.pattern-lattice > *{ position:relative; z-index:1; }

.pattern-botanic{ position:relative; }
.pattern-botanic::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../img/deco/pattern-botanic.svg") repeat; opacity:.6;
}
.pattern-botanic > *{ position:relative; z-index:1; }

/* ---- art-deco rule under a section heading ---- */
.section-head .deco-rule,
.page-head .deco-rule{
  display:block; width:240px; height:18px; margin:16px auto 0;
  background:url("../img/deco/divider-deco.svg") center/contain no-repeat;
}
.bg-forest .deco-rule, .bg-noir .deco-rule, .feature-band .deco-rule{ filter:brightness(1.5); }

/* ---- "psh psh" spray flourish ---- */
.spray-mark{
  display:block; width:120px; height:70px; margin:0 auto 10px;
  background:url("../img/deco/spray.svg") center/contain no-repeat;
}

/* ---- scent scene strip ---- */
.scene-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.scene-card{ position:relative; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:3/4; display:flex; align-items:flex-end; }
.scene-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease); }
.scene-card:hover img{ transform:scale(1.07); }
.scene-card .cap{ position:relative; z-index:2; width:100%; padding:26px; color:#fff;
  background:linear-gradient(transparent, rgba(14,16,12,.78)); }
.scene-card .cap h3{ color:#fff; margin:0 0 4px; font-size:1.35rem; }
.scene-card .cap span{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-bright); }
@media (max-width:860px){ .scene-grid{ grid-template-columns:1fr; } }

/* ---- page-head gets the champagne ground + a sprig ---- */
.page-head{
  position:relative; overflow:hidden;
  background:url("../img/bg/band-champagne-shot.webp") center/cover no-repeat, var(--sand);
}
.page-head::before{
  content:""; position:absolute; right:-40px; bottom:-60px; width:230px; height:380px;
  background:url("../img/deco/sprig.svg") center/contain no-repeat;
  opacity:.22; pointer-events:none; transform:scaleX(-1);
}
.page-head > *{ position:relative; z-index:1; }
@media (max-width:860px){ .page-head::before{ display:none; } }

/* ---- newsletter band ---- */
.newsletter{
  position:relative;
  background:url("../img/bg/band-forest-shot.webp") center/cover no-repeat, var(--green-dark);
  color:#efe7d5;
}
.newsletter h2{ color:#fff; }
.newsletter .muted{ color:#c8bda6; }
.newsletter .kicker{ color:var(--gold-bright); }

/* on the dark scene band the trust icons and forest-band numerals need lifting */
.bg-forest .trust-item .ico, .bg-noir .trust-item .ico{ color:var(--gold-bright); }
.bg-forest .trust-item h4, .bg-noir .trust-item h4{ color:#fff; }
.bg-forest .trust-item p,  .bg-noir .trust-item p { color:#bdb2a0; }
.bg-paper.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* =====================================================================
   RESPONSIVE PASS
   Breakpoint ladder: 1024 · 860 · 700 · 560 · 400
   Written after auditing every grid, flex row and table on the site.
   ===================================================================== */

/* ---- global guards ---------------------------------------------------
   Nothing may push the page sideways. If a single wide child escapes, the
   whole page gets a horizontal scrollbar and every section looks broken,
   so the guard sits at the root rather than being chased per-component. */
/* overflow-x:hidden here would make html a scroll container, which silently
   breaks position:sticky on the header. overflow-x:clip contains the same
   overflow WITHOUT creating one, so the sticky nav survives. The hidden
   fallback is only for engines without clip, where sticky is the lesser loss
   than a sideways-scrolling page. */
html{ max-width:100%; overflow-x:clip; }
body{ max-width:100%; }
@supports not (overflow-x:clip){
  html, body{ overflow-x:hidden; }
}
img{ height:auto; }                 /* keep aspect when width is constrained */
*, *::before, *::after{ min-width:0; }   /* let grid/flex children actually shrink */

/* Wide content that genuinely cannot shrink scrolls inside its own box. */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-scroll table{ min-width:520px; }

/* ---- 1024: tablets landscape ---------------------------------------- */
@media (max-width:1024px){
  .split{ gap:44px; }
  .pdp{ gap:40px; }
  .cart-grid{ grid-template-columns:1fr 320px; gap:38px; }
}

/* ---- 860: tablets portrait ------------------------------------------ */
@media (max-width:860px){
  /* Three product columns at this width leaves each card too narrow to
     read the name and price comfortably. Two is the honest maximum. */
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:30px 20px; }

  .shop-toolbar{ flex-wrap:wrap; gap:12px; }
  .pdp-thumbs{ overflow-x:auto; padding-bottom:4px; }
  .pdp-thumbs button{ flex:0 0 auto; }

  /* Full-width tiles at 3:4 become very tall columns. Squarer reads better. */
  .cat-tile, .scene-card{ aspect-ratio:4/3; }
  .split-media{ aspect-ratio:4/3; }

  .section{ padding:64px 0; }
  .site-footer{ padding:56px 0 24px; }
}

/* ---- 700: large phones ---------------------------------------------- */
@media (max-width:700px){
  /* Top / heart / base side by side is unreadable at this width. */
  .notes{ grid-template-columns:1fr; gap:14px; }
  .trust-grid{ gap:26px 18px; }
  .prose .lead{ font-size:1.2rem; }
  .prose h2{ font-size:1.45rem; margin:36px 0 12px; }
}

/* ---- 560: phones ----------------------------------------------------- */
@media (max-width:560px){
  /* Two footer columns at this width gives each about 150px — too narrow
     for the link lists and the brand paragraph. */
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .footer-about p, .footer-social-note{ max-width:none; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }

  .cat-tile, .scene-card{ aspect-ratio:3/2; }
  .cart-prod img{ width:64px; height:80px; }
  .cart-summary{ padding:26px 22px; }
  .info-card{ padding:26px 22px; }
  .callout{ padding:18px 20px; }
  .how-to{ padding:22px 20px; }
  .step{ gap:16px; }
  .step .num{ width:38px; height:38px; font-size:1.1rem; }

  /* Touch targets: 30px steppers are below the comfortable minimum. */
  .qty button{ width:44px; height:44px; }
  .qty input{ width:46px; font-size:1rem; }
  .btn{ padding:15px 26px; }
  .btn-sm{ padding:13px 20px; }
  .accordion summary{ padding:16px 0; }
}

/* ---- 400: small phones ---------------------------------------------- */
@media (max-width:400px){
  .container{ padding:0 14px; }
  .product-grid{ gap:22px 12px; }
  .product-card .media img{ padding:4%; }
  .trust-grid{ grid-template-columns:1fr; gap:22px; }
  .deco-rule{ width:100%; max-width:240px; }
  .section{ padding:48px 0; }
  .hero-brand h1{ font-size:1.9rem; }
  .pdp-actions .btn{ flex:1 1 100%; }
}

/* ---- viewport height: mobile browser chrome -------------------------
   88vh is measured against the largest viewport, so on phones the hero
   is taller than the visible area and the buttons sit below the fold.
   dvh tracks the actual visible height; vh stays as the fallback. */
.hero{ min-height:88vh; }
@supports (height:100dvh){
  .hero{ min-height:88dvh; }
  @media (max-width:860px){ .hero{ min-height:78dvh; } }
}
@media (max-width:860px){ .hero{ min-height:78vh; } }

/* ---- landscape phones: don't let the hero eat the screen ------------ */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding:70px 0; }
  .hero-brand .hero-logo{ height:70px; margin-bottom:14px; }
}

/* ---- respect reduced motion ----------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ---- stacked cart rows -----------------------------------------------
   Below 560 the cart table becomes a stack of blocks and the <thead> is
   hidden, so each cell has to carry its own label or the user is left
   reading two unexplained amounts. The markup already provides data-label. */
@media (max-width:600px){
  .cart-table td[data-label]{
    display:flex; justify-content:space-between; align-items:center; gap:16px;
    padding:10px 0; text-align:left !important;
  }
  .cart-table td[data-label]::before{
    content:attr(data-label);
    font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); flex:none;
  }
  .cart-table tr{ padding:18px 0; }
  .cart-prod{ gap:14px; }
  .cart-prod h4{ font-size:.95rem; }
}

/* =====================================================================
   INTERACTION & MOTION
   ---------------------------------------------------------------------
   Principles applied here:
   - Motion is opt-in per element, not global. Most of the page never moves.
   - Only transform and opacity are animated (compositor-only, no layout).
   - Nothing animates horizontally, so no animation can create overflow.
   - No element reserves space it does not already occupy: no layout shift.
   - Reveal states are gated behind .has-js, set by an inline script in head.
     With JS off, or if the observer never fires, everything is simply visible.
   - The prefers-reduced-motion block disables the lot; the rules at the end
     make sure content is still SHOWN rather than left invisible.
   ===================================================================== */

/* ---- scroll reveal --------------------------------------------------- */
/* NOTE: reveal uses the INDEPENDENT translate/scale properties, not the
   transform shorthand. Product cards, category tiles and scene cards all
   lift on hover using transform, and a shared shorthand would mean the two
   overwrite each other — hovering a half-revealed card would snap it into
   place. As separate properties they compose instead of fighting.
   Browsers without translate/scale simply fade in without moving. */
.has-js [data-reveal]{
  opacity:0;
  translate:0 22px;
  transition:opacity .7s var(--ease), translate .7s var(--ease), scale .7s var(--ease);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, translate;
}
.has-js [data-reveal="fade"] { translate:none; }
.has-js [data-reveal="left"] { translate:-26px 0; }
.has-js [data-reveal="right"]{ translate:26px 0; }
.has-js [data-reveal="scale"]{ translate:none; scale:.965; }

.has-js [data-reveal].is-in{ opacity:1; translate:none; scale:1; }
/* once it has played, stop promoting the layer */
.has-js [data-reveal].is-done{ will-change:auto; transition-delay:0ms; }

/* Belt and braces: if the observer never runs, show everything. */
.has-js.reveal-failsafe [data-reveal]{ opacity:1 !important; translate:none !important; scale:1 !important; }

/* ---- hero entrance --------------------------------------------------- */
.has-js .hero-brand .hero-inner > *{
  opacity:0; transform:translate3d(0,18px,0);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.has-js .hero-brand.hero-in .hero-inner > *{ opacity:1; transform:none; }
.has-js .hero-brand.hero-in .hero-inner > *:nth-child(1){ transition-delay:.05s; }
.has-js .hero-brand.hero-in .hero-inner > *:nth-child(2){ transition-delay:.18s; }
.has-js .hero-brand.hero-in .hero-inner > *:nth-child(3){ transition-delay:.28s; }
.has-js .hero-brand.hero-in .hero-inner > *:nth-child(4){ transition-delay:.38s; }
.has-js .hero-brand.hero-in .hero-inner > *:nth-child(5){ transition-delay:.46s; }
.has-js .hero-brand.hero-in .hero-inner > *:nth-child(6){ transition-delay:.52s; }
.hero-brand .hero-logo{ transition:transform .9s var(--ease); }
.has-js .hero-brand:not(.hero-in) .hero-logo{ transform:scale(.9); }

/* Hero content drifts and fades slightly as you scroll past: depth, not
   parallax theatre. Driven by --hero-shift / --hero-fade, set in JS, desktop
   only, and skipped entirely under reduced motion. */
.hero-brand .hero-inner{
  transform:translate3d(0, var(--hero-shift, 0px), 0);
  opacity:var(--hero-fade, 1);
}

/* ---- product cards --------------------------------------------------- */
.product-card{ transition:transform .45s var(--ease); }
.product-card .media{ transition:box-shadow .45s var(--ease), border-color .45s var(--ease); }
.product-card:hover{ transform:translateY(-6px); }
.product-card:hover .media{ box-shadow:var(--shadow-md); border-color:var(--gold); }
.product-card .media img{ transition:transform .9s var(--ease), opacity .5s var(--ease); }
.product-card:hover .media img.main{ transform:scale(1.05); }
.product-card.has-promo:hover .media img.alt{ transform:scale(1.05); }
.product-card h3 a{
  background-image:linear-gradient(var(--gold-dark),var(--gold-dark));
  background-size:0% 1px; background-repeat:no-repeat; background-position:50% 100%;
  transition:background-size .4s var(--ease); padding-bottom:2px;
}
.product-card:hover h3 a{ background-size:100% 1px; }
.product-card .price{ transition:color .35s var(--ease); }
.product-card:hover .price{ color:var(--gold-dark); }

/* ---- category tiles and scene cards ---------------------------------- */
.cat-tile, .scene-card{ transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.cat-tile:hover, .scene-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.cat-tile .label, .scene-card .cap{ transition:padding-bottom .45s var(--ease); }
.cat-tile:hover .label, .scene-card:hover .cap{ padding-bottom:32px; }
.cat-tile .label h3, .scene-card .cap h3{ transition:transform .45s var(--ease); }
.cat-tile:hover .label h3, .scene-card:hover .cap h3{ transform:translateY(-2px); }

/* ---- buttons: hover lift plus real press feedback -------------------- */
.btn{
  position:relative;
  transition:background-color .3s var(--ease), border-color .3s var(--ease),
             color .3s var(--ease), transform .18s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(26,26,26,.16); }
.btn:active{ transform:translateY(0) scale(.985); box-shadow:none; transition-duration:.08s; }
.icon-btn{ transition:transform .25s var(--ease), color .25s var(--ease); }
.icon-btn:hover{ transform:scale(1.1); color:var(--gold-dark); }
.icon-btn:active{ transform:scale(.94); }

/* Keyboard focus must stay obvious. The hover work above must never hide it. */
.btn:focus-visible, .icon-btn:focus-visible, .nav-links a:focus-visible,
.cat-tile:focus-visible, .scene-card:focus-visible, .product-card a:focus-visible{
  outline:2px solid var(--gold-dark); outline-offset:3px; border-radius:2px;
}

/* ---- navigation underline -------------------------------------------- */
.nav-links a{ transition:color .28s var(--ease); }
.nav-links a::after{ transition:width .35s var(--ease); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a:hover{ color:var(--ink); }

/* ---- quantity stepper and add-to-cart micro-interactions ------------- */
.qty button{ transition:background-color .2s var(--ease), transform .15s var(--ease); }
.qty button:hover{ background:var(--sand); }
.qty button:active{ transform:scale(.88); }

/* the button briefly confirms it worked, then returns */
.btn.is-added{ background:var(--green) !important; border-color:var(--green) !important; color:#fff !important; }
.cart-count{ transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.cart-count.bump{ transform:scale(1.45); }

/* ---- accordion -------------------------------------------------------- */
.accordion summary{ transition:color .25s var(--ease); }
.accordion summary:hover{ color:var(--gold-dark); }
.accordion summary::after{ transition:transform .3s var(--ease); display:inline-block; }
.accordion details[open] summary::after{ transform:rotate(180deg); }
.accordion .acc-body{ overflow:hidden; }
.accordion details[open] .acc-body{ animation:accOpen .34s var(--ease) both; }
@keyframes accOpen{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ---- product gallery -------------------------------------------------- */
.pdp-gallery .main-img img{ transition:opacity .32s var(--ease), transform .8s var(--ease); }
.pdp-gallery .main-img img.swapping{ opacity:0; }
.pdp-gallery .main-img:hover img{ transform:scale(1.04); }
.pdp-thumbs button{ transition:border-color .3s var(--ease), transform .25s var(--ease); }
.pdp-thumbs button:hover{ transform:translateY(-3px); }

/* ---- drawers and overlays: smoother easing, staggered contents -------- */
.cart-panel{ transition:transform .48s cubic-bezier(.32,.72,0,1); }
.cart-overlay{ transition:opacity .4s var(--ease); }
.search-wrap{ transition:transform .45s cubic-bezier(.32,.72,0,1); }
.mobile-nav-panel{ transition:transform .42s cubic-bezier(.32,.72,0,1); }
.mobile-nav{ transition:opacity .32s var(--ease), visibility .32s; }

.mobile-nav-panel a{
  opacity:0; transform:translateX(-14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.mobile-nav.open .mobile-nav-panel a{ opacity:1; transform:none; }
.mobile-nav.open .mobile-nav-panel a:nth-child(2){ transition-delay:.06s; }
.mobile-nav.open .mobile-nav-panel a:nth-child(3){ transition-delay:.09s; }
.mobile-nav.open .mobile-nav-panel a:nth-child(4){ transition-delay:.12s; }
.mobile-nav.open .mobile-nav-panel a:nth-child(5){ transition-delay:.15s; }
.mobile-nav.open .mobile-nav-panel a:nth-child(6){ transition-delay:.18s; }
.mobile-nav.open .mobile-nav-panel a:nth-child(7){ transition-delay:.21s; }
.mobile-nav.open .mobile-nav-panel a:nth-child(8){ transition-delay:.24s; }
.mobile-nav.open .mobile-nav-panel a:nth-child(9){ transition-delay:.27s; }
.mobile-nav.open .mobile-nav-panel a:nth-child(10){ transition-delay:.30s; }
.mobile-nav.open .mobile-nav-panel a:nth-child(11){ transition-delay:.33s; }
.mobile-nav.open .mobile-nav-panel a:nth-child(12){ transition-delay:.36s; }

/* ---- header: lifts off the page once you scroll ---------------------
   The header is position:sticky, so it still occupies flow space. Shrinking
   it on scroll was tried and REMOVED: reducing its height pulls every
   section below it upward by the same amount, which is a real layout shift
   at the exact moment the threshold is crossed. Shadow and opacity change
   nothing about layout, so the header still reacts to scroll for free. */
.site-header{ transition:box-shadow .35s var(--ease), background-color .35s var(--ease); }
.site-header.scrolled{ box-shadow:0 6px 26px rgba(26,26,26,.08); background:rgba(251,249,245,.97); }

/* ---- misc polish ------------------------------------------------------ */
.info-card, .family-card, .testi-card{ transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.info-card:hover, .family-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.footer-social a, .footer-contact a{
  transition:color .28s var(--ease), border-color .28s var(--ease),
             background-color .28s var(--ease), transform .28s var(--ease);
}
.footer-social a:hover{ transform:translateY(-2px); }
.wa-float{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.wa-float:hover{ transform:scale(1.08); }
.filter-list a{ transition:color .25s var(--ease), padding-left .25s var(--ease); }
.filter-list a:hover{ padding-left:5px; color:var(--gold-dark); }

/* On touch screens a :hover lift sticks after a tap. Only arm the movement
   where a real pointer exists. Colour transitions are harmless either way. */
@media (hover:none){
  .product-card:hover, .cat-tile:hover, .scene-card:hover,
  .info-card:hover, .family-card:hover, .btn:hover, .wa-float:hover,
  .footer-social a:hover, .pdp-thumbs button:hover{ transform:none; box-shadow:none; }
  .product-card:hover .media img.main, .product-card:hover .media img.alt,
  .pdp-gallery .main-img:hover img{ transform:none; }
  .cat-tile:hover .label, .scene-card:hover .cap{ padding-bottom:26px; }
}

/* Reduced motion: no movement, but nothing may stay hidden. The global
   reduced-motion block kills durations; these restore the visible end state. */
@media (prefers-reduced-motion:reduce){
  .has-js [data-reveal]{ opacity:1 !important; translate:none !important; scale:1 !important; }
  .has-js .hero-brand .hero-inner > *{ opacity:1 !important; transform:none !important; }
  .hero-brand .hero-inner{ transform:none !important; opacity:1 !important; }
  .accordion details[open] .acc-body{ animation:none; }
}

/* ---------------------------------------------------------------
   Review-environment banner (client preview deployments only).
   Rendered by includes/header.php when POCKET_REVIEW_NOTICE is
   defined, so it never appears on the local build or a real launch.
   Sits above .announce and scrolls away with it, leaving the sticky
   header behaviour untouched.
   --------------------------------------------------------------- */
.review-banner{
  background:#7a5b12;
  color:#fdf6e6;
  font-family:'Jost',Arial,sans-serif;
  font-size:.78rem;
  line-height:1.6;
  letter-spacing:.04em;
  text-align:center;
  padding:10px 16px;
}
.review-banner strong{ font-weight:600; color:#fff; }
@media(max-width:600px){
  .review-banner{ font-size:.72rem; padding:9px 12px; }
}

/* ---------------------------------------------------------------
   Upcoming range (a confirmed category with no products supplied yet).
   Deliberately understated: it should read as "being prepared", not
   as a broken or empty page, and must not look like a promotion.
   --------------------------------------------------------------- */
.soon-tag{
  display:inline-block; margin-left:8px; padding:1px 7px;
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-dark); border:1px solid #e3d7bd; border-radius:3px;
  background:#faf5ea; vertical-align:middle;
}
.upcoming-state .kicker{ display:block; margin-bottom:10px; }
.upcoming-state h3{ margin-bottom:12px; }
.upcoming-state p{ max-width:520px; margin-left:auto; margin-right:auto; }