/* ============================================
   TALON & WHISKER — Custom Pet ID Tags
   Warm caramel + sage on cream · Shopify-ready
   ============================================ */

:root {
  --ink: #3b2f2a;
  --ink-soft: #6b5d55;
  --cream: #faf6ef;
  --white: #ffffff;
  --caramel: #d9772f;
  --caramel-dark: #b85c1f;
  --sage: #7d8f69;
  --muted: #96897e;
  --line: #e9e2d6;
  --danger: #c0392b;
  --success: #2f7d32;
  --font-body: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-script: 'Dancing Script', 'Segoe Script', cursive;
  --shadow: 0 10px 30px rgba(59, 47, 42, .09);
  --shadow-lg: 0 20px 50px rgba(59, 47, 42, .16);
  --radius: 10px;
  --header-h: 76px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  padding-top: var(--header-h);
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: reveal transforms overhang the edge before they animate in,
     and clip does not turn the body into a scroll container (keeps sticky working) */
  overflow-x: clip;
}
body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; }
/* 700 is not loaded — keep bold text on the 600 cut instead of a synthesized face */
strong { font-weight: 600; }

/* Shared form-control base. Each widget below only overrides size and palette. */
.search-form input,
.sort-select,
.field input, .field select, .field textarea,
.engrave-field input,
.newsletter-form input {
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--cream); color: var(--ink); font-size: 14px;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(40px, 6vw, 68px); }
h2 { font-size: clamp(28px, 3.4vw, 42px); }
h3 { font-size: 20px; }

:focus-visible { outline: 2px solid var(--caramel); outline-offset: 3px; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.section { padding: 92px 0; }
.section-alt { background: var(--white); }
.section-cta { margin-top: 42px; text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Shared media sizing ---------- */
.hero-bg img,
.page-hero-strip img,
.product-media img,
.gallery-main img,
.thumb img,
.split-media img,
.blog-media img,
.article-media img,
.testimonial-avatar img,
.cart-line-media img,
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Round avatars: the crop lives on the wrapper so the img rule above stays generic */
.testimonial-avatar,
.author-avatar { border-radius: 50%; overflow: hidden; flex-shrink: 0; }

/* Shared card zoom-on-hover. The transition sits on the image so it also eases
   back out when the pointer leaves. */
.collection-card img,
.product-media img,
.blog-media img { transition: transform .8s ease; }
.collection-card:hover img,
.product-card:hover .product-media img,
.blog-card:hover .blog-media img { transform: scale(1.06); }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-size: 12px; text-transform: uppercase; letter-spacing: 3px;
  font-weight: 600; color: var(--caramel);
}
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-top: 12px; }
.section-desc { color: var(--ink-soft); margin-top: 14px; font-size: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px; border: 1px solid transparent; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.btn::after { content: '→'; transition: transform .3s ease; }
.btn:hover::after { transform: translateX(5px); }
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: var(--caramel-dark); }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-light:hover { background: var(--white); }
.btn-accent { background: var(--caramel); color: var(--white); }
.btn-accent:hover { background: var(--caramel-dark); }
.btn-outline { border-color: currentColor; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-block { width: 100%; }
.link-arrow {
  font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: border-color .3s ease;
}
.link-arrow:hover { border-color: var(--caramel); }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 500; background: var(--cream);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
  transition: opacity .6s ease, visibility .6s ease;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader-mark { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: 4px; }
.preloader-bar { width: 140px; height: 3px; background: var(--line); border-radius: 99px; overflow: hidden; }
.preloader-bar span { display: block; width: 40%; height: 100%; background: var(--caramel); animation: loadSlide 1.1s ease-in-out infinite; }
@keyframes loadSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 310;
  height: var(--header-h); background: var(--cream);
  border-bottom: 1px solid var(--line);
  transition: background .35s ease, box-shadow .35s ease;
}
.site-header.scrolled { box-shadow: 0 2px 18px rgba(59, 47, 42, .08); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 24px; }
.logo {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; white-space: nowrap;
  transition: color .3s ease;
}
.nav { display: flex; gap: 30px; }
.nav a {
  font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-soft); position: relative; padding: 6px 0; transition: color .3s ease;
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--caramel); transition: width .3s ease;
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }
.nav a[aria-current="page"] { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 0; background: none; font-size: 17px; color: inherit;
  border-radius: 50%; position: relative; transition: background .3s ease, color .3s ease;
}
.icon-btn:hover { background: var(--line); }
.cart-badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px;
  background: var(--caramel); color: var(--white); border-radius: 99px;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; padding: 0 5px;
}
.cart-badge[hidden] { display: none; }

.nav-toggle { display: none; width: 42px; height: 42px; border: 0; background: none; }
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px auto;
  transition: transform .3s ease, opacity .3s ease, background .3s ease;
}

/* Search panel */
.search-panel {
  position: absolute; top: var(--header-h); left: 0; right: 0;
  background: var(--white); border-bottom: 1px solid var(--line);
  padding: 22px 0; transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.search-panel.open { transform: none; opacity: 1; visibility: visible; }
.search-form { display: flex; gap: 12px; }
.search-form input { flex: 1; padding: 13px 16px; }

/* Mobile menu overlay */
@media (max-width: 900px) {
  .nav {
    position: fixed; inset: 0; z-index: 300; background: var(--ink);
    flex-direction: column; align-items: center; justify-content: center; gap: 26px;
    opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease;
  }
  .nav.open { opacity: 1; visibility: visible; }
  /* .nav overlays from *inside* .header-inner, so raising .header-inner cannot beat it.
     Lift the overlay's siblings instead: wordmark stays visible, close button stays tappable. */
  .site-header .logo, .header-actions { position: relative; z-index: 301; }
  /* the overlay is dark: the active link must beat the light-header active color */
  .nav a, .nav a[aria-current="page"] { font-size: 18px; color: var(--cream); }
  .nav-toggle { display: block; }
  body.menu-open .site-header { background: transparent; box-shadow: none; border-bottom-color: transparent; }
  body.menu-open .logo, body.menu-open .icon-btn { color: var(--cream); }
  body.menu-open .icon-btn:hover { background: rgba(250, 246, 239, .14); }
  body.menu-open .nav-toggle span { background: var(--cream); }
  body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: calc(100vh - var(--header-h));
  display: flex; align-items: center; overflow: hidden; color: var(--cream);
}
.hero-bg { position: absolute; inset: -12%; z-index: 0; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(59, 47, 42, .84) 0%, rgba(59, 47, 42, .55) 55%, rgba(59, 47, 42, .28) 100%);
}
.hero-inner { position: relative; z-index: 1; max-width: 720px; padding: 120px 0; }
.hero h1 { margin: 18px 0 20px; color: var(--white); }
.hero h1 em { font-style: italic; font-weight: 500; }
.hero-sub { font-size: 17px; color: rgba(250, 246, 239, .88); max-width: 520px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.scroll-hint {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 1;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(250, 246, 239, .8);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-hint::after { content: ''; width: 1px; height: 40px; background: rgba(250, 246, 239, .6); animation: scrollPulse 1.9s ease-in-out infinite; }
@keyframes scrollPulse { 0%, 100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- Marquee ---------- */
.marquee { background: var(--caramel); color: var(--white); overflow: hidden; padding: 14px 0; }
.marquee-track { display: flex; width: max-content; animation: marqueeSlide 28s linear infinite; }
.marquee-track span {
  font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  padding: 0 26px; white-space: nowrap;
}
@keyframes marqueeSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--white); border-bottom: 1px solid var(--line); padding: 56px 0 60px; }
.page-hero h1 { margin-top: 14px; font-size: clamp(32px, 4.2vw, 52px); }
.breadcrumb { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { margin: 0 8px; }
.page-hero-strip { position: relative; height: 340px; overflow: hidden; }
.page-hero-strip::after { content: ''; position: absolute; inset: 0; background: rgba(59, 47, 42, .42); }

/* ---------- Collection cards ---------- */
.collection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.collection-grid.large { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.collection-card { position: relative; overflow: hidden; border-radius: var(--radius); color: var(--cream); display: block; }
.collection-card .split-media { height: 420px; }
.collection-grid.large .split-media { height: 480px; }
.collection-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(59, 47, 42, .8) 0%, rgba(59, 47, 42, .1) 60%);
}
.collection-card-body { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 1; }
.collection-card-body h2, .collection-card-body h3 { font-size: 24px; color: var(--white); }
.collection-card-count { font-size: 13px; color: rgba(250, 246, 239, .82); }
.collection-card-cta { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; }

/* ---------- Shared card surface ----------
   Every boxed panel sits on the same white/hairline/radius base; the rules
   further down only add their own padding, layout and hover behaviour. */
.product-card, .value-card, .testimonial, .review-card, .ship-progress,
.order-summary, .team-card, .blog-card, .form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}

/* ---------- Product card ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.product-card { position: relative; overflow: hidden; }
.product-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--line); }
.product-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 11px; border-radius: 99px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white);
}
.badge-sale { background: var(--danger); }
.badge-new { background: var(--sage); }
.badge-low { background: var(--caramel); }
.badge-best { background: var(--ink); }
/* "Customize" CTA — pet tags are made to order, so a card never adds to cart directly */
.quick-view {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border: 0; border-radius: 999px; background: var(--ink); color: var(--cream);
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s ease, background .3s ease;
}
.quick-view:hover { background: var(--caramel-dark); }
.product-card:hover .quick-view, .product-card:focus-within .quick-view { opacity: 1; transform: none; }
.product-info { padding: 18px 18px 22px; }
.product-cat { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.product-name { font-size: 17px; margin: 6px 0 8px; }
.product-blurb { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.product-price { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.price { font-weight: 600; }
.price.on-sale { color: var(--danger); }
.compare-at { color: var(--muted); text-decoration: line-through; font-size: 13px; }
.product-card-link { position: absolute; inset: 0; z-index: 1; }

@media (hover: none) {
  /* Touch: the Customize CTA has no hover to reveal it — keep it visible (z-index 2 > link z-1) */
  .quick-view { opacity: 1; transform: none; }
}

/* ---------- Split (image with text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split-media { position: relative; height: 560px; overflow: hidden; border-radius: var(--radius); }
.split-body h2 { margin: 14px 0 18px; }
.split-body p { color: var(--ink-soft); margin-bottom: 16px; }

/* ---------- Value props ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.value-card { padding: 34px 28px; text-align: center; }
.value-icon { font-size: 26px; }
.value-card h2, .value-card h3 { font-size: 18px; margin: 14px 0 8px; }
.value-card p { font-size: 14px; color: var(--ink-soft); }

/* ---------- Testimonials ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testimonial { padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.stars { color: var(--caramel); letter-spacing: 2px; font-size: 14px; }
.testimonial blockquote { font-family: var(--font-display); font-size: 18px; font-style: italic; font-weight: 500; line-height: 1.6; }
.testimonial-footer { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.testimonial-avatar { width: 52px; height: 52px; background: var(--line); }
.testimonial-author { font-size: 13px; color: var(--muted); }

/* ---------- Newsletter ---------- */
.newsletter { background: var(--ink); color: var(--cream); padding: 78px 0; text-align: center; }
.newsletter h2 { color: var(--white); margin: 12px 0 12px; }
.newsletter p { color: rgba(250, 246, 239, .82); max-width: 520px; margin: 0 auto; }
.newsletter-form { display: flex; gap: 12px; max-width: 480px; margin: 30px auto 0; }
.newsletter-form input {
  flex: 1; padding: 14px 16px; border-color: rgba(250, 246, 239, .3);
  background: rgba(250, 246, 239, .08); color: var(--cream);
}
.newsletter-form input::placeholder { color: rgba(250, 246, 239, .6); }
.form-note { margin-top: 14px; font-size: 14px; color: var(--success); }
.newsletter .form-note { color: #9ed3a1; }

/* ---------- Collection page: toolbar ---------- */
.shop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; padding-bottom: 26px; margin-bottom: 38px; border-bottom: 1px solid var(--line);
}
.filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
/* Pill family — .chip (category filter) and .size-btn (variant picker) share this base.
   Both are toggle buttons driven by aria-pressed. */
.chip, .size-btn, .shape-btn, .font-btn {
  border: 1px solid var(--line); background: var(--white);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.chip, .size-btn, .font-btn { border-radius: 999px; }
.chip:hover, .size-btn:hover, .shape-btn:hover, .font-btn:hover {
  border-color: var(--caramel); color: var(--ink);
}
/* Two selected flavours: filters/sizes commit to a choice (solid ink), while the
   engraving options are previewed live and stay in the warm accent. */
.chip[aria-pressed="true"], .size-btn[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--cream);
}
.shape-btn[aria-pressed="true"], .font-btn[aria-pressed="true"] {
  border-color: var(--caramel); background: #fdf1e6; color: var(--caramel-dark);
}
.chip {
  padding: 9px 18px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-soft);
}
.toolbar-right { display: flex; align-items: center; gap: 16px; }
.result-count { font-size: 13px; color: var(--muted); }
.sort-select { padding: 10px 14px; background: var(--white); font-size: 13px; }
.empty-results { text-align: center; padding: 60px 0; color: var(--muted); }

/* filter animations (independent from .reveal) */
@keyframes filterPop { from { opacity: 0; transform: scale(.94) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes filterOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.96); } }
.filter-pop { animation: filterPop .45s ease both; }
.filter-out { animation: filterOut .22s ease both; }

/* ---------- Product detail ---------- */
.product-detail { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: start; }
.gallery-main { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--line); }
.gallery-main img { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.gallery-main img.active { opacity: 1; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(250, 246, 239, .92);
  font-size: 16px; color: var(--ink); transition: background .3s ease;
}
.gallery-nav:hover { background: var(--white); }
.gallery-prev { left: 14px; }
.gallery-next { right: 14px; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.thumb {
  aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); border-radius: 8px;
  padding: 0; background: none; transition: border-color .3s ease, opacity .3s ease; opacity: .65;
}
.thumb[aria-pressed="true"] { border-color: var(--caramel); opacity: 1; }
.thumb:hover { opacity: 1; }

.product-panel h1 { font-size: clamp(30px, 3.6vw, 44px); margin: 12px 0 14px; }
.rating-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.product-panel .product-price { font-size: 26px; margin: 18px 0 16px; }
.product-panel .compare-at { font-size: 17px; }
.product-lead { color: var(--ink-soft); padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.variant-block { padding: 22px 0; border-bottom: 1px solid var(--line); }
.variant-label {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; margin-bottom: 14px;
}
.variant-label .selected-value { color: var(--muted); letter-spacing: .6px; text-transform: none; font-weight: 500; }
.size-row { display: flex; flex-wrap: wrap; gap: 10px; }
.size-btn { min-width: 54px; padding: 11px 16px; font-size: 13px; font-weight: 600; }
.size-hint {
  border: 0; background: none; padding: 0; font-size: 12px; color: var(--muted);
  text-decoration: underline; text-transform: none; letter-spacing: .4px;
  transition: color .3s ease;
}
.size-hint:hover { color: var(--caramel-dark); }

.qty-control { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--white); }
.qty-control button { width: 42px; height: 46px; border: 0; background: none; font-size: 17px; color: var(--ink); border-radius: 999px; }
.qty-control button:hover { background: var(--line); }
.qty-control input {
  width: 52px; height: 46px; border: 0; text-align: center; font-weight: 600; background: none;
  -moz-appearance: textfield;
}
.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-row { display: flex; flex-direction: column; gap: 12px; padding: 24px 0 16px; }
.trust-line { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.trust-line strong { color: var(--success); }

/* ---------- Engraving studio (live preview) ---------- */
.tag-preview {
  background: linear-gradient(160deg, #fffdf8 0%, var(--cream) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-align: center; box-shadow: var(--shadow);
}
.tag-preview-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.tag-preview-head .live-dot { color: var(--caramel); }
.tag-stage { width: 100%; max-width: 300px; margin: 0 auto; }
.tag-stage svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(59, 47, 42, .18)); }
.tag-hole { fill: var(--cream); }
.tag-text { font-weight: 500; }
.tag-text.is-placeholder { opacity: .38; }
.tag-line1.font-classic, .tag-line2.font-classic { font-family: var(--font-display); }
.tag-line1.font-modern, .tag-line2.font-modern { font-family: var(--font-body); }
.tag-line1.font-script, .tag-line2.font-script { font-family: var(--font-script); font-weight: 600; }
.preview-caption { font-size: 12px; color: var(--muted); margin-top: 10px; }

.shape-row, .metal-row, .font-row { display: flex; flex-wrap: wrap; gap: 10px; }
.shape-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 76px; padding: 12px 6px; border-radius: 10px; color: var(--ink-soft);
  font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
}
.shape-btn svg { width: 26px; height: 26px; fill: currentColor; }

.metal-swatch {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  box-shadow: inset 0 0 0 3px var(--white); transition: box-shadow .3s ease, border-color .3s ease;
}
.metal-swatch[aria-pressed="true"] { border-color: var(--caramel); box-shadow: inset 0 0 0 3px var(--white), 0 0 0 2px var(--caramel); }
.metal-brass { background: linear-gradient(140deg, #f0cd88 0%, #c08c33 100%); }
.metal-silver { background: linear-gradient(140deg, #f1f1f1 0%, #b3b7bb 100%); }
.metal-rose { background: linear-gradient(140deg, #f6cbbb 0%, #c9846c 100%); }
.metal-black { background: linear-gradient(140deg, #55504c 0%, #1d1a18 100%); }

.font-btn { padding: 10px 18px; color: var(--ink-soft); font-size: 15px; }
.font-btn.sample-classic { font-family: var(--font-display); }
.font-btn.sample-modern { font-family: var(--font-body); font-weight: 600; }
.font-btn.sample-script { font-family: var(--font-script); font-weight: 600; font-size: 19px; }

.engrave-fields { display: grid; gap: 16px; }
.engrave-field label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; margin-bottom: 8px;
}
.engrave-field input { width: 100%; padding: 13px 15px; font-size: 16px; }
.engrave-field input:focus { border-color: var(--caramel); }
.field-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.engrave-note { font-size: 13px; color: var(--ink-soft); margin-top: 16px; }
.engrave-note strong { color: var(--danger); }

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid var(--line); margin-top: 8px; }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; border: 0; background: none; text-align: left;
  font-size: 14px; font-weight: 600; letter-spacing: .6px; color: var(--ink);
}
.acc-trigger::after { content: '+'; font-size: 20px; color: var(--muted); transition: transform .3s ease; }
.acc-trigger[aria-expanded="true"]::after { transform: rotate(45deg); }
.acc-panel { padding: 0 0 22px; color: var(--ink-soft); font-size: 15px; }
.acc-panel ul { padding-left: 20px; }

/* ---------- Reviews ---------- */
.review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.review-card { padding: 28px; }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.review-card h3 { font-size: 17px; margin-bottom: 8px; }
.review-card p { color: var(--ink-soft); font-size: 15px; }
.review-meta { font-size: 13px; color: var(--muted); margin-top: 12px; }
.rating-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.rating-score { font-family: var(--font-display); font-weight: 500; font-size: 42px; }

/* ---------- Cart ---------- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
.cart-line {
  position: relative;
  display: grid; grid-template-columns: 110px 1fr auto auto auto; gap: 20px; align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.cart-line-media { width: 110px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--line); }
.cart-line-title { font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.cart-line-engraving {
  font-size: 13px; color: var(--ink); background: #fdf1e6; border: 1px dashed var(--line);
  border-radius: 8px; padding: 6px 10px; margin: 6px 0; display: inline-block;
}
.cart-line-variant { font-size: 13px; color: var(--muted); }
.cart-line-unit { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.cart-line-total { font-weight: 600; min-width: 90px; text-align: right; }
.line-remove {
  width: 36px; height: 36px; border: 1px solid var(--line); background: var(--white);
  border-radius: 50%; color: var(--muted); transition: color .3s ease, border-color .3s ease;
}
.line-remove:hover { color: var(--danger); border-color: var(--danger); }
.cart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid var(--ink);
}
.cart-head span { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }

.ship-progress { padding: 20px 22px; margin-top: 26px; }
.ship-progress .ship-note { font-size: 14px; margin-bottom: 12px; }
.ship-bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.ship-bar span { display: block; height: 100%; width: 0; background: var(--caramel); border-radius: 99px; transition: width .5s ease, background .5s ease; }
.ship-progress.reached .ship-bar span { background: var(--success); }
.ship-progress.reached .ship-note { color: var(--success); font-weight: 600; }

.order-summary { padding: 30px 28px; position: sticky; top: calc(var(--header-h) + 24px); }
.order-summary h2 { font-size: 22px; margin-bottom: 20px; }
.summary-row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; padding: 10px 0; color: var(--ink-soft); }
.summary-row.total {
  border-top: 1px solid var(--line); margin-top: 10px; padding-top: 18px;
  font-size: 19px; font-weight: 600; color: var(--ink);
}
.summary-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.summary-note { font-size: 12px; color: var(--muted); margin-top: 14px; text-align: center; }
.empty-state { text-align: center; padding: 80px 0; }
.empty-state h2 { margin: 16px 0 12px; }
.empty-state p { color: var(--ink-soft); margin-bottom: 28px; }
.empty-icon { font-size: 44px; }

/* ---------- About ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 4vw, 52px); color: var(--caramel); }
.stat-label { font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.team-card { overflow: hidden; }
.team-card .split-media { height: 340px; border-radius: 0; }
.team-body { padding: 22px 24px 26px; }
.team-body h3 { font-size: 19px; }
.team-role { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sage); margin: 4px 0 10px; }
.team-body p { font-size: 14px; color: var(--ink-soft); }
.pull-quote {
  font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.6;
  border-left: 3px solid var(--caramel); padding-left: 22px; margin: 26px 0; color: var(--ink);
}
.cta-band { background: var(--sage); color: var(--white); padding: 78px 0; text-align: center; }
.cta-band h2 { color: var(--white); margin: 12px 0 16px; }
.cta-band p { color: rgba(255, 255, 255, .86); max-width: 540px; margin: 0 auto; }
.cta-band .eyebrow { color: rgba(255, 255, 255, .82); }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.blog-card { position: relative; overflow: hidden; }
.blog-media { height: 240px; overflow: hidden; }
.blog-body { padding: 24px 24px 28px; }
.blog-meta { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; }
.blog-meta .cat { color: var(--caramel); }
.blog-body h2, .blog-body h3 { font-size: 20px; margin: 10px 0; }
.blog-body p { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; }
.blog-card-link { position: absolute; inset: 0; z-index: 1; }

/* ---------- Article ---------- */
.article-wrap { max-width: 760px; margin: 0 auto; }
.article-body p { margin-bottom: 22px; color: var(--ink-soft); font-size: 17px; }
.article-body h2 { margin: 40px 0 18px; font-size: 30px; }
.article-body ul { margin: 0 0 24px 22px; color: var(--ink-soft); }
.article-body li { margin-bottom: 8px; }
.article-media { height: 420px; overflow: hidden; border-radius: var(--radius); margin: 34px 0 14px; }
.article-figure figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-bottom: 30px; }
.author-box {
  display: flex; gap: 20px; align-items: center; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; margin-top: 46px;
}
.author-avatar { width: 72px; height: 72px; }
.author-box h3 { font-size: 18px; }
.author-box p { font-size: 14px; color: var(--ink-soft); }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.info-list { list-style: none; margin-top: 24px; }
.info-list li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.info-list .info-icon { font-size: 18px; }
.info-list h3 { font-size: 15px; font-family: var(--font-body); font-weight: 600; }
.info-list p { font-size: 14px; color: var(--ink-soft); }
.info-list a:hover { color: var(--caramel-dark); }
.form-card { padding: 34px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; }
.field textarea { resize: vertical; min-height: 130px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.map-placeholder {
  margin-top: 60px; height: 320px; border: 1px solid var(--line); border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, var(--white), var(--white) 14px, var(--cream) 14px, var(--cream) 28px);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; color: var(--muted);
}
.map-placeholder strong { color: var(--ink); font-family: var(--font-display); font-size: 20px; }

/* ---------- 404 ---------- */
.page-404 {
  min-height: calc(100vh - var(--header-h)); display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 80px 0;
}
.big-404 { font-family: var(--font-display); font-size: clamp(96px, 20vw, 210px); line-height: 1; color: var(--caramel); }
.page-404 h1 { margin: 10px 0 16px; }
.page-404 p { color: var(--ink-soft); max-width: 460px; margin: 0 auto 30px; }
.page-404 .search-form { max-width: 440px; margin: 26px auto 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(250, 246, 239, .76); padding: 76px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.site-footer .logo { color: var(--cream); display: inline-block; margin-bottom: 16px; }
.footer-about p { font-size: 14px; max-width: 320px; }
.footer-col h3 { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--cream); margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; transition: color .3s ease; }
.footer-col a:hover { color: var(--caramel); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  margin-top: 54px; padding-top: 24px; border-top: 1px solid rgba(250, 246, 239, .14); font-size: 13px;
}
.social-row { display: flex; gap: 16px; margin-top: 20px; }
.social-row a { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; }

/* ---------- To top + toast ---------- */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 200; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: var(--ink); color: var(--cream); font-size: 16px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .3s ease;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--caramel-dark); }
.toast {
  position: fixed; left: 50%; bottom: 30px; z-index: 400; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--cream); padding: 14px 24px; border-radius: 999px;
  font-size: 14px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transition: opacity .9s ease, transform .9s ease, box-shadow .9s ease; }
.reveal[data-reveal="up"] { transform: translateY(34px); }
/* horizontal offsets stay inside the 28px container padding so nothing overhangs the viewport */
.reveal[data-reveal="left"] { transform: translateX(-24px); }
.reveal[data-reveal="right"] { transform: translateX(24px); }
.reveal[data-reveal="zoom"]:not(.page-hero-strip) { transform: scale(.94); }
.reveal.visible { opacity: 1; transform: none; }

/* Card hover must be quicker than the .reveal transition it overrides, but the
   opacity leg has to keep the reveal timing or these cards would pop in
   instantly instead of fading with the rest of the grid. */
.product-card, .blog-card {
  transition: transform .45s ease, box-shadow .45s ease, opacity .9s ease;
}
.product-card:hover, .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .section { padding: 74px 0; }
  .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .split { gap: 40px; }
  .split-media { height: 460px; }
  .product-detail { grid-template-columns: 1fr; gap: 44px; }
  .cart-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  /* container padding drops to 20px here — slide up instead of sideways */
  .reveal[data-reveal="left"], .reveal[data-reveal="right"] { transform: translateY(28px); }
  .section { padding: 62px 0; }
  .split { grid-template-columns: 1fr; }
  .split-media { height: 360px; }
  .value-grid, .testimonial-grid, .team-grid, .blog-grid, .review-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .collection-grid.large { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: 36px; }
  .shop-toolbar { flex-direction: column; align-items: flex-start; }
  .article-media { height: 280px; }
  /* cart table stacks */
  .cart-line { grid-template-columns: 90px 1fr; grid-template-areas: 'media info' 'media qty' 'media total'; row-gap: 12px; }
  .cart-line-media { width: 90px; grid-area: media; align-self: start; }
  .cart-line-info { grid-area: info; }
  .cart-line-qty { grid-area: qty; justify-self: start; }
  .cart-line-total { grid-area: total; text-align: left; }
  .line-remove { position: absolute; top: 22px; right: 0; }
  .cart-head { display: none; }
}

@media (max-width: 560px) {
  /* keep the header on one row: smaller wordmark, tighter icons, account hidden on mobile (demo) */
  .header-inner { gap: 10px; }
  .logo { font-size: 16px; letter-spacing: 1px; }
  .icon-btn { width: 36px; height: 36px; font-size: 15px; }
  .nav-toggle { width: 36px; height: 36px; }
  .account-btn { display: none; }
  .product-grid, .collection-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .newsletter-form, .search-form { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .form-card { padding: 24px 20px; }
  .shape-btn { width: 68px; }
  .tag-preview { padding: 18px 14px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-bg { transform: none !important; }
}

/* ===== Shared dropdown: drop the native chrome, draw a themed chevron =====
   Lives at the end of the file so padding-right beats the padding declared
   in the blocks above. Still a real <select>: native list and a11y untouched. */
select,
.sort-select,
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%2396897e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.75 4.75 3.25 3.25 3.25-3.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

select:hover,
.sort-select:hover,
.field select:hover {
  border-color: var(--caramel);
}

select:focus,
.sort-select:focus,
.field select:focus {
  border-color: var(--caramel);
  outline: 2px solid rgba(217, 119, 47, 0.28);
  outline-offset: 1px;
}