/* =========================================================================
   Alpine Paw Naturals — B2C Shop Design System
   Extends the brand's existing visual identity (alpinepaw.de) with
   e-commerce components. Same tokens, typography and card language —
   the cinematic scroll-jacking hero/frame-sequence from the B2B site is
   intentionally NOT reused here: a shop needs fast paint, scannability
   and low JS weight (see brief §22/§29), not scroll-scrubbed animation.
   ========================================================================= */

:root{
  /* ---- brand tokens, taken 1:1 from alpinepaw.de/css/style.css ---- */
  --bg: #faf5ea;
  --bg-alt: #f2e8d6;
  --stone: #ffffff;
  --stone-2: #fbf4e6;
  --ink: #3a2414;
  --ink-dim: #86735e;
  --brown: #4a2c17;
  --brown-2: #6b3d1f;
  --gold: #e8730d;
  --gold-2: #f5a531;
  --gold-soft: #d9822f;
  --green: #729a3a;
  --green-deep: #5f7a2e;
  --line: rgba(74,44,23,0.14);
  --shadow-soft: 0 8px 24px rgba(74,44,23,0.10);
  --shadow-strong: 0 24px 60px rgba(74,44,23,0.16);
  --ease: cubic-bezier(.16,.84,.44,1);
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* semantic */
  --success: #5f7a2e;
  --error: #b3401f;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{background:var(--bg); scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-weight:400; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; width:100%;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none;}
input, select, textarea{font-family:inherit; font-size:inherit;}
::selection{background:var(--gold-soft); color:#fff;}

/* focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 8px 0; z-index:2000;
}
.skip-link:focus{left:0; top:0;}

.container{max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,56px);}
.container--narrow{max-width:920px;}

/* ===================== Typography helpers ===================== */
.eyebrow{
  font-size:12px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--gold-soft); font-weight:600;
}
.tag{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--green); margin-bottom:16px; font-weight:600;
}
.tag::before{
  content:""; display:inline-block; width:26px; height:10px; flex:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12'%3E%3Cpath d='M2 9 Q16 -3 30 5' stroke='%23729a3a' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain; background-position:center;
}
.h1, h1{
  font-family:var(--serif); font-weight:600; line-height:1.02; color:var(--ink);
  font-size:clamp(38px, 6vw, 72px);
}
.h2, h2{
  font-family:var(--serif); font-weight:500; line-height:1.06; color:var(--ink);
  font-size:clamp(30px, 4.2vw, 48px);
}
.h3, h3{
  font-family:var(--serif); font-weight:500; line-height:1.15; color:var(--ink);
  font-size:clamp(20px, 2.4vw, 26px);
}
.lead{
  font-size:clamp(16px,1.4vw,18px); line-height:1.7; color:var(--ink-dim); font-weight:400;
  max-width:560px;
}
.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.section-head .lead{margin:0 auto;}
.section-head--left{text-align:left; margin:0 0 48px;}
.section-head--left .lead{margin:0;}

section{padding:clamp(64px,9vw,120px) 0;}
.section-alt{background:var(--bg-alt);}
.section-white{background:var(--stone);}

/* ===================== Buttons ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  padding:16px 34px; border-radius:999px; transition:transform 0.3s var(--ease), background 0.3s ease, color 0.3s ease, border-color .3s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--ink); color:var(--bg);}
.btn-primary:hover{background:var(--gold-soft); transform:translateY(-2px);}
.btn-secondary{background:transparent; color:var(--ink); border:1.5px solid var(--ink);}
.btn-secondary:hover{background:var(--ink); color:var(--bg); transform:translateY(-2px);}
.btn-outline-light{background:transparent; color:#f6ecdd; border:1.5px solid rgba(246,236,221,0.55);}
.btn-outline-light:hover{background:#f6ecdd; color:var(--ink);}
.btn-sm{padding:11px 22px; font-size:12px;}
.btn-block{width:100%;}
.btn:disabled{opacity:0.45; cursor:not-allowed; transform:none;}
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; transition:background .25s ease;
}
.btn-icon:hover{background:var(--bg-alt);}
.btn-icon svg{width:20px; height:20px; stroke:var(--ink); fill:none;}

/* ===================== Header ===================== */
.site-header{
  position:sticky; top:0; z-index:500;
  background:rgba(250,245,234,0.92); backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.announce-bar{
  background:var(--gold); color:#fff; overflow:hidden; white-space:nowrap; padding:10px 0;
}
.announce-track{
  display:inline-flex; align-items:center; width:max-content;
  animation:announce-scroll 22s linear infinite;
}
.announce-msg{font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:0 12px;}
.announce-dot{color:rgba(255,255,255,0.6); font-size:14px;}
@keyframes announce-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .announce-track{animation:none;}
  .announce-bar{overflow-x:auto;}
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:16px clamp(20px,4vw,56px);
}
.header-logo img{height:46px; width:auto;}
.main-nav{display:flex; gap:clamp(16px,2.6vw,34px);}
/* wp_nav_menu()/its fallback sometimes renders a <ul> wrapper around the <li> items;
   collapsing it with display:contents keeps the <li>s as direct flex children of
   .main-nav (matching this layout's design) while keeping valid, accessible list markup. */
.main-nav > ul{display:contents;}
.main-nav a{
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
  color:var(--brown); position:relative; padding:6px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--green)); transition:width .3s var(--ease);
}
.main-nav a:hover::after, .main-nav a.is-active::after{width:100%;}
.header-actions{display:flex; align-items:center; gap:4px;}
.cart-count{
  position:absolute; top:2px; right:2px; background:var(--gold); color:#fff;
  font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.header-actions .btn-icon{position:relative;}
.b2b-link{
  font-size:11px; color:var(--ink-dim); letter-spacing:0.04em; white-space:nowrap;
  border-left:1px solid var(--line); padding-left:16px; margin-left:8px;
}
.b2b-link:hover{color:var(--gold-soft);}
.mobile-toggle{display:none;}

/* Search flyout */
.search-flyout{
  position:absolute; left:0; right:0; top:100%; background:var(--stone);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow-soft);
  padding:22px clamp(20px,4vw,56px); display:none;
}
.search-flyout.is-open{display:block;}
.search-flyout form{display:flex; gap:12px; max-width:640px; margin:0 auto;}
.search-flyout input{
  flex:1; border:1px solid var(--line); border-radius:999px; padding:13px 22px;
  background:var(--bg); color:var(--ink);
}

@media (max-width:960px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100vh;
    background:var(--stone); flex-direction:column; padding:100px 28px 28px; gap:6px;
    transform:translateX(100%); transition:transform .4s var(--ease); z-index:600;
    box-shadow:-20px 0 50px rgba(0,0,0,0.15);
  }
  .main-nav.is-open{transform:translateX(0);}
  .main-nav a{font-size:15px; padding:14px 0; width:100%; border-bottom:1px solid var(--line);}
  .mobile-toggle{display:flex;}
  .b2b-link{display:none;}
  .nav-scrim{
    position:fixed; inset:0; background:rgba(20,16,11,0.5); z-index:590;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
  }
  .nav-scrim.is-open{opacity:1; pointer-events:auto;}
}

/* ===================== Hero ===================== */
.hero{
  position:relative; min-height:min(92vh, 880px); display:flex; align-items:center;
  overflow:hidden; background:#0e0b08;
}
.hero-media{position:absolute; inset:0;}
.hero-media video, .hero-media img{width:100%; height:100%; object-fit:cover;}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,9,7,0.82) 0%, rgba(11,9,7,0.52) 48%, rgba(11,9,7,0.18) 100%);
}
.hero-content{position:relative; z-index:2; max-width:640px; padding:120px clamp(20px,6vw,90px) 60px;}
.hero-content .eyebrow{color:var(--gold-2);}
.hero-content h1{color:#f6ecdd; margin:18px 0 20px; letter-spacing:0.01em;}
.hero-content h1 em{font-style:italic; color:var(--gold-soft); font-weight:400;}
.hero-content p{color:#e3d5c2; font-size:clamp(16px,1.6vw,19px); line-height:1.7; max-width:480px; margin-bottom:34px; font-weight:300;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.hero-checks{display:flex; gap:20px; flex-wrap:wrap; margin-top:26px; list-style:none; padding:0;}
.hero-checks li{font-size:12.5px; letter-spacing:0.03em; color:#e3d5c2; font-weight:500;}

/* ===================== Category quick-links (below hero) ===================== */
.category-quicklinks-section{background:var(--stone); padding:28px 0;}
.category-quicklinks{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
.category-quicklink{
  border:1.5px solid var(--ink); border-radius:999px; padding:12px 24px;
  font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.category-quicklink:hover{background:var(--ink); color:var(--bg);}
.category-quicklink--all{border-color:var(--gold-soft); color:var(--gold-soft);}
.category-quicklink--all:hover{background:var(--gold-soft); border-color:var(--gold-soft); color:#fff;}

/* ===================== Trust bar ===================== */
.trust-bar{background:var(--stone); border-bottom:1px solid var(--line);}
.trust-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:24px;
  padding:40px clamp(20px,4vw,56px); max-width:1320px; margin:0 auto;
}
.trust-item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;}
.trust-item svg{width:30px; height:30px; stroke:var(--gold-soft); fill:none; stroke-width:1.4;}
.trust-item span{font-size:12px; letter-spacing:0.04em; font-weight:600; color:var(--ink); text-transform:uppercase; line-height:1.4;}
@media (max-width:960px){
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .trust-item:last-child{grid-column:span 2;}
}

/* ===================== Rating stars ===================== */
.stars{display:inline-flex; gap:2px; color:var(--gold);}
.stars svg{width:14px; height:14px; fill:currentColor;}
.stars.stars--muted{color:var(--line);}
.rating-line{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-dim);}

/* ===================== Product card ===================== */
.product-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:26px;
}
.product-card{
  position:relative; background:var(--stone); border:1px solid var(--line);
  border-radius:var(--radius-md); overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s ease;
}
.product-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-strong); border-color:var(--gold-soft);}
.product-card-media{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--bg-alt);}
.product-card-media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.product-card:hover .product-card-media img{transform:scale(1.06);}
.product-badge{
  position:absolute; top:14px; left:14px; background:var(--ink); color:var(--bg);
  font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700;
  padding:6px 12px; border-radius:999px;
}
.product-card-actions{
  position:absolute; top:12px; right:12px; display:flex; flex-direction:column; gap:8px;
  opacity:0; transform:translateX(6px); transition:opacity .3s ease, transform .3s ease;
}
.product-card:hover .product-card-actions{opacity:1; transform:translateX(0);}
.product-card-actions button{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.92);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-soft);
}
.product-card-actions svg{width:17px; height:17px; stroke:var(--ink); fill:none;}
.product-card-actions button.is-active svg{fill:var(--gold); stroke:var(--gold);}
.product-card-body{padding:20px 20px 22px;}
.product-card-body h3{font-size:18px; margin-bottom:6px;}
.product-card-body a{display:block;}
.product-card-desc{font-size:13px; color:var(--ink-dim); line-height:1.55; margin-bottom:10px; min-height:38px;}
.product-card-meta{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.product-weight{font-size:12px; color:var(--ink-dim);}
.product-card-footer{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.price{font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink);}
/* WooCommerce Germanized appends the legally-required price-per-unit
   (Grundpreis, e.g. "3,45 € / 100 g") after the main price once a product's
   unit fields are filled in — style it as a small muted secondary line
   rather than letting it inherit the main price's size. */
.price .gzd-unit-price, .price .unit-price, .woocommerce-Price-amount + .gzd-unit-price{
  display:block; font-family:var(--sans); font-size:11.5px; font-weight:400; color:var(--ink-dim); margin-top:2px;
}
.price-was{font-size:13px; color:var(--ink-dim); text-decoration:line-through; margin-right:6px; font-weight:400;}
.add-to-cart-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ink); color:var(--bg); font-size:12px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; padding:11px 18px; border-radius:999px;
  transition:background .3s ease, transform .3s ease;
}
.add-to-cart-btn:hover{background:var(--gold-soft); transform:translateY(-1px);}
.add-to-cart-btn svg{width:15px; height:15px; stroke:currentColor; fill:none;}

@media (max-width:1180px){ .product-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){
  .product-grid{grid-template-columns:repeat(2,1fr); gap:14px;}
  .product-card-body{padding:14px 14px 16px;}
  .product-card-body h3{font-size:15px;}
  .product-card-desc{font-size:12px; min-height:0; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;}
  .product-card-meta{flex-direction:column; align-items:flex-start; gap:4px;}
  .product-card-footer{flex-direction:column; align-items:stretch; gap:10px;}
  .price{font-size:16px;}
  .add-to-cart-btn{width:100%; justify-content:center; padding:11px 14px;}
}
@media (max-width:400px){
  .product-grid{grid-template-columns:1fr;}
}

/* ===================== Category cards ===================== */
.category-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
.category-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:3/4;
  box-shadow:var(--shadow-soft);
}
.category-card img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);}
.category-card:hover img{transform:scale(1.08);}
.category-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(11,9,7,0.72) 100%);
}
.category-card span{
  position:absolute; left:18px; right:18px; bottom:18px; z-index:2;
  color:#f6ecdd; font-family:var(--serif); font-size:19px; font-weight:500;
}
@media (max-width:960px){ .category-grid{grid-template-columns:repeat(2,1fr);} }

/* ===================== Why Alpine Paw ===================== */
.why-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center;}
.why-media{border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-strong);}
.why-media img{width:100%; height:100%; object-fit:cover;}
.why-list{display:flex; flex-direction:column; gap:22px; margin-top:8px;}
.why-item{display:flex; gap:16px;}
.why-item svg{width:24px; height:24px; stroke:var(--green); fill:none; flex:none; margin-top:2px;}
.why-item h4{font-family:var(--serif); font-size:17px; font-weight:600; margin-bottom:4px;}
.why-item p{font-size:14px; color:var(--ink-dim); line-height:1.6;}
@media (max-width:900px){ .why-grid{grid-template-columns:1fr; gap:36px;} }

/* ===================== Transparency ===================== */
.transparency{background:var(--ink); color:#f0e6d6;}
.transparency .tag{color:#b9d98c;}
.transparency h2{color:#f6ecdd;}
.transparency .lead{color:#cdbba3; margin:0 auto;}
.transparency-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(246,236,221,0.14);
  margin-top:56px; border-radius:var(--radius-md); overflow:hidden;
}
.transparency-item{background:#211609; padding:32px 28px;}
.transparency-item h4{
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-2); margin-bottom:12px; font-weight:700;
}
.transparency-item p{font-size:14px; line-height:1.65; color:#d7c7ae;}
.placeholder-tag{
  display:inline-block; font-size:10.5px; letter-spacing:0.05em; color:#f5a531;
  border:1px dashed rgba(245,165,49,0.5); padding:3px 9px; border-radius:6px; margin-top:8px;
}
@media (max-width:900px){ .transparency-grid{grid-template-columns:1fr;} }

/* ===================== Brand story ===================== */
.story-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center;}
.story-media{border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow-strong);}
.story-media img{width:100%; height:100%; object-fit:cover;}
@media (max-width:900px){ .story-grid{grid-template-columns:1fr; gap:36px;} .story-grid .story-media{order:-1;} }

/* ===================== Reviews ===================== */
.review-summary{display:flex; align-items:center; gap:20px; justify-content:center; margin-bottom:48px; flex-wrap:wrap;}
.review-score{font-family:var(--serif); font-size:44px; font-weight:600;}
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.review-card{background:var(--stone); border:1px solid var(--line); border-radius:var(--radius-md); padding:26px;}
.review-card-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px;}
.review-name{font-weight:700; font-size:14px;}
.review-date{font-size:12px; color:var(--ink-dim);}
.verified-badge{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--success);
  margin-top:6px; font-weight:600;
}
.verified-badge svg{width:12px; height:12px; fill:currentColor;}
.review-text{font-size:14px; line-height:1.6; color:var(--ink-dim); margin-top:10px;}
.demo-banner{
  background:#fdf1de; border:1px dashed var(--gold-soft); color:var(--brown-2);
  font-size:12.5px; text-align:center; padding:12px 20px; border-radius:var(--radius-sm); margin-bottom:32px;
}
@media (max-width:900px){ .review-grid{grid-template-columns:1fr;} }

/* ===================== Newsletter ===================== */
.newsletter{background:var(--bg-alt);}
.newsletter-inner{max-width:560px; margin:0 auto; text-align:center;}
.newsletter-form{display:flex; gap:10px; margin-top:28px; max-width:440px; margin-left:auto; margin-right:auto;}
.newsletter-form input{
  flex:1; border:1px solid var(--line); border-radius:999px; padding:15px 22px; background:var(--stone);
}
.newsletter-gdpr{font-size:11.5px; color:var(--ink-dim); margin-top:14px; line-height:1.6;}

/* ===================== Footer ===================== */
.site-footer{background:#211609; color:#d7c7ae; padding:80px 0 0;}
.footer-top{
  display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:40px;
  padding-bottom:56px; border-bottom:1px solid rgba(246,236,221,0.12);
}
.footer-brand img{height:42px; margin-bottom:16px;}
.footer-brand p{font-size:13px; line-height:1.7; color:#a9967e; max-width:260px;}
.footer-col h5{
  font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:#f5a531;
  margin-bottom:18px; font-weight:700;
}
.footer-col ul{display:flex; flex-direction:column; gap:11px;}
.footer-col a{font-size:13.5px; color:#d7c7ae; transition:color .25s ease;}
.footer-col a:hover{color:var(--gold-2);}
.footer-social{display:flex; gap:12px; margin-top:6px;}
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(246,236,221,0.2);
  display:flex; align-items:center; justify-content:center;
}
.footer-social svg{width:16px; height:16px; stroke:#d7c7ae; fill:none;}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:26px 0; font-size:12px; color:#8d7a63; flex-wrap:wrap;
}
.footer-b2b{
  background:rgba(246,236,221,0.06); border:1px solid rgba(246,236,221,0.14);
  border-radius:999px; padding:8px 18px; font-size:12px; color:#e3d5c2;
}
.footer-b2b:hover{border-color:var(--gold-soft); color:var(--gold-2);}
@media (max-width:1080px){
  .footer-top{grid-template-columns:repeat(2,1fr);}
  .footer-brand{grid-column:1/-1;}
}

/* ===================== Reveal on scroll (lightweight, IO-based only) ===================== */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ===================== Mini-cart dropdown ===================== */
.mini-cart-wrap{position:relative;}
.mini-cart-panel{
  position:absolute; top:calc(100% + 14px); right:0; z-index:800;
  width:min(360px, 92vw); background:var(--stone); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-strong); padding:20px;
}
.mini-cart-panel[hidden]{display:none;}
.mini-cart-items{display:flex; flex-direction:column; gap:14px; max-height:320px; overflow-y:auto; margin-bottom:16px;}
.mini-cart-item{display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center;}
.mini-cart-item-img{width:52px; height:52px; border-radius:8px; overflow:hidden; background:var(--bg-alt); flex:none;}
.mini-cart-item-img img{width:100%; height:100%; object-fit:cover;}
.mini-cart-item-body{display:flex; flex-direction:column; gap:3px; min-width:0;}
.mini-cart-item-body a{font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mini-cart-item-meta{font-size:12px; color:var(--ink-dim);}
.mini-cart-item-remove{font-size:12px; color:var(--ink-dim); flex:none;}
.mini-cart-item-remove:hover{color:#b3401f;}
.mini-cart-footer{border-top:1px solid var(--line); padding-top:16px;}
.mini-cart-subtotal{display:flex; justify-content:space-between; font-size:14px; margin-bottom:14px;}
.mini-cart-subtotal strong{font-family:var(--serif); font-size:17px;}
.mini-cart-empty{text-align:center; padding:20px 4px;}
.mini-cart-empty p{font-size:13.5px; color:var(--ink-dim); margin-bottom:14px;}
@media (max-width:600px){
  .mini-cart-panel{position:fixed; top:auto; bottom:0; left:0; right:0; width:100%; border-radius:16px 16px 0 0; max-height:80vh; overflow-y:auto;}
  .mini-cart-items{max-height:none; overflow:visible;} /* avoid nested scroll containers — the panel itself scrolls */
}

/* ===================== Sticky mobile add-to-cart bar (product page) ===================== */
.mobile-sticky-atc{
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  display:none; align-items:center; gap:12px; padding:12px 16px;
  background:var(--stone); border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(74,44,23,0.12);
}
.mobile-sticky-atc.is-visible{display:flex;}
.mobile-sticky-atc .price{font-size:16px; flex:none;}
.mobile-sticky-atc button{flex:1;}
@media (min-width:768px){ .mobile-sticky-atc{display:none !important;} }

/* ===================== Quick view modal ===================== */
.qv-modal{position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center; padding:24px;}
.qv-modal[hidden]{display:none;}
.qv-backdrop{position:absolute; inset:0; background:rgba(20,16,11,0.6); backdrop-filter:blur(4px);}
.qv-panel{
  position:relative; background:var(--stone); border-radius:var(--radius-lg); overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; max-width:820px; width:100%; max-height:86vh;
  box-shadow:var(--shadow-strong);
}
.qv-media{background:var(--bg-alt);}
.qv-media img{width:100%; height:100%; object-fit:cover; min-height:280px;}
.qv-body{padding:36px; overflow-y:auto;}
.qv-close{
  position:absolute; top:16px; right:16px; z-index:2; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; font-size:16px;
}
@media (max-width:700px){ .qv-panel{grid-template-columns:1fr; max-height:90vh;} .qv-media img{min-height:200px;} }

/* ===================== Simple content / legal pages ===================== */
.page-header{background:var(--bg-alt); padding:56px 0 40px; text-align:center;}
.page-header h1{margin:10px 0 0;}
.prose{max-width:760px; margin:0 auto; padding:56px 0 100px;}
.prose h2{font-size:22px; margin:40px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose p, .prose li{font-size:15px; line-height:1.8; color:var(--ink-dim); margin-bottom:14px;}
.prose li{list-style:disc; margin-left:22px;}
.prose strong{color:var(--ink);}
.legal-placeholder{
  display:block; background:#fbeae3; border:1px dashed #d98861; color:#8a3417;
  padding:2px 8px; border-radius:5px; font-size:0.95em;
}
.legal-note{
  background:var(--bg-alt); border-left:3px solid var(--gold-soft); padding:16px 20px;
  border-radius:0 8px 8px 0; font-size:13.5px; color:var(--ink-dim); margin:24px 0;
}
.contact-form-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:56px 0 100px;}
.contact-info-list{display:flex; flex-direction:column; gap:22px; margin-top:24px;}
.contact-info-item{display:flex; gap:14px;}
.contact-info-item svg{width:20px; height:20px; stroke:var(--green); fill:none; flex:none; margin-top:2px;}
.contact-info-item h4{font-size:14px; margin-bottom:2px;}
.contact-info-item p{font-size:13.5px; color:var(--ink-dim); margin:0;}
.faq-page-item{border-bottom:1px solid var(--line);}
.faq-page-q{width:100%; text-align:left; padding:20px 0; font-weight:600; font-size:15.5px; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-page-a{display:none; padding:0 0 20px; font-size:14.5px; color:var(--ink-dim); line-height:1.75; max-width:680px;}
.faq-page-item.is-open .faq-page-a{display:block;}
.faq-page-item.is-open .chev{transform:rotate(180deg);}
.faq-category-tag{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--green); font-weight:700; display:block; margin:36px 0 4px;}
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.blog-card{background:var(--stone); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; transition:transform .4s var(--ease);}
.blog-card:hover{transform:translateY(-4px);}
.blog-card-img{aspect-ratio:4/3; overflow:hidden;}
.blog-card-img img{width:100%; height:100%; object-fit:cover;}
.blog-card-body{padding:20px;}
.blog-cat{font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-soft); font-weight:700;}
.blog-card h3{font-size:18px; margin:8px 0 8px;}
.blog-card p{font-size:13.5px; color:var(--ink-dim); line-height:1.6;}
.blog-meta{font-size:12px; color:var(--ink-dim); margin-top:12px;}
@media (max-width:900px){ .contact-form-grid{grid-template-columns:1fr;} .blog-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .blog-grid{grid-template-columns:1fr;} }

.article-hero-img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius-lg); margin:20px 0 8px; box-shadow:var(--shadow-soft);}
.category-pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px;}
.category-pill{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:999px; padding:8px 16px; background:var(--stone);
  transition:color .25s ease, border-color .25s ease;
}
.category-pill:hover{color:var(--ink); border-color:var(--gold-soft);}

/* ===================== WooCommerce quantity input (shared: product + cart) ===================== */
.quantity{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:999px; overflow:hidden; width:fit-content;}
.quantity .qty{
  width:52px; border:0; text-align:center; font-size:15px; background:transparent; padding:12px 0;
  -moz-appearance:textfield;
}
.quantity .qty::-webkit-inner-spin-button, .quantity .qty::-webkit-outer-spin-button{-webkit-appearance:none; margin:0;}
.quantity .qty-step-minus, .quantity .qty-step-plus{width:42px; height:42px; font-size:18px; flex:none;}

/* ===================== Cart page ===================== */
.cart-header{padding:44px 0 8px;}
.free-ship-banner{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px 22px; margin-bottom:28px; font-size:13.5px;}
.free-ship-track{height:6px; border-radius:999px; background:var(--line); margin-top:12px; overflow:hidden;}
.free-ship-fill{height:100%; background:linear-gradient(90deg,var(--gold),var(--green));}
.cart-layout{display:grid; grid-template-columns:1fr 380px; gap:48px; padding:32px 0 90px; align-items:start;}
.cart-line{display:grid; grid-template-columns:96px 1fr auto; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); align-items:center;}
.cart-line-img{width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:var(--bg-alt);}
.cart-line-img img{width:100%; height:100%; object-fit:cover;}
.cart-line-name{font-family:var(--serif); font-size:17px; margin-bottom:4px; display:block;}
.cart-line-meta{font-size:12.5px; color:var(--ink-dim); margin-bottom:10px;}
.cart-line-actions{display:flex; align-items:center; gap:16px;}
.cart-line-actions .quantity{transform:scale(0.9); transform-origin:left;}
.cart-line-remove{font-size:12px; color:var(--ink-dim); text-decoration:underline;}
.cart-line-remove:hover{color:#b3401f;}
.cart-line-price{text-align:right; font-family:var(--serif); font-size:17px; font-weight:600;}
.cart-line-price .unit{display:block; font-family:var(--sans); font-size:11.5px; color:var(--ink-dim); font-weight:400; margin-top:4px;}
.cart-empty{text-align:center; padding:100px 20px;}
.summary-card{background:var(--stone); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px; position:sticky; top:96px;}
.summary-row{display:flex; justify-content:space-between; font-size:14px; color:var(--ink-dim); padding:9px 0;}
.summary-row.total{border-top:1px solid var(--line); margin-top:8px; padding-top:16px; font-size:18px; color:var(--ink); font-weight:600; font-family:var(--serif);}
.coupon-row{display:flex; gap:8px;}
.coupon-row input{flex:1; border:1px solid var(--line); border-radius:999px; padding:10px 16px; font-size:13px; background:var(--bg);}
/* WooCommerce's own shipping-calculator output inside the summary card */
.summary-row--shipping .shipping-calculator-form{margin-top:10px; font-size:12.5px;}
.summary-row--shipping select, .summary-row--shipping input[type=text]{border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:12.5px; margin-top:4px;}
@media (max-width:900px){ .cart-layout{grid-template-columns:1fr;} .summary-card{position:static;} }
@media (max-width:560px){
  .cart-line{grid-template-columns:64px 1fr;}
  .cart-line-price{grid-column:1/-1; text-align:left; padding-top:10px;}
}

/* ===================== Utility ===================== */
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.text-center{text-align:center;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-40{margin-top:40px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}