/* ============================================================
   Klyn Gift — site styles (plain CSS, no build step).

   1. Fonts & helpers     — hand-written, edit freely.
   2. Utility classes     — the small "describe the look" classes used
      in the HTML (e.g. "py-16", "text-white", "md:grid-cols-4").
      Only classes the site already uses exist here. If you need a
      new look, add a normal rule in section 1 instead of inventing
      a new utility class name in the HTML.
   ============================================================ */

/* ── 1. FONTS & HELPERS ───────────────────────────────────── */
:root {
  --font-cormorant: "Cormorant Garamond", Georgia, serif;
  --font-inter: "Inter", sans-serif;
  --font-space-grotesk: "Space Grotesk", sans-serif;
}

/* Image that covers its (position: relative) box — used for photos in cards and banners. */
.fill-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: transparent;
}

/* Chinese (中文): Latin letters keep the site's fonts; Chinese characters use the
   device's own Chinese font (PingFang on Apple, Microsoft YaHei on Windows, Noto on Android). */
:root:lang(zh) {
  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC";
  --font-cormorant: "Cormorant Garamond", var(--font-cjk), Georgia, serif;
  --font-inter: "Inter", var(--font-cjk), sans-serif;
  --font-space-grotesk: "Space Grotesk", var(--font-cjk), sans-serif;
}
/* Chinese reads best without the wide letter-spacing used for small English labels. */
:lang(zh) .t-label,
:lang(zh) .tracking-widest { letter-spacing: 0.08em; }
:lang(zh) .t-hero,
:lang(zh) .t-section { letter-spacing: 0; }
/* Home page hero headline: two elegant lines in a wider column. */
.hero-copy { max-width: 42rem; }
/* keep the text on the darker left part of the photo */
@media (min-width: 640px) { .hero-copy { max-width: min(42rem, 60vw); } }
.hero-title { font-size: clamp(2.1rem, 5.6vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
/* Chinese characters are wider than Latin letters, so the headline is set a little smaller. */
:lang(zh) .hero-title { font-size: clamp(2.2rem, 4.8vw, 3.75rem); line-height: 1.2; letter-spacing: 0; }

/* Short labels never break in the middle (Chinese can otherwise wrap between any two characters). */
[data-lang],
#product nav a,
:lang(zh) .badge { white-space: nowrap; }
/* Chinese buttons keep their words whole but may still wrap at spaces on very small screens. */
:lang(zh) .btn,
:lang(zh) .btn-dark,
:lang(zh) .btn-outline,
:lang(zh) .btn-wa,
:lang(zh) .btn-ghost { word-break: keep-all; }

/* Phones: tighter header so the logo, ID | EN | 中文, WhatsApp and the menu button fit on one row. */
@media (max-width: 767px) {
  div.header-actions { gap: 0.5rem; }
  .header-actions [data-lang] { padding-left: 0.2rem; padding-right: 0.2rem; }
  .header-actions .btn-dark { padding: 0.55rem 0.85rem; }
  .header-actions [data-menu-open] { padding-left: 0.25rem; padding-right: 0; }
}

/* The header's placeholder box must not wrap the header in its own box,
   otherwise the sticky header scrolls away with it. */
#site-header { display: contents; }

/* ── FREE ENGRAVING + GREETING CARD ── */
/* Announcement bar above the header on every page. */
.announce {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  background: #713B43;
  color: #fff;
  font-family: var(--font-space-grotesk), sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
  padding: 0.55rem 1rem;
  max-height: 5rem;
  overflow: hidden;
  transition: background-color 0.2s, max-height 0.3s ease, padding 0.3s ease;
}
.announce:hover { background: #5C2F36; }
.announce-more { font-weight: 500; opacity: 0.85; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 479px) { .announce-more { display: none; } }
/* Home page: the bar sits inside the see-through header and folds away once you scroll. */
.announce.is-collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; }

/* Check-mark perks under the home page hero buttons. */
.hero-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.5rem;
  font-family: var(--font-space-grotesk), sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}
.hero-perks span { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.hero-perks svg { width: 0.95rem; height: 0.95rem; color: #E4D8C8; flex-shrink: 0; }

/* "Termasuk GRATIS" box above the order button on product pages. */
.free-box {
  background: #F6EBE7;
  border: 1px solid rgba(201, 154, 145, 0.45);
  border-radius: 0.125rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
}
.free-box-title {
  font-family: var(--font-space-grotesk), sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #713B43;
  margin-bottom: 0.6rem;
}
:lang(zh) .free-box-title { letter-spacing: 0.08em; }
.free-box li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: #3A302A; line-height: 1.45; }
.free-box li + li { margin-top: 0.5rem; }
.free-box svg { width: 1.1rem; height: 1.1rem; color: #713B43; flex-shrink: 0; margin-top: 0.1rem; }
.free-box small { display: block; font-size: 0.76rem; color: rgba(58, 48, 42, 0.62); margin-top: 0.1rem; }

/* ── HOME PAGE PROPORTIONS ──
   Every standard home section uses the same breathing room, and titles come in two sizes:
   .t-section (32px phones / 36px desktop) and .t-feature (38px / 44px) for the big editorial panels. */
.home-section { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .home-section { padding-top: 6rem; padding-bottom: 6rem; } }
.home-section--continue { padding-top: 0; }
@media (min-width: 768px) { .home-section--continue { padding-top: 0; } }
.t-feature { font-size: clamp(2.375rem, 3.2vw, 2.75rem); line-height: 1.08; letter-spacing: -0.02em; }
:lang(zh) .t-feature { letter-spacing: 0; line-height: 1.25; }
/* Panels inside full-width sections line up with the header's logo and menu
   (same 1280px frame minus the page's side padding at each screen size). */
.home-section > .max-w-site { max-width: calc(1280px - 3rem); }
@media (min-width: 768px) { .home-section > .max-w-site { max-width: calc(1280px - 5rem); } }
@media (min-width: 1024px) { .home-section > .max-w-site { max-width: calc(1280px - 8rem); } }
.packaging-banner { margin-bottom: 2rem; }
@media (min-width: 768px) { .packaging-banner { margin-bottom: 3rem; } }

/* Home page "Custom Engraving" feature panel. */
.engrave-feature {
  display: grid;
  background: #FAF8F3;
  border: 1px solid rgba(203, 187, 167, 0.55);
  border-radius: 0.125rem;
  box-shadow: 0 14px 40px rgba(24, 28, 32, 0.08);
  overflow: hidden;
}
@media (min-width: 768px) { .engrave-feature { grid-template-columns: 5fr 7fr; } }
.engrave-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
@media (min-width: 768px) { .engrave-photo { aspect-ratio: auto; min-height: 21rem; } }
.engrave-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* keep the whole speaker and the table edge in view when the photo is cropped */
  object-position: 50% 72%;
  transform-origin: 50% 72%;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.engrave-feature:hover .engrave-photo img { transform: scale(1.04); }
/* Round "GRATIS" seal on the photo, like a wax stamp. */
.engrave-seal {
  position: absolute; top: 1.25rem; left: 1.25rem;
  width: 4.75rem; height: 4.75rem; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  background: #713B43; color: #fff; text-align: center;
  font-family: var(--font-space-grotesk), sans-serif;
  outline: 1px solid rgba(255, 255, 255, 0.5); outline-offset: -6px;
  box-shadow: 0 10px 24px rgba(42, 33, 25, 0.28);
  transform: rotate(-8deg);
}
.engrave-seal strong { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; }
.engrave-seal small { font-size: 0.5rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; }
:lang(zh) .engrave-seal strong, :lang(zh) .engrave-seal small { letter-spacing: 0.08em; }
:lang(zh) .engrave-seal small { font-size: 0.7rem; }

.engrave-body { padding: 1.75rem 1.5rem 2rem; }
@media (min-width: 768px) { .engrave-body { padding: 2.5rem 3rem; align-self: center; } }
.engrave-eyebrow { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.engrave-pill {
  background: #713B43; color: #fff; border-radius: 999px; padding: 0.22rem 0.6rem;
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em;
}
.engrave-title {
  font-family: var(--font-cormorant), Georgia, serif; font-weight: 500; color: #3A302A;
  margin: 0.6rem 0 0.75rem;
}
.engrave-text { color: rgba(58, 48, 42, 0.62); font-size: 0.95rem; line-height: 1.65; max-width: 46ch; }
.engrave-perks { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin: 1.25rem 0 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(203, 187, 167, 0.35); }
.engrave-perks li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; color: #3A302A; }
.engrave-icon {
  width: 1.85rem; height: 1.85rem; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(201, 154, 145, 0.5); color: #713B43;
}
.engrave-icon svg { width: 0.9rem; height: 0.9rem; }
.engrave-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.engrave-note { margin-top: 0.85rem; font-size: 0.76rem; color: #8F7A68; }

/* Standard (lining) numbers in the serif font, so "5000mAh" doesn't read like "5ooomAh". */
.font-display, h1, h2, h3 { font-variant-numeric: lining-nums; }

/* ── PRODUCT CARDS (home best sellers, catalog, gift categories) ──
   A framed tile: the photo on top, the text in the box below. */
.grid:has(> .product-card) { column-gap: 1rem; row-gap: 1.25rem; }
@media (min-width: 768px) { .grid:has(> .product-card) { column-gap: 1.5rem; row-gap: 1.75rem; } }
.product-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff;
  border: 1px solid rgba(203, 187, 167, 0.5);
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.product-card:hover { border-color: rgba(203, 187, 167, 0.85); box-shadow: 0 16px 36px rgba(42, 33, 25, 0.08); }
/* The product photo is the tile; its soft studio backdrop sits straight on the page. */
.product-card-img {
  position: relative; aspect-ratio: 1 / 1; background: #F4F1EA; overflow: hidden;
}
.product-card-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover .product-card-img img { transform: scale(1.04); }
.product-card-noimg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8F7A68;
}
/* "Terlaris": small rounded cream pill with burgundy text. */
.product-card-badge {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(113, 59, 67, 0.18);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: #713B43;
}
.product-card-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 1rem 1rem 1.1rem;
  border-top: 1px solid rgba(203, 187, 167, 0.35);
}
@media (min-width: 768px) { .product-card-body { padding: 1.25rem 1.35rem 1.35rem; } }
/* Product code: light, widely spaced, muted warm grey. */
.product-card-code {
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; color: #A8968A; margin-bottom: 0.35rem;
}
.product-card-title {
  font-family: var(--font-inter), sans-serif; font-weight: 600; color: #111111;
  font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: text-decoration-color 0.3s ease, color 0.3s ease;
}
/* desktop cards are wider, so two lines are enough there */
@media (min-width: 1024px) { .product-card-title { -webkit-line-clamp: 2; } }
/* Hover: the name gets a fine underline instead of a floating "Lihat" link. */
.product-card:hover .product-card-title { text-decoration-color: rgba(17, 17, 17, 0.4); }
/* What's inside ("Hippo … + Free Umbrella"): small, muted grey. */
.product-card-bonus {
  margin-top: 0.3rem; font-family: var(--font-inter), sans-serif; font-weight: 400;
  font-size: 0.78rem; line-height: 1.45; color: #666666;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card-foot { margin-top: auto; padding-top: 0.75rem; }
/* Price: Inter SemiBold, tight tracking (its zero is a plain oval, no slash or dot). */
.product-card-price {
  font-family: var(--font-inter), sans-serif; font-weight: 600; font-size: 0.98rem;
  letter-spacing: -0.015em; color: #111111; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: "zero" 0;
}
@media (min-width: 768px) { .product-card-price { font-size: 1.04rem; } }
:lang(zh) .product-card-code, :lang(zh) .product-card-badge { letter-spacing: 0.08em; }

/* ── PRODUCT PAGE (/hampers/<code>/) ── */
.pd-crumbs { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .pd-crumbs { padding: 0 2.5rem; } }
@media (min-width: 1024px) { .pd-crumbs { padding: 0 4rem; } }
.pd-crumbs nav {
  display: flex; align-items: center; gap: 0.5rem; padding: 1.1rem 0;
  border-bottom: 1px solid rgba(203, 187, 167, 0.35);
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.76rem; letter-spacing: 0.02em; color: #8F7A68;
}
.pd-crumbs a { white-space: nowrap; transition: color 0.2s; }
.pd-crumbs a:hover { color: #3A302A; }
.pd-crumbs-current { color: #3A302A; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pd {
  max-width: 1280px; margin: 0 auto;
  /* extra space at the bottom on phones so the floating WhatsApp buttons don't cover the order button */
  padding: 2rem 1.5rem 7rem;
  display: grid; gap: 2rem; align-items: start;
}
/* Tablets: photo above the details, as on phones. */
@media (min-width: 768px) { .pd { gap: 2.5rem; padding: 3rem 2.5rem 5rem; } }
@media (min-width: 768px) and (max-width: 1023px) { .pd-media { width: 100%; max-width: 34rem; } }
/* Laptops and up: photo and details side by side, the photo centred against the text so both sides balance. */
@media (min-width: 1024px) { .pd { grid-template-columns: 1fr 1fr; align-items: center; gap: 3.5rem; padding: 3.5rem 4rem 6rem; } }
@media (min-width: 1200px) { .pd { grid-template-columns: 1.15fr 1fr; gap: 4.5rem; } }
.pd-photo {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: #F4F1EA; border: 1px solid rgba(203, 187, 167, 0.5);
}
.pd-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pd-code {
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: #A8968A;
}
.pd-title {
  font-family: var(--font-inter), sans-serif; font-weight: 600; color: #111111;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.15; letter-spacing: -0.025em;
  margin-top: 0.6rem;
}
:lang(zh) .pd-title { letter-spacing: 0; line-height: 1.25; }
.pd-bonus {
  margin-top: 0.5rem; font-family: var(--font-inter), sans-serif; font-weight: 400;
  font-size: 0.95rem; line-height: 1.55; color: #666666; max-width: 46ch;
}
.pd-price {
  margin-top: 1.25rem; font-family: var(--font-inter), sans-serif; font-weight: 600;
  font-size: 1.45rem; letter-spacing: -0.02em; color: #111111; font-variant-numeric: tabular-nums;
}
.pd-section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(203, 187, 167, 0.35); }
.pd-label {
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: #8F7A68; margin-bottom: 0.9rem;
}
:lang(zh) .pd-label, :lang(zh) .pd-code { letter-spacing: 0.08em; }
.pd-desc { margin: 1.5rem 0 1.75rem; font-size: 0.95rem; line-height: 1.7; color: rgba(58, 48, 42, 0.62); max-width: 52ch; }
.pd-order { display: flex; width: 100%; justify-content: center; text-align: center; }
.pd-note {
  margin-top: 0.85rem; text-align: center;
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.72rem; letter-spacing: 0.02em; color: #A8968A;
}

/* spacing helper the inner pages use (not in the utility list below) */
.mt-4 { margin-top: 1rem; }

/* ── EDITORIAL PAGE HEADERS (inner pages) ── */
.page-head { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 768px) { .page-head { padding-top: 4.5rem; padding-bottom: 4rem; } }
.t-page { font-size: clamp(2.5rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; }
:lang(zh) .t-page { letter-spacing: 0; line-height: 1.2; }

/* ── ABOUT + ENGRAVING PAGES ── */
.about-hero, .about-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) {
  .about-hero { grid-template-columns: 1.1fr 1fr; gap: 4.5rem; }
  .about-split { grid-template-columns: 1fr 1.05fr; gap: 4.5rem; }
}
.about-hero .t-page { margin-bottom: 1.5rem; }
.about-split .t-section { margin-bottom: 0.25rem; }
.about-lead {
  font-family: var(--font-cormorant), Georgia, serif; font-weight: 500; color: #3A302A;
  font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.3; margin-bottom: 1.1rem; max-width: 30ch;
}
.about-lead--sm { font-size: 1.2rem; margin: 0.75rem 0 1rem; }
.about-text { font-size: 0.95rem; line-height: 1.75; color: rgba(58, 48, 42, 0.62); max-width: 56ch; }
.about-photo { position: relative; overflow: hidden; background: #F4F1EA; border: 1px solid rgba(203, 187, 167, 0.5); }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-photo--tall { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) { .about-photo--tall { aspect-ratio: 4 / 5; } }
.about-photo--wide { aspect-ratio: 3 / 2; }
.about-photo--square { aspect-ratio: 1 / 1; }
.about-list { margin: 1.5rem 0; }
.about-list li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; color: #3A302A; }
.about-list li + li { margin-top: 0.7rem; }
.about-icon {
  width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(201, 154, 145, 0.5); color: #713B43;
}
.about-icon svg { width: 0.95rem; height: 0.95rem; }

/* Editorial numbered list (replaces the boxed 01–04 cards). */
.numbered { display: grid; gap: 2rem 2.5rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .numbered { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numbered-item { border-top: 1px solid rgba(203, 187, 167, 0.6); padding-top: 1.4rem; }
.numbered-num {
  font-family: var(--font-cormorant), Georgia, serif; font-weight: 400; font-size: 2.6rem; line-height: 1;
  color: #CBBBA7; margin-bottom: 1rem; font-variant-numeric: lining-nums;
}
.numbered-title {
  font-family: var(--font-cormorant), Georgia, serif; font-weight: 500; font-size: 1.25rem; line-height: 1.25;
  color: #3A302A; margin-bottom: 0.6rem;
}
.numbered-text { font-size: 0.9rem; line-height: 1.7; color: rgba(58, 48, 42, 0.62); }

/* Package panels with photos (About page). */
.pkg-grid { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
@media (min-width: 768px) { .pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pkg-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(203, 187, 167, 0.5); }
.pkg-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #F4F1EA; }
.pkg-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.pkg-card:hover .pkg-photo img { transform: scale(1.03); }
.pkg-body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem 1.5rem 2rem; }
@media (min-width: 768px) { .pkg-body { padding: 2.25rem 2.5rem 2.5rem; } }
.pkg-title {
  font-family: var(--font-cormorant), Georgia, serif; font-weight: 500; color: #3A302A;
  font-size: clamp(1.5rem, 2.2vw, 1.85rem); line-height: 1.15; margin-bottom: 0.75rem;
}
.pkg-text { flex: 1; margin-bottom: 1.75rem; }

/* ── FAQ ACCORDION ── */
.faq { border-top: 1px solid rgba(203, 187, 167, 0.6); }
.faq-item { border-bottom: 1px solid rgba(203, 187, 167, 0.6); }
.faq-item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0; cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  font-family: var(--font-cormorant), Georgia, serif; font-weight: 500; color: #3A302A;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.3; transition: color 0.2s;
}
.faq-item summary:hover .faq-q { color: #2A2119; }
.faq-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #8F7A68;
  transition: transform 0.35s ease;
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-a { padding: 0 2.5rem 1.5rem 0; font-size: 0.93rem; line-height: 1.75; color: rgba(58, 48, 42, 0.62); max-width: 70ch; }
.faq-item[open] .faq-a { animation: klyn-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── CATALOG PRICE FILTERS: quiet text filters, underline on the active one ── */
.cat-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
  padding: 1.4rem 0; border-bottom: 1px solid rgba(203, 187, 167, 0.35);
}
.cat-filters-label, .cat-filters-count {
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: #8F7A68;
}
.cat-filters-count { margin-left: auto; }
/* tablet and up: label | filters | count on one row; the filters wrap inside their own column */
@media (min-width: 640px) {
  .cat-filters { display: grid; grid-template-columns: auto 1fr auto; column-gap: 1.75rem; }
  .cat-filters-count { margin-left: 0; }
}
.cat-filters-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.cat-filters-list button {
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.82rem; letter-spacing: 0.02em; white-space: nowrap;
  color: rgba(58, 48, 42, 0.6); padding: 0.2rem 0; border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.cat-filters-list button:hover { color: #3A302A; }
.cat-filters-list button[aria-pressed="true"] { color: #3A302A; border-bottom-color: #3A302A; }
:lang(zh) .cat-filters-label, :lang(zh) .cat-filters-count { letter-spacing: 0.08em; }

/* ── BUTTONS: crisp square-ish corners, like the cards and panels ── */
:is(a, button).btn, :is(a, button).btn-dark, :is(a, button).btn-outline, :is(a, button).btn-wa { border-radius: 2px; }

/* ── WHATSAPP GREEN: a deep green that suits the palette (still clearly WhatsApp) ── */
:is(a, button).btn-wa { background-color: #2B6448; }
:is(a, button).btn-wa:hover { background-color: #22533B; }
#wa-float a[data-wa] { background-color: #2B6448; box-shadow: 0 6px 22px rgba(43, 100, 72, 0.32); }
#wa-float a[data-wa]:hover { background-color: #22533B; box-shadow: 0 10px 28px rgba(43, 100, 72, 0.42); }

/* ── LOGO: stays on one line on small phones ── */
.logo-text { white-space: nowrap; }
@media (max-width: 420px) {
  .logo { gap: 0.45rem; }
  .logo-mark { width: 26px; height: 26px; }
  .logo-text { font-size: 1.1rem; }
  div.header-actions { gap: 0.4rem; }
  .header-actions .btn-dark { padding: 0.5rem 0.7rem; font-size: 0.74rem; }
}
@media (max-width: 350px) { .logo-mark { display: none; } }

/* ── B2B CATALOG PDF DOWNLOAD LINK ── */
.pdf-link {
  display: inline-flex; align-items: center; gap: 0.55rem; padding-bottom: 0.2rem;
  border-bottom: 1px solid rgba(58, 48, 42, 0.35);
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; color: #3A302A;
  transition: color 0.2s, border-color 0.2s;
}
.pdf-link:hover { color: #713B43; border-bottom-color: #713B43; }
.pdf-link svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.pdf-link small { font-size: 0.7rem; font-weight: 400; color: #A8968A; letter-spacing: 0.04em; }
.pdf-row { margin-top: 1.25rem; }

/* ── CART (see cart.js) ── */
/* header icon + count */
.cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; transition: color 0.2s; }
.cart-btn svg { width: 1.3rem; height: 1.3rem; }
.cart-count {
  position: absolute; top: 0.05rem; right: -0.05rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem;
  border-radius: 999px; background: #713B43; color: #fff;
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.6rem; font-weight: 600; line-height: 1.05rem; text-align: center;
}
.cart-count--inline { position: static; display: inline-block; margin-left: 0.4rem; vertical-align: middle; }
.header-wa { display: inline-flex; align-items: center; gap: 0.4rem; }
.header-wa-icon { display: none; width: 1.1rem; height: 1.1rem; }
@media (max-width: 420px) {
  .cart-btn { width: 2rem; }
  /* small phones: the header WhatsApp button shows just the icon, to make room for the cart */
  .header-actions .header-wa { padding: 0.5rem 0.6rem; }
  .header-wa-icon { display: block; }
  .header-wa-label { display: none; }
}

/* "+" on product cards */
.product-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.card-add {
  position: relative; flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(203, 187, 167, 0.8); background: #fff; color: #3A302A;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.card-add svg { width: 1rem; height: 1rem; }
.card-add span {
  position: absolute; right: -0.15rem; bottom: -0.15rem; width: 0.95rem; height: 0.95rem; border-radius: 50%;
  background: #713B43; color: #fff; font-size: 0.7rem; line-height: 0.95rem; text-align: center; font-weight: 600;
}
.card-add:hover { background: #3A302A; color: #fff; border-color: #3A302A; }

/* quantity selector (product page + cart) */
.qty { display: inline-flex; align-items: stretch; border: 1px solid rgba(203, 187, 167, 0.8); background: #fff; height: 2.75rem; }
.qty button { width: 2.5rem; font-size: 1.05rem; color: #3A302A; transition: background-color 0.2s; }
.qty button:hover { background: #FAF8F3; }
.qty input {
  width: 3rem; text-align: center; border: 0; border-left: 1px solid rgba(203, 187, 167, 0.5); border-right: 1px solid rgba(203, 187, 167, 0.5);
  font-family: "Chivo Mono", ui-monospace, monospace; font-size: 0.9rem; color: #3A302A; background: transparent; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* product page: quantity + add to cart, above the WhatsApp order button */
.pd-buy { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
.pd-add { flex: 1; justify-content: center; gap: 0.55rem; }
.pd-add-icon { width: 1.05rem; height: 1.05rem; }
.pd-order { margin-top: 0; }

/* drawer */
#cart { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.cart-backdrop { position: absolute; inset: 0; background: rgba(42, 33, 25, 0.35); opacity: 0; transition: opacity 0.3s; }
.cart-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(26rem, 100%); background: #fff;
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: -14px 0 40px rgba(42, 33, 25, 0.12);
}
#cart.is-open { pointer-events: auto; }
#cart.is-open .cart-backdrop { opacity: 1; }
#cart.is-open .cart-panel { transform: none; }
.cart-lock, .cart-lock body { overflow: hidden; }
.cart-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.5rem 1.5rem 1.1rem; border-bottom: 1px solid rgba(203, 187, 167, 0.4); }
.cart-eyebrow { font-family: var(--font-space-grotesk), sans-serif; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: #8F7A68; }
.cart-head h2 { font-family: var(--font-cormorant), Georgia, serif; font-weight: 500; font-size: 1.75rem; line-height: 1.1; margin-top: 0.3rem; color: #3A302A; }
.cart-head h2 span { font-size: 1.1rem; color: #8F7A68; }
.cart-x { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; color: #8F7A68; }
.cart-x svg { width: 1.1rem; height: 1.1rem; }
.cart-x:hover { color: #3A302A; }
.cart-empty { padding: 3rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.cart-empty p { font-family: var(--font-cormorant), Georgia, serif; font-size: 1.4rem; color: #3A302A; }
.cart-empty span { font-size: 0.88rem; line-height: 1.6; color: rgba(58, 48, 42, 0.62); margin-bottom: 0.8rem; }
.cart-list { flex: 1; overflow-y: auto; padding: 0.5rem 1.5rem; }
.cart-item { display: grid; grid-template-columns: 4.75rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(203, 187, 167, 0.35); }
.cart-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #F4F1EA; border: 1px solid rgba(203, 187, 167, 0.5); }
.cart-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cart-info { display: flex; flex-direction: column; min-width: 0; }
.cart-code { font-family: var(--font-space-grotesk), sans-serif; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #A8968A; }
.cart-name { font-family: var(--font-inter), sans-serif; font-weight: 600; font-size: 0.95rem; line-height: 1.3; letter-spacing: -0.01em; color: #111111; margin-top: 0.15rem; }
.cart-detail { font-family: var(--font-inter), sans-serif; font-size: 0.74rem; line-height: 1.45; color: #666666; margin-top: 0.15rem; }
.cart-price { font-family: var(--font-inter), sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: -0.015em; color: #111111; margin-top: 0.3rem; }
.cart-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.6rem; }
.cart-row .qty { height: 2.2rem; }
.cart-row .qty button { width: 2rem; }
.cart-row .qty input { width: 2.6rem; font-size: 0.82rem; }
.cart-remove { font-family: var(--font-space-grotesk), sans-serif; font-size: 0.72rem; color: #8F7A68; text-decoration: underline; text-underline-offset: 3px; }
.cart-remove:hover { color: #713B43; }
.cart-foot { padding: 1.1rem 1.5rem 1.5rem; border-top: 1px solid rgba(203, 187, 167, 0.5); background: #FAF8F3; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; }
.cart-total span { font-family: var(--font-space-grotesk), sans-serif; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8F7A68; }
.cart-total strong { font-family: var(--font-inter), sans-serif; font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; color: #111111; }
.cart-note { font-size: 0.76rem; line-height: 1.55; color: rgba(58, 48, 42, 0.62); margin: 0.6rem 0 1rem; }
.cart-send { display: flex; width: 100%; justify-content: center; gap: 0.5rem; }
.cart-wa-icon { width: 1.1rem; height: 1.1rem; }
.cart-clear { display: block; margin: 0.8rem auto 0; font-family: var(--font-space-grotesk), sans-serif; font-size: 0.72rem; color: #8F7A68; text-decoration: underline; text-underline-offset: 3px; }
:lang(zh) .cart-eyebrow, :lang(zh) .cart-total span { letter-spacing: 0.08em; }

/* "added" toast */
.cart-toast {
  position: fixed; left: 50%; bottom: 1.5rem; z-index: 110; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0.9rem 0.75rem 1.1rem; max-width: calc(100% - 2rem);
  background: #2A2119; color: #fff; box-shadow: 0 12px 30px rgba(42, 33, 25, 0.25);
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.8rem; transition: opacity 0.3s, transform 0.3s;
}
.cart-toast.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cart-toast button { color: #E4D8C8; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 767px) { .cart-toast { bottom: 5.5rem; } }

/* ── MOTION (see motion.js) ──
   Only active once motion.js has added the "motion" class, and never for visitors
   who ask their device to reduce motion. */
.motion [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Home hero: the photo settles in with a slow zoom, the text rises in line by line. */
@keyframes klyn-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes klyn-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.motion .hero-img { animation: klyn-settle 2.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.motion .hero-copy > * { animation: klyn-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.motion .hero-copy > :nth-child(1) { animation-delay: 0.15s; }
.motion .hero-copy > :nth-child(2) { animation-delay: 0.3s; }
.motion .hero-copy > :nth-child(3) { animation-delay: 0.45s; }
.motion .hero-copy > :nth-child(4) { animation-delay: 0.6s; }
.motion .hero-copy > :nth-child(5) { animation-delay: 0.75s; }
@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal] { opacity: 1; transform: none; transition: none; }
  .motion .hero-img, .motion .hero-copy > * { animation: none; }
}

/* Keep the "hidden" attribute working even on elements styled as flex/grid. */
[hidden] { display: none !important; }

/* ── 2. UTILITY CLASSES ───────────────────────────────────── */
*,
:after,
:before {
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgba(59,130,246,.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}
::backdrop {
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgba(59,130,246,.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}
/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/*,
:after,
:before {
  box-sizing:border-box;
  border:0 solid #e5e7eb;
}
:after,
:before {
  --tw-content:"";
}
:host,
html {
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  -moz-tab-size:4;
  -o-tab-size:4;
  tab-size:4;
  font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  font-feature-settings:normal;
  font-variation-settings:normal;
  -webkit-tap-highlight-color:transparent;
}
body {
  margin:0;
  line-height:inherit;
}
hr {
  height:0;
  color:inherit;
  border-top-width:1px;
}
abbr:where([title]) {
  -webkit-text-decoration:underline dotted;
  text-decoration:underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size:inherit;
  font-weight:inherit;
}
a {
  color:inherit;
  text-decoration:inherit;
}
b,
strong {
  font-weight:bolder;
}
code,
kbd,
pre,
samp {
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
  font-feature-settings:normal;
  font-variation-settings:normal;
  font-size:1em;
}
small {
  font-size:80%;
}
sub,
sup {
  font-size:75%;
  line-height:0;
  position:relative;
  vertical-align:baseline;
}
sub {
  bottom:-.25em;
}
sup {
  top:-.5em;
}
table {
  text-indent:0;
  border-color:inherit;
  border-collapse:collapse;
}
button,
input,
optgroup,
select,
textarea {
  font-family:inherit;
  font-feature-settings:inherit;
  font-variation-settings:inherit;
  font-size:100%;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  color:inherit;
  margin:0;
  padding:0;
}
button,
select {
  text-transform:none;
}
button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
  -webkit-appearance:button;
  background-color:transparent;
  background-image:none;
}
:-moz-focusring {
  outline:auto;
}
:-moz-ui-invalid {
  box-shadow:none;
}
progress {
  vertical-align:baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height:auto;
}
[type=search] {
  -webkit-appearance:textfield;
  outline-offset:-2px;
}
::-webkit-search-decoration {
  -webkit-appearance:none;
}
::-webkit-file-upload-button {
  -webkit-appearance:button;
  font:inherit;
}
summary {
  display:list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin:0;
}
fieldset {
  margin:0;
}
fieldset,
legend {
  padding:0;
}
menu,
ol,
ul {
  list-style:none;
  margin:0;
  padding:0;
}
dialog {
  padding:0;
}
textarea {
  resize:vertical;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity:1;
  color:#9ca3af;
}
input::placeholder,
textarea::placeholder {
  opacity:1;
  color:#9ca3af;
}
[role=button],
button {
  cursor:pointer;
}
:disabled {
  cursor:default;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display:block;
  vertical-align:middle;
}
img,
video {
  max-width:100%;
  height:auto;
}
[hidden]:where(:not([hidden=until-found])) {
  display:none;
}
html {
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  * {
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
}
body {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255/var(--tw-bg-opacity,1));
  --tw-text-opacity:1;
  color:rgb(58 48 42/var(--tw-text-opacity,1));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,
h2,
h3 {
  font-family:var(--font-cormorant),Georgia,serif;
}
.t-hero {
  font-size:clamp(2.8rem,8vw,6rem);
  line-height:1;
  letter-spacing:-.03em;
}
.t-section {
  font-size:clamp(2rem,2.8vw,2.25rem);
  line-height:1.12;
  letter-spacing:-.02em;
}
.t-card {
  font-size:clamp(1rem,2vw,1.2rem);
  line-height:1.2;
  letter-spacing:-.01em;
}
.t-label {
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:rgb(143 122 104/var(--tw-text-opacity,1));
}
.t-label,
.t-price {
  font-family:var(--font-space-grotesk),sans-serif;
  --tw-text-opacity:1;
}
.t-price {
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:-.025em;
  color:rgb(58 48 42/var(--tw-text-opacity,1));
}
.btn,
.btn-dark {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius:.5rem;
  font-family:var(--font-space-grotesk),sans-serif;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.025em;
  transition-property:all;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.2s;
}
.btn-dark {
  padding:.875rem 1.75rem;
  --tw-text-opacity:1;
  color:rgb(255 255 255/var(--tw-text-opacity,1));
  --tw-shadow:0 4px 15px rgba(24,28,32,.05);
  --tw-shadow-colored:0 4px 15px var(--tw-shadow-color);
  background:linear-gradient(135deg,#82464f,#713b43 55%,#5c2f36);
}
.btn-dark,
.btn-dark:hover {
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
.btn-dark:hover {
  background:linear-gradient(135deg,#8f4f58,#7c424b 55%,#663640);
  --tw-shadow:0 6px 22px rgba(24,28,32,.07);
  --tw-shadow-colored:0 6px 22px var(--tw-shadow-color);
}
.btn-outline {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius:.5rem;
  font-family:var(--font-space-grotesk),sans-serif;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.025em;
  transition-property:all;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.2s;
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(228 216 200/var(--tw-border-opacity,1));
  background-image:linear-gradient(135deg,#f1e9dd,#cbbba7);
  padding:.875rem 1.75rem;
  --tw-text-opacity:1;
  color:rgb(58 48 42/var(--tw-text-opacity,1));
  --tw-shadow:0 4px 15px rgba(24,28,32,.05);
  --tw-shadow-colored:0 4px 15px var(--tw-shadow-color);
}
.btn-outline,
.btn-outline:hover {
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
.btn-outline:hover {
  background-image:linear-gradient(135deg,#e4d8c8,#bba88f);
  --tw-shadow:0 6px 22px rgba(24,28,32,.07);
  --tw-shadow-colored:0 6px 22px var(--tw-shadow-color);
}
.btn-ghost {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius:.5rem;
  font-family:var(--font-space-grotesk),sans-serif;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.025em;
  transition-property:all;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.2s;
  --tw-text-opacity:1;
  color:rgb(58 48 42/var(--tw-text-opacity,1));
  text-decoration-line:underline;
  text-underline-offset:4px;
}
.btn-ghost:hover {
  --tw-text-opacity:1;
  color:rgb(42 33 25/var(--tw-text-opacity,1));
}
.btn-wa {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius:.5rem;
  font-family:var(--font-space-grotesk),sans-serif;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.025em;
  transition-property:all;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.2s;
  --tw-bg-opacity:1;
  background-color:rgb(37 211 102/var(--tw-bg-opacity,1));
  padding:.875rem 1.75rem;
  --tw-text-opacity:1;
  color:rgb(255 255 255/var(--tw-text-opacity,1));
  --tw-shadow:0 4px 15px rgba(24,28,32,.05);
  --tw-shadow-colored:0 4px 15px var(--tw-shadow-color);
}
.btn-wa,
.btn-wa:hover {
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
.btn-wa:hover {
  --tw-bg-opacity:1;
  background-color:rgb(29 168 81/var(--tw-bg-opacity,1));
  --tw-shadow:0 6px 22px rgba(24,28,32,.07);
  --tw-shadow-colored:0 6px 22px var(--tw-shadow-color);
}
.hamper-card {
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:.125rem;
  border-width:1px;
  border-color:hsla(34,34%,84%,.7);
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255/var(--tw-bg-opacity,1));
  --tw-shadow:0 4px 15px rgba(24,28,32,.05);
  --tw-shadow-colored:0 4px 15px var(--tw-shadow-color);
  transition-property:all;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.3s;
  transition-timing-function:cubic-bezier(0,0,.2,1);
}
.hamper-card,
.hamper-card:hover {
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
.hamper-card:hover {
  --tw-translate-y:-0.25rem;
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-border-opacity:1;
  border-color:rgb(203 187 167/var(--tw-border-opacity,1));
  --tw-shadow:0 14px 40px rgba(24,28,32,.1);
  --tw-shadow-colored:0 14px 40px var(--tw-shadow-color);
}
.hamper-card-img {
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255/var(--tw-bg-opacity,1));
}
.hamper-card-img img {
  height:100%;
  width:100%;
  -o-object-fit:contain;
  object-fit:contain;
  padding:1rem;
  transition-property:transform;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.5s;
  transition-timing-function:cubic-bezier(0,0,.2,1);
}
.group:hover .hamper-card-img img {
  --tw-scale-x:1.05;
  --tw-scale-y:1.05;
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hamper-card-body {
  border-top-width:1px;
  border-color:hsla(33,26%,73%,.35);
  padding:1.25rem;
  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.3s;
}
.group:hover .hamper-card-body {
  --tw-border-opacity:1;
  border-color:rgb(203 187 167/var(--tw-border-opacity,1));
}
.soft-card {
  border-radius:.125rem;
  border-width:1px;
  border-color:hsla(34,34%,84%,.7);
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255/var(--tw-bg-opacity,1));
  --tw-shadow:0 4px 15px rgba(24,28,32,.05);
  --tw-shadow-colored:0 4px 15px var(--tw-shadow-color);
  transition-property:all;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.3s;
}
.soft-card,
.soft-card:hover {
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
.soft-card:hover {
  --tw-shadow:0 6px 22px rgba(24,28,32,.07);
  --tw-shadow-colored:0 6px 22px var(--tw-shadow-color);
}
.badge {
  display:inline-block;
  border-radius:9999px;
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(228 216 200/var(--tw-border-opacity,1));
  --tw-bg-opacity:1;
  background-color:rgb(250 248 243/var(--tw-bg-opacity,1));
  padding:.25rem .75rem;
  font-family:var(--font-space-grotesk),sans-serif;
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  --tw-text-opacity:1;
  color:rgb(143 122 104/var(--tw-text-opacity,1));
}
.px-site {
  padding-left:1.5rem;
  padding-right:1.5rem;
}
@media (min-width:768px) {
  .px-site {
    padding-left:2.5rem;
    padding-right:2.5rem;
  }
}
@media (min-width:1024px) {
  .px-site {
    padding-left:4rem;
    padding-right:4rem;
  }
}
.section {
  padding-top:5rem;
  padding-bottom:5rem;
}
@media (min-width:768px) {
  .section {
    padding-top:7rem;
    padding-bottom:7rem;
  }
}
.pointer-events-none {
  pointer-events:none;
}
.pointer-events-auto {
  pointer-events:auto;
}
.invisible {
  visibility:hidden;
}
.fixed {
  position:fixed;
}
.absolute {
  position:absolute;
}
.relative {
  position:relative;
}
.sticky {
  position:sticky;
}
.inset-0 {
  inset:0;
}
.-right-10 {
  right:-2.5rem;
}
.bottom-0 {
  bottom:0;
}
.bottom-2\.5 {
  bottom:.625rem;
}
.bottom-6 {
  bottom:1.5rem;
}
.bottom-\[78px\] {
  bottom:78px;
}
.left-0 {
  left:0;
}
.left-1\/2 {
  left:50%;
}
.left-2\.5 {
  left:.625rem;
}
.left-3 {
  left:.75rem;
}
.right-0 {
  right:0;
}
.right-6 {
  right:1.5rem;
}
.top-0 {
  top:0;
}
.top-1\/2 {
  top:50%;
}
.top-20 {
  top:5rem;
}
.top-3 {
  top:.75rem;
}
.top-full {
  top:100%;
}
.z-10 {
  z-index:10;
}
.z-50 {
  z-index:50;
}
.z-\[100\] {
  z-index:100;
}
.col-span-2 {
  grid-column:span 2/span 2;
}
.mx-auto {
  margin-left:auto;
  margin-right:auto;
}
.-mb-px {
  margin-bottom:-1px;
}
.mb-1 {
  margin-bottom:.25rem;
}
.mb-1\.5 {
  margin-bottom:.375rem;
}
.mb-10 {
  margin-bottom:2.5rem;
}
.mb-12 {
  margin-bottom:3rem;
}
.mb-16 {
  margin-bottom:4rem;
}
.mb-2 {
  margin-bottom:.5rem;
}
.mb-2\.5 {
  margin-bottom:.625rem;
}
.mb-3 {
  margin-bottom:.75rem;
}
.mb-4 {
  margin-bottom:1rem;
}
.mb-5 {
  margin-bottom:1.25rem;
}
.mb-6 {
  margin-bottom:1.5rem;
}
.mb-8 {
  margin-bottom:2rem;
}
.ml-2 {
  margin-left:.5rem;
}
.ml-3\.5 {
  margin-left:.875rem;
}
.ml-6 {
  margin-left:1.5rem;
}
.ml-auto {
  margin-left:auto;
}
.mr-3 {
  margin-right:.75rem;
}
.mt-0\.5 {
  margin-top:.125rem;
}
.mt-1 {
  margin-top:.25rem;
}
.mt-1\.5 {
  margin-top:.375rem;
}
.mt-12 {
  margin-top:3rem;
}
.mt-2 {
  margin-top:.5rem;
}
.mt-2\.5 {
  margin-top:.625rem;
}
.mt-3 {
  margin-top:.75rem;
}
.mt-5 {
  margin-top:1.25rem;
}
.mt-6 {
  margin-top:1.5rem;
}
.mt-8 {
  margin-top:2rem;
}
.block {
  display:block;
}
.inline-block {
  display:inline-block;
}
.flex {
  display:flex;
}
.grid {
  display:grid;
}
.contents {
  display:contents;
}
.hidden {
  display:none;
}
.aspect-\[16\/11\] {
  aspect-ratio:16/11;
}
.aspect-\[16\/9\] {
  aspect-ratio:16/9;
}
.aspect-\[4\/3\] {
  aspect-ratio:4/3;
}
.aspect-\[9\/10\] {
  aspect-ratio:9/10;
}
.aspect-square {
  aspect-ratio:1/1;
}
.h-1 {
  height:.25rem;
}
.h-10 {
  height:2.5rem;
}
.h-11 {
  height:2.75rem;
}
.h-16 {
  height:4rem;
}
.h-24 {
  height:6rem;
}
.h-3\.5 {
  height:.875rem;
}
.h-4 {
  height:1rem;
}
.h-5 {
  height:1.25rem;
}
.h-6 {
  height:1.5rem;
}
.h-7 {
  height:1.75rem;
}
.h-9 {
  height:2.25rem;
}
.h-\[18px\] {
  height:18px;
}
.h-\[280px\] {
  height:280px;
}
.h-full {
  height:100%;
}
.min-h-\[420px\] {
  min-height:420px;
}
.min-h-\[60vh\] {
  min-height:60vh;
}
.min-h-screen {
  min-height:100vh;
}
.w-1 {
  width:.25rem;
}
.w-10 {
  width:2.5rem;
}
.w-11 {
  width:2.75rem;
}
.w-24 {
  width:6rem;
}
.w-28 {
  width:7rem;
}
.w-3\.5 {
  width:.875rem;
}
.w-36 {
  width:9rem;
}
.w-4 {
  width:1rem;
}
.w-5 {
  width:1.25rem;
}
.w-6 {
  width:1.5rem;
}
.w-7 {
  width:1.75rem;
}
.w-72 {
  width:18rem;
}
.w-9 {
  width:2.25rem;
}
.w-\[130\%\] {
  width:130%;
}
.w-\[18px\] {
  width:18px;
}
.w-full {
  width:100%;
}
.max-w-\[11rem\] {
  max-width:11rem;
}
.max-w-\[1200px\] {
  max-width:1200px;
}
.max-w-\[16ch\] {
  max-width:16ch;
}
.max-w-\[18ch\] {
  max-width:18ch;
}
.max-w-\[20ch\] {
  max-width:20ch;
}
.max-w-\[22ch\] {
  max-width:22ch;
}
.max-w-\[24ch\] {
  max-width:24ch;
}
.max-w-\[26ch\] {
  max-width:26ch;
}
.max-w-\[36ch\] {
  max-width:36ch;
}
.max-w-\[38ch\] {
  max-width:38ch;
}
.max-w-\[42ch\] {
  max-width:42ch;
}
.max-w-\[46ch\] {
  max-width:46ch;
}
.max-w-\[480px\] {
  max-width:480px;
}
.max-w-\[48ch\] {
  max-width:48ch;
}
.max-w-\[50ch\] {
  max-width:50ch;
}
.max-w-\[52ch\] {
  max-width:52ch;
}
.max-w-\[540px\] {
  max-width:540px;
}
.max-w-\[62ch\] {
  max-width:62ch;
}
.max-w-\[760px\] {
  max-width:760px;
}
.max-w-md {
  max-width:28rem;
}
.max-w-none {
  max-width:none;
}
.max-w-site {
  max-width:1280px;
}
.max-w-sm {
  max-width:24rem;
}
.flex-1 {
  flex:1 1 0%;
}
.shrink-0 {
  flex-shrink:0;
}
.-translate-x-1 {
  --tw-translate-x:-0.25rem;
}
.-translate-x-1,
.-translate-x-1\/2 {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-1\/2 {
  --tw-translate-x:-50%;
}
.-translate-y-1\/2 {
  --tw-translate-y:-50%;
}
.-translate-y-1\/2,
.translate-x-0 {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0 {
  --tw-translate-x:0px;
}
.translate-x-full {
  --tw-translate-x:100%;
}
.translate-x-full,
.translate-y-0 {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-0 {
  --tw-translate-y:0px;
}
.translate-y-1 {
  --tw-translate-y:0.25rem;
}
.translate-y-1,
.translate-y-2 {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-2 {
  --tw-translate-y:0.5rem;
}
.scale-100 {
  --tw-scale-x:1;
  --tw-scale-y:1;
}
.scale-100,
.scale-90 {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-90 {
  --tw-scale-x:.9;
  --tw-scale-y:.9;
}
.cursor-pointer {
  cursor:pointer;
}
.grid-cols-2 {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.grid-cols-3 {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.grid-cols-4 {
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.grid-cols-\[8rem_1fr\] {
  grid-template-columns:8rem 1fr;
}
.flex-col {
  flex-direction:column;
}
.flex-wrap {
  flex-wrap:wrap;
}
.items-start {
  align-items:flex-start;
}
.items-end {
  align-items:flex-end;
}
.items-center {
  align-items:center;
}
.items-baseline {
  align-items:baseline;
}
.justify-center {
  justify-content:center;
}
.justify-between {
  justify-content:space-between;
}
.gap-0 {
  gap:0;
}
.gap-1\.5 {
  gap:.375rem;
}
.gap-10 {
  gap:2.5rem;
}
.gap-12 {
  gap:3rem;
}
.gap-16 {
  gap:4rem;
}
.gap-2 {
  gap:.5rem;
}
.gap-2\.5 {
  gap:.625rem;
}
.gap-3 {
  gap:.75rem;
}
.gap-4 {
  gap:1rem;
}
.gap-5 {
  gap:1.25rem;
}
.gap-6 {
  gap:1.5rem;
}
.gap-8 {
  gap:2rem;
}
.gap-px {
  gap:1px;
}
.space-y-2>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(.625rem * var(--tw-space-y-reverse));
}
.space-y-3>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(.75rem * var(--tw-space-y-reverse));
}
.space-y-4>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1rem * var(--tw-space-y-reverse));
}
.space-y-px>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse:0;
  margin-top:calc(1px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1px * var(--tw-space-y-reverse));
}
.divide-y>:not([hidden])~:not([hidden]) {
  --tw-divide-y-reverse:0;
  border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:calc(1px * var(--tw-divide-y-reverse));
}
.divide-line>:not([hidden])~:not([hidden]) {
  border-color:hsla(33,26%,73%,.35);
}
.self-start {
  align-self:flex-start;
}
.self-end {
  align-self:flex-end;
}
.overflow-hidden {
  overflow:hidden;
}
.whitespace-nowrap {
  white-space:nowrap;
}
.rounded-full {
  border-radius:9999px;
}
.rounded-lg {
  border-radius:.5rem;
}
.rounded-md {
  border-radius:.375rem;
}
.rounded-sm {
  border-radius:.125rem;
}
.border {
  border-width:1px;
}
.border-b {
  border-bottom-width:1px;
}
.border-b-2 {
  border-bottom-width:2px;
}
.border-t {
  border-top-width:1px;
}
.border-graphite {
  --tw-border-opacity:1;
  border-color:rgb(58 48 42/var(--tw-border-opacity,1));
}
.border-line {
  border-color:hsla(33,26%,73%,.35);
}
.border-line-strong {
  border-color:hsla(33,26%,73%,.55);
}
.border-silver-light {
  --tw-border-opacity:1;
  border-color:rgb(228 216 200/var(--tw-border-opacity,1));
}
.border-transparent {
  border-color:transparent;
}
.border-white\/10 {
  border-color:hsla(0,0%,100%,.1);
}
.border-white\/15 {
  border-color:hsla(0,0%,100%,.15);
}
.bg-\[\#25D366\] {
  --tw-bg-opacity:1;
  background-color:rgb(37 211 102/var(--tw-bg-opacity,1));
}
.bg-black\/30 {
  background-color:rgba(0,0,0,.3);
}
.bg-graphite {
  --tw-bg-opacity:1;
  background-color:rgb(58 48 42/var(--tw-bg-opacity,1));
}
.bg-line {
  background-color:hsla(33,26%,73%,.35);
}
.bg-rose-wash {
  --tw-bg-opacity:1;
  background-color:rgb(246 235 231/var(--tw-bg-opacity,1));
}
.bg-silver-50 {
  --tw-bg-opacity:1;
  background-color:rgb(241 233 221/var(--tw-bg-opacity,1));
}
.bg-silver-dark {
  --tw-bg-opacity:1;
  background-color:rgb(143 122 104/var(--tw-bg-opacity,1));
}
.bg-silver-light {
  --tw-bg-opacity:1;
  background-color:rgb(228 216 200/var(--tw-bg-opacity,1));
}
.bg-snow {
  --tw-bg-opacity:1;
  background-color:rgb(250 248 243/var(--tw-bg-opacity,1));
}
.bg-transparent {
  background-color:transparent;
}
.bg-white {
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255/var(--tw-bg-opacity,1));
}
.bg-white\/15 {
  background-color:hsla(0,0%,100%,.15);
}
.bg-white\/90 {
  background-color:hsla(0,0%,100%,.9);
}
.bg-white\/\[0\.06\] {
  background-color:hsla(0,0%,100%,.06);
}
.bg-gradient-to-r {
  background-image:linear-gradient(to right,var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image:linear-gradient(to top,var(--tw-gradient-stops));
}
.from-obsidian\/45 {
  --tw-gradient-from:rgba(42,33,25,.45) var(--tw-gradient-from-position);
  --tw-gradient-to:rgba(42,33,25,0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
}
.from-obsidian\/55 {
  --tw-gradient-from:rgba(42,33,25,.55) var(--tw-gradient-from-position);
  --tw-gradient-to:rgba(42,33,25,0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
}
.from-obsidian\/70 {
  --tw-gradient-from:rgba(42,33,25,.7) var(--tw-gradient-from-position);
  --tw-gradient-to:rgba(42,33,25,0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
}
.via-obsidian\/0 {
  --tw-gradient-to:rgba(42,33,25,0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from),rgba(42,33,25,0) var(--tw-gradient-via-position),var(--tw-gradient-to);
}
.via-obsidian\/25 {
  --tw-gradient-to:rgba(42,33,25,0) var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from),rgba(42,33,25,.25) var(--tw-gradient-via-position),var(--tw-gradient-to);
}
.via-transparent {
  --tw-gradient-to:transparent var(--tw-gradient-to-position);
  --tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to);
}
.to-transparent {
  --tw-gradient-to:transparent var(--tw-gradient-to-position);
}
.object-contain {
  -o-object-fit:contain;
  object-fit:contain;
}
.object-cover {
  -o-object-fit:cover;
  object-fit:cover;
}
.p-2 {
  padding:.5rem;
}
.p-3\.5 {
  padding:.875rem;
}
.p-4 {
  padding:1rem;
}
.p-5 {
  padding:1.25rem;
}
.p-6 {
  padding:1.5rem;
}
.p-7 {
  padding:1.75rem;
}
.p-8 {
  padding:2rem;
}
.px-1\.5 {
  padding-left:.375rem;
  padding-right:.375rem;
}
.px-2\.5 {
  padding-left:.625rem;
  padding-right:.625rem;
}
.px-3\.5 {
  padding-left:.875rem;
  padding-right:.875rem;
}
.px-4 {
  padding-left:1rem;
  padding-right:1rem;
}
.px-5 {
  padding-left:1.25rem;
  padding-right:1.25rem;
}
.px-6 {
  padding-left:1.5rem;
  padding-right:1.5rem;
}
.px-7 {
  padding-left:1.75rem;
  padding-right:1.75rem;
}
.px-8 {
  padding-left:2rem;
  padding-right:2rem;
}
.py-0\.5 {
  padding-top:.125rem;
  padding-bottom:.125rem;
}
.py-1 {
  padding-top:.25rem;
  padding-bottom:.25rem;
}
.py-10 {
  padding-top:2.5rem;
  padding-bottom:2.5rem;
}
.py-12 {
  padding-top:3rem;
  padding-bottom:3rem;
}
.py-14 {
  padding-top:3.5rem;
  padding-bottom:3.5rem;
}
.py-16 {
  padding-top:4rem;
  padding-bottom:4rem;
}
.py-2 {
  padding-top:.5rem;
  padding-bottom:.5rem;
}
.py-2\.5 {
  padding-top:.625rem;
  padding-bottom:.625rem;
}
.py-20 {
  padding-top:5rem;
  padding-bottom:5rem;
}
.py-24 {
  padding-top:6rem;
  padding-bottom:6rem;
}
.py-3\.5 {
  padding-top:.875rem;
  padding-bottom:.875rem;
}
.py-4 {
  padding-top:1rem;
  padding-bottom:1rem;
}
.py-5 {
  padding-top:1.25rem;
  padding-bottom:1.25rem;
}
.py-6 {
  padding-top:1.5rem;
  padding-bottom:1.5rem;
}
.py-7 {
  padding-top:1.75rem;
  padding-bottom:1.75rem;
}
.pb-14 {
  padding-bottom:3.5rem;
}
.pb-16 {
  padding-bottom:4rem;
}
.pb-20 {
  padding-bottom:5rem;
}
.pb-3 {
  padding-bottom:.75rem;
}
.pb-4 {
  padding-bottom:1rem;
}
.pl-3\.5 {
  padding-left:.875rem;
}
.pr-4 {
  padding-right:1rem;
}
.pt-0 {
  padding-top:0;
}
.pt-1 {
  padding-top:.25rem;
}
.pt-12 {
  padding-top:3rem;
}
.pt-16 {
  padding-top:4rem;
}
.pt-20 {
  padding-top:5rem;
}
.pt-3 {
  padding-top:.75rem;
}
.pt-5 {
  padding-top:1.25rem;
}
.pt-6 {
  padding-top:1.5rem;
}
.text-center {
  text-align:center;
}
.text-right {
  text-align:right;
}
.font-body {
  font-family:var(--font-inter),sans-serif;
}
.font-display {
  font-family:var(--font-cormorant),Georgia,serif;
}
.font-label {
  font-family:var(--font-space-grotesk),sans-serif;
}
.text-\[0\.65rem\] {
  font-size:.65rem;
}
.text-\[0\.68rem\] {
  font-size:.68rem;
}
.text-\[0\.6rem\] {
  font-size:.6rem;
}
.text-\[0\.72rem\] {
  font-size:.72rem;
}
.text-\[0\.74rem\] {
  font-size:.74rem;
}
.text-\[0\.75rem\] {
  font-size:.75rem;
}
.text-\[0\.76rem\] {
  font-size:.76rem;
}
.text-\[0\.78rem\] {
  font-size:.78rem;
}
.text-\[0\.7rem\] {
  font-size:.7rem;
}
.text-\[0\.82rem\] {
  font-size:.82rem;
}
.text-\[0\.84rem\] {
  font-size:.84rem;
}
.text-\[0\.85rem\] {
  font-size:.85rem;
}
.text-\[0\.86rem\] {
  font-size:.86rem;
}
.text-\[0\.88rem\] {
  font-size:.88rem;
}
.text-\[0\.8rem\] {
  font-size:.8rem;
}
.text-\[0\.92rem\] {
  font-size:.92rem;
}
.text-\[0\.95rem\] {
  font-size:.95rem;
}
.text-\[0\.9rem\] {
  font-size:.9rem;
}
.text-\[1\.05rem\] {
  font-size:1.05rem;
}
.text-\[1\.15rem\] {
  font-size:1.15rem;
}
.text-\[1\.1rem\] {
  font-size:1.1rem;
}
.text-\[1\.2rem\] {
  font-size:1.2rem;
}
.text-\[1\.3rem\] {
  font-size:1.3rem;
}
.text-\[1\.4rem\] {
  font-size:1.4rem;
}
.text-\[1\.5rem\] {
  font-size:1.5rem;
}
.text-\[1\.75rem\] {
  font-size:1.75rem;
}
.text-\[1\.875rem\] {
  font-size:1.875rem;
}
.text-\[1rem\] {
  font-size:1rem;
}
.text-\[2\.2rem\] {
  font-size:2.2rem;
}
.text-\[2\.4rem\] {
  font-size:2.4rem;
}
.text-\[2\.5rem\] {
  font-size:2.5rem;
}
.text-\[2rem\] {
  font-size:2rem;
}
.text-\[3rem\] {
  font-size:3rem;
}
.text-base {
  font-size:1rem;
  line-height:1.5rem;
}
.text-lg {
  font-size:1.125rem;
  line-height:1.75rem;
}
.font-bold {
  font-weight:700;
}
.font-medium {
  font-weight:500;
}
.font-semibold {
  font-weight:600;
}
.uppercase {
  text-transform:uppercase;
}
.italic {
  font-style:italic;
}
.leading-\[1\.05\] {
  line-height:1.05;
}
.leading-\[1\.65\] {
  line-height:1.65;
}
.leading-none {
  line-height:1;
}
.leading-relaxed {
  line-height:1.625;
}
.leading-snug {
  line-height:1.375;
}
.leading-tight {
  line-height:1.25;
}
.tracking-tight {
  letter-spacing:-.025em;
}
.tracking-wide {
  letter-spacing:.025em;
}
.tracking-widest {
  letter-spacing:.22em;
}
.text-burgundy {
  --tw-text-opacity:1;
  color:rgb(113 59 67/var(--tw-text-opacity,1));
}
.text-graphite {
  --tw-text-opacity:1;
  color:rgb(58 48 42/var(--tw-text-opacity,1));
}
.text-graphite-dim {
  color:rgba(58,48,42,.62);
}
.text-silver-dark {
  --tw-text-opacity:1;
  color:rgb(143 122 104/var(--tw-text-opacity,1));
}
.text-white {
  --tw-text-opacity:1;
  color:rgb(255 255 255/var(--tw-text-opacity,1));
}
.text-white\/35 {
  color:hsla(0,0%,100%,.35);
}
.text-white\/40 {
  color:hsla(0,0%,100%,.4);
}
.text-white\/45 {
  color:hsla(0,0%,100%,.45);
}
.text-white\/50 {
  color:hsla(0,0%,100%,.5);
}
.text-white\/55 {
  color:hsla(0,0%,100%,.55);
}
.text-white\/60 {
  color:hsla(0,0%,100%,.6);
}
.text-white\/65 {
  color:hsla(0,0%,100%,.65);
}
.text-white\/70 {
  color:hsla(0,0%,100%,.7);
}
.text-white\/75 {
  color:hsla(0,0%,100%,.75);
}
.text-white\/80 {
  color:hsla(0,0%,100%,.8);
}
.text-white\/85 {
  color:hsla(0,0%,100%,.85);
}
.text-white\/\[0\.32\] {
  color:hsla(0,0%,100%,.32);
}
.underline {
  text-decoration-line:underline;
}
.underline-offset-2 {
  text-underline-offset:2px;
}
.accent-graphite {
  accent-color:#3a302a;
}
.opacity-0 {
  opacity:0;
}
.opacity-100 {
  opacity:1;
}
.opacity-80 {
  opacity:.8;
}
.shadow-\[0_6px_22px_rgba\(37\2c 211\2c 102\2c 0\.4\)\] {
  --tw-shadow:0 6px 22px rgba(37,211,102,.4);
  --tw-shadow-colored:0 6px 22px var(--tw-shadow-color);
}
.shadow-\[0_6px_22px_rgba\(37\2c 211\2c 102\2c 0\.4\)\],
.shadow-soft {
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
.shadow-soft {
  --tw-shadow:0 4px 15px rgba(24,28,32,.05);
  --tw-shadow-colored:0 4px 15px var(--tw-shadow-color);
}
.shadow-soft-lg {
  --tw-shadow:0 14px 40px rgba(24,28,32,.1);
  --tw-shadow-colored:0 14px 40px var(--tw-shadow-color);
}
.shadow-soft-lg,
.shadow-soft-md {
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
.shadow-soft-md {
  --tw-shadow:0 6px 22px rgba(24,28,32,.07);
  --tw-shadow-colored:0 6px 22px var(--tw-shadow-color);
}
.brightness-0 {
  --tw-brightness:brightness(0);
}
.brightness-0,
.invert {
  filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert:invert(100%);
}
.filter {
  filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-md {
  --tw-backdrop-blur:blur(12px);
}
.backdrop-blur-md,
.backdrop-blur-sm {
  backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur:blur(4px);
}
.transition-all {
  transition-property:all;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.15s;
}
.transition-colors {
  transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.15s;
}
.transition-opacity {
  transition-property:opacity;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.15s;
}
.transition-transform {
  transition-property:transform;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
  transition-duration:.15s;
}
.duration-200 {
  transition-duration:.2s;
}
.duration-300 {
  transition-duration:.3s;
}
.duration-500 {
  transition-duration:.5s;
}
.ease-out {
  transition-timing-function:cubic-bezier(0,0,.2,1);
}
@keyframes hero-zoom {
  0% {
    transform:scale(1.08);
  }
  to {
    transform:scale(1);
  }
}
.last\:border-0:last-child {
  border-width:0;
}
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y:-0.125rem;
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-graphite:hover {
  --tw-border-opacity:1;
  border-color:rgb(58 48 42/var(--tw-border-opacity,1));
}
.hover\:bg-graphite:hover {
  --tw-bg-opacity:1;
  background-color:rgb(58 48 42/var(--tw-bg-opacity,1));
}
.hover\:bg-snow:hover {
  --tw-bg-opacity:1;
  background-color:rgb(250 248 243/var(--tw-bg-opacity,1));
}
.hover\:bg-white\/\[0\.12\]:hover {
  background-color:hsla(0,0%,100%,.12);
}
.hover\:text-graphite:hover {
  --tw-text-opacity:1;
  color:rgb(58 48 42/var(--tw-text-opacity,1));
}
.hover\:text-obsidian:hover {
  --tw-text-opacity:1;
  color:rgb(42 33 25/var(--tw-text-opacity,1));
}
.hover\:text-white:hover {
  --tw-text-opacity:1;
  color:rgb(255 255 255/var(--tw-text-opacity,1));
}
.hover\:shadow-\[0_10px_28px_rgba\(37\2c 211\2c 102\2c 0\.5\)\]:hover {
  --tw-shadow:0 10px 28px rgba(37,211,102,.5);
  --tw-shadow-colored:0 10px 28px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
.group:focus-within .group-focus-within\:visible {
  visibility:visible;
}
.group:focus-within .group-focus-within\:translate-y-0 {
  --tw-translate-y:0px;
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:focus-within .group-focus-within\:opacity-100 {
  opacity:1;
}
.group:hover .group-hover\:visible {
  visibility:visible;
}
.group:hover .group-hover\:translate-x-0 {
  --tw-translate-x:0px;
}
.group:hover .group-hover\:translate-x-0,
.group:hover .group-hover\:translate-y-0 {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:translate-y-0 {
  --tw-translate-y:0px;
}
.group:hover .group-hover\:scale-105 {
  --tw-scale-x:1.05;
  --tw-scale-y:1.05;
}
.group:hover .group-hover\:scale-105,
.group:hover .group-hover\:scale-\[1\.04\] {
  transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.04\] {
  --tw-scale-x:1.04;
  --tw-scale-y:1.04;
}
.group:hover .group-hover\:border-graphite {
  --tw-border-opacity:1;
  border-color:rgb(58 48 42/var(--tw-border-opacity,1));
}
.group:hover .group-hover\:bg-graphite {
  --tw-bg-opacity:1;
  background-color:rgb(58 48 42/var(--tw-bg-opacity,1));
}
.group:hover .group-hover\:text-graphite {
  --tw-text-opacity:1;
  color:rgb(58 48 42/var(--tw-text-opacity,1));
}
.group:hover .group-hover\:text-obsidian {
  --tw-text-opacity:1;
  color:rgb(42 33 25/var(--tw-text-opacity,1));
}
.group:hover .group-hover\:text-white {
  --tw-text-opacity:1;
  color:rgb(255 255 255/var(--tw-text-opacity,1));
}
.group:hover .group-hover\:underline {
  text-decoration-line:underline;
}
.group:hover .group-hover\:opacity-100 {
  opacity:1;
}
@media (min-width:640px) {
  .sm\:mx-0 {
    margin-left:0;
    margin-right:0;
  }
  .sm\:block {
    display:block;
  }
  .sm\:aspect-square {
    aspect-ratio:1/1;
  }
  .sm\:h-\[360px\] {
    height:360px;
  }
  .sm\:max-w-\[21rem\] {
    max-width:21rem;
  }
  .sm\:grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .sm\:grid-cols-\[12\.5rem_1fr\] {
    grid-template-columns:12.5rem 1fr;
  }
  .sm\:flex-row {
    flex-direction:row;
  }
  .sm\:items-center {
    align-items:center;
  }
  .sm\:justify-start {
    justify-content:flex-start;
  }
  .sm\:gap-6 {
    gap:1.5rem;
  }
  .sm\:rounded-sm {
    border-radius:.125rem;
  }
  .sm\:p-0 {
    padding:0;
  }
  .sm\:p-8 {
    padding:2rem;
  }
  .sm\:px-10 {
    padding-left:2.5rem;
    padding-right:2.5rem;
  }
  .sm\:text-left {
    text-align:left;
  }
  .sm\:text-\[1\.5rem\] {
    font-size:1.5rem;
  }
}
@media (min-width:768px) {
  .md\:col-span-1 {
    grid-column:span 1/span 1;
  }
  .md\:mx-0 {
    margin-left:0;
    margin-right:0;
  }
  .md\:mb-10 {
    margin-bottom:2.5rem;
  }
  .md\:mb-2 {
    margin-bottom:.5rem;
  }
  .md\:mb-3 {
    margin-bottom:.75rem;
  }
  .md\:mb-8 {
    margin-bottom:2rem;
  }
  .md\:block {
    display:block;
  }
  .md\:flex {
    display:flex;
  }
  .md\:inline-flex {
    display:inline-flex;
  }
  .md\:hidden {
    display:none;
  }
  .md\:h-\[440px\] {
    height:440px;
  }
  .md\:grid-cols-2 {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .md\:grid-cols-7 {
    grid-template-columns:repeat(7,minmax(0,1fr));
  }
  .md\:grid-cols-\[55\%_1fr\] {
    grid-template-columns:55% 1fr;
  }
  .md\:gap-6 {
    gap:1.5rem;
  }
  .md\:border-l {
    border-left-width:1px;
  }
  .md\:border-line {
    border-color:hsla(33,26%,73%,.35);
  }
  .md\:from-transparent {
    --tw-gradient-from:transparent var(--tw-gradient-from-position);
    --tw-gradient-to:transparent var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);
  }
  .md\:via-transparent {
    --tw-gradient-to:transparent var(--tw-gradient-to-position);
    --tw-gradient-stops:var(--tw-gradient-from),transparent var(--tw-gradient-via-position),var(--tw-gradient-to);
  }
  .md\:to-transparent {
    --tw-gradient-to:transparent var(--tw-gradient-to-position);
  }
  .md\:p-10 {
    padding:2.5rem;
  }
  .md\:p-14 {
    padding:3.5rem;
  }
  .md\:px-7 {
    padding-left:1.75rem;
    padding-right:1.75rem;
  }
  .md\:py-16 {
    padding-top:4rem;
    padding-bottom:4rem;
  }
  .md\:py-24 {
    padding-top:6rem;
    padding-bottom:6rem;
  }
  .md\:py-28 {
    padding-top:7rem;
    padding-bottom:7rem;
  }
  .md\:py-3\.5 {
    padding-top:.875rem;
    padding-bottom:.875rem;
  }
  .md\:py-32 {
    padding-top:8rem;
    padding-bottom:8rem;
  }
  .md\:pb-20 {
    padding-bottom:5rem;
  }
  .md\:pb-28 {
    padding-bottom:7rem;
  }
  .md\:pl-12 {
    padding-left:3rem;
  }
  .md\:pt-10 {
    padding-top:2.5rem;
  }
  .md\:pt-20 {
    padding-top:5rem;
  }
  .md\:pt-28 {
    padding-top:7rem;
  }
  .md\:text-\[0\.86rem\] {
    font-size:.86rem;
  }
  .md\:text-\[1\.3rem\] {
    font-size:1.3rem;
  }
  .md\:text-\[1\.5rem\] {
    font-size:1.5rem;
  }
  .md\:text-\[1\.6rem\] {
    font-size:1.6rem;
  }
  .md\:text-\[2\.25rem\] {
    font-size:2.25rem;
  }
  .md\:text-\[2\.75rem\] {
    font-size:2.75rem;
  }
  .md\:text-\[2rem\] {
    font-size:2rem;
  }
  .md\:text-\[3rem\] {
    font-size:3rem;
  }
  .md\:text-graphite {
    --tw-text-opacity:1;
    color:rgb(58 48 42/var(--tw-text-opacity,1));
  }
  .md\:text-graphite-dim {
    color:rgba(58,48,42,.62);
  }
  .md\:text-silver-dark {
    --tw-text-opacity:1;
    color:rgb(143 122 104/var(--tw-text-opacity,1));
  }
}
@media (min-width:1024px) {
  .lg\:h-\[480px\] {
    height:480px;
  }
  .lg\:max-w-\[23rem\] {
    max-width:23rem;
  }
  .lg\:grid-cols-4 {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .lg\:gap-16 {
    gap:4rem;
  }
  .lg\:px-12 {
    padding-left:3rem;
    padding-right:3rem;
  }
  .lg\:pl-16 {
    padding-left:4rem;
  }
  .lg\:text-\[0\.9rem\] {
    font-size:.9rem;
  }
  .lg\:text-\[1\.8rem\] {
    font-size:1.8rem;
  }
}
@media (min-width:1280px) {
  .xl\:h-\[500px\] {
    height:500px;
  }
}

/* ── CHRISTMAS EARLY BIRD (see PROMO in layout.js) ── */
/* Promo bar: green with gold, a shimmering tag, the discount, a countdown and a small "Klaim" button. */
.announce--promo {
  gap: 0.35rem 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-weight: 500;
  background: linear-gradient(90deg, #18301F 0%, #1F3B2D 50%, #18301F 100%);
  border-bottom: 1px solid rgba(201, 168, 106, 0.35);
}
.announce--promo:hover { background: linear-gradient(90deg, #132719 0%, #1A3426 50%, #132719 100%); }
.ab-tag {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem; border-radius: 99px; background: #C9A86A; color: #1F3B2D;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.ab-tag svg { width: 0.8rem; height: 0.8rem; flex-shrink: 0; }
/* a soft light sweeping across the gold tag every few seconds */
.ab-tag::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  animation: ab-shine 3.6s ease-in-out infinite;
}
@keyframes ab-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.ab-main { white-space: nowrap; color: #F4EEE3; }
.ab-main strong { font-weight: 700; color: #E2C68E; font-size: 0.9rem; }
.ab-dates { color: rgba(244, 238, 227, 0.7); }
.ab-count { white-space: nowrap; color: rgba(244, 238, 227, 0.7); font-size: 0.72rem; padding-left: 1rem; border-left: 1px solid rgba(201, 168, 106, 0.35); }
.ab-count b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.ab-cta {
  white-space: nowrap; padding: 0.22rem 0.75rem; border: 1px solid rgba(226, 198, 142, 0.7); border-radius: 2px;
  color: #E2C68E; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; transition: background-color 0.2s, color 0.2s;
}
.ab-cta span { display: inline-block; transition: transform 0.2s; }
.announce--promo:hover .ab-cta { background: #E2C68E; color: #1F3B2D; }
.announce--promo:hover .ab-cta span { transform: translateX(3px); }
/* phones: keep it to one line — tag, discount, and the arrow button */
@media (max-width: 767px) { .ab-count { display: none; } }
@media (max-width: 479px) {
  .announce--promo { flex-wrap: nowrap; gap: 0.6rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  .ab-dates { display: none; }
  .ab-tag { font-size: 0.58rem; letter-spacing: 0.1em; }
  .ab-cta { padding: 0.18rem 0.5rem; font-size: 0.64rem; }
}
@media (max-width: 359px) { .ab-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .ab-tag::after { animation: none; } }
:lang(zh) .ab-tag, :lang(zh) .ab-cta { letter-spacing: 0.04em; }
.promo-section { padding-top: 4rem; scroll-margin-top: 7rem; }
@media (min-width: 768px) { .promo-section { padding-top: 6rem; } }
.promo-section[hidden] { display: none; }
.promo {
  position: relative; overflow: hidden; max-width: 1280px; margin: 0 auto;
  display: grid; gap: 2.25rem; align-items: center;
  padding: 3.5rem 1.5rem 2.5rem; color: #F4EEE3;
  background:
    radial-gradient(70% 90% at 82% 45%, rgba(201, 168, 106, 0.2), transparent 62%),
    radial-gradient(60% 70% at 0% 100%, rgba(142, 42, 46, 0.18), transparent 60%),
    linear-gradient(160deg, #21402F 0%, #1A3426 55%, #142A1E 100%);
}
/* thin gold frame just inside the edge */
.promo::before { content: ""; position: absolute; inset: 0.6rem; border: 1px solid rgba(201, 168, 106, 0.45); pointer-events: none; z-index: 1; }
@media (min-width: 768px) { .promo { grid-template-columns: 1.15fr 0.85fr; gap: 3rem; padding: 4.75rem 3.5rem 4rem; } }
@media (min-width: 1200px) { .promo { padding: 5.25rem 5.5rem 4.5rem; } }

/* garland of warm lights along the top */
.promo-garland, .promo-bulbs { position: absolute; left: 0; right: 0; top: 0.6rem; width: 100%; height: 1.75rem; pointer-events: none; }
.promo-bulbs circle { fill: #F6DFA6; filter: drop-shadow(0 0 3px rgba(246, 223, 166, 0.9)); animation: promo-twinkle 2.4s ease-in-out infinite; animation-delay: var(--tw); }
@keyframes promo-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* falling snowflakes: each one drifts sideways and turns slowly as it falls */
/* behind the text, seal and buttons (they sit at z-index 2), and never catch clicks */
.promo-flakes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.promo-flakes i {
  position: absolute; top: -1.5rem; left: var(--x); width: var(--z); height: var(--z);
  color: rgba(255, 250, 240, var(--o)); opacity: 0;
  animation: promo-fall var(--d) linear infinite; animation-delay: var(--t);
}
.promo-flakes svg { display: block; width: 100%; height: 100%; }
@keyframes promo-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translate(var(--sw), 18rem) rotate(180deg); }
  90% { opacity: 1; }
  100% { transform: translate(0, 38rem) rotate(360deg); opacity: 0; }
}

.promo-copy { position: relative; z-index: 2; max-width: 34rem; }
.promo-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; font-family: var(--font-space-grotesk), sans-serif; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #E2C68E; }
.promo-dates { padding: 0.3rem 0.75rem; border: 1px solid rgba(201, 168, 106, 0.55); border-radius: 99px; letter-spacing: 0.1em; color: #F4EEE3; background: rgba(255, 255, 255, 0.04); }
.promo-title { margin-top: 1rem; font-family: var(--font-cormorant), Georgia, serif; font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.01em; color: #fff; font-variant-numeric: lining-nums; }
.promo-title em { font-style: italic; }
/* gold foil text with a slow shimmer */
.promo-title em, .promo-foil {
  background: linear-gradient(110deg, #B8914F 0%, #F3DFAE 30%, #C9A86A 50%, #F6E4B8 70%, #B8914F 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: promo-foil 6s ease-in-out infinite;
}
@keyframes promo-foil { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.promo-text { margin-top: 1rem; font-size: 0.98rem; line-height: 1.7; color: rgba(244, 238, 227, 0.8); max-width: 44ch; }
.promo-perks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.1rem; }
.promo-perks li { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-space-grotesk), sans-serif; font-size: 0.8rem; color: #F4EEE3; }
.promo-perks svg { width: 0.9rem; height: 0.9rem; color: #E2C68E; }
.promo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.promo :is(a).promo-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(110deg, #C9A86A, #E2C68E 50%, #C9A86A); color: #1A3426; border-color: #C9A86A; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); }
.promo :is(a).promo-btn:hover { background: #E8CF9A; border-color: #E8CF9A; color: #1A3426; }
.promo-wa-icon { width: 1.1rem; height: 1.1rem; }
.promo-link { font-family: var(--font-space-grotesk), sans-serif; font-size: 0.85rem; font-weight: 500; color: #F4EEE3; text-decoration: underline; text-decoration-color: rgba(201, 168, 106, 0.6); text-underline-offset: 4px; }
.promo-link:hover { color: #E2C68E; }
.promo-note { margin-top: 1.25rem; font-size: 0.74rem; line-height: 1.55; color: rgba(244, 238, 227, 0.55); }

/* right side: hanging baubles, the snow globe, and the countdown */
.promo-visual { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-top: 3.5rem; }
.promo-baubles { position: absolute; top: -4.5rem; left: 50%; transform: translateX(-50%); width: 15rem; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.promo-bauble { position: relative; display: block; width: var(--size); padding-top: var(--len); transform-origin: 50% 0; animation: promo-sway 5s ease-in-out infinite; animation-delay: var(--delay); }
.promo-bauble::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: calc(var(--len) + 0.2rem); background: linear-gradient(rgba(201, 168, 106, 0.2), rgba(201, 168, 106, 0.8)); }
.promo-bauble svg { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3)); }
/* soft light around each ornament, in its own colour, gently breathing (centred on the ball) */
.promo-bauble::after {
  content: ""; position: absolute; left: 50%; z-index: -1; pointer-events: none;
  width: calc(var(--size) * 3.6); height: calc(var(--size) * 3.6);
  bottom: calc(var(--size) * 0.525 - var(--size) * 1.8); transform: translateX(-50%);
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%); filter: blur(4px);
  animation: promo-glow 3.6s ease-in-out infinite; animation-delay: var(--delay);
}
@keyframes promo-glow { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
/* a faint warm pool of light behind all three ornaments */
.promo-baubles::before {
  content: ""; position: absolute; left: 50%; top: 2.5rem; width: 22rem; height: 11rem; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(246, 214, 150, 0.22), transparent 70%); pointer-events: none;
}
.promo-bauble:nth-child(2) { margin-top: 0.5rem; }
@keyframes promo-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
/* the snow globe (drawn in main.js) */
.promo-globe { position: relative; width: 17rem; max-width: 100%; margin-top: 1rem; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.4)); }
@media (min-width: 1024px) { .promo-globe { width: 19rem; } }
.promo-globe svg { display: block; width: 100%; height: auto; overflow: visible; }
/* warm halo of light around the glass */
.promo-globe::before { content: ""; position: absolute; left: 50%; top: 42%; width: 120%; height: 95%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(246, 214, 150, 0.18), transparent 62%); pointer-events: none; z-index: -1; }
.g-plaque-top { font-family: var(--font-space-grotesk), sans-serif; font-size: 6.5px; font-weight: 500; letter-spacing: 3px; fill: #E2C68E; }
.g-plaque-num { font-family: var(--font-inter), sans-serif; font-size: 15.5px; font-weight: 600; letter-spacing: -0.4px; font-variant-numeric: lining-nums tabular-nums; }
/* sleigh crosses the sky past the moon, gently bobbing */
.g-sleigh { animation: g-fly 16s linear infinite; }
@keyframes g-fly {
  0% { transform: translate(-110px, 112px); }
  25% { transform: translate(20px, 92px); }
  50% { transform: translate(150px, 100px); }
  75% { transform: translate(260px, 84px); }
  100% { transform: translate(380px, 92px); }
}
/* chimney smoke: three puffs rising, growing and fading */
.g-smoke circle { transform-box: fill-box; transform-origin: center; opacity: 0; animation: g-smoke 6s ease-out infinite; }
.g-smoke circle:nth-child(2) { animation-delay: 1.5s; }
.g-smoke circle:nth-child(3) { animation-delay: 3s; }
.g-smoke circle:nth-child(4) { animation-delay: 4.5s; }
@keyframes g-smoke {
  0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
  15% { opacity: 0.45; }
  60% { opacity: 0.25; }
  100% { transform: translate(-18px, -64px) scale(2.8); opacity: 0; }
}
/* snow falling inside the glass */
.g-snow circle { opacity: 0.85; animation: g-snow var(--d) linear infinite; animation-delay: var(--t); }
@keyframes g-snow { 0% { transform: translate(0, 20px); } 50% { transform: translate(var(--sw), 140px); } 100% { transform: translate(0, 270px); } }
.g-stars circle { animation: promo-twinkle 3s ease-in-out infinite; }
.g-stars circle:nth-child(odd) { animation-delay: 1.2s; }
.promo-count { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.promo-count-label { font-family: var(--font-space-grotesk), sans-serif; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 238, 227, 0.65); }
.promo-tiles { display: flex; gap: 0.5rem; }
.promo-tile {
  display: flex; flex-direction: column; align-items: center; min-width: 3.4rem; padding: 0.55rem 0.4rem 0.45rem;
  border: 1px solid rgba(201, 168, 106, 0.4); background: #22402F; border-radius: 2px;
}
.promo-tile b { font-family: var(--font-inter), sans-serif; font-weight: 600; font-size: 1.4rem; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.promo-tile small { margin-top: 0.15rem; font-family: var(--font-space-grotesk), sans-serif; font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: #E2C68E; }
:lang(zh) .promo-eyebrow, :lang(zh) .promo-count-label, :lang(zh) .promo-tile small { letter-spacing: 0.06em; }

/* phones: visual first (baubles + snow globe + countdown), then the text */
@media (max-width: 767px) {
  .promo-visual { order: -1; padding-top: 2.75rem; gap: 1.1rem; }
  .promo-baubles { top: -3.25rem; width: 12rem; }
  .promo-globe { width: 15rem; margin-top: 0.5rem; }
  .promo-tile { min-width: 3rem; }
  .promo-tile b { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-bulbs circle, .promo-bauble, .promo-bauble::after, .promo-title em, .promo-foil, .g-sleigh, .g-smoke circle, .g-snow circle, .g-stars circle { animation: none; }
  .promo-flakes, .g-snow { display: none; }
  .g-sleigh { transform: translate(120px, 92px); }
  .g-smoke circle { opacity: 0.5; }
}

/* ── SALE (see SALE in products.js) ──
   Kept quiet and refined: the sale price stays near-black, the normal price is a soft grey
   strike-through, and the "Sale −45%" mark is a fine pill like the "Terlaris" badge. */
.price-was { font-family: var(--font-inter), sans-serif; font-weight: 400; color: #A3A3A3; text-decoration-thickness: 1px; text-decoration-color: rgba(163, 163, 163, 0.9); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.price-stack { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.price-stack .price-was { font-size: 0.74rem; margin-top: 0.15rem; }
.sale-badge {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.32rem 0.7rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(113, 59, 67, 0.22);
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #8F7A68; line-height: 1;
  backdrop-filter: blur(4px);
}
.sale-badge b { font-family: var(--font-inter), sans-serif; font-weight: 600; font-size: 0.68rem; letter-spacing: 0; color: #713B43; }
.pd-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem; margin-top: 1.25rem; }
.pd-price-row .pd-price { margin-top: 0; }
.pd-was { font-size: 1.05rem; }
.sale-pill {
  align-self: center; padding: 0.38rem 0.75rem; border-radius: 999px;
  background: #F6EEEC; border: 1px solid rgba(113, 59, 67, 0.2); color: #713B43;
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
}
.cart-price .price-was { font-size: 0.74rem; margin-left: 0.4rem; }
.cart-saving { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.4rem; margin-top: 0.35rem; font-size: 0.74rem; color: #8F7A68; }
.cart-saving strong { font-weight: 600; color: #713B43; }
.cart-saving s { color: #A3A3A3; }
:lang(zh) .sale-badge, :lang(zh) .sale-pill { letter-spacing: 0.06em; }
/* small phones: two narrow cards per row, so the price and "+" button get a little smaller to fit side by side */
.product-card-foot { align-items: flex-end; }
@media (max-width: 479px) {
  .product-card-body { padding-left: 0.85rem; padding-right: 0.85rem; }
  .product-card-price { font-size: 0.88rem; }
  .price-stack .price-was { font-size: 0.68rem; }
  .card-add { width: 1.85rem; height: 1.85rem; }
  .card-add svg { width: 0.9rem; height: 0.9rem; }
  .sale-badge { top: 0.5rem; right: 0.5rem; padding: 0.28rem 0.55rem; letter-spacing: 0.12em; }
}
/* the free engraving bar under the Early Bird bar: a touch slimmer so the two read as one strip */
.announce--promo + .announce { padding-top: 0.4rem; padding-bottom: 0.4rem; font-size: 0.74rem; }
/* home hero: while both bars show, the header is taller, so nudge the hero text down to clear it */
.promo-on .hero-copy { padding-top: 3.5rem; }
.promo-nb { white-space: nowrap; }
/* header WhatsApp button: same green as every other WhatsApp button (it keeps the dark button's size) */
a.header-wa.btn-dark { background: #2B6448; }
a.header-wa.btn-dark:hover { background: #22533B; }

/* ── REFERRAL CODE (cart; codes in products.js) ── */
.ref { margin-bottom: 0.85rem; }
.ref-box summary { cursor: pointer; list-style: none; display: inline-block; font-family: var(--font-space-grotesk), sans-serif; font-size: 0.74rem; color: #713B43; text-decoration: underline; text-decoration-color: rgba(113, 59, 67, 0.4); text-underline-offset: 3px; }
.ref-box summary::-webkit-details-marker { display: none; }
.ref-form { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.ref-form input {
  flex: 1; min-width: 0; height: 2.4rem; padding: 0 0.75rem; border: 1px solid rgba(203, 187, 167, 0.8); border-radius: 2px; background: #fff;
  font-family: var(--font-inter), sans-serif; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: #111;
}
.ref-form input::placeholder { text-transform: none; letter-spacing: 0; color: #A3A3A3; }
.ref-form input:focus { outline: none; border-color: #3A302A; }
.ref-form button { height: 2.4rem; padding: 0 1rem; border-radius: 2px; background: #3A302A; color: #fff; font-family: var(--font-space-grotesk), sans-serif; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; }
.ref-form button:hover { background: #2A2119; }
.ref-error { margin-top: 0.4rem; font-size: 0.74rem; color: #A23B3B; }
.ref-applied {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.75rem;
  border: 1px dashed rgba(113, 59, 67, 0.4); background: #F6EEEC; border-radius: 2px; font-size: 0.78rem; color: #3A302A;
}
.ref-applied b { font-weight: 600; letter-spacing: 0.06em; color: #713B43; }
.ref-applied button { font-family: var(--font-space-grotesk), sans-serif; font-size: 0.7rem; color: #8F7A68; text-decoration: underline; text-underline-offset: 3px; }
.cart-line { display: flex; justify-content: space-between; font-size: 0.8rem; color: rgba(58, 48, 42, 0.75); margin-bottom: 0.3rem; font-variant-numeric: tabular-nums; }
.cart-line--ref { color: #713B43; font-weight: 500; }
/* the catalog PDF in the other two languages, under the main download link */
.pdf-alt { display: block; margin-top: 0.45rem; font-size: 0.74rem; color: #A8968A; }
.pdf-alt a { color: #8F7A68; text-decoration: underline; text-decoration-color: rgba(143, 122, 104, 0.4); text-underline-offset: 3px; }
.pdf-alt a:hover { color: #713B43; }


/* ── MUSIC PLAYER (see music.js) ── a mini turntable, starts top right; visitors can drag it anywhere */
.vinyl { position: fixed; top: 7rem; right: 1.5rem; z-index: 60; width: 5.5rem; }
.vinyl[style*="left"] { right: auto; }
@media (max-width: 767px) { .vinyl { width: 4.5rem; } }
.vinyl-deck {
  position: relative; display: block; width: 100%; aspect-ratio: 1; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  border-radius: 14px; background: linear-gradient(145deg, #3A2A20, #1E1611);
  box-shadow: 0 14px 32px rgba(20, 14, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(201, 168, 106, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vinyl-deck:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(20, 14, 10, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(201, 168, 106, 0.4); }
.vinyl-deck:focus-visible { outline: 2px solid #C9A86A; outline-offset: 3px; }
.vinyl.is-dragging .vinyl-deck { cursor: grabbing; transform: scale(1.06); box-shadow: 0 24px 48px rgba(20, 14, 10, 0.45), inset 0 0 0 1px rgba(201, 168, 106, 0.5); }
/* the record: fine grooves, spins at about 33 rpm while playing */
.vinyl-record {
  position: absolute; left: 7%; top: 8%; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #121212 0 1.2px, #1d1d1d 1.2px 2.4px),
    #151515;
  box-shadow: 0 0 0 2px #2b2b2b, 0 4px 10px rgba(0, 0, 0, 0.5);
  animation: vinyl-spin 1.8s linear infinite; animation-play-state: paused;
}
.vinyl.is-playing .vinyl-record { animation-play-state: running; }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
.vinyl-label {
  position: absolute; inset: 31%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, #2C5643, #173022 75%); box-shadow: inset 0 0 0 1.5px #C9A86A;
}
.vinyl-label b { font-family: var(--font-cormorant), Georgia, serif; font-weight: 600; font-size: 0.62rem; color: #E2C68E; letter-spacing: 0.02em; }
@media (max-width: 767px) { .vinyl-label b { font-size: 0.5rem; } }
/* light reflection that stays still while the record turns */
.vinyl-sheen { position: absolute; left: 7%; top: 8%; width: 80%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 30deg, transparent 0 10%, rgba(255, 255, 255, 0.13) 15%, transparent 22% 55%, rgba(255, 255, 255, 0.09) 60%, transparent 67%); }
/* tonearm: rests off the record, swings onto it while playing */
.vinyl-arm { position: absolute; right: 2%; top: 3%; width: 34%; height: auto; transform-origin: 75% 15.6%; transform: rotate(-17deg); transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.5, 1); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)); pointer-events: none; }
.vinyl.is-playing .vinyl-arm { transform: rotate(0deg); }
.vinyl-led { position: absolute; left: 8%; bottom: 7%; width: 5px; height: 5px; border-radius: 50%; background: #5a4a3e; }
.vinyl.is-playing .vinyl-led { background: #4ADE80; box-shadow: 0 0 6px #4ADE80; }
/* "♪ PLAY MUSIC" above the turntable while the music isn't playing (a play button too); it fades away once music starts */
.vinyl-cta {
  --cx: -50%; position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(var(--cx)); white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.36rem 0.85rem 0.4rem 0.7rem; border-radius: 99px;
  background: linear-gradient(145deg, #2A5743, #1F3B2D); color: #F7EFDF; border: 1px solid rgba(226, 198, 142, 0.6);
  font-family: var(--font-cormorant), Georgia, serif; font-style: italic; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 8px 18px rgba(20, 14, 10, 0.28); transition: opacity 0.35s ease, visibility 0.35s, transform 0.35s ease;
  animation: vinyl-cta 2.6s ease-in-out infinite;
}
.vinyl-cta::after { content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; margin: -4px 0 0 -4px; transform: rotate(45deg);
  background: #1F3B2D; border-right: 1px solid rgba(226, 198, 142, 0.55); border-bottom: 1px solid rgba(226, 198, 142, 0.55); }
/* three little gold sound bars, gently moving */
.vinyl-cta-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.7rem; }
.vinyl-cta-eq i { width: 2px; height: 100%; border-radius: 1px; background: linear-gradient(#F3DFA6, #C9A86A); transform-origin: bottom; animation: vinyl-eq 1.1s ease-in-out infinite; }
.vinyl-cta-eq i:nth-child(2) { animation-delay: -0.35s; } .vinyl-cta-eq i:nth-child(3) { animation-delay: -0.7s; }
@keyframes vinyl-eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.vinyl-cta:hover { background: linear-gradient(145deg, #316650, #24463A); }
.vinyl-cta:focus-visible { outline: 2px solid #C9A86A; outline-offset: 3px; }
.vinyl.is-playing .vinyl-cta { opacity: 0; visibility: hidden; transform: translate(var(--cx), 4px); animation: none; }
.vinyl.is-dragging .vinyl-cta { animation: none; }
@keyframes vinyl-cta { 0%, 100% { transform: translate(var(--cx), 0); } 50% { transform: translate(var(--cx), -3px); } }
:lang(zh) .vinyl-cta { font-family: var(--font-space-grotesk), sans-serif; font-style: normal; font-size: 0.72rem; letter-spacing: 0.06em; }
@media (max-width: 767px) { .vinyl-cta { font-size: 0.9rem; padding: 0.32rem 0.7rem 0.36rem 0.58rem; } }
@media (prefers-reduced-motion: reduce) { .vinyl-cta, .vinyl-cta-eq i { animation: none; } }

/* the slim audio bar under the turntable: progress line + previous / play-pause / next */
.vinyl-bar {
  position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 6px; height: 2rem; padding: 0 0.3rem;
  border-radius: 10px; background: linear-gradient(145deg, #3A2A20, #1E1611); color: #E2C68E;
  box-shadow: 0 10px 22px rgba(20, 14, 10, 0.3), inset 0 0 0 1px rgba(201, 168, 106, 0.25);
}
.vinyl-bar button { width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: inherit; transition: background-color 0.2s, color 0.2s; }
.vinyl-bar button:hover { background: rgba(226, 198, 142, 0.14); color: #F3E1B0; }
.vinyl-bar button svg { width: 0.85rem; height: 0.85rem; }
.vinyl-bar .vinyl-play { width: 1.75rem; height: 1.75rem; background: #C9A86A; color: #1E1611; }
.vinyl-bar .vinyl-play:hover { background: #E2C68E; color: #1E1611; }
.vinyl-bar .vinyl-play svg { width: 0.8rem; height: 0.8rem; }
/* progress: a thin line along the top edge of the bar (tap or drag to jump) */
.vinyl-progress { position: absolute; left: 0.6rem; right: 0.6rem; top: 0; height: 9px; transform: translateY(-50%); cursor: pointer; touch-action: none; }
.vinyl-progress::before, .vinyl-progress i { content: ""; position: absolute; left: 0; top: 3px; height: 3px; border-radius: 2px; }
.vinyl-progress::before { right: 0; background: rgba(226, 198, 142, 0.25); }
.vinyl-progress i { width: 0; background: #E2C68E; box-shadow: 0 0 6px rgba(226, 198, 142, 0.6); }
.vinyl-progress:focus-visible { outline: 1px solid #C9A86A; outline-offset: 2px; }
@media (max-width: 767px) { .vinyl-bar { height: 1.8rem; padding: 0 0.15rem; } .vinyl-bar button { width: 1.4rem; height: 1.4rem; } .vinyl-bar .vinyl-play { width: 1.55rem; height: 1.55rem; } }

/* ── SNOW + FROST (see snow.js) ── inside the home page hero only; behind the hero text, never catch clicks */
.snow { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
/* frost: the icy frame around the hero, drawn by snow.js; see-through so the photo shows */
.frost { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0.85; }

/* ── CHRISTMAS (see christmas.js; everything here only applies until 1 Jan 2027, when the .xmas class stops being added) ── */
/* twinkling lights hanging under the header */
.xmas header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; pointer-events: none; z-index: 1;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='22'><path d='M0 2 Q40 14 80 2 T160 2' fill='none' stroke='%233A4A3F' stroke-width='1.2'/><g><rect x='18' y='6.5' width='4' height='3' fill='%23555'/><ellipse cx='20' cy='13' rx='3.6' ry='5' fill='%23E0443F'/><rect x='58' y='6.5' width='4' height='3' fill='%23555'/><ellipse cx='60' cy='13' rx='3.6' ry='5' fill='%23E9C46A'/><rect x='98' y='6.5' width='4' height='3' fill='%23555'/><ellipse cx='100' cy='13' rx='3.6' ry='5' fill='%232FA36B'/><rect x='138' y='6.5' width='4' height='3' fill='%23555'/><ellipse cx='140' cy='13' rx='3.6' ry='5' fill='%23F4F8FB'/></g></svg>") repeat-x 0 0 / 160px 22px;
  filter: drop-shadow(0 0 3px rgba(255, 220, 140, 0.7));
  animation: xmas-twinkle 1.6s steps(1) infinite;
}
@keyframes xmas-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
/* on the home page the header is see-through over the hero (which has its own icy frame), so the lights
   only appear once the header turns solid on scrolling */
.xmas.header-clear header::after { visibility: hidden; }
/* a little Santa hat sitting on top of the round logo (the logo image is 32px, 26px on phones) */
.xmas .logo { position: relative; }
.xmas .logo::before {
  /* sized to the drawn circle (it fills the middle 80% of the logo image); the brim rests over the top of the circle */
  content: ""; position: absolute; left: 3px; top: -10.5px; width: 26px; height: 21px; transform: rotate(-12deg); transform-origin: 50% 78%;
  pointer-events: none; z-index: 1; filter: drop-shadow(0 1px 1px rgba(60, 40, 30, 0.18));
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'><path d='M6 24 C8 12 16 4 26 5 C33 6 36 11 37 17 L33 18 C31 13 28 11 25 12 C30 16 33 20 34 24 Z' fill='%23C93A3A'/><path d='M14 23 C15 15 19 9 25 8 C21 12 19 17 19 23 Z' fill='%23A82C2F' opacity='0.55'/><rect x='4' y='21' width='32' height='8' rx='4' fill='%23FFFDF8' stroke='%23D6CBBD' stroke-width='1'/><circle cx='36' cy='19' r='4' fill='%23FFFDF8' stroke='%23D6CBBD' stroke-width='1'/></svg>") no-repeat center / contain;
}
@media (max-width: 767px) { .xmas .logo::before { left: 2.5px; top: -6.5px; width: 21px; height: 17px; } }
@media (max-width: 350px) { .xmas .logo::before { display: none; } }
/* Santa's sleigh: moved by christmas.js as the visitor scrolls. It flies in front of the page but
   behind the product cards and photos (they sit one layer above it), and under the header and buttons. */
.xmas .product-card, .xmas .pd-photo { position: relative; z-index: 21; }
/* ...and behind every banner and photo panel: the hero, the Early Bird banner, photo cards and panels,
   the engraving panel and video, and the coloured call-to-action bands */
.xmas :is(.promo, .packaging-banner, .engrave-feature, .soft-card, .pkg-card, .about-photo, .ce-video,
  .overflow-hidden:not(.absolute):not(.fixed):not(.hero), section.bg-rose-wash, section.bg-graphite) { position: relative; z-index: 21; }
/* on the home page hero the sleigh flies over the photo, snow and icy frame, but behind the headline and buttons */
.xmas .hero > .relative.z-10 { z-index: 22; }
.xmas-sleigh { position: fixed; left: 0; top: 0; width: 19rem; z-index: 20; pointer-events: none; will-change: transform; filter: drop-shadow(0 6px 10px rgba(30, 20, 15, 0.25)); }
.xmas-sleigh svg { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .xmas-sleigh { width: 11rem; } }
/* galloping reindeer, each bobbing on its own rhythm; the sleigh body bobs a little behind them */
.xs-deer { animation: xs-bob 0.9s ease-in-out infinite alternate; }
@keyframes xs-bob { from { transform: translateY(-1.8px); } to { transform: translateY(1.8px); } }
.xs-legs { stroke: #5E3E26; stroke-width: 2.6px; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 0; animation: xs-gallop 0.45s ease-in-out infinite alternate; }
@keyframes xs-gallop { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.xs-body { animation: xs-bob 1.3s ease-in-out infinite alternate; animation-delay: -0.4s; }
/* Santa hops out of the parked sleigh and appears in the village (and climbs back in before take-off) */
.xs-santa { transition: opacity 0.35s ease; }
.xmas-sleigh.santa-out .xs-santa { opacity: 0; }
.vs-santa { opacity: 0; transition: opacity 0.45s ease 0.15s; }
.xmas-scene.santa-here .vs-santa { opacity: 1; }
/* parked in the village: the reindeer stand still */
.xmas-sleigh.is-landed .xs-deer, .xmas-sleigh.is-landed .xs-legs, .xmas-sleigh.is-landed .xs-body { animation: none; }
/* the layer the sparkles and falling presents live in: sealed off (contain: strict), so adding and removing them
   never makes the browser re-lay out the page */
.xs-fx { position: fixed; inset: 0; z-index: 20; pointer-events: none; contain: strict; }
/* sparkle trail: dots that drift down and fade out */
.xs-spark { position: fixed; z-index: 20; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 6px 1px rgba(243, 225, 176, 0.9); transform: scale(var(--s)); animation: xs-spark 1.25s ease-out forwards; }
@keyframes xs-spark { from { opacity: 1; transform: translate(0, 0) scale(var(--s)); } to { opacity: 0; transform: translate(var(--dx), 26px) scale(0.2); } }
/* Christmas village at dusk above the footer (drawn in christmas.js); its sky fades into the footer's colour */
.xmas-scene { position: relative; z-index: 1; height: 240px; margin-top: 2.5rem; pointer-events: none; }
.xmas-village { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 767px) { .xmas-scene { height: 200px; } }
.xmas-wave { transform-box: view-box; animation: xmas-wave 1.8s ease-in-out infinite; }
@keyframes xmas-wave { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-16deg); } }
.vs-twinkle { animation: vs-twinkle 3s ease-in-out infinite; }
@keyframes vs-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.vs-light { animation: vs-light 1.8s ease-in-out infinite; }
@keyframes vs-light { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.vs-star-glow { transform-box: fill-box; transform-origin: center; animation: vs-star 2.6s ease-in-out infinite; }
@keyframes vs-star { 0%, 100% { opacity: 0.7; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } }
.vs-window { animation: vs-window 4s ease-in-out infinite; }
@keyframes vs-window { 0%, 100% { opacity: 1; } 45% { opacity: 0.82; } 55% { opacity: 0.95; } }
.vs-smoke circle { transform-box: fill-box; transform-origin: center; opacity: 0; animation: vs-smoke 5s ease-out infinite; }
.vs-smoke circle:nth-child(2) { animation-delay: 1.7s; } .vs-smoke circle:nth-child(3) { animation-delay: 3.4s; }
@keyframes vs-smoke { 0% { transform: translate(0, 0) scale(0.5); opacity: 0; } 15% { opacity: 0.55; } 100% { transform: translate(-12px, -40px) scale(2.4); opacity: 0; } }
.vs-snow { position: absolute; left: 0; right: 0; top: 0; height: var(--snow-h, 100%); overflow: hidden; }
.vs-snow i { position: absolute; top: -6px; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: 0.85; box-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
  transform: scale(var(--s)); animation: vs-fall linear infinite; }
@keyframes vs-fall { from { transform: translate(0, 0) scale(var(--s)); } to { transform: translate(14px, calc(var(--snow-h, 240px) + 10px)) scale(var(--s)); } }
@media (prefers-reduced-motion: reduce) { .xmas header::after, .xmas-wave, .xs-deer, .xs-legs, .xs-body { animation: none; } }
/* Christmas lights down both sides of the screen (wider screens only, where the page has room at the edges) */
.xmas-lights { display: none; }
@media (min-width: 1024px) {
  .xmas-lights { display: block; position: fixed; inset: 0; z-index: 45; pointer-events: none; }
  .xmas-lights span { position: absolute; top: 0; bottom: 0; width: 26px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='160'><path d='M3 0 Q20 40 3 80 T3 160' fill='none' stroke='%233A4A3F' stroke-width='1.2'/><g><rect x='9' y='18' width='3' height='4' fill='%23555' transform='rotate(-60 10 20)'/><ellipse cx='16' cy='24' rx='3.4' ry='4.8' transform='rotate(-60 16 24)' fill='%23E0443F'/><rect x='12' y='58' width='3' height='4' fill='%23555' transform='rotate(-80 13 60)'/><ellipse cx='19' cy='62' rx='3.4' ry='4.8' transform='rotate(-80 19 62)' fill='%23E9C46A'/><rect x='9' y='98' width='3' height='4' fill='%23555' transform='rotate(-110 10 100)'/><ellipse cx='15' cy='103' rx='3.4' ry='4.8' transform='rotate(-110 15 103)' fill='%232FA36B'/><rect x='5' y='138' width='3' height='4' fill='%23555' transform='rotate(-70 6 140)'/><ellipse cx='12' cy='143' rx='3.4' ry='4.8' transform='rotate(-70 12 143)' fill='%23F4F8FB'/></g></svg>") repeat-y 0 0 / 26px 160px;
    filter: drop-shadow(0 0 4px rgba(255, 215, 130, 0.75)); animation: xmas-twinkle 1.6s steps(1) infinite; }
  .xmas-lights-l { left: 0; }
  .xmas-lights-r { right: 0; transform: scaleX(-1); animation-delay: 0.8s !important; }
}
@media (prefers-reduced-motion: reduce) { .xmas-lights span, .vs-twinkle, .vs-light, .vs-star-glow, .vs-window, .vs-smoke circle, .xmas-wave { animation: none; } .vs-snow { display: none; } }


/* ── CUSTOM ENGRAVING VIDEO (home feature panel + /custom-engraving/ page; playback in main.js) ── */
.engrave-photo--video { aspect-ratio: 16 / 9; background: #E9E1D6; }
@media (min-width: 768px) {
  /* the widescreen video gets the bigger column */
  .engrave-feature:has(.engrave-photo--video) { grid-template-columns: 7fr 5fr; }
  .engrave-photo--video { aspect-ratio: auto; min-height: 24rem; }
}
.engrave-video, .ce-video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
.ce-video { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #E9E1D6;
  border: 1px solid rgba(203, 187, 167, 0.55); box-shadow: 0 18px 44px rgba(24, 28, 32, 0.1); }
@media (min-width: 1024px) { .ce-video { aspect-ratio: 16 / 11; } }
.ce-video-tag { position: absolute; top: 1rem; left: 1rem; z-index: 1; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0.75rem; border-radius: 99px; background: rgba(255, 255, 255, 0.9); color: #3A302A;
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.ce-video-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #C93A3A; animation: ce-live 1.6s ease-in-out infinite; }
@keyframes ce-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
/* small pause / play button on the video */
.video-toggle { position: absolute; right: 0.85rem; bottom: 0.85rem; z-index: 2; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(30, 22, 17, 0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color 0.2s; }
.video-toggle:hover { background: rgba(30, 22, 17, 0.8); }
.video-toggle svg { width: 0.95rem; height: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .ce-video-tag::before { animation: none; } }
:lang(zh) .ce-video-tag { letter-spacing: 0.06em; }

/* ── CUSTOM ENGRAVING PAGE layout ── */
/* hero: headline, then (phones) the video, then the text and buttons; desktop: text left, bigger widescreen video right */
.ce-hero { display: grid; grid-template-areas: "top" "video" "bottom"; gap: 1.5rem; }
.ce-hero-top { grid-area: top; }
.ce-hero-bottom { grid-area: bottom; }
.ce-hero-bottom p { margin-bottom: 1.75rem; }
.ce-hero .ce-video { grid-area: video; aspect-ratio: 16 / 9; }
@media (min-width: 768px) {
  .ce-hero { grid-template-columns: 5fr 7fr; grid-template-areas: "top video" "bottom video"; column-gap: 3rem; row-gap: 1.25rem; align-items: end; }
  .ce-hero-bottom { align-self: start; }
  .ce-hero .ce-video { align-self: center; }
}
@media (min-width: 1024px) { .ce-hero { column-gap: 4rem; } }
/* the four steps: a compact 2 × 2 grid on phones */
@media (max-width: 767px) {
  .ce-steps { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; row-gap: 1.75rem; }
  .ce-steps .numbered-item { padding: 1rem 0 0; border-top: 1px solid rgba(203, 187, 167, 0.5); border-bottom: 0; }
  .ce-steps .numbered-num { font-size: 1.6rem; margin-bottom: 0.4rem; }
  .ce-steps .numbered-title { font-size: 1.02rem; }
  .ce-steps .numbered-text { font-size: 0.8rem; line-height: 1.55; }
}
/* the song's title under the audio bar (long titles scroll gently back and forth) */
.vinyl-title { margin-top: 5px; padding: 0.22rem 0.55rem; border-radius: 99px; overflow: hidden; white-space: nowrap; text-align: center;
  background: linear-gradient(145deg, #3A2A20, #1E1611); box-shadow: 0 6px 14px rgba(20, 14, 10, 0.25), inset 0 0 0 1px rgba(201, 168, 106, 0.25);
  font-family: var(--font-space-grotesk), sans-serif; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.02em; color: #E2C68E; }
.vinyl-title span { display: inline-block; }
.vinyl-title.is-long { text-align: left; }
.vinyl-title.is-long span { animation: vinyl-title 7s ease-in-out infinite alternate; }
@keyframes vinyl-title { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(var(--scroll)); } }
@media (max-width: 767px) { .vinyl-title { font-size: 0.6rem; padding: 0.2rem 0.45rem; } }
@media (prefers-reduced-motion: reduce) { .vinyl-title.is-long span { animation: none; } .vinyl-title.is-long { text-overflow: ellipsis; } }

/* ── CHRISTMAS DRESSING ON THE PRODUCT CARDS (drawings in /images/xmas/; christmas.js gives each card a style, data-xc 0–3) ──
   A fine double gold frame inside the photo, plus one accent per card: a gold-trimmed fabric ribbon (red with gold trees,
   holly green, or red with a gold lattice) wrapped diagonally across a top corner of the photo with a 3D bow tied on it,
   or red-and-gold filigree ornaments hanging from the frame's top line. Everything stays inside the photo, so the
   ribbon's ends meet the photo's edges as if it wraps round them. */
.xmas .product-card[data-xc] { --fi: 11px; }   /* where the gold frame sits from the card's outer edge */
.xmas .product-card[data-xc] .product-card-img::before {
  content: ""; position: absolute; inset: calc(var(--fi) - 1px); z-index: 2; pointer-events: none;
  border: 1px solid rgba(201, 163, 94, 0.7);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35), inset 0 0 0 4px rgba(201, 163, 94, 0.32);
}
.xmas .product-card[data-xc] .product-card-img::after {
  content: ""; position: absolute; top: 0; z-index: 3; pointer-events: none;
  width: 46%; max-width: 170px; aspect-ratio: 1;
  background: var(--deco) center / contain no-repeat;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.xmas .product-card[data-xc="0"] .product-card-img::after { right: 0; transform-origin: top right; --deco: url(/images/xmas/bow-red-print.png?v=1); }
.xmas .product-card[data-xc="2"] .product-card-img::after { right: 0; transform-origin: top right; --deco: url(/images/xmas/bow-red-lattice.png?v=1); }
.xmas .product-card[data-xc="3"] .product-card-img::after { left: 0; transform-origin: top left; --deco: url(/images/xmas/bow-green-holly-left.png?v=1); }
.xmas .product-card[data-xc]:not([data-xc="1"]):hover .product-card-img::after { transform: scale(1.05); }
/* the ornaments hang from the frame's top line */
.xmas .product-card[data-xc="1"] .product-card-img::after {
  left: calc(var(--fi) - 1px); top: calc(var(--fi) - 1px); width: 160px; max-width: 48%; aspect-ratio: 170 / 160;
  background: var(--deco) left top / contain no-repeat; --deco: url(/images/xmas/ornaments-0.png?v=1);
  transform-origin: top; animation: orn-sway 5s ease-in-out infinite;   /* hung from the top, so a slant swings them */
}
@keyframes orn-sway { 0%, 100% { transform: skewX(-2deg); } 50% { transform: skewX(2deg); } }
@media (prefers-reduced-motion: reduce) { .xmas .product-card[data-xc="1"] .product-card-img::after { animation: none; } }
/* four colour sets for the ornaments (data-xo, from christmas.js): red & gold, emerald, ivory & wine, wine & silver */
.xmas .product-card[data-xc="1"][data-xo="1"] .product-card-img::after { --deco: url(/images/xmas/ornaments-1.png?v=1); }
.xmas .product-card[data-xc="1"][data-xo="2"] .product-card-img::after { --deco: url(/images/xmas/ornaments-2.png?v=1); }
.xmas .product-card[data-xc="1"][data-xo="3"] .product-card-img::after { --deco: url(/images/xmas/ornaments-3.png?v=1); }
/* Christmas berries with mint leaves trailing along the gold frame: on the free top corner (the one without a bow or
   ornaments), and on the bottom-left corner unless a "Terlaris" badge sits there. Each drawing has the frame's corner
   at 1/12 of its size, so it is placed that far back from the frame. */
.xmas-sprigs { display: none; }
.xmas .product-card[data-xc] .xmas-sprigs {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; --sp: 108px;
  --o: calc(var(--fi) - 1px - var(--sp) / 12);
  background: var(--top) no-repeat, var(--bl, none) no-repeat;
  background-size: var(--sp) var(--sp), var(--sp) var(--sp);
}
.xmas .product-card[data-xc="0"] .xmas-sprigs, .xmas .product-card[data-xc="2"] .xmas-sprigs {
  --top: url(/images/xmas/sprig-tl.png?v=1) left var(--o) top var(--o); }
.xmas .product-card[data-xc="1"] .xmas-sprigs, .xmas .product-card[data-xc="3"] .xmas-sprigs {
  --top: url(/images/xmas/sprig-tr.png?v=1) right var(--o) top var(--o); }
.xmas .product-card[data-xc] .product-card-img:not(:has(.product-card-badge)) .xmas-sprigs {
  --bl: url(/images/xmas/sprig-bl.png?v=1) left var(--o) bottom var(--o); }

/* the badges sit in the bottom corners of the photo, inside the gold frame */
.xmas .product-card[data-xc] .product-card-badge, .xmas .product-card[data-xc] .sale-badge { z-index: 4; top: auto; bottom: 1.15rem; }
.xmas .product-card[data-xc] .product-card-badge { left: 1.15rem; }
.xmas .product-card[data-xc] .sale-badge { right: 1.15rem; }
/* phones: the narrow cards get a slimmer frame */
@media (max-width: 479px) {
  .xmas .product-card[data-xc] { --fi: 7px; }
  .xmas .product-card[data-xc] .xmas-sprigs { --sp: 74px; }
  .xmas .product-card[data-xc] .product-card-badge, .xmas .product-card[data-xc] .sale-badge { bottom: 0.7rem; }
  .xmas .product-card[data-xc] .product-card-badge { left: 0.7rem; }
  .xmas .product-card[data-xc] .sale-badge { right: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) { .xmas .product-card[data-xc] .product-card-img::after { transition: none; } }

/* ── THE ADD-TO-CART BUTTON AS A LITTLE PRESENT (christmas.js draws it, each product in its own colours) ── */
.xmas .card-add.is-present { width: 2.9rem; height: 2.9rem; margin: -0.3rem -0.2rem -0.3rem 0; border: 0; border-radius: 0; background: none; color: inherit; overflow: visible; }
.xmas .card-add.is-present svg { width: 100%; height: 100%; overflow: visible; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.xmas .card-add.is-present .xg-lid { transform-box: fill-box; transform-origin: 10% 90%; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.xmas .card-add.is-present:hover { background: none; }
.xmas .card-add.is-present:hover .xg-lid, .xmas .card-add.is-present:focus-visible .xg-lid { transform: translateY(-3px) rotate(-7deg); }
.xmas .card-add.is-present:hover svg { transform: translateY(-1px) scale(1.04); }
.xmas .card-add.is-present span { right: -0.2rem; bottom: -0.1rem; }
@media (max-width: 479px) { .xmas .card-add.is-present { width: 2.5rem; height: 2.5rem; } }

/* ── GIFTS DROPPING FROM THE SLEIGH ── */
.xs-gift { position: fixed; z-index: 20; width: 42px; height: 42px; margin: -21px 0 0 -21px; pointer-events: none;
  animation: xs-drop 1.8s cubic-bezier(0.45, 0, 0.85, 0.55) forwards; }
.xs-gift svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 5px rgba(42, 33, 25, 0.3)); }
.xs-gift svg > ellipse { display: none; }   /* no ground shadow while it falls */
@keyframes xs-drop {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 0; }
  10% { opacity: 1; transform: translate(calc(var(--dx) * 0.1), 6px) rotate(calc(var(--rot) * 0.1)) scale(1); }
  80% { opacity: 1; }
  100% { transform: translate(var(--dx), 300px) rotate(var(--rot)) scale(0.95); opacity: 0; }
}
@media (max-width: 767px) { .xs-gift { width: 30px; height: 30px; margin: -15px 0 0 -15px; } }

/* ── PAGE TRANSITION (assets/js/transition.js) ──
   Moving between pages of the site, the browser cross-fades them: the old page fades and drifts up a little while the
   new one fades in from slightly below. The header and the music player have their own names, so they stay put
   instead of fading with the page — it feels like one continuous site. (Chrome, Edge, Safari; others just change page.)
   Each page stays hidden (html.page-hold) until it is ready, then shows at once — fading in gently by itself
   (html.page-in) when it was opened directly. All set by transition.js. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.26s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in 0.42s cubic-bezier(0, 0, 0.2, 1) 0.05s both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
header { view-transition-name: site-header; }
.vinyl { view-transition-name: music-player; }
::view-transition-group(site-header), ::view-transition-group(music-player) { animation-duration: 0.3s; }
html.page-hold body { opacity: 0; animation: page-show 0s 2.5s forwards; }   /* (shows anyway after 2.5 s if a script fails) */
@keyframes page-show { to { opacity: 1; } }
html.page-in body { animation: page-in 0.45s cubic-bezier(0, 0, 0.2, 1) both; }
@keyframes page-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.page-in body { animation: none; }
  html.page-hold body { opacity: 1; animation: none; }
}