/* ==========================================================================
   Premium foundation layer
   Loaded after main.css/util.css — additive refinements on top of the
   existing template, not a rewrite. Safe to disable by removing the
   single <link> that includes this file.
   ========================================================================== */

:root {
  --color-primary: #c11500;
  --color-primary-dark: #8f0f00;
  --color-ink: #1a1a1a;
  --color-ink-soft: #555;
  --color-muted: #969696;
  --color-surface: #fff;
  --color-border: rgba(0, 0, 0, 0.07);

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.25s;
  --duration-base: 0.5s;
  --duration-slow: 0.9s;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 10px 24px rgba(0, 0, 0, 0.08), 0 26px 48px rgba(0, 0, 0, 0.10);
  --radius-card: 14px;
}

/* --------------------------------------------------------------------
   Type scale — fluid sizing on the existing heading classes so the
   hero/section titles breathe more on large screens without a separate
   set of new classes to wire into every template.
   -------------------------------------------------------------------- */
.ltext-201 {
  font-size: clamp(38px, 6vw, 72px);
  letter-spacing: 0.02em;
}

.ltext-106 {
  font-size: clamp(28px, 4vw, 40px);
}

.ltext-101 {
  font-size: clamp(22px, 3vw, 30px);
}

.mtext-105 {
  font-size: clamp(18px, 2vw, 24px);
}

/* --------------------------------------------------------------------
   Cards — give the flat template cards real elevation so they read as
   floating premium invitations rather than a plain grid of thumbnails.
   -------------------------------------------------------------------- */
.block2 {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-premium),
              box-shadow var(--duration-base) var(--ease-premium);
}

.block2:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.block2 .block2-txt {
  padding-left: 18px;
  padding-right: 18px;
  padding-bottom: 20px;
}

/* Smoother, longer image zoom-on-hover (the interaction already existed —
   just given a more deliberate, less mechanical easing curve). */
.hov-img0 img {
  transition: transform var(--duration-slow) var(--ease-premium);
}

/* Refined price display (replaces harsh inline red strikethrough). */
.price-block {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}

.price-was {
  text-decoration: line-through;
  color: var(--color-muted);
  font-family: Poppins-Regular;
}

.price-now {
  color: var(--color-primary);
  font-family: Poppins-SemiBold;
}

/* --------------------------------------------------------------------
   Hero entrance — the template shipped with dead `data-appear`/
   `visible-false` scaffolding (no JS or CSS ever activated it, so the
   hero just appeared instantly). This gives it a real, working,
   staggered entrance using pure CSS — no JS needed, no jank.
   -------------------------------------------------------------------- */
@keyframes premium-rise-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.layer-slick1.animated {
  opacity: 0;
  animation: premium-rise-in var(--duration-slow) var(--ease-premium) forwards;
}

.layer-slick1.animated:nth-of-type(1) { animation-delay: 0.1s; }
.layer-slick1.animated:nth-of-type(2) { animation-delay: 0.28s; }
.layer-slick1.animated:nth-of-type(3) { animation-delay: 0.46s; }

@media (prefers-reduced-motion: reduce) {
  .layer-slick1.animated {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

#dynamic-background {
  position: relative;
  overflow: hidden;
  background-color: #f7f1e6;
  /* Crop the hero to 75% of viewport height (was ~100vh). Overrides
     .item-slick1's height in main.css, including its !important mobile
     rule, since this is scoped to the hero specifically. */
  height: 75vh !important;
}

/* Two-layer parallax hero, kept separate from the text content so either can
   move on its own via transform (compositor-only, no layout/paint cost)
   without dragging the headline/CTA along with it:
     - .hero-parallax-bg  — ambient tiled pattern, farthest away, moves slowest
     - .hero-parallax-fg  — the couple cutout, closest, moves fastest
   Both oversized to 200% height / -50% top so the ±50%-of-container
   translateY range in js/hero-parallax.js never reveals empty space at the
   top/bottom edges. Keep these numbers in sync with that file if either
   changes. */
.hero-parallax-bg {
  position: absolute;
  top: -50%;
  left: 0;
  width: 100%;
  height: 200%;
  background-image: url('../images/hero-pattern.jpg');
  background-repeat: repeat;
  background-size: 900px auto;
  opacity: 0.18;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.hero-parallax-fg {
  position: absolute;
  right: 8%;
  height: 140%;
  width: auto;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.hero-parallax-fg img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  /* The artwork itself is cropped at knee-level with no feet/ground shown,
     so a hard bottom edge reads as the figures "floating". Fading the last
     stretch to transparent lets it dissolve into the page instead. */
  -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 97%);
          mask-image: linear-gradient(to bottom, black 78%, transparent 97%);
}

/* Mobile has its own image (own crop/composition, not just a scaled-down
   desktop cutout), shown only below 767px — see that breakpoint below.
   Hidden by default here; the extra specificity (two classes) is needed to
   beat .hero-parallax-fg img's display:block above. */
.hero-parallax-fg .hero-couple-mobile {
  display: none;
}

@media (max-width: 991px) {
  .hero-parallax-fg {
    right: 50%;
    transform: translate3d(50%, 0, 0);
    opacity: 0.5;
  }
}

@media (max-width: 767px) {
  .hero-parallax-fg .hero-couple-desktop {
    display: none;
  }

  /* Desktop sizes the cutout by height (tall image, wide hero area to
     spare). The mobile image is portrait-oriented on a narrow viewport, so
     height-based sizing would badly overflow horizontally — sized by width
     instead, with height following automatically to preserve its aspect
     ratio.
     Centered with left+right (not transform: translateX) deliberately —
     js/hero-parallax.js sets this element's inline transform on every
     scroll/load for the parallax effect, which completely replaces
     (doesn't merge with) any transform set here, silently cancelling out
     a translateX-based centering trick. left+right avoids the conflict
     entirely since the parallax script never touches those. */
  .hero-parallax-fg {
    /* Negative left/right pushes the container wider than the viewport
       (200% here — double the previous 100%), safely cropped by
       #dynamic-background's overflow: hidden. left/right stays the
       centering mechanism used since it can't be overwritten by
       hero-parallax.js's transform (see comment above). */
    left: -50%;
    right: -50%;
    top: 6%;
    height: auto;
    opacity: 0.55;
  }

  .hero-parallax-fg .hero-couple-mobile {
    display: block;
    height: auto;
    width: 100%;
  }
}

.item-slick1 > .container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-parallax-bg,
  .hero-parallax-fg {
    will-change: auto;
  }
}

/* --------------------------------------------------------------------
   Filters — chip-style active/hover states instead of a plain
   underline, using the same brand red for a coherent, deliberate feel.
   -------------------------------------------------------------------- */
#collections-filter .filter-link,
#subcategory-filter .filter-link,
#price-filter .filter-link {
  display: inline-block;
  transition: color var(--duration-fast) var(--ease-premium);
}

.filter-link-active {
  font-family: Poppins-Medium;
}

.how-pagination1 {
  transition: background-color var(--duration-fast) var(--ease-premium),
              border-color var(--duration-fast) var(--ease-premium),
              color var(--duration-fast) var(--ease-premium),
              transform var(--duration-fast) var(--ease-premium);
}

.how-pagination1:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.active-pagination1 {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* --------------------------------------------------------------------
   Footer — a thin brand accent to separate it from the page, and a
   quieter divider before the copyright line than the template default.
   -------------------------------------------------------------------- */
footer.bg3 {
  border-top: 3px solid var(--color-primary);
}

footer.bg3 .border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* --------------------------------------------------------------------
   Product detail page
   -------------------------------------------------------------------- */
.product-title {
  font-family: Poppins-SemiBold;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.3;
}

.product-price {
  font-size: 22px;
  margin-bottom: 4px;
}

.product-price .price-was {
  font-size: 16px;
}

.product-price .price-now {
  font-size: 24px;
}

/* Gallery — soft elevation on the main image/video so it reads as a
   floating card, matching the product grid cards. */
.sec-product-detail .wrap-pic-w {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.sec-product-detail .wrap-pic-w video,
.sec-product-detail .wrap-pic-w img {
  display: block;
  width: 100%;
}

/* WhatsApp CTA — a real button instead of an external badge image, using
   WhatsApp's own brand green since that's a recognizable, trusted cue for
   this specific action. */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #25d366;
  color: #fff;
  font-family: Poppins-Medium;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 999px;
  transition: transform var(--duration-fast) var(--ease-premium),
              box-shadow var(--duration-fast) var(--ease-premium);
  box-shadow: var(--shadow-card);
}

.btn-whatsapp i {
  font-size: 20px;
}

.btn-whatsapp:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

/* Share row — minimal circular icon buttons instead of labelled
   Bootstrap outline buttons (which rendered in Bootstrap's own default
   colors, clashing with the brand palette). */
.share-row {
  gap: 10px;
}

.share-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-ink-soft);
  background: transparent;
  font-size: 16px;
  transition: background-color var(--duration-fast) var(--ease-premium),
              border-color var(--duration-fast) var(--ease-premium),
              color var(--duration-fast) var(--ease-premium),
              transform var(--duration-fast) var(--ease-premium);
}

.share-icon-btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}

.product-meta-bar {
  background-color: #f2f2f2;
  padding: 15px;
  border-radius: var(--radius-card);
  margin-top: 40px;
}

/* --------------------------------------------------------------------
   Ratings & reviews
   -------------------------------------------------------------------- */
.product-rating-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* Active tab underline in the brand color instead of Bootstrap's default. */
.tab01 .nav-tabs .nav-link.active {
  color: var(--color-primary);
  border-color: transparent transparent var(--color-primary);
}

.tab01 .nav-tabs .nav-link:hover {
  color: var(--color-primary);
  border-color: transparent transparent var(--color-border);
}

.star-rating {
  color: var(--color-primary);
  font-size: 15px;
  letter-spacing: 2px;
}

.star-rating .zmdi-star-outline {
  color: #ddd;
}

.review-list {
  max-width: 720px;
  margin: 0 auto;
}

.review-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--color-border);
}

.review-item .star-rating {
  font-size: 14px;
}

.review-date {
  color: var(--color-muted);
  font-size: 12px;
}

.review-flash {
  max-width: 720px;
  margin: 0 auto 24px;
  padding: 12px 18px;
  border-radius: 8px;
  text-align: center;
  font-family: Poppins-Medium;
}

.review-flash-success {
  background: #e7f7ee;
  color: #1a7a44;
}

.review-flash-error {
  background: #fdecea;
  color: var(--color-primary-dark);
}

.review-form-wrap {
  max-width: 720px;
  margin: 40px auto 0;
}

/* Honeypot field — off-screen for real users, still reachable by naive bots */
.review-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* CSS-only star picker: radios in reverse DOM order (5,4,3,2,1) inside a
   row-reversed flex row, so hovering/selecting star N highlights it and
   every star to its left. */
.star-rating-input {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.star-rating-input input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.star-rating-input label {
  cursor: pointer;
  font-size: 26px;
  color: #ddd;
  padding: 0 2px;
  transition: color var(--duration-fast) var(--ease-premium);
}

.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------
   About / Contact page title band
   -------------------------------------------------------------------- */
.ltext-105 {
  font-size: clamp(32px, 4.5vw, 50px);
  letter-spacing: 0.03em;
}

.page-title-animated {
  opacity: 0;
  animation: premium-rise-in var(--duration-slow) var(--ease-premium) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .page-title-animated {
    opacity: 1;
    animation: none;
  }
}

/* About page image frames — soft elevation to match the card language
   used everywhere else, layered with the template's existing offset
   border trick rather than replacing it. */
.how-bor1 .hov-img0,
.how-bor2 .hov-img0 {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------- */
.contact-panel {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

#map {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.contact-flash {
  max-width: 600px;
  margin: 0 auto 20px;
  padding: 12px 18px;
  border-radius: 8px;
  text-align: center;
  font-family: Poppins-Medium;
}

.contact-flash-success {
  background: #e7f7ee;
  color: #1a7a44;
}

.contact-flash-error {
  background: #fdecea;
  color: var(--color-primary-dark);
}

/* --------------------------------------------------------------------
   Product grid cards: video preview. Overrides main.css's
   .product-item video { display: none } — display:none gives the
   element no layout box at all, which breaks two things: (1) a
   mouseenter bound to the video itself can never fire on the first
   hover, since a stationary cursor doesn't retroactively trigger mouse
   events on an element that only just became visible, and (2) an
   IntersectionObserver can't reliably detect a boxless element
   scrolling into view, which caused mobile's scroll-autoplay to be
   slow/unreliable. Keeping the video always present in layout (just
   transparent + non-interactive until active) fixes both — js/actions.js
   binds hover to the parent .product-item instead of the video, and the
   IntersectionObserver now watches a real geometry the whole time.
   -------------------------------------------------------------------- */
.product-item video {
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.product-item:hover video,
.product-item.video-in-view video {
  opacity: 1;
}

.product-item:hover img,
.product-item.video-in-view img {
  opacity: 0;
}

/* Tap-to-unmute icon on the video preview — only shown while the video is
   actually visible (same triggers as the video itself), so it doesn't
   clutter the card the rest of the time. A direct tap/click on this
   specific button is what makes unmuting reliable (see js/actions.js) —
   unlike an automatic gesture-detected unmute, a real click on a real
   control isn't subject to any browser heuristic/timing risk. */
.video-sound-toggle {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background-color var(--duration-fast) var(--ease-premium);
}

.video-sound-toggle:hover {
  background: rgba(0, 0, 0, 0.8);
}

.product-item:hover .video-sound-toggle,
.product-item.video-in-view .video-sound-toggle {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------
   Floating WhatsApp chat button — stacked above .btn-back-to-top
   (main.css) at the same right offset, positioned just above its height
   plus a small gap so both sit together in the bottom-right corner.
   Always visible (unlike scroll-to-top, which stays hidden until the
   visitor has scrolled) since it's a primary contact CTA, not a utility.
   -------------------------------------------------------------------- */
.btn-whatsapp-float {
  position: fixed;
  right: 40px;
  bottom: 48px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 1000;
  transition: all var(--duration-fast) var(--ease-premium);
}

.btn-whatsapp-float:hover {
  background-color: #128c7e;
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 575px) {
  .btn-whatsapp-float {
    right: 15px;
    bottom: 48px;
  }
}

/* --------------------------------------------------------------------
   Return gifts hero banner (gifts.php). Same desktop/mobile
   background-image swap technique already used for #dynamic-background
   in main.css. Position guesses below (background-position, in
   particular) are a first pass — the source photos have empty space
   reserved for text (left side on desktop, top on the mobile crop), but
   exact cropping depends on real viewport proportions, so expect this
   to need visual tuning once seen live, same as the homepage hero did.
   -------------------------------------------------------------------- */
.gifts-hero {
  position: relative;
  height: 60vh;
  min-height: 420px;
  display: flex;
  align-items: center;
  background-image: url('../images/gifts-hero.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #f7f1e6;
}

.gifts-hero-content {
  max-width: 460px;
}

.gifts-hero-eyebrow {
  display: block;
  margin-bottom: 10px;
}

.gifts-hero-title {
  font-size: clamp(36px, 6vw, 60px);
  padding: 10px 0 16px;
  text-wrap: balance;
}

.gifts-hero-subtitle {
  max-width: 380px;
  padding-bottom: 28px;
}

@media (max-width: 767px) {
  .gifts-hero {
    height: 62vh;
    min-height: 460px;
    background-image: url('../images/gifts-hero-mobile.jpg');
    background-position: top center;
  }

  .gifts-hero-content {
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  .gifts-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }
}