/* =========================================================
   GoGiftings — Modern UI Enhancement v2025
   2025 market-trend refresh: refined typography, warm palette,
   elevated product cards, HD image treatment
   ========================================================= */

/* --- Google Fonts ---------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* --- Design Tokens --------------------------------------- */
:root {
  /* Brand palette – 2025 warm rose × deep plum */
  --brand:       #e8337c;
  --brand-hover: #d01f6a;
  --brand-2:     #6b2060;
  --brand-2h:    #561850;
  --brand-soft:  #fde8f1;
  --brand-mid:   #c5608e;

  /* Backgrounds */
  --bg:       #fdf8fb;
  --bg-alt:   #f9f1f7;
  --card:     #ffffff;
  --soft:     #f6edf4;
  --soft-2:   #f0e3ef;

  /* Text */
  --text:     #1a1625;
  --muted:    #6e6476;
  --light:    #9b93a3;

  /* Borders */
  --line:     #e8d5e4;
  --line-2:   #f0e2ee;

  /* Accent green */
  --green:    #179a52;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(107,32,96,.07);
  --shadow:     0 8px 28px rgba(107,32,96,.10);
  --shadow-lg:  0 18px 48px rgba(107,32,96,.14);
  --shadow-card: 0 4px 16px rgba(107,32,96,.08);

  /* Radii */
  --radius:    20px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  /* Gradient */
  --gradient: linear-gradient(135deg, var(--brand), var(--brand-2));
  --gradient-soft: linear-gradient(135deg, #fde8f1, #ede0f5);

  /* Fonts */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* --- Base Typography Override ---------------------------- */
html, body {
  font-family: var(--font-body) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.18;
}

/* Display headings (hero h1) */
.hero-copy h1,
.hero-copy-image h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(32px, 3.4vw, 50px) !important;
  line-height: 1.1 !important;
  color: var(--text) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}

/* --- Topbar --------------------------------------------- */
.topbar {
  background: linear-gradient(90deg, var(--brand-2) 0%, #8b2c7e 50%, var(--brand) 100%) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}

/* --- Header -------------------------------------------- */
.header-main {
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 var(--line-2) !important;
}

.logo {
  color: var(--brand-2) !important;
  font-family: var(--font-body) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}

.logo-mark {
  background: linear-gradient(135deg, #ff92c3 0%, var(--brand) 50%, var(--brand-2) 100%) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(232,51,124,.3) !important;
}

/* Search bar */
.search, .search-modern {
  border: 1.5px solid var(--line) !important;
  border-radius: 16px !important;
  transition: border-color .2s, box-shadow .2s;
}
.search:focus-within, .search-modern:focus-within {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(232,51,124,.12) !important;
}
.search button {
  background: var(--gradient) !important;
  border-radius: 0 14px 14px 0 !important;
}

/* Icon buttons */
.icon-btn {
  color: var(--text) !important;
  font-weight: 600 !important;
  transition: color .15s;
}
.icon-btn:hover { color: var(--brand) !important; }
.icon-btn .badge {
  background: var(--brand) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* Navbar */
.navbar {
  background: #fff !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}
.navbar a {
  color: var(--muted) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: color .15s;
  white-space: nowrap;
}
.navbar a:hover, .navbar a.active {
  color: var(--brand) !important;
}
.nav-pill {
  background: var(--gradient) !important;
  color: #fff !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.nav-pill:hover { opacity: .9 !important; }

/* --- Buttons ------------------------------------------- */
.btn {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  transition: all .2s !important;
  letter-spacing: .01em;
}
.btn-primary {
  background: var(--gradient) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(232,51,124,.28) !important;
}
.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(232,51,124,.38) !important;
}
.btn-secondary {
  background: #fff !important;
  color: var(--text) !important;
  border: 1.5px solid var(--line) !important;
}
.btn-secondary:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* --- Hero Section --------------------------------------- */
.hero-card, .hero-card-image {
  background: linear-gradient(135deg, #fff 0%, #fdf0f8 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

.badge-pill {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  border-color: var(--line) !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}

/* Hero floating card */
.hero-floating-card {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(232,51,124,.15) !important;
  box-shadow: var(--shadow) !important;
  border-radius: 16px !important;
  font-family: var(--font-body) !important;
}

/* --- Why Panel ------------------------------------------ */
.why-panel, .why-panel-compact {
  background: linear-gradient(160deg, #fff 0%, #fdf0f8 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}
.why-mini {
  background: var(--soft) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 14px !important;
  transition: background .2s;
}
.why-mini:hover { background: var(--brand-soft) !important; }

/* AI mini banner */
.ai-mini-banner {
  background: var(--gradient) !important;
  border-radius: 16px !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(107,32,96,.22) !important;
}
.ai-mini-banner .btn {
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}

/* --- Stat Strip ----------------------------------------- */
.stat-strip {
  gap: 10px !important;
  margin-top: 20px !important;
}
.stat-item {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  padding: 18px 14px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .2s, box-shadow .2s;
}
.stat-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-card) !important;
}
.stat-item strong { color: var(--text) !important; font-weight: 700 !important; }

/* --- Occasion Row --------------------------------------- */
.occasion-card {
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  padding: 16px 10px !important;
  transition: all .2s !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--text) !important;
}
.occasion-card:hover {
  border-color: var(--brand) !important;
  background: var(--brand-soft) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(232,51,124,.14) !important;
}
.oc-ico {
  background: linear-gradient(135deg, #fff8fb, var(--brand-soft)) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: var(--shadow-sm) !important;
  font-size: 28px !important;
  width: 56px !important;
  height: 56px !important;
}

/* --- Section Heads -------------------------------------- */
.section-head h2 {
  font-size: clamp(22px, 2.4vw, 30px) !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}
.section-head .pink { color: var(--brand) !important; font-weight: 700 !important; }

/* --- Product Cards (CORE FIX) --------------------------- */
/* Switch to 4-column grid for better airy layout */
.product-row {
  grid-template-columns: repeat(4, 1fr) !important;
}

.product-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  padding: 12px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .22s, box-shadow .22s !important;
  overflow: hidden;
}
.product-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow) !important;
}

/* Product thumbnail – show images properly */
.product-thumb {
  aspect-ratio: 1/1 !important;
  border-radius: 14px !important;
  background: var(--soft) !important;
  overflow: hidden !important;
  display: block !important;
  border: 1px solid var(--line-2) !important;
}
.product-thumb img,
.product-thumb .photo-fit,
.product-thumb .gg-product-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .35s ease !important;
  display: block !important;
  border-radius: 14px !important;
}
.product-card:hover .product-thumb img,
.product-card:hover .product-thumb .photo-fit,
.product-card:hover .product-thumb .gg-product-img {
  transform: scale(1.06) !important;
}

/* Modern product card title */
.product-card h4 {
  margin: 12px 0 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  min-height: 38px !important;
  color: var(--text) !important;
}

/* Price */
.price { font-size: 17px !important; font-weight: 800 !important; }
.sale-current { color: var(--brand) !important; }
.sale-original { color: var(--light) !important; text-decoration: line-through !important; }

/* Meta delivery line */
.meta {
  font-size: 11.5px !important;
  color: var(--green) !important;
  margin-top: 6px !important;
  font-weight: 600 !important;
}

/* Product tags */
.tag {
  background: var(--gradient) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
  box-shadow: 0 3px 8px rgba(232,51,124,.3) !important;
}

/* --- Listing Grid --------------------------------------- */
.listing-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}

/* --- Sidebar Filter ------------------------------------- */
.sidebar {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
}
.filter-group h4 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-bottom: 12px !important;
}
.filter-group { border-bottom-color: var(--line) !important; }

/* --- Banner Row ----------------------------------------- */
.banner {
  background: linear-gradient(135deg, #fff, #fdf0f8) !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.banner:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-card) !important;
}
.dark-offer-banner {
  background: linear-gradient(135deg, var(--brand-2) 0%, #3d1145 100%) !important;
  color: #fff !important;
}
.dark-offer-banner h3, .dark-offer-banner p { color: #fff !important; }
.banner h3 {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}

/* --- Cards & Panels ------------------------------------- */
.card, .panel, .soft-panel {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* --- Addon Grid (product thumbnails with images) -------- */
.addon-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all .2s !important;
}
.addon-card:hover {
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-card) !important;
  transform: translateY(-3px) !important;
}

/* --- Category Cards ------------------------------------- */
.side-category-card {
  background: var(--soft) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: 14px !important;
  transition: all .18s !important;
}
.side-category-card:hover {
  background: var(--brand-soft) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* --- Forms & Inputs ------------------------------------- */
.sort-select, .select,
input[type="text"], input[type="email"],
input[type="tel"], input[type="date"],
input[type="search"], textarea {
  border: 1.5px solid var(--line) !important;
  border-radius: 14px !important;
  font-family: var(--font-body) !important;
  background: #fff !important;
  transition: border-color .15s, box-shadow .15s;
}
.sort-select:focus, .select:focus,
input:focus, textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(232,51,124,.1) !important;
  outline: none !important;
}

/* --- Subscription Cards --------------------------------- */
.sub-ref-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  transition: all .22s !important;
}
.sub-ref-card:hover {
  border-color: var(--brand) !important;
  box-shadow: var(--shadow) !important;
  transform: translateY(-4px) !important;
}
.sub-ref-image {
  display: block !important;
  overflow: hidden !important;
  aspect-ratio: 4/3 !important;
  border-radius: 14px 14px 0 0 !important;
  background: var(--soft) !important;
}
.sub-ref-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform .3s !important;
}
.sub-ref-card:hover .sub-ref-image img { transform: scale(1.05) !important; }

/* --- Blog/Gift Guide Cards ------------------------------ */
.blog-card, .gift-guide-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .22s, box-shadow .22s !important;
}
.blog-card:hover, .gift-guide-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow) !important;
}

/* --- Footer --------------------------------------------- */
footer, .footer {
  background: linear-gradient(175deg, var(--bg-alt) 0%, #f4e8f5 100%) !important;
  border-top: 1px solid var(--line) !important;
  font-family: var(--font-body) !important;
}

/* --- Newsletter Input ----------------------------------- */
.newsletter-form input,
#footer-email {
  border: 1.5px solid var(--line) !important;
  border-radius: 14px 0 0 14px !important;
}
.newsletter-form button,
.footer .btn-primary {
  background: var(--gradient) !important;
  border-radius: 0 14px 14px 0 !important;
}

/* --- Location Modal ------------------------------------- */
.location-modal {
  background: #fff !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 60px rgba(107,32,96,.18) !important;
  border: 1px solid var(--line) !important;
}

/* --- Checkout / Cards ----------------------------------- */
.checkout-card, .order-summary-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm) !important;
}

/* --- Trust/promise chips -------------------------------- */
.product-promise, .trust-chip, .promise-chip {
  background: var(--soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* --- Review Stars --------------------------------------- */
.star-full, .review-star { color: #f59e0b !important; }

/* --- Preloader ------------------------------------------ */
.preloader-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: 28px !important;
}
.preloader-brand {
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  color: var(--brand-2) !important;
  letter-spacing: -0.03em;
}
.preloader-progress span {
  background: var(--gradient) !important;
}

/* --- Product Page Hero ---------------------------------- */
.product-gallery-main, .visual-wrap {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* --- Checkout Product thumb ----------------------------- */
.checkout-item .thumb,
.order-item .thumb {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--soft) !important;
  border: 1px solid var(--line-2) !important;
}
.checkout-item .thumb img,
.order-item .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* --- Recommend pill (addon) ----------------------------- */
.recommend-pill {
  background: var(--gradient) !important;
  box-shadow: 0 4px 18px rgba(232,51,124,.28) !important;
}

/* --- Coupon / promo input ------------------------------- */
.coupon-input, .promo-code-input {
  border: 1.5px dashed var(--brand-mid) !important;
  border-radius: 14px !important;
  background: var(--brand-soft) !important;
}

/* --- City pills ----------------------------------------- */
.city-pill {
  border: 1.5px solid var(--line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  transition: all .15s !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}
.city-pill.active, .city-pill:hover {
  background: var(--brand-soft) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* --- Variant cards (product page) ----------------------- */
.variant-card {
  border: 1.5px solid var(--line) !important;
  border-radius: 14px !important;
  transition: border-color .15s !important;
}
.variant-card.active, .variant-card:hover {
  border-color: var(--brand) !important;
}

/* --- Dirham icon sizing --------------------------------- */
.dirham-icon { height: 16px !important; width: auto !important; vertical-align: middle; }
.dirham-price { display: inline-flex !important; align-items: center !important; gap: 3px !important; }

/* --- Scroll behavior ------------------------------------ */
html { scroll-behavior: smooth; }

/* --- Breadcrumb ----------------------------------------- */
.breadcrumb { font-size: 13px !important; color: var(--muted) !important; }
.breadcrumb span { color: var(--brand) !important; font-weight: 600 !important; }

/* --- Account / Dashboard Cards -------------------------- */
.account-card, .dash-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm) !important;
}

/* --- Accordion ------------------------------------------ */
.acc-lite {
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.acc-lite .head {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  border-bottom-color: var(--line) !important;
}

/* --- Toast / Notification ------------------------------- */
.toast, .gg-toast {
  border-radius: 14px !important;
  font-family: var(--font-body) !important;
  box-shadow: var(--shadow) !important;
  border: 1px solid var(--line) !important;
}

/* --- OTP Input (Login) ---------------------------------- */
.otp-input, .otp-box {
  border: 2px solid var(--line) !important;
  border-radius: 14px !important;
  transition: border-color .15s, box-shadow .15s !important;
  font-family: var(--font-body) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-align: center !important;
}
.otp-input:focus, .otp-box:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(232,51,124,.12) !important;
}

/* --- Pagination ----------------------------------------- */
.pagination-btn, .page-btn {
  border: 1.5px solid var(--line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  transition: all .15s !important;
}
.pagination-btn.active, .page-btn.active,
.pagination-btn:hover, .page-btn:hover {
  background: var(--brand-soft) !important;
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}

/* --- Subscription plans --------------------------------- */
.plan-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .22s, box-shadow .22s !important;
}
.plan-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow) !important;
}
.plan-card.featured {
  border: 2px solid var(--brand) !important;
  box-shadow: 0 8px 32px rgba(232,51,124,.18) !important;
}

/* --- AI Assistant ---------------------------------------- */
.ai-chat-bubble {
  font-family: var(--font-body) !important;
  border-radius: 18px !important;
}
.ai-result-card, .result-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all .2s !important;
}
.ai-result-card:hover, .result-card:hover {
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-card) !important;
}

/* --- Result card product image fix ---------------------- */
.result-card .thumb,
.ai-result-card .thumb {
  width: 80px !important;
  height: 80px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--soft) !important;
  flex-shrink: 0 !important;
}
.result-card .thumb img,
.ai-result-card .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* --- Events / Corporate --------------------------------- */
.event-hero {
  background: linear-gradient(135deg, var(--brand-2) 0%, #3d1145 100%) !important;
  border-radius: 24px !important;
}

/* --- GoGiftings Cash card ------------------------------- */
.cash-card {
  background: linear-gradient(135deg, #6b2060 0%, #a83490 100%) !important;
  color: #fff !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow) !important;
}

/* --- Mobile Responsive ---------------------------------- */
@media (max-width: 900px) {
  .listing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .product-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .listing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .product-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .occasion-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .hero-copy h1, .hero-copy-image h1 {
    font-size: 26px !important;
  }
  .stat-strip {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* --- Prod-SVG placeholder replacement ------------------- */
/* If any prod-svg remains (JS not run), give it a nice gradient placeholder */
.prod-svg {
  background: var(--gradient-soft) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.prod-svg::after {
  content: '🌸' !important;
  font-size: 40px !important;
  opacity: .6 !important;
}

/* --- Smooth image load ---------------------------------- */
img {
  transition: transform .35s ease !important;
}

/* ==========================================================
   PATCH v2 — Image visibility, nav hover, price strikethrough
   ========================================================== */

/* --- 1. ALL product images must be visible & square ------ */
.photo-fit,
.gg-product-img,
.product-thumb img,
.product-thumb .photo-fit,
.thumb-wrap img,
.dynamic-card .product-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 14px !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: var(--soft) !important;  /* graceful fallback */
}

/* Force product-thumb to always be square */
.product-thumb {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: var(--soft) !important;
  position: relative !important;
}

/* --- 2. Dynamic product grid consistent sizing ----------- */
.dynamic-product-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 1100px) {
  .dynamic-product-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}
@media (max-width: 760px) {
  .dynamic-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Dynamic card consistent height */
.dynamic-card {
  display: flex !important;
  flex-direction: column !important;
}
.dynamic-card .product-thumb {
  flex-shrink: 0 !important;
}
.dynamic-card h4 {
  flex: 1 !important;
}

/* Add to cart button in dynamic cards */
.quick-add {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
  padding: 11px !important;
  background: var(--gradient) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 12px rgba(232,51,124,.22) !important;
  transition: transform .15s, box-shadow .15s !important;
}
.quick-add:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(232,51,124,.32) !important;
}

/* --- 3. Nav pill hover — keep white text on gradient ----- */
.nav-pill,
.nav-pill:hover,
.nav-pill:focus,
.navbar a.nav-pill,
.navbar a.nav-pill:hover {
  color: #fff !important;
  background: var(--gradient) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
.navbar a.nav-pill:hover {
  box-shadow: 0 4px 14px rgba(232,51,124,.35) !important;
}

/* --- 4. Price — strikethrough for original price --------- */

/* Classes used in HTML (sale-price-pair) */
.sale-original,
.gg-auto-original,
.compare-dirham,
.compare-price,
.price .compare-price {
  text-decoration: line-through !important;
  text-decoration-thickness: 1.5px !important;
  color: var(--light) !important;
  font-size: 0.85em !important;
  font-weight: 500 !important;
  opacity: .75 !important;
}

/* Current / sale price — highlighted */
.sale-current,
.gg-auto-current,
.sale-price,
.sale-price .dirham-price {
  color: var(--brand) !important;
  font-weight: 800 !important;
}

/* Discount price wrapper layout */
.discount-price,
.sale-price-pair {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Discount badge % */
.discount-pct,
.gg-discount-badge {
  background: #fff3f8 !important;
  color: var(--brand) !important;
  border: 1px solid var(--brand-soft) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  vertical-align: middle !important;
}

/* --- 5. Featured Bouquets — all cards same height/ratio -- */
.product-row .product-card {
  display: flex !important;
  flex-direction: column !important;
}
.product-row .product-card .product-thumb {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.product-row .product-card h4 {
  flex: 1 !important;
}

/* Hero images — keep visible */
.hero-banner-photo,
.hero-accent-photo,
.hero-photo-frame img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Listing grid images same treatment */
.listing-grid .product-thumb {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
.listing-grid .product-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  opacity: 1 !important;
}

/* Addon page product images */
.addon-grid .product-thumb,
.addon-card .product-thumb {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}
.addon-grid .product-thumb img,
.addon-card .product-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  display: block !important;
}

/* Subscription images */
.sub-ref-image img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Events page images */
.events-corporate .product-thumb img {
  opacity: 1 !important;
}

/* ==========================================================
   PATCH v3 — Strikethrough fix, 4-col bouquet grid,
               subscription panel, img-safe price line
   ========================================================== */

/* --- STRIKETHROUGH FIX (img inside span breaks text-decoration) ---
   Use a pseudo-element line drawn across the entire .sale-original span
   so it covers both the dirham icon img AND the value text.          */
.sale-original,
.dirham-price.sale-original {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  color: var(--light) !important;
  font-weight: 500 !important;
  opacity: .78 !important;
  text-decoration: none !important; /* remove broken partial underline */
}
.sale-original::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 1.5px !important;
  background: var(--light) !important;
  border-radius: 2px !important;
  pointer-events: none !important;
}

/* Kill dirham icon inside sale-original — keep only the value */
.sale-original .dirham-icon {
  opacity: .6 !important;
}

/* Price row layout — current + original side by side, baseline aligned */
.sale-price-pair {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.sale-current {
  color: var(--brand) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
}
.sale-original {
  font-size: 13px !important;
}

/* --- FEATURED BOUQUETS: exactly 4-column, uniform cards ---- */
.featured-bouquets-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
}
.featured-bouquets-row .product-card {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  padding: 12px !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: transform .22s, box-shadow .22s !important;
}
.featured-bouquets-row .product-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow) !important;
}
.featured-bouquets-row .product-thumb {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: var(--soft) !important;
  flex-shrink: 0 !important;
}
.featured-bouquets-row .product-thumb .photo-fit {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 14px !important;
  transition: transform .35s ease !important;
}
.featured-bouquets-row .product-card:hover .photo-fit {
  transform: scale(1.06) !important;
}
.featured-bouquets-row .product-card h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 12px 0 6px !important;
  line-height: 1.4 !important;
  flex: 1 !important;
}
.featured-bouquets-row .quick-add {
  display: block !important;
  width: 100% !important;
  padding: 11px !important;
  background: var(--gradient) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 12px rgba(232,51,124,.22) !important;
  transition: transform .15s, box-shadow .15s !important;
  margin-top: 10px !important;
  font-family: var(--font-body) !important;
}
.featured-bouquets-row .quick-add:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(232,51,124,.32) !important;
}
@media (max-width: 900px) {
  .featured-bouquets-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 500px) {
  .featured-bouquets-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* --- SUBSCRIPTION PROMO PANEL ----------------------------- */
.subscription-promo-panel {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 28px !important;
  align-items: center !important;
  padding: 28px !important;
  background: linear-gradient(135deg, #fff 0%, #fdf0f9 100%) !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  box-shadow: var(--shadow-sm) !important;
}
.sub-promo-image {
  width: 240px !important;
  height: 240px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: var(--soft) !important;
  box-shadow: var(--shadow-card) !important;
}
.sub-promo-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 18px !important;
}
.sub-promo-content {
  display: flex !important;
  flex-direction: column !important;
}
.sub-plans-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-top: 4px !important;
}
.sub-plan-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 16px 10px !important;
  background: #fff !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 16px !important;
  text-align: center !important;
  position: relative !important;
  transition: border-color .18s, box-shadow .18s, transform .18s !important;
}
.sub-plan-card:hover {
  border-color: var(--brand) !important;
  box-shadow: 0 6px 20px rgba(232,51,124,.14) !important;
  transform: translateY(-3px) !important;
}
.sub-plan-card.sub-plan-popular {
  border-color: var(--brand) !important;
  background: linear-gradient(160deg, #fff 0%, #fde8f1 100%) !important;
}
.sub-plan-badge {
  position: absolute !important;
  top: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--gradient) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  letter-spacing: .05em !important;
}
.sub-plan-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  margin-top: 4px !important;
}
.sub-plan-price {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--brand-2) !important;
}
.sub-plan-price .dirham-icon {
  height: 16px !important;
  width: auto !important;
}
.sub-plan-unit {
  font-size: 11px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}
.sub-plan-card .subscribe-pill {
  margin-top: 6px !important;
  display: inline-block !important;
  background: var(--gradient) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(232,51,124,.25) !important;
  transition: transform .15s, box-shadow .15s !important;
  font-family: var(--font-body) !important;
  white-space: nowrap !important;
}
.sub-plan-card .subscribe-pill:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 15px rgba(232,51,124,.38) !important;
}
@media (max-width: 860px) {
  .subscription-promo-panel {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .sub-promo-image {
    width: 100% !important;
    height: 200px !important;
  }
  .sub-plans-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .sub-plans-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* --- COMPARE-PRICE (JS dynamic cards) strikethrough fix ---
   Same pseudo-element approach since img breaks text-decoration */
.compare-price,
.compare-dirham,
span.compare-price {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  color: var(--light) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  opacity: .75 !important;
  text-decoration: none !important;
}
.compare-price::after,
.compare-dirham::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 1.5px !important;
  background: var(--light) !important;
  border-radius: 2px !important;
  pointer-events: none !important;
}

/* Layout: current price + strikethrough side by side */
.discount-price {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.sale-price {
  color: var(--brand) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
}
.sale-price .dirham-price {
  color: var(--brand) !important;
  font-weight: 800 !important;
}

/* More Products grid — 5-col for the JS-injected section */
.dynamic-product-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 1100px) {
  .dynamic-product-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 800px) {
  .dynamic-product-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 560px) {
  .dynamic-product-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Dynamic card uniform shape */
.dynamic-card {
  display: flex !important;
  flex-direction: column !important;
}
.dynamic-card .product-thumb {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: var(--soft) !important;
  flex-shrink: 0 !important;
}
.dynamic-card .product-thumb .photo-fit {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform .35s !important;
}
.dynamic-card:hover .photo-fit {
  transform: scale(1.06) !important;
}
.dynamic-card h4 {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  margin: 10px 0 6px !important;
  flex: 1 !important;
  line-height: 1.4 !important;
}
.dynamic-card .meta {
  font-size: 11.5px !important;
  color: var(--green) !important;
  font-weight: 600 !important;
  margin: 4px 0 8px !important;
}

/* ==========================================================
   ORDER SUMMARY v4 — Qty controls + Unified Coupon
   ========================================================== */

/* --- Summary Card shell ---------------------------------- */
.gg-order-summary {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px !important;
  padding: 24px !important;
  box-shadow: var(--shadow-sm) !important;
  position: sticky !important;
  top: 120px !important;
}
.summary-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  margin: 0 0 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--line) !important;
}

/* --- Cart Item Row --------------------------------------- */
.gg-cart-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.gg-cart-item {
  display: grid !important;
  grid-template-columns: 72px 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--line-2) !important;
}
.gg-cart-thumb {
  width: 72px !important;
  height: 72px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--soft) !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--line-2) !important;
}
.gg-cart-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform .3s !important;
}
.gg-cart-item:hover .gg-cart-thumb img {
  transform: scale(1.05) !important;
}
.gg-cart-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.gg-cart-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin: 0 !important;
  line-height: 1.35 !important;
}

/* --- Qty +/- Control ------------------------------------ */
.gg-qty-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: var(--soft) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  width: fit-content !important;
}
.gg-qty-btn {
  width: 30px !important;
  height: 30px !important;
  background: transparent !important;
  border: none !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--brand-2) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s, color .15s !important;
  line-height: 1 !important;
}
.gg-qty-btn:hover {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}
.gg-qty-val {
  min-width: 28px !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  padding: 0 2px !important;
  border-left: 1px solid var(--line) !important;
  border-right: 1px solid var(--line) !important;
}

/* --- Item price (right col) ----------------------------- */
.gg-cart-price {
  text-align: right !important;
}
.gg-item-total {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  white-space: nowrap !important;
}
.gg-item-total .dirham-icon {
  height: 14px !important;
  width: auto !important;
  opacity: .7 !important;
}

/* --- Totals block --------------------------------------- */
.gg-summary-lines {
  margin-top: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--line) !important;
}
.gg-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 14px !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}
.gg-line-val {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
.gg-line-val .dirham-icon {
  height: 13px !important;
  opacity: .65 !important;
}
.delivery-val {
  color: var(--green) !important;
}
.gg-line-total {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--line) !important;
  margin-top: 4px !important;
}
.gg-line-total .gg-line-val strong {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--brand-2) !important;
}

/* --- Coupon Wrapper ------------------------------------- */
.gg-coupon-wrap {
  margin-top: 16px !important;
  border: 1.5px dashed var(--brand-mid) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--brand-soft) !important;
  transition: border-color .2s !important;
}
.gg-coupon-wrap:focus-within {
  border-color: var(--brand) !important;
}

/* Toggle button (always visible header of coupon box) */
.gg-coupon-toggle {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 14px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  gap: 8px !important;
}
.gg-coupon-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
}
.gg-coupon-icon {
  font-size: 20px !important;
  flex-shrink: 0 !important;
}
.gg-coupon-left strong {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
.gg-coupon-left small {
  display: block !important;
  font-size: 11.5px !important;
  color: var(--muted) !important;
  margin-top: 1px !important;
}
.gg-coupon-chevron {
  font-size: 18px !important;
  color: var(--brand) !important;
  font-weight: 700 !important;
  transition: transform .22s !important;
  flex-shrink: 0 !important;
}

/* Drawer */
.gg-coupon-drawer {
  background: #fff !important;
  border-top: 1px solid var(--line) !important;
  padding: 14px !important;
}
.gg-coupon-drawer[hidden] {
  display: none !important;
}

/* Tabs */
.gg-coupon-tabs {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}
.gg-ctab {
  flex: 1 !important;
  padding: 9px 12px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: all .15s !important;
  font-family: var(--font-body) !important;
}
.gg-ctab.active {
  background: var(--gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(232,51,124,.22) !important;
}

/* Panels */
.gg-cpanel { display: none !important; }
.gg-cpanel.active { display: block !important; }

/* Code input row */
.gg-code-row {
  display: flex !important;
  gap: 8px !important;
}
.gg-code-input {
  flex: 1 !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 11px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  background: var(--soft) !important;
  color: var(--text) !important;
  outline: none !important;
  transition: border-color .15s, box-shadow .15s !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
.gg-code-input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(232,51,124,.1) !important;
  background: #fff !important;
}
.gg-code-apply {
  background: var(--gradient) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 11px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 10px rgba(232,51,124,.22) !important;
  transition: transform .15s, box-shadow .15s !important;
}
.gg-code-apply:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 16px rgba(232,51,124,.34) !important;
}
.gg-coupon-hint {
  font-size: 11.5px !important;
  color: var(--muted) !important;
  margin: 8px 0 0 !important;
}

/* Offer list */
.gg-offer-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.gg-offer-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--soft) !important;
  cursor: pointer !important;
  gap: 10px !important;
  transition: border-color .15s, background .15s !important;
}
.gg-offer-item:hover,
.gg-offer-item:has(input:checked) {
  border-color: var(--brand) !important;
  background: var(--brand-soft) !important;
}
.gg-offer-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.gg-offer-info strong {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--brand-2) !important;
  font-family: monospace !important;
  letter-spacing: .06em !important;
}
.gg-offer-info span {
  font-size: 11.5px !important;
  color: var(--muted) !important;
}
.gg-offer-item input[type="radio"] {
  accent-color: var(--brand) !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* --- Mobile responsive ---------------------------------- */
@media (max-width: 768px) {
  .gg-order-summary {
    position: static !important;
    margin-top: 20px !important;
  }
  .gg-cart-item {
    grid-template-columns: 60px 1fr auto !important;
    gap: 10px !important;
  }
  .gg-cart-thumb {
    width: 60px !important;
    height: 60px !important;
  }
}