/* ============================================================
   GoGiftings V29 — Universal Card Centre Fix (Final)

   Targets BOTH card types:
   A) Static listing cards:  .product-card.gg-unified-card
                              └─ .product-card-body > h4, .price, .meta, .gg-card-actions
   B) Dynamic JS cards:      .product-card.dynamic-card  (and .featured-bouquets-row .product-card)
                              └─ h4, .price, .meta, .quick-add  directly inside article

   Fixes:
     1. Name / price / delivery: all centred
     2. Add to Cart: full-width, centred
     3. Variant strip (product page): vertical cards — name never clips
     4. Product detail title: justified, correct size, no crop
   ============================================================ */


/* ═══════════════════════════════════════════════════════════
   SECTION A — DYNAMIC & FEATURED CARDS
   (product-card WITHOUT gg-unified-card / product-card-body)
   ═══════════════════════════════════════════════════════════ */

/* Card shell: centre all direct children */
html body .product-card:not(.gg-unified-card),
html body .dynamic-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

/* Title inside dynamic card */
html body .product-card:not(.gg-unified-card) h4,
html body .dynamic-card h4 {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.38 !important;
  color: #1f1422 !important;
  text-align: center !important;
  width: 100% !important;
  margin: 10px 0 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

/* Price: centred */
html body .product-card:not(.gg-unified-card) .price,
html body .dynamic-card .price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 4px !important;
  font-weight: 900 !important;
  color: #f62780 !important;
}

/* Meta / delivery: centred */
html body .product-card:not(.gg-unified-card) .meta,
html body .dynamic-card .meta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #138c40 !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 0 12px !important;
}

/* Add to cart button: full-width, centred */
html body .product-card:not(.gg-unified-card) .quick-add,
html body .dynamic-card .quick-add {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f62780 0%, #5a1a93 100%) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  box-shadow: 0 5px 16px rgba(246,39,128,.22) !important;
  padding: 0 12px !important;
  white-space: nowrap !important;
  margin: auto 0 0 0 !important;   /* push to bottom */
  transition: opacity .16s, transform .16s !important;
}
html body .product-card:not(.gg-unified-card) .quick-add:hover,
html body .dynamic-card .quick-add:hover {
  opacity: .9 !important;
  transform: translateY(-1px) !important;
}

/* Thumb: keep rounded and full-width */
html body .product-card:not(.gg-unified-card) .thumb-wrap,
html body .dynamic-card .thumb-wrap {
  width: 100% !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}


/* ═══════════════════════════════════════════════════════════
   SECTION B — STATIC LISTING CARDS (.gg-unified-card)
   ═══════════════════════════════════════════════════════════ */

/* Card body: centre all children */
html body .gg-unified-card .product-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  align-items: center !important;
  text-align: center !important;
  padding: 14px 12px !important;
  gap: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Title */
html body .gg-unified-card h4 {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.38 !important;
  color: #1f1422 !important;
  text-align: center !important;
  margin: 0 0 7px !important;
  width: 100% !important;
  min-height: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
html body .gg-unified-card h4 a {
  color: inherit !important;
  text-decoration: none !important;
}
html body .gg-unified-card h4 a:hover { color: #f62780 !important; }

/* Price */
html body .gg-unified-card .price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #f62780 !important;
  margin: 0 0 5px !important;
  width: 100% !important;
}
html body .gg-unified-card .price .currency-text {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #9a7e8e !important;
  align-self: center !important;
}

/* Meta */
html body .gg-unified-card .meta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #138c40 !important;
  margin: 0 0 12px !important;
  width: 100% !important;
  text-align: center !important;
}
html body .gg-unified-card .meta::before {
  content: '●' !important;
  font-size: 7px !important;
  color: #22c55e !important;
  flex-shrink: 0 !important;
}
html body .gg-unified-card .meta b { color: #0a6e35 !important; }

/* Buttons: stacked full-width, pushed to bottom */
html body .gg-unified-card .gg-card-actions {
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  align-items: center !important;
  width: 100% !important;
}

/* Add to Cart */
html body .gg-unified-card .quick-add,
html body .gg-unified-card .gg-add-btn {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f62780 0%, #5a1a93 100%) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 900 !important;
  font-size: 12.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  box-shadow: 0 5px 16px rgba(246,39,128,.22) !important;
  padding: 0 10px !important;
  margin: 0 !important;
  transition: opacity .16s, transform .16s !important;
}
html body .gg-unified-card .quick-add:hover,
html body .gg-unified-card .gg-add-btn:hover {
  opacity: .9 !important; transform: translateY(-1px) !important;
}

/* View button */
html body .gg-unified-card .gg-view-btn {
  width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  background: #fff0f7 !important;
  color: #f62780 !important;
  border: 1.5px solid #fad0e6 !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

/* Mobile adjustments for both card types */
@media (max-width: 540px) {
  html body .product-card:not(.gg-unified-card) h4,
  html body .dynamic-card h4,
  html body .gg-unified-card h4 { font-size: 11.5px !important; }

  html body .product-card:not(.gg-unified-card) .quick-add,
  html body .dynamic-card .quick-add,
  html body .gg-unified-card .quick-add,
  html body .gg-unified-card .gg-add-btn {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 11px !important;
    border-radius: 9px !important;
  }
  html body .gg-unified-card .product-card-body { padding: 10px 8px !important; }
}


/* ═══════════════════════════════════════════════════════════
   SECTION C — VARIANT STRIP (product detail page)
   Vertical card layout — image top, name+price below.
   Name can now wrap to 2 lines — never clips to "Pink Bea..."
   ═══════════════════════════════════════════════════════════ */

html body .product-summary .variant-strip,
html body .product-summary .variant-strip-clean {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow-x: visible !important;
  flex: unset !important;
  padding-bottom: 0 !important;
}

html body .product-summary .variant-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 8px !important;
  border-radius: 14px !important;
  min-width: 0 !important;
  flex: unset !important;
  width: auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body .product-summary .variant-card .thumb {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #fff7fb !important;
  border: 1px solid #f0dcea !important;
  margin-bottom: 8px !important;
  display: block !important;
  flex-shrink: 0 !important;
}
html body .product-summary .variant-card .thumb img,
html body .product-summary .variant-card img.variant-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* show full flower, no cropping */
  object-position: center !important;
  display: block !important;
  padding: 4px !important;          /* small breathing room inside thumb */
  background: #fff !important;
}

html body .product-summary .variant-card .variant-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Name: 2-line wrap — NEVER clips */
html body .product-summary .variant-card .variant-name {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #1f1422 !important;
  white-space: normal !important;
  word-break: break-word !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.3 !important;
}

html body .product-summary .variant-card .variant-copy strong,
html body .product-summary .variant-card strong {
  font-size: 12px !important;
  font-weight: 900 !important;
  color: #f62780 !important;
  display: block !important;
  line-height: 1.2 !important;
}

html body .product-summary .variant-card.active {
  border-color: #f62780 !important;
  background: linear-gradient(135deg, #fff, #fff6fb) !important;
  box-shadow: 0 0 0 2px rgba(246,39,128,.18), 0 12px 28px rgba(69,31,66,.1) !important;
}

@media (max-width: 760px) {
  html body .product-summary .variant-strip,
  html body .product-summary .variant-strip-clean {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    display: grid !important;
    overflow-x: visible !important;
  }
  html body .product-summary .variant-card {
    flex: unset !important;
    width: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   SECTION D — PRODUCT DETAIL TITLE
   Justified, correct size, never cropped
   ═══════════════════════════════════════════════════════════ */

html body .product-summary .title,
html body .product-summary h1.title {
  font-size: clamp(15px, 1.6vw, 20px) !important;  /* noticeably smaller & refined */
  line-height: 1.32 !important;
  font-weight: 800 !important;
  color: #1f1020 !important;
  letter-spacing: -.015em !important;
  text-align: left !important;         /* left-align — justify fails on 1-line titles */
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow: visible !important;
  white-space: normal !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  margin: 0 0 14px !important;
}

@media (max-width: 760px) {
  html body .product-summary .title,
  html body .product-summary h1.title {
    font-size: clamp(14px, 4.5vw, 19px) !important;
  }
}

/* ============================================================
   V30.1 HOTFIX — Product title clipping on product.html
   Keeps the product summary safely in the right grid column and
   gives the title its own breathing room so the first letters never
   get hidden by neighboring product image/card overflow.
   ============================================================ */
html body .product-page {
  align-items: start !important;
}

html body .product-page > .gallery-rail {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  z-index: 1 !important;
}

html body .product-page > .main-visual {
  grid-column: 2 !important;
  grid-row: 1 !important;
  z-index: 1 !important;
}

html body .product-page > .flower-promises-row {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

html body .product-page > .product-summary {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  overflow: visible !important;
  padding-left: clamp(22px, 1.8vw, 32px) !important;
  padding-right: clamp(22px, 1.8vw, 32px) !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 3 !important;
  transform: none !important;
}

html body .product-page > .product-summary .title,
html body .product-page > .product-summary h1.title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
  transform: none !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

@media (max-width: 1180px) {
  html body .product-page > .gallery-rail,
  html body .product-page > .main-visual,
  html body .product-page > .flower-promises-row,
  html body .product-page > .product-summary {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html body .product-page > .product-summary {
    padding-left: clamp(18px, 4vw, 28px) !important;
    padding-right: clamp(18px, 4vw, 28px) !important;
  }
}

/* ============================================================
   V30.2 HOTFIX — Stronger product title typography
   Makes the product name bolder, clearer, and more premium while
   preserving the anti-crop spacing from V30.1.
   ============================================================ */
html body.product-detail-page .product-page > .product-summary .title,
html body .product-page > .product-summary h1.title,
html body .product-summary .title {
  font-weight: 1000 !important;
  letter-spacing: -0.035em !important;
  color: #17111b !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.72) !important;
  font-size: clamp(24px, 2.15vw, 34px) !important;
  line-height: 1.12 !important;
}

@media (max-width: 760px) {
  html body.product-detail-page .product-page > .product-summary .title,
  html body .product-page > .product-summary h1.title,
  html body .product-summary .title {
    font-size: clamp(22px, 6.2vw, 30px) !important;
    line-height: 1.14 !important;
  }
}

/* === V30.4 client polish: unified nav hover + compact events hero === */
.navbar a,
header .navbar a,
.navbar .container > a {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #5b5162 !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.navbar a:hover,
.navbar a:focus-visible,
.navbar a.active,
header .navbar a:hover,
header .navbar a:focus-visible,
header .navbar a.active {
  background: linear-gradient(135deg, #f62780 0%, #74158f 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px rgba(116, 21, 143, .20), 0 8px 18px rgba(246, 39, 128, .18) !important;
  transform: none !important;
}
.navbar a:hover *,
.navbar a:focus-visible *,
.navbar a.active * {
  color: #fff !important;
}
body.gg-listing-page .navbar a.active,
body.gg-category-flowers .navbar a[href="listing.html"],
body.gg-category-cakes .navbar a[href="listing.html"],
body.gg-category-personalized .navbar a[href="listing.html"],
body.gg-category-personalised .navbar a[href="listing.html"] {
  background: transparent !important;
  color: #5b5162 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.gg-category-flowers .navbar a[href*="category=flowers"],
body.gg-category-cakes .navbar a[href*="category=cakes"],
body.gg-category-personalized .navbar a[href*="category=personalized"],
body.gg-category-personalised .navbar a[href*="category=personalised"],
body.gg-category-personalized .navbar a[href*="category=personalised"],
body.gg-category-personalised .navbar a[href*="category=personalized"] {
  background: linear-gradient(135deg, #f62780 0%, #74158f 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px rgba(116, 21, 143, .20), 0 8px 18px rgba(246, 39, 128, .18) !important;
}
@media (max-width: 980px) {
  .navbar a,
  header .navbar a,
  .navbar .container > a {
    min-height: 40px !important;
    padding: 9px 15px !important;
    background: #fff !important;
    border-color: rgba(234, 216, 231, .85) !important;
    font-size: 13px !important;
  }
  .navbar a:hover,
  .navbar a:focus-visible,
  .navbar a.active,
  header .navbar a:hover,
  header .navbar a:focus-visible,
  header .navbar a.active {
    background: linear-gradient(135deg, #f62780 0%, #74158f 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
  }
}

/* === V30.7 NAV VISIBILITY + FIT HOTFIX ===
   Keeps Influencer and Events visible on desktop by making the category bar
   compact and evenly distributed like the home-page navigation. */
header .navbar,
.navbar {
  overflow: visible !important;
}
header .navbar > .container,
.navbar > .container,
.header-main .navbar .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: clamp(6px, .8vw, 14px) !important;
  width: min(100%, 1580px) !important;
  max-width: 1580px !important;
  margin-inline: auto !important;
  padding-inline: clamp(22px, 3.2vw, 68px) !important;
  overflow: visible !important;
}
header .navbar a,
.navbar a,
.navbar .container > a,
.navbar a[href="influencer.html"],
.navbar a[href="events.html"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  padding: 10px clamp(8px, 1vw, 16px) !important;
  font-size: clamp(13px, .95vw, 16px) !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}
header .navbar a:hover,
header .navbar a:focus-visible,
header .navbar a.active,
.navbar a:hover,
.navbar a:focus-visible,
.navbar a.active {
  background: linear-gradient(135deg, #f62780 0%, #74158f 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(116, 21, 143, .18), 0 7px 16px rgba(246, 39, 128, .16) !important;
}
@media (max-width: 1180px) {
  header .navbar > .container,
  .navbar > .container,
  .header-main .navbar .container {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
    padding-inline: 18px !important;
  }
  header .navbar a,
  .navbar a,
  .navbar .container > a {
    flex: 0 0 auto !important;
  }
}