/* +Kotas — shared design system */
:root{
  --forest:#1B2E22;
  --forest-2:#213827;
  --sage:#6C8768;
  --sage-light:#A9BCA0;
  --cream:#F7F4EC;
  --white-warm:#FBFAF6;
  --marfil:#EDE7D9;
  --stone:#B7AC96;
  --charcoal:#211F1B;
  --line: rgba(33,31,27,0.12);
  --line-on-dark: rgba(247,244,236,0.18);

  --font-display: 'Fraunces', serif;
  --font-sans: 'Inter', sans-serif;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 6rem;
  --space-2xl: 10rem;

  --radius-sm: 2px;
  --container: 1360px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-slow: cubic-bezier(.16,.7,.24,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--white-warm);
  color:var(--charcoal);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; background:none; border:none; cursor:pointer; color:inherit;}
ul{list-style:none;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--space-md);}
@media(max-width:640px){ .container{padding:0 1.25rem;} }

.eyebrow{ font-family:var(--font-sans); font-size:0.78rem; letter-spacing:0.04em; color:var(--sage); font-weight:500; }

h1,h2,h3{ font-family:var(--font-display); font-weight:400; letter-spacing:-0.01em; color:var(--forest); }

.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.85rem 1.6rem; font-size:0.92rem; font-weight:500;
  border:1px solid currentColor; border-radius:100px;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn-solid{ background:var(--forest); color:var(--white-warm); border-color:var(--forest); }
.btn-solid:hover{ background:var(--forest-2); }
.btn-outline{ color:var(--forest); border-color:var(--forest); }
.btn-outline:hover{ background:var(--forest); color:var(--white-warm); }
.btn-outline-light{ color:var(--white-warm); border-color:var(--line-on-dark); }
.btn-outline-light:hover{ background:var(--white-warm); color:var(--forest); border-color:var(--white-warm); }

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; z-index:999; background:var(--forest);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
#loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{
  font-family:var(--font-display); font-size:2.2rem; color:var(--white-warm);
  display:flex; gap:.4rem; align-items:baseline; opacity:0;
  animation:loaderIn .9s var(--ease) .15s forwards;
}
.loader-mark span{ color:var(--sage-light); font-size:1.4rem; }
@keyframes loaderIn{ from{opacity:0; letter-spacing:.3em;} to{opacity:1; letter-spacing:0;} }

/* ---------- Custom cursor ---------- */
#cursor{
  position:fixed; top:0; left:0; width:34px; height:34px;
  border:1px solid var(--forest); border-radius:50%;
  pointer-events:none; z-index:900; mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), background .3s var(--ease);
  display:flex; align-items:center; justify-content:center;
  font-size:0.6rem; letter-spacing:.05em; color:var(--white-warm); font-weight:500;
  opacity:0;
}
#cursor.active{ opacity:1; }
#cursor.grow{ width:76px; height:76px; background:var(--forest); }
#cursor span{ opacity:0; transition:opacity .2s; }
#cursor.grow span{ opacity:1; }
@media(hover:none), (pointer:coarse){ #cursor{ display:none; } }

/* ---------- Header ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:500; padding:1.4rem 0;
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
header.solid{
  background:rgba(251,250,246,0.92); backdrop-filter:blur(10px);
  padding:1rem 0; border-color:var(--line);
}
/* Light headers (non-dark hero pages) start solid-styled but transparent bg until scrolled */
header.on-light{ border-bottom:1px solid var(--line); background:rgba(251,250,246,0.7); backdrop-filter:blur(6px); }
header .row{ display:flex; align-items:center; justify-content:space-between; }
.logo{
  font-family:var(--font-display); font-size:1.3rem; color:var(--white-warm);
  display:flex; align-items:baseline; gap:.15rem; transition:color .5s var(--ease);
}
header.solid .logo, header.on-light .logo{ color:var(--forest); }
.logo .plus{ color:var(--sage-light); font-size:1.05rem; }
header.solid .logo .plus, header.on-light .logo .plus{ color:var(--sage); }

nav.main-nav{ display:flex; gap:2.1rem; }
nav.main-nav a{
  font-size:0.92rem; color:var(--white-warm); opacity:.88;
  position:relative; padding-bottom:2px;
  transition:color .5s var(--ease), opacity .3s;
}
header.solid nav.main-nav a, header.on-light nav.main-nav a{ color:var(--charcoal); }
nav.main-nav a.current{ opacity:1; font-weight:500; }
nav.main-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right .35s var(--ease);
}
nav.main-nav a:hover{ opacity:1; }
nav.main-nav a:hover::after, nav.main-nav a.current::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:1rem; }
.header-actions .btn{ color:var(--white-warm); border-color:var(--line-on-dark); transition:color .5s var(--ease), border-color .5s var(--ease), background .45s var(--ease); }
header.solid .header-actions .btn, header.on-light .header-actions .btn{ color:var(--forest); border-color:var(--forest); }
header.solid .header-actions .btn:hover, header.on-light .header-actions .btn:hover{ background:var(--forest); color:var(--white-warm); }
.header-actions .btn:hover{ background:var(--white-warm); color:var(--forest); }

.burger{ display:none; width:26px; height:18px; position:relative; }
.burger span{ position:absolute; left:0; right:0; height:1px; background:var(--white-warm); transition:transform .4s var(--ease), opacity .3s, background .4s; }
header.solid .burger span, header.on-light .burger span{ background:var(--forest); }
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:8px; }
.burger span:nth-child(3){ top:16px; }
.burger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
@media(max-width:900px){ nav.main-nav, .header-actions .btn{ display:none; } .burger{ display:block; } }

#drawer{
  position:fixed; inset:0; z-index:480; background:var(--forest);
  display:flex; flex-direction:column; justify-content:center; padding:2rem 1.5rem;
  transform:translateY(-100%); transition:transform .6s var(--ease-slow);
}
#drawer.open{ transform:translateY(0); }
#drawer a{ font-family:var(--font-display); font-size:2.1rem; color:var(--white-warm); display:block; padding:0.5rem 0; border-bottom:1px solid var(--line-on-dark); }
#drawer .drawer-cta{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  position:relative; padding:11rem 0 5rem;
  background:linear-gradient(180deg, #16261C 0%, #1B2E22 55%, #223A28 100%);
  color:var(--white-warm); overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 90px);
}
.page-hero .inner{ position:relative; z-index:2; }
.page-hero .crumb{ color:var(--sage-light); font-size:0.85rem; margin-bottom:1.4rem; }
.page-hero .crumb a{ opacity:.75; }
.page-hero .crumb a:hover{ opacity:1; }
.page-hero h1{ color:var(--white-warm); font-weight:300; font-size:clamp(2.3rem, 5vw, 4.4rem); max-width:18ch; line-height:1.02; }
.page-hero p{ margin-top:1.4rem; max-width:44ch; color:var(--marfil); opacity:.85; font-size:1.05rem; }

.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  background:
    radial-gradient(ellipse at 75% 20%, rgba(108,135,104,0.35), transparent 55%),
    linear-gradient(180deg, #16261C 0%, #1B2E22 55%, #223A28 100%);
  overflow:hidden; padding-top:8rem;
}
.hero-texture{ position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 90px); }
.hero-blob{
  position:absolute; width:60vw; height:60vw; max-width:820px; max-height:820px; right:-14vw; top:-8vw;
  background:radial-gradient(circle, rgba(169,188,160,0.35) 0%, rgba(169,188,160,0) 68%); filter:blur(10px); will-change:transform;
}
.hero-inner{ position:relative; z-index:2; padding-bottom:5rem; }
.hero-label{ color:var(--sage-light); font-size:0.85rem; margin-bottom:1.6rem; }
.hero h1{ color:var(--white-warm); font-weight:300; font-size:clamp(2.7rem, 6.4vw, 6.2rem); line-height:0.98; max-width:16ch; }
.hero-sub{ margin-top:2rem; max-width:34ch; color:var(--marfil); font-size:1.08rem; opacity:.88; }
.hero-ctas{ margin-top:2.6rem; display:flex; gap:1rem; flex-wrap:wrap; }
.hero-meta{ margin-top:5rem; display:flex; align-items:center; gap:2.5rem; padding-top:1.6rem; border-top:1px solid var(--line-on-dark); color:var(--marfil); font-size:0.86rem; }
.hero-meta strong{ color:var(--white-warm); font-family:var(--font-display); font-size:1.05rem; font-weight:500; }
.hero-scroll{ position:absolute; right:var(--space-md); bottom:2.2rem; z-index:2; display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--marfil); font-size:0.72rem; letter-spacing:.06em; }
.hero-scroll .line{ width:1px; height:44px; background:var(--line-on-dark); position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--sage-light); animation:scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{top:-100%;} 50%{top:0;} 100%{top:100%;} }
@media(max-width:640px){ .hero-scroll{ display:none; } .hero-meta{ flex-wrap:wrap; gap:1.4rem; } }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-slow), transform .9s var(--ease-slow); }
.reveal.in{ opacity:1; transform:translateY(0); }

section{ position:relative; }
.section-pad{ padding:var(--space-2xl) 0; }
@media(max-width:900px){ .section-pad{ padding:var(--space-xl) 0; } }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:var(--space-lg); }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.9rem); font-weight:400; max-width:16ch; }
.section-head p{ max-width:34ch; color:var(--charcoal); opacity:.72; font-size:0.98rem; }
@media(max-width:760px){ .section-head{ flex-direction:column; align-items:flex-start; gap:1rem; } }

.trust-strip{ background:var(--marfil); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.6rem 0; }
.trust-strip .row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.2rem; font-size:0.9rem; color:var(--charcoal); }
.trust-strip .stars{ color:var(--forest); font-family:var(--font-display); font-size:1.1rem; }
.trust-strip .divider{ width:1px; height:16px; background:var(--line); }
.trust-row-items{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; opacity:.85; }

.animal-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.animal-card{ position:relative; overflow:hidden; border-radius:var(--radius-sm); min-height:420px; display:flex; align-items:flex-end; color:var(--white-warm); cursor:pointer; }
.animal-card .bg{ position:absolute; inset:0; transition:transform 1.1s var(--ease-slow); }
.animal-card:hover .bg{ transform:scale(1.06); }
.animal-card .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,28,20,0) 35%, rgba(15,22,15,0.82) 100%); }
.animal-card .content{ position:relative; z-index:2; padding:1.8rem; width:100%; }
.animal-card .content .tag{ font-size:0.78rem; color:var(--sage-light); margin-bottom:.5rem; }
.animal-card .content h3{ color:var(--white-warm); font-size:1.7rem; font-weight:400; }
.animal-card .content .desc{ max-height:0; overflow:hidden; opacity:0; transition:max-height .55s var(--ease), opacity .4s; font-size:0.88rem; color:var(--marfil); }
.animal-card:hover .desc{ max-height:60px; opacity:.85; margin-top:.5rem; }
.animal-card.a-perros{ grid-column:span 7; background:#2b4230; }
.animal-card.a-gatos{ grid-column:span 5; background:#33413a; }
.animal-card.a-peces{ grid-column:span 5; background:#243b37; }
.animal-card.a-otras{ grid-column:span 7; min-height:280px; background:#3a3b2c; }
.animal-card.a-perros .bg{ background:radial-gradient(ellipse at 30% 30%, #43664a, #223626 75%); }
.animal-card.a-gatos .bg{ background:radial-gradient(ellipse at 70% 20%, #4c5e52, #2a3630 75%); }
.animal-card.a-peces .bg{ background:radial-gradient(ellipse at 40% 60%, #35625c, #1c332f 75%); }
.animal-card.a-otras .bg{ background:radial-gradient(ellipse at 60% 40%, #545640, #2d2e21 75%); }
@media(max-width:900px){ .animal-card.a-perros, .animal-card.a-gatos, .animal-card.a-peces, .animal-card.a-otras{ grid-column:span 12; min-height:300px; } }

/* small category tiles (used on Productos overview) */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.cat-card{ position:relative; overflow:hidden; border-radius:var(--radius-sm); min-height:340px; display:flex; align-items:flex-end; color:var(--white-warm); }
.cat-card .bg{ position:absolute; inset:0; transition:transform 1.1s var(--ease-slow); }
.cat-card:hover .bg{ transform:scale(1.06); }
.cat-card .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,28,20,0) 40%, rgba(15,22,15,0.82) 100%); }
.cat-card .content{ position:relative; z-index:2; padding:1.5rem; }
.cat-card .content .tag{ font-size:0.75rem; color:var(--sage-light); margin-bottom:.4rem; }
.cat-card .content h3{ color:var(--white-warm); font-size:1.35rem; font-weight:400; }
.cc-1 .bg{ background:radial-gradient(ellipse at 30% 30%, #4c5e52, #2a3630 75%); }
.cc-2 .bg{ background:radial-gradient(ellipse at 70% 30%, #43664a, #223626 75%); }
.cc-3 .bg{ background:radial-gradient(ellipse at 40% 60%, #545640, #2d2e21 75%); }
.cc-4 .bg{ background:radial-gradient(ellipse at 60% 40%, #35625c, #1c332f 75%); }
@media(max-width:900px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .cat-grid{ grid-template-columns:1fr; } }

.product-row{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:3.5rem; align-items:center; padding:var(--space-lg) 0; border-top:1px solid var(--line); }
.product-row:last-child{ border-bottom:1px solid var(--line); }
.product-row:nth-child(even){ direction:rtl; }
.product-row:nth-child(even) > *{ direction:ltr; }
.product-visual{ aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden; position:relative; background:linear-gradient(135deg, var(--marfil), #DCD5C2); }
.product-visual::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 60%); }
.product-visual.pv-a{ background:linear-gradient(135deg,#DCD5C2,#B7AC96); }
.product-visual.pv-b{ background:linear-gradient(135deg,#EDE7D9,#A9BCA0); }
.product-visual.pv-c{ background:linear-gradient(135deg,#F7F4EC,#6C8768); }
.product-tag{ font-size:0.78rem; color:var(--sage); margin-bottom:1rem; }
.product-copy h3{ font-size:2rem; font-weight:400; margin-bottom:1rem; }
.product-copy p{ color:var(--charcoal); opacity:.75; max-width:42ch; margin-bottom:1.6rem; }
.product-why{ margin-top:1.6rem; padding:1.3rem 1.5rem; background:var(--cream); border-radius:var(--radius-sm); border-left:2px solid var(--sage); }
.product-why p{ font-size:0.88rem; opacity:.8; margin:0; max-width:none; }
.product-why strong{ display:block; font-family:var(--font-display); color:var(--forest); font-size:1rem; margin-bottom:.3rem; font-weight:500; }
@media(max-width:820px){ .product-row, .product-row:nth-child(even){ grid-template-columns:1fr; direction:ltr; gap:1.6rem; } }

/* Product card grid (category listing pages) */
.pcard-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.pcard{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:box-shadow .4s var(--ease), transform .4s var(--ease); }
.pcard:hover{ box-shadow:0 14px 36px rgba(20,20,10,.08); transform:translateY(-3px); }
.pcard .pcard-visual{ aspect-ratio:1/1; background:linear-gradient(135deg, var(--marfil), #DCD5C2); position:relative; }
.pcard .pcard-visual::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 60%); }
.pcard .pcard-body{ padding:1.3rem 1.4rem 1.5rem; }
.pcard .pcard-tag{ font-size:0.74rem; color:var(--sage); margin-bottom:.4rem; }
.pcard h3{ font-size:1.15rem; font-weight:400; margin-bottom:.4rem; }
.pcard p{ font-size:0.86rem; opacity:.68; }
@media(max-width:820px){ .pcard-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .pcard-grid{ grid-template-columns:1fr; } }

.viewer-section{ background:var(--forest); color:var(--white-warm); overflow:hidden; }
.viewer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.viewer-copy .eyebrow{ color:var(--sage-light); }
.viewer-copy h2{ color:var(--white-warm); font-size:clamp(1.9rem,3.2vw,2.8rem); font-weight:400; margin:1rem 0 1.3rem; max-width:15ch; }
.viewer-copy p{ color:var(--marfil); opacity:.82; max-width:38ch; margin-bottom:1.8rem; }
.viewer-hint{ font-size:0.82rem; color:var(--sage-light); display:flex; align-items:center; gap:.6rem; }
#canvas-wrap{ position:relative; aspect-ratio:1/1; border-radius:var(--radius-sm); background:radial-gradient(circle at 50% 45%, #223a28, #16261c 78%); cursor:grab; }
#canvas-wrap:active{ cursor:grabbing; }
#canvas-wrap canvas{ display:block; width:100%; height:100%; }
@media(max-width:820px){ .viewer-grid{ grid-template-columns:1fr; } }

.editorial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; }
.editorial-card{ cursor:pointer; }
.editorial-visual{ aspect-ratio:3/4; border-radius:var(--radius-sm); margin-bottom:1.2rem; overflow:hidden; position:relative; }
.editorial-visual .bg{ position:absolute; inset:0; transition:transform 1s var(--ease-slow); }
.editorial-card:hover .bg{ transform:scale(1.05); }
.ed-1 .bg{ background:linear-gradient(160deg,#7C9A82,#33443A); }
.ed-2 .bg{ background:linear-gradient(160deg,#B7AC96,#5A5442); }
.ed-3 .bg{ background:linear-gradient(160deg,#4F6B52,#1B2E22); }
.editorial-card .tag{ font-size:0.78rem; color:var(--sage); margin-bottom:.5rem; }
.editorial-card h3{ font-size:1.3rem; font-weight:400; }
@media(max-width:820px){ .editorial-grid{ grid-template-columns:1fr; } }

.reviews-section{ background:var(--cream); text-align:center; }
.reviews-section .section-head{ justify-content:center; flex-direction:column; align-items:center; text-align:center; }
.reviews-score{ display:flex; align-items:baseline; gap:.8rem; justify-content:center; margin:1.2rem 0 2.6rem; }
.reviews-score .num{ font-family:var(--font-display); font-size:3.4rem; color:var(--forest); font-weight:400; }
.reviews-score .stars{ color:var(--sage); font-size:1.3rem; }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:left; }
.review-card{ background:var(--white-warm); padding:2rem; border-radius:var(--radius-sm); border:1px solid var(--line); }
.review-card .stars{ color:var(--sage); margin-bottom:1rem; font-size:0.9rem; }
.review-card p{ font-family:var(--font-display); font-size:1.08rem; line-height:1.5; color:var(--charcoal); margin-bottom:1.2rem; font-style:italic; }
.review-card .who{ font-size:0.82rem; opacity:.6; }
@media(max-width:820px){ .review-grid{ grid-template-columns:1fr; } }

.location-section{ display:grid; grid-template-columns:1fr 1fr; }
.location-copy{ padding:var(--space-2xl) var(--space-md); display:flex; flex-direction:column; justify-content:center; }
.location-copy h2{ font-size:clamp(1.9rem,3vw,2.6rem); font-weight:400; margin-bottom:1.5rem; max-width:13ch; }
.location-detail{ margin:2rem 0; }
.location-detail div{ margin-bottom:0.9rem; font-size:1rem; }
.location-detail .label{ font-size:0.78rem; color:var(--sage); display:block; margin-bottom:.2rem; }
.map-visual{ position:relative; min-height:420px;
  background:
    linear-gradient(180deg, rgba(27,46,34,0.08), rgba(27,46,34,0.14)),
    repeating-linear-gradient(0deg, rgba(33,31,27,0.05) 0px, rgba(33,31,27,0.05) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(33,31,27,0.05) 0px, rgba(33,31,27,0.05) 1px, transparent 1px, transparent 40px),
    var(--marfil);
}
.map-pin{ position:absolute; top:46%; left:52%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; }
.map-pin .dot{ width:14px; height:14px; border-radius:50%; background:var(--forest); border:3px solid var(--white-warm); box-shadow:0 2px 10px rgba(0,0,0,.2); }
.map-pin .pulse{ position:absolute; width:14px; height:14px; border-radius:50%; background:var(--forest); opacity:.5; animation:pulse 2.2s ease-out infinite; }
@keyframes pulse{ 0%{ transform:scale(1); opacity:.5;} 100%{ transform:scale(3.4); opacity:0;} }
.map-label{ position:absolute; bottom:1.6rem; left:1.6rem; background:var(--white-warm); padding:1rem 1.3rem; border-radius:var(--radius-sm); font-size:0.85rem; box-shadow:0 6px 24px rgba(20,20,10,.1); }
@media(max-width:900px){ .location-section{ grid-template-columns:1fr; } .location-copy{ padding:var(--space-xl) 1.25rem; } .map-visual{ min-height:320px; } }

/* Contact form */
.contact-form{ display:grid; gap:1.1rem; max-width:520px; }
.contact-form label{ font-size:0.8rem; color:var(--sage); display:block; margin-bottom:.4rem; }
.contact-form input, .contact-form textarea{
  width:100%; padding:0.85rem 1rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:0.95rem; background:var(--white-warm); color:var(--charcoal);
}
.contact-form input:focus, .contact-form textarea:focus{ outline:2px solid var(--sage); outline-offset:1px; }
.contact-form textarea{ min-height:120px; resize:vertical; }
.hours-list{ display:grid; gap:.6rem; }
.hours-list div{ display:flex; justify-content:space-between; font-size:0.94rem; padding:0.6rem 0; border-bottom:1px solid var(--line); }
.hours-list span:last-child{ opacity:.7; }

/* About page */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.about-visual{ aspect-ratio:4/5; border-radius:var(--radius-sm); background:linear-gradient(150deg, var(--sage-light), var(--forest)); }
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.value-card{ padding-top:1.5rem; border-top:1px solid var(--line); }
.value-card .num{ font-family:var(--font-display); color:var(--sage); font-size:1.1rem; margin-bottom:.8rem; }
.value-card h3{ font-size:1.2rem; font-weight:400; margin-bottom:.6rem; }
.value-card p{ font-size:0.92rem; opacity:.72; }
@media(max-width:820px){ .about-grid, .value-grid{ grid-template-columns:1fr; } }

/* Product detail page */
.pd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; }
.pd-gallery{ display:grid; grid-template-columns:1fr; gap:0.8rem; }
.pd-gallery .main{ aspect-ratio:4/3; border-radius:var(--radius-sm); background:linear-gradient(135deg, var(--marfil), #DCD5C2); position:relative; }
.pd-gallery .main::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), transparent 60%); }
.pd-gallery .thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:0.6rem; }
.pd-gallery .thumbs div{ aspect-ratio:1/1; border-radius:var(--radius-sm); background:linear-gradient(135deg, var(--marfil), #B7AC96); }
.pd-info .eyebrow{ margin-bottom:.8rem; }
.pd-info h1{ font-size:clamp(1.9rem,3vw,2.6rem); font-weight:400; margin-bottom:1rem; }
.pd-price{ font-family:var(--font-display); font-size:1.6rem; color:var(--forest); margin-bottom:1.4rem; }
.pd-info > p{ opacity:.75; margin-bottom:1.6rem; max-width:44ch; }
.pd-features{ display:grid; gap:.6rem; margin-bottom:1.8rem; }
.pd-features div{ display:flex; gap:.7rem; font-size:0.92rem; padding:0.5rem 0; border-bottom:1px solid var(--line); }
.pd-features span:first-child{ color:var(--sage); }
.related-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
@media(max-width:820px){ .pd-grid{ grid-template-columns:1fr; } .related-strip{ grid-template-columns:1fr 1fr; } }

footer{ background:var(--forest); color:var(--marfil); padding:var(--space-xl) 0 var(--space-md); }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:3rem; padding-bottom:var(--space-lg); }
.footer-brand .logo{ color:var(--white-warm); margin-bottom:1.2rem; }
.footer-brand p{ max-width:30ch; opacity:.75; font-size:0.92rem; }
footer h4{ font-size:0.82rem; color:var(--sage-light); margin-bottom:1.1rem; font-weight:500; }
footer ul li{ margin-bottom:0.7rem; font-size:0.92rem; opacity:.82; }
footer ul li a:hover{ opacity:.7; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-top:var(--space-md); border-top:1px solid var(--line-on-dark); font-size:0.8rem; opacity:.6; }
.footer-bottom .legal{ display:flex; gap:1.4rem; flex-wrap:wrap; }
@media(max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer-top{ grid-template-columns:1fr; gap:2rem; } }

#mobile-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:400;
  background:var(--forest); padding:0.85rem 1rem; padding-bottom:calc(0.85rem + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px rgba(0,0,0,.18);
}
#mobile-bar .row{ display:flex; gap:0.7rem; }
#mobile-bar a{ flex:1; text-align:center; padding:0.85rem 0; border-radius:100px; font-size:0.88rem; font-weight:500; }
#mobile-bar a.call{ background:var(--white-warm); color:var(--forest); }
#mobile-bar a.dir{ border:1px solid var(--line-on-dark); color:var(--white-warm); }
@media(max-width:760px){ #mobile-bar{ display:block; } body{ padding-bottom:78px; } }

::selection{ background:var(--sage); color:var(--white-warm); }