/*Theme Name: Petit JoyTheme URI: https://example.comAuthor: WorkBuddyDescription: Celestial-luxury storefront for pets, WooCommerce-ready.Version: 1.1.5Requires at least: 6.4Tested up to: 6.6Requires PHP: 7.4Tags: ecommerce, woocommerce, minimal, luxuryText Domain: stellara*//* =========================================================   Petit Joy — Celestial Pet Jewelry   Design system, components, layouts   ========================================================= *//* ---------- Tokens ---------- */:root{  --bg: #FBF7F0;  --bg-alt: #F4EEE3;  --bg-warm: #F8F0E2;  --ink: #1B1A17;  --ink-soft: #3A3530;  --muted: #807A72;  --line: rgba(27,26,23,0.10);  --line-strong: rgba(27,26,23,0.22);  --gold: #B88A44;  --gold-deep: #8E6A2C;  --gold-soft: #E5D2A8;  --gold-glow: #D9B872;  --rose: #E8D5D0;  --rose-deep: #C9A89F;  --night: #1A2030;  --night-soft: #2A3144;  --night-ink: #E8E2D5;  --jade: #6E8E6F;  --cobalt: #2F4E8A;  --con: 1240px;  --gutter: clamp(20px, 4vw, 48px);  --radius: 2px;  --radius-lg: 6px;  --shadow-sm: 0 8px 24px -12px rgba(27,26,23,0.12);  --shadow: 0 30px 60px -30px rgba(27,26,23,0.20);  --shadow-lg: 0 60px 120px -50px rgba(27,26,23,0.28);  --t: cubic-bezier(.2,.7,.2,1);  --t-slow: cubic-bezier(.16,.84,.24,1);  --font-display: "Cormorant Garamond", "Hoefler Text", "Garamond", "Georgia", "Times New Roman", serif;  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;}/* ---------- Reset ---------- */*,*::before,*::after{ box-sizing:border-box; }html,body{ margin:0; padding:0; }html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }body{  font-family: var(--font-body);  font-size: 15px;  line-height: 1.65;  color: var(--ink);  background: var(--bg);  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-rendering: optimizeLegibility;  font-feature-settings: "ss01","cv11";  overflow-x: hidden;}img,svg,video{ display:block; max-width:100%; }img{ height:auto; }a{ color: inherit; text-decoration: none; transition: color .25s var(--t); }a:hover{ color: var(--gold-deep); }button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }input,select,textarea{ font: inherit; color: inherit; }h1,h2,h3,h4,h5{ margin:0; font-weight:400; line-height:1.12; letter-spacing:-0.01em; }p{ margin:0 0 1em; }ul{ margin:0; padding:0; list-style:none; }hr{ border:0; border-top:1px solid var(--line); margin: 0; }::selection{ background: var(--gold-soft); color: var(--ink); }:root{ --bar-h: 78px; }/* ---------- Layout helpers ---------- */.con{ max-width: var(--con); margin: 0 auto; padding: 0 var(--gutter); }.con-wide{ max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }.pad-y{ padding-top: clamp(60px, 9vw, 130px); padding-bottom: clamp(60px, 9vw, 130px); }.pad-y-sm{ padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 80px); }.eyebrow{  font-family: var(--font-body);  font-size: 11px;  letter-spacing: .28em;  text-transform: uppercase;  color: var(--muted);  font-weight: 500;  display: inline-flex;  align-items: center;  gap: 10px;}.eyebrow::before{  content:""; width: 24px; height: 1px; background: var(--gold); display:inline-block;}.eyebrow.center{ justify-content: center; }.eyebrow.center::after{  content:""; width: 24px; height: 1px; background: var(--gold); display:inline-block;}.display{  font-family: var(--font-display);  font-weight: 400;  font-size: clamp(40px, 6.4vw, 84px);  line-height: 1.02;  letter-spacing: -0.02em;}.display-sm{  font-family: var(--font-display);  font-weight: 400;  font-size: clamp(30px, 4.2vw, 54px);  line-height: 1.08;  letter-spacing: -0.015em;}.display em{ font-style: italic; color: var(--gold-deep); }.lead{  font-family: var(--font-display);  font-size: clamp(18px, 1.9vw, 22px);  line-height: 1.55;  color: var(--ink-soft);  font-weight: 400;  font-style: italic;}.body-muted{ color: var(--muted); }.text-center{ text-align: center; }.divider{  display: flex; align-items: center; justify-content: center; gap: 14px;  color: var(--gold); margin: 0 auto;}.divider .star{ font-size: 8px; }.divider .line{ width: 60px; height: 1px; background: var(--gold); opacity:.6; }/* ---------- Buttons ---------- */.btn{  display: inline-flex;  align-items: center;  justify-content: center;  gap: 10px;  padding: 16px 30px;  border: 1px solid var(--ink);  background: var(--ink);  color: var(--bg);  font-size: 12px;  letter-spacing: .22em;  text-transform: uppercase;  font-weight: 500;  border-radius: var(--radius);  cursor: pointer;  transition: all .35s var(--t);  position: relative;  overflow: hidden;}.btn:hover{ background: transparent; color: var(--ink); transform: translateY(-1px); }.btn-gold{ background: var(--gold); border-color: var(--gold); color: #fff; }.btn-gold:hover{ background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line-strong); }.btn-ghost:hover{ background: var(--ink); color: var(--bg); border-color: var(--ink); }.btn-link{  display: inline-flex; align-items: center; gap: 12px;  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;  color: var(--ink); padding: 8px 0; position: relative;}.btn-link::after{  content:""; position:absolute; left:0; right:0; bottom:4px; height:1px;  background: var(--ink); transform-origin: left; transform: scaleX(1);  transition: transform .4s var(--t);}.btn-link:hover::after{ transform: scaleX(0); transform-origin: right; }.btn-sm{ padding: 12px 22px; font-size: 11px; }.btn .arr{ display:inline-block; transition: transform .3s var(--t); }.btn:hover .arr{ transform: translateX(4px); }/* ---------- Top bar ---------- */.topbar{  background: var(--ink);  color: var(--night-ink);  font-size: 11px;  letter-spacing: .24em;  text-transform: uppercase;  padding: 10px 0;  text-align: center;  position: relative;  overflow: hidden;}.topbar .marquee{  display: flex; gap: 50px; justify-content: center; align-items: center;  opacity: .85;}.topbar .dot{ width: 4px; height: 4px; border-radius:50%; background: var(--gold); display:inline-block; }/* ---------- Nav ---------- */.nav-wrap{  position: sticky; top:0; z-index: 50;  background: rgba(251,247,240,0.92);  backdrop-filter: saturate(140%) blur(14px);  -webkit-backdrop-filter: saturate(140%) blur(14px);  border-bottom: 1px solid transparent;  transition: border-color .3s var(--t), background .3s var(--t);}.nav-wrap.scrolled{ border-bottom-color: var(--line); background: rgba(251,247,240,0.96); }.nav{  height: var(--bar-h);  display: grid;  grid-template-columns: 1fr auto 1fr;  align-items: center;  gap: 24px;}.nav .left, .nav .right{ display: flex; align-items: center; gap: 28px; }.nav .right{ justify-content: flex-end; }.nav a.nav-link{  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);  position: relative; padding: 6px 0;}.nav a.nav-link.active::after,.nav a.nav-link:hover::after{  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background: var(--gold);}/* nav link with pet icon (For Cats / For Dogs) */.nav-link.nav-pet{  display: inline-flex; align-items: center; gap: 9px;  padding: 4px 2px 4px 0;}.nav-link.nav-pet .nav-pet-icon{  width: 32px; height: 32px; border-radius: 50%;  object-fit: cover; display: inline-block; flex: 0 0 32px;  box-shadow: 0 2px 6px rgba(60,40,20,.18), 0 0 0 2px #fff, 0 0 0 3.5px var(--sage, #5b9b5b);  transition: transform .25s var(--t), box-shadow .25s var(--t);}.nav-link.nav-pet:hover .nav-pet-icon,.nav-link.nav-pet.active .nav-pet-icon{  transform: scale(1.10) rotate(-4deg);  box-shadow: 0 4px 12px rgba(60,40,20,.28), 0 0 0 2px #fff, 0 0 0 4px var(--ink, #3B2D1F);}.nav-link.nav-pet:hover::after{ display: none; }.brand{  font-family: var(--font-display);  font-size: 26px;  letter-spacing: .26em;  text-transform: uppercase;  color: var(--ink);  font-weight: 500;  display: inline-flex; align-items: center; gap: 10px;}.brand .brand-glyph{  width: 32px; height: 32px; display:inline-block; object-fit: contain;}.brand small{  display:block; font-family: var(--font-body); font-size: 9px;  letter-spacing: .32em; color: var(--muted); margin-top: 2px; text-align:center;}.cart-btn{  position: relative;  display: inline-flex; align-items: center; gap: 8px;  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;  color: var(--ink-soft);  padding: 8px 0;}.cart-btn .bag{  width: 22px; height: 22px; display:inline-block; position: relative;}.cart-btn .count{  position: absolute; top: -4px; right: -10px;  min-width: 18px; height: 18px; border-radius: 50%;  background: var(--gold); color: #fff;  font-size: 10px; letter-spacing: 0; font-weight: 600;  display: inline-flex; align-items: center; justify-content: center;  padding: 0 5px;  transition: transform .3s var(--t);}.cart-btn .count.bump{ transform: scale(1.25); }.menu-toggle{ display:none; }/* ---------- Image frame (hides platform watermark) ---------- */.img-frame{  position: relative;  overflow: hidden;  background: var(--bg-alt);  isolation: isolate;}.img-frame.r-4-5{ aspect-ratio: 4/5; }.img-frame.r-1-1{ aspect-ratio: 1/1; }.img-frame.r-3-2{ aspect-ratio: 3/2; }.img-frame.r-16-9{ aspect-ratio: 16/9; }.img-frame img{  width: 100%; height: 100%;  object-fit: cover;  transition: transform 1.2s var(--t-slow), filter .6s var(--t);  transform: scale(1.12); /* hides bottom-right watermark */  transform-origin: center 45%;}.img-frame.portrait img{ transform: scale(1.12); transform-origin: center 45%; }.img-frame.landscape img{ transform: scale(1.08); transform-origin: center 35%; }.img-frame:hover img{ transform: scale(1.16); }.img-frame .shade{  position:absolute; inset:0;  background: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,0.08) 100%);  pointer-events: none;}.img-frame .corner{  position:absolute; top:14px; left:14px;  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;  color: var(--ink); background: rgba(251,247,240,0.86);  padding: 6px 10px; backdrop-filter: blur(4px);}/* ---------- Hero (home) ---------- */.hero{  position: relative;  background: var(--bg);  padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 110px);  overflow: hidden;}.hero-grid{  display: grid;  grid-template-columns: 1.05fr 1fr;  gap: clamp(40px, 6vw, 90px);  align-items: center;}.hero-content{ max-width: 560px; }.hero h1{ margin-bottom: 26px; }.hero .lead{ margin-bottom: 38px; max-width: 480px; }.hero-meta{  display: flex; gap: 28px; margin-top: 44px;  padding-top: 28px; border-top: 1px solid var(--line);  flex-wrap: wrap;}.hero-meta .item{  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);  display: flex; align-items: center; gap: 10px;}.hero-meta .item::before{  content:""; width: 6px; height: 6px; background: var(--gold); border-radius: 50%;}.hero-visual{ position: relative; }.hero-visual .img-frame{ border-radius: var(--radius-lg); box-shadow: var(--shadow); }.hero-visual .badge{  position:absolute; left: -20px; top: 30px;  background: var(--ink); color: var(--bg);  padding: 18px 20px;  font-family: var(--font-display);  font-size: 15px; font-style: italic;  border-radius: var(--radius);  box-shadow: var(--shadow);  display: flex; align-items: center; gap: 10px;  transform: rotate(-4deg);}.hero-visual .badge .star{ color: var(--gold-glow); }.hero-visual .floater{  position:absolute; right: -10px; bottom: 40px;  background: var(--bg); color: var(--ink);  padding: 14px 18px;  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;  border: 1px solid var(--line);  border-radius: var(--radius);  box-shadow: var(--shadow-sm);}.hero-visual .floater b{ color: var(--gold-deep); font-weight: 600; }.hero-stars{  position:absolute; inset:0; pointer-events:none; opacity:.7;}.hero-stars span{  position:absolute; color: var(--gold); font-size: 10px;}.hero-stars span:nth-child(1){ top:12%; left:8%; animation-delay: 0s; }.hero-stars span:nth-child(2){ top:60%; left:3%; animation-delay: 1.2s; }.hero-stars span:nth-child(3){ top:30%; right:10%; animation-delay: 2.4s; }.hero-stars span:nth-child(4){ top:80%; right:20%; animation-delay: 0.8s; }.hero-stars span:nth-child(5){ top:8%; right:30%; animation-delay: 1.8s; }/* ---------- Section header ---------- */.sec-head{  display: flex; align-items: end; justify-content: space-between;  gap: 40px; margin-bottom: 56px;  flex-wrap: wrap;}.sec-head .text{ max-width: 620px; }.sec-head .text .eyebrow{ margin-bottom: 18px; }.sec-head .text h2{ margin-bottom: 16px; }.sec-head .text p{ color: var(--muted); font-size: 15px; }.sec-head .text.center{ margin: 0 auto; text-align: center; }.sec-head .actions{ display: flex; gap: 12px; }/* ---------- Featured products grid ---------- */.products-grid{  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 28px 24px;}.product-card{  display: block;  background: transparent;  position: relative;}.product-card .img-wrap{  overflow: hidden; background: var(--bg-alt);  border-radius: var(--radius);  transition: transform .6s var(--t);}.product-card .img-frame{ border-radius: var(--radius); }.product-card:hover .img-frame img{ transform: scale(1.18); }.product-card .quick{  position: absolute; left: 14px; right: 14px; bottom: 14px;  display: flex; justify-content: center; gap: 8px;  opacity: 0; transform: translateY(10px);  transition: all .4s var(--t);}.product-card:hover .quick{ opacity: 1; transform: translateY(0); }.product-card .quick .btn{ background: rgba(255,255,255,0.94); color: var(--ink); border-color: transparent; backdrop-filter: blur(6px); }.product-card .quick .btn:hover{ background: var(--ink); color: #fff; }.product-card .meta{  display: flex; justify-content: space-between; align-items: start;  padding-top: 18px; gap: 14px;}.product-card .meta .name{  font-family: var(--font-display);  font-size: 19px;  letter-spacing: -0.005em;  color: var(--ink);  line-height: 1.25;}.product-card .meta .col{ font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }.product-card .meta .price{ font-family: var(--font-display); font-size: 17px; color: var(--ink-soft); white-space: nowrap; }.product-card .swatches{ display: flex; gap: 6px; margin-top: 8px; }.product-card .swatches span{ width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line-strong); }/* ---------- Lookbook ---------- */.lookbook{  display: grid;  grid-template-columns: repeat(4, 1fr);  grid-auto-rows: 240px;  gap: 14px;}.lookbook .cell{  position: relative; overflow: hidden; border-radius: var(--radius);  background: var(--bg-alt);  cursor: pointer;}.lookbook .cell .img-frame{ width: 100%; height: 100%; }.lookbook .cell .label{  position: absolute; left: 16px; bottom: 16px;  background: rgba(251,247,240,0.92); backdrop-filter: blur(6px);  padding: 8px 14px;  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink);  border-radius: var(--radius);  transform: translateY(8px); opacity: 0;  transition: all .4s var(--t);}.lookbook .cell:hover .label{ transform: translateY(0); opacity: 1; }.lookbook .cell.tall{ grid-row: span 2; }.lookbook .cell.wide{ grid-column: span 2; }.lookbook .cell.large{ grid-row: span 2; grid-column: span 2; }/* ---------- Comfort / guide steps ---------- */.guide{  background: var(--bg-warm);  border-radius: var(--radius-lg);  padding: clamp(50px, 7vw, 100px) clamp(30px, 5vw, 80px);  position: relative;  overflow: hidden;}.guide::before{  content:""; position:absolute; top:-80px; right:-80px; width: 280px; height: 280px;  border-radius: 50%; background: radial-gradient(circle, rgba(184,138,68,0.10), transparent 65%);  pointer-events: none;}.guide-grid{  display: grid; grid-template-columns: 1fr 1.4fr;  gap: clamp(40px, 6vw, 80px); align-items: center;  position: relative;}.guide-steps{ display: grid; gap: 36px; }.guide-step{  display: grid; grid-template-columns: 60px 1fr; gap: 22px;  padding-bottom: 36px; border-bottom: 1px solid var(--line);}.guide-step:last-child{ border-bottom: 0; padding-bottom: 0; }.guide-step .num{  font-family: var(--font-display); font-size: 38px; color: var(--gold); font-style: italic;  line-height: 1;}.guide-step h3{  font-family: var(--font-display); font-size: 24px; margin-bottom: 8px;}.guide-step p{ color: var(--muted); margin: 0; font-size: 14px; max-width: 460px; }/* ---------- Shipping banner ---------- */.shipping{  background: var(--night);  color: var(--night-ink);  padding: 22px 0;  border-radius: var(--radius-lg);  margin: 0 var(--gutter);  position: relative;}.shipping .con{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; align-items: center; }.shipping .item{ display: flex; align-items: center; gap: 14px; }.shipping .icon{  width: 36px; height: 36px; border-radius: 50%;  background: rgba(255,255,255,0.06);  display: inline-flex; align-items: center; justify-content: center;  color: var(--gold-glow); flex-shrink: 0;}.shipping .text{ font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }.shipping .text b{ display: block; font-weight: 600; color: #fff; margin-bottom: 4px; letter-spacing: .22em; }.shipping .text span{ color: rgba(232,226,213,0.65); }/* ---------- Newsletter ---------- */.newsletter{  text-align: center;  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);  border-radius: var(--radius-lg);  padding: clamp(60px, 8vw, 110px) clamp(24px, 5vw, 80px);  position: relative;  overflow: hidden;}.newsletter::before, .newsletter::after{  content:""; position:absolute; width: 300px; height: 300px; border-radius: 50%;  background: radial-gradient(circle, rgba(184,138,68,0.10), transparent 65%);  pointer-events: none;}.newsletter::before{ top:-120px; left:-80px; }.newsletter::after{ bottom:-120px; right:-80px; }.newsletter .inner{ position: relative; max-width: 560px; margin: 0 auto; }.newsletter form{ display: flex; gap: 8px; margin-top: 32px; max-width: 480px; margin-left: auto; margin-right: auto; }.newsletter input{  flex: 1; padding: 16px 22px; border: 1px solid var(--line-strong);  background: rgba(255,255,255,0.6); border-radius: var(--radius);  font-size: 14px; letter-spacing: .03em; outline: none;  transition: all .3s var(--t);}.newsletter input:focus{ border-color: var(--gold); background: #fff; }.newsletter .p{ color: var(--muted); font-size: 13px; margin-top: 18px; }/* ---------- Marquee trust ---------- */.trust{  display: flex; justify-content: center; align-items: center;  gap: clamp(30px, 6vw, 80px);  flex-wrap: wrap;  padding: 40px 0;  border-top: 1px solid var(--line);  border-bottom: 1px solid var(--line);}.trust .item{  font-family: var(--font-display);  font-size: 18px;  color: var(--ink-soft);  font-style: italic;  display: flex; align-items: center; gap: 12px;}.trust .item::before{ content:"✦"; color: var(--gold); font-style: normal; }/* ---------- Footer ---------- */footer{  /* brand-mark zone is light; column zone is dark — handled by children */  margin-top: 80px;  color: var(--night-ink);}.footer-brand-mark{  position: relative; overflow: hidden;  background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);  padding: clamp(60px, 8vw, 110px) 0 clamp(70px, 9vw, 130px);  border-top: 1px solid var(--line);}/* subtle sparkle field */.footer-brand-mark::before{  content: '';  position: absolute; inset: 0;  background-image:    radial-gradient(circle at 12% 24%, var(--gold) 0 1.5px, transparent 2px),    radial-gradient(circle at 86% 72%, var(--rose-deep) 0 1.5px, transparent 2px),    radial-gradient(circle at 35% 78%, var(--jade) 0 1.5px, transparent 2px),    radial-gradient(circle at 70% 22%, var(--gold-soft) 0 2px, transparent 2.5px),    radial-gradient(circle at 50% 50%, var(--rose) 0 1.5px, transparent 2px),    radial-gradient(circle at 20% 70%, var(--cobalt) 0 1px, transparent 1.5px),    radial-gradient(circle at 92% 38%, var(--jade) 0 1px, transparent 1.5px);  opacity: .45;  pointer-events: none;}.wordmark{  position: relative;  display: flex;  align-items: center;  justify-content: center;  flex-wrap: nowrap;  white-space: nowrap;  max-width: 1400px;  margin: 0 auto;  padding: 0 clamp(20px, 4vw, 48px);  height: clamp(150px, 16vw, 230px);  z-index: 1;}.l{  font-family: var(--font-display);  font-size: clamp(64px, 12vw, 176px);  line-height: 1;  font-weight: 700;  letter-spacing: -0.03em;  color: var(--c, var(--ink));  display: inline-block;  padding: 0 0.004em;  text-shadow: 0 2px 0 rgba(255,255,255,0.4);  transition: transform .4s var(--t-slow);}.l-1{ transform: rotate(-3deg); }.l-2{ transform: rotate(2deg) translateY(6px); }.l-3{ transform: rotate(-1deg); }.l-4{ transform: rotate(3deg) translateY(-5px); }.l-5{ transform: rotate(4deg) translateY(-4px); }.l-6{ transform: rotate(-2deg) translateY(8px); }.l-7{ transform: rotate(2deg) translateY(6px); }.l-8{ transform: rotate(-3deg) translateY(-4px); }.wordmark:hover .l-1{ transform: rotate(-6deg) translateY(-6px); }.wordmark:hover .l-7{ transform: rotate(-4deg) translateY(-5px); }.wordmark:hover .l-8{ transform: rotate(5deg) translateY(7px); }.sticker{  position: absolute;  z-index: 3;  height: auto;  pointer-events: none;  filter: drop-shadow(0 10px 24px rgba(27,26,23,0.18));}.sticker-cat  { width: clamp(80px, 9vw, 140px);  left: 4%;   bottom: -36%; transform: rotate(-8deg); }.sticker-dog  { width: clamp(80px, 9vw, 140px);  left: 36%;  bottom: -34%; transform: rotate(6deg); }.sticker-heart  { width: clamp(70px, 7vw, 110px);  right: 36%; top: -36%;     transform: rotate(14deg); }.sticker-love  { width: clamp(80px, 9vw, 128px);  left: 22%;  top: -13%;     transform: rotate(-14deg); }.sticker-gem  { width: clamp(70px, 8vw, 120px);  right: 4%;   top: -34%;    transform: rotate(8deg); }.sparkle{  position: absolute; z-index: 2;  font-family: var(--font-display);  color: var(--gold);  opacity: .55;  pointer-events: none;}.s-1{ top: 14%; left: 12%; font-size: 22px; transform: rotate(12deg); }.s-2{ top: 22%; right: 14%; font-size: 14px; color: var(--rose-deep); }.s-3{ bottom: 18%; left: 30%; font-size: 18px; color: var(--jade); }.s-4{ top: 60%; right: 32%; font-size: 16px; }.footer-tag{  position: relative; z-index: 1;  display: flex; justify-content: center; align-items: center;  gap: 16px; flex-wrap: wrap;  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;  color: var(--muted);  padding: 0 24px;  margin-top: clamp(40px, 6vw, 70px);}.footer-tag .dot{ color: var(--gold); }.footer-body{  background: var(--ink);  color: var(--night-ink);  padding: 80px 0 30px;}.footer-grid{  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 60px;  padding-bottom: 50px;  border-bottom: 1px solid rgba(255,255,255,0.08);}.footer-grid h4{  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;  color: var(--gold-glow); margin-bottom: 22px; font-weight: 500;}.footer-grid a{ display: block; color: rgba(232,226,213,0.7); font-size: 14px; padding: 6px 0; transition: color .3s var(--t); }.footer-grid a:hover{ color: var(--gold-glow); }.footer-brand .brand{ color: var(--bg); }.footer-brand p{ color: rgba(232,226,213,0.6); margin-top: 18px; font-size: 14px; max-width: 320px; line-height: 1.65; }.footer-bottom{  display: flex; justify-content: space-between; align-items: center;  padding-top: 28px; font-size: 12px; color: rgba(232,226,213,0.55);  letter-spacing: .12em;}.footer-bottom .pay{ display: flex; gap: 10px; }.footer-bottom .pay span{  padding: 4px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius);  font-size: 10px; letter-spacing: .16em;}@media (max-width: 900px){  .wordmark{ gap: 0; padding: 0 6vw; }  .footer-brand-mark{ padding: clamp(40px, 7vw, 70px) 0 clamp(50px, 8vw, 90px); }  .sticker-cat  { width: clamp(48px, 12vw, 70px);  left: 2%;   bottom: -22%; }  .sticker-dog  { width: clamp(48px, 12vw, 70px);  left: 38%;  bottom: -20%; }  .sticker-heart{ width: clamp(38px, 10vw, 58px);  right: 30%; top: -22%;     transform: rotate(14deg); }  .sticker-love { width: clamp(58px, 14vw, 92px);  left: 22%;  top: -14%;     transform: rotate(-14deg); }  .sticker-gem  { width: clamp(36px, 10vw, 56px);  right: 2%;  top: -18%;     transform: rotate(8deg); }  .sparkle{ opacity: .35; }  .footer-tag{ font-size: 10px; gap: 10px; }}@media (max-width: 540px){  .wordmark{ height: auto; min-height: 96px; padding: 24px 4vw; flex-wrap: wrap; row-gap: 8px; column-gap: 0; white-space: normal; }  .l{ font-size: clamp(48px, 16vw, 80px); }  .sticker-cat  { width: 36px;  left: 1%;   bottom: -16%; }  .sticker-dog  { width: 36px;  left: 40%;  bottom: -14%; }  .sticker-heart{ width: 30px;  right: 28%; top: -18%; }  .sticker-love { width: 44px;  left: 18%;  top: -12%; }  .sticker-gem  { width: 28px;  right: 1%;  top: -16%; }  .sparkle{ display: none; }  .info-row{ grid-template-columns: 1fr; gap: 16px; }  .info-row li{ padding-left: 14px; }}@media (prefers-reduced-motion: reduce){  .l, .l-1, .l-2, .l-3, .l-5, .l-6{ transform: none; }  .wordmark:hover .l-1{ transform: none; }}/* ---------- Hot feature video showcase ---------- */.hot-feature{ background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%); }.video-stage{  position: relative;  border-radius: var(--radius-lg);  overflow: hidden;  aspect-ratio: 16/9;  background: var(--ink);  box-shadow: var(--shadow-lg);}.video-stage video{  width: 100%; height: 100%; object-fit: cover; display: block;}.video-tag{  position: absolute; top: 18px; left: 18px;  display: flex; align-items: center; gap: 8px;  background: rgba(27,26,23,0.62);  color: var(--bg);  padding: 6px 14px;  border-radius: 99px;  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;  backdrop-filter: blur(6px);  -webkit-backdrop-filter: blur(6px);}.video-meta{  position: absolute; right: 18px; bottom: 18px; left: auto;  background: rgba(27,26,23,0.55);  color: var(--bg);  padding: 12px 18px;  border-radius: var(--radius);  backdrop-filter: blur(6px);  -webkit-backdrop-filter: blur(6px);  max-width: 70%;}.video-meta .title{ font-family: var(--font-display); font-size: 18px; line-height: 1.1; }.video-meta .sub{ color: rgba(232,226,213,0.7); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin-top: 4px; }.rec-dot{  display: inline-block;  width: 8px; height: 8px;  border-radius: 50%;  background: var(--rose-deep);  box-shadow: 0 0 0 0 rgba(201,168,159,0.7);  animation: sj-pulse 1.6s infinite;  vertical-align: middle;}@keyframes sj-pulse{  0%   { box-shadow: 0 0 0 0 rgba(201,168,159,0.7); }  70%  { box-shadow: 0 0 0 10px rgba(201,168,159,0); }  100% { box-shadow: 0 0 0 0 rgba(201,168,159,0); }}@media (prefers-reduced-motion: reduce){  .rec-dot{ animation: none; }}/* ---------- Cart drawer ---------- */.drawer-overlay{  position: fixed; inset: 0; background: rgba(27,26,23,0.42);  backdrop-filter: blur(2px); z-index: 90;  opacity: 0; visibility: hidden; transition: all .4s var(--t);}.drawer-overlay.open{ opacity: 1; visibility: visible; }.drawer{  position: fixed; top: 0; right: 0; bottom: 0;  width: min(440px, 100vw);  background: var(--bg);  z-index: 100;  transform: translateX(100%);  transition: transform .5s var(--t);  display: flex; flex-direction: column;  box-shadow: -30px 0 80px -30px rgba(0,0,0,0.3);}.drawer.open{ transform: translateX(0); }.drawer-head{  display: flex; justify-content: space-between; align-items: center;  padding: 22px 28px; border-bottom: 1px solid var(--line);}.drawer-head h3{ font-family: var(--font-display); font-size: 22px; }.drawer-head .close{ width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .3s var(--t); }.drawer-head .close:hover{ background: var(--bg-alt); }.drawer-body{ flex: 1; overflow-y: auto; padding: 20px 28px; }.drawer-foot{ padding: 22px 28px; border-top: 1px solid var(--line); background: var(--bg-alt); }.drawer-empty{ text-align: center; padding: 60px 20px; color: var(--muted); }.drawer-empty .icon{ font-size: 40px; color: var(--gold); margin-bottom: 16px; }.drawer-item{  display: grid; grid-template-columns: 80px 1fr auto; gap: 16px;  padding: 18px 0; border-bottom: 1px solid var(--line);  align-items: center;}.drawer-item:last-child{ border-bottom: 0; }.drawer-item .img-frame{ width: 80px; height: 100px; border-radius: var(--radius); }.drawer-item .name{ font-family: var(--font-display); font-size: 16px; line-height: 1.3; }.drawer-item .opt{ font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }.drawer-item .row{ display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }.drawer-item .qty{ display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); }.drawer-item .qty button{ width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }.drawer-item .qty .n{ width: 28px; text-align: center; font-size: 13px; }.drawer-item .price{ font-family: var(--font-display); font-size: 17px; }.drawer-item .remove{ color: var(--muted); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }.drawer-item .remove:hover{ color: var(--ink); }.drawer-sub{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }.drawer-sub .l{ font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }.drawer-sub .v{ font-family: var(--font-display); font-size: 26px; }.drawer-foot .btn{ width: 100%; }.drawer-foot .note{ font-size: 11px; color: var(--muted); text-align: center; margin-top: 12px; letter-spacing: .14em; }/* ---------- Toast ---------- */.toast{  position: fixed; left: 50%; top: 90px; transform: translate(-50%, -20px);  background: var(--ink); color: var(--bg);  padding: 14px 22px; border-radius: var(--radius);  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;  z-index: 200; opacity: 0; transition: all .4s var(--t);  box-shadow: var(--shadow);  display: inline-flex; align-items: center; gap: 10px;}.toast.show{ opacity: 1; transform: translate(-50%, 0); }.toast .dot{ width: 6px; height: 6px; background: var(--gold-glow); border-radius: 50%; }/* ---------- Shop filter chips (species + collections) ---------- */.filters .chip{  padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;  color: var(--ink-soft); background: transparent; text-decoration: none;  transition: all .3s var(--t);}.filters .chip:hover{ border-color: var(--ink); }.filters .chip.active{ background: var(--ink); color: var(--bg); border-color: var(--ink); }.filters-sub{ margin-top: 12px; }.chip-sm{  padding: 7px 14px; font-size: 10px; letter-spacing: .16em;  border: 1px solid var(--line); border-radius: 999px;  color: var(--ink-soft); text-decoration: none; transition: all .3s var(--t);}.chip-sm:hover{ border-color: var(--ink); }.chip-sm.active{ background: var(--bg-alt); color: var(--ink); border-color: var(--line-strong); }/* ---------- Shop by companion (cat / dog split band) ---------- */.display-xs{ font-family: var(--font-display); font-weight: 500; line-height: 1.14; }.pet-split-grid{  display: grid; grid-template-columns: 1fr 1fr; gap: 30px;}.pet-tile{  position: relative; display: block; border-radius: var(--radius-lg);  overflow: hidden; box-shadow: var(--shadow); isolation: isolate;  text-decoration: none;}.pet-tile .img-frame{ border-radius: 0; }.pet-tile .img-frame img{ transform: scale(1.06); transform-origin: center 40%; }.pet-tile:hover .img-frame img{ transform: scale(1.1); }.pet-tile .overlay{  position: absolute; inset: 0; z-index: 2;  display: flex; flex-direction: column; justify-content: flex-end;  gap: 14px; padding: clamp(28px, 4vw, 48px);  background: linear-gradient(180deg, rgba(27,26,23,0) 35%, rgba(27,26,23,0.62) 100%);  color: #fff;}.pet-tile .overlay .eyebrow{ color: rgba(255,255,255,0.82); }.pet-tile .overlay .display-xs{  font-size: clamp(24px, 2.6vw, 34px); color: #fff;  max-width: 16ch; text-shadow: 0 2px 18px rgba(0,0,0,0.25);}.btn-light{  align-self: flex-start;  display: inline-flex; align-items: center; gap: 10px;  padding: 13px 24px; border-radius: var(--radius);  background: #fff; color: var(--ink); border: 1px solid #fff;  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;  transition: all .3s var(--t);}.btn-light:hover{ background: var(--gold); border-color: var(--gold); color: #fff; transform: translateY(-1px); }.btn-light .arr{ transition: transform .3s var(--t); }.btn-light:hover .arr{ transform: translateX(4px); }@media (max-width: 720px){  .pet-split-grid{ grid-template-columns: 1fr; }}/* ---------- Products page ---------- */.products-toolbar{  display: flex; align-items: center; justify-content: space-between;  padding: 30px 0;  border-bottom: 1px solid var(--line);  margin-bottom: 50px;  gap: 20px;  flex-wrap: wrap;}.filters{ display: flex; gap: 6px; flex-wrap: wrap; }.filters button{  padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;  color: var(--ink-soft); transition: all .3s var(--t);}.filters button:hover{ border-color: var(--ink); }.filters button.active{ background: var(--ink); color: var(--bg); border-color: var(--ink); }.products-page-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 30px; }.page-hero{  padding: clamp(60px, 8vw, 110px) 0 clamp(30px, 4vw, 50px);  text-align: center;}.page-hero .display{ margin-bottom: 18px; }.page-hero .lead{ max-width: 600px; margin: 0 auto; }/* ---------- Product detail ---------- */.pd{  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 100px);  padding-top: 40px;}.pd-gallery{ display: grid; gap: 16px; }.pd-gallery .main{ border-radius: var(--radius-lg); overflow: hidden; }.pd-gallery .thumbs{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.pd-gallery .thumb{  aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;  border: 1px solid transparent; cursor: pointer; transition: border-color .25s var(--t);}.pd-gallery .thumb.active{ border-color: var(--ink); }.pd-info{ padding-top: 6px; }.pd-info .col{ font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }.pd-info h1{ font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 14px; }.pd-info .price{ font-family: var(--font-display); font-size: 30px; color: var(--gold-deep); margin-bottom: 28px; }.pd-info .price small{ font-size: 13px; color: var(--muted); margin-left: 6px; letter-spacing: .14em; }.pd-info .desc{ color: var(--ink-soft); margin-bottom: 32px; max-width: 520px; line-height: 1.7; }.pd-info .opt-label{ font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; display: flex; justify-content: space-between; }.pd-info .opt-label a{ color: var(--gold-deep); }.sizes{ display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }.sizes button{  width: 56px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius);  background: transparent; font-size: 13px; letter-spacing: .1em;  transition: all .25s var(--t);}.sizes button:hover{ border-color: var(--ink); }.sizes button.active{ background: var(--ink); color: var(--bg); border-color: var(--ink); }.color-row{ display: flex; gap: 10px; margin-bottom: 30px; }.color-row span{ width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); cursor:pointer; transition: transform .25s var(--t); }.color-row span:hover{ transform: scale(1.1); }.qty-row{ display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }.qty-row .qty{ display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); }.qty-row .qty button{ width: 44px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }.qty-row .qty .n{ width: 44px; text-align: center; font-size: 14px; }.pd-actions{ display: flex; gap: 12px; margin-bottom: 34px; }.pd-actions .btn{ flex: 1; }.pd-features{  border-top: 1px solid var(--line); padding-top: 28px;  display: grid; gap: 14px;}.pd-features .row{ display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-soft); }.pd-features .icon{ width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }.pd-tabs{ margin-top: 80px; border-top: 1px solid var(--line); padding-top: 40px; }.pd-tabs .tabs{ display: flex; gap: 30px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }.pd-tabs .tabs button{  padding: 14px 0; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;  transition: all .3s var(--t);}.pd-tabs .tabs button.active{ color: var(--ink); border-bottom-color: var(--gold); }.pd-tabs .panels{ color: var(--ink-soft); line-height: 1.8; max-width: 720px; }.pd-tabs .panels h4{ font-family: var(--font-display); font-size: 22px; margin-bottom: 12px; color: var(--ink); }.pd-tabs .panels ul{ padding-left: 0; }.pd-tabs .panels li{ padding: 6px 0; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; }.pd-tabs .panels li:last-child{ border-bottom: 0; }.pd-related{ padding-top: 100px; }/* ---------- Cart page ---------- */.cart-page{ padding: 60px 0 100px; }.cart-grid{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 60px; align-items: start; }.cart-table{ border-top: 1px solid var(--line); }.cart-row{  display: grid; grid-template-columns: 120px 1fr auto; gap: 24px;  padding: 24px 0; border-bottom: 1px solid var(--line);  align-items: center;}.cart-row .img-frame{ width: 120px; height: 150px; border-radius: var(--radius); }.cart-row .name{ font-family: var(--font-display); font-size: 22px; line-height: 1.2; }.cart-row .meta{ font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }.cart-row .price{ font-family: var(--font-display); font-size: 22px; margin-top: 8px; }.cart-row .ctrl{ display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }.cart-row .qty{ display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); }.cart-row .qty button{ width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }.cart-row .qty .n{ width: 36px; text-align: center; font-size: 13px; }.cart-row .remove{ font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }.cart-row .remove:hover{ color: var(--ink); }.cart-summary{  background: var(--bg-warm);  padding: 36px 32px;  border-radius: var(--radius-lg);  position: sticky; top: 110px;}.cart-summary h3{ font-family: var(--font-display); font-size: 28px; margin-bottom: 24px; }.cart-summary .line{ display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }.cart-summary .line:last-of-type{ border-bottom: 0; }.cart-summary .total{ font-family: var(--font-display); font-size: 24px; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--line-strong); }.cart-summary .btn{ width: 100%; margin-top: 16px; }.cart-summary .note{ font-size: 11px; color: var(--muted); text-align: center; margin-top: 14px; letter-spacing: .14em; line-height: 1.7; }.cart-summary .promo{ display: flex; gap: 8px; margin-bottom: 18px; }.cart-summary .promo input{ flex: 1; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgba(255,255,255,0.6); font-size: 13px; outline: none; }.cart-summary .promo input:focus{ border-color: var(--gold); }.cart-summary .promo button{ padding: 12px 18px; border: 1px solid var(--ink); border-radius: var(--radius); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }.cart-summary .promo button:hover{ background: var(--ink); color: var(--bg); }/* ---------- Checkout ---------- */.checkout{ padding: 60px 0 100px; }.checkout h1{ font-family: var(--font-display); font-size: clamp(34px, 4vw, 50px); margin-bottom: 8px; }.checkout .sub{ color: var(--muted); margin-bottom: 40px; }.checkout-grid{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: start; }.checkout-steps{ display: flex; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; }.checkout-steps .step{  display: inline-flex; align-items: center; gap: 10px;  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);}.checkout-steps .step.active{ color: var(--ink); }.checkout-steps .n{ width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }.checkout-steps .step.active .n{ background: var(--ink); color: var(--bg); border-color: var(--ink); }.checkout-steps .sep{ flex: 1; height: 1px; background: var(--line); min-width: 20px; align-self: center; }.field{ display: block; margin-bottom: 18px; }.field label{ display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }.field input, .field select, .field textarea{  width: 100%; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius);  background: rgba(255,255,255,0.6); font-size: 14px; outline: none;  transition: all .3s var(--t);}.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--gold); background: #fff; }.field-row{ display: grid; gap: 14px; }.field-row.r-2{ grid-template-columns: 1fr 1fr; }.field-row.r-3{ grid-template-columns: 2fr 1fr 1fr; }.section-title{ font-family: var(--font-display); font-size: 22px; margin: 30px 0 14px; }.shipping-option, .payment-option{  display: flex; align-items: center; gap: 16px; padding: 18px 20px;  border: 1px solid var(--line-strong); border-radius: var(--radius); margin-bottom: 10px;  cursor: pointer; transition: all .25s var(--t);}.shipping-option:hover, .payment-option:hover{ border-color: var(--ink); }.shipping-option.active, .payment-option.active{ border-color: var(--ink); background: var(--bg-alt); }.shipping-option .label{ flex: 1; }.shipping-option .label b{ display: block; font-weight: 600; font-size: 14px; }.shipping-option .label span{ font-size: 12px; color: var(--muted); }.shipping-option .price{ font-family: var(--font-display); font-size: 18px; }.payment-option .label b{ display: block; font-weight: 600; font-size: 14px; }.payment-option .label span{ font-size: 12px; color: var(--muted); }.payment-option .icon{ width: 40px; height: 26px; border: 1px solid var(--line); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; letter-spacing: .1em; color: var(--muted); }.order-summary{ background: var(--bg-warm); padding: 32px; border-radius: var(--radius-lg); position: sticky; top: 110px; }.order-summary h3{ font-family: var(--font-display); font-size: 26px; margin-bottom: 20px; }.order-summary .item{ display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }.order-summary .item:last-of-type{ border-bottom: 0; }.order-summary .thumb{ width: 56px; height: 70px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }.order-summary .thumb img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }.order-summary .info{ flex: 1; }.order-summary .info .name{ font-family: var(--font-display); font-size: 15px; line-height: 1.3; }.order-summary .info .q{ font-size: 11px; color: var(--muted); margin-top: 4px; letter-spacing: .12em; }.order-summary .info .pr{ font-family: var(--font-display); font-size: 15px; margin-top: 4px; }.order-summary .line{ display: flex; justify-content: space-between; padding: 8px 0; }.order-summary .total{ font-family: var(--font-display); font-size: 22px; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--line-strong); }.order-summary .btn{ width: 100%; margin-top: 18px; }/* ---------- About ---------- */.about-hero{ padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 5vw, 70px); }.about-hero .grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }.about-hero .img-frame{ border-radius: var(--radius-lg); }.values{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }.value{ padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); text-align: center; transition: all .3s var(--t); }.value:hover{ border-color: var(--gold); transform: translateY(-4px); }.value .icon{ font-size: 30px; color: var(--gold); margin-bottom: 18px; }.value h3{ font-family: var(--font-display); font-size: 22px; margin-bottom: 10px; }.value p{ color: var(--muted); font-size: 14px; margin: 0; }.faq{ max-width: 800px; margin: 0 auto; }.faq details{ border-bottom: 1px solid var(--line); padding: 22px 0; }.faq summary{  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;  font-family: var(--font-display); font-size: 20px;}.faq summary::-webkit-details-marker{ display: none; }.faq summary::after{ content: "+"; font-size: 24px; color: var(--gold); transition: transform .3s var(--t); }.faq details[open] summary::after{ content: "−"; }.faq .ans{ padding-top: 14px; color: var(--muted); }/* ---------- Empty / 404 ---------- */.empty-state{ text-align: center; padding: 80px 20px; }.empty-state .icon{ font-size: 50px; color: var(--gold); margin-bottom: 20px; }.empty-state h2{ font-family: var(--font-display); font-size: 32px; margin-bottom: 12px; }.empty-state p{ color: var(--muted); margin-bottom: 28px; }/* ---------- Breadcrumb ---------- */.crumb{ display: flex; gap: 8px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 24px 0; }.crumb a:hover{ color: var(--ink); }.crumb .sep{ color: var(--gold); }/* ---------- Reveal animation ---------- */.reveal{ opacity: 0; transition: opacity .8s var(--t); }.reveal.in{ opacity: 1; }.reveal-d-2{ transition-delay: .12s; }.reveal-d-3{ transition-delay: .24s; }/* Honour users / low-power environments: drop animations & transforms   that keep the compositor busy and can make embedded previews janky. */@media (prefers-reduced-motion: reduce){  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }  .reveal{ opacity: 1 !important; }  .pet-tile .img-frame img,  .hero-visual .img-frame img{ transform: none !important; }}/* ---------- Responsive ---------- */@media (max-width: 1024px){  .hero-grid{ grid-template-columns: 1fr; gap: 50px; }  .hero-visual{ order: -1; }  .hero-visual .badge{ left: 10px; top: 10px; }  .guide-grid{ grid-template-columns: 1fr; gap: 40px; }  .shipping .con{ grid-template-columns: repeat(2, 1fr); gap: 20px; }  .products-grid, .products-page-grid{ grid-template-columns: repeat(2, 1fr); }  .lookbook{ grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }  .lookbook .cell.large{ grid-column: span 2; grid-row: span 2; }  .pd{ grid-template-columns: 1fr; }  .cart-grid, .checkout-grid{ grid-template-columns: 1fr; }  .cart-summary, .order-summary{ position: static; }  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 40px; }  .about-hero .grid{ grid-template-columns: 1fr; }  .values{ grid-template-columns: 1fr; }}@media (max-width: 720px){  :root{ --bar-h: 64px; }  .nav{ grid-template-columns: auto 1fr auto; }  .nav .left{ display: none; }  .nav .right{ gap: 12px; }  .nav a.nav-link.hide-m{ display: none; }  .menu-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; }  .brand{ font-size: 20px; }  .brand small{ display: none; }  .hero{ padding-top: 30px; }  .hero h1{ font-size: 36px; }  .hero-visual .floater{ display: none; }  .products-grid, .products-page-grid{ grid-template-columns: 1fr 1fr; gap: 20px 14px; }  .lookbook{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }  .lookbook .cell.large{ grid-column: span 2; }  .lookbook .cell.wide{ grid-column: span 2; }  .cart-row{ grid-template-columns: 100px 1fr; }  .cart-row .img-frame{ width: 100px; height: 130px; }  .cart-row .ctrl{ grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }  .shipping{ margin: 0; border-radius: 0; }  .shipping .con{ grid-template-columns: 1fr; }  .footer-grid{ grid-template-columns: 1fr; gap: 30px; }  .footer-bottom{ flex-direction: column; gap: 14px; text-align: center; }  .pd-info h1{ font-size: 28px; }  .pd-actions{ flex-direction: column; }  .field-row.r-3{ grid-template-columns: 1fr; }  .newsletter form{ flex-direction: column; }  .topbar .marquee{ gap: 24px; font-size: 10px; }  .sec-head{ flex-direction: column; align-items: start; gap: 20px; }}/* ---------- Utilities ---------- */.hide{ display: none !important; }.mt-0{ margin-top: 0 !important; }.mb-0{ margin-bottom: 0 !important; }/* ---------- Product customization ---------- */.product-custom{  border: 1px solid var(--line);  border-radius: var(--radius);  padding: 18px 20px;  margin: 22px 0;  background: var(--bg);}.product-custom .custom-title{  font-family: var(--font-display);  font-size: 19px;  font-weight: 500;  letter-spacing: .02em;  margin: 0 0 14px;  color: var(--ink);}.product-custom .form-row{ margin: 0 0 14px; }.product-custom .form-row:last-child{ margin-bottom: 0; }.product-custom label{  display: block;  font-size: 12px;  letter-spacing: .14em;  text-transform: uppercase;  color: var(--ink-soft);  margin-bottom: 8px;}.product-custom label .opt{ text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 11px; }.product-custom input[type="text"],.product-custom select{  width: 100%;  padding: 11px 13px;  border: 1px solid var(--line);  border-radius: 10px;  background: #fff;  font-family: var(--font-body);  font-size: 14px;  color: var(--ink);  transition: border-color .2s var(--t);}.product-custom input[type="text"]:focus,.product-custom select:focus{ outline: none; border-color: var(--gold); }.product-custom .hint{  display: block;  margin-top: 7px;  font-size: 12px;  line-height: 1.5;  color: var(--muted);}/* ---- Hot feature: dynamic play-state indicator ---- */.video-stage .play-overlay{  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;  pointer-events:none; opacity:0; transition: opacity .35s ease;}.video-stage .play-overlay .play-btn{  pointer-events:auto;  width:72px; height:72px; border-radius:50%;  border: 2px solid rgba(255,255,255,.92);  background: rgba(0,0,0,.32); color:#fff;  display:flex; align-items:center; justify-content:center;  cursor:pointer;  box-shadow: 0 10px 30px rgba(0,0,0,.22);  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);  transition: transform .25s ease, background-color .25s ease;}.video-stage .play-overlay .play-btn:hover{ transform: scale(1.07); background: rgba(0,0,0,.48); }.video-stage.is-paused .play-overlay{ opacity:1; }@keyframes pj-pulse{  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.45); }  70%  { box-shadow: 0 0 0 22px rgba(255,255,255,0); }  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }}.video-stage.is-paused .play-btn{ animation: pj-pulse 1.6s ease-out infinite; }.video-stage.is-paused .video-tag{ opacity:.85; }@media (prefers-reduced-motion: reduce){  .rec-dot, .video-stage.is-paused .play-btn{ animation: none; }}/* Pet name engraving field (custom products only) */.pet-name-field{margin:14px 0 20px;}.pet-name-field label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:7px;}.pet-name-field input{width:100%;max-width:320px;padding:11px 13px;border:1px solid var(--line,#e7e0d8);border-radius:10px;font-size:15px;background:var(--bg);}.pet-name-field .pet-name-hint{margin:7px 0 0;font-size:12px;color:var(--muted);}/* crystal benefits + matching section */.crystal-band{  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);  position: relative;}.crystal-band::before{  content: "";  position: absolute;  top: 0;  left: 50%;  transform: translateX(-50%);  width: 140px;  height: 1px;  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);  opacity: .45;}.crystal-band .sec-head .text{ max-width: 720px; }.crystal-band .sec-head h2{ letter-spacing: -.01em; }.crystal-band .sec-head p{  font-size: 1.0625rem;  line-height: 1.7;  max-width: 560px;}.benefit-list{  display: grid;  grid-template-columns: repeat(2, 1fr);  gap: 22px 28px;  margin: 56px 0 0;  list-style: none;  padding: 0;}.benefit-list li{  position: relative;  display: flex;  align-items: flex-start;  gap: 20px;  padding: 30px 32px;  background: rgba(255, 252, 245, .7);  border: 1px solid rgba(184, 138, 68, .16);  border-radius: var(--radius-lg);  box-shadow: 0 2px 20px rgba(110, 80, 50, .04);  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;}.benefit-list li:hover{  transform: translateY(-3px);  box-shadow: 0 14px 36px rgba(110, 80, 50, .1);  border-color: rgba(184, 138, 68, .35);  background: rgba(255, 252, 245, .95);}.b-ico{  display: inline-flex;  align-items: center;  justify-content: center;  width: 40px;  height: 40px;  border-radius: 12px;  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);  color: #fff;  font-size: 17px;  line-height: 1;  flex-shrink: 0;  box-shadow: 0 6px 14px rgba(184, 138, 68, .28);}.benefit-list h3{  margin: 0 0 8px;  font-family: var(--font-display);  font-size: 1.25rem;  line-height: 1.3;  font-weight: 500;  letter-spacing: -.005em;  color: var(--ink);}.benefit-list p{  margin: 0;  font-size: .95rem;  line-height: 1.7;  color: var(--muted);  max-width: 420px;}@media (max-width: 900px){  .benefit-list{ grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }  .benefit-list li{ padding: 24px 24px; }}.info-strip{ background: var(--bg-warm); border-top: 1px solid rgba(184,156,98,.16); border-bottom: 1px solid rgba(184,156,98,.16); }.info-row{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }.info-row li{ display: flex; flex-direction: column; gap: 4px; padding-left: 18px; border-left: 1px solid rgba(184,156,98,.22); }.info-row li:first-child{ border-left: none; padding-left: 0; }.info-row b{ font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); letter-spacing: .01em; }.info-row span{ font-size: .85rem; color: var(--muted); line-height: 1.5; }@media (max-width: 900px){ .info-row{ grid-template-columns: repeat(2, 1fr); gap: 22px 28px; } }@media (max-width: 540px){  .benefit-list li{ padding: 22px 20px; gap: 16px; }  .b-ico{ width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }  .benefit-list h3{ font-size: 1.125rem; }}/* === STELLARA WHY CRYSTALS — center single column (v4) === */
.single-product-crystals{
  padding:80px 0 96px !important;
  background:#FBF7F0;
  text-align:center;
}
.single-product-crystals .con{
  max-width:900px;
  margin:0 auto;
  padding:0 24px;
}
.single-product-crystals .sec-head{
  margin:0 0 48px;
  text-align:center;
}
.single-product-crystals .sec-head .text{
  max-width:720px;
  margin:0 auto;
  text-align:center;
}
.single-product-crystals .sec-head .eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--gold-deep);
}
.single-product-crystals .sec-head .eyebrow::before,
.single-product-crystals .sec-head .eyebrow::after{
  content:"";
  display:block;
  width:26px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 60%, transparent);
}
.single-product-crystals .sec-head h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:2.25rem;
  line-height:1.18;
  letter-spacing:-.005em;
  color:var(--ink);
  margin:14px 0 14px;
  text-align:center;
}
.single-product-crystals .sec-head p{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color:var(--muted);
  margin:0 auto;
  max-width:620px;
  text-align:center;
}

/* Force single column — override any global .benefit-list grid */
.single-product-crystals .benefit-list{
  display:block !important;
  grid-template-columns:none !important;
  list-style:none !important;
  margin:36px 0 0 !important;
  padding:0 !important;
  max-width:720px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:left;
}
.single-product-crystals .benefit-list li{
  display:grid !important;
  grid-template-columns:64px 1fr !important;
  gap:24px !important;
  align-items:flex-start;
  padding:22px 26px !important;
  margin:0 0 14px !important;
  background:rgba(255, 252, 245, .78) !important;
  border:1px solid rgba(184, 138, 68, .16) !important;
  border-radius:12px !important;
  box-shadow:0 2px 14px rgba(110, 80, 50, .04);
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.single-product-crystals .benefit-list li:last-child{
  margin-bottom:0 !important;
}
.single-product-crystals .benefit-list li:hover{
  background:#FFFCF5 !important;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(110, 80, 50, .08);
  border-color:rgba(184, 138, 68, .30) !important;
}
.single-product-crystals .b-ico{
  width:48px !important;
  height:48px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg,#FBF1DC 0%,#EBD3A0 100%) !important;
  border:1px solid rgba(142,106,44,0.18) !important;
  border-radius:8px !important;
  box-shadow:0 2px 10px rgba(184,138,68,0.08);
  color:var(--gold-deep) !important;
  font-size:22px !important;
  line-height:1 !important;
  flex-shrink:0;
}
.single-product-crystals .benefit-list h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.18rem;
  line-height:1.3;
  letter-spacing:.005em;
  color:var(--ink);
  margin:4px 0 6px !important;
  transition:color .25s ease;
}
.single-product-crystals .benefit-list li:hover h3{
  color:var(--gold-deep);
}
.single-product-crystals .benefit-list p{
  font-family:var(--font-body);
  font-size:.92rem;
  line-height:1.7;
  color:var(--muted);
  margin:0 !important;
  max-width:none !important;
}

@media (max-width:720px){
  .single-product-crystals{padding:60px 0 72px !important;}
  .single-product-crystals .con{padding:0 18px;}
  .single-product-crystals .sec-head h2{font-size:1.85rem;}
  .single-product-crystals .benefit-list{max-width:100% !important;}
  .single-product-crystals .benefit-list li{
    grid-template-columns:48px 1fr !important;
    gap:16px !important;
    padding:18px 20px !important;
  }
  .single-product-crystals .b-ico{width:40px !important;height:40px !important;font-size:20px !important;}
  .single-product-crystals .benefit-list h3{font-size:1.08rem;}
}
@media (max-width:480px){
  .single-product-crystals .benefit-list li{
    grid-template-columns:40px 1fr !important;
    gap:14px !important;
  }
  .single-product-crystals .b-ico{
    width:36px !important;height:36px !important;
    border-radius:6px !important;font-size:18px !important;
  }
}
/* === END STELLARA WHY CRYSTALS v4 === */