/* ==========================================================================
   GIFTY — modern layer (clean minimal)

   Loaded after style.css and overrides it. The brand stays black and gold,
   but the page moves from warm ivory to a bright white canvas, from a wonky
   serif to a crisp sans, and from heavy shadows to hairlines. Gold is kept
   for small moments only — a price chip, the one serif word in the hero —
   so it still reads as the accent rather than as decoration.

   Removing this file (and its <link> in base.html) restores the old look.
   ========================================================================== */

:root {
  --brand: #0b0b0c;
  --brand-dark: #000000;
  --brand-darker: #1d1d1f;

  --ink: #0b0b0c;
  --slate: #48484d;
  --muted: #86868b;

  --bg: #ffffff;
  --bg-tint: #f5f5f4;
  --card: #ffffff;
  --card-img: #f4f4f3;

  --gold: #c9a84c;
  --gold-soft: #fbf8ef;
  --gold-line: #eadfbd;
  --gold-ink: #7a5c10;

  --brand-soft: #f2f2f1;
  --line: #ebebea;
  --line-strong: #d6d6d4;

  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-md: 0 6px 20px -8px rgba(0, 0, 0, .12);
  --shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, .22);

  /* One sans for everything. The serif survives only as an italic accent. */
  --font-d: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-b: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Fraunces", Georgia, serif;

  --maxw: 1240px;
}

body {
  background: var(--bg);
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -.006em;
}

h1, h2, h3,
.price, .stat strong, .section-title, .logo-mark, .pay-amount, .lf-value,
.hero h1, .occasion-tile h3 {
  font-variation-settings: normal;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -.035em; line-height: 1.05; }

::selection { background: var(--ink); color: #fff; }

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

/* ---- Header -------------------------------------------------------------- */

.ribbon-top { display: none; }

.site-header {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.site-header.scrolled { box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(0, 0, 0, .18); }

.head-main { padding-top: 14px; padding-bottom: 14px; }

.logo-text strong { font-size: 1.4rem; font-weight: 800; letter-spacing: -.04em; }
.logo-text small { letter-spacing: .14em; font-size: .62rem; }
.logo:hover .logo-text strong { color: var(--ink); }

.head-search input {
  background: var(--bg-tint) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.head-search input:focus {
  background: #fff !important;
  box-shadow: 0 0 0 1px var(--line-strong), 0 6px 18px -8px rgba(0, 0, 0, .18) !important;
}

/* Categories as soft pills instead of underlined tabs. */
.cat-bar { background: #fff; border-top: 1px solid var(--line); }
.cat-bar .wrap { gap: 6px; padding-top: 10px; padding-bottom: 10px; }
.cat-bar a {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: .86rem;
  color: var(--slate);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.cat-bar a::after { display: none; }
.cat-bar a:hover { background: var(--bg-tint); color: var(--ink); }
.cat-bar a.on { background: var(--ink); color: #fff; font-weight: 600; }
.cat-nav-prev { background: linear-gradient(90deg, #fff 55%, rgba(255, 255, 255, 0)); }
.cat-nav-next { background: linear-gradient(270deg, #fff 55%, rgba(255, 255, 255, 0)); }

.head-link:hover { background: var(--bg-tint); }
.nav-cta { box-shadow: none; }
.nav-cta:hover { background: #2a2a2d; transform: none; }

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: none;
  transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover {
  background: #2a2a2d;
  border-color: #2a2a2d;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45);
}
.btn-lg { padding: 15px 28px; font-size: 1rem; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.btn-secondary:hover { background: var(--bg-tint); color: var(--ink); border-color: var(--line-strong); box-shadow: none; }

/* ---- Hero: copy left, product bento right ------------------------------- */

.hero-split { padding: 56px 0 72px; text-align: left; }
.hero-split::before {
  width: 720px; height: 720px;
  top: -360px; left: auto; right: -200px; translate: none;
  background: radial-gradient(circle, rgba(201, 168, 76, .10), transparent 65%);
}
.hero-split::after { display: none; }

.hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.hero-split .hero-copy { max-width: 600px; }
.hero-split .eyebrow-pill { margin-left: 0; margin-right: 0; box-shadow: none; background: var(--bg-tint); border-color: transparent; }

.hero-split h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  letter-spacing: -.05em;
  line-height: .98;
  margin-bottom: 22px;
}
.hero h1 em {
  font-family: var(--font-accent);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -.02em;
  color: var(--gold-ink);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.hero h1 em::after { display: none; }

.hero-split .hero-lede { margin: 0 0 30px; font-size: 1.15rem; max-width: 500px; }
.hero-split .hero-actions { justify-content: flex-start; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 0;
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero-stats > div { padding-right: 26px; margin-right: 26px; border-right: 1px solid var(--line); }
.hero-stats > div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hero-stats dt { font-size: 1.45rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.hero-stats dd { margin: 3px 0 0; font-size: .8rem; color: var(--muted); }

.hero-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 12px;
  aspect-ratio: 1 / 1;
}
.bento-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--card-img);
  animation: rise .7s var(--ease) both;
}
.bento-card:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; animation-delay: .05s; }
.bento-card:nth-child(2) { animation-delay: .12s; }
.bento-card:nth-child(3) { animation-delay: .19s; }
.bento-card:nth-child(4) { animation-delay: .26s; }
.bento-card:nth-child(5) { grid-column: 2 / 4; animation-delay: .33s; }
.bento-card img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.bento-card:hover img { transform: scale(1.05); }
.bento-price {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .85rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink);
}

/* ---- Section rhythm ------------------------------------------------------ */

main.wrap { padding-top: 8px; }

.section-head { margin: 0 0 28px; }
.eyebrow { color: var(--muted); letter-spacing: .14em; font-size: .72rem; margin-bottom: 10px; }
.section-title { font-size: clamp(1.75rem, 3.4vw, 2.6rem); letter-spacing: -.045em; }
.section-sub { color: var(--muted); font-size: 1rem; }

.link-more {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: .87rem;
}
.link-more:hover { text-decoration: none; background: var(--bg-tint); }

.product-grid, .occasion-tiles, .steps, .benefits, .faq, .cta-band,
.bundle-grid, .audience-split, .day-strip, .scroll-rail, .brand-strip {
  margin-bottom: 88px;
}

/* ---- Brand strip --------------------------------------------------------- */

.brand-strip {
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 18px 0;
}
.brand-word { color: var(--muted) !important; font-weight: 700; letter-spacing: -.02em; }

/* ---- Occasion tiles ------------------------------------------------------ */

/* Product photos are shot on white, so white text over them never reads.
   The label sits under the picture instead, catalogue style. */
.occasion-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 14px; }
.occasion-tile {
  min-height: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  overflow: visible;
}
.occasion-tile:hover { transform: none; box-shadow: none; }
.occasion-tile::after { display: none; }
.occasion-tile img {
  position: static;
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  background: var(--card-img);
  mix-blend-mode: multiply;
}
.occasion-tile:hover img { transform: none; opacity: .88; }
.occasion-tile .tile-body { position: static; padding: 12px 2px 0; }
.occasion-tile h3 { color: var(--ink); font-size: .98rem; letter-spacing: -.02em; margin-bottom: 2px; }
.occasion-tile .tile-meta { color: var(--muted); font-size: .8rem; }
.occasion-tile .tile-go { display: none; }

/* ---- Product cards: no box, just the photo and the facts ---------------- */

.product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 18px; }

.product-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.product-card:hover { transform: none; box-shadow: none; }

.card-media { border-radius: 20px; }
.card-media img { mix-blend-mode: multiply; }

.promo-pill, .new-pill {
  border-radius: 999px;
  box-shadow: none;
  font-size: .7rem;
  letter-spacing: .02em;
}
.promo-pill { background: var(--ink); }

.card-peek {
  background: var(--ink);
  color: #fff;
  box-shadow: none;
}

.product-card .info { padding: 14px 4px 0; gap: 4px; }
.product-card .kicker { font-size: .68rem; letter-spacing: .1em; color: var(--muted); }
.product-card .name { font-size: .94rem; font-weight: 500; letter-spacing: -.01em; }
.product-card .price { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; padding-top: 4px; }

/* ---- For her / him ------------------------------------------------------- */

.aud-panel { border-radius: 24px; box-shadow: none; border: 1px solid var(--line); background: var(--bg-tint); }
.aud-panel:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }
.aud-body h3 { font-size: 1.4rem; letter-spacing: -.03em; }

/* ---- Rails, days, bundles ----------------------------------------------- */

.scroll-rail::-webkit-scrollbar-track { background: transparent; }
.day-card, .bundle-card { border-radius: 22px; box-shadow: none; }
.bundle-card:hover { transform: none; box-shadow: var(--shadow-md); }

/* ---- Trust panel: how it works + benefits on one tinted surface --------- */

.trust-panel {
  background: var(--bg-tint);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  margin: 0 0 88px;
}
.trust-panel .steps, .trust-panel .benefits { margin-bottom: 0; }
.trust-panel .steps { margin-bottom: 48px; }
.trust-sub { font-size: 1.15rem; letter-spacing: -.03em; margin: 0 0 18px; }
.trust-panel .benefits { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .trust-panel .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .trust-panel .benefits { grid-template-columns: 1fr; } }

.step, .benefit {
  border: none;
  border-radius: 20px;
  box-shadow: none;
  background: #fff;
}
.step:hover, .benefit:hover { transform: none; box-shadow: none; }
.step .n { background: var(--ink); color: #fff; border-radius: 999px; width: 30px; height: 30px; font-size: .85rem; }
.step h3 { font-size: 1.02rem; letter-spacing: -.02em; }
.benefit .ico { background: var(--bg-tint); border-radius: 12px; }

/* ---- "Are you expensive?" ------------------------------------------------ */

.position-band {
  border-radius: var(--radius-lg);
  box-shadow: none;
  margin-bottom: 88px;
}
.pos-answer { letter-spacing: -.03em; }
.pos-answer em { font-family: var(--font-accent); font-weight: 600; }

/* ---- FAQ: two columns on desktop, heading beside the questions ---------- */

.faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 88px;
}
.faq-wrap .faq { max-width: none; margin: 0; }
.faq details {
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  margin: 0;
}
.faq details:first-child { border-top: 1px solid var(--line); }
.faq details[open] { box-shadow: none; }
.faq summary { padding: 20px 44px 20px 0; font-size: 1.02rem; letter-spacing: -.015em; }
.faq summary::after { right: 0; background: var(--bg-tint); }
.faq .answer { padding: 0 0 20px; }

/* ---- Closing CTA --------------------------------------------------------- */

.cta-band { border-radius: var(--radius-lg); box-shadow: none; padding: 72px 40px; background: var(--ink); }
.cta-band::before { background: radial-gradient(circle, rgba(201, 168, 76, .28), transparent 65%); }
.cta-band h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -.045em; }
.cta-band .btn { background: #fff; color: var(--ink); border-color: #fff; }
.cta-band .btn:hover { background: var(--gold-soft); }

/* ---- Product page ------------------------------------------------------- */

.detail-media { border: none; box-shadow: none; border-radius: var(--radius-lg); }
.detail-body h1 { letter-spacing: -.04em; }
.detail-price { letter-spacing: -.03em; }

/* ---- Forms, tables, summaries ------------------------------------------- */

form.checkout-form input,
form.checkout-form textarea,
form.checkout-form select {
  border-color: var(--line-strong);
  border-radius: 12px;
}
form.checkout-form input:focus,
form.checkout-form textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}
.order-summary, table.data-table { box-shadow: none; }
table.data-table thead th { background: var(--bg-tint); }

/* ---- Footer -------------------------------------------------------------- */

.site-footer { background: var(--bg-tint); border-top: none; padding: 64px 0 32px; margin-top: 24px; }
.footer-brand .logo-mark { font-size: 1.3rem; font-weight: 800; letter-spacing: -.04em; }

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 960px) {
  .hero-split { padding: 36px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-split .hero-copy { max-width: none; }
  .hero-bento { aspect-ratio: 3 / 2; grid-template-rows: repeat(2, 1fr); }
  .bento-card:nth-child(1) { grid-row: 1 / 3; }
  .bento-card:nth-child(4) { grid-column: 2 / 4; }
  .bento-card:nth-child(5) { display: none; }
  .faq-wrap { grid-template-columns: 1fr; gap: 8px; }
  .trust-panel { padding: 40px 28px; }
}

@media (max-width: 720px) {
  .hero-split h1 { font-size: clamp(2.3rem, 10vw, 3rem); }
  .hero-split .hero-lede { font-size: 1.02rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .hero-stats > div:nth-child(2n) { border-right: none; margin-right: 0; padding-right: 0; }
  .head-mobile { margin-left: auto; }

  /* On a phone the bento becomes a swipeable strip of equal squares. */
  .hero-bento {
    display: flex;
    gap: 10px;
    aspect-ratio: auto;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .hero-bento::-webkit-scrollbar { display: none; }
  .bento-card,
  .bento-card:nth-child(n) {
    display: block;
    flex: 0 0 44%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    scroll-snap-align: start;
  }

  .cat-bar .wrap { padding-top: 8px; padding-bottom: 8px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .occasion-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .occasion-tile img { border-radius: 14px; }
  .occasion-tile h3 { font-size: .86rem; }
  .card-media { border-radius: 16px; }
  .occasion-tile { min-height: 190px; }

  .product-grid, .occasion-tiles, .steps, .benefits, .cta-band,
  .bundle-grid, .audience-split, .day-strip, .scroll-rail, .brand-strip,
  .trust-panel, .position-band, .faq-wrap { margin-bottom: 60px; }
  .trust-panel { padding: 32px 18px; border-radius: 22px; }
  .cta-band { padding: 48px 22px; }
}