/* ═══════════════════════════════════════════════════════
   PET & GO  ·  Fable Pets layout  ·  Brand colors
   ═══════════════════════════════════════════════════════ */

:root {
  --cream:       #FAF3E6;
  --cream-alt:   #F2EAD8;
  --cream-card:  #FFFFFF;
  --green-deep:  #0D1A0D;
  --green-dark:  #1A2E1A;
  --green-mid:   #2D5A27;
  --green-bright:#4A8A44;
  --green-pale:  #C8DFC5;
  --gold:        #C9A85C;
  --gold-light:  #DFC07A;
  --gold-pale:   #F0D898;
  --text-main:   #1A2E1A;
  --text-body:   #3D4A3A;
  --text-muted:  #7A8F74;
  --border:      rgba(45,90,39,0.14);
  --border-dark: rgba(13,26,13,0.2);
  --shadow-s:    0 2px 12px rgba(13,26,13,0.07);
  --shadow-m:    0 8px 32px rgba(13,26,13,0.11);
  --shadow-l:    0 20px 60px rgba(13,26,13,0.18);

  --font-display:'Fraunces', Georgia, serif;
  --font-body:   'DM Sans', system-ui, sans-serif;
  --font-badge:  'Cinzel', serif;

  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  32px;

  --ease: cubic-bezier(0.23,1,0.32,1);
  --container: 1200px;
  --px: clamp(1.2rem, 4vw, 3rem);
  --section-py: clamp(4rem, 7vw, 6.5rem);
}

/* ─── BASE ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);color:var(--text-body);
  font-family:var(--font-body);font-size:clamp(15px,1.5vw,17px);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit}
em{font-style:italic}
input,textarea{font:inherit}

/* ─── BUTTONS ─── */
.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.78em 1.8em;border-radius:var(--r-xl);
  font-family:var(--font-body);font-size:clamp(.78rem,1.3vw,.86rem);
  font-weight:600;letter-spacing:.03em;white-space:nowrap;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--green-mid);color:#fff}
.btn-primary:hover{background:var(--green-bright);box-shadow:0 8px 24px rgba(45,90,39,.3)}
.btn-outline{background:transparent;color:var(--green-mid);border:1.5px solid var(--green-mid)}
.btn-outline:hover{background:var(--green-mid);color:#fff}
.btn-cream{background:var(--cream);color:var(--green-deep)}
.btn-cream:hover{background:var(--gold-pale)}
.btn-outline-cream{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-outline-cream:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-dark{background:var(--green-deep);color:var(--cream)}
.btn-gold{background:var(--gold);color:var(--green-deep)}
.btn-gold:hover{background:var(--gold-light);box-shadow:0 6px 20px rgba(201,168,92,.4)}
.btn-sm{padding:.55em 1.2em;font-size:.8rem}
.btn-lg{padding:.9em 2.2em;font-size:.95rem}
.btn-full{width:100%;justify-content:center}

/* ─── SHARED SECTION ─── */
.section{position:relative;padding:var(--section-py) var(--px)}
.sec-inner{max-width:var(--container);margin:0 auto}
.sec-eyebrow-c{
  display:block;text-align:center;
  font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--green-mid);margin-bottom:.9rem;
}
.sec-eyebrow{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--green-mid);margin-bottom:.9rem;
}
.sec-row-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.sec-h2{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:700;color:var(--text-main);line-height:1.15;
}
.see-all{font-size:.85rem;font-weight:600;color:var(--green-mid);transition:color .2s}
.see-all:hover{color:var(--green-bright)}

/* ─── ANNOUNCE BAR ─── */
.announce-bar{
  overflow:hidden;background:var(--green-deep);color:var(--cream);
  padding:.5rem 0;font-size:.74rem;font-weight:500;letter-spacing:.06em;
}
.announce-track{
  display:flex;align-items:center;gap:1.8rem;
  width:max-content;padding-right:1.8rem;
  animation:marquee 40s linear infinite;white-space:nowrap;
}
.a-sep{color:var(--gold);opacity:.7;flex-shrink:0}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── NAVBAR  (center logo — Fable Pets style) ─── */
.navbar{
  position:sticky;top:0;z-index:100;
  background:rgba(250,243,230,.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .3s;
}
.navbar.scrolled{box-shadow:var(--shadow-s)}
.nav-inner{
  max-width:var(--container);margin:0 auto;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;height:72px;padding:0 var(--px);
}
/* LEFT column */
.nav-left{
  display:flex;align-items:center;gap:1.8rem;
  position:relative;
}
.nav-item{position:relative}
.nav-link{
  font-size:.84rem;font-weight:500;color:var(--text-body);
  background:none;border:none;cursor:pointer;
  display:flex;align-items:center;gap:.3rem;
  padding:.3em 0;
  transition:color .2s;position:relative;
  font-family:var(--font-body);
}
.nav-link::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;
  height:1.5px;background:var(--green-mid);
  transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav-link:hover{color:var(--green-mid)}
.nav-link:hover::after{transform:scaleX(1)}
.dd-caret{
  transition:transform .25s var(--ease);flex-shrink:0;
  color:var(--text-muted);
}
.nav-item.dd-open .dd-caret{transform:rotate(180deg)}

/* CENTER logo */
.nav-logo-center{
  display:flex;align-items:center;justify-content:center;
  color:var(--green-mid);
}
.nav-logo-img{
  height:52px;width:52px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.nlc-text{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.nlc-name{
  font-family:var(--font-badge);font-size:.88rem;font-weight:700;
  color:var(--green-deep);letter-spacing:.1em;
}
.nlc-sub{
  font-size:.48rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-muted);
}

/* RIGHT column */
.nav-right{
  display:flex;align-items:center;gap:1.5rem;
  justify-content:flex-end;
}
.nav-cta-btn{padding:.52em 1.3em}

/* DROPDOWN */
.nav-dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%);
  background:var(--cream-card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-l);
  width:480px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(-8px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.nav-item.dd-open .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
/* Arrow tip */
.nav-dropdown::before{
  content:'';position:absolute;top:-7px;left:50%;
  transform:translateX(-50%);
  border:7px solid transparent;
  border-bottom-color:var(--border);
  border-top:none;
}
.nav-dropdown::after{
  content:'';position:absolute;top:-6px;left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-bottom-color:var(--cream-card);
  border-top:none;
}
.dd-inner{display:grid;grid-template-columns:1fr 180px;gap:0}
.dd-links{
  display:flex;flex-direction:column;
  padding:1rem 0;
}
.dd-link{
  font-size:.88rem;font-weight:500;color:var(--text-body);
  padding:.55rem 1.5rem;
  transition:background .15s,color .15s;
  display:block;
}
.dd-link:hover{background:var(--cream-alt);color:var(--green-mid)}
.dd-link-all{font-weight:700;color:var(--green-deep)}
.dd-divider{height:1px;background:var(--border);margin:.5rem 1.5rem}
.dd-featured{
  border-left:1px solid var(--border);
  padding:1.2rem;background:var(--cream-alt);
  border-radius:0 var(--r-md) var(--r-md) 0;
  display:flex;flex-direction:column;align-items:center;
  gap:.6rem;text-align:center;
}
.ddf-visual{
  width:100%;height:100px;
  background:linear-gradient(150deg,#E8F2E5,#D0E0CA);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ddf-tag{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-mid)}
.ddf-name{font-family:var(--font-display);font-size:.92rem;font-weight:700;color:var(--text-main);line-height:1.2}
.ddf-carrier{transform:scale(.68);transform-origin:center}

/* BURGER */
.burger{
  display:none;flex-direction:column;gap:5px;padding:6px;
  flex-shrink:0;
}
.burger span{
  display:block;width:22px;height:1.5px;
  background:var(--green-deep);border-radius:2px;
  transition:transform .3s,opacity .3s;
}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* MOBILE MENU */
.mobile-menu{
  position:fixed;top:64px;left:0;right:0;bottom:0;
  background:var(--cream-card);z-index:99;
  transform:translateX(100%);
  transition:transform .4s var(--ease);
  overflow-y:auto;
  border-top:1px solid var(--border);
}
.mobile-menu.open{transform:translateX(0)}
.mm-inner{
  display:flex;flex-direction:column;
  padding:1.5rem var(--px) 3rem;
  gap:.2rem;
}
.mm-accordion{border-bottom:1px solid var(--border);padding-bottom:.5rem;margin-bottom:.3rem}
.mm-trigger{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;font-size:1rem;font-weight:600;color:var(--text-main);
  padding:.9rem 0;text-align:left;
  font-family:var(--font-body);
}
.mm-plus{font-size:1.2rem;color:var(--green-mid);transition:transform .3s}
.mm-accordion.open .mm-plus{transform:rotate(45deg)}
.mm-panel{
  display:none;flex-direction:column;gap:.1rem;
  padding:.3rem 0 .8rem 1rem;
}
.mm-accordion.open .mm-panel{display:flex}
.mm-link{
  display:block;font-size:.95rem;font-weight:500;
  color:var(--text-body);padding:.65rem 0;
  border-bottom:1px solid var(--border);
  transition:color .2s;
}
.mm-link:hover{color:var(--green-mid)}
.mm-cta{margin-top:1.5rem}

/* ─── VIDEO HERO ─── */
.hero-video{
  position:relative;width:100%;height:100svh;min-height:600px;
  background:var(--green-deep);
  display:flex;align-items:center;overflow:hidden;
}
.hero-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(0.65) brightness(0.85);
}
.hv-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,
    rgba(13,26,13,.62) 0%,
    rgba(26,46,26,.42) 40%,
    rgba(45,90,39,.35) 70%,
    rgba(13,26,13,.55) 100%
  );
}
.hv-content{
  position:relative;z-index:1;
  max-width:var(--container);margin:0 auto;width:100%;
  padding:0 var(--px);
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.hvc-eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;
}
.hvc-headline{
  font-family:var(--font-display);
  font-size:clamp(2.8rem,5.5vw,5.2rem);
  font-weight:800;line-height:1.05;letter-spacing:-.02em;
  color:var(--cream);margin-bottom:1.2rem;
}
.hvc-headline em{font-style:italic;color:var(--gold)}
.hvc-sub{
  font-size:clamp(.9rem,1.5vw,1.05rem);
  color:rgba(245,230,200,.75);line-height:1.65;
  max-width:400px;margin-bottom:2rem;
}
.hvc-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-bottom:1.5rem}
.hvc-proof{
  display:flex;align-items:center;gap:.7rem;
  font-size:.8rem;color:rgba(245,230,200,.6);
}
.hvc-stars{color:var(--gold);letter-spacing:.06em}

/* Hero CTA block (right side) */
.hvc-cta-block{flex-shrink:0}
.hcb-inner{
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  text-align:center;
  background:rgba(13,26,13,.55);
  backdrop-filter:blur(22px);
  border:1px solid rgba(201,168,92,.32);
  border-radius:var(--r-lg);
  padding:2.4rem 2rem;
  width:clamp(220px,22vw,280px);
}
.hcb-paw{color:var(--gold);opacity:.85}
.hcb-label{
  font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  color:var(--cream);line-height:1.3;
}
.hcb-btn{font-size:1rem;padding:.85em 1.8em;width:100%}
.hcb-note{
  font-size:.72rem;color:rgba(245,230,200,.55);
  letter-spacing:.04em;
}

/* Hero product card (right side) */
.hpp-card{
  background:rgba(13,26,13,.82);
  backdrop-filter:blur(24px);
  border:1px solid rgba(201,168,92,.28);
  border-radius:var(--r-lg);
  padding:1.8rem 1.5rem;
  display:flex;flex-direction:column;align-items:center;
  gap:.9rem;text-align:center;
  width:clamp(220px,22vw,280px);
  flex-shrink:0;
}
.hpp-tag{
  background:var(--gold);color:var(--green-deep);
  font-size:.6rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding:.28em .9em;border-radius:var(--r-xl);
}
.hpp-visual{padding:.5rem 0}
.hpp-name{
  font-family:var(--font-display);font-size:1rem;font-weight:700;
  color:var(--cream);line-height:1.2;
}
.hpp-stars{font-size:.78rem;color:var(--gold)}
.hpp-stars span{color:rgba(245,230,200,.5);font-size:.72rem}

/* Scroll indicator */
.hv-scroll{
  position:absolute;bottom:2rem;left:50%;
  transform:translateX(-50%);opacity:.4;
  display:flex;flex-direction:column;align-items:center;
}
.hvs-line{
  width:1px;height:44px;background:var(--gold);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%,100%{transform:scaleY(1);opacity:.5}
  50%{transform:scaleY(.4);opacity:1}
}

/* ─── PRODUCT GRID (3-col) ─── */
.prod-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.8rem,2.5vw,1.8rem);
}
.prod-card{
  background:var(--cream-card);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s;
}
.prod-card:hover{box-shadow:var(--shadow-l);transform:translateY(-4px);border-color:rgba(45,90,39,.28)}
.pc-img-wrap{
  display:block;position:relative;overflow:hidden;
  text-decoration:none;
}
.pc-img{
  height:230px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--cream-alt),var(--cream));
  transition:transform .4s var(--ease);
}
.prod-card:hover .pc-img{transform:scale(1.04)}
.pc-img-1{background:linear-gradient(145deg,#E8F0E5,#D8EAD5)}
.pc-img-2{background:linear-gradient(145deg,#E0EDE0,#CCE3C8)}
.pc-img-3{background:linear-gradient(145deg,#EEE8DC,#E8E0D0)}
.pc-tag{
  position:absolute;top:1rem;left:1rem;
  background:var(--green-deep);color:var(--cream);
  font-size:.6rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.28em .75em;border-radius:var(--r-xl);
}
.pc-tag.gold{background:var(--gold);color:var(--green-deep)}
.pc-body{padding:1.3rem}
.pc-stars{font-size:.8rem;color:var(--gold);letter-spacing:.04em;margin-bottom:.5rem}
.pc-count{color:var(--text-muted);font-size:.77rem;font-weight:400}
.pc-name{font-family:var(--font-display);font-size:1.08rem;font-weight:700;color:var(--text-main);margin-bottom:.3rem;line-height:1.2}
.pc-desc{font-size:.82rem;color:var(--text-muted);margin-bottom:1.1rem}

/* ─── CARRIER CSS ILLUSTRATION ─── */
.carrier-showcase{display:flex;flex-direction:column;align-items:center}
.cs-handle{width:52px;height:14px;border:2.5px solid var(--gold);border-bottom:none;border-radius:10px 10px 0 0}
.cs-body{
  width:130px;height:90px;
  background:linear-gradient(150deg,#E8F2E5 0%,#D0E0CA 100%);
  border:1.5px solid var(--border-dark);border-radius:var(--r-sm);
  display:flex;align-items:center;position:relative;overflow:hidden;
}
.cs-door{position:absolute;left:0;top:0;bottom:0;width:40%;border-right:1.5px solid var(--border-dark);background:rgba(45,90,39,.08);overflow:hidden}
.cs-bars{width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 7px,rgba(45,90,39,.2) 7px,rgba(45,90,39,.2) 9px)}
.cs-vents{display:flex;gap:6px;padding-left:44%;padding-right:6%;align-items:center;justify-content:center;width:100%}
.cs-vents span{display:block;width:3px;height:38px;background:rgba(45,90,39,.25);border-radius:2px}
.cs-feet{display:flex;gap:26px;margin-top:2px}
.cs-feet span{width:9px;height:7px;background:var(--green-mid);border-radius:0 0 4px 4px}
/* Mini variant */
.pc-carrier{transform:scale(.78);transform-origin:center}
.pc-carrier.large .cs-body{width:150px;height:104px}
.pc-carrier.large .cs-handle{width:60px}
/* Dropdown mini */
.ddf-carrier{transform:scale(.6);transform-origin:center}

/* ─── COLLECTIONS 2-col ─── */
.collections-sec{background:var(--cream-alt)}
.coll-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2vw,1.5rem)}
.coll-card{
  border-radius:var(--r-lg);overflow:hidden;position:relative;
  min-height:320px;display:flex;align-items:flex-end;
  padding:2.2rem;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.coll-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}
.cc-dark{background:var(--green-deep);color:var(--cream)}
.cc-light{background:var(--cream-card);border:1px solid var(--border);color:var(--text-main)}
.cc-leaves{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ccl{position:absolute}
.ccl-1{width:180px;top:-40px;right:-40px;background:radial-gradient(ellipse 60% 80% at 50% 30%,rgba(74,138,68,.28) 0%,transparent 70%);height:200px;border-radius:50%;transform:rotate(-20deg)}
.ccl-2{width:120px;bottom:-30px;left:-30px;background:radial-gradient(ellipse 60% 80% at 50% 70%,rgba(45,90,39,.18) 0%,transparent 70%);height:160px;border-radius:50%}
.cc-body{position:relative;z-index:1}
.cc-eyebrow{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.65rem;display:block}
.cc-dark .cc-eyebrow{color:var(--gold)}
.cc-light .cc-eyebrow{color:var(--green-mid)}
.cc-body h3{font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:700;line-height:1.2;margin-bottom:1.3rem}
.cc-cats{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.2rem}
.cc-cats span{font-size:.75rem;font-weight:500;background:var(--cream-alt);border:1px solid var(--border);border-radius:var(--r-xl);padding:.28em .8em;color:var(--text-body)}
.cc-btn{pointer-events:none}

/* ─── TESTIMONIALS ─── */
.testimonials-sec{background:var(--cream-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.test-slider{max-width:640px;margin:0 auto;text-align:center;padding:clamp(1rem,3vw,2rem) 0;min-height:190px;position:relative}
.test-slide{display:none;animation:fadeSlide .5s var(--ease)}
.test-slide.active{display:block}
@keyframes fadeSlide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ts-stars{font-size:1.15rem;color:var(--gold);letter-spacing:.08em;margin-bottom:1rem}
.ts-quote{font-family:var(--font-display);font-style:italic;font-size:clamp(1rem,1.9vw,1.2rem);color:var(--text-main);line-height:1.65;margin-bottom:1.3rem}
.ts-author{font-size:.84rem;font-weight:600;color:var(--green-mid);margin-bottom:.25rem}
.ts-product{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}
.test-dots{display:flex;justify-content:center;gap:.55rem;margin-top:1.6rem}
.tdot{width:8px;height:8px;border-radius:50%;background:var(--green-pale);transition:background .2s,transform .2s}
.tdot.active{background:var(--green-mid);transform:scale(1.35)}

/* ─── MISSION ─── */
.mission-sec{background:var(--cream);text-align:center;overflow:hidden}
.mission-inner{position:relative;max-width:600px}
.mission-leaf{position:absolute;pointer-events:none}
.ml1{left:-55px;top:-15px;width:110px;opacity:.6;transform:rotate(-30deg)}
.ml2{right:-55px;bottom:-15px;width:100px;opacity:.5;transform:rotate(40deg) scaleX(-1)}
.mission-h2{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.9rem);font-weight:700;color:var(--green-deep);line-height:1.12;margin-bottom:1.1rem}
.mission-h2 em{font-style:italic;color:var(--green-mid)}
.mission-body{font-size:clamp(.9rem,1.5vw,1.05rem);color:var(--text-body);line-height:1.7;max-width:480px;margin:0 auto 2rem;opacity:.85}

/* ─── ABOUT (homepage snapshot) ─── */
.about-snap-sec{background:var(--cream-alt)}
.about-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.about-visual{display:flex;justify-content:center;align-items:center;position:relative}
.about-emblem{position:relative;width:clamp(180px,26vw,270px);height:clamp(180px,26vw,270px)}
.ae-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--border-dark)}
.ae-r2{inset:8%;border-style:dashed;opacity:.4}
.ae-inner{position:absolute;inset:12%;background:var(--green-deep);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;box-shadow:var(--shadow-l)}
.ae-paw{font-size:clamp(1.8rem,3.5vw,2.6rem)}
.ae-name{font-family:var(--font-badge);font-size:.72rem;font-weight:700;color:var(--gold);letter-spacing:.12em}
.ae-sub{font-size:.52rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--green-bright)}
.ae-year{font-size:.55rem;color:rgba(245,230,200,.4);letter-spacing:.14em;margin-top:.1rem}
.about-h2{font-family:var(--font-display);font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:700;color:var(--green-deep);line-height:1.1;margin-bottom:.9rem}
.about-h2 em{font-style:italic;color:var(--green-mid)}
.about-lead{font-size:clamp(.92rem,1.5vw,1.05rem);color:var(--text-body);line-height:1.65;margin-bottom:1.8rem}
.about-stats{display:flex;gap:2rem;padding-top:1.4rem;border-top:1px solid var(--border);margin-bottom:1.8rem}
.as-item{text-align:center}
.as-num-wrap{display:flex;align-items:baseline;justify-content:center;gap:.1rem;margin-bottom:.2rem}
.as-num{font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:800;color:var(--green-deep);line-height:1}
.as-suf{font-family:var(--font-display);font-size:clamp(1rem,2vw,1.6rem);font-weight:800;color:var(--gold)}
.as-item p{font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}

/* ─── PAGE HERO BANNER (category pages) ─── */
.page-hero{
  background:var(--green-deep);color:var(--cream);
  padding:clamp(3.5rem,7vw,5.5rem) var(--px) clamp(3rem,5vw,4.5rem);
  text-align:center;position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(45,90,39,.32) 0%,transparent 70%);
}
.ph-inner{position:relative;z-index:1;max-width:700px;margin:0 auto}
.ph-eyebrow{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;
}
.ph-title{
  font-family:var(--font-display);
  font-size:clamp(2.4rem,5vw,4rem);
  font-weight:800;line-height:1.08;letter-spacing:-.02em;
  color:var(--cream);margin-bottom:1rem;
}
.ph-title em{font-style:italic;color:var(--gold)}
.ph-sub{
  font-size:clamp(.9rem,1.5vw,1.05rem);
  color:rgba(245,230,200,.75);max-width:520px;margin:0 auto 2rem;
  line-height:1.65;
}
.ph-actions{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}

/* Products full list */
.products-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.5rem)}

/* Category feature card */
.cat-feature{
  background:var(--cream-card);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s;
  display:flex;flex-direction:column;
}
.cat-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.cf-img{
  height:200px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--cream-alt),var(--cream));
}
.cf-body{padding:1.4rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
.cf-name{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--text-main)}
.cf-desc{font-size:.84rem;color:var(--text-muted);flex:1}
.cf-link{font-size:.83rem;font-weight:600;color:var(--green-mid);transition:color .2s}
.cf-link:hover{color:var(--green-bright)}

/* Info section (for about, photoshoot etc) */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.info-img-col{display:flex;justify-content:center}
.info-img-box{
  width:clamp(260px,35vw,400px);height:clamp(260px,35vw,400px);
  border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(145deg,#1A2E1A,#0D1A0D);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.info-img-box::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(45,90,39,.2) 0%,transparent 70%);
}

/* Contact page specific */
.contact-page-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2rem,5vw,5rem)}
.contact-info-col .sec-eyebrow{color:var(--gold)}
.contact-h2{font-family:var(--font-display);font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:700;color:var(--cream);line-height:1.1;margin-bottom:.9rem}
.contact-h2 em{font-style:italic;color:var(--gold)}
.contact-lead{font-size:.95rem;color:rgba(245,230,200,.8);line-height:1.65;margin-bottom:1.8rem}
.ci-items{display:flex;flex-direction:column;gap:.9rem}
.ci-row{display:flex;align-items:center;gap:.8rem;font-size:.88rem;color:rgba(245,230,200,.85)}
.ci-row svg{color:var(--gold);flex-shrink:0}
.contact-form-col{display:flex;flex-direction:column;gap:1.2rem}
.cf-row-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cf-field{display:flex;flex-direction:column;gap:.4rem}
.cf-field label{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,230,200,.55)}
.cf-field input,.cf-field textarea{
  background:rgba(255,255,255,.07);border:1px solid rgba(245,230,200,.18);
  border-radius:var(--r-sm);padding:.75rem 1rem;
  color:var(--cream);outline:none;transition:border-color .25s;resize:vertical;
}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:rgba(245,230,200,.3)}
.cf-field input:focus,.cf-field textarea:focus{border-color:var(--gold)}
.cf-success{display:none;text-align:center;font-size:.88rem;color:var(--green-pale);padding:.8rem;background:rgba(123,200,112,.1);border:1px solid rgba(123,200,112,.25);border-radius:var(--r-sm)}

/* ─── SPOTLIGHT (dark feature section) ─── */
.spotlight-sec{background:var(--green-deep);padding:0;overflow:hidden}
.spotlight-wrap{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;min-height:480px}
.spotlight-visual{background:linear-gradient(145deg,#162818,#0D1A0D);display:flex;align-items:center;justify-content:center;padding:3.5rem 2.5rem;position:relative;overflow:hidden}
.spotlight-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(45,90,39,.22) 0%,transparent 70%)}
.spotlight-text{padding:clamp(2.5rem,5vw,4rem) clamp(2rem,4vw,3.5rem);display:flex;flex-direction:column;justify-content:center;gap:1.1rem;color:var(--cream)}
.spotlight-text .sec-eyebrow{color:var(--gold)}
.spotlight-h2{font-family:var(--font-display);font-size:clamp(1.8rem,3.2vw,2.8rem);font-weight:700;line-height:1.1;color:var(--cream)}
.spotlight-h2 em{font-style:italic;color:var(--gold)}
.spotlight-desc{font-size:clamp(.88rem,1.4vw,1rem);color:rgba(245,230,200,.8);line-height:1.65}
.sp-features{display:flex;flex-direction:column;gap:.6rem;list-style:none}
.sp-features li{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:rgba(245,230,200,.85)}
.sp-features li svg{color:var(--gold);flex-shrink:0}
.sp-rating{font-size:.86rem;color:var(--gold);letter-spacing:.04em}
.sp-rating span{color:rgba(245,230,200,.6);font-size:.78rem}
/* Spotlight carrier */
.spc-handle{width:72px;height:18px;border:3px solid var(--gold);border-bottom:none;border-radius:14px 14px 0 0}
.spc-body{width:190px;height:132px;background:linear-gradient(150deg,#E8F2E5,#D0E0CA);border:2px solid var(--border-dark);border-radius:var(--r-md);display:flex;align-items:center;position:relative;overflow:hidden}
.spc-door{position:absolute;left:0;top:0;bottom:0;width:40%;border-right:2px solid var(--border-dark);background:rgba(45,90,39,.08);overflow:hidden}
.spc-bars{width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(45,90,39,.22) 9px,rgba(45,90,39,.22) 11px)}
.spc-vents{display:flex;gap:7px;padding-left:44%;padding-right:6%;align-items:center;justify-content:center;width:100%}
.spc-vents span{display:block;width:3px;height:52px;background:rgba(45,90,39,.25);border-radius:2px}
.spc-feet{display:flex;gap:36px;margin-top:3px}
.spc-feet span{width:12px;height:9px;background:var(--green-mid);border-radius:0 0 5px 5px}

/* ─── FOOTER ─── */
.footer{background:var(--green-deep);color:rgba(245,230,200,.75)}
.footer-top{border-bottom:1px solid rgba(245,230,200,.1);padding:clamp(3rem,5vw,5rem) var(--px)}
.ft-inner{max-width:var(--container);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.ft-newsletter h3{font-family:var(--font-display);font-style:italic;font-size:1.4rem;font-weight:600;color:var(--cream);margin-bottom:.5rem}
.ft-newsletter p{font-size:.84rem;margin-bottom:1.2rem;line-height:1.6}
.nl-form{display:flex;gap:.6rem}
.nl-form input{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(245,230,200,.18);border-radius:var(--r-xl);padding:.68rem 1.1rem;color:var(--cream);outline:none;transition:border-color .2s}
.nl-form input::placeholder{color:rgba(245,230,200,.35)}
.nl-form input:focus{border-color:var(--gold)}
.ft-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.ft-col{display:flex;flex-direction:column;gap:.5rem}
.ft-col h4{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);margin-bottom:.5rem}
.ft-col a{font-size:.84rem;color:rgba(245,230,200,.6);transition:color .2s}
.ft-col a:hover{color:var(--gold)}
.footer-bottom{padding:1.4rem var(--px)}
.ft-bottom-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.fb-logo{display:flex;align-items:center;gap:.5rem;font-family:var(--font-badge);font-size:.78rem;font-weight:700;color:var(--gold);letter-spacing:.08em}
.ft-bottom-row>p{font-size:.72rem;opacity:.4}
.fb-social{display:flex;gap:1rem}
.fb-social a{font-size:.7rem;font-weight:700;letter-spacing:.1em;color:rgba(245,230,200,.45);transition:color .2s}
.fb-social a:hover{color:var(--gold)}

/* ─── SCROLL REVEAL ─── */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].revealed{opacity:1;transform:none}

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
  .hv-content{grid-template-columns:1fr;text-align:center}
  .hvc-text{order:1}
  .hvc-product{order:2;display:flex;justify-content:center}
  .hvc-sub,.hvc-actions,.hvc-proof{max-width:none}
  .hvc-actions{justify-content:center}
  .about-grid{grid-template-columns:1fr;text-align:center}
  .about-stats{justify-content:center}
  .products-grid-4{grid-template-columns:repeat(2,1fr)}
  .spotlight-wrap{grid-template-columns:1fr}
  .spotlight-visual{min-height:260px}
  .contact-page-grid{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr;text-align:center}
  .info-img-col{order:-1}
}
@media(max-width:900px){
  .nav-inner{height:60px}
  .mobile-menu{top:60px}
  .nav-left .nav-link:not(.nav-dd-trigger){display:none}
  .nav-right .nav-link{display:none}
  .nav-right .nav-cta-btn{display:none}
  .burger{display:flex}
}
@media(max-width:768px){
  .prod-grid{grid-template-columns:1fr}
  .coll-grid{grid-template-columns:1fr}
  .cf-row-2{grid-template-columns:1fr}
  .nl-form{flex-direction:column}
  .ft-inner{grid-template-columns:1fr}
  .ft-nav{grid-template-columns:1fr 1fr}
  .hvc-actions{flex-direction:column;align-items:center}
  .hvc-actions .btn{width:100%;max-width:300px;justify-content:center}
}
@media(max-width:480px){
  .about-stats{flex-direction:column;gap:1.5rem}
  .products-grid-4{grid-template-columns:1fr}
  .ft-nav{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .announce-track{animation:none}
}

/* ─── CATALOG: PHOTOS, PRICES, LOADING & ERROR STATES ─── */

/* Uploaded product photos fill the card visual area. */
.pc-img .pc-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--green-mid);
  margin: .1rem 0 .7rem;
}
.pc-price s {
  color: var(--text-muted);
  font-weight: 400;
  font-size: .95rem;
  margin-right: .4rem;
}

/* Placeholder cards shown while the catalog loads. */
.prod-card.is-skeleton {
  pointer-events: none;
  border-color: var(--border);
}
.prod-card.is-skeleton .pc-img {
  height: 230px;
  background: linear-gradient(100deg,
    var(--cream-alt) 30%, #F7F1E4 50%, var(--cream-alt) 70%);
  background-size: 300% 100%;
  animation: sk-shimmer 1.3s ease-in-out infinite;
}
.prod-card.is-skeleton .sk-line,
.prod-card.is-skeleton .sk-btn {
  background: linear-gradient(100deg,
    var(--cream-alt) 30%, #F7F1E4 50%, var(--cream-alt) 70%);
  background-size: 300% 100%;
  animation: sk-shimmer 1.3s ease-in-out infinite;
  border-radius: 6px;
  height: .82rem;
  margin-bottom: .6rem;
}
.prod-card.is-skeleton .sk-short { width: 40%; }
.prod-card.is-skeleton .sk-mid   { width: 65%; }
.prod-card.is-skeleton .sk-btn {
  height: 2.4rem;
  width: 7.5rem;
  border-radius: 999px;
  margin-top: 1rem;
}

@keyframes sk-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .prod-card.is-skeleton .pc-img,
  .prod-card.is-skeleton .sk-line,
  .prod-card.is-skeleton .sk-btn { animation: none; }
}

/* Shown when the catalog cannot be reached. */
.catalog-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--cream-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.catalog-error p {
  color: var(--text-body);
  margin-bottom: 1.2rem;
  font-size: 1.02rem;
}

/* ─── PRODUCT DETAIL PAGE ─── */

.pdp { padding-top: clamp(5.5rem, 9vw, 7rem); }

.pdp-loading,
.pdp-missing { text-align: center; padding: 4rem 1rem; }
.pdp-missing h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin: 0 0 .7rem;
}
.pdp-missing p { color: var(--text-body); margin: 0 0 1.6rem; }
.pdp-loading { color: var(--text-muted); }

.pdp-crumbs {
  font-size: .87rem;
  color: var(--text-muted);
  margin-bottom: 1.8rem;
}
.pdp-crumbs a { color: var(--text-muted); text-decoration: none; }
.pdp-crumbs a:hover { color: var(--green-mid); text-decoration: underline; }

.pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: start;
}

/* Gallery */
.pdp-stage {
  background: var(--cream-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.pdp-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-stage-empty { padding: 2rem; }

.pdp-thumbs {
  display: flex;
  gap: .6rem;
  margin-top: .8rem;
  flex-wrap: wrap;
}
.pdp-thumb {
  width: 74px;
  height: 74px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--cream-alt);
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { border-color: var(--gold); }
.pdp-thumb.active { border-color: var(--green-mid); }

/* Info column */
.pdp-badge {
  display: inline-block;
  background: var(--green-mid);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 999px;
  margin-bottom: .9rem;
}
.pdp-badge.gold { background: var(--gold); color: var(--green-deep); }

.pdp-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.12;
  margin: 0 0 .7rem;
  color: var(--text-main);
}

.pdp-rating { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.pdp-stars { color: var(--gold); letter-spacing: .07em; }
.pdp-reviews { color: var(--text-muted); font-size: .87rem; }

.pdp-short {
  color: var(--text-body);
  font-size: 1.03rem;
  line-height: 1.65;
  margin: 0 0 1.4rem;
}

.pdp-price {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  margin-bottom: 1.7rem;
  padding-bottom: 1.7rem;
  border-bottom: 1px solid var(--border);
}
.pdp-price strong {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--green-mid);
  font-weight: 600;
}
.pdp-price s { color: var(--text-muted); font-size: 1.05rem; }
.pdp-ondemand { font-size: 1.25rem !important; color: var(--text-body) !important; }

.pdp-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.8rem; }

.pdp-assurances { list-style: none; padding: 0; margin: 0; }
.pdp-assurances li {
  color: var(--text-body);
  font-size: .92rem;
  padding: .35rem 0;
}

/* Long description */
.pdp-desc {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
  max-width: 68ch;
}
.pdp-desc h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin: 0 0 1rem;
}
.pdp-desc p {
  color: var(--text-body);
  line-height: 1.75;
  margin: 0 0 1rem;
}

.pdp-cat { color: var(--green-mid); text-decoration: none; }
.pdp-cat:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .pdp-grid { grid-template-columns: 1fr; }
  .pdp-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Second price — present but clearly not the headline. */
.pc-price-alt {
  font-size: .86rem;
  color: var(--text-muted);
  margin: -.45rem 0 .7rem;
}
.pdp-price-alt {
  font-size: .95rem;
  color: var(--text-muted);
  margin: -1.2rem 0 1.7rem;
}