/* ==========================================================================
   Regal Paws USA — Global Styles
   Base tokens, typography, layout, header/nav, hero, sections, footer.
   (Extracted from the original single-page design — visual language preserved.)
   ========================================================================== */

:root{
  --ink:#111110;
  --paper:#FDFDFC;
  --cream:#F3F1EC;
  --line:#DEDAD2;
  --gray:#6E6A62;
  --gray-light:#9C978C;
  --ok:#2f6f4f;
  --low:#9a6a1a;
  --out:#8a2f2f;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Fraunces', serif;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
button{font-family:inherit; cursor:pointer;}
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}

/* Announcement bar */
.announce{
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 32px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
}
.announce-left{white-space:nowrap;}
.announce-right{display:flex; align-items:center; gap:20px;}
.social-icons{display:flex; align-items:center; gap:13px;}
.social-icons svg{width:14px; height:14px; opacity:.85; transition:opacity .2s;}
.social-icons a:hover svg{opacity:1;}
.announce-links{display:flex; gap:22px;}
.announce-links a{opacity:.9; transition:opacity .2s;}
.announce-links a:hover{opacity:1;}

/* Nav */
header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
nav{
  max-width:1280px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
  height:86px; gap:24px;
}
.nav-links{display:flex; gap:38px; font-size:13px; letter-spacing:.07em; text-transform:uppercase; font-weight:500;}
.nav-links a{position:relative; padding:8px 0; transition:opacity .2s;}
.nav-links a:hover{opacity:.55;}
.nav-links a.current{border-bottom:2px solid var(--ink);}
.logo{display:flex; align-items:center; gap:10px;}
.logo-mark{width:40px; height:40px;}
.logo-text{font-family:'Fraunces', serif; font-size:22px; font-weight:600; letter-spacing:.01em;}
.nav-right{display:flex; align-items:center; gap:14px;}
.nav-search{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px;
  padding:9px 8px 9px 18px; min-width:210px; position:relative;
}
.nav-search input{
  border:none; outline:none; background:transparent; font-family:inherit;
  font-size:13px; flex:1; color:var(--ink); min-width:0;
}
.nav-search input::placeholder{color:var(--gray-light);}
.nav-search button{
  width:30px; height:30px; border-radius:50%; border:none;
  background:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nav-search button svg{width:14px; height:14px; stroke:var(--paper);}
.nav-icon-btn{width:38px; height:38px; display:flex; align-items:center; justify-content:center; position:relative; background:none; border:none;}
.nav-icon-btn svg{width:20px; height:20px;}
.cart-count{
  position:absolute; top:2px; right:2px; background:var(--ink); color:var(--paper);
  font-size:9px; min-width:15px; height:15px; padding:0 3px; border-radius:999px; display:flex; align-items:center; justify-content:center;
}
/* Mobile nav toggle */
.nav-toggle{display:none; width:38px; height:38px; background:none; border:none; align-items:center; justify-content:center;}
.nav-toggle svg{width:22px; height:22px; stroke:var(--ink);}

/* Live search dropdown (global + shop) */
.search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
  background:var(--paper); border:1px solid var(--line);
  max-height:360px; overflow-y:auto; display:none; box-shadow:0 18px 40px -24px rgba(17,17,16,.4);
}
.search-results.open{display:block;}
.search-result{
  display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line);
  transition:background .15s;
}
.search-result:last-child{border-bottom:none;}
.search-result:hover{background:var(--cream);}
.search-result img{width:40px; height:40px; object-fit:cover; background:var(--cream); flex-shrink:0;}
.search-result .sr-name{font-size:13px; font-weight:500;}
.search-result .sr-cat{font-size:11px; color:var(--gray); letter-spacing:.04em; text-transform:uppercase;}
.search-result .sr-price{margin-left:auto; font-size:13px; font-weight:500;}
.search-empty{padding:18px 16px; font-size:13px; color:var(--gray); text-align:center;}

/* Buttons */
.btn{
  display:inline-block; padding:16px 36px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--paper); transition:all .25s; background:none; text-align:center;
}
.btn-solid{background:var(--paper); color:var(--ink);}
.btn-solid:hover{background:transparent; color:var(--paper);}
.btn-ghost{background:transparent; color:var(--paper);}
.btn-ghost:hover{background:var(--paper); color:var(--ink);}
/* Dark-on-light button variants for shop pages */
.btn-dark{border-color:var(--ink); background:var(--ink); color:var(--paper);}
.btn-dark:hover{background:transparent; color:var(--ink);}
.btn-outline{border-color:var(--ink); background:transparent; color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:var(--paper);}
.btn[disabled]{opacity:.4; cursor:not-allowed; pointer-events:none;}

/* Hero */
.hero{
  position:relative; color:var(--paper);
  padding:130px 32px 150px;
  overflow:hidden;
  background:var(--ink);
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:75% 30%;
  opacity:.62; filter:saturate(0.45) contrast(1.05);
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(17,17,16,.97) 0%, rgba(17,17,16,.88) 32%, rgba(17,17,16,.35) 62%, rgba(17,17,16,.15) 100%);
}
.hero-inner{position:relative; max-width:1280px; margin:0 auto; padding:0;}
.hero-eyebrow{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#C9C6BF; margin-bottom:18px;}
.hero h1{
  font-size:clamp(38px,6.4vw,72px);
  font-weight:600; line-height:1.02; letter-spacing:-.01em;
  max-width:640px; text-transform:uppercase;
}
.hero p.sub{max-width:480px; margin-top:26px; color:#D8D5CD; font-size:15px; line-height:1.7; letter-spacing:.01em;}
.hero-features{margin-top:22px; display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:#EDEBE5; letter-spacing:.02em;}
.hero-features span{display:flex; align-items:center; gap:14px;}
.hero-features span:not(:last-child)::after{content:'|'; color:#5A574F; margin-left:14px;}
.hero-cta{margin-top:38px; display:flex; gap:14px; flex-wrap:wrap;}

/* Feature cards overlapping hero */
.feature-strip{
  max-width:1180px; margin:-96px auto 0; padding:0 32px; position:relative; z-index:5;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
}
.feature-card{
  background:var(--paper); padding:34px 30px;
  border:1px solid var(--line);
  display:flex; gap:16px; align-items:flex-start;
}
.feature-card:not(:last-child){border-right:none;}
.feature-card svg{width:26px; height:26px; stroke:var(--ink); flex-shrink:0; margin-top:2px;}
.feature-card h4{font-family:'Fraunces',serif; font-size:16.5px; font-weight:500; line-height:1.3;}
.feature-card p{font-size:12.5px; color:var(--gray); margin-top:7px; line-height:1.55;}

/* Category strip */
.cat-strip{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line);}
.cat-strip a{padding:34px 20px; text-align:center; border-right:1px solid var(--line); transition:background .2s;}
.cat-strip a:last-child{border-right:none;}
.cat-strip a:hover{background:var(--cream);}
.cat-strip .num{font-size:11px; letter-spacing:.12em; color:var(--gray-light);}
.cat-strip .name{font-family:'Fraunces',serif; font-size:19px; margin-top:6px;}

/* Section header */
.section{padding:96px 32px 40px;}
.section.alt{background:var(--cream);}
.sec-banner{
  max-width:1180px; margin:0 auto 54px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;
}
.sec-banner-img{width:100%; aspect-ratio:5/4; overflow:hidden; border:1px solid var(--line);}
.sec-banner-img img{width:100%; height:100%; object-fit:cover; filter:saturate(.9);}
.sec-head{
  display:flex; flex-direction:column; align-items:flex-start;
  border-bottom:1px solid var(--ink); padding-bottom:22px; gap:10px;
}
.sec-head .eyebrow{font-size:11.5px; letter-spacing:.18em; color:var(--gray); text-transform:uppercase;}
.sec-head h2{font-size:clamp(28px,4vw,42px); font-weight:500;}
.sec-head p.desc{font-size:14px; color:var(--gray); line-height:1.7; max-width:420px; margin-top:4px;}
.sec-head .count{font-size:12px; color:var(--gray); letter-spacing:.06em; margin-top:6px;}

/* Product grid + card */
.grid{
  max-width:1180px; margin:0 auto 96px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.card{
  background:var(--paper);
  display:flex; flex-direction:column; text-align:center;
  transition:background .2s;
}
.card:hover{background:#FAF9F6;}
.card-media{
  width:100%; aspect-ratio:1/1; display:block; position:relative; overflow:hidden; background:var(--cream);
}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
.card:hover .card-media img{transform:scale(1.05);}
.card-body{padding:20px 22px 26px; display:flex; flex-direction:column; flex:1;}
.badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); padding:4px 8px;
}
.card-name{font-family:'Fraunces',serif; font-size:16.5px; font-weight:500; line-height:1.3;}
.card-name a:hover{opacity:.6;}
.card-sub{font-size:11.5px; color:var(--gray); margin-top:6px; letter-spacing:.03em; flex:1;}
.card-meta{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; font-size:11px; color:var(--gray);}
.card-bottom{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card-price{font-size:15px; font-weight:500;}
.card-price .old{color:var(--gray-light); text-decoration:line-through; font-size:12px; margin-right:6px; font-weight:400;}
.card-add{
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--ink); padding:8px 14px; transition:all .2s; background:none; color:var(--ink);
}
.card-add:hover{background:var(--ink); color:var(--paper);}

/* Rating stars */
.stars{display:inline-flex; gap:1px; color:var(--ink);}
.stars svg{width:12px; height:12px;}
.stars .empty{opacity:.25;}

/* Stock pill */
.stock{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px;}
.stock::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--gray-light);}
.stock.in{color:var(--ok);} .stock.in::before{background:var(--ok);}
.stock.low{color:var(--low);} .stock.low::before{background:var(--low);}
.stock.out{color:var(--out);} .stock.out::before{background:var(--out);}

/* Trust strip */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:52px 32px;}
.trust-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center;}
.trust-grid svg{width:30px; height:30px; margin:0 auto 14px; stroke:var(--ink);}
.trust-grid h4{font-family:'Fraunces',serif; font-size:15.5px; font-weight:500;}
.trust-grid p{font-size:12px; color:var(--gray); margin-top:6px; line-height:1.5;}

/* Newsletter */
.newsletter{background:var(--ink); color:var(--paper); padding:90px 32px; text-align:center;}
.newsletter h2{font-size:clamp(26px,4vw,38px); font-weight:500;}
.newsletter p{color:#C9C6BF; margin-top:14px; font-size:14px;}
.nform{margin:34px auto 0; max-width:420px; display:flex; border-bottom:1px solid #4A4842; padding-bottom:14px;}
.nform input{flex:1; background:transparent; border:none; color:var(--paper); font-size:14px; outline:none; font-family:inherit;}
.nform input::placeholder{color:#87837B;}
.nform button{background:none; border:none; color:var(--paper); font-size:11px; letter-spacing:.14em; text-transform:uppercase;}

/* Footer */
footer{padding:64px 32px 32px; background:var(--paper);}
.foot-grid{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.2fr .8fr .8fr .8fr 1.1fr; gap:32px;
  padding-bottom:48px; border-bottom:1px solid var(--line);
}
.foot-grid li{line-height:1.5; margin-bottom:11px; font-size:13.5px;}
.icon-li{display:flex; align-items:flex-start; gap:9px;}
.icon-li svg{width:15px; height:15px; flex-shrink:0; margin-top:2px; stroke:var(--gray-light);}
.foot-grid h5{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; color:var(--gray);}
.foot-grid ul{list-style:none;}
.foot-grid li a:hover{color:var(--gray);}
.foot-about p{font-size:13px; color:var(--gray); line-height:1.7; max-width:280px;}
.foot-bottom{
  max-width:1180px; margin:0 auto; padding-top:26px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:11.5px; color:var(--gray-light); letter-spacing:.03em;
}

/* Scroll reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.show{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* Toast notifications */
.toast-stack{position:fixed; right:24px; bottom:24px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:320px;}
.toast{
  background:var(--ink); color:var(--paper); padding:14px 18px;
  font-size:13px; letter-spacing:.02em; display:flex; align-items:center; gap:12px;
  box-shadow:0 18px 40px -20px rgba(17,17,16,.6);
  transform:translateY(12px); opacity:0; transition:transform .3s ease, opacity .3s ease;
}
.toast.show{transform:translateY(0); opacity:1;}
.toast svg{width:18px; height:18px; flex-shrink:0;}