/* Ported as-is from design/gifts-for-love-section.html. Only the
   redundant/harmful `body {...}` line is dropped (it would override this
   theme's own body background set in style.css)  see the note at the
   top of assets/css/featured-collections.css for the full reasoning. */
* { box-sizing: border-box; }

/* =================================================================
   GIFTS FOR YOUR LOVE
   ================================================================= */
.gifts-section {
  position: relative;
  background: #0a0908;
  padding: 84px 72px 96px;
  /* A slower, more deliberate deceleration than the site's flat default
     `ease` (--fm-ease  see assets/css/base/tokens.css) for just this
     section's one-time reveal below: a plain `ease` still has noticeable
     motion right up to the end, which reads as mechanical for something
     meant to feel like a photograph settling into place. Scoped here
     rather than changing that shared token, which every other transition
     in the theme also uses. */
  --fm-gifts-ease: cubic-bezier(0.19, 1, 0.22, 1);
}
.gifts-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,54,0.5), transparent);
}

.gifts-title {
  text-align: center;
  font-family: 'Playfair Display', 'Georgia', serif;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: 1px;
  color: #f3efe7;
  margin: 0 0 60px;
  /* One-time reveal the first time the section scrolls into view (see
     assets/js/gifts-for-love.js, which just toggles .is-visible on
     .gifts-section  same IntersectionObserver-once pattern as
     assets/css/testimonials.css). The title leads, its gold underline
     drawing in as it settles; the two photos come in out-of-focus and
     slightly oversized, so they read as "arriving"/settling into sharp
     focus rather than a flat fade; each side's copy column slides in from
     its own outer edge just after its own photo. Every delay below is
     tuned to overlap rather than strictly queue one after another  see
     each piece's own delay for where it sits in that sequence. */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--fm-gifts-ease), transform 0.9s var(--fm-gifts-ease);
}
.gifts-section.is-visible .gifts-title { opacity: 1; transform: translateY(0); }
.gifts-title .accent {
  position: relative;
  color: #e8dcc0;
}
.gifts-title .accent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: #C9A236;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--fm-gifts-ease) 0.4s;
}
.gifts-section.is-visible .gifts-title .accent::after { transform: scaleX(1); }

.gifts-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  max-width: 1180px;
  margin: 0 auto;
}

.gift-copy {
  flex: 0 0 260px;
  max-width: 260px;
  /* Slides in from its own outer edge (her from the left, him from the
     right), each arriving just after its own photo  see .gifts-title's
     own comment above for the full sequence. */
  opacity: 0;
  transition: opacity 0.8s var(--fm-gifts-ease), transform 0.8s var(--fm-gifts-ease);
}
.gift-copy.copy-her { transform: translateX(-40px); transition-delay: 0.5s; }
.gift-copy.copy-him { transform: translateX(40px); transition-delay: 0.65s; }
.gifts-section.is-visible .gift-copy { opacity: 1; transform: translateX(0); }
.gift-copy.align-right { text-align: right; }
.gift-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #C9A236;
  margin-bottom: 10px;
}
.gift-heading {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f3efe7;
  margin-bottom: 16px;
}
.gift-desc {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  line-height: 1.75;
  color: #b7ada0;
  margin-bottom: 24px;
}

/* button  same shape/hover language as the hero's shop-btn */
.gift-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 14px 28px;
  border: 1px solid rgba(232,220,192,0.55);
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #f3efe7;
  text-decoration: none;
  overflow: hidden;
  z-index: 0;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.gift-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: -1;
}
.gift-btn:hover { color: #ffffff; border-color: #000000; }
.gift-btn:hover::before { transform: scaleX(1); }

.gift-btn.is-disabled {
  color: #7c7568;
  border-color: rgba(232,220,192,0.25);
  cursor: default;
  pointer-events: none;
}

.gift-images {
  display: flex;
  gap: 18px;
  flex: 1 1 auto;
  max-width: 620px;
}
.gift-image {
  position: relative;
  flex: 1;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(201,162,54,0.28);
  background: linear-gradient(150deg, #241f18 0%, #382c1c 50%, #4a3a22 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Each photo arrives out-of-focus and slightly oversized, settling into
     sharp focus at its true size rather than a flat fade  reads as the
     photo itself settling into place instead of a generic UI transition.
     The two photos are staggered a beat apart (nth-child below) instead
     of arriving together, so the pair doesn't read as one flat block. */
  opacity: 0;
  transform: scale(1.08);
  filter: blur(10px);
  transition: opacity 0.9s var(--fm-gifts-ease), transform 0.9s var(--fm-gifts-ease), filter 0.9s var(--fm-gifts-ease);
}
.gift-image:nth-child(1) { transition-delay: 0.25s; }
.gift-image:nth-child(2) { transition-delay: 0.4s; }
.gifts-section.is-visible .gift-image { opacity: 1; transform: scale(1); filter: blur(0); }
.gift-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Was completely static before  a slow, subtle zoom on hover is the
     same "advanced store" hover language as the product card's photo
     (assets/css/product-card.css), just without that card's next-image
     cycling since a gift panel only ever has the one photo. */
  transition: transform 0.6s ease;
}
.gift-image:hover img { transform: scale(1.06); }
.gift-image .monogram {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 46px;
  color: rgba(233,221,196,0.28);
  letter-spacing: 1px;
}
.gift-image .frame-corner {
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid rgba(201,162,54,0.5);
  /* Pops in from its own corner just after the photo behind it (nth-child
     delays below, matching .gift-image's own stagger + a beat), separate
     from the near-instant width/height/border-color hover response so
     hovering never feels sluggish waiting on the same long delay. */
  opacity: 0;
  transform: scale(0.4);
  transition: width 0.35s ease, height 0.35s ease, border-color 0.35s ease, opacity 0.6s var(--fm-gifts-ease), transform 0.6s var(--fm-gifts-ease);
}
.gift-image .frame-corner.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; transform-origin: top left; }
.gift-image .frame-corner.br { bottom: 12px; right: 12px; border-left: none; border-top: none; transform-origin: bottom right; }
.gift-image:nth-child(1) .frame-corner { transition-delay: 0s, 0s, 0s, 0.55s, 0.55s; }
.gift-image:nth-child(2) .frame-corner { transition-delay: 0s, 0s, 0s, 0.7s, 0.7s; }
.gifts-section.is-visible .gift-image .frame-corner { opacity: 1; transform: scale(1); }
/* Corners grow and brighten to full gold on hover, echoing the zoom on the
   photo behind them instead of just sitting there static. */
.gift-image:hover .frame-corner { width: 28px; height: 28px; border-color: #C9A236; }

@media (max-width: 980px) {
  .gifts-section { padding: 64px 32px 76px; }
  .gifts-row { flex-wrap: wrap; }
  .gift-copy { flex: 1 1 100%; max-width: 420px; text-align: center !important; margin: 0 auto; }
  .gift-images { flex: 1 1 100%; max-width: 100%; order: 2; }
  .gift-copy.copy-her { order: 1; }
  .gift-copy.copy-him { order: 3; }
}
@media (max-width: 560px) {
  .gifts-title { margin-bottom: 40px; }
  .gift-images { flex-direction: column; max-width: 280px; margin: 0 auto; }
  .gift-image { aspect-ratio: 4 / 3; }
}

/* =========================================================
   LIGHT THEME  literal hex, same situation as featured-collections.css's
   own light-theme block. Third section in the home page's alternating
   sequence (FFFFFF, after trending-products' F5EDE6). The gift photo
   placeholders (.gift-image's own dark tan/brown gradient + monogram)
   are left as-is in both themes  they stand in for a real product photo,
   not a chrome color choice.
   ========================================================= */
html[data-theme="light"] .gifts-section { background: #F5EDE6; }
html[data-theme="light"] .gifts-title { color: #000000; }
html[data-theme="light"] .gifts-title .accent { color: #C9A236; }
html[data-theme="light"] .gift-eyebrow { color: #C9A236; }
html[data-theme="light"] .gift-heading { color: #000000; }
html[data-theme="light"] .gift-desc { color: #515151; }
html[data-theme="light"] .gift-btn { border-color: rgba(0, 0, 0, 0.18); color: #000000; }
html[data-theme="light"] .gift-btn:hover { color: #ffffff; border-color: #000000; }
html[data-theme="light"] .gift-btn.is-disabled { color: #a89f92; border-color: rgba(0, 0, 0, 0.1); }