/*
  SchedulHub Gifts — visual identity for the gifting vertical.
  Warm Celebration tone: soft cream base, coral/blush primary, warm gold accent,
  rounded/friendly headings. Deliberately light and warm — the opposite register
  from Rides' dark ink/brass chauffeur theme — since gifting is occasion-driven
  and celebratory rather than premium-formal.
*/
:root {
  --gifts-cream: #fdf6f0;
  --gifts-cream-soft: #f7ebe1;
  --gifts-surface: #ffffff;
  --gifts-coral: #dd5c53;
  --gifts-coral-dark: #c14840;
  --gifts-gold: #c28a2e;
  --gifts-gold-dark: #9c6f22;
  --gifts-espresso: #2e2420;
  --gifts-muted: #6f5f57;
  --gifts-border: rgba(221, 92, 83, 0.24);
}

.gifts-page {
  background: var(--gifts-cream);
  color: var(--gifts-espresso);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

.gifts-page h1,
.gifts-page h2,
.gifts-page h3,
.gifts-page .gifts-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--gifts-espresso);
}

.gifts-eyebrow {
  color: var(--gifts-coral);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 600;
}

.gifts-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(212, 162, 76, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(232, 116, 108, 0.12) 0%, transparent 65%),
    var(--gifts-cream);
  padding: 120px 0 100px;
  border-bottom: 1px solid var(--gifts-border);
}

.gifts-hero h1 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.18;
  margin-bottom: 20px;
}

.gifts-nav-brand {
  font-size: 1.4rem;
}

.gifts-nav-actions {
  gap: 20px;
}

.gifts-hero-cta {
  gap: 16px;
}

.gifts-hero p.lead {
  color: var(--gifts-muted);
  font-size: 1.1rem;
  max-width: 540px;
}

/* Decorative confetti dots — no photography needed */
.gifts-hero-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.gifts-confetti-dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: gifts-confetti-float 4.5s ease-in-out infinite;
}
.gifts-confetti-dot.d1 { top: 18%; right: 10%; width: 14px; height: 14px; background: var(--gifts-gold); animation-delay: 0s; }
.gifts-confetti-dot.d2 { top: 40%; right: 22%; width: 10px; height: 10px; background: var(--gifts-coral); animation-delay: 1.1s; }
.gifts-confetti-dot.d3 { top: 62%; right: 6%; width: 8px; height: 8px; background: var(--gifts-gold-dark); animation-delay: 2.2s; }
.gifts-confetti-dot.d4 { top: 30%; right: 34%; width: 12px; height: 12px; background: var(--gifts-coral); animation-delay: 0.6s; }
@keyframes gifts-confetti-float {
  0%   { transform: translateY(20px) scale(0.8); opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.9; }
  100% { transform: translateY(-40px) scale(1); opacity: 0; }
}

.gifts-hero-giftmark {
  position: absolute;
  right: 6%;
  bottom: 4%;
  font-size: clamp(120px, 15vw, 240px);
  color: transparent;
  -webkit-text-stroke: 1px var(--gifts-border);
  opacity: 0.6;
}

/* Search / occasion widget layered on the hero */
.gifts-search-widget {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--gifts-border);
  border-radius: 14px;
  padding: 24px;
  margin-top: 36px;
  position: relative;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(58, 46, 42, 0.08);
}
.gifts-search-widget label {
  color: var(--gifts-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  display: block;
}

.gifts-field {
  position: relative;
  margin-bottom: 10px;
}
.gifts-field i.gifts-field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gifts-coral);
  font-size: 0.85rem;
  pointer-events: none;
  z-index: 1;
}
.gifts-search-widget .form-select,
.gifts-search-widget .form-control,
.gifts-filter-bar .form-select,
.gifts-filter-bar .form-control {
  background-color: var(--gifts-surface);
  border: 1px solid var(--gifts-border);
  color: var(--gifts-espresso);
  height: 48px;
  border-radius: 10px;
  font-size: 0.92rem;
  padding: 0 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gifts-field .form-select,
.gifts-field .form-control {
  padding-left: 40px;
}
.gifts-search-widget .form-select,
.gifts-filter-bar .form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23e8746c' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 11px 7px;
  padding-right: 38px;
}
.gifts-search-widget .form-select:hover,
.gifts-search-widget .form-control:hover,
.gifts-filter-bar .form-select:hover,
.gifts-filter-bar .form-control:hover {
  border-color: rgba(232, 116, 108, 0.45);
}
.gifts-search-widget .form-select:focus,
.gifts-search-widget .form-control:focus,
.gifts-filter-bar .form-select:focus,
.gifts-filter-bar .form-control:focus {
  border-color: var(--gifts-coral);
  box-shadow: 0 0 0 3px rgba(232, 116, 108, 0.15);
  background-color: var(--gifts-surface);
  color: var(--gifts-espresso);
}
.gifts-search-btn {
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

/* Trust / stat strip */
.gifts-stat-strip {
  border-top: 1px solid var(--gifts-border);
  border-bottom: 1px solid var(--gifts-border);
  background: var(--gifts-cream-soft);
}
.gifts-stat {
  text-align: center;
  padding: 32px 10px;
}
.gifts-stat .gifts-stat-number {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2rem;
  color: var(--gifts-coral);
  font-weight: 600;
  line-height: 1;
}
.gifts-stat .gifts-stat-label {
  color: var(--gifts-muted);
  font-size: 0.85rem;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-gifts-primary {
  background: var(--gifts-coral);
  border: 1px solid var(--gifts-coral);
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-gifts-primary:hover {
  background: var(--gifts-coral-dark);
  border-color: var(--gifts-coral-dark);
  color: #fff;
  transform: translateY(-1px);
}

.btn-gifts-outline {
  background: transparent;
  border: 1px solid var(--gifts-border);
  color: var(--gifts-espresso);
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 999px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-gifts-outline:hover {
  border-color: var(--gifts-coral);
  color: var(--gifts-coral);
}

/* ---- Shared gifts marketplace header (includes/gifts-nav.php) ----
   Two rows: a top utility row (logo, search, sign in, wishlist, cart) that stays
   visible at every width, and a category strip underneath that the hamburger
   collapses on mobile. Deliberately not an Etsy clone - warm cream/coral palette,
   pill search field, circular icon buttons instead of Etsy's flat text+icon row. */
.gifts-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--gifts-surface);
}
.gifts-nav-top {
  border-bottom: 1px solid var(--gifts-border);
  padding: 14px 0;
}
.gifts-nav-top .container {
  display: flex;
  align-items: center;
  gap: 18px;
}
.gifts-nav-top .navbar-toggler {
  border: 1px solid var(--gifts-border);
  padding: 6px 10px;
  border-radius: 8px;
}
.gifts-nav-top .navbar-brand.gifts-nav-brand {
  white-space: nowrap;
}

.gifts-nav-search {
  flex: 1 1 auto;
  position: relative;
  max-width: 560px;
  margin: 0;
}
.gifts-nav-search input {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--gifts-border);
  background: var(--gifts-cream-soft);
  padding: 0 48px 0 18px;
  font-size: 0.9rem;
  color: var(--gifts-espresso);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.gifts-nav-search input:focus {
  outline: none;
  border-color: var(--gifts-coral);
  background: var(--gifts-surface);
}
.gifts-nav-search button {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--gifts-coral);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background 0.2s ease;
}
.gifts-nav-search button:hover {
  background: var(--gifts-coral-dark);
}

.gifts-nav-top .gifts-nav-actions {
  gap: 16px;
  flex-shrink: 0;
}
.gifts-nav-signin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gifts-espresso);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.gifts-nav-signin:hover {
  color: var(--gifts-coral);
}
.gifts-nav-icon-link,
.gifts-nav-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gifts-espresso);
  text-decoration: none;
}
.gifts-nav-icon-link {
  font-size: 1.2rem;
}
.gifts-nav-icon-link:hover {
  color: var(--gifts-coral);
}
.gifts-nav-cart-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gifts-cream-soft);
  border: 1px solid var(--gifts-border);
  font-size: 1rem;
}
.gifts-nav-cart-btn:hover {
  background: var(--gifts-coral);
  border-color: var(--gifts-coral);
  color: #fff;
}
.gifts-nav-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--gifts-gold-dark);
  color: #fff;
  border-radius: 50%;
  min-width: 17px;
  min-height: 17px;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px 4px;
  border: 2px solid var(--gifts-surface);
}

.gifts-nav-categories-wrap {
  /* Bootstrap's .navbar sets its own top/bottom padding, which stays even while
     #giftsNavCollapse (the actual .gifts-nav-categories element) is hidden below lg -
     leaving a bare gap between .gifts-nav-top and the page content beneath it. */
  padding: 0;
}
.gifts-nav-categories {
  background: var(--gifts-cream-soft);
  border-bottom: 1px solid var(--gifts-border);
}
.gifts-nav-cat-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 28px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
}
.gifts-nav-cat-list > li > a,
.gifts-nav-cat-list > li > .gifts-dropdown-trigger {
  color: var(--gifts-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.gifts-nav-cat-list > li > a:hover {
  color: var(--gifts-coral);
}

/* "List Your Shop" is a vendor-signup CTA, not another browse link, so it's pushed to
   the far right of the row (margin-left: auto on its own flex item) instead of sitting
   in the left-grouped flow with Categories/Occasions/Browse Shops/Browse Products. */
.gifts-nav-cat-list > li.gifts-nav-cta-item {
  margin-left: auto;
}
/* It also gets its own coral pill instead of blending into the plain-text category
   row. Selector is qualified past .gifts-nav-cta alone to out-specificity the
   plain-link rule above. */
.gifts-nav-cat-list > li > a.gifts-nav-cta {
  color: #fff;
  background: var(--gifts-coral);
  padding: 6px 16px;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.gifts-nav-cat-list > li > a.gifts-nav-cta i {
  margin-right: 6px;
  font-size: 0.8rem;
}
.gifts-nav-cat-list > li > a.gifts-nav-cta:hover {
  color: #fff;
  background: var(--gifts-coral-dark);
  transform: translateY(-1px);
}

/* Reusable custom dropdown (replaces Bootstrap's Dropdown/Popper component sector-
   wide) - a plain class-toggle driven by gifts-dropdown.js, styled from scratch
   rather than overriding Bootstrap's .dropdown-menu look. ".gifts-dropdown" is the
   behavioral wrapper (position + open/close), ".gifts-occ-*" below is this specific
   Occasions panel's own visual styling. */
.gifts-dropdown {
  position: relative;
}
.gifts-dropdown-trigger {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gifts-dropdown-trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.15s ease;
}
.gifts-dropdown.open .gifts-dropdown-trigger::after {
  transform: rotate(-135deg);
  margin-top: 2px;
}
.gifts-dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1040;
}
.gifts-dropdown.open .gifts-dropdown-panel {
  display: block;
}

.gifts-occ-trigger:hover,
.gifts-occ-dropdown.open .gifts-occ-trigger,
.gifts-cat-dropdown.open .gifts-occ-trigger {
  color: var(--gifts-coral);
}
.gifts-occ-panel {
  border: 1px solid var(--gifts-border);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(58, 46, 42, 0.16);
  padding: 18px;
  min-width: 320px;
  background: var(--gifts-surface);
  margin-top: 14px;
  /* Desktop panel is position:absolute, so a long list just runs past the viewport
     bottom with nothing to scroll it into view except the outer page - capping its
     own height and scrolling it internally instead keeps it reachable. */
  max-height: min(65vh, 480px);
  overflow-y: auto;
}
.gifts-occ-panel-eyebrow {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gifts-coral);
  font-weight: 600;
  margin-bottom: 12px;
}
.gifts-occ-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
}
.gifts-occ-panel-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--gifts-espresso);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s ease, color 0.15s ease;
}
.gifts-occ-panel-item:hover {
  background: var(--gifts-cream-soft);
  color: var(--gifts-coral-dark);
}

/* "Categories" dropdown (gift_categories - a product taxonomy: Flowers > Roses) -
   distinct from "Occasions" (occasions - what the gift is for), so it gets its own
   wider mega-menu-style panel: one column per top-level category, children listed
   underneath each. */
.gifts-cat-panel {
  border: 1px solid var(--gifts-border);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(58, 46, 42, 0.16);
  padding: 26px;
  background: var(--gifts-surface);
  margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px 28px;
  min-width: 560px;
  max-width: 820px;
  /* Desktop panel is position:absolute, so a long list just runs past the viewport
     bottom with nothing to scroll it into view except the outer page - capping its
     own height and scrolling it internally instead keeps it reachable. */
  max-height: min(65vh, 480px);
  overflow-y: auto;
}
/* display:grid belongs here, scoped to the open state, NOT on the bare .gifts-cat-panel
   rule above - .gifts-dropdown-panel (the generic base) already sets display:none and
   only .open flips it to visible; an unconditional "display: grid" on .gifts-cat-panel
   itself has equal selector specificity and comes later in the file, so it was silently
   winning over that toggle and left the panel permanently visible even when closed. */
.gifts-cat-dropdown.open .gifts-cat-panel {
  display: grid;
}
.gifts-cat-group-title {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gifts-espresso);
  text-decoration: none;
  margin-bottom: 8px;
}
.gifts-cat-group-title:hover {
  color: var(--gifts-coral);
}
.gifts-cat-group-children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gifts-cat-group-children a {
  display: block;
  padding: 4px 0;
  color: var(--gifts-muted);
  font-size: 0.85rem;
  text-decoration: none;
}
.gifts-cat-group-children a:hover {
  color: var(--gifts-coral-dark);
}

/* Below the lg breakpoint the category row lives inside the hamburger's collapse
   panel instead of sitting next to it as a horizontal strip, so this reflows both
   the row and the Occasions panel into a normal stacked mobile list. */
@media (max-width: 991.98px) {
  /* The open mobile menu used to just push the rest of the page down, so reaching
     "List Your Shop" at the bottom of a long Categories/Occasions list meant
     scrolling the whole page (past the hero etc.) before the scroll did anything
     inside the menu itself. Capping its height and scrolling it internally instead
     keeps the menu self-contained. */
  .gifts-nav-categories {
    max-height: calc(100vh - 132px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gifts-nav-categories .container {
    padding-left: 0;
    padding-right: 0;
  }
  .gifts-nav-cat-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 0 14px;
  }
  .gifts-nav-cat-list > li {
    width: 100%;
  }
  .gifts-nav-cat-list > li > a,
  .gifts-nav-cat-list > li > .gifts-dropdown-trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 11px 24px;
  }
  .gifts-nav-cat-list > li.gifts-nav-cta-item {
    margin-left: 0;
    margin-top: 10px;
    padding: 0 24px;
  }
  .gifts-nav-cat-list > li > a.gifts-nav-cta {
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    width: auto;
  }
  .gifts-occ-panel {
    position: static;
    float: none;
    width: 100%;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 2px 0 6px 24px;
    min-width: 0;
    margin: 0;
    /* .gifts-nav-categories (the whole open mobile menu) already scrolls internally -
       nesting a second scroll area in here would just be confusing. */
    max-height: none;
    overflow-y: visible;
  }
  .gifts-occ-panel-eyebrow {
    display: none;
  }
  .gifts-occ-panel-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .gifts-occ-panel-item {
    padding: 8px 4px;
    white-space: normal;
  }
  .gifts-cat-panel {
    position: static;
    float: none;
    width: 100%;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 2px 0 10px 24px;
    min-width: 0;
    max-width: none;
    margin: 0;
    /* Stack the category groups into one column instead of the desktop grid - NOT a
       "display: block" override, which would defeat .gifts-dropdown-panel's own
       display:none/.open toggle and leave the panel permanently visible. */
    grid-template-columns: 1fr;
    /* .gifts-nav-categories (the whole open mobile menu) already scrolls internally -
       nesting a second scroll area in here would just be confusing. */
    max-height: none;
    overflow-y: visible;
  }
  .gifts-cat-group {
    margin-bottom: 14px;
  }
  .gifts-cat-group-title {
    font-size: 0.88rem;
  }
  .gifts-cat-group-children a {
    padding: 6px 0;
  }

  /* Header row wraps to a second line for the search field, like Etsy's mobile
     header - logo stays leftmost, the hamburger moves off the far left (where it
     used to sit before the brand) to sit with the action icons on the right instead,
     search gets its own full-width row below. Shared with the categories rules above
     since both kick in exactly where the hamburger replaces the desktop nav (<lg). */
  .gifts-nav-top .container {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .gifts-nav-brand {
    order: 1;
  }
  .gifts-nav-top .gifts-nav-actions {
    order: 2;
    margin-left: auto;
    gap: 12px;
  }
  .gifts-nav-top .navbar-toggler {
    order: 3;
  }
  .gifts-nav-search {
    order: 4;
    flex: 1 1 100%;
    max-width: none;
  }
}

/* Deliberately white (.gifts-nav-categories right above it uses the cream-soft tint) -
   same color with no dividing line was reading as one continuous nav bar with an
   unstyled vendor-name row tacked on, rather than as a distinct "you're viewing this
   shop" strip beneath the site nav. */
.gifts-vendor-strip {
  background: var(--gifts-surface);
  border-bottom: 1px solid var(--gifts-border);
  padding: 10px 0;
}
.gifts-vendor-strip-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gifts-espresso);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}
.gifts-vendor-strip-link:hover {
  color: var(--gifts-coral);
}
.gifts-vendor-strip-logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
.gifts-vendor-strip-link i {
  font-size: 0.65rem;
  color: var(--gifts-muted);
}

.gifts-occasion-card {
  background: var(--gifts-surface);
  border: 1px solid var(--gifts-border);
  border-radius: 12px;
  padding: 30px 26px;
  height: 100%;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.gifts-occasion-card:hover {
  transform: translateY(-6px);
  border-color: var(--gifts-coral);
  box-shadow: 0 16px 34px rgba(58, 46, 42, 0.1);
}
.gifts-occasion-card i {
  color: var(--gifts-coral);
  font-size: 1.7rem;
  margin-bottom: 14px;
  display: inline-block;
  transition: transform 0.25s ease;
}
.gifts-occasion-card:hover i {
  transform: scale(1.15) rotate(-4deg);
}
.gifts-occasion-card h3 {
  font-size: 16px;
  margin-bottom: 8px;
}
.gifts-occasion-card p {
  color: var(--gifts-muted);
  margin-bottom: 0;
  font-size: 14px;
}

/* Browse page filter bar */
.gifts-filter-bar {
  background: var(--gifts-surface);
  border: 1px solid var(--gifts-border);
  border-top: 3px solid var(--gifts-coral);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 40px;
  box-shadow: 0 10px 28px rgba(58, 46, 42, 0.06);
}

/* Custom multi-select "Category" filter (products.php) - a checkbox list in a
   .gifts-dropdown panel instead of a native <select>, since a plain select can only
   ever carry one value and its own built-in UI has no room to show which of several
   picked categories are active. Trigger is styled to match the plain .form-select
   fields beside it rather than the nav's pill-style dropdown trigger. */
.gifts-catfilter-trigger {
  width: 100%;
  height: 48px;
  background: var(--gifts-surface);
  border: 1px solid var(--gifts-border);
  border-radius: 10px;
  padding: 0 16px;
  color: var(--gifts-espresso);
  font-size: 0.92rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gifts-catfilter-trigger:hover,
.gifts-catfilter-dropdown.open .gifts-catfilter-trigger {
  border-color: var(--gifts-coral);
}
.gifts-catfilter-trigger i {
  color: var(--gifts-coral);
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-right: 10px;
}
.gifts-catfilter-trigger::after {
  border-color: var(--gifts-coral);
  margin-left: auto;
}
.gifts-catfilter-label {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gifts-catfilter-panel {
  border: 1px solid var(--gifts-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(58, 46, 42, 0.16);
  background: var(--gifts-surface);
  padding: 10px;
  margin-top: 8px;
  min-width: 100%;
}
/* The search box stays put and only the option list beneath it scrolls - max-height/
   overflow-y moved here off .gifts-catfilter-panel itself so the box you're typing in
   doesn't scroll out of view along with the list. */
.gifts-catfilter-search-wrap {
  position: relative;
  margin-bottom: 8px;
}
.gifts-catfilter-search-wrap i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gifts-coral);
  font-size: 0.8rem;
  pointer-events: none;
}
.gifts-catfilter-search {
  width: 100%;
  height: 36px;
  border: 1px solid var(--gifts-border);
  border-radius: 8px;
  background: var(--gifts-cream-soft);
  padding: 0 12px 0 32px;
  font-size: 0.85rem;
  color: var(--gifts-espresso);
}
.gifts-catfilter-search:focus {
  outline: none;
  border-color: var(--gifts-coral);
  background: var(--gifts-surface);
}
.gifts-catfilter-options {
  max-height: min(45vh, 320px);
  overflow-y: auto;
}
.gifts-catfilter-empty {
  padding: 10px 12px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--gifts-muted);
}
/* Each option is a <label>, so .gifts-filter-bar label further down (uppercase,
   8px letter-spacing, 8px margin-bottom, block display, muted color - meant for the
   field labels like "CATEGORY" above the dropdown, not these checkbox rows) was
   winning on specificity alone (class+type beats a single class) despite coming
   first in the file. Qualified past a bare .gifts-catfilter-option to out-specificity
   it, and every property that rule touches is reset explicitly rather than relying on
   source order. */
.gifts-catfilter-panel .gifts-catfilter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.88rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--gifts-espresso);
  cursor: pointer;
  margin: 0;
}
.gifts-catfilter-panel .gifts-catfilter-option:hover {
  background: var(--gifts-cream-soft);
}
.gifts-catfilter-panel .gifts-catfilter-option input[type="checkbox"] {
  accent-color: var(--gifts-coral);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
}
.gifts-filter-bar label {
  color: var(--gifts-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: block;
}
.gifts-filter-bar .btn-gifts-outline {
  height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* Filter fields (browse.php, products.php) collapse behind a toggle on every screen
   size now, not just mobile - a search + occasion + category + price row stacked
   full-height ate the whole first screen before any actual results were visible, and
   that's just as true on a laptop as on a phone. */
.gifts-filter-toggle-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
}
.gifts-filter-toggle-btn {
  width: auto;
}
.gifts-filter-fields {
  display: none;
}
.gifts-filter-fields.gifts-filter-fields-open {
  display: flex;
}
@media (max-width: 767.98px) {
  .gifts-filter-toggle-row {
    display: block;
  }
  .gifts-filter-toggle-btn {
    width: 100%;
  }
}
.gifts-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--gifts-muted);
}

.gifts-vendor-card {
  background: var(--gifts-surface);
  border: 1px solid var(--gifts-border);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.gifts-vendor-card:hover {
  border-color: var(--gifts-coral);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(58, 46, 42, 0.1);
}
.gifts-vendor-card .gifts-vendor-banner {
  width: 100%;
  height: 130px;
  object-fit: cover;
  background: var(--gifts-cream-soft);
}
.gifts-vendor-card .gifts-vendor-body {
  padding: 20px;
}
.gifts-vendor-card .gifts-vendor-logo {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--gifts-surface);
  margin-top: -46px;
  margin-bottom: 12px;
  background: var(--gifts-surface);
}
.gifts-vendor-card h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: var(--gifts-espresso);
}
.gifts-vendor-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #2563eb;
  vertical-align: middle;
  margin-left: 6px;
}
.gifts-vendor-card .gifts-vendor-meta {
  color: var(--gifts-muted);
  font-size: 0.88rem;
  margin-bottom: 14px;
}
.gifts-vendor-card .gifts-vendor-badge {
  display: inline-block;
  background: rgba(232, 116, 108, 0.12);
  color: var(--gifts-coral-dark);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  margin: 2px 4px 2px 0;
}

.gifts-section {
  padding: 76px 0;
}
.gifts-section-alt {
  background: var(--gifts-cream-soft);
}

.gifts-modal .modal-content {
  background: var(--gifts-surface);
  color: var(--gifts-espresso);
  border: 1px solid var(--gifts-border);
}
.gifts-modal .form-control,
.gifts-modal .form-select {
  background-color: var(--gifts-cream);
  border: 1px solid var(--gifts-border);
  color: var(--gifts-espresso);
  height: 48px;
  border-radius: 10px;
  font-size: 0.92rem;
  padding: 0 16px;
}
.gifts-modal .form-control:focus,
.gifts-modal .form-select:focus {
  border-color: var(--gifts-coral);
  box-shadow: 0 0 0 3px rgba(232, 116, 108, 0.15);
  background-color: var(--gifts-surface);
  color: var(--gifts-espresso);
}
.gifts-modal .form-control::placeholder {
  color: var(--gifts-muted);
  opacity: 1;
}
/* Same specificity as .gifts-modal .form-control above, so without this the icon and
   placeholder text overlap inside modals (login/register) — carhire.css has the same
   override for .rides-modal .rides-field, this was missed when gifts.css was written. */
.gifts-modal .gifts-field .form-control,
.gifts-modal .gifts-field .form-select {
  padding-left: 40px;
}
.gifts-modal label {
  color: var(--gifts-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: block;
}

/* Sector hub card, matches the .sector-rides card already on the main landing page */
.sector-hub-card.sector-gifts {
  background: linear-gradient(135deg, var(--gifts-coral) 0%, var(--gifts-gold) 100%);
  border: 1px solid var(--gifts-gold);
}

/* Illustration frame — replaces the old placeholder/fallback image pattern now that
   real artwork exists at www/assets/gifts/svgs (undraw.co illustrations, recolored to
   the coral accent). Soft blob background behind the SVG for visual depth. */
.gifts-illustration-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 20px;
}
.gifts-illustration-frame::before {
  content: '';
  position: absolute;
  inset: 8%;
  background: radial-gradient(ellipse at center, var(--gifts-cream-soft) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}
.gifts-illustration-frame img,
.gifts-illustration-frame svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 420px;
}

.gifts-occasion-card .gifts-occasion-illustration {
  width: 100%;
  max-width: 150px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 16px;
}

/* "Shop by Occasion" visual strip */
.gifts-occasion-strip-card {
  background: var(--gifts-surface);
  border: 1px solid var(--gifts-border);
  border-radius: 14px;
  padding: 20px 14px;
  text-align: center;
  height: 100%;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gifts-occasion-strip-card:hover {
  transform: translateY(-4px);
  border-color: var(--gifts-coral);
  box-shadow: 0 12px 26px rgba(46, 36, 32, 0.1);
}
.gifts-occasion-strip-card img {
  width: 100%;
  max-width: 96px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 10px;
}
.gifts-occasion-strip-card span {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--gifts-espresso);
}

.gifts-empty-state img {
  width: 100%;
  max-width: 180px;
  height: auto;
  margin-bottom: 16px;
}

.gifts-modal-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 6px;
}

/* Vendor tenant/shop banner — named .gifts-shop-banner (not .gifts-vendor-banner,
   which is already the small <img> strip inside .gifts-vendor-card on the browse
   grid) to avoid two unrelated things sharing one class. */
.gifts-shop-banner {
  background: var(--gifts-surface);
  border-bottom: 1px solid var(--gifts-border);
  padding: 40px 0;
}
.gifts-shop-banner-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}
.gifts-shop-banner-logo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid var(--gifts-border);
  background: var(--gifts-cream-soft);
  flex-shrink: 0;
}
.gifts-shop-banner h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 6px;
}
.gifts-shop-banner p {
  color: var(--gifts-muted);
  max-width: 640px;
  margin-bottom: 0;
}

/* Product / gift-package cards on the vendor shop page */
.gifts-product-card {
  background: var(--gifts-surface);
  border: 1px solid var(--gifts-border);
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gifts-product-card:hover {
  transform: translateY(-4px);
  border-color: var(--gifts-coral);
  box-shadow: 0 14px 30px rgba(58, 46, 42, 0.1);
}
.gifts-product-card.gifts-package-card {
  border-color: var(--gifts-gold);
}
[id^="gifts-product-"], [id^="gifts-package-"] {
  scroll-margin-top: 90px;
}
@keyframes gifts-highlight-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(221, 92, 83, 0); }
  25% { box-shadow: 0 0 0 6px rgba(221, 92, 83, 0.35); }
}
.gifts-just-arrived .gifts-product-card {
  animation: gifts-highlight-pulse 1.2s ease-out 2;
}
.gifts-portfolio-slider {
  position: relative;
  overflow: hidden;
  padding: 30px 0 40px;
}
.gifts-portfolio-track {
  display: flex;
  align-items: center;
  width: max-content;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.gifts-portfolio-slide {
  flex: 0 0 auto;
  width: 200px;
  height: 220px;
  margin: 0 12px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transform: scale(0.82);
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.7s ease, box-shadow 0.7s ease;
  box-shadow: 0 6px 16px rgba(58, 46, 42, 0.08);
}
.gifts-portfolio-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gifts-portfolio-slide.active {
  opacity: 1;
  transform: scale(1.25);
  z-index: 2;
  box-shadow: 0 20px 40px rgba(58, 46, 42, 0.25);
}
@media (max-width: 576px) {
  .gifts-portfolio-slide { width: 140px; height: 160px; margin: 0 8px; }
  .gifts-portfolio-slide.active { transform: scale(1.18); }
}
.gifts-portfolio-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(30, 22, 20, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 40px;
}
.gifts-portfolio-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}
.gifts-portfolio-lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.gifts-portfolio-lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gifts-portfolio-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.28);
}
.gifts-preview-card {
  background: var(--gifts-surface);
  border: 1px solid var(--gifts-border);
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gifts-preview-card:hover {
  transform: translateY(-4px);
  border-color: var(--gifts-coral);
  box-shadow: 0 14px 30px rgba(58, 46, 42, 0.1);
  color: inherit;
}
.gifts-preview-card .gifts-product-details {
  padding: 14px;
}
.gifts-preview-card .gifts-product-title {
  margin-bottom: 4px;
}
.gifts-preview-card-media,
.gifts-preview-card-title-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.gifts-preview-card-title-link:hover {
  color: var(--gifts-coral-dark);
}
.gifts-product-image-wrap {
  position: relative;
  height: 370px;
  background: var(--gifts-cream-soft);
}
.gifts-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gifts-product-badge {
  position: absolute;
  top: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.gifts-product-badge.gifts-badge-out { left: 10px; background: rgba(46, 36, 32, 0.75); }
.gifts-product-badge.gifts-badge-delivery { right: 10px; background: var(--gifts-coral); }
.gifts-product-badge.gifts-badge-package { left: 10px; background: var(--gifts-gold-dark); }
.gifts-wishlist-toggle-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--gifts-espresso);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease, color 0.15s ease;
}
.gifts-wishlist-toggle-btn:hover { transform: scale(1.08); }
.gifts-wishlist-toggle-btn.is-wishlisted { color: var(--gifts-coral); }
.gifts-product-details {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.gifts-product-title {
  font-size: 1rem;
  margin-bottom: 6px;
}
.gifts-product-desc {
  color: var(--gifts-muted);
  font-size: 0.85rem;
  margin-bottom: 12px;
  flex: 1 1 auto;
}
.gifts-package-includes {
  color: var(--gifts-muted);
  font-size: 0.8rem;
  margin-bottom: 12px;
}
.gifts-package-includes strong {
  color: var(--gifts-espresso);
}
.gifts-voucher-card {
  background: linear-gradient(135deg, var(--gifts-coral) 0%, var(--gifts-coral-dark) 55%, var(--gifts-gold-dark) 130%);
  border-radius: 14px;
  padding: 26px 22px;
  color: #fff;
  cursor: pointer;
  height: 100%;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(193, 72, 64, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gifts-voucher-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(193, 72, 64, 0.32);
}
.gifts-voucher-card-preview {
  cursor: default;
  min-height: auto;
  padding: 20px;
}
.gifts-voucher-card-preview:hover {
  transform: none;
}
.gifts-voucher-issuer {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 8px;
}
.gifts-voucher-amount {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.gifts-voucher-label {
  font-size: 0.85rem;
  opacity: 0.9;
  margin-bottom: 14px;
}
.gifts-voucher-cta {
  font-size: 0.78rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 6px 14px;
  width: fit-content;
}
.gifts-product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.gifts-product-price {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--gifts-coral-dark);
  font-size: 1.05rem;
}
.gifts-product-stock {
  font-size: 0.78rem;
  white-space: nowrap;
}
.gifts-product-stock.in-stock { color: #4a8b5c; }
.gifts-product-stock.out-of-stock { color: #b3433c; }
.gifts-product-options {
  margin-bottom: 12px;
}
.gifts-product-option {
  margin-bottom: 8px;
}
.gifts-product-option label {
  display: block;
  color: var(--gifts-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.gifts-product-option-select {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--gifts-border);
  background-color: var(--gifts-surface);
  color: var(--gifts-espresso);
  font-size: 0.85rem;
  padding: 0 12px;
}
.gifts-product-action {
  margin-top: auto;
}

/* Cart modal + floating cart button — themes the markup cart-api.js (shared,
   unmodified) generates into #cartItems: .cart-item-card, .quantity-controls,
   .remove-item. Scoped under .gifts-page so it never touches other sectors. */
.gifts-page #cartModal .modal-content {
  border: none;
  border-radius: 16px;
  background: var(--gifts-surface);
}
.gifts-page #cartModal .btn-close {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 10;
  border-radius: 50%;
}
.gifts-page .cart-vendor-heading {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gifts-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 16px 0 8px;
}
.gifts-page .cart-vendor-heading:first-child {
  margin-top: 0;
}
.gifts-page .cart-item-card {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px 15px;
  border: 1px solid var(--gifts-border);
  border-radius: 12px;
  background: var(--gifts-cream);
}
.gifts-page .cart-item-card:last-child {
  margin-bottom: 0;
}
.gifts-page .cart-item-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 15px;
  border: 1px solid var(--gifts-border);
  flex-shrink: 0;
}
.gifts-page .cart-item-details {
  flex: 1 1 auto;
  min-width: 0;
}
.gifts-page .cart-item-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gifts-espresso);
}
/* Wraps the image/title when the cart line links back to its product/package page
   (see cart-api.js's getItemDetailUrl) - resets link defaults so it reads the same
   as the plain, unlinked markup it replaces. */
.gifts-page .cart-item-image-link,
.gifts-page .cart-item-title-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.gifts-page .cart-item-image-link {
  flex-shrink: 0;
  margin-right: 15px;
}
.gifts-page .cart-item-image-link .cart-item-image {
  margin-right: 0;
}
.gifts-page .cart-item-title-link:hover .cart-item-title {
  color: var(--gifts-coral-dark);
}
.gifts-page .cart-item-variant {
  margin: 0 0 4px 0;
}
.gifts-page .cart-item-price {
  margin: 0 0 4px 0;
  color: var(--gifts-muted);
  font-size: 13px;
}
.gifts-page .cart-item-total {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--gifts-coral-dark) !important;
}
.gifts-page .quantity-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 12px;
  flex-shrink: 0;
}
.gifts-page .quantity-controls input {
  width: 46px;
  text-align: center;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--gifts-border);
  font-size: 14px;
  padding: 0;
}
.gifts-page .quantity-controls button {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--gifts-border);
  background: var(--gifts-surface);
  color: var(--gifts-espresso);
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.gifts-page .quantity-controls button:hover {
  background: var(--gifts-cream-soft);
  border-color: var(--gifts-coral);
  color: var(--gifts-coral);
}
.gifts-page .remove-item {
  border: 1px solid rgba(221, 92, 83, 0.3);
  color: var(--gifts-coral-dark);
  background: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.gifts-page .remove-item:hover {
  background: var(--gifts-coral);
  border-color: var(--gifts-coral);
  color: #fff;
}
.gifts-page .cart-summary {
  background: var(--gifts-cream-soft);
  border-radius: 10px;
  padding: 15px;
}

.gifts-floating-cart {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
}
.gifts-floating-cart button,
.gifts-floating-cart a {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gifts-coral);
  color: #fff;
  border: none;
  box-shadow: 0 8px 20px rgba(221, 92, 83, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
  transition: transform 0.2s ease, background 0.2s ease;
  text-decoration: none;
}
.gifts-floating-cart button:hover,
.gifts-floating-cart a:hover {
  transform: scale(1.05);
  background: var(--gifts-coral-dark);
  color: #fff;
}
.gifts-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--gifts-gold-dark);
  color: #fff;
  border-radius: 50%;
  min-width: 20px;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid var(--gifts-surface);
  padding: 1px 4px;
}

.gifts-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
}
.gifts-pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: 10px;
  border: 1px solid var(--gifts-border);
  color: var(--gifts-espresso);
  text-decoration: none;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gifts-pagination li a:hover {
  border-color: var(--gifts-coral);
  color: var(--gifts-coral);
}
.gifts-pagination li.active a {
  background: var(--gifts-coral);
  border-color: var(--gifts-coral);
  color: #fff;
}

/* Mobile: the desktop values above (120px hero padding, 20px nav gaps, 380px
   illustration min-height) were tuned for wide viewports and left huge dead
   space / cramped nav on phones since no breakpoint existed for this page. */
@media (max-width: 767.98px) {
  .gifts-hero {
    padding: 48px 0 44px;
  }

  .gifts-hero-giftmark {
    font-size: 80px;
    opacity: 0.3;
  }

  .gifts-nav-brand {
    font-size: 1.1rem;
  }

  .gifts-nav-actions {
    gap: 10px;
  }

  .gifts-nav-actions .btn {
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  .gifts-nav-signin span {
    display: none;
  }
  .gifts-nav-signin {
    font-size: 1.05rem;
  }

  .gifts-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .gifts-hero-cta .btn {
    width: 100%;
    text-align: center;
  }

  .gifts-search-widget {
    padding: 18px;
    margin-top: 24px;
  }

  .gifts-illustration-frame {
    min-height: 200px;
    padding: 10px;
  }

  .gifts-section {
    padding: 48px 0;
  }

  .gifts-shop-banner {
    padding: 28px 0;
  }

  .gifts-shop-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .gifts-floating-cart {
    bottom: 16px;
    right: 16px;
  }

  .gifts-floating-cart button {
    width: 48px;
    height: 48px;
    font-size: 17px;
  }

  .gifts-page .cart-item-card {
    flex-wrap: wrap;
  }

  .gifts-page .quantity-controls {
    margin-left: 79px;
  }

}
.gifts-section li a {
  color: var(--gifts-coral);
}

/* Swatch-style attribute picker for products that track stock per combination - shared
   by product-details.php and productCard.php, wired by /js/product-variant-picker.js. */
.variant-picker-attr {
  margin-bottom: 14px;
}

.variant-picker-attr label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--gifts-espresso);
  margin-bottom: 6px;
}

.variant-picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.variant-picker-chip {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--gifts-border);
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.variant-picker-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .15);
  flex-shrink: 0;
}

.variant-picker-chip:hover:not(:disabled) {
  border-color: var(--gifts-coral);
}

.variant-picker-chip.is-selected {
  border-color: var(--gifts-coral);
  background: var(--gifts-coral);
  color: #fff;
}

.variant-picker-chip:disabled {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.variant-picker-status {
  font-size: 12px;
  color: var(--gifts-muted, #6c757d);
  margin-top: 4px;
  min-height: 16px;
}

.variant-picker-status.is-warning {
  color: #b7791f;
}

.variant-picker-status.is-error {
  color: #c0392b;
}

.gifts-pager {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.gifts-pager .page-link {
  color: var(--gifts-espresso, #3a2a20);
  border-color: var(--gifts-border, #e5ddd3);
}

.gifts-pager .page-item.active .page-link {
  background-color: var(--gifts-coral, #e8615a);
  border-color: var(--gifts-coral, #e8615a);
  color: #fff;
}

.gifts-pager .page-link:hover {
  background-color: var(--gifts-cream-soft, #faf3ea);
  color: var(--gifts-coral-dark, #c94a44);
}

/* Product/package detail page image gallery - shared by product-details.php and
   package-details.php, previously duplicated inline in each. */
.gifts-pd-gallery-main { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--gifts-surface); }
.gifts-pd-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gifts-pd-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gifts-pd-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; opacity: 0.7; }
.gifts-pd-thumbs img.active { border-color: var(--gifts-coral); opacity: 1; }