/* ==========================================================================
   GIFTY — premium layer (boutique)

   Loaded last, over style.css and modern.css. Same layout and same pages:
   this only changes the feel. Warm ivory instead of flat white, a serif for
   headings, champagne gold used sparingly, quieter chips and badges, product
   cards that lift, and a black footer to close the page.

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

:root {
  --ink: #141210;
  --brand: #141210;
  --brand-dark: #000;
  --slate: #4a4640;
  --muted: #8a847a;

  --bg: #fbf9f5;
  --bg-tint: #f4f0e8;
  --card: #ffffff;
  --card-img: #f3efe7;

  --gold: #b8944a;
  --gold-soft: #f8f2e3;
  --gold-line: #e6d8b4;
  --gold-ink: #7d6220;

  --line: #e9e4d9;
  --line-strong: #d5cebf;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(20, 18, 16, .04);
  --shadow-md: 0 10px 30px -14px rgba(20, 18, 16, .18);
  --shadow-lg: 0 30px 60px -28px rgba(20, 18, 16, .35);

  --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
::selection { background: var(--gold); color: #fff; }

/* ---- Type: a serif for the big lines, tracked capitals for the small ones -- */

h1, h2, .section-title, .hero-split h1, .detail-body h1, .cta-band h2, .trust-panel h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -.022em;
  line-height: 1.08;
  font-variation-settings: "SOFT" 30, "WONK" 0;
}
.hero-split h1 { font-weight: 480; letter-spacing: -.03em; }
.detail-body h1 { font-size: clamp(1.55rem, 2.6vw, 2.15rem); line-height: 1.14; }
.section-title { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }

.eyebrow, .product-card .kicker, .footer-grid h4 {
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-ink);
}
.eyebrow { font-size: .68rem; }
.section-sub { color: var(--muted); }

/* A short gold rule under each section title: the one flourish. */
.section-head .section-title::after {
  content: "";
  display: block;
  width: 44px; height: 2px;
  margin-top: 16px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

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

.site-header {
  background: rgba(251, 249, 245, .86);
  border-bottom: 1px solid var(--line);
}
.logo-text strong { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.02em; }
.logo-text small { letter-spacing: .16em; color: var(--muted); }
.head-search input {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: none;
}
.head-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(184, 148, 74, .14); }

.cat-bar { background: transparent; border-bottom: 1px solid var(--line); }
.cat-bar a {
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--slate);
}
.cat-bar a.on { background: var(--ink); color: #fff; }

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

.btn {
  letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 8px 20px -12px rgba(20, 18, 16, .55);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -14px rgba(20, 18, 16, .6); }
.btn-secondary, .btn-ghost { box-shadow: none; background: #fff; border-color: var(--line-strong); }
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--ink); box-shadow: none; }
.btn-wa { background: #1c7c4a; border-color: #1c7c4a; box-shadow: 0 8px 20px -12px rgba(28, 124, 74, .8); }
.btn-wa:hover { background: #166a3e; border-color: #166a3e; }

/* ---- Hero ----------------------------------------------------------------- */

.hero-split .eyebrow-pill {
  background: #fff;
  border: 1px solid var(--gold-line);
  color: var(--gold-ink);
  letter-spacing: .04em;
}
.hero-split .hero-lede { color: var(--slate); }
.bento-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.bento-price { background: rgba(255, 255, 255, .94); border: 1px solid var(--gold-line); font-weight: 700; }

.brand-strip { border-color: var(--line); }
.brand-word { font-family: var(--font-serif); font-weight: 500; letter-spacing: .01em; color: #b3ab9d; }

/* ---- Filter chips --------------------------------------------------------- */

.fchip {
  background: #fff;
  border: 1px solid var(--line-strong);
  font-size: .82rem;
  font-weight: 500;
  transition: border-color .2s, background .2s, color .2s;
}
.fchip:hover { border-color: var(--ink); }
.fchip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fchip.on .n { color: var(--gold-line); opacity: 1; }
.filter-group.brands, .filter-group.types { border-top-color: var(--line); }

/* ---- Product cards -------------------------------------------------------- */

.product-card {
  background: transparent;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.product-card:hover { transform: translateY(-4px); }
.card-media {
  background: var(--card-img);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .04);
  overflow: hidden;
  transition: box-shadow .35s;
}
.product-card:hover .card-media { box-shadow: inset 0 0 0 1px rgba(184, 148, 74, .5), var(--shadow-md); }
.card-media img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); mix-blend-mode: multiply; }
.product-card:hover .card-media img { transform: scale(1.045); }
.product-card .kicker { font-size: .62rem; }
.product-card .name { font-weight: 500; color: var(--ink); line-height: 1.38; }
.product-card .price { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Badges: small black tags with gold lettering, not gold blobs. */
.new-pill, .promo-pill {
  background: var(--ink);
  color: #e9d59c;
  border: none;
  font-size: .58rem;
  letter-spacing: .18em;
  font-weight: 700;
  padding: 5px 9px 4px;
  border-radius: 4px;
  box-shadow: none;
}
.promo-pill { background: #7a1f1f; color: #fff; }

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

.occasion-tile { border-radius: var(--radius); }
.occasion-tile h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.01em; }
.occasion-tile img { mix-blend-mode: multiply; }

/* ---- How it works, FAQ, bands -------------------------------------------- */

.trust-panel { background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.step, .benefit { border: 1px solid var(--line); box-shadow: none; border-radius: var(--radius); }
.step:hover, .benefit:hover { border-color: var(--gold-line); box-shadow: var(--shadow-md); }
.step .n { background: var(--ink); color: #e9d59c; font-family: var(--font-serif); font-weight: 500; }

.faq details { border-color: var(--line); }
.faq summary { font-weight: 500; }
.faq summary::after { color: var(--gold-ink); border-color: var(--gold-line); }

.cta-band { border-radius: var(--radius-lg); }

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

.detail-media { background: var(--card-img); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .04); }
.detail-media img { mix-blend-mode: multiply; }
.detail-price { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---- Forms and tables ----------------------------------------------------- */

input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 4px rgba(184, 148, 74, .14); outline: none; }
.order-summary, table.data-table { border-color: var(--line); }

/* ---- Footer: the page closes in black ------------------------------------ */

.site-footer {
  background: #121110;
  color: #cfc9bd;
  border-top: 1px solid #2a2722;
  padding: 72px 0 32px;
  margin-top: 56px;
}
.site-footer .logo-mark, .site-footer .footer-brand .logo-mark { color: #fff; font-family: var(--font-serif); font-weight: 600; }
.site-footer p, .site-footer .footer-brand p { color: #a39d91; }
.site-footer .footer-grid h4 { color: var(--gold); }
.site-footer .footer-links a { color: #cfc9bd; }
.site-footer .footer-links a:hover { color: #fff; }
.site-footer .footer-address strong, .site-footer .footer-contact > strong, .site-footer .footer-social > strong { color: #fff; }
.site-footer .footer-address span { color: #a39d91; }
.site-footer .footer-base { border-top-color: #2a2722; color: #8a847a; }
.site-footer .footer-base a { color: #cfc9bd; }
.site-footer .btn-secondary, .site-footer .btn-ghost { background: transparent; color: #fff; border-color: #3a362f; }
.site-footer .btn-secondary:hover, .site-footer .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .product-card, .card-media img, .btn { transition: none; }
  .product-card:hover, .btn:hover { transform: none; }
  .product-card:hover .card-media img { transform: none; }
}

/* Boxes inside the black footer go dark too. */
.site-footer .footer-address { border-top-color: #2a2722; }
.site-footer .endorse-block { background: #1b1917; border: 1px solid #2a2722; box-shadow: none; }
.site-footer .endorse-block strong { color: #fff; }
.site-footer .endorse-block span { color: #a39d91; }
.site-footer .social-link, .site-footer .footer-contact a {
  background: #1b1917; border-color: #2f2b25; color: #f1ede4;
}
.site-footer .social-link:hover, .site-footer .footer-contact a:hover { border-color: var(--gold); }
.site-footer .footer-contact a small, .site-footer .footer-contact a span { color: inherit; }
.site-footer .footer-contact a svg { color: var(--gold); }

/* Product page: the "New in" tag matches the card badges, and the gift-pitch
   headings join the serif. */
.new-tag {
  background: var(--ink); color: #e9d59c; border: none;
  font-size: .58rem; letter-spacing: .18em; font-weight: 700; text-transform: uppercase;
  padding: 5px 9px 4px; border-radius: 4px;
}
#why-title, #assure-title { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.02em; }

/* ---- Checkout -------------------------------------------------------------
   The hidden radio inside each delivery / payment card inherited the form's
   width: 100%, which made the page scroll sideways. It only needs to exist. */
.plan-option { position: relative; }
form.checkout-form .plan-option input[type="radio"] { width: 1px; height: 1px; padding: 0; margin: 0; border: 0; }

.plan-option .plan-body { border-color: var(--line-strong); background: #fff; transition: border-color .2s, box-shadow .2s, background .2s; }
.plan-option:hover .plan-body { border-color: var(--ink); }
.plan-option input:checked + .plan-body {
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 1px var(--ink), var(--shadow-md);
}

.order-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* On a computer the summary sits beside the form and stays in view, instead
   of both sharing one narrow column with half the screen empty. */
@media (min-width: 980px) {
  main.wrap:has(> form.checkout-form):has(> .order-summary) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    column-gap: 56px;
    align-items: start;
  }
  main.wrap:has(> form.checkout-form):has(> .order-summary) > * { grid-column: 1 / -1; }
  main.wrap:has(> form.checkout-form):has(> .order-summary) > form.checkout-form {
    grid-column: 1; grid-row: 2; max-width: 620px; margin-top: 0;
  }
  main.wrap:has(> form.checkout-form):has(> .order-summary) > .order-summary {
    grid-column: 2; grid-row: 2; position: sticky; top: 150px; max-width: none; margin: 0;
  }
}