/* ============================================================
   GiftM storefront theme - live CSS
   Loaded only when a non-Classic theme owns the chrome (the
   Modern theme renders the home page via {{shortcodes}} that
   emit these class names). All content stays dynamic - this
   file controls layout and look only.
   ============================================================ */

/* ---------- Tagline / ribbon ---------- */
.gm-tagline {
  background: #fafbff;
  border-bottom: 1px solid #e4e7ec;
  text-align: center;
  padding: 8px 16px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #667085;
  font-weight: 600;
  text-transform: uppercase;
}

/* ---------- Header (v5 - light/white theme, purple accents) ---------- */
.gm-header {
  background: #ffffff;
  border-bottom: 1px solid #e4e7ec;
  color: #111827;
}

.gm-header-v2 { padding: 0; }

.gm-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Logo block: brand mark + tagline beneath */
.gm-logo-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  flex: none;
  line-height: 1;
}

.gm-logo {
  font-family: inherit;
  font-size: 28px;
  font-weight: 800;
  font-style: italic;
  color: #111827;
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
}

.gm-logo img { max-height: 36px; width: auto; display: block; }

.gm-logo-tagline {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.01em;
    color: #475467;
  font-weight: 500;
}

/* Search bar - clean, icon on RIGHT (matches dark mockup).
   Capped at 480px and centered between logo and the action pills via
   auto margins on BOTH sides - residual width on wide screens is split
   equally so neither logo nor Deals sits flush against the search box. */
.gm-search {
  flex: 0 1 480px;
  display: flex;
  align-items: center;
    background:#fafbff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  padding: 0 18px;
  height: 44px;
  min-width: 240px;
  margin-left: auto;
  margin-right: auto;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.gm-search:focus-within {
  background: #ffffff;
  border-color: #c4b5fd;
  box-shadow: 0 0 0 3px rgba(109, 61, 245, 0.15);
}

.gm-search-input {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  position: relative;
}

/* Icon comes AFTER input in DOM → flex order puts it on the right */
.gm-search-input svg { width: 18px; height: 18px;     color: #475467; flex: none; order: 2; }

.gm-search-input input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
  color: #111827;
  background: transparent;
  order: 1;
}

.gm-search-input input::placeholder { color: #94a3b8; }

/* Top action pills: Deals / Corporate / Gift Cards - borderless, minimal */
.gm-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.gm-top-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
    color: #475467;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.gm-top-pill:hover { background: #f6f2ff; color: #111827; }
.gm-top-pill svg { width: 20px; height: 20px;     color: #475467;}
.gm-top-pill:hover svg { color: #111827; }

/* Right cluster: wallet / bell / avatar */
.gm-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* Wallet - icon + label/amount stack, no background or border
   (dark reference has it floating inline, not in a card). */
.gm-wallet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fafbff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  cursor: default;
}

.gm-wallet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gm-wallet-icon svg { width: 22px; height: 22px; color: #6d3df5; }
.gm-wallet-text { display: flex; flex-direction: column; line-height: 1.1; gap: 2px; }
/* nowrap: the coins label ("GiftM Coins") is ~2x the width of the old "Points",
   and without this it wraps onto a second line inside the flex column, making
   the chip taller than the Wallet pill sitting next to it. */
.gm-wallet-label { color: #475467; font-size: 10px; font-weight: 500; white-space: nowrap; }
.gm-wallet-amount { color: #111827; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }

/* Bell - borderless icon button with red badge */
/* The bell is a design placeholder: there is no notifications backend behind
   it and the "3" badge is hard-coded, so it promises something that does not
   exist. Hidden until a real notifications feed ships. */
.gm-bell { display: none !important; }

.gm-bell {
  position: relative;
  background: #fafbff;
  border: 1px solid #e4e7ec;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475467;
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}

.gm-bell:hover { background: #f6f2ff; color: #111827; }
.gm-bell svg { width: 22px; height: 22px;     color: #475467; }

.gm-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #6d3df5;
  color: #ffffff;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid #ffffff;
}

/* User block - borderless, just avatar + name + Premium + chevron */
.gm-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 4px 0;
  border-radius: 10px;
  text-decoration: none;
  background: transparent;
  border: none;
  transition: opacity 0.15s ease;
}

.gm-user:hover { opacity: 0.85; }

.gm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6d3df5 0%, #5a2de2 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex: none;
}

.gm-avatar-anon { background: #fafbff; color: #667085; }
.gm-avatar-anon svg { width: 18px; height: 18px;      color: #475467;}

.gm-user-meta { display: flex; flex-direction: column; line-height: 1.15; gap: 1px; }
.gm-user-name { font-size: 13px; font-weight: 600;     color: #475467; }
.gm-user-tier { font-size: 11px; color: #6d3df5; font-weight: 600; }
.gm-user > svg { width: 14px; height: 14px; color: #667085; }

.gm-user-anon { padding: 4px 8px 4px 0; }
.gm-user-anon .gm-user-name { font-weight: 600; }

/* Cart icon - borderless minimal, matches bell's style */
.gm-cart-link {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #475467;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.gm-cart-link:hover { background: #f6f2ff; color: #111827; }
.gm-cart-link svg { width: 22px; height: 22px;     color: #475467; }

.gm-cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid #fff;
}

/* ---------- Row 2: category nav ---------- */
.gm-nav-row {
  background: #ffffff;
  border-top: 1px solid #e4e7ec;
  border-bottom: 1px solid #e4e7ec;
}

.gm-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 16px 6px;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* All Categories dropdown */
.gm-all-cats { position: relative; flex: none; display: none; } /* hidden on desktop too - the category tabs + More cover it */

.gm-all-cats-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #fafbff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
    color: #475467;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
  line-height: 1;
}

.gm-all-cats-btn:hover { background: #f6f2ff; }
.gm-all-cats-btn > svg:first-child { width: 18px; height: 18px;     color: #475467;}
.gm-all-cats-btn > svg:last-child { width: 14px; height: 14px;     color: #475467; }

.gm-all-cats-menu,
.gm-cat-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  padding: 6px;
  display: none;
  z-index: 40;
  max-height: 360px;
  overflow-y: auto;
}

.gm-all-cats.is-open .gm-all-cats-menu,
.gm-cat-more.is-open .gm-cat-more-menu { display: block; }

.gm-all-cats-menu a,
.gm-cat-more-menu a {
     display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    color: #475467;
    font-size: 13px;
    text-decoration: none;
}
.gm-all-cats-menu a svg,
.gm-cat-more-menu a svg { flex-shrink: 0; }

.gm-all-cats-menu a:hover,
.gm-cat-more-menu a:hover { background: #f6f2ff; color: #111827; }

/* Category tabs - sized to content so "More" sits right beside the last
   tab (not pushed to the corner). View All Deals takes the corner via
   margin-left:auto below. */
.gm-cat-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  overflow: visible;
}

.gm-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 12px;
    color: #475467;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.gm-cat-tab svg { flex-shrink: 0; }

/* First tab sits flush with the header logo's left edge (drop the tab's
   own left padding so the nav row lines up with the logo above it). */
.gm-cat-tabs > .gm-cat-tab:first-child { padding-left: 0; }

.gm-cat-tab:hover {     color: #5a2de2; }

.gm-cat-tab.is-active {
  color: #6d3df5;
  border-bottom-color: #6d3df5;
  font-weight: 600;
}

.gm-cat-more { position: relative; padding: 0; }
.gm-cat-more-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 12px;
  color: #475467;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
}

.gm-cat-more-btn svg { width: 14px; height: 14px; }
.gm-cat-more-btn:hover { color: #6d3df5; }
.gm-cat-more.is-active .gm-cat-more-btn { color: #6d3df5; font-weight: 600; }
.gm-cat-more-menu a.is-active { color: #6d3df5; font-weight: 600; }

/* View All Deals - solid purple, rounded rectangle (not a full pill) */
.gm-view-all-deals {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  background: #6d3df5;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  margin-left: auto;
  transition: background 0.15s ease;
}

.gm-view-all-deals:hover { background: #5a2de2; }
.gm-view-all-deals svg { width: 18px; height: 18px; color: #fff; }

/* ---------- Layout shell ---------- */
.gm-shell {
  background: #fff;
  /* No forced 100vh: the footer sits directly below the shell, so a viewport
     floor here pushed the footer a full screen down on short pages (e.g. a
     search with few results). Let content determine the height instead. */
}

.gm-shell-inner {
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 72px;
  align-items: flex-start;
}

/* ---------- Sidebar ---------- */
.gm-sidebar {
  flex: none;
  width: 287px;
  background: #ffffff;
  border-radius: 12px;
  /* padding: 12px 0; */
  border: 0;
  position: sticky;
  top: 16px;
}

.gm-side-nav { list-style: none; margin: 0; padding: 0; }
.gm-side-nav li { margin-bottom: 2px; }

.gm-side-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #111827;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.gm-side-nav a svg { width: 18px; height: 18px; flex: none; color: #111827; }
.gm-side-nav a:hover { background: #f6f2ff; color: #111827; }
.gm-side-nav li.is-active a { background: #111827; color: #ffffff; }
.gm-side-nav li.is-active a svg { color: #ffffff; }

.gm-side-divider { height: 1px; background: #fafbff; margin: 8px 4px; }

/* ---------- Main column ---------- */
.gm-main { flex: 1; min-width: 0; }

/* ---------- Hero banner ---------- */
.gm-hero {
  background: #fafbff;
  border-radius: 14px;
  padding: 36px 53px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 13px 0;
  min-height: 200px;
  overflow: hidden;
  position: relative;
}

.gm-hero:not(.gm-hero--dark) .gm-hero-text { flex: 1; max-width: 38%; }

.gm-hero:not(.gm-hero--dark) .gm-hero-text h1 {
  font-size: 32px;
  line-height: 41px;
  margin: 0 0 10px;
  color: #111827;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.gm-hero:not(.gm-hero--dark) .gm-hero-text p {
  margin: 0 0 18px;
  color: #111827;
  font-size: 15px;
  max-width: 231px;
  font-weight: 500;
}

.gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 22px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.gm-btn-dark { background: #111827; color: #ffffff; }
.gm-btn-dark:hover { background: #0b1020; }

.gm-hero-image {
  position: relative;
  flex: 1;
  min-width: 0;
  text-align: right;   /* desktop: image hugs the right edge */
  font-size: 0;        /* kills inline-block whitespace gap */
}

.gm-hero-image img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  vertical-align: middle;
}

/* ---------- Section header ---------- */
.gm-section { margin-bottom: 28px; }

.gm-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.gm-section-head h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111827;
}

.gm-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0 5px;
  font-size: 13px;
  font-weight: 600;
     color: #6d3df5;
  text-decoration: none;
  transition: color 0.15s ease;
}

.gm-view-all:hover { color: #283593; }

/* ---------- Top brand grid ---------- */
.gm-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 12px;
}

.gm-brand {
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: #111827;
  font-weight: 700;
  padding: 6px 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gm-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.gm-brand img {
  max-height: 38px;
  max-width: 100%;
  object-fit: contain;
}

.gm-brand-name {
  font-size: 12px;
  line-height: 1.1;
  font-weight: 700;
  color: #111827;
}

/* ---------- Popular Categories grid ---------- */
.gm-cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.gm-cat {
  background: #fafbff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gm-cat:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.gm-cat-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fafbff;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.gm-cat-icon svg { width: 18px; height: 18px; }

.gm-cat-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }

.gm-cat-text strong {
  font-size: 13px;
  color: #111827;
  font-weight: 700;
}

.gm-cat-text span {
  font-size: 11px;
  color: #667085;
  margin-top: 2px;
}

/* ============================================================
   Brand-grid section ({{brand_grid}} shortcode)
   ============================================================ */
.gm-grid-section { margin-top: 8px; }

.gm-grid-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.gm-grid-title {
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  color: #6d3df5;
}

.gm-grid-title b { font-weight: 700; color: #111827; }

.gm-grid-subtitle {
  color: #475467;
  font-size: 13px;
  margin-top: 4px;
}

/* Category pill row - always one line; overflow collapses into the More pill */
.gm-pills {
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;
  align-items: center;
  margin: 18px 0;
  overflow: visible;
}

/* More pill + dropdown */
.gm-pill-more { position: relative; }

.gm-pill-more button.gm-pill {
  cursor: pointer;
  font: inherit;
}

.gm-pill-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  padding: 6px;
  display: none;
  z-index: 20;
}

.gm-pill-menu.is-open { display: block; }

.gm-pill-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  white-space: nowrap;
}

.gm-pill-menu-item:hover { background: #f6f2ff; }

.gm-pill-menu-item svg { width: 18px; height: 18px; flex: none; }

.gm-pill-more.is-hidden { display: none; }
.gm-pill.is-hidden     { display: none !important; }

.gm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e4e7ec;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.gm-pill svg { width: 21px; height: 21px; flex: none; }
.gm-pill:hover { background: #e4e7ec; }

.gm-pill.is-active { background: #111827; color: #ffffff; }
.gm-pill.is-active svg { color: #ffffff; }

/* Card grid */
.gm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(179px, 1fr));
  gap: 19px;
}

.gm-card {
  background: #ffffff;
  /* Rolled back (2026-06-20): subtle 1px border, no tile-style grey->blue
     hover. The Top Categories (.gm-tcat) treatment moved to .gs-cat-tile
     ("Top Brands in <Category>") where it was actually wanted. */
  border: 1px solid #e4e7ec;
  border-top: 0;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.gm-card:hover {
  /* subtle grey hover + lift AND grow (the "increase size" hover kept) */
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
  position: relative;
  z-index: 2;
}

.gm-card-art {
  position: relative;
  /* height: 122px; */
  display: grid;
  place-items: center;
  padding: 8px 14px;
  overflow: hidden;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}

.gm-card-art img {
  max-height: 56px;
  max-width: 80%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* Brand LOGO / favicon images get rounded corners (10px) on EVERY storefront
   surface they appear: the Top Brands strip, card artwork, category tiles, the
   Deals page (trending / brand tiles / recently-viewed / recommendations), the
   home deals slider, offers (cards + buying-now list), cart, checkout,
   brand-detail (buy-box logo + partners), and the search dropdown.
   Intentionally excludes the site header wordmark (.gm-logo img) and large
   brand hero images, which should stay as supplied. */
.gm-brand img,
.gm-card-art img,
.gm-deal-brand img,
.gs-cat-tile-art img,
.gs-cat-showcase-logo img,
.gs-cat-trend-logo img,
.gs-deals-trend-logo img,
.gs-deals-brand-tile img,
.gs-deals-recent-thumb img,
.gs-deals-rec-art img,
.gs-offers-card-art img,
.gs-offers-buying-list img,
.gs-cart-img img,
.gs-checkout-rec-img img,
.gs-bd-buy-logo img,
.gs-bd2-partner img,
.gs-search-result img {
  border-radius: 10px;
}

.gm-card-art > .gm-card-name-overlay {
  position: relative;
  z-index: 1;
}

/* Full brand-card artwork (admin "Brand Card" upload). Fills the whole
   art area edge-to-edge instead of the centered logo, and hides the
   decorative ::before accent shape so it doesn't bleed over the art. */
.gm-card-art--cover { padding: 0; }
.gm-card-art--cover::before { display: none; }
.gm-card-art--cover .gm-card-art-full {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

/* Decoration variants - the card art's background gets one of six
   accent shapes (quarter-circle, swoosh, corner ball, outlined ring,
   triangle, dot grid). Variant is picked deterministically from the
   brand id so the same brand always renders the same way. Tints flip
   to dark overlays on pastel backgrounds via .is-light. */
.gm-card-art--d0::before,
.gm-card-art--d1::before,
.gm-card-art--d2::before,
.gm-card-art--d3::before,
.gm-card-art--d4::before,
.gm-card-art--d5::before {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* d0 - quarter-circle anchored top-right (Amazon-style halo behind cart) */
.gm-card-art--d0::before {
  top: -34px; right: -34px;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
}
.gm-card-art--d0.is-light::before {
  background: rgba(15, 23, 42, 0.06);
}

/* d1 - diagonal swoosh from upper-left (Flipkart-style accent) */
.gm-card-art--d1::before {
  top: -30px; left: -30px;
  width: 120px; height: 180px;
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(-22deg);
  transform-origin: top left;
  border-radius: 0 0 80px 80px;
}
.gm-card-art--d1.is-light::before {
  background: rgba(15, 23, 42, 0.05);
}

/* d2 - big soft circle anchored bottom-left */
.gm-card-art--d2::before {
  bottom: -42px; left: -34px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
.gm-card-art--d2.is-light::before {
  background: rgba(15, 23, 42, 0.05);
}

/* d3 - outlined ring peeking from bottom-right */
.gm-card-art--d3::before {
  bottom: -22px; right: -22px;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
}
.gm-card-art--d3.is-light::before {
  border-color: rgba(15, 23, 42, 0.1);
}

/* d4 - top-left wedge */
.gm-card-art--d4::before {
  top: 0; left: 0;
  width: 0; height: 0;
  border-top: 72px solid rgba(255, 255, 255, 0.2);
  border-right: 72px solid transparent;
}
.gm-card-art--d4.is-light::before {
  border-top-color: rgba(15, 23, 42, 0.07);
}

/* d5 - dot-grid sprinkle to the left of the cart */
.gm-card-art--d5::before {
  top: 12px; right: 44px;
  width: 38px; height: 38px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.3) 1.6px, transparent 1.6px);
  background-size: 8px 8px;
}
.gm-card-art--d5.is-light::before {
  background-image: radial-gradient(rgba(15, 23, 42, 0.16) 1.6px, transparent 1.6px);
}

.gm-card-name-overlay {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
  padding: 0 10px;
  word-break: break-word;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 92%;
}

.gm-card-art.is-light .gm-card-name-overlay {
  color: #111827;
  text-shadow: none;
}

.gm-card-cart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: grid;
  place-items: center;
  color: #111827;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.gm-card-cart svg { width: 13px; height: 13px; }

.gm-card-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gm-card-cat {
  display: inline-block;
  font-size: 10px;
  padding: 3px 8px;
  background: #fafbff;
  color: #111827;
  border-radius: 6px;
  letter-spacing: 0.03em;
  font-weight: 600;
  align-self: flex-start;
}

.gm-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

.gm-card-discount {
  font-size: 11px;
  color: #16a34a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

/* Per-category palette for the small category badge in the card body and
   the round cart bubble pinned to the card art. Colours mirror the icon
   palette used by gs_cat_icon() so the storefront reads as one system. */
/* Category chips: one calm, on-brand treatment (Lavender Mist + indigo).
   Per brand guideline - "don't overuse too many colours"; the old
   12-colour rainbow read coupon-like. Single class drives every label. */
.gm-card-cat, .gm-card-cart { background:#f6f2ff; color:#6d3df5; }

/* ============================================================
   Brand detail page (.gs-bd-*)
   Two-column buy layout: hero + supporting copy on the left, sticky
   denomination picker on the right. Replaces the inline-style soup
   that lived in pages/brand-detail.php so the page reads as one
   designed system alongside the storefront grid.
   ============================================================ */
.gs-bd-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 28px;
  align-items: start;
  padding-top: 15px;
}
@media (max-width: 900px) {
  .gs-bd-grid { grid-template-columns: 1fr; }
}

.gs-bd-title {
  font-size: 1.85rem;
  line-height: 1.2;
  margin: 0 0 1.1rem;
  color: #111827;
  font-weight: 700;
}
.gs-bd-title .gs-bd-discount {
  display: inline-block;
  margin-left: 4px;
  color: #16a34a;
  font-weight: 800;
}

.gs-bd-hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #dcfce7 0%, #a7f3d0 50%, #86efac 100%);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  min-height: 320px;
  display: grid;
  place-items: center;
}
.gs-bd-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
}
.gs-bd-hero--text {
  padding: 56px 32px;
  color: #111827;
  text-align: center;
}
.gs-bd-hero--text .gs-bd-hero-name {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  word-break: break-word;
}
.gs-bd-hero-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(15, 23, 42, 0.88);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.gs-bd-assured {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fafbff;
  border: 1px solid #dcfce7;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 1.5rem;
}
.gs-bd-assured-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #10b981, #16a34a);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.28);
}
.gs-bd-assured-text strong { color: #065f46; font-size: 1rem; }
.gs-bd-assured-text small  { color: #065f46; font-size: 0.85rem; display: block; margin-top: 2px; }
.gs-bd-assured-text a { color: #065f46; text-decoration: underline; }

.gs-bd-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}
.gs-bd-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #ecfdf5;
  color: #065f46;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid #dcfce7;
}

.gs-bd-section { margin-top: 2rem; }
.gs-bd-section h2 { font-size: 1.18rem; margin: 0 0 0.6rem; color: #111827; font-weight: 800; }
.gs-bd-section .gs-bd-body { font-size: 0.95rem; line-height: 1.65; color: #475467; }
.gs-bd-section .gs-bd-body--muted { font-size: 0.85rem; color: #667085; }

/* Right column - sticky buy panel */
.gs-bd-buy {
  position: sticky;
  top: 16px;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}
.gs-bd-buy-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ec;
}
.gs-bd-buy-head h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 3px; color: #111827; }
.gs-bd-buy-head p  { font-size: 0.82rem; color: #475467; margin: 0; }
.gs-bd-buy-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  background: linear-gradient(135deg, #f6c95e, #e7b84c);
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.25);
}
.gs-bd-buy-logo img { max-width: 40px; max-height: 40px; object-fit: contain; }
.gs-bd-buy-logo--initial {
  background: linear-gradient(135deg, var(--gm-primary, #6d3df5), #5a2de2);
  color: #ffffff;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gs-bd-design-pick { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #e4e7ec; }
.gs-bd-design-pick .gs-bd-design-label {
  font-size: 0.74rem;
  color: #667085;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  font-weight: 600;
}
.gs-bd-design-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.gs-bd-design-tile {
  cursor: pointer;
  border: 2px solid #e4e7ec;
  border-radius: 10px;
  padding: 4px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.gs-bd-design-tile:hover { transform: translateY(-1px); }
.gs-bd-design-tile.is-active { border-color: #6d3df5; }
.gs-bd-design-tile img { width: 76px; height: 50px; object-fit: cover; border-radius: 6px; display: block; }
.gs-bd-design-tile-name { font-size: 0.72rem; text-align: center; margin-top: 3px; color: #475467; }

.gs-bd-denom-list { display: flex; flex-direction: column; }
.gs-bd-denom {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 14px 8px;
  border-top: 1px solid #e4e7ec;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}
.gs-bd-denom:first-child { border-top: none; }
.gs-bd-denom:hover { background: #fafbff; }

.gs-bd-denom-amt strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
}
.gs-bd-denom-off {
  display: inline-block;
  background: #dcfce7;
  color: #16a34a;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.gs-bd-denom-saving { font-size: 0.78rem; color: #667085; margin-top: 2px; display: block; }

.gs-bd-qty {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  overflow: hidden;
}
.gs-bd-qty button {
  background: transparent;
  border: none;
  width: 34px;
  height: 36px;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 600;
  color: #475467;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.gs-bd-qty button:hover { background: #f6f2ff; color: #111827; }
.gs-bd-qty input {
  width: 42px;
  border: none;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  -moz-appearance: textfield;
  appearance: textfield;
  outline: none;
  color: #111827;
}
.gs-bd-qty input::-webkit-outer-spin-button,
.gs-bd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.gs-bd-denom-total {
  min-width: 96px;
  text-align: right;
  font-size: 0.85rem;
  color: #667085;
}
.gs-bd-denom-total strong {
  display: block;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 2px;
}

.gs-bd-buy-foot { margin-top: 18px; padding-top: 18px; border-top: 2px dashed #e4e7ec; }
.gs-bd-redeem-link {
  display: flex;
  justify-content: flex-end;
  font-size: 0.85rem;
  color: #475467;
  margin-bottom: 12px;
}
.gs-bd-redeem-link a { color: #475467; }
.gs-bd-grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: #111827;
}
.gs-bd-grand strong {
  font-size: 1.55rem;
  font-weight: 900;
  color: #16a34a;
}
.gs-bd-checkout {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #0b1020, #1e293b);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.2);
}
.gs-bd-checkout:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.28);
}
.gs-bd-checkout:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.gs-bd-safe {
  text-align: center;
  font-size: 0.8rem;
  color: #667085;
  margin: 12px 0 0;
}
.gs-bd-safe strong { color: #6d3df5; }

/* ============================================================
   Cart page (.gs-cart-*)
   Same visual language as .gs-bd-*: rounded cards, soft shadow,
   slate text, green discount, dashed dividers, gradient CTA.
   ============================================================ */
.gs-cart-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
  padding-top: 15px;
}
@media (max-width: 900px) {
  .gs-cart-grid { grid-template-columns: 1fr; }
}

.gs-cart-title {
  font-size: 1.85rem;
  font-weight: 700;
  margin: 0 0 1.1rem;
  color: #111827;
  line-height: 1.2;
}

.gs-cart-items {
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 18px;
  padding: 6px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.gs-cart-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}
.gs-cart-row + .gs-cart-row { border-top: 1px solid #e4e7ec; }
.gs-cart-row:hover { background: #fafbff; }

.gs-cart-img {
  width: 78px;
  height: 78px;
  border-radius: 14px;
  background: #fafbff;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.gs-cart-img img { max-width: 62px; max-height: 62px; object-fit: contain; }
.gs-cart-img--initial {
  background: linear-gradient(135deg, var(--gm-primary, #6d3df5), #5a2de2);
  color: #ffffff;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.gs-cart-info-name {
  font-size: 0.98rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px;
  line-height: 1.3;
}
.gs-cart-info-meta { font-size: 0.82rem; color: #667085; }
.gs-cart-info-meta .gs-cart-off {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background: #dcfce7;
  color: #16a34a;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  vertical-align: middle;
}

.gs-cart-qty {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  overflow: hidden;
}
.gs-cart-qty button {
  background: transparent;
  border: none;
  width: 34px;
  height: 36px;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 600;
  color: #475467;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.gs-cart-qty button:hover { background: #f6f2ff; color: #111827; }
.gs-cart-qty input {
  width: 42px;
  border: none;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}
.gs-cart-qty input::-webkit-outer-spin-button,
.gs-cart-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.gs-cart-price { min-width: 110px; text-align: right; }
.gs-cart-price strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #111827;
}
.gs-cart-remove {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
  text-decoration: none;
}
.gs-cart-remove:hover { text-decoration: underline; }

/* Order summary - sticky right column */
.gs-cart-summary {
  position: sticky;
  top: 16px;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}
.gs-cart-summary h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 18px;
  color: #111827;
}
.gs-cart-sum-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  margin-bottom: 10px;
  color: #475467;
}
.gs-cart-sum-row strong { font-weight: 700; color: #111827; }
.gs-cart-sum-row--save { color: #16a34a; font-weight: 600; }
.gs-cart-sum-row--save strong { color: #16a34a; }

.gs-cart-promo {
  border-top: 1px dashed #e4e7ec;
  border-bottom: 1px dashed #e4e7ec;
  padding: 12px 0;
  margin: 14px 0;
}
.gs-cart-promo-toggle {
  cursor: pointer;
  color: var(--gm-primary, #6d3df5);
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.gs-cart-promo-toggle::-webkit-details-marker { display: none; }
.gs-cart-promo-toggle::before { content: "\1F39F"; font-size: 1.05rem; }
.gs-cart-promo-form { display: flex; gap: 8px; margin-top: 10px; }
.gs-cart-promo-form input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  text-transform: uppercase;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gs-cart-promo-form input:focus {
  border-color: var(--gm-primary, #6d3df5);
  box-shadow: 0 0 0 3px rgba(109, 61, 245, 0.12);
}
.gs-cart-promo-form button {
  padding: 9px 16px;
  background: var(--gm-primary, #6d3df5);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
}
.gs-cart-promo-applied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafbff;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.85rem;
}
.gs-cart-promo-code {
  font-weight: 700;
  color: #065f46;
  font-family: ui-monospace, monospace;
}
.gs-cart-promo-off { font-size: 0.75rem; color: #065f46; display: block; }
.gs-cart-promo-remove {
  background: none;
  border: none;
  color: #6d3df5;
  cursor: pointer;
  font-size: 0.78rem;
  text-decoration: underline;
}
.gs-cart-promo-error {
  display: none;
  color: #991b1b;
  font-size: 0.78rem;
  margin-top: 6px;
}

.gs-cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 18px 0 14px;
}
.gs-cart-total strong {
  font-size: 1.55rem;
  font-weight: 900;
  color: #16a34a;
}

.gs-cart-checkout {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #0b1020, #1e293b);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.2);
}
.gs-cart-checkout:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.28);
  text-decoration: none;
  color: #ffffff;
}
.gs-cart-safe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #667085;
  margin: 12px 0 0;
}
.gs-cart-safe svg { width: 14px; height: 14px; color: #16a34a; }

/* Empty-cart state */
.gs-cart-empty {
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  padding: 56px 28px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}
.gs-cart-empty h3 { font-size: 1.25rem; margin: 0 0 0.5rem; color: #111827; }
.gs-cart-empty p  { color: #475467; margin: 0 0 1.25rem; }

/* ============================================================
   Checkout page (.gs-checkout-*)
   Mirrors .gs-cart-* / .gs-bd-* visual language so the whole purchase
   funnel reads as one designed system.
   ============================================================ */
.gs-checkout-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
  padding-top: 15px;
}
@media (max-width: 900px) {
  .gs-checkout-grid { grid-template-columns: 1fr; }
}

.gs-checkout-card {
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}
.gs-checkout-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 6px;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gs-checkout-card h3 svg {
  width: 18px;
  height: 18px;
  color: var(--gm-primary, #6d3df5);
}
.gs-checkout-card-sub {
  font-size: 0.85rem;
  color: #667085;
  margin: 0 0 16px;
  line-height: 1.5;
}

.gs-checkout-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) {
  .gs-checkout-fields { grid-template-columns: 1fr; }
}
.gs-checkout-field { display: flex; flex-direction: column; }
.gs-checkout-field--full { grid-column: 1 / -1; }
.gs-checkout-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475467;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.gs-checkout-input,
.gs-checkout-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  font-size: 0.92rem;
  background: #fafbff;
  color: #111827;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  font-family: inherit;
}
.gs-checkout-input:focus,
.gs-checkout-textarea:focus {
  border-color: var(--gm-primary, #6d3df5);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(109, 61, 245, 0.12);
}
.gs-checkout-textarea { resize: vertical; min-height: 72px; }

/* Recipient cards */
.gs-checkout-rec {
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.gs-checkout-rec:hover { border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04); }
.gs-checkout-rec.is-gift {
  border-color: var(--gm-primary, #6d3df5);
  background: #fafbff;
  box-shadow: 0 4px 14px rgba(109, 61, 245, 0.08);
}
.gs-checkout-rec-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
.gs-checkout-rec-img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #fafbff;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.gs-checkout-rec-img img { max-width: 44px; max-height: 44px; object-fit: contain; }
.gs-checkout-rec-img--initial {
  background: linear-gradient(135deg, var(--gm-primary, #6d3df5), #5a2de2);
  color: #ffffff;
  font-weight: 900;
  font-size: 19px;
  text-transform: uppercase;
}
.gs-checkout-rec-name { font-weight: 700; color: #111827; line-height: 1.3; }
.gs-checkout-rec-meta { font-size: 0.8rem; color: #667085; margin-top: 2px; }
.gs-checkout-gift-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475467;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fafbff;
  border: 1px solid #e4e7ec;
  transition: all 0.15s ease;
  user-select: none;
}
.gs-checkout-gift-toggle:hover { border-color: var(--gm-primary, #6d3df5); color: var(--gm-primary, #6d3df5); }
.gs-checkout-gift-toggle input {
  accent-color: var(--gm-primary, #6d3df5);
  cursor: pointer;
  width: 14px;
  height: 14px;
}
.gs-checkout-rec.is-gift .gs-checkout-gift-toggle {
  background: var(--gm-primary, #6d3df5);
  color: #ffffff;
  border-color: var(--gm-primary, #6d3df5);
}
.gs-checkout-rec.is-gift .gs-checkout-gift-toggle input { accent-color: #ffffff; }

.gs-checkout-gift-fields {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #cbd5e1;
}
.gs-checkout-rec.is-gift .gs-checkout-gift-fields { display: block; }

/* Payment method cards */
.gs-checkout-pay {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid #e4e7ec;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
/* Breathing room between the "Payment method" heading and the first option. */
.gs-checkout-pay:first-of-type { margin-top: 14px; }
.gs-checkout-pay:hover { border-color: #cbd5e1; }
.gs-checkout-pay:has(input:checked) {
  border-color: var(--gm-primary, #6d3df5);
  background: #fafbff;
  box-shadow: 0 4px 14px rgba(109, 61, 245, 0.08);
}
.gs-checkout-pay input[type="radio"] {
  accent-color: var(--gm-primary, #6d3df5);
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.gs-checkout-pay-main { flex: 1; }
.gs-checkout-pay-title { font-weight: 700; color: #111827; font-size: 0.95rem; }
.gs-checkout-pay-meta {
  font-size: 0.78rem;
  color: #667085;
  margin-top: 2px;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}
.gs-checkout-pay-balance {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #065f46;
  white-space: nowrap;
}
.gs-checkout-pay-balance--low { background: #fef2f2; color: #991b1b; }
.gs-checkout-warn {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.85rem;
  margin-top: 10px;
}
.gs-checkout-info {
  font-size: 0.8rem;
  color: #667085;
  margin: 10px 0 0;
  line-height: 1.5;
}
.gs-checkout-info a { color: var(--gm-primary, #6d3df5); text-decoration: underline; }
.gs-checkout-error {
  display: none;
  color: #991b1b;
  font-size: 0.85rem;
  margin-top: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 12px;
}

/* Customized by Prashant 2026-10-29: the sign-in box styles (.gs-signin-*) now live in gs-signin.css, loaded for every theme. */
/* ============================================================
   Trust strip ({{trust_strip}} shortcode)
   ============================================================ */
.gm-trust {
  background: #fafbff;
  border-radius: 14px;
  padding: 20px 28px;
  display: flex;
  align-items: center;
  margin: 28px 0 0;
  gap: 24px;
}

.gm-trust-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.gm-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
}

.gm-trust-icon svg { width: 22px; height: 22px; }

.gm-trust-text { min-width: 0; }

.gm-trust-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}

.gm-trust-text span {
  display: block;
  color: #667085;
  font-size: 12px;
  margin-top: 2px;
}

/* ============================================================
   Responsive - desktop → tablet → phone
   ============================================================ */

/* Tablet (≤1100px): tighter rails, smaller hero copy */
@media (max-width: 1100px) {
  .gm-shell-inner  { gap: 36px; }
  .gm-sidebar      { width: 220px; }
  .gm-cat-grid     { grid-template-columns: repeat(3, 1fr); }
  .gm-hero-text h1 { font-size: 28px; line-height: 36px; }
  .gm-grid-title   { font-size: 24px; }
}

/* Progressive collapse for the in-between desktop range so the header
   stays composed before mobile mode kicks in at 900px.
   ≤1200px : drop tagline + wallet (the biggest space hogs)
   ≤1100px : pills become icon-only, user-meta + chevron hide
*/
@media (max-width: 1200px) {
  .gm-logo-tagline   { display: none; }
  .gm-wallet         { display: none; }
  .gm-header-inner   { gap: 14px; }
  /* Nav row: compact tabs + allow horizontal scroll so View All Deals
     stays pinned to the right edge instead of being clipped off-canvas. */
  .gm-nav-inner      { gap: 12px; padding: 8px 16px 4px; }
  .gm-all-cats-btn   { padding: 8px 12px; font-size: 12px; }
  .gm-cat-tabs       { gap: 0; overflow-x: auto; flex: 1 1 auto; min-width: 0; scrollbar-width: none; -ms-overflow-style: none; }
  .gm-cat-tabs::-webkit-scrollbar { display: none; }
  .gm-cat-tab        { padding: 12px 10px; font-size: 13px; }
  .gm-cat-more-btn   { padding: 12px 10px; font-size: 13px; }
  .gm-view-all-deals { padding: 8px 14px; font-size: 13px; flex: none; }
}
@media (max-width: 1100px) {
  .gm-top-pill span  { display: none; }
  .gm-top-pill       { padding: 8px 10px; }
  .gm-user-meta      { display: none; }
  .gm-user           { padding: 4px; }
  .gm-user > svg     { display: none; }   /* hide chevron only - anon avatar icon stays */
  .gm-search         { flex: 0 1 320px; }
  .gm-header-inner   { gap: 10px; }
  /* All Categories dropdown is redundant with inline tabs at this width
     and the hamburger drawer's full category list - drop it for breathing
     room. */
  .gm-all-cats       { display: none; }
  .gm-cat-tab        { padding: 12px 8px; font-size: 12px; }
  .gm-cat-more-btn   { padding: 12px 8px; font-size: 12px; }
}

/* Tablet/mobile (≤900px): hamburger replaces nav row, search wraps */
@media (max-width: 900px) {
  .gm-header-inner   { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .gm-logo           { font-size: 22px; }
  .gm-search         { order: 3; flex-basis: 100%; max-width: none; margin-top: 4px; flex: 1 1 100%; }
  .gm-header-actions { display: none; }   /* Deals/Corporate/Gift Cards pills hidden - drawer has them */
  .gm-nav-row        { display: none; }   /* Desktop category nav row hidden - drawer has full list */

  .gm-nav-inner      { padding: 0 16px; gap: 12px; }
  .gm-all-cats-btn   { padding: 10px 12px; font-size: 12px; }
  .gm-cat-tab        { padding: 12px 8px; font-size: 12px; }
  .gm-view-all-deals { padding: 7px 12px; font-size: 12px; }

  .gm-shell-inner    { flex-direction: column; gap: 18px; padding: 0 16px; }

  .gm-sidebar {
    width: 100%;
    position: static;
    padding: 8px 0;
    background: transparent;
  }
  .gm-side-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* old Edge */
  }
  .gm-side-nav::-webkit-scrollbar { display: none; }    /* Chrome/Safari */
  .gm-pills::-webkit-scrollbar    { display: none; }
  .gm-pills                       { scrollbar-width: none; }
  .gm-side-nav li { flex: 0 0 auto; margin: 0; }
  .gm-side-nav a  {
    background: #fafbff;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  .gm-side-nav li.is-active a { background: #111827; }
  .gm-side-divider            { display: none; }

  .gm-hero {
    padding: 24px 24px 16px;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 14px;
    min-height: 0;
  }
  .gm-hero-text  { max-width: 100%; }
  .gm-hero-image {
    width: 100%;
    max-width: 100%;
    flex: none;
    text-align: center;   /* mobile: image centered under the text */
  }
  .gm-hero-image img { max-height: 200px; }

  /* Pill row scrolls horizontally; the More dropdown is unnecessary here */
  .gm-pills          { overflow-x: auto; padding-bottom: 4px; }
  .gm-pill-more      { display: none !important; }
  .gm-pill.is-hidden { display: inline-flex !important; }

  .gm-trust              { padding: 16px 18px; gap: 18px; }
  .gm-trust-text strong  { font-size: 13px; }
  .gm-trust-text span    { font-size: 11px; }
}

/* Phone (≤600px) */
@media (max-width: 600px) {
  .gm-tagline            { padding: 6px 12px; font-size: 9px; }
  .gm-header-inner       { gap: 10px; padding: 10px 12px; align-items: center; }
  .gm-logo               { font-size: 20px; }
  .gm-search             { height: 40px; padding: 0 12px; }
  .gm-search-input input { font-size: 12px; }
  /* Logo + right cluster sit on row 1, search wraps to row 2 (search has order:3 from the 900px tier) */
  .gm-header-right       { gap: 8px; }
  .gm-bell               { width: 34px; height: 34px; }
  .gm-cart-link          { width: 34px; height: 34px; }
  .gm-avatar             { width: 32px; height: 32px; }
  /* .gm-nav-row hidden by the 900px tier above */

  .gm-shell-inner        { padding: 0 12px; gap: 12px; }

  .gm-hero               { padding: 20px 18px 14px; gap: 12px; border-radius: 12px; }
  .gm-hero-text h1       { font-size: 22px; line-height: 28px; }
  .gm-hero-text p        { font-size: 13px; max-width: 100%; }
  .gm-hero-image img     { max-height: 160px; }

  .gm-section-head h2    { font-size: 22px; }
  .gm-brand-grid         { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .gm-brand              { height: 56px; padding: 4px 8px; }
  .gm-brand img          { max-height: 32px; }

  .gm-cat-grid           { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gm-cat                { padding: 10px 12px; gap: 8px; }
  .gm-cat-icon           { width: 30px; height: 30px; }
  .gm-cat-icon svg       { width: 16px; height: 16px; }
  .gm-cat-text strong    { font-size: 12px; }
  .gm-cat-text span      { font-size: 10px; }

  .gm-grid-title         { font-size: 22px; }
  .gm-grid-subtitle      { font-size: 12px; }
  .gm-pills              { gap: 10px; margin: 14px 0; }
  .gm-pill               { padding: 6px 10px; font-size: 12px; }
  .gm-pill svg           { width: 16px; height: 16px; }

  .gm-cards              { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gm-card-art img       { max-height: 44px; }
  .gm-card-name-overlay  { font-size: 13px; }
  .gm-card-body          { padding: 8px 10px 10px; }
  .gm-card-title         { font-size: 12px; }
  .gm-card-discount      { font-size: 10px; }

  .gm-trust              { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px 18px; }
  .gm-trust-item         { width: 100%; }
}

/* Small phone (≤400px) */
@media (max-width: 400px) {
  .gm-brand-grid    { grid-template-columns: repeat(2, 1fr); }
  .gm-cards         { grid-template-columns: 1fr; }
  .gm-hero-text h1  { font-size: 20px; line-height: 26px; }
}

/* ============================================================
   DEALS PAGE ("Top Deals for You" - PDF reference)
   5 numbered sections + trust + newsletter+app. Page bg white,
   panels light lavender per the reference comp.
   ============================================================ */
.gs-deals-page {
  max-width: 1280px;
  margin: 0 auto;
     padding: 15px 16px 32px;
  background: #fff;
}
body:has(.gs-deals-page),
body:has(.gs-deals-page) .gm-shell,
body:has(.gs-deals-page) .gm-main { background: #fff; }

/* ---- Page header with trust mini-row. PDF reference: NO full-width
       border below the head - only the trust-row itself gets a
       border-bottom and vertical dividers between items. ---- */
.gs-deals-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.gs-deals-page-title h1 {
    margin: 0 0 7px;
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* Sparkle accent next to "Top Deals for You" - PDF reference uses
   a 4-point star glyph in brand purple, not the yellow ✨ emoji. */
.gs-deals-title-spark {
  display: inline-flex;
  align-items: center;
  color: #6d3df5;
  line-height: 0;
}
.gs-deals-page-title p { 
      margin: 0;
    font-size: 14px;
    color: #475467;
    font-weight: 600;
 }
/* Trust mini-row - PDF reference: border-bottom under the row only
   (not full page width) + vertical dividers BETWEEN items. */
.gs-deals-trust-row {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
    padding: 14px 20px 14px;
  border-bottom: 1px solid #e4e7ec;
}
.gs-deals-trust-mini {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  border-right: 1px solid #e4e7ec;
}
.gs-deals-trust-mini:first-child { padding-left: 0; }
.gs-deals-trust-mini:last-child  { border-right: 0; padding-right: 0; }
/* PDF reference: rounded-SQUARE icon containers (border-radius 8px),
   not full circles. Slightly larger so the glyph reads at a glance. */
.gs-deals-trust-mini-icon {
    width: 37px;
    height: 37px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gs-deals-trust-mini-icon svg { width: 18px; height: 18px; }
.gs-deals-trust-mini div { 
      display: flex;
    flex-direction: column;
    line-height: 1.2;
    gap: 6px 0;
 }
.gs-deals-trust-mini strong { 
      font-size: 14px;
    font-weight: 600;
    color: #111827;
}
.gs-deals-trust-mini span { 
      font-size: 12px;
    color: #667085;
    font-weight: 600;
}

/* ---- Section heading style ---- */
.gs-deals-section {    margin-bottom: 33px; }
.gs-deals-section-head {
        display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
.gs-deals-section-head h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111827;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* PDF reference: step numbers ("1.", "2.", "3.") share the same
   dark slate color as the heading text - no purple accent. */
.gs-deals-step {
  color: #111827;
  font-weight: 800;
  margin-right: 2px;
}
.gs-deals-ai-tag {
     display: inline-flex;
    align-items: center;
    background: #80808017;
    color: #6d3df5;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: -2px;
}
.gs-deals-flame { font-size: 16px; }
.gs-deals-section-sub {
     font-size: 13px;
    color: #475467;
    font-weight: 600;
    margin-left: 4px;
}
.gs-deals-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0 5px;
  font-size: 13px;
  font-weight: 600;
  color: #6d3df5;
  text-decoration: none;
}
.gs-deals-section-actions {
     display: inline-flex;
    align-items: center;
    gap: 18px;
}
.gs-deals-timer {
      display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 45px;
}
/* Colon separator between timer units - PDF reference reads
   "02 : 13 : 22" with the colon outside the red pills. */
.gs-deals-timer-colon {
  font-size: 18px;
    font-weight: 800;
    color: #667085;
    line-height: 1;
    padding: 0 2px;
}
.gs-deals-timer-unit {
      display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: #FEF2F2;
    border-radius: 5px;
    padding: 7px 13px 10px;
    min-width: 38px;
    gap: 6px 0;
}
.gs-deals-timer-unit strong {
      font-size: 21px;
    font-weight: 700;
    color: #ef4444;
}
.gs-deals-timer-unit em {
     font-style: normal;
    font-size: 10px;
    font-weight: 700;
    color: #c01d1d;
    letter-spacing: 0.4px;
    margin-top: 3px;
    text-transform: uppercase;
}

/* ---- CTA buttons ---- */
.gs-deals-btn {
       display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.gs-deals-btn--primary { 
  background: #6d3df5;
    color: #fff;
    width: 94px !important;
}
.gs-deals-btn--primary:hover { background: #5a2de2; }
.gs-deals-btn--outline {
      background: #fff;
    color: #6d3df5;
    border-color: #c4b5fd;
 }
.gs-deals-btn--outline:hover { background: #f6f2ff; }
.gs-deals-btn--full { width: 100%; }
.gs-deals-btn--sm { 
      padding: 10px 11px;
    font-size: 11px;
    border-radius: 4px;
    box-shadow: 0 0 3px rgb(0, 0, 0, 18%);
    margin-top: auto;
}

/* ---- Section 1: Recommended for You (slider) ---- */
.gs-deals-rec-wrap { position: relative; }
.gs-deals-rec {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Vertical padding shields hover-lift + box-shadow from clipping.
     No scroll-snap (mandatory snap was causing the 5th card to peek
     past the visible viewport). Horizontal padding gives breathing
     room on both edges with no negative margin so the track stays
     strictly within the wrap. */
  padding: 10px 14px 14px;
  margin: -10px 0 -14px;
}
.gs-deals-rec::-webkit-scrollbar { display: none; }

.gs-deals-rec-card {
    flex: 0 0 calc((100% - 48px) / 4);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    /* Match Top Categories tile (.gm-tcat): grey border -> purple on hover. */
    border: 2px solid #e4e7ec;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
    padding: 16px;
}
.gs-deals-rec-card:hover { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); transform: translateY(-2px) scale(1.05); border-color: #c4b5fd; position: relative; z-index: 2; }
.gs-deals-rec-art {
  position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
        margin: 0 0 16px;
}
.gs-deals-rec-art > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Badge - PDF reference: soft tinted bg (12% alpha of brand colour)
   with the brand colour as the text. Bg + color come from inline
   styles so each card matches its own theme. */
.gs-deals-rec-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 11px 6px;
    border-radius: 999px;
    z-index: 1;
    background: #fffffffa !important;
    /* Border uses currentColor so it inherits whatever the inline
       `color` is (set per-card), matching the badge text colour. */
    border: 2px solid currentColor;
}
.gs-deals-rec-body {
  display: flex;
    flex-direction: column;
    gap: 8px;
 }
.gs-deals-rec-body h3 { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
.gs-deals-rec-body p {
      margin: 0;
    font-size: 13px;
    color: #475467;
    font-weight: 600;
 }
.gs-deals-rec-body p strong {     font-weight: 700;}
/* PDF reference: Save text + discount pill share one row, pill pinned
   to the FAR RIGHT via justify-content: space-between. */
.gs-deals-rec-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.gs-deals-rec-disc {
background: #f6f2ff;
    color: #6d3df5;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 7px;
    flex: none;
}
.gs-deals-rec-delivery {
 display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #667085;
    font-weight: 600;
    margin: 3px 0px 3px;
}
.gs-deals-rec-delivery svg{    stroke: #94a3b8;}
.gs-deals-rec-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}
/* PDF reference: price range shown as TWO separate bordered chips
   (₹500 and ₹1,000) rather than one inline range string. */
.gs-deals-rec-prices {
      display: inline-flex;
    align-items: center;
    gap: 0px;
    border: 2px solid #e1dfec9e;
    border-radius: 7px;
    padding: 0px 3px;
}
.gs-deals-rec-prices span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.gs-deals-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e4e7ec;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  z-index: 2;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.gs-deals-arrow:hover { background: #6d3df5; color: #fff; border-color: #6d3df5; }
/* PDF reference: arrows disappear entirely at the slider's edges
   instead of going dim/disabled. JS toggles .is-hidden when the
   current page hits the first/last index. */
.gs-deals-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.gs-deals-arrow--prev { left: -18px; }
.gs-deals-arrow--next { right: -18px; }

.gs-deals-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}
.gs-deals-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  cursor: pointer;
  padding: 0;
}
.gs-deals-dot.is-active {
  background: #6d3df5;
  transform: scale(1.4);
}

/* ---- Section 2: Trending Right Now ---- */
.gs-deals-trend-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.gs-deals-trend-card {
 background: #fff;
    /* Match Top Categories tile (.gm-tcat): grey border -> purple on hover. */
    border: 2px solid #e4e7ec;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.gs-deals-trend-card:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px) scale(1.05);
  border-color: #c4b5fd;
  position: relative;
  z-index: 2;
}
.gs-deals-trend-head {
 display: flex;
    gap: 15px;
}
.gs-deals-trend-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 4px;
}
.gs-deals-trend-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.gs-deals-trend-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.gs-deals-trend-name { font-size: 15px; font-weight: 700; color: #111827; }
.gs-deals-trend-up { 
      font-size: 11px;
    color: #667085;
    margin-top: 8px;
    font-weight: 600;
}
.gs-deals-trend-pct {
 font-size: 16px;
    font-weight: 800;
    color: #111827;
    margin-top: 7px;
}
.gs-deals-trend-pct em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #667085;
  margin-left: 2px;
}
.gs-deals-trend-tag {
     display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px 6px;
    border-radius: 6px;
}
.gs-deals-trend-bought {
     display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #667085;
    font-weight: 600;
}
.gs-deals-trend-bought svg {    color: #667085; flex: none; }
/* Tag + "Bought X times" share one row (badge left, count right). */
.gs-deals-trend-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}

/* ---- Section 3: Limited Time Offers ---- */
.gs-deals-lto-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.gs-deals-lto-card {
      border-radius: 14px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    min-height: 240px;
    align-items: stretch;
}
/* LTO badge - PDF reference uses per-card brand-themed text colour
   on a white pill. Inline styles per article supply bg + colour. */
.gs-deals-lto-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
    z-index: 2;
}
.gs-deals-lto-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}
.gs-deals-lto-logo {
     width: 35px;
    height: auto;
    margin-bottom: 10px;
    display: block;
    margin-top: 30px;
}
.gs-deals-lto-body h3 {
      margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
.gs-deals-lto-tagline { 
  margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
 }
 .gs-deals-lto-tagline strong{font-weight: 600;}
.gs-deals-lto-sub { 
      margin: 0 0 10px;
    font-size: 11px;
    color: #475467;
    font-weight: 600;
 }
.gs-deals-lto-code {
     background: rgba(255, 255, 255, 0.7);
    border: 1px solid #94a3b8;
    border-radius: 5px;
    padding: 3px 3px 3px 5px;
    font-size: 8px;
    color: #475467;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    align-self: flex-start;
}
.gs-deals-lto-code strong { color: #111827; font-weight: 700; }
.gs-deals-lto-copy { display: inline-flex; color: #667085; cursor: pointer; }
/* Lifestyle photo: large, fills right column full height */
.gs-deals-lto-art {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  z-index: 0;
}
.gs-deals-lto-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Section 4: Category tabs + brand row ---- */
.gs-deals-cat-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
    position: relative;
}

.gs-deals-cat-tabs::after{
    content: "";
    height: 3px;
    width: 100%;
    background: #e2e8f02e;
    left: 0;
    position: absolute;
    bottom: 0px;
    z-index: 9;
}

.gs-deals-cat-tabs::-webkit-scrollbar { display: none; }
.gs-deals-cat-tab {
background: transparent;
    border: none;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
    width: 190px;
    justify-content: center;
}
.gs-deals-cat-tab-icon { 
      width: 24px;
    height: 24px;
    display: inline-flex;
}
.gs-deals-cat-tab-icon svg { 
      width: 100%;
    height: 100%;
    color: #6d3df5;
}
.gs-deals-cat-tab:hover { color: #6d3df5; }
.gs-deals-cat-tab.is-active {
      border-bottom-color: #6d3df5;
    background: #bd9cf60d;
}

.gs-deals-brand-row {
display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
    box-shadow: 0 2px 3px rgb(0, 0, 0, 5%);
    padding: 16px 12px 15px;
    border-radius: 0 0 15px 15px;
}
.gs-deals-brand-tile {
        display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 13px 12px;
    background: #fff;
    /* Match Top Categories tile (.gm-tcat): grey border -> purple on hover. */
    border: 2px solid #e4e7ec;
    border-radius: 14px;
    text-decoration: none;
    text-align: center;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.gs-deals-brand-tile:hover {
  border-color: #c4b5fd;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  position: relative;
  z-index: 2;
}
.gs-deals-brand-tile img {
    /* Square box so the (solid, square) brand-card logo fills it and the 10px
       corner radius actually clips the visible logo. A wide 110x40 box left the
       radius on empty side-zones, so the centred square logo stayed sharp. */
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 10px;
 }
.gs-deals-brand-tile-name { font-size: 13px; font-weight: 700; color: #111827; }
.gs-deals-brand-tile-disc { 
      font-size: 11px;
    font-weight: 700;
    color: #6d3df5;
 }
.gs-deals-brand-tile--more {  }
.gs-deals-brand-tile-more-num { 
      font-size: 25px;
    font-weight: 700;
    color: #000000a6;
    line-height: 1;
 }
.gs-deals-brand-tile-more-label { font-size: 11px; color: #667085; font-weight: 600; }

/* ---- Section 5: Recently Viewed ---- */
.gs-deals-recent-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.gs-deals-recent-card {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 3px rgb(0, 0, 0, 12%);
}
.gs-deals-recent-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
    align-self: center;
}
.gs-deals-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }
.gs-deals-recent-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.gs-deals-recent-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    margin: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.gs-deals-recent-price {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    margin: 2px 0 0;
}
.gs-deals-recent-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}
.gs-deals-recent-disc {
    font-size: 11px;
    font-weight: 700;
    color: #6d3df5;
    background: #f6f2ff;
    padding: 3px 8px;
    border-radius: 4px;
}

/* ---- Bottom trust strip ---- */
.gs-deals-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
       gap: 20px 16px;
    padding: 18px 24px;
    background: #f6f2ff;
    border-radius: 10px;
    margin-bottom: 18px;
}
.gs-deals-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.gs-deals-trust-icon {
   width: 45px;
    height: 45px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: #f6f2ff !important;
    margin: 0 !important;
}
.gs-deals-trust-icon svg {
      width: 25px;
    height: 25px;
    color: #6d3df5;
 }
.gs-deals-trust-item > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gs-deals-trust-item strong { 
      font-size: 13px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
 }
.gs-deals-trust-item span {
      font-size: 12px;
    font-weight: 600;
    margin: 6px 0 0;
}

/* ---- Newsletter + App (SINGLE combined bar like reference) ---- */
.gs-deals-bottom-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.gs-deals-bottom-card {
    background: #f6f2ff;
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap:wrap;
}
.gs-deals-bottom-card--app { gap: 16px; }
/* Legacy classes kept so older markup still renders if reused elsewhere */
.gs-deals-bottom { display: contents; }
.gs-deals-bottom-left,
.gs-deals-bottom-right { display: contents; }
.gs-deals-newsletter-icon {
    width: 48px;
    height: 48px;
    background: #f6f2ff;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: #6d3df5;
}
.gs-deals-newsletter-icon svg { width: 26px; height: 26px; }
.gs-deals-bottom-text { flex: 1; min-width: 0; }
.gs-deals-bottom-app-text { flex: 1; min-width: 0; }
.gs-deals-bottom-text h3,
.gs-deals-bottom-app-text h3 { margin: 0 0 2px; font-size: 14px; font-weight: 700; color: #111827; }

.gs-deals-bottom-app-text h3{    color: #6d3df5;
    font-size: 11px;
    font-weight: 600;
    margin: 0 0 12px;}

.gs-deals-bottom-text p { 
      margin: 5px 0 0;
    font-size: 10px;
    color: #475467;
    font-weight: 600;
 }
.gs-deals-newsletter-form { 
      display: flex;
    gap: 6px;
    flex: none;
    background: white;
    border-radius: 6px;
}
.gs-deals-newsletter-form input {
padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    width: 160px;
    background: #fff;
}
.gs-deals-newsletter-form button {
    background: #6d3df5;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 12px 15px;
    font-size: 11px;
    cursor: pointer;
      font-weight: 600;
}
.gs-deals-bottom-right > div:first-child { flex: 1; min-width: 0; }
.gs-deals-app { display: none; }  /* legacy class no longer used */
.gs-deals-app-badges {
      display: flex;
    gap: 12px;
    margin-top: 4px;
}
.gs-deals-app-badges a {
       display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ffffff;
    color: #111827;
    padding: 4px 8px;
    border-radius: 5px;
    text-decoration: none;
    border: 1px solid #cbd5e1;
}
.gs-deals-app-badges a span { display: flex; flex-direction: column; line-height: 1.1; }
.gs-deals-app-badges a small { font-size: 7px; opacity: 0.8; }
.gs-deals-app-badges a strong { font-size: 11px; font-weight: 700; }
.gs-deals-app-qr {
  width: 70px;
  height: 70px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 6px;
  padding: 4px;
}
.gs-deals-app-qr svg { width: 100%; height: 100%; }

/* Responsive */
@media (max-width: 1100px) {
  .gs-deals-trend-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gs-deals-lto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-deals-brand-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gs-deals-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Recommended slider card count: 4-up desktop -> 3-up below 1200 -> 2-up
   below 900 -> 1-up below 600. Wider cards stop the price / Buy-Now row
   from wrapping awkwardly on narrow widths. */
@media (max-width: 1200px) {
  .gs-deals-rec-card { flex: 0 0 calc((100% - 32px) / 3); }
  /* Limited Time Offers + Recently Viewed: 2-up from 1200 down (was 1100). */
  .gs-deals-lto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-deals-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:1100px){
    .gs-deals-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}



@media(max-width:1000px){
    .gs-deals-bottom-text{    flex: auto;}
    .gs-deals-newsletter-form{
          width: 100%;
    }
    .gs-deals-newsletter-form input{
          width: 100%;
    }
    .gs-deals-bottom-app-text{
      flex: auto;
    }
}


@media (max-width: 900px)  { .gs-deals-rec-card { flex: 0 0 calc((100% - 16px) / 2); } }
@media (max-width: 600px)  { .gs-deals-rec-card { flex: 0 0 100%; } }
@media (max-width: 700px) {
  .gs-deals-page-head { flex-direction: column; align-items: flex-start; }
  /* Trust row stacks: clear the row's vertical dividers + the per-item
     side padding so every item aligns flush-left (items 2/3 were indented
     22px and showed stray right borders in the stacked layout). */
  .gs-deals-trust-row { flex-direction: column; align-items: flex-start; gap: 12px;     padding: 14px 20px 14px 0;    border-bottom:0; }
  .gs-deals-trust-mini { padding-left: 0; padding-right: 0; border-right: 0; }
  .gs-deals-trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-deals-lto-grid { grid-template-columns: 1fr; }
  .gs-deals-brand-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-deals-recent-grid { grid-template-columns: 1fr; }

  .gs-deals-bottom-row {
    grid-template-columns: 1fr;
  }

  /* "Offers end in:" strip: keep the label on one line and let the
     label + timer + View All wrap as a group instead of breaking text. */
  .gs-deals-section-actions { flex-wrap: wrap; gap: 10px 14px; }
  .gs-deals-section-actions .gs-deals-section-sub { white-space: nowrap; margin-left: 0; }
}
@media (max-width: 480px) {
  /* Smallest phones: trim the page title, give the bottom trust items a
     full-width row each, and shrink the countdown so it never overflows. */
  .gs-deals-page-title h1 { font-size: 23px; }
  .gs-deals-trust-strip { grid-template-columns: 1fr; }
  .gs-deals-timer-unit { min-width: 34px; padding: 6px 9px 8px; }
  .gs-deals-timer-unit strong { font-size: 18px; }
  .gs-deals-timer-colon { font-size: 16px; padding: 0 1px; }
}
@media (max-width: 500px) {
  /* Slider arrows sit at -18px on desktop; pull them inside the slider
     edges on phones so they don't stick out and touch the screen body. */
  .gs-deals-arrow--prev { left: 0; }
  .gs-deals-arrow--next { right: 0; }
}
@media (max-width: 425px) {
  /* Trending cards are too cramped 2-up here - one per row. */
  .gs-deals-trend-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   OFFERS PAGE (PDF reference)
   Two-column: "People are buying now" feed on the left, "Trending
   Offers" 5-card carousel on the right. Trust strip at the bottom.
   ============================================================ */
.gs-offers-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 16px 32px;
  background: #fff;
}
/* Force the storefront shell + main wrappers to white whenever offers
   page is rendered - the no-sidebar shell defaults to #fafbff which
   bleeds through under the panels. */
body:has(.gs-offers-page),
body:has(.gs-offers-page) .gm-shell,
body:has(.gs-offers-page) .gm-main { background: #fff; }
/* Two-column offers layout - PDF reference: left "People are buying"
   feed is wider (roughly 1/3 of the page), right Trending Offers panel
   takes the remaining 2/3. Previous 300px hard-cap on the left made
   it look too narrow vs the right panel. */
.gs-offers-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr);
  gap: 16px;
  margin-bottom: 24px;
  align-items: stretch;
}

/* ---- People are buying now ---- */
.gs-offers-buying {
  background: #f6f2ff;
    border-radius: 8px;
    padding: 18px 18px 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 3px rgb(0, 0, 0, 15%);
}
.gs-offers-buying-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px 20px;
    flex-wrap: wrap;
}
.gs-offers-buying-head h3 {
      margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}
.gs-offers-buying-head a {
  display: inline-flex;
  align-items: center;
  gap: 0 5px;
  font-size: 12px;
  color: #6d3df5;
  font-weight: 600;
  text-decoration: none;
}
.gs-offers-buying-sub {
 display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    font-size: 11px;
    color: #475467;
    font-weight: 600;
}
.gs-offers-buying-sub strong { font-weight: 700; }
.gs-offers-buying-dot {
  width: 7px;
  height: 7px;
  background: #16a34a;
  border-radius: 50%;
  flex: none;
}

.gs-offers-buying-list {
     list-style: none;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    padding: 5px 0 0;
}
.gs-offers-buying-list li {
  display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px 18px;
    align-items: center;
    border-bottom: 2px solid #f0f0f096;
    padding: 5px 15px;
}
.gs-offers-buying-list img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    background: #fff;
    border: 2px solid #e4e7ec;
}
.gs-offers-buying-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.gs-offers-buying-body strong {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gs-offers-buying-price { 
      font-size: 12px;
    font-weight: 700;
    color: #16a34a;
    margin: 2px 0;
 }
.gs-offers-buying-body em {
    font-size: 11px;
    color: #667085;
    font-style: normal;
    font-weight: 600;
}
.gs-offers-buying-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 700;
    color: #6d3df5;
}

/* Join-thousands footer card - PDF reference: soft lavender bg + border,
   purple group-of-people icon inside a lavender disc, generous padding
   so the row reads premium instead of cramped. */
.gs-offers-buying-foot {
       display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    background: #fafbff;
    border: 1px solid #f6f2ff;
    border-radius: 7px;
    margin-top: 0;
    justify-content: center;
}
/* PDF reference: icon sits directly on the card surface - no circle
   background. The 2-people glyph stays in brand purple. */
.gs-offers-buying-foot-icon {
  width: 32px;
  height: 32px;
  background: transparent;
  color: #6d3df5;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none;
  padding: 0;
  line-height: 0;
}
.gs-offers-buying-foot-icon svg {
     width: 23px;
    height: 23px;
  display: block;
  margin: 0;
  color: #6d3df5;
  fill: currentColor;
}
.gs-offers-buying-foot strong {
display: block;
    font-size: 13px;
    color: #111827;
    font-weight: 700;
       line-height: 1.45;
}
.gs-offers-buying-foot span {
       display: block;
    font-size: 11px;
    color: #667085;
    margin-top: 3px;
    line-height: 16px;
}

/* ---- Trending Offers ---- */
.gs-offers-trending {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gs-offers-trending-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 23px;
}
.gs-offers-trending-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}
.gs-offers-trending-head a {
  display: inline-flex;
  align-items: center;
  gap: 0 5px;
  font-size: 13px;
  color: #6d3df5;
    font-weight: 700;
  text-decoration: none;
}
/* Outer light-lavender bordered container around the cards + dots */
.gs-offers-trending-panel {
 background: #f6f2ff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 0 3px rgb(0, 0, 0, 15%);
    height: 100%;
}
.gs-offers-cards-wrap { position: relative; }
.gs-offers-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Vertical padding + matching negative margin so card hover lifts
     and shadow can breathe without being clipped by the auto-overflow
     CSS quirk on the Y axis. */
  padding: 8px 0 14px;
  margin: -8px 0 -14px;
  scroll-snap-type: x mandatory;
}
.gs-offers-cards::-webkit-scrollbar { display: none; }

/* PDF reference: EXACTLY 5 cards visible in the panel with no peek/
   crop on the 5th. Each card locks to one-fifth of the track width
   minus 4/5 of the 10px gap (≈ 8px). Extra cards beyond 5 sit
   off-screen and slide in via scroll-snap when the user pages. */
.gs-offers-card {
  flex: 0 0 calc(20% - 8px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 12px 12px;
  border-radius: 12px;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 360px;
  text-decoration: none;
}
/* Badge pill - PDF reference: white bg + card-themed text colour. The
   `--theme` CSS variable is set inline per card from the PHP `theme`
   field so each card's accent matches its own palette. */
.gs-offers-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    align-self: flex-start;
    padding: 3px 8px;
    background: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: var(--theme, #382986);
    margin-bottom: 10px;
}
.gs-offers-card-head h4 {
     margin: 0px 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.gs-offers-card-head p {
     margin: 0 0 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.90);
}
.gs-offers-card-discount {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 8px;
}
.gs-offers-card-discount strong {
  font-size: 22px;
  font-weight: 800;
  display: inline;
}
.gs-offers-card-art {
  margin: auto 0 10px;
  height: 95px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.gs-offers-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gs-offers-card-timer {
         display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 10px;
    justify-content: center;
    font-weight: 600;
}
/* CTA button - PDF reference: white background with the same card
   theme colour for the label. Picks up --theme from the parent card. */
.gs-offers-card-cta {
    display: block;
    text-align: center;
    background: #fff;
    color: var(--theme, #111827);
    padding: 11px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s ease;
}
.gs-offers-card-cta:hover { box-shadow: 0 6px 16px rgba(11,16,32,.12); }

.gs-offers-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.gs-offers-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.gs-offers-dot:hover { background: #94a3b8; }
.gs-offers-dot.is-active {
  background: #6d3df5;
  transform: scale(1.2);
}

/* ---- Trust strip (light lavender, matches buying card + trending panel) ---- */
.gs-offers-trust {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    background: #f6f2ff;
    border-radius: 8px;
    padding: 14px 20px;
    margin-bottom: 16px;
    box-shadow: 0 0 3px rgb(0, 0, 0, 15%);
}
.gs-offers-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.gs-offers-trust-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 0;
}
.gs-offers-trust-icon svg { width: 20px; height: 20px; display: block; }
.gs-offers-trust-item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gs-offers-trust-item strong { font-size: 14px; font-weight: 700; color: #111827; line-height: 1.2; }
.gs-offers-trust-item span { font-size: 12px; color: #667085; line-height: 1.2; }

/* Responsive */

@media (max-width: 1270px) {
  .gs-offers-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .gs-offers-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .gs-offers-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

/* Trending Offers slider: 5-up desktop -> 4-up below 1300 -> 3-up below
   768 (gap is 10px, so subtract (cards-1)*10px). Phone keeps the fixed
   180px scroll below 640 (rule further down wins). */
@media (max-width: 1300px) {
  .gs-offers-card { flex: 0 0 calc((100% - 30px) / 4); }
}
@media (max-width: 768px) {
  .gs-offers-card { flex: 0 0 calc((100% - 20px) / 3); }
}

@media (max-width: 630px) {
  /* 2 cards per view from 630px down to the smallest phones. */
  .gs-offers-card { flex: 0 0 calc((100% - 10px) / 2); min-height: 320px; }
}
@media (max-width: 550px) {
  .gs-offers-trust { grid-template-columns: repeat(1, minmax(0, 1fr)); }

}
/* ============================================================
   CATEGORY PAGE (Fashion & Lifestyle Rewards - PDF reference)
   Sections: hero / pills / top brands / showcase / promos /
   trending / trust / newsletter+app
   ============================================================ */
.gs-cat-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 0 32px;
}

.gs-cat-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #667085;
  padding: 18px 0 14px;
}
/* PDF reference: "Home" link reads in the brand purple, separator is
   muted gray, and the trailing crumb is dark bold. */
.gs-cat-crumb a { color: #111827; text-decoration: none; font-weight: 500; }
.gs-cat-crumb a:hover { color: #111827; }
.gs-cat-crumb .is-current { color: #667085;
    font-weight: 600; }
.gs-cat-crumb span { color: #cbd5e1; }

/* ---------- Hero ----------
   PDF reference: softer lavender gradient, tighter rounded corners
   (~20px), lighter heading weight, slimmer tagline. Top Picks panel
   sits in the right column at ~210px. */
.gs-cat-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 210px;
    gap: 16px;
    background: #fafbff;
    border-radius: 12px;
    padding: 32px 36px;
    margin-bottom: 28px;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}
/* "Fashion & Lifestyle Rewards" - bold but not extra-bold per PDF. */
.gs-cat-hero-text h1 {
     margin: 0px 0 13px;
    font-size: 38px;
    font-weight: 700;
    color: #111827;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
/* Tagline - PDF reads lighter and smaller than our previous 15/#475467. */
.gs-cat-hero-text p {
    margin: 0 0 26px;
    font-size: 14.5px;
    color: #475467;
    font-weight: 500;
}
.gs-cat-hero-meta {
     display: flex;
    gap: 26px;
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    flex-wrap: wrap;
}
.gs-cat-hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Larger circular icon disc with the tint colour matching the icon
   glyph (each item keeps its own swatch per PDF reference). */
.gs-cat-hero-meta-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.gs-cat-hero-meta-icon svg { width: 20px; height: 20px; }
.gs-cat-hero-meta li > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.gs-cat-hero-meta strong {
      font-size: 12.5px;
    color: #667085;
    font-weight: 600;
    margin: 0 0 5px;
}
.gs-cat-hero-meta em {
       font-style: normal;
    font-size: 12.5px;
    color: #667085;
    font-weight: 600;
}

/* Hero side art - softer masked photo blending into purple halo */
.gs-cat-hero-art {
  position: relative;
  height: 300px;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-cat-hero-art-circle {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 55% 55%, #6d3df5 0%, #c4b5fd 35%, rgba(196, 181, 253, 0.4) 55%, transparent 75%);
  border-radius: 50%;
  z-index: 0;
}
.gs-cat-hero-art img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 320px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  filter: drop-shadow(0 14px 32px rgba(76, 29, 149, 0.25));
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #0b1020 50%, rgba(0,0,0,0.85) 65%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 45%, #0b1020 50%, rgba(0,0,0,0.85) 65%, transparent 78%);
}
.gs-cat-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* CTA buttons - PDF reference uses a more rounded pill silhouette
   (~14px) and slightly more horizontal padding for breathing room. */
.gs-cat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 28px;
      border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.gs-cat-btn--sm { padding: 8px 16px; font-size: 13px; }
.gs-cat-btn--primary {
  background: #6d3df5;
  color: #fff;
}
.gs-cat-btn--primary:hover { background: #5a2de2; }
.gs-cat-btn--ghost {
  background: #fff;
  color: #6d3df5;
    border-color: #cbd5e1;
}
.gs-cat-btn--ghost:hover { background: #f6f2ff; }

/* Hero side panel - Top Picks. PDF reference is a compact white card
   (~200px wide) listing 4 brands with small square logo tiles and a
   "View More →" link at the bottom. */
.gs-cat-hero-picks {
       background: #fff;
    border-radius: 11px;
    padding: 18px 16px 18px;
    box-shadow: 0 8px 24px rgba(109, 61, 245, 0.12);
    width: 100%;
    max-width: 180px;
    justify-self: end;
}
.gs-cat-hero-picks h4 {
    margin: 0 0 13px;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
}
.gs-cat-hero-picks ul {
     list-style: none;
    margin: 0 0 13px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.gs-cat-hero-picks li a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #475467;
    font-size: 12px;
    font-weight: 600
}
.gs-cat-hero-picks li img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
  background: #fafbff;
  padding: 3px;
  flex: none;
}
.gs-cat-hero-pick-fallback {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #f6f2ff;
  color: #6d3df5;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.gs-cat-hero-pick-link {
  display: inline-flex;
  align-items: center;
  gap: 0 5px;
  font-size: 13px;
  color: #6d3df5;
  text-decoration: none;
  font-weight: 600;
}
.gs-cat-hero-pick-link:hover { color: #5a2de2; }

/* ---------- Subcategory pills ---------- */
.gs-cat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
       margin-bottom: 33px;
}
.gs-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 14px;
    background: #fff;
    border-radius: 8px;
    color: #475467;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    box-shadow: 0 0 4px rgb(100, 100, 100, 10%);
}
.gs-cat-pill:hover {
  background: #f6f2ff;
  color: #6d3df5;
  border-color: #c4b5fd;
  transform: translateY(-1px);
}
/* Active pill - first one is highlighted by default to match reference */
.gs-cat-pill.is-active {
     background: #f6f2ff59;
    color: #6d3df5;
    border-color: #6d3df5;
    box-shadow: 0 0 4px #673ab757;
}
.gs-cat-pill-icon {
     width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    line-height: 0;
}
.gs-cat-pill-icon svg { 
      width: 27px;
    height: 27px;
    display: block;
 }

/* ---------- Section heading ---------- */
.gs-cat-section { margin-bottom: 30px; }
.gs-cat-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.gs-cat-section-head h2 {
     margin: 0;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #111827;
}
.gs-cat-section-head a {
    font-size: 13px;
    color: #6d3df5;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0px 5px;
    white-space: nowrap;
    flex: none;
}
.gs-cat-section-head a:hover { color: #5a2de2; }

/* ---------- Brand logo tile (Top Brands + Trending) ---------- */
.gs-cat-tiles {
      display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px 16px;
}
.gs-cat-tile {
     display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 18px 18px;
    background: #fff;
    /* Top Categories tile (.gm-tcat) treatment, requested for the
       "Top Brands in <Category>" cards: 2px grey border that turns
       blue/purple on hover. The hover rule below was always here but had
       no border width to colour, so the effect never showed until now. */
    border: 2px solid #e4e7ec;
    border-radius: 14px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    min-width: 0;
}
.gs-cat-tile:hover {
  border-color: #c4b5fd;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(109, 61, 245, 0.1);
}
.gs-cat-tile-art {
 width: 56px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.gs-cat-tile-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gs-cat-tile-art span {
  font-weight: 700;
  font-size: 11px;
  color: #475467;
  text-align: center;
}
.gs-cat-tile-name {
    font-size: 13px;
    font-weight: 600;
    color: #667085;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.gs-cat-tile-disc {
      font-size: 11px;
    font-weight: 600;
    color: #6d3df5;
    letter-spacing: 0;
}
.gs-cat-tile--more {
        background: white;
    justify-content: center;
    gap: 0;
}
.gs-cat-tile-more-num {
     font-size: 24px;
    font-weight: 700;
    color: #111827;
}
.gs-cat-tile-more-label {
      font-size: 12px;
    color: #111827;
    font-weight: 600;
}

/* ---------- Slider wrap (Showcase + Trending share the same arrow logic) ---------- */
.gs-cat-slider-wrap {
  position: relative;
}

/* ---------- Showcase cards (Top Brands for You) - horizontal slider ---------- */
/* Fixed card width so a single card doesn't stretch to full container
   width when the brand DB is sparse. Flex instead of grid so the
   children stay at their natural size. */
.gs-cat-showcase {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Padding + negative margin so the hover translate(-2px) + shadow
     breathe vertically without expanding the layout. The 4px on left
     also keeps the first card from clipping at its left edge. CSS
     quirk: overflow-x:auto coerces overflow-y to auto/hidden, so any
     content past the padding box is clipped on Y. */
  padding: 8px 0px 14px;
  margin: -8px -4px -14px;
  scroll-snap-type: x proximity;
  scroll-padding-left: 0;
}
.gs-cat-showcase::-webkit-scrollbar { display: none; }
.gs-cat-showcase-card { scroll-snap-align: start; }
/* PDF reference layout - horizontal card: info on LEFT, lifestyle
   photo on RIGHT. Lock each card to EXACTLY a 4-up width so 4 cards
   fit cleanly in the viewport with no half-cropped 5th peeking.
   25% of track minus 3/4 of the 14px gap (≈ 11px) gives each card
   one quarter of the visible row. Extra cards beyond 4 sit off-screen
   and slide in via the next chevron. */
.gs-cat-showcase-card {
  flex: 0 0 calc(25% - 11px);
}
.gs-cat-showcase-card {
      display: flex;
    flex-direction: row;
    background: #f6f2ff69 !important;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    min-height: 240px;
    box-shadow: 0 0 3px rgb(0, 0, 0, 18%);
}
.gs-cat-showcase-card:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
/* Right half of card - lifestyle photo, no logo overlay anymore (logo
   now lives at the top of the body on the left). */
.gs-cat-showcase-art {
  flex: 0 0 45%;
  position: relative;
  overflow: hidden;
}
.gs-cat-showcase-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Logo - integrated at top of body, no white badge wrapper. The
   anchor element stays so click bubbles to the card link if needed. */
.gs-cat-showcase-logo {
  display: inline-flex;
  align-items: center;
  height: 28px;
  margin-bottom: 6px;
}
.gs-cat-showcase-logo img {
  max-width: 80px;
  max-height: 100%;
  object-fit: contain;
}
.gs-cat-showcase-body {
  flex: 1 1 55%;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.gs-cat-showcase-body h3 {
      margin: 0 0 7px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    line-height: 18px;
}
.gs-cat-showcase-validity {
    font-size: 11px;
    color: #111827;
    margin-bottom: 6px;
}
.gs-cat-showcase-disc {
      align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: #6d3df5;
    background: #fddff0;
    padding: 3px 6px;
    border-radius: 7px;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}
.gs-cat-showcase-price {
      font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 7px;
    margin-top: auto;
}
/* Buy Now button - PDF reference: compact pill, content-width, sits
   at the BOTTOM-LEFT of the body (margin-top: auto pushes it down
   so it pins to the bottom no matter how tall the title wraps). */
.gs-cat-showcase-card .gs-cat-btn {
 margin-top: 0;
    align-self: flex-start;
    padding: 7px 20px;
    border-radius: 8px;
    font-size: 12px;
}

/* ---------- Promo banner row ---------- */
.gs-cat-promos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
.gs-cat-promo {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 18px 18px;
    border-radius: 10px;
    color: #111827;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    min-height: 110px;
        box-shadow: 0 0 3px rgb(0, 0, 0, 10%);
}
/* PDF reference uses very pale pastel tints across the promo strip -
   our previous gradients ramped too dark on one edge. Switched to
   nearly-flat tints so the strip reads soft and uniform per card. */
.gs-cat-promo--blue   { background: linear-gradient(135deg, #f6f2ff, #fafbff); }
.gs-cat-promo--pink   { background: linear-gradient(135deg, #f6f2ff, #fafbff); }
.gs-cat-promo--amber  { background: linear-gradient(135deg, #fff7e2, #fafbff); }
.gs-cat-promo--purple { background: linear-gradient(135deg, #f6f2ff, #fafbff); }

.gs-cat-promo-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Kicker gets its own colour per card variant to match the PDF
   reference: blue for Bank Offer, orange for Festive, green for
   Weekend Bonanza, purple for Refer & Earn. */
.gs-cat-promo-kicker {
    font-size: 14px;
    font-weight: 600;
    color: #475467;
    text-transform: capitalize;
    letter-spacing: 0.04em;
}
.gs-cat-promo--blue   .gs-cat-promo-kicker { color: #6d3df5; }
.gs-cat-promo--pink   .gs-cat-promo-kicker { color: #6d3df5; }
.gs-cat-promo--amber  .gs-cat-promo-kicker { color: #16a34a; }
.gs-cat-promo--purple .gs-cat-promo-kicker { color: #6d3df5; }
.gs-cat-promo h4 {
     margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #0b1020c7;
    line-height: 1.6;
}
.gs-cat-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 0 5px;
    font-size: 12px;
    font-weight: 600;
    color: #475467;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 0px 5px;
}
/* Promo illustrations - inline SVG; sized to roughly match the
   reference comp where the art occupies the right side of the card. */
.gs-cat-promo-art {
  width: 100px;
  height: 70px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-cat-promo-art svg { width: 100%; height: 100%; display: block; }

/* ---------- Trending Now horizontal carousel with arrows ---------- */
/* Flex with fixed card width so a sparse data set doesn't stretch one
   card across the row. */
.gs-cat-trending {
    display: flex;
    gap: 12px 15px;
    overflow-x: auto;
    /* Padding + negative margin so the hover translate(-2px) + shadow
       on cards has vertical room without expanding the visible layout.
       CSS quirk: overflow-x:auto coerces overflow-y to auto/hidden,
       which clips anything past the padding box on the Y axis. */
    padding: 8px 4px 14px;
    margin: -8px -4px -14px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.gs-cat-trending::-webkit-scrollbar { display: none; }
.gs-cat-trend-card { flex: 0 0 200px; }

/* Horizontal trending card: name+gift card+discount on the left,
   brand logo on the right - matches the reference comp. */
.gs-cat-trend-card {
     display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 14px 14px;
    background: #fff;
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 0 3px rgb(0, 0, 0, 14%);
}
.gs-cat-trend-card:hover {
  border-color: #c4b5fd;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(109, 61, 245, 0.1);
}
.gs-cat-trend-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gs-cat-trend-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-cat-trend-text > span {
     font-size: 11px;
    color: #475467;
    margin-bottom: 16px;
    margin-top: 5px;
    font-weight: 600;
}
.gs-cat-trend-disc {
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  color: #6d3df5;
  background: #f6f2ff;
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
  letter-spacing: 0.02em;
}
.gs-cat-trend-logo {
  width: 44px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.gs-cat-trend-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gs-cat-trend-logo span {
  font-size: 16px;
  font-weight: 800;
  color: #475467;
}

.gs-cat-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475467;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  z-index: 2;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.gs-cat-scroll-btn:hover { background: #6d3df5; color: #fff; border-color: #6d3df5; }
.gs-cat-scroll-btn--prev { left: -16px; }
.gs-cat-scroll-btn--next { right: -16px; }
/* PDF reference: only the relevant arrow is visible based on scroll
   position. JS adds .is-hidden when the track is at its respective
   edge. We hide via opacity + pointer-events so the layout doesn't
   shift when arrows toggle in and out. */
.gs-cat-scroll-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
@media (max-width: 720px) {
  .gs-cat-scroll-btn--prev { left: 0; }
  .gs-cat-scroll-btn--next { right: 0; }
}

/* ---------- Trust badges row ---------- */
.gs-cat-trust {
display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
    background: #fafbff;
    border-radius: 8px;
    padding: 18px 24px;
}
.gs-cat-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.gs-cat-trust-icon {
      width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    line-height: 0;
    background: #fafbff !important;
}
.gs-cat-trust-icon svg { 
      width: 20px;
    height: 20px;
    display: block;
    color: #6d3df5;
 }
.gs-cat-trust-item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gs-cat-trust-item strong {
      font-size: 12px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}
.gs-cat-trust-item span { 
      font-size: 12px;
    color: #667085;
    font-weight: 600;
    margin: 3px 0 0;
}

/* ---------- Bottom: Newsletter + App (single bar like reference) ---------- */
.gs-cat-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
    gap: 56px;
    margin-bottom: 16px;
    background: #fafbff;
    border-radius: 8px;
    padding: 18px 18px 18px 28px;
    align-items: center;
}
.gs-cat-newsletter,
.gs-cat-app {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
/* Newsletter row - PDF reference: heading + tagline on the LEFT, form
   (input + button) on the RIGHT, all in ONE horizontal row. No wrap -
   we let the input shrink instead of pushing the form below the text. */
.gs-cat-newsletter {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap:wrap;
}
.gs-cat-newsletter-text { flex: 0 0 auto; min-width: 0; }
.gs-cat-newsletter h3,
.gs-cat-app h3 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}
.gs-cat-newsletter-text p {
  margin: 0;
}
.gs-cat-newsletter p,
.gs-cat-app p {
    margin: 3px 0 10px;
    font-size: 12px;
    color: #475467;
    font-weight: 600;

}
.gs-cat-newsletter-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex: 1 1 0;
  margin-top: 0;
  min-width: 0;
      flex-wrap: wrap;
}
.gs-cat-newsletter-form input { min-width: 0; }
.gs-cat-newsletter-form input { background: #fff; }
.gs-cat-newsletter-form input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #e4e7ec;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
}
.gs-cat-newsletter-form input:focus { border-color: #6d3df5; }
.gs-cat-newsletter-form button {
  background: #6d3df5;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.gs-cat-newsletter-form button:hover { background: #5a2de2; }

.gs-cat-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: 16px;
  align-items: center;
}
.gs-cat-app-info { min-width: 0; }
/* Store badges - PDF reference uses compact black pills with a
   monochrome white glyph (Play triangle, Apple). Smaller padding +
   tighter type than our previous chunky variant. */
.gs-cat-app-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.gs-cat-app-badges a {
     display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: #475467;
    padding: 5px 12px;
    border-radius: 7px;
    text-decoration: none;
    transition: background 0.15s ease;
    border: 2px solid #e4e7ec;
}
.gs-cat-app-badges a svg{    width: 13px;}


/* Compact badge type - small uppercase eyebrow + bold store name. */
.gs-cat-app-badge-text small {     font-size: 8px; opacity: 0.85; letter-spacing: 0.04em; text-transform: uppercase; }
.gs-cat-app-badge-text strong { font-size: 13px; font-weight: 700; letter-spacing: 0; }
.gs-cat-app-badge-icon { display: inline-flex; align-items: center; }
.gs-cat-app-badge-text { display: flex; flex-direction: column; line-height: 1.15; gap: 1px; }
.gs-cat-app-badge-text small { font-size: 8px; opacity: 0.85; letter-spacing: 0.04em; text-transform: uppercase; }
.gs-cat-app-badge-text strong { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }

.gs-cat-app-qr {
  width: 90px;
  height: 90px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-cat-app-qr svg { width: 100%; height: 100%; display: block; }

/* Responsive */
@media(max-width:1200px){
  .gs-cat-newsletter{
        gap: 5px;
  }
  .gs-cat-newsletter-text, .gs-cat-newsletter-form{
    width: 100%;
  }
  .gs-cat-bottom{
            grid-template-columns: 1fr;
                    gap: 20px 0;
  }
  /* Below 1200px the 8-up brand tiles get narrow - shrink the discount
     text so "UP TO 21.5% OFF" stays on one line. */
  .gs-cat-tile-disc { font-size: 10px; }
  /* Showcase price was wrapping to 2 lines on the narrower cards. */
  .gs-cat-showcase-price { font-size: 14px; }
}
@media (max-width: 1100px) {
  .gs-cat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Showcase is a flex slider (not a grid) - size the CARDS, not the
     track. 2 cards per view on tablet. */
  .gs-cat-showcase-card { flex: 0 0 calc(50% - 7px); }
  .gs-cat-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-cat-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Hero 992-1100px: keep text LEFT + image RIGHT (2 columns). The Top
   Picks card floats over the image's top-right corner (slight overlap),
   and the type/spacing tightens to fit this narrower band. */
@media (min-width: 992px) and (max-width: 1100px) {
  .gs-cat-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "text art";
    gap: 20px;
    padding: 26px 28px;
    position: relative;
    align-items: center;
  }
  .gs-cat-hero-text { grid-area: text; }
  .gs-cat-hero-art  { grid-area: art; display: flex; height: 300px; margin: 0; max-width: none; }
  .gs-cat-hero-art img { max-width: 300px; }
  .gs-cat-hero-picks {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 208px;
    margin: 0;
    z-index: 3;
  }
  .gs-cat-hero-text h1 { font-size: 30px; line-height: 1.15; margin-bottom: 10px; }
  .gs-cat-hero-text > p { font-size: 13px; }
  .gs-cat-hero-meta { gap: 14px 18px; margin-bottom: 22px; }
  .gs-cat-hero-ctas { gap: 12px; }
}
/* Hero <=992px: content on TOP, image BELOW and LEFT-aligned. Top Picks
   is hidden. */
@media (max-width: 992px) {
  .gs-cat-hero {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "art";
    align-items: start;
  }
  .gs-cat-hero-text  { grid-area: text; }
  /* Below 992px the hero shows just the text content - both the image
     and the Top Picks panel are hidden. */
  .gs-cat-hero-picks { display: none; position: static; }
  .gs-cat-hero-art   { display: none; }
}
@media (max-width: 768px) {
  /* Category pills become a single horizontally-scrollable strip instead
     of wrapping onto multiple rows. */
  .gs-cat-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 4px;
  }
  .gs-cat-pills::-webkit-scrollbar { display: none; }
  .gs-cat-pill { flex: 0 0 auto; }
}
@media (max-width: 640px) {
  .gs-cat-page { padding: 0 12px 24px; }
  .gs-cat-hero { padding: 22px 20px; min-height: auto; }
  .gs-cat-hero-text h1 { font-size: 26px; }
  .gs-cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Section head: keep the title and "View All" on one row - the link
     never wraps, the heading just shrinks/wraps if long. */
  .gs-cat-section-head { align-items: center; gap: 10px; }
  .gs-cat-section-head h2 { font-size: 17px; line-height: 1.25; }
  .gs-cat-section-head a { white-space: nowrap; flex: none; }
  /* Showcase slider: one card per view (with a small peek of the next)
     instead of the broken 25% strips. */
  .gs-cat-showcase-card { flex: 0 0 86%; }
  .gs-cat-promos { grid-template-columns: 1fr; }
  .gs-cat-trust { grid-template-columns: 1fr; }
  .gs-cat-app { grid-template-columns: 1fr; }
  .gs-cat-app-qr { display: none; }
  /* Newsletter: stack the copy above a full-width email + button row. */
  .gs-cat-newsletter { flex-direction: column; align-items: stretch; gap: 12px; }
  .gs-cat-newsletter-form { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  /* Narrowest phones: 2-up brand tiles read better than 3-up, and give
     the showcase card a touch more width. */
  .gs-cat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-cat-showcase-card { flex: 0 0 90%; }
}

/* ============================================================
   CART PAGE (Your Cart - PDF reference design)
   Two-column layout: items + delivery cards on the left,
   sticky Order Summary on the right. Free-delivery progress
   bar at the top of the left column, trust strip at the
   bottom of the page.
   ============================================================ */
/* Breadcrumb standardised to match the category page (.gs-cat-crumb):
   purple links, grey current, 13px / 8px gap, same vertical spacing. */
.gs-cart2-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #667085;
    margin: 0;
    padding: 18px 12px 14px;
}
.gs-cart2-crumb a { color: #111827; text-decoration: none; font-weight: 500; }
.gs-cart2-crumb a:hover { color: #111827; }
.gs-cart2-crumb .is-current { color: #667085; font-weight: 600; }
.gs-cart2-crumb span { color: #cbd5e1; }

/* Page title - PDF reference: large bold black with a muted item count
   pill alongside. Slightly looser top spacing and tighter bottom
   spacing than before so the breadcrumb hugs the title. */
.gs-cart2-title {
    font-size: 21px;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.4px;
    margin: 0 0 14px;
    padding: 0 12px;
}
.gs-cart2-title small {
    font-size: 14px;
    font-weight: 600;
    color: #667085;
    margin-left: 3px;
}

.gs-cart2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  padding: 0 12px;
  margin-bottom: 40px;
  align-items: flex-start;
}
.gs-cart2-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- Free delivery progress ----------
   PDF reference: soft cream/lavender tinted strip (not pure white)
   to set it apart from the cart-item cards below. */
.gs-cart2-progress {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 7px 16px;
    background: #fafbff;
    border: 1px solid #e4e7ec;
    border-radius: 7px;
}
.gs-cart2-progress-info {
      display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475467;
    font-size: 12px;
}
.gs-cart2-progress-info svg{
      width: 25px;
    height: 25px;
}
.gs-cart2-progress-info strong { color: #111827; font-weight: 700; }
.gs-cart2-progress-bar {
  display: block;
  height: 6px;
  background: #fafbff;
  border-radius: 999px;
  overflow: hidden;
}
.gs-cart2-progress-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #6d3df5, #6d3df5);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.gs-cart2-progress-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6d3df5;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.gs-cart2-progress-link:hover { color: #5a2de2; }

/* ---------- Combined wrapper: cart-item(s) + delivery method +
   personal message + invoice details all sit INSIDE ONE bordered
   container with hairline dividers between sections (PDF reference).
   The wrapper carries the border; inner sections drop theirs via the
   selectors below. ---------- */
.gs-cart2-combo {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  overflow: hidden;
}
.gs-cart2-combo > .gs-cart2-item,
.gs-cart2-combo > .gs-cart2-card {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.gs-cart2-combo > * + * {
  border-top: 1px solid #e4e7ec;
}

/* ---------- Cart item card ---------- */
.gs-cart2-item {
  display: grid;
  grid-template-columns: auto 160px 1fr;
  gap: 18px;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 16px 18px;
  position: relative;
  margin-bottom:14px;
}
.gs-cart2-item::after{
        display: block;
        content:"";
        height: 1px;
        width: auto;
        background:#e4e7ec;
        position:absolute;
        left:18px;
        right:18px;
        bottom:0;

}
.gs-cart2-item-check {
  display: inline-flex;
  align-items: flex-start;
  padding-top: 4px;
  cursor: pointer;
  position: relative;
}
.gs-cart2-item-check input { position: absolute; opacity: 0; cursor: pointer; }
.gs-cart2-item-check span {
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  position: relative;
}
.gs-cart2-item-check input:checked + span {
  background: #6d3df5;
  border-color: #6d3df5;
}
.gs-cart2-item-check input:checked + span::after {
  content: "";
  position: absolute;
      left: 4px;
    top: 1px;
  width: 6px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.gs-cart2-item-art {
  width: 140px;
  height: 95px;
  border-radius: 10px;
  background: #0b1020;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
}
.gs-cart2-item-art img { max-width: 80%; max-height: 60%; object-fit: contain; }
.gs-cart2-item-init { font-size: 36px; font-weight: 800; font-style: italic; }

.gs-cart2-item-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gs-cart2-item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 0;
}
/* Bestseller pill - PDF reference: title-case "Bestseller" (NOT all
   caps), star icon, soft lavender bg, purple text. */
.gs-cart2-item-bestseller {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: #fff7e2;
  color: #111827;
  border: 1px solid #f6c95e;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.gs-cart2-item-bestseller svg { color: #f6c95e; }
.gs-cart2-item-name {
  margin: 6px 0 4px;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}
.gs-cart2-item-tag {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #667085;
}
/* Instant Delivery / Validity strip - PDF reference: vertical hairline
   separator between the two items (and any future siblings) instead
   of relying on flex gap alone. */
.gs-cart2-item-mini {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 12.5px;
  color: #475467;
}
.gs-cart2-item-mini span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px;
}
.gs-cart2-item-mini span:first-child { padding-left: 0; }
.gs-cart2-item-mini span + span { border-left: 1px solid #e4e7ec; }

/* Save for later / Remove - PDF reference: actions sit at the TOP-RIGHT
   of the card, separated by a thin vertical line. The icons keep the
   heart + trash glyphs from the markup. */
.gs-cart2-item-actions {
  display: inline-flex;
  flex-direction: row;
  gap: 0;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-start;
}
.gs-cart2-save,
.gs-cart2-remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  font-size: 12.5px;
  font-weight: 500;
  color: #667085;
  cursor: pointer;
  padding: 4px 14px;
}
.gs-cart2-save { border-right: 1px solid #e4e7ec; }
.gs-cart2-remove { padding-right: 0; }
.gs-cart2-save:hover  { color: #5a2de2; }
.gs-cart2-remove:hover { color: #ef4444; }

/* Foot row - PDF reference: 3 columns aligned to the BOTTOM with
   denomination select + qty stepper sized similarly and the price
   pinned far-right. */
.gs-cart2-item-foot {
  display: grid;
  grid-template-columns: minmax(0, 180px) auto 1fr;
  gap: 28px;
  align-items: end;
  padding-top: 5px;
}
.gs-cart2-item-foot .gs-cart2-price { justify-self: end; }
.gs-cart2-field { display: flex; flex-direction: column; gap: 6px; }
.gs-cart2-field label { font-size: 12px; color: #667085; font-weight: 500; }

/* Denomination select - matches the field width with a thin border
   and a right-aligned chevron, just like the PDF. */
.gs-cart2-select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  width: 100%;
}
.gs-cart2-select svg { color: #667085; }

/* Quantity stepper - inline borderless with separator-style internal
   borders (PDF reference). Slimmer than the previous filled-button
   variant. */
.gs-cart2-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.gs-cart2-qty button {
  width: 34px; height: 32px;
  background: #fff;
  border: none;
  color: #111827;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}
.gs-cart2-qty button:hover { background: #fafbff; }
.gs-cart2-qty input {
  width: 40px;
  height: 32px;
  text-align: center;
  border: none;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  outline: none;
  -moz-appearance: textfield;
}
.gs-cart2-qty input::-webkit-outer-spin-button,
.gs-cart2-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Per-line price - PDF reference: large bold value with an optional
   green "You Save X (Y%)" pill underneath. */
.gs-cart2-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 100px;
}
.gs-cart2-price strong {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.2px;
}
.gs-cart2-price-save {
  display: inline-block;
  padding: 3px 8px;
  background: #ecfdf5;
  color: #16a34a;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

/* ---------- Section cards (Delivery / Message / Coupons / GST) ---------- */
.gs-cart2-card {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 0px 18px 14px;
}
.gs-cart2-card--row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
}
.gs-cart2-card-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}
.gs-cart2-card-title strong {     color: #111827;
    margin-right: 4px;}
.gs-cart2-card-title small { font-weight: 400; color: #667085; font-size: 12px; }
.gs-cart2-card-sub {
  margin: 0 0 14px;
  font-size: 12px;
  color: #667085;
}
.gs-cart2-card-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f6f2ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.gs-cart2-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gs-cart2-card-text strong { font-size: 14px; font-weight: 600; color: #111827; }
.gs-cart2-card-text span { font-size: 12px; color: #667085; }

/* Delivery method radio cards */
.gs-cart2-delivery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.gs-cart2-delivery-opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding:15px 12px ;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.gs-cart2-delivery-opt input { position: absolute; opacity: 0; pointer-events: none; }
/* Radio indicator: empty circle by default. When the option is
   selected JS toggles .is-selected, which fills the circle purple
   and reveals a white checkmark inside (PDF reference - matches the
   "selected check" pattern used elsewhere on the storefront). */
.gs-cart2-delivery-opt::before {
     content: "";
    width: 10px;
    height: 10px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    flex: none;
    background: #fff no-repeat center / 11px 11px;
    margin: 0;
}
.gs-cart2-delivery-opt.is-selected {
  background: #f6f2ff;
  border-color: #6d3df5;
}
.gs-cart2-delivery-opt.is-selected::before {
  border-color: #6d3df5;
  background-color: #6d3df5;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
}
.gs-cart2-delivery-icon {
      width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fafbff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
        line-height: 0;
}
.gs-cart2-delivery-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.gs-cart2-delivery-opt > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gs-cart2-delivery-opt strong { font-size: 12px; font-weight: 600; color: #111827; }
.gs-cart2-delivery-opt span  {     font-size: 10px; color: #667085; line-height: 1.4; }
.gs-cart2-delivery-pill {
   position: absolute;
    top: -6px;
    right: 0;
    background: #f6f2ff;
    color: #6d3df5;
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    white-space: nowrap;
}


/* Personal message - single-line input matching reference */
.gs-cart2-msg {
      display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 4px 14px;
    background: white;
    border-radius: 5px;
    align-items: center;
    border: 1px solid #e4e7ec;
    margin: 10px 0 0;
}
.gs-cart2-msg svg { flex: none; color: #94a3b8; }
.gs-cart2-msg input {
    background: transparent;
    border: 0;
    outline: none;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    color: #111827;
    font-family: inherit;
    width: 100%;
    min-width: 0;
}
.gs-cart2-msg input::placeholder { color: #94a3b8; }
.gs-cart2-msg-count { font-size: 11px; color: #667085; flex: none; }

/* Coupon - PDF reference: input and "Apply" button are SEPARATE
   rounded-bordered controls with a gap between them, not joined
   inside one wrapper. */
.gs-cart2-coupon {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  background: transparent;
}
.gs-cart2-coupon input {
  width: 220px;
  padding: 9px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  background: #fff;
  transition: border-color 0.15s ease;
}
.gs-cart2-coupon input:focus { border-color: #6d3df5; }
.gs-cart2-coupon input::placeholder { color: #94a3b8; }
.gs-cart2-coupon button {
  background: #fff;
  border: 1px solid #f6f2ff;
  border-radius: 8px;
  color: #6d3df5;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.gs-cart2-coupon button:hover { background: #f6f2ff; }
.gs-cart2-coupon-applied {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #ecfdf5;
  color: #16a34a;
  border-radius: 999px;
  font-size: 13px;
}
.gs-cart2-coupon-applied button {
  background: transparent;
  border: none;
  color: #16a34a;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.gs-cart2-coupon-error {
  margin-top: 6px;
  padding: 8px 12px;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 6px;
  font-size: 12px;
}

/* GST toggle */
.gs-cart2-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.gs-cart2-switch input { opacity: 0; width: 0; height: 0; }
.gs-cart2-switch span {
  position: absolute; inset: 0;
  background: #e4e7ec;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.gs-cart2-switch span::before {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
.gs-cart2-switch input:checked + span { background: #6d3df5; }
.gs-cart2-switch input:checked + span::before { transform: translateX(18px); }

/* ---------- Invoice Details (GST) form ---------- */
.gs-cart2-invoice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.gs-cart2-invoice-head .gs-cart2-card-title { margin-bottom: 4px; }
.gs-cart2-invoice-head .gs-cart2-card-sub { margin: 0; }

.gs-cart2-gst-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #475467;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  flex: none;
}

.gs-cart2-invoice-form { display: flex; flex-direction: column; gap: 14px; }
.gs-cart2-form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.gs-cart2-form-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.gs-cart2-form-row label > span {
  font-size: 12px;
  font-weight: 600;
  color: #475467;
}
.gs-cart2-form-row input,
.gs-cart2-form-row select {
  width: 100%;
  padding: 7px 12px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  font-size: 13px;
  color: #111827;
  background: #fff;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s ease;
}
.gs-cart2-form-row input:focus,
.gs-cart2-form-row select:focus { border-color: #6d3df5; }
.gs-cart2-form-row input::placeholder { color: #94a3b8; }

.gs-cart2-select-wrap {
  position: relative;
}
.gs-cart2-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  cursor: pointer;
}
.gs-cart2-select-wrap svg {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #667085;
  pointer-events: none;
}

.gs-cart2-invoice-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: 12px;
  color: #667085;
}
.gs-cart2-invoice-note svg { color: #94a3b8; }

/* When GST toggle is off, hide the form */
.gs-cart2-invoice[data-state="closed"] .gs-cart2-invoice-form { display: none; }

/* ---------- Right rail wrapper (summary + need-help stack) ---------- */
.gs-cart2-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
  min-width: 0;
}

/* ---------- Order Summary (right) ---------- */
.gs-cart2-summary {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
    padding: 16px 19px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gs-cart2-summary h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #111827;
}
.gs-cart2-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
      color: #111827;
}
.gs-cart2-sum-row strong { font-weight: 600; color: #111827; }
.gs-cart2-sum-row--save strong { color: #16a34a; }
.gs-cart2-sum-row--save span  { color: #16a34a; font-weight: 600; }
.gs-cart2-sum-info {
  color: #6d3df5;
  cursor: help;
  margin-left: 5px;
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
}
.gs-cart2-sum-info svg { display: block; }
.gs-cart2-sum-divider {
  height: 1px;
  background: #fafbff;
  margin: 4px 0;
}
.gs-cart2-sum-total {
  display: flex;
  justify-content: space-between;
  align-items:start;
}
.gs-cart2-sum-total > div { display: flex; flex-direction: column; gap: 2px; }
.gs-cart2-sum-total span { font-size: 14px; font-weight: 700; color: #111827; }
.gs-cart2-sum-total small {
      font-size: 11px;
    color: #475467;
    margin: 4px 0 0;
 }
.gs-cart2-sum-total strong { 
  font-size: 18px;
    font-weight: 700;
    color: #6d3df5;
}
.gs-cart2-sum-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f6f2ff;
  border-radius: 10px;
  border: 1px dashed #f6f2ff;
}
.gs-cart2-sum-banner-emoji { font-size: 18px; }
.gs-cart2-sum-banner > div { display: flex; flex-direction: column; }
.gs-cart2-sum-banner strong { font-size: 12px; font-weight: 700; color: #5a2de2; }
.gs-cart2-sum-banner span { font-size: 11px; color: #6d3df5; }

.gs-cart2-cta {
display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease;
}
.gs-cart2-cta--primary {
  background: #6d3df5;
  color: #fff;
}
.gs-cart2-cta--primary:hover { background: #5a2de2; }
.gs-cart2-cta--ghost {
  background: #fff;
  color: #6d3df5;
  border-color: #f6f2ff;
}
.gs-cart2-cta--ghost:hover { background: #f6f2ff; }

/* Safe & Secure Payments - PDF reference: bordered card with NO
   background tint, lavender-circle icon, and the payment-icons row
   nested INSIDE the same card separated by a hairline top border. */
.gs-cart2-secure {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: transparent;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
}
.gs-cart2-secure-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
}
.gs-cart2-secure-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f6f2ff;
  color: #6d3df5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.gs-cart2-secure strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}
.gs-cart2-secure-head > div > span {
  display: block;
  font-size: 11.5px;
  color: #667085;
  line-height: 1.4;
     margin-top: 4px;
}
/* Payment-icon row - sits inside .gs-cart2-secure with a top divider
   so it visually shares the card with the safe-payments text. */
.gs-cart2-payicons {
      display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid #e4e7ec;
    font-size: 12px;
    margin: 6px 0px 0;
}
.gs-cart2-payicons > span { line-height: 1; }
.gs-cart2-payicon--visa  { color: #1a1f71; font-weight: 900; font-style: italic; }
.gs-cart2-payicon--rupay { color: #16a34a; font-weight: 800; }
.gs-cart2-payicon--upi   { color: #111827; font-weight: 800; }
.gs-cart2-payicon--pci   {
  background: #1e293b; color: #fff;
  padding: 2px 6px; border-radius: 4px;
  font-size: 9px; font-weight: 800; line-height: 1.05;
  text-align: center;
}
.gs-cart2-payicon--mc {
  display: inline-flex; align-items: center; line-height: 1;
}
.gs-cart2-payicon--mc .gs-cart2-mc-a,
.gs-cart2-payicon--mc .gs-cart2-mc-b {
  width: 14px; height: 14px; border-radius: 50%; display: inline-block;
}
.gs-cart2-payicon--mc .gs-cart2-mc-a { background: #eb001b; }
.gs-cart2-payicon--mc .gs-cart2-mc-b { background: #f6c95e; margin-left: -6px; }

/* Need Help card (right rail, below summary) */
.gs-cart2-help {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 16px 18px;
}
/* Headset icon - PDF reference: no circle background, icon sits
   on the card surface directly. Container kept for alignment but
   transparent. */
.gs-cart2-help-icon {
  width: 32px;
  height: 32px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.gs-cart2-help-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gs-cart2-help-body strong { font-size: 13px; font-weight: 700; color: #111827; }
.gs-cart2-help-body > span {
  font-size: 11px;
  color: #475467;
  margin-bottom: 6px;
}
/* Phone + email side-by-side - PDF reference: row layout with a thin
   vertical separator between them (drawn as border-right on the first
   anchor; suppressed on the last). */
.gs-cart2-help-rows {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.gs-cart2-help-rows a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #475467;
  text-decoration: none;
  padding: 0 12px;
  border-right: 1px solid #e4e7ec;
}
.gs-cart2-help-rows a:first-child { padding-left: 0; }
.gs-cart2-help-rows a:last-child  { border-right: 0; }
.gs-cart2-help-rows a:hover { color: #6d3df5; }
.gs-cart2-help-rows svg { color: #94a3b8; flex: none; }

/* Empty state */
.gs-cart2-empty {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  margin: 0 12px;
}
.gs-cart2-empty h3 { font-size: 20px; color: #111827; margin: 0 0 8px; }
.gs-cart2-empty p { color: #475467; margin: 0 0 18px; }

/* ---------- Bottom trust strip - inside main column, compact row.
   PDF reference: hairline vertical separators between each column
   (not on the final one), and a unified lavender/purple palette for
   every icon disc and its glyph (no per-item color swatches). ---------- */
.gs-cart2-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 14px 0;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
}
.gs-cart2-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0 18px;
  border-right: 1px solid #e4e7ec;
}
.gs-cart2-trust-item:last-child { border-right: 0; }
.gs-cart2-trust-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f6f2ff;
  color: #6d3df5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 0;
}
.gs-cart2-trust-icon svg { width: 18px; height: 18px; display: block;    stroke: rgb(109, 61, 245); }
.gs-cart2-trust-item > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gs-cart2-trust-item strong { font-size: 13px; font-weight: 700; color: #111827; line-height: 1.2; }
.gs-cart2-trust-item span { font-size: 11px; color: #667085; line-height: 1.3; }

/* Responsive */
@media (max-width: 1100px) {
  .gs-cart2-grid { grid-template-columns: 1fr; }
  .gs-cart2-rail { position: static; }
}
@media (max-width: 768px) {
  .gs-cart2-title { font-size: 22px; }
  .gs-cart2-progress { grid-template-columns: 1fr; gap: 10px; }
  .gs-cart2-item { grid-template-columns: auto 110px 1fr; gap: 12px; padding: 14px; }
  .gs-cart2-item-art { width: 110px; height: 80px; }
  .gs-cart2-item-head { grid-template-columns: 1fr; }
  .gs-cart2-item-actions { flex-direction: row; align-items: center;         justify-content: start;}
  .gs-cart2-item-actions .gs-cart2-save{    padding-left: 0;}
  /* Foot: denomination + quantity on one row; the price drops to its own
     row and left-aligns (it's pinned far-right on desktop). */
  .gs-cart2-item-foot { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .gs-cart2-item-foot .gs-cart2-price { grid-column: 1 / -1; align-items: flex-start; justify-self: start; min-width: 0; }
  .gs-cart2-delivery { grid-template-columns: 1fr; }
  .gs-cart2-card--row { grid-template-columns: 1fr; text-align: left; }
  .gs-cart2-coupon { width: 100%; }
  .gs-cart2-coupon input { flex: 1; width: auto; }
  .gs-cart2-trust { grid-template-columns: 1fr 1fr; }
  /* Invoice (GST) form: flow all 6 fields 2-per-row continuously (2/2/2)
     instead of two separate 3-field rows that leave a lone field. The
     form becomes one grid and the row wrappers collapse via display:contents
     so their fields participate directly in the form grid. */
  .gs-cart2-invoice-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .gs-cart2-form-row { display: contents; }
}
@media (max-width: 480px) {
  /* Phone: single-column item - full-width art on top, details below. */
  .gs-cart2-item { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .gs-cart2-item-check { display: none; }
  .gs-cart2-item-art { width: 100%; height: 150px; }
  /* Keep denomination + quantity comfortably on one row even on the
     narrowest phones; price already drops below (rule above). */
  .gs-cart2-item-foot { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .gs-cart2-trust { grid-template-columns: 1fr; }
  /* Invoice (GST) form: stack one field per row on phones. */
  .gs-cart2-invoice-form { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  /* Invoice header: title and the "Get GST Invoice" toggle were cramped
     on one row - stack them onto separate rows. */
  .gs-cart2-invoice-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   MODERN FOOTER (themed path)
   Seven-column dark footer matching the reference comp:
   Brand / Shop / Help / Corporate / Resources / Legal / Payments
   + bottom bar with region & language selectors.
   ============================================================ */
.gm-footer {
  background: #0b1020;
  color: #94a3b8;
  padding: 48px 0 0;
  /* Full-bleed footer: spans the entire viewport width, no inset card
     look. 20px top margin separates it from whatever section sits
     above it. */
  max-width: none;
  margin: 20px 0 0;
  border-radius: 0;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.gm-footer .container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
.gm-footer-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 0.8fr)
    minmax(0, 0.9fr) minmax(0, 0.8fr)
    minmax(0, 2.7fr);
  gap: 0;
  padding-bottom: 36px;
}

/* Vertical dividers between columns */
.gm-footer-grid > div + div {
  border-left: 1px solid #111827;
  padding-left: 15px;
}
.gm-footer-grid > div {
  padding-right: 15px;
}
.gm-footer-grid > div:last-child { padding-right: 0; }

/* Brand column */
.gm-footer-logo { display: inline-block; color: #fff; margin-bottom: 6px; }
.gm-footer-logo img { max-height: 38px; max-width: 180px; display: block; }
.gm-footer-logo span { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.01em; font-style: italic; }
.gm-footer-tagline {
  font-size: 12px;
     color: #cbd5e1;
  margin-bottom: 18px;
}
.gm-footer-desc {
  font-size: 13px;
  color:#cbd5e1;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 260px;
}
.gm-footer-socials { display: flex; gap: 10px; }
.gm-footer-socials a {
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent;
    color: #cbd5e1;
    border: 1px solid #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gm-footer-socials a:hover { background: #1e293b; color: #fff; border-color: #475467; }
.gm-footer-socials svg { width: 13px; height: 13px; }

/* Section headings */
.gm-footer-h5 {
  color: #fff;
  font-size: 14px;
  margin: 0 0 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Link lists */
.gm-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gm-footer-list a {
  font-size: 13px;
    color: #cbd5e1;
  text-decoration: none;
  transition: color .15s ease;
}
.gm-footer-list a:hover { color: #fff; }

/* ---------- Payment Methods column ---------- */
.gm-footer-payments { min-width: 0; }
.gm-pay-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
    max-width: 276px;
}
.gm-pay-badge {
  height: 38px;
  /* Floor width so content-only badges (e.g. Mastercard = two circles,
     no text) don't render narrower than the text badges in the
     max-content row used between ~900-1200px. */
  min-width: 50px;
  border-radius: 6px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #5a2de2;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
  position: relative;
}
.gm-pay-visa { color: #1a1f71; font-style: italic; font-size: 14px; letter-spacing: 0.08em; }
.gm-pay-mc { gap: 4px; padding: 0; }
.gm-pay-mc > span:nth-child(1) { width: 16px; height: 16px; border-radius: 50%; background: #eb001b; display: inline-block; }
.gm-pay-mc > span:nth-child(2) { width: 16px; height: 16px; border-radius: 50%; background: #f6c95e; display: inline-block; margin-left: -6px; mix-blend-mode: multiply; }
.gm-pay-rupay { color: #f6c95e; font-weight: 800; font-size: 12px; }
.gm-pay-rupay span { color: #16a34a; }
.gm-pay-upi { color: #f6c95e; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; }
.gm-pay-applepay { color: #111827; font-weight: 600; font-size: 12px; gap: 2px; }
.gm-pay-applepay svg { width: 14px; height: 14px; }
.gm-pay-gpay { color: #4285f4; font-weight: 600; font-size: 12px; }
.gm-pay-paytm { color: #00baf2; font-weight: 700; font-size: 13px; font-style: italic; }
.gm-pay-phonepe { color: #5f259f; font-weight: 700; font-size: 11px; }

/* ---------- Trust badges ----------
   Single row, NO per-badge border/background - only thin vertical
   separators BETWEEN consecutive badges. The whole row has a top
   border that separates it from the Payment-card grid above. Text
   wraps naturally (no ellipsis truncation). */
.gm-trust-badges {
  /* Client design = single row of 4 badges with thin dividers between
     them (they shrink to share the payment column on desktop). They only
     reflow to a 2x2 grid on small phones - see the max-width:480px rule. */
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding-top: 14px;
  border-top: 1px solid #111827;
}
.gm-trust-badge {
display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 5px;
    align-items: center;
    padding: 4px 7px;
    background: transparent;
    border: none;
    border-radius: 0;
    text-align: left;
    /* Fixed quarter width so the remaining badges keep the same size they
       had when 4 badges shared the row (don't stretch to fill). */
    flex: 0 0 25%;
    min-width: 0;
}
/* First / last badges sit flush with the column edges - the inside
   padding only matters next to a divider. */
.gm-trust-badge:first-child { padding-left: 0; }
.gm-trust-badge:last-child  { padding-right: 0; }
.gm-trust-badge + .gm-trust-badge {
  border-left: 1px solid #111827;
}
.gm-trust-badge svg {
      grid-row: 1 / span 2;
    width: 28px;
    height: 28px;
    padding: 3px;
    border-radius: 50%;
    box-sizing: border-box;
    color: #ffffff;
    flex: none;
    border: 2px solid #10b981;
}

.gm-trust-badge:nth-child(3) svg,
.gm-trust-badge:nth-child(4) svg{  border: 2px solid #fff;}

.gm-trust-badge strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 10px;
  font-weight: 700;
  color: #e4e7ec;
  letter-spacing: 0.02em;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;
}
.gm-trust-badge em {
  grid-column: 2;
  grid-row: 2;
  font-style: normal;
  font-size: 9px;
  color: #667085;
  letter-spacing: 0.04em;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ---------- Bottom bar ---------- */
.gm-footer-bottom {
  border-top: 1px solid #111827;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #94a3b8;
}
.gm-footer-bottom-meta {
  display: flex;
  align-items: center;
  gap: 18px;
}
.gm-footer-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  font-size: 13px;
  cursor: pointer;
}
.gm-footer-select svg { width: 14px; height: 14px; color: #94a3b8; }
.gm-footer-select-sep {
  width: 1px;
  height: 16px;
  background: #475467;
}

/* ---------- Floating contact widget (bulk gifting CTA) ---------- */
.gm-contact-widget {
  position: fixed;
  right: 0;
  top: 38%;
  z-index: 9999;
}
.gm-contact-toggle {
  background: #16a34a;
  color: #fff;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 26px 0 0 26px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(22, 163, 74, 0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
.gm-contact-toggle:hover { background: #16a34a; transform: translateX(-2px); }
.gm-contact-toggle svg { width: 26px; height: 26px; }

.gm-contact-panel {
  display: none;
  background: #16a34a;
  color: #fff;
  border-radius: 14px 0 0 14px;
  padding: 16px 14px 14px;
  width: 180px;
  position: relative;
  box-shadow: 0 12px 40px rgba(22, 163, 74, 0.35);
}
.gm-contact-widget[data-state="open"] .gm-contact-panel { display: block; }
.gm-contact-widget[data-state="open"] .gm-contact-toggle { display: none; }

.gm-contact-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  padding: 4px 6px;
}
.gm-contact-close:hover { opacity: 1; }

.gm-contact-header h4 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.gm-contact-header p {
  margin: 0 0 14px;
  font-size: 13px;
  color: #dcfce7;
  font-weight: 600;
}

.gm-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gm-contact-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #fff;
  border-radius: 999px;
  color: #16a34a;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.gm-contact-action:hover { transform: translateX(2px); }
.gm-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #16a34a;
  flex: none;
}
.gm-contact-icon svg { width: 16px; height: 16px; }

@media (max-width: 600px) {
  .gm-contact-widget { top: auto; bottom: 20px; }
}

/* Responsive */
@media (max-width: 1200px) {
  .gm-footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 24px;
    padding-bottom: 30px;
  }
  /* When the grid wraps, drop the vertical dividers - they only make
     sense on the single-row layout. */
  .gm-footer-grid > div + div { border-left: none; padding-left: 0; }
  .gm-footer-grid > div { padding-right: 0; }
  .gm-footer-payments { grid-column: 1 / -1; margin-top: 20px; }
  .gm-pay-grid { grid-template-columns: repeat(8, max-content); }
}
@media (max-width: 900px) {
  .gm-footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .gm-footer-brand { grid-column: span 3; }
  .gm-footer-payments { grid-column: span 3; }
  .gm-pay-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .gm-footer { padding: 40px 0 0; margin-top: 32px; }
  .gm-footer .container { padding: 0 20px; }
  .gm-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .gm-footer-brand { grid-column: span 2; }
  .gm-footer-payments { grid-column: span 2; }
  .gm-pay-grid { grid-template-columns: repeat(4, 1fr); }
  .gm-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }
}
/* Small phones (<=480px): the badge row gets genuinely cramped here, so
   reflow it to a clean 2x2 grid - dividers off, a row gap between the two
   rows, and equal left/right padding so both columns line up. */
@media (max-width: 480px) {
  .gm-trust-badges { flex-wrap: wrap; row-gap: 16px; }
  .gm-trust-badge { flex: 1 1 42%; }
  .gm-trust-badge + .gm-trust-badge { border-left: none; }
  .gm-trust-badge:first-child { padding-left: 7px; }
  .gm-trust-badge:last-child  { padding-right: 7px; }
}

/* ============================================================
   GiftM page-1 marketing home layout
   (hero, trust strip, top categories, top deals, people-buying +
   trending offers, premium signup, partners, smart-rewards CTA)
   ============================================================ */

/* Home page: drop the left sidebar and run the main column edge-to-edge
   so the marketing sections can claim the full storefront width. Body
   class is set by gift-store/pages/home.php. */
body.gs-home .gm-sidebar,
body.gs-no-sidebar .gm-sidebar { display: none; }
/* Keep side gutters on the shell so content never glues to the viewport
   edge when the browser is narrower than the 1280px design cap. The
   children below stay centered up to 1280px - on a wider viewport the
   shell padding still applies but the auto margins do the centering. */
body.gs-home .gm-shell-inner,
body.gs-no-sidebar .gm-shell-inner { gap: 0;     padding: 0 16px 14px; /* max-width: none; */ }
body.gs-home .gm-main,
body.gs-no-sidebar .gm-main { width: 100%; max-width: 100%; padding: 0; }
/* Opt-in top gap: only pages with a bare text heading sitting directly
   under the category menu (e.g. account, all-brands) set $gs_pad_top so the
   heading gets breathing room. Pages with a full-bleed hero / breadcrumb
   (category, terms, policies) must NOT get this or a white strip appears. */
body.gs-pad-top .gm-main { padding-top: 32px; }
body.gs-home .gm-shell,
body.gs-no-sidebar .gm-shell {     background: #ffffff; }
/* 1248px (= 1280 box - 2*16 gutter) so the body sections line up edge-to-edge
   with the header & footer content, which sit inside a 1280 box with 16px
   side padding. Keeps all three blocks at the same left/right edges. */
body.gs-home .gm-main > *:not(.gs-modal),
body.gs-no-sidebar .gm-main > *:not(.gs-modal) { max-width: 1248px; margin-left: auto; margin-right: auto; }
/* The sign-in modal is a position:fixed full-screen overlay that happens to
   live as a direct child of .gm-main. Without this it inherits the 1280px
   max-width + auto margins above and the dimmed backdrop only covers the
   centred content column instead of the whole viewport. Force full-bleed. */
body.gs-home .gm-main > .gs-modal,
body.gs-no-sidebar .gm-main > .gs-modal { max-width: none; margin: 0; }
/* Marketing in-page templates (contact, developers, faq) render a full
   dark hero + sections meant to fill the viewport like the terms page.
   Exempt the .gm-inpage wrapper from the 1280px content cap so the page
   is full-width; the hero itself breaks out to true edge-to-edge in
   giftm-inpage.css (margin: calc(50% - 50vw)). */
body.gs-home .gm-main > .gm-inpage,
body.gs-no-sidebar .gm-main > .gm-inpage { max-width: none; margin: 0; }
body:has(.gm-inpage) { overflow-x: clip; }
/* Hero stays full-bleed: negative margins cancel the shell's 16px
   gutter so the dark gradient marketing hero stretches corner-to-corner.
   Smart Rewards is NOT full-bleed - it sits within the 1280px content
   area as a rounded inset card with margin around it (matches PDF). */
body.gs-home .gm-hero.gm-hero--dark {
  max-width: none;
  border-radius: 0;
  margin-left: -16px;
  margin-right: -16px;
}

/* PDF-style grouping: Top Categories + Top Deals for You + People-
   buying-trending share a single white rounded panel. The wrapper
   .gm-home-stack carries the outer shadow + rounded corners so the
   shadow no longer prints between adjacent inner sections. */
body.gs-home .gm-home-stack {
     background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 30px rgba(15, 23, 42, 9%);
    margin: 14px auto 10px;
    overflow: hidden;
}
body.gs-home .gm-home-stack .gm-section--cats,
body.gs-home .gm-home-stack .gm-section--deals,
body.gs-home .gm-home-stack .gm-pbt {
    background: transparent;
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}
body.gs-home .gm-home-stack .gm-section--cats {
    padding-top: 20px;
    padding-bottom: 16px;
}
body.gs-home .gm-home-stack .gm-section--deals {
    padding-top: 5px;
    padding-bottom: 20px;
}
body.gs-home .gm-home-stack .gm-pbt {
    padding-top: 16px;
    padding-bottom: 18px;
}

/* Premium signup - pixel-aligned to PDF: pale-lavender panel, single-
   colour single-line indigo title, 4 perks in one horizontal row
   separated by hairline vertical dividers (no pill chips), a generously
   sized email input above a NARROW (auto-width) CTA, and a chunky 3D
   gift box on the right.

   Outer section .gm-premium is now a transparent margin wrapper - all
   panel visuals live on the inner .gm-premium-card so operators can
   override the background / border / colour via that one dedicated
   class without fighting the section's own resets. */
body.gs-home .gm-premium {
      background: white;
    border: 0;
    margin-bottom: 10px;
    display: block;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 6px 30px rgba(79, 70, 229, 0.10);
}
body.gs-home .gm-premium-card {
    background: #F6F2FF;
    border-radius: 13px;
    padding: 26px 23px;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    display: grid;
    grid-template-columns: auto 320px 230px;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
}
body.gs-home .gm-premium-text {
  min-width: 0;
}
/* Eye-catching eyebrow pill above the headline. */
body.gs-home .gm-premium-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fafbff;
  color: #6d3df5;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
body.gs-home .gm-premium-eyebrow svg { color: #6d3df5; }
body.gs-home .gm-premium-text h2 {
    font-family: inherit;
    font-size: 29px;
    line-height: 1.15;
    letter-spacing: -0.6px;
    margin-bottom: 10px;
    color: #111827;
    font-weight: 800;
    white-space: nowrap;
}
/* Highlighted word gets a vivid purple gradient fill so the headline pops. */
body.gs-home .gm-premium-grad {
  background: linear-gradient(90deg, #6d3df5 0%, #6d3df5 50%, #6d3df5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #6d3df5; /* fallback for browsers without background-clip:text */
}
body.gs-home .gm-premium-text p {
 font-size: 16px;
    line-height: 1.7;
    color: #475467;
    margin-bottom: 18px;
    max-width: 360px;
}
/* Perks: 4 items in a single horizontal row, scoped to the text column
   so they can't bleed into the email/button column. Each item gets a
   short divider on its right; last child drops it. The fixed height
   keeps the dividers from stretching the full row. */
body.gs-home .gm-premium-perks {
  display: flex;
  /* Wrap (not nowrap): on the full-width desktop grid all four perks fit
     in one row, but between ~1100-1188px the "auto" text column gets too
     narrow and a nowrap row would overflow into the email/button column
     (they visually touched). Wrapping lets the 4th perk drop to a 2nd row
     within the text column instead, keeping clear of the form. */
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  max-width: none;
  min-width: 0;
}
body.gs-home .gm-premium-perk {
    display: inline-flex;
    align-items: start;
    gap: 9px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    color: #475467;
    line-height: 1.75;
    box-shadow: none;
    white-space: normal;
    flex: 0 0 116px;
}
body.gs-home .gm-premium-perk:first-child { padding-left: 0; }
body.gs-home .gm-premium-perk:last-child { padding-right: 0; }
/* Vertical divider between perks - ONLY on the wide one-row desktop layout.
   When perks wrap to a 2nd row / stack on smaller screens, a left border at
   the row start looks broken, so scope it to >=1189px (where all four sit
   in a single row). */
@media (min-width: 1189px) {
  body.gs-home .gm-premium-perk + .gm-premium-perk { border-left: 2px solid #e4e7ec; padding-left: 16px; }
}
/* Plain outline glyph (no chip background), larger - matches the reference. */
body.gs-home .gm-premium-perk-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
       margin: 4px 0 0;
}
body.gs-home .gm-premium-perk-icon svg {
    width: 24px;
    height: 24px;
    color: #6d3df5;
}
body.gs-home .gm-premium-form {
  display: flex;
  flex-direction: column;
    gap: 9px;
  min-width: 0;
}
body.gs-home .gm-premium-form input {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
    border: 1px solid #e4e7ec;
  background: #fff;
  color: #111827;
  width: 100%;
  height: 44px;
}
body.gs-home .gm-premium-form input::placeholder { color: #94a3b8; }
body.gs-home .gm-premium-form input:focus {
  border-color: #6d3df5;
  box-shadow: 0 0 0 4px rgba(109, 61, 245, 0.15);
  outline: none;
}
body.gs-home .gm-premium-form button {
  width: auto;
    align-self: flex-start;
    padding: 15px 28px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    background: #6d3df5; 
    color: #ffffff;
    border: 0;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.28);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
body.gs-home .gm-premium-form button:hover {
  background: #5a2de2; box-shadow: 0 12px 24px rgba(109,61,245,.36);

}
body.gs-home .gm-premium-art-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
      max-width: 400px;
}
body.gs-home .gm-premium-art {
  width: 100%;
  max-width: 230px;
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(109, 61, 245, 0.22));
}
/* Responsive: shrink grid + allow perks to wrap when the row gets
   tight. At very narrow widths drop to a single-column stack. The grid
   now lives on .gm-premium-card so the responsive overrides target it
   too (the outer .gm-premium is just a transparent spacer). */
@media (max-width: 1100px) {
  body.gs-home .gm-premium-card {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) 200px;
    padding: 22px 28px;
    gap: 24px;
  }
  body.gs-home .gm-premium-text h2 { white-space: normal; font-size: 22px; }
  body.gs-home .gm-premium-perks { flex-wrap: wrap; row-gap: 10px; }
  body.gs-home .gm-premium-art { max-width: 200px; }
}
@media (max-width: 800px) {
  body.gs-home .gm-premium-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  body.gs-home .gm-premium-art-wrap { justify-content: flex-start; }
  /* Single-column card: turn the perks into an auto-fitting grid (1-2
     columns by width) instead of the desktop flex row. This is critical -
     it neutralises the desktop `flex: 0 0 116px` basis. In a flex *column*
     (the old ≤420 rule) that 116px became a forced HEIGHT, which is what
     spread the four perks apart with big empty gaps on phones. */
  body.gs-home .gm-premium-perks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px 14px;
  }
  body.gs-home .gm-premium-perk { flex: none; min-width: 0; }
}

/* ----- Hero (dark, page-1) ----- */
.gm-hero.gm-hero--dark {
  background: #ffffff;
  color: #111827;
  border-bottom: 1px solid #e4e7ec;
  border-radius: 0;
  padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 24px) 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  min-height: 0;
  align-items: flex-start;
  display: block;
}

.gm-hero--dark .gm-hero-stars {
  display: none;
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 60% 20%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 80% 60%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 35% 70%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(2px 2px at 90% 25%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 12% 60%, rgba(255,255,255,.45), transparent 60%);
}

.gm-hero--dark .gm-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  /* 1248px (= 1280 box - 2*16 gutter) so the full-bleed hero's inner
     content lines up with the header & footer content edges, which sit in a
     1280 box with 16px side padding. */
  max-width: 1248px;
  margin: 0 auto;
  position: relative;
}

.gm-hero--dark .gm-hero-text { max-width: 100%; min-width: 0; flex: none; }

.gm-hero-trust {
     display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #f6f2ff;
    border-radius: 999px;
    font-size: 12px;
    color: #6D3DF5;
    font-weight: 600;
    max-width: 100%;
    flex-wrap: wrap;
    line-height: 1.3;
}
.gm-hero-trust svg { color: #6D3DF5; flex: none; }

.gm-hero-title {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.15;
  margin: 18px 0 16px;
  color: #111827;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.gm-hero-title .gm-hero-line { display: block; }
.gm-hero-title .gm-hero-grad {
    background-clip: text;
    color: #6d3df5;
}

.gm-hero-sub {
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.55;
  max-width: min(440px, 100%);
  margin: 0 0 26px;
  color: #475467;
}

.gm-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 12px;
  margin-bottom: 28px;
     max-width: 580px;
}
.gm-hero-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  border-right: 1px solid #cccccc24;
  padding-right: 6px;
  min-width: 0;
}
.gm-hero-stat:last-child {
  border-right: 0;
  padding-right: 0;
}
.gm-hero-stat-icon {
  width: clamp(32px, 3vw, 40px);
  height: clamp(32px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.gm-hero-stat-icon svg {
  width: 100%;
  height: auto;
  color: #F6C95E;
}
.gm-hero-stat-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.gm-hero-stat-text strong {
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 600;
  color: #111827;
  margin: 0 0 2px;
  white-space: nowrap;
}
.gm-hero-stat-text span {
  font-size: clamp(11px, 0.95vw, 13px);
     color: #475467;
  line-height: 1.3;
  max-width: none;
  overflow-wrap: break-word;
}

.gm-hero-ctas { display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); flex-wrap: wrap; }
.gm-hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: clamp(10px, 1.2vw, 14px) clamp(14px, 1.8vw, 24px);
  border-radius: 7px;
  font-size: clamp(14px, 1.1vw, 15px); font-weight: 600; text-decoration: none;
  transition: transform .15s, background .15s, opacity .15s, border-color .15s;
  border: 2px solid transparent;
  white-space: nowrap;
}
.gm-hero-cta--primary {
    background: #6d3df5;
  color: #fff;
  box-shadow: 0 12px 28px rgba(109, 61, 245, .40);
}
.gm-hero-cta--primary:hover {    transform: translateY(0px);
    background: #5a2de2;
}
.gm-hero-cta--ghost {

    color: #475467;
    border-color: #e4e7ec;
}
.gm-hero-cta--ghost:hover { border-color: #6d3df5; color: #6d3df5; background: #f6f2ff; }
.gm-hero-cta--play {
      color: #475467;
  padding: 0;
  background: transparent;
  border: none;
      margin-left: 20px;
}
.gm-hero-cta--play:hover { color: #111827; }
.gm-hero-play {
  width: 36px;
    height: 36px;
    border-radius: 50%;
    border:2px solid #e4e7ec;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475467;
}
.gm-hero-cta--play:hover .gm-hero-play { background: #f6f2ff; }
.gm-hero-play svg { 
      width: 20px;
    height: 20px;
    margin-left: 0px;
}

/* Hero collage (floating gift cards orbiting a central gift box). The
   ::before / ::after pseudo-elements paint a soft purple/magenta glow
   behind the image so the central gift box reads as luminous, matching
   the PDF comp where the box sits on a glowing pedestal. */
.gm-hero-collage {
  position: relative;
  aspect-ratio: 1 / .9;
  min-height: clamp(360px, 38vw, 600px);
  width: 100%;
  background-image: url(https://www.giftm.ai/assets/banner-anm-img.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  isolation: isolate;
}
.gm-hero-collage::before {
  content: "";
  position: absolute;
  inset: -8% -6% -6% -6%;
  background:
    radial-gradient(45% 35% at 50% 60%, rgba(168, 85, 247, 0.55) 0%, rgba(168, 85, 247, 0.18) 45%, transparent 75%),
    radial-gradient(30% 24% at 35% 35%, rgba(236, 72, 153, 0.32) 0%, transparent 70%),
    radial-gradient(28% 22% at 70% 30%, rgba(59, 130, 246, 0.28) 0%, transparent 72%);
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
}
.gm-hero-collage::after {
  content: "";
  position: absolute;
  left: 50%; top: 58%;
  width: 60%; height: 32%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(192, 132, 252, 0.45) 0%, rgba(192, 132, 252, 0.18) 45%, transparent 80%);
  filter: blur(14px);
  z-index: -1;
  pointer-events: none;
}
.gm-hc-orbit { position: absolute; inset: 0; }
.gm-hc-ring {
  position: absolute; border: 1px dashed rgba(167, 139, 250, .35);
  border-radius: 50%;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.gm-hc-ring--1 { width: 84%; aspect-ratio: 1; border-color: rgba(167, 139, 250, .35); }
.gm-hc-ring--2 { width: 58%; aspect-ratio: 1; border-color: rgba(236, 72, 153, .3); }
.gm-hc-star { position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, transparent 70%);
  box-shadow: 0 0 8px rgba(255,255,255,.8);
}
.gm-hc-star--1 { top: 8%;  left: 22%; }
.gm-hc-star--2 { top: 14%; right: 18%; }
.gm-hc-star--3 { bottom: 18%; left: 8%; }
.gm-hc-star--4 { bottom: 24%; right: 6%; }

/* Central gift box */
.gm-hc-giftbox {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56%;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 24px 40px rgba(109, 61, 245,.45));
}

.gm-hc-card {
  position: absolute; border-radius: 14px;
  width: 128px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transform: rotate(-8deg);
  z-index: 2;
}
.gm-hc-card--amazon  { background: #232f3e; top: 8%;  left: 14%;  flex-direction: column; line-height: 1.1; transform: rotate(-10deg); }
.gm-hc-card--amazon .gm-hc-pill { background: #00a8e1; color: #fff; padding: 2px 7px; border-radius: 4px; font-size: 12px; font-weight: 800; }
.gm-hc-card--amazon strong { color: #ff9900; font-size: 16px; margin-top: 4px; }
.gm-hc-card--apple   { background: #0b1020; top: 2%; right: 14%; transform: rotate(8deg); }
.gm-hc-card--apple::before { content: ""; width: 22px; height: 26px; background: #fff; -webkit-mask: radial-gradient(circle at 70% 18%, transparent 6%, #0b1020 7%) center / contain no-repeat; mask: radial-gradient(circle at 70% 18%, transparent 6%, #0b1020 7%) center / contain no-repeat; border-radius: 50% 50% 45% 45%; }
.gm-hc-card--zara    { background: #fff; color: #111827;     top: 36%; left: -4%; transform: rotate(-12deg); font-family: serif; font-size: 22px; letter-spacing: 1px; }
.gm-hc-card--flipkart{ background: #fff; color: #2874f0;  top: 38%; right: -2%; transform: rotate(10deg); font-size: 17px; }
.gm-hc-card--myntra  { background: #fff; color: #ff3f6c;  top: 12%; left: 50%; transform: translateX(-50%) rotate(-4deg); font-size: 17px; }
.gm-hc-card--steam   { background: #1e293b; color: #fff;  bottom: 8%; left: 12%; transform: rotate(-10deg); }
.gm-hc-card--mmt     { background: #fff; color: #eb2026;  bottom: 4%; right: 10%; transform: rotate(6deg); font-size: 14px; }
.gm-hc-card--mmt em  { color: #f9b234; font-style: normal; }

/* Trending searches strip - pill chips matching PDF reference. Top
   divider separates it from the hero body; the row right-aligns the
   chips next to a bold "Trending searches:" label. */
.gm-hero-trending {
 margin: 0px auto 0;
    max-width: 1280px;
    padding: 0px 16px 42px;
    font-size: 13px;
    color: #667085;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-start;   /* left-aligned under the hero, per design */
}
.gm-hero-trending-label {
    color: #344054;
    font-size: 12px;
    font-weight: 700;            /* bold + no pill, so the label reads as a label, not a chip */
    padding: 5px 4px 5px 0;
    border-radius: 0;
    background: transparent;
    white-space: nowrap;
    flex: none;
}
.gm-hero-trending-item {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 9px;
       background: #f6f2ff;
    color: #475467;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gm-hero-trending-item:hover {
  background: #f6f2ff;
  border-color: rgba(167, 139, 250, 0.40);
  color: #5a2de2;
}

/* ----- Trust badges row (under hero) ----- */
.gm-trow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    padding: 25px 8px;
    margin: -28px auto 0px;
    position: relative;
    z-index: 2;
    box-shadow: 0 0px 28px rgba(0, 0, 0, .09);
}
.gm-trow-item {
display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border-right: 1px solid #e4e7ec;
}
.gm-trow-item:last-child { border-right: 0; }
.gm-trow-icon {
    width: 35px;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: none !important;
}


.gm-trow-icon svg{
      width: 100%;
    height: auto;
    stroke: #6d3df5;
}
.gm-trow-item:first-child .gm-trow-icon svg{
    stroke: #F6C95E;
}


.gm-trow-text { display: flex; flex-direction: column; line-height: 1.25; }
.gm-trow-text strong {     font-size: 14px;
       color: #111827;
    font-weight: 700; }
.gm-trow-text span   {     font-size: 12px;
       color: #475467;
    margin-top: 5px; }

/* ----- Top Categories grid (up to 8 round tiles) ----- */
.gm-section--cats { padding: 8px 0 4px; }
.gm-tcat-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}
.gm-tcat {
     background: #fff;
       border: 2px solid #e4e7ec; 
    border-radius: 14px;
    padding: 18px 6px 18px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.gm-tcat:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  border-color: #c4b5fd;
  position: relative;
  z-index: 2;
}
.gm-tcat-icon {
    width: 70px;
    height: 70px;
    border-radius: 40%;
  background: #f6f2ff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.gm-tcat-icon svg {     width: 38px;
    height: 38px; }
/* Brand guideline: uniform Lavender Mist icon backgrounds (no multi-colour). */
.gm-tcat--commerce .gm-tcat-icon,
.gm-tcat--entertainment .gm-tcat-icon,
.gm-tcat--fashion .gm-tcat-icon,
.gm-tcat--food .gm-tcat-icon,
.gm-tcat--travel .gm-tcat-icon,
.gm-tcat--gaming .gm-tcat-icon,
.gm-tcat--beauty .gm-tcat-icon,
.gm-tcat--jewellery .gm-tcat-icon     { background: #F6F2FF; }
.gm-tcat-name { font-size: 13px; font-weight: 600; color: #111827; }
.gm-tcat-save { 
      font-size: 11px;
    letter-spacing: .05em;
          color: #6d3df5;
    font-weight: 700
}

/* ----- Top Deals for You row ----- */
.gm-section--deals { margin: 18px 0 28px; }
.gm-deal-slider {
  position: relative;
}
.gm-deal-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* overflow-x: auto coerces overflow-y to auto/hidden by spec, which
     clips card hover-lifts. Vertical padding + negative margin gives the
     cards room to translateY(-3px) without getting cropped. */
  padding: 10px 4px 14px;
  margin: -10px -4px -14px;
}
.gm-deal-row::-webkit-scrollbar { display: none; }
.gm-deal-row > .gm-deal {
  flex: 0 0 calc((100% - 56px) / 5);
  scroll-snap-align: start;
}
.gm-deal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  z-index: 3;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.gm-deal-arrow:hover {
  background: #6d3df5;
  border-color: #6d3df5;
  color: #fff;
  transform: translateY(-50%);
}
/* The .gm-home-stack panel clips overflow (rounded corners), so arrows sit
   just inside the slider edges instead of an outside gutter - otherwise the
   circle (and its hover state) gets cropped at the panel edge. */
.gm-deal-arrow--prev {    left: -21px;}
.gm-deal-arrow--next {     right: -21px; }
@media (max-width: 1100px) {
  .gm-deal-row > .gm-deal { flex: 0 0 calc((100% - 42px) / 4); }
}
@media (max-width: 900px) {
  .gm-deal-row > .gm-deal { flex: 0 0 calc((100% - 28px) / 3); }
}
@media (max-width: 700px) {
  .gm-deal-row > .gm-deal { flex: 0 0 calc((100% - 14px) / 2); }
  /* Arrows overlay the slider edges instead of sitting in an outside
     gutter: the .gm-home-stack panel clips overflow and has rounded
     corners, so the negative -24px offsets get cut off on phones. Pull
     them just inside the slider so they stay fully visible. */
  .gm-deal-arrow { width: 32px; height: 32px; }
  .gm-deal-arrow--prev { left: -12px; }
  .gm-deal-arrow--next { right: -12px; }
}
@media (max-width: 480px) {
  .gm-deal-row > .gm-deal { flex: 0 0 88%; }
}
/* Inline-SVG corner art fallback (no operator upload) */
.gm-deal-corner.gm-deal-corner--svg {
  background: none;
  width: 55%;
  height: 60%;
  bottom: 0;
  pointer-events: none;
}
.gm-deal-corner.gm-deal-corner--svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.gm-deal {
  position: relative;
  border-radius: 16px;
  padding: 14px 16px 14px;
  text-decoration: none;
  min-height: 260px;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: #ffffff;
  transition: transform .15s, box-shadow .15s;
  overflow: hidden;
}
.gm-deal:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0,0,0,.28); }
.gm-deal-corner {
  position: absolute;
  bottom: 8px;
  right: 0px;
  max-width: 100%;
  width: 40%;
  height: 27vh;
  object-fit: cover;
  pointer-events: none;
  background-position: top left;
  background-size: cover;
  background-repeat: no-repeat;
}
.gm-deal-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: none !important;
    color: #6d3df5 !important;
}
.gm-deal-badge svg { width: 11px; height: 11px; }
.gm-deal-brand {
  align-self: stretch;
  font-size: 30px; font-weight: 600;
  letter-spacing: -.5px;
  color: #ffffff;
  line-height: 1;
}
.gm-deal-brand img {
  max-height: 36px;
  max-width: 100%;
  object-fit: cover;
  width: 140px;
}
.gm-deal-wordmark { color: inherit; }
.gm-deal-cat {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.92);
}
.gm-deal-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  /* margin-top: auto; */
}
.gm-deal-upto { font-size: 12px; font-weight: 500;     color: #cbd5e1; margin-bottom: 4px; }
.gm-deal-discount {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  color: #ffffff;
}
.gm-deal-discount small { font-size: 13px; font-weight: 800; margin-left: 4px; letter-spacing: 0; vertical-align: top; }
.gm-deal-footer {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
color: #fff;
  margin-top: 4px;
}
.gm-deal-footer svg { color: #fde68a; }

/* ----- People Buying + Trending Offers ----- */
.gm-pbt {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  margin-bottom: 28px;
  align-items: stretch;
}
.gm-pbt-feed {
          background: #fafbff;
    border-radius: 14px;
    padding: 9px;
    box-shadow: 0 0px 5px rgb(0, 0, 0, 5%);
}

/* "This Month on GiftM" seasonal picks (left rail of the .gm-pbt section). */
.gm-picks { padding: 22px 20px; display: flex; flex-direction: column; }
.gm-picks-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: #6d3df5; font-size: 13px; font-weight: 700; margin-bottom: 10px;
}
.gm-picks-badge {
    width: 24px; height: 24px; border-radius: 7px; background: #6d3df5;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gm-picks-title {
    margin: 0 0 6px; font-size: 26px; font-weight: 800; color: #111827;
    letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px;
}
.gm-picks-emoji { font-size: 22px; }
.gm-picks-sub { margin: 0 0 18px; font-size: 14px; color: #475467; line-height: 1.45; }
.gm-picks-list { display: flex; flex-direction: column; gap: 16px; }
.gm-picks-item { display: flex; align-items: center; gap: 12px; }
.gm-picks-icon {
    width: 42px; height: 42px; border-radius: 50%; background: #f1ecfe; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.gm-picks-item-text { display: flex; flex-direction: column; min-width: 0; }
.gm-picks-item-text strong { font-size: 15px; font-weight: 700; color: #111827; line-height: 1.3; }
.gm-picks-item-text span { font-size: 12.5px; color: #667085; line-height: 1.35; margin-top: 1px; }
.gm-picks-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 20px; padding-top: 4px; color: #6d3df5; font-size: 14px; font-weight: 700;
    text-decoration: none;
}
.gm-picks-cta:hover { color: #5a2de2; }
.gm-pbt-feed-head {
  display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
            color: #111827;
    margin-bottom: 7px;
    flex-wrap: wrap;
    padding: 0px 10px;
}
.gm-pbt-feed-head strong { font-size: 15px; font-weight: 700; }
.gm-pbt-feed-count {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #667085;
    font-weight: 600;
    margin-bottom: 14px;
    padding: 0px 10px;
}
.gm-pulse {
  width: 8px; height: 8px; border-radius: 50%;  
    background: #16A34A;
  box-shadow: 0 0 0 0 rgba(22,163,74,.55);
  animation: gmPulse 1.6s infinite;
  flex: none;
}
@keyframes gmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.gm-feed-list { 
      display: flex;
    flex-direction: column;
    background: white;
    padding: 3px 15px 15px;
    border-radius: 10px;
 }
.gm-feed-row {
      display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: center;
        border-bottom: 1px solid #e4e7ec;
    padding: 10px 0 10px;
    text-decoration: none;
    color: inherit;
    transition: background .12s;
}
a.gm-feed-row:hover { background: #fafbff; }
.gm-feed-thumb {
  width: 44px; height: 44px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: #111827;
  font-size: 16px;
  overflow: hidden;
  flex: none;
}
.gm-feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-feed-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; gap: 1px; }
.gm-feed-text strong { 
      font-size: 12.5px;
       color: #111827;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
 }
.gm-feed-text span   { font-size: 13px;
       color: #16A34A;
    font-weight: 700;}
.gm-feed-text small  { 
      font-size: 11px;
        color: #667085;
    font-weight: 500;
 }

.gm-pbt-trending {
     display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 0px 2px rgb(0, 0, 0, .1);
}
.gm-pbt-trending .gm-section-head {
          border-bottom: 1px solid #e4e7ec;
    margin-bottom: 16px;
    padding: 15px 20px;
}
.gm-toffer-grid {
      display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    padding: 3px 20px 15px;
}
.gm-toffer {
  position: relative;
  border-radius: 16px;
  padding: 20px 18px 22px;
  color: #fff;
  text-decoration: none;
  min-height: 277px;
  display: flex; flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  transition: transform .15s, box-shadow .15s;
  background-size: cover;
  background-position: center;
}
.gm-toffer:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0,0,0,.3); }
/* Full-card photo bg - sits behind the dark overlay so text remains
   readable. Onerror in PHP removes the <img> when it 404s, letting the
   themed gradient on the card show through. */
.gm-toffer-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}
/* Dark vertical gradient overlay - heavier at top and bottom so the
   title (top) and CTA / discount (bottom) stay legible regardless of
   how light or busy the hero photo is. */
.gm-toffer-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.10) 35%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.70) 100%);
  z-index: 1;
  pointer-events: none;
}
.gm-toffer-head {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
}
.gm-toffer-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.gm-toffer-sub {
  display: inline-block;
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 6px;
  align-self: flex-start;
}
.gm-toffer-off {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin-top: 10px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
/* Legacy inline-SVG fallback (when no photo URL is available). Sits
   beneath the overlay just like the photo would. */
.gm-toffer-art {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 62%;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
  z-index: 0;
}
.gm-toffer-art svg,
.gm-toffer-art img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
  display: block;
}

/* ----- Premium Rewards email signup ----- */
.gm-premium {
  background: linear-gradient(135deg, #f6f2ff 0%, #f6f2ff 100%);
  border: 1px solid #f6f2ff;
  border-radius: 18px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr) 220px;
  gap: 24px;
  align-items: center;
  margin-bottom: 32px;
}
.gm-premium-text h2 {
  font-size: 24px; font-weight: 800; color: #111827; margin: 0 0 8px;
  letter-spacing: -.5px;
}
.gm-premium-grad {
  background: linear-gradient(90deg, #6d3df5 0%, #5a2de2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gm-premium-text p { margin: 0 0 14px; color: #475467; font-size: 14px; line-height: 1.45; }
.gm-premium-perks { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 14px; }
.gm-premium-perk {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: #111827; font-weight: 600;
  background: #ffffff;
  border: 1px solid #f6f2ff;
  border-radius: 999px;
  padding: 6px 12px 6px 8px;
}
.gm-premium-perk-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: #f6f2ff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.gm-premium-form {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.gm-premium-form input {
  background: #fff; border: 1px solid #e4e7ec; border-radius: 10px;
  padding: 13px 16px; font-size: 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.gm-premium-form input:focus { border-color: #6d3df5; box-shadow: 0 0 0 3px rgba(109, 61, 245,.15); }
.gm-premium-form button {
  background: linear-gradient(135deg, #6d3df5 0%, #5a2de2 100%);
  color: #fff; border: 0; border-radius: 10px; padding: 13px 24px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform .1s, box-shadow .15s;
}
.gm-premium-form button:hover { background: #5a2de2; }
.gm-premium-thanks {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(109, 61, 245,.10);
  color: #5a2de2; font-size: 14px; font-weight: 600;
  border: 1px solid rgba(109, 61, 245,.25);
  border-radius: 10px; padding: 13px 18px;
}
.gm-premium-thanks::before { content: "\2713"; font-weight: 800; }
.gm-premium-art-wrap { display: flex; align-items: center; justify-content: center; min-width: 0; }
.gm-premium-art { width: 100%; max-width: 240px; height: auto; }

/* ----- Partners logo strip ----- */
.gm-partners {
      background: #fff;
    border-radius: 10px;
     padding: 22px 15px;
    margin-bottom: 10px;
    text-align: center;
    box-shadow: 0 6px 30px rgba(15, 23, 42, 7%);
}
.gm-partners-title {
    font-size: 18px;
    color: #111827;
    margin: 0 0 25px;
    font-weight: 600;
    line-height: 23px;
}
.gm-partners-wrap {
  position: relative;
  display: flex; align-items: center; gap: 6px;
}
.gm-partners-arrow {
    flex: none;
    background: #fff;
    border: none;
    border-radius: 13px;
    width: 32px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475467;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    z-index: 2;
    box-shadow: 0 0 10px rgb(100, 100, 100, 10%);
}
.gm-partners-arrow:hover { background: #6d3df5; border-color: #6d3df5; color: #fff; }
.gm-partners-row {
  display: flex; align-items: center;
  gap: 36px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 8px;
  flex: 1;
}
.gm-partners-row::-webkit-scrollbar { display: none; }
.gm-partner {
  display: inline-flex; align-items: center;
  flex: none;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.5px;
  opacity: .9;
  white-space: nowrap;
  transition: opacity .15s;
}
.gm-partner:hover { opacity: 1; }

/* ----- Smart Rewards For Smart Businesses CTA -----
   Dark indigo-navy panel matching the PDF reference. Inset card with
   rounded corners + outer margin (matches PDF), uniformly dark base
   with a subtle radial halo behind the gift box; feature cards are
   semi-translucent panels with purple-gradient icon squares; CTAs split
   into solid violet primary + outlined ghost. */
.gm-sr {
    background: #0b1020;
    color: #fafbff;
    border-radius: 15px;
    padding: 28px 36px;
    margin: 0;
    position: relative;
    overflow: hidden;
}
.gm-sr-bg {
  position: absolute; inset: 0; pointer-events: none;
  /* Subtler glow than the previous heavy radial - PDF reference shows
     just a soft single glow around the gift box and a couple of faint
     stars rather than a saturated purple wash across the panel. */
  background-image:
    radial-gradient(35% 60% at 90% 55%, rgba(109, 61, 245, 0.16) 0%, transparent 75%),
    radial-gradient(1.2px 1.2px at 18% 22%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(1px 1px at 88% 18%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 82%, rgba(255,255,255,.22), transparent 60%);
}
/* Inner is a vertical stack now: heading row on top (full width), then
   body row split into LEFT (subtitle + CTAs) and RIGHT (cards row +
   gift). Matches the layout the operator requested. */
.gm-sr-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
.gm-sr-head { min-width: 0; }
.gm-sr h2 {
    font-size: 28px;
    line-height: 1.15;
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: #ffffff;
}
.gm-sr-body {
  display: grid;
  /* LEFT column: ~270-300px so subtitle wraps cleanly to 2 lines AND
     Book a Demo + Talk to Sales fit side-by-side without wrapping.
     RIGHT column takes the rest (cards row + bigger gift box). */
  grid-template-columns: minmax(290px, 0.7fr) minmax(0, 2.7fr);
  gap: 24px;
  align-items: center;
}
.gm-sr-left {
  display: flex;
  flex-direction: column;
      gap: 27px;
  min-width: 0;
}
.gm-sr-right {
  display: grid;
  /* 5 feature cards take the bulk of the right column; gift box packed
     on the far right with more presence (PDF reference). */
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 18px;
  align-items: center;
  min-width: 0;
}
/* Legacy .gm-sr-text rule kept harmless; new markup uses .gm-sr-left. */
.gm-sr-text { position: relative; min-width: 0; }
/* PDF title is a single solid colour - keeping the span in markup but
   flattening it visually so the headline reads as one line of white. */
.gm-sr-grad {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #ffffff;
}
.gm-sr-text p,
.gm-sr-left p {
  margin: 0;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.95;
  max-width: 360px;
}
.gm-sr-ctas { display: flex; gap: 10px; }
.gm-sr-cta {
  display: inline-flex; align-items: center; padding: 12px 20px;
  border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.gm-sr-cta--primary {
  background:#f6c95e;
  color: #0b1020;
  box-shadow: 0 8px 18px rgba(246,201,94,.36);
}
.gm-sr-cta--primary:hover {     background: #e7b84c; }
.gm-sr-cta--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.30);
}
.gm-sr-cta--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.50); }
.gm-sr-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 25px;
  position: relative;
}
.gm-sr-feat {
    background: #f6f2ff14;
    border-radius: 13px;
    padding: 13px 7px 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
    align-items: center;
    transition: background .15s ease, transform .15s ease, border-color .15s ease;
}
.gm-sr-feat:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-2px);
}
.gm-sr-feat-icon {
     width: 29px;
    height: auto;
    display: inline-flex;
    margin-bottom: 6px;
}
.gm-sr-feat-icon svg {
      width: 100%;
    height: auto;
    color: #5a2de2;
}
.gm-sr-feat strong { font-size: 11px; color: #fff; font-weight: 600; line-height: 1.2; }
.gm-sr-feat span   { 
      font-size: 9.9px;
    color: #94a3b8;
    line-height: 1.85;
    opacity: 0.85
 }

.gm-sr-art {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 0;
}
.gm-sr-gift {
  width: 100%;
  max-width: 180px;
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(109, 61, 245,.45));
}

/* Smart Rewards - below 1150px: hide the gift-box art and give the
   content the full panel width. The body drops to a single column so the
   left text/CTAs go full width, and the right column loses its 180px gift
   track so the feature-card row fills the space the gift box vacated. */
@media (max-width: 1150px) {
  .gm-sr-art { display: none; }
  .gm-sr-body { grid-template-columns: 1fr; gap: 40px 0;}
  .gm-sr-right { grid-template-columns: 1fr; }
}

.gm-sr-expert {
  position: fixed;
  bottom: 24px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, #0d5050 0%, #065f46 100%);
  color: #fff;
  padding: 16px 18px;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  width: 200px;
  z-index: 60;
}
@media (max-width: 600px) {
  .gm-sr-expert { bottom: 16px; right: 16px; width: 170px; padding: 12px 14px; }
}
.gm-sr-expert-head { margin-bottom: 6px; }
.gm-sr-expert-head strong { display: block; font-size: 15px; color: #fff; font-weight: 800; line-height: 1.15; margin-bottom: 2px; }
.gm-sr-expert-head span   { display: block; font-size: 11px; color: rgba(255,255,255,.75); }
.gm-sr-expert-row {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: #fff;
  text-decoration: none;
  padding: 6px 0;
  transition: opacity .15s;
}
.gm-sr-expert-row:hover { opacity: .85; }
.gm-sr-expert-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.gm-sr-expert-icon svg { width: 14px; height: 14px; }

/* ----- Responsive (home page sections) -----
   Tablet / small-desktop breakpoint. NOTE: .gm-deal-row is now a flex
   slider (see "Top Deals for You row" rules above) - the card flex-basis
   already steps down by breakpoint, so no grid override is needed for
   it here. */

 @media(max-width:1301px){
.gm-hero-trending{
      padding: 30px 0px 42px;
}
.gm-tcat-save{
        font-size: 12px;
}
.gm-tcat-save{
  font-size: 10px;
}
.gm-toffer-title{
      font-size: 13px;
}
.gm-toffer-sub{
      font-size: 10px;
}
.gm-toffer-off{
      font-size: 12px;
}
.gm-trust-badge em{
  font-size: 8px;
}
 }  
@media (max-width: 1100px) {
  /* Keep the hero 2-column (text + collage) on tablets - the marketing
     image stays visible instead of disappearing. Tighten the column gap,
     shrink the collage, and drop the stat grid to 2-up since the text
     column is now narrower. CTAs wrap onto a second row if needed. */
  .gm-hero--dark .gm-hero-inner { gap: clamp(16px, 2.4vw, 28px); }
  .gm-hero-collage { min-height: clamp(280px, 32vw, 440px); }
  .gm-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;        max-width: 350px; }
  .gm-hero-stat:nth-child(2) { border-right: 0; padding-right: 0; }
  .gm-hero-ctas { flex-wrap: wrap; gap: 10px; }
  .gm-hero-cta--play { margin-left: 0; }
  /* On tablet the trending pills sit under the 2-col grid, so left-align
     them with the text column instead of hugging the right edge. */
  .gm-hero-trending { justify-content: flex-start; padding: 20px 0px 70px; }
  .gm-trow { grid-template-columns: repeat(4, 1fr); gap: 20px 0; }
  .gm-trow-item:nth-child(3n) { border-right: 0; }
  .gm-tcat-grid { grid-template-columns: repeat(4, 1fr); }
  .gm-toffer-grid { grid-template-columns: repeat(3, 1fr); }
  .gm-pbt { grid-template-columns: 1fr; }
  /* Smart Rewards (new structure: h2 on top, .gm-sr-body splits into
     left text + right cards/gift). Collapse the body to 1 col + cards
     row to 2 cols on tablets. */
  .gm-sr-body  { grid-template-columns: 1fr;  }
  .gm-sr-right { grid-template-columns: 1fr; gap: 16px; }
  .gm-sr-grid  { grid-template-columns: repeat(2, 1fr); }
  .gm-sr-art   { justify-content: center; }
}
@media(max-width:900px){
   .gm-hero--dark .gm-hero-inner { grid-template-columns: 1fr; gap: 18px; }
   .gm-hero-stats{
            grid-template-columns: repeat(4, minmax(0, 1fr));
                    max-width: 100%;
   }
   .gm-trow { grid-template-columns: repeat(3, 1fr);  }
}
/* Phone / small tablet (≤768px): the 2-col hero stacks - text on top,
   the collage image drops below it, centered and height-capped so the
   hero doesn't grow too tall. The image stays visible on phones. */
@media (max-width: 768px) {
 
  .gm-hero-collage {
    display: block;
    width: 100%;
    max-width: 380px;
    margin: 4px auto 0;
    min-height: clamp(240px, 56vw, 320px);
  }
   .gm-trow { grid-template-columns: repeat(2, 1fr);  gap: 15px 0 }
}

/* Tablet portrait (≤860px): stats collapse to 2-up, hero title size
   is already fluid via clamp() in the base rule. */
@media (max-width: 860px) {
 
  .gm-hero-stat:nth-child(2) { border-right: 0; padding-right: 0; }
  .gm-hero-ctas  { flex-wrap: wrap; gap: 10px; }
  /* CTAs wrap from here; drop the play link's desktop left margin so it
     doesn't sit indented when it wraps onto its own row. */
  .gm-hero-cta--play { margin-left: 0; }
  body.gs-home .gm-premium-card { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  body.gs-home .gm-premium-text h2 { white-space: normal; }
  body.gs-home .gm-premium-perks { flex-wrap: wrap; row-gap: 12px; }
}

/* Phone (≤640px): tighter padding, all carousels become single-column,
   feature grids reflow, hero typography drops to a phone scale. */
@media (max-width: 640px) {
  .gm-trow { grid-template-columns: repeat(2, 1fr); }
  .gm-trow-item { border-right: 0; padding: 8px 12px; }
  .gm-tcat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  /* Trending Offers on phone: 2-up compact cards instead of one giant
     full-width card per row, with a shorter height + tighter padding so
     the section doesn't become a tall scroll. Header stays on one line. */
  .gm-toffer-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 3px 14px 16px; }
  .gm-toffer { min-height: 200px; padding: 16px 14px 18px; border-radius: 14px; }
  .gm-toffer-title { font-size: 16px; }
  .gm-pbt-trending .gm-section-head { padding: 14px 16px; margin-bottom: 12px; }
  .gm-pbt-trending .gm-section-head h2 { font-size: 16px; }
  .gm-view-all { white-space: nowrap; flex: none; }
  /* Smart Rewards phone: gift box hidden so cards don't get squished,
     features collapse to single column, CTAs wrap full width. */
  .gm-sr { padding: 28px 18px; border-radius: 16px; }
  .gm-sr h2 { font-size: 22px; line-height: 1.2; }
  .gm-sr-text p,
  .gm-sr-left p { font-size: 13px; max-width: none; }
  .gm-sr-body  { grid-template-columns: 1fr; }
  .gm-sr-right { grid-template-columns: 1fr; gap: 14px; }
  .gm-sr-art   { display: none; }
  .gm-sr-grid  { grid-template-columns: 1fr; gap: 10px; }
  /* Phone feature cards: vertical stack (icon on top, then title + desc)
     but everything LEFT-aligned instead of centred, with roomier padding
     and larger type so each card reads clearly. */
  .gm-sr-feat  { padding: 18px 16px; flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; }
  .gm-sr-feat-icon { width: 32px; margin-bottom: 6px; }
  .gm-sr-feat strong { font-size: 14px; }
  .gm-sr-feat span   { font-size: 12px; }
  .gm-sr-ctas { flex-wrap: wrap; }
  .gm-sr-cta  { flex: 1 1 auto; justify-content: center; }

  /* Hero phone tweaks - typography already fluid via clamp(); just
     adjust spacing + stack the play link below the main CTAs. */
  .gm-hero-cta--play { margin-left: 0; }

  /* Trending searches: let the pill row scroll horizontally instead of
     wrapping into multiple rows that push the hero very tall on phones. */
  .gm-hero-trending {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
  }
  .gm-hero-trending::-webkit-scrollbar { display: none; }
  .gm-hero-trending-item { flex: 0 0 auto; }

  /* Premium card phone tweaks */
  body.gs-home .gm-premium-card { padding: 18px; }
  body.gs-home .gm-premium-text h2 { font-size: 22px; }
  body.gs-home .gm-premium-perk { padding: 0 10px; font-size: 11px; }
  body.gs-home .gm-premium-perk-icon { width: 24px; height: 24px; }
  body.gs-home .gm-premium-art { max-width: 180px; }

  /* People-buying + Trending Offers - drop sidebar on phones */
  .gm-pbt-trending {border-radius: 12px; }

  /* Footer: collapse 7-column grid to a 2-column accordion-ish layout */
  .gm-footer { padding: 32px 0 0; }
  .gm-footer .container { padding: 0 16px; }
  .gm-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; padding-bottom: 24px; }
  .gm-footer-grid > div + div { border-left: 0; padding-left: 0; }
  .gm-footer-brand { grid-column: 1 / -1; }
  .gm-footer-payments { grid-column: 1 / -1; }
  .gm-footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
}

/* Small phone (≤420px): single-column stacks, smallest type. */
@media(max-width:500px){
   .gm-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
   .gm-tcat-icon{
        width: 60px;
    height: 60px;border-radius: 30%;
   }
     .gm-toffer-grid { grid-template-columns: repeat(1, 1fr); }
     body.gs-home .gm-home-stack .gm-section--cats, body.gs-home .gm-home-stack .gm-section--deals, body.gs-home .gm-home-stack .gm-pbt{
          padding-left: 15px;
    padding-right: 15px;
     }
     .gs-cart2-help-rows a:last-child{
          width: 100%;
    padding: 10px 0 0;
     }
}
@media (max-width: 420px) {
  .gm-tcat-grid { grid-template-columns: repeat(2, 1fr); }
  .gm-trow { grid-template-columns: 1fr; }
  .gm-hero-title { font-size: 26px; }
  .gm-hero-stats { grid-template-columns: 1fr 1fr; gap: 10px 0px; }
  .gm-hero-stat { gap: 8px; }
  .gm-hero-stat-icon { width: 36px; height: 36px; }
  /* Keep the stacked collage compact on small phones. */
  .gm-hero-collage { max-width: 300px; min-height: clamp(200px, 60vw, 260px); }
  .gm-deal-row > .gm-deal { flex: 0 0 92%; }
  body.gs-home .gm-premium-perks { flex-direction: column; align-items: flex-start; row-gap: 8px; }
  body.gs-home .gm-premium-perk { border-right: 0; padding: 0; }
  .gm-sr-feat { padding: 14px 10px 12px; }
  .gm-sr-feat-icon { width: 38px; height: 38px; }
  .gm-footer-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   Brand detail v2 - GiftM page-2 layout (PDF reference)
   ============================================================ */
/* Breadcrumb (PDF style): generous vertical breathing room, gray
   "Home" + blue clickable middle crumbs + bold black "current" item.
   Separator chevrons stay light gray so they recede. */
/* Standardised to match the category page breadcrumb (.gs-cat-crumb):
   all links purple, current grey, 13px / 8px gap, same vertical spacing.
   Keeps max-width + flex-wrap so a long product trail stays aligned with
   the page content and wraps cleanly instead of overflowing. */
.gs-bd2-crumb {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 20px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #667085;
}
.gs-bd2-crumb a {
  color: #111827;
  text-decoration: none;
  font-weight: 500;
  transition: color .15s;
}
.gs-bd2-crumb a:hover { color: #111827; }
.gs-bd2-crumb .is-current { color: #667085; font-weight: 600; }
.gs-bd2-crumb span { color: #cbd5e1; }

.gs-bd2-grid {
  max-width: 1280px; margin: 0 auto 32px; padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: flex-start;
}

/* ---- Left: gallery ---- */
.gs-bd2-left { min-width: 0; }
/* Default (single image / no gallery): hero takes the full width, no
   thumb strip. When the brand has 2+ feature images the PHP adds
   .gs-bd2-gallery--with-thumbs, which switches to a two-column layout:
   a vertical thumbnail strip on the left + the large hero on the right.
   Clicking a thumb swaps the hero (gs-bd2-thumb click handler). */
.gs-bd2-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}
.gs-bd2-thumbs {
  display: none;
}
.gs-bd2-gallery--with-thumbs {
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
}
.gs-bd2-gallery--with-thumbs .gs-bd2-thumbs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Thumbs mirror the card aspect (16:10) so each mini-tile reads as a
   little gift card rather than a cropped square. */
.gs-bd2-gallery--with-thumbs .gs-bd2-thumb {
  width: 76px;
  height: auto;
  aspect-ratio: 16 / 10;
}
.gs-bd2-thumb {
  background: #fff;
  /* Subtle thin ring (PDF reference) instead of the aggressive 2px
     purple ring - active state uses a 1.5px light-purple outline. */
  border: 1.5px solid #e4e7ec;
  border-radius: 10px;
  padding: 0;
  width: 64px; height: 64px;
  cursor: pointer;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.gs-bd2-thumb:hover { transform: translateY(-1px); border-color: #c4b5fd; }
.gs-bd2-thumb.is-active {
  border-color: #6d3df5;
  box-shadow: 0 0 0 1px #8b5cf6;
}
.gs-bd2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gs-bd2-thumb-init { font-weight: 800; color: #111827; }
.gs-bd2-thumb--more {
  background: #0b1020; color: #fff;
  flex-direction: column; line-height: 1.1;
  border-color: transparent;
}
.gs-bd2-thumb--more span { font-size: 13px; font-weight: 800; }
.gs-bd2-thumb--more small { font-size: 9px; color: #cbd5e1; }

/* Hero panel: fixed 16:10 aspect ratio (real gift-card proportions)
   so the hero box is the same height across brands regardless of how
   their source image is dimensioned. The card image fills the box and
   keeps its own aspect via object-fit: contain - tall/square sources
   show small empty space on the sides, wide sources show small space
   top/bottom. The empty space picks up the page background (white). */
.gs-bd2-hero {
  position: relative;
  background: transparent;
  border-radius: 0;
  padding: 0;
  aspect-ratio: 16 / 10;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
/* Backdrop layers no longer used - kept hidden so the JS that paints
   the blurred bg doesn't error out, but they render nothing. */
.gs-bd2-hero-bg { display: none; }
/* Card fills the hero edge-to-edge - the only thing visible is the
   brand product image with rounded corners + soft drop shadow. */
.gs-bd2-hero-card {
  position: relative;
  z-index: 2;
  background: transparent;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.gs-bd2-hero-card img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  /* cover so every brand image fills the 16:10 hero box edge-to-edge
     (no empty white margins around the card). For images with built-in
     transparent padding (chumbak.webp has ~5% white border), cover
     crops INTO that padding - the visible coloured card extends to the
     edges of the hero. For full-bleed images (Valorant, Cleartrip),
     cover behaves like contain since aspect already matches the box.
     Slight crop on tall/square sources is acceptable for visual
     consistency across all brand cards. */
  object-fit: cover;
  display: block;
  border-radius: 20px;
  filter: drop-shadow(0 12px 22px rgba(15, 23, 42, 0.14));
}
.gs-bd2-hero-name {
  font-size: 36px; font-weight: 900; color: #111827; letter-spacing: -1px; text-align: center;
  position: relative;
}
/* Heart icon floats over the top-right corner of the card itself
   (since the card now fills the hero, top:14/right:14 already lands
   on the card's corner). High z-index so it overlays the image. */
.gs-bd2-hero-fav {
  position: absolute;
  /* Fixed 14px offset from the card edge - since object-fit: cover
     above now makes every brand image fill the 16:10 hero box edge-to-
     edge (including cropping into any baked-in padding), this offset
     sits the heart consistently at the top-right corner of the visible
     coloured card across all brands. */
  top: 14px;
  right: 14px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475467;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  z-index: 5;
  transition: color .15s, transform .15s;
}
.gs-bd2-hero-fav svg { width: 16px; height: 16px; }
.gs-bd2-hero-fav:hover { color: #ef4444; }

/* ---- Trust strip (PDF style) ----
   4 separate floating cards with a clean light-gray border, generous
   padding and a subtle drop-shadow. Wider gap between cards so they
   read as individual chips instead of a fused row. */
.gs-bd2-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 18px;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    overflow: hidden;
    padding: 13px 0;
}
.gs-bd2-trust-item {
    background: #ffffff;
    border-right: 1px solid #e4e7ec;
    padding: 0px 7px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 0;
}

.gs-bd2-trust-item:last-child{ border-right:none;}

.gs-bd2-trust-item svg { flex: none; width: 20px; height: 20px;     stroke: #6d3df5; }
.gs-bd2-trust-item strong {
        display: block;
    font-size: 12px;
    color: #111827;
    font-weight: 600;
    margin-bottom: 2px;
}
.gs-bd2-trust-item span   {
    display: block;
    font-size: 9px;
    color: #475467;
    line-height: 1.35
}

/* ---- About / How to Redeem ---- */
.gs-bd2-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 14px;
}
.gs-bd2-info-card {
  background: #fff; border: 1px solid #e4e7ec; border-radius: 14px;    padding: 17px 20px;
}
/* PDF reference: section heading is medium-weight, not extra-bold */
.gs-bd2-info-card h2 {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
  letter-spacing: -0.2px;
}
/* About body: line-clamp 3 lines cleanly (instead of fixed pixel
   max-height which slices the last line mid-letter) */
.gs-bd2-about-body {
  font-size: 13px;
  line-height: 1.6;
  color: #475467;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gs-bd2-about-body.is-open {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  display: block;
  overflow: visible;
}
.gs-bd2-readmore {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 13px;
  color: #6d3df5;
  font-weight: 600;
  text-decoration: none;
}
.gs-bd2-readmore:hover { color: #5a2de2; }
.gs-bd2-readmore svg { width: 14px; height: 14px; }
.gs-bd2-features {
      display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 10px;
    margin-top: 6px;
    padding-top: 16px;
}
.gs-bd2-features span {
  display: inline-flex;

    gap: 7px;
    font-size: 12px;
    color: #111827;
    font-weight: 500;
}
/* Soft violet-tinted icon container per feature pill (PDF style) */
.gs-bd2-feat-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f6f2ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6d3df5;
  flex: none;
}
.gs-bd2-feat-icon svg { color: #6d3df5; }

/* Numbered redemption steps: light-purple soft circle with purple
   numerals (PDF style - smaller and lighter than the previous version). */
.gs-bd2-redeem-steps { list-style: none; padding: 0; margin: 0; counter-reset: rdm; }
.gs-bd2-redeem-steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  font-size: 13.5px;
  color: #111827;
}
.gs-bd2-redeem-steps li span {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f6f2ff;
  color: #6d3df5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  flex: none;
}
.gs-bd2-redeem-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; font-size: 13px; color: #6d3df5; font-weight: 600;
  text-decoration: none;
}

/* Terms & Conditions box: full-width below the two cards, with extra
   top margin separating it from the bank-offers strip, and bottom
   padding so the closing line isn't visually clipped against the
   panel edge. */
.gs-bd2-info-card--terms {
  grid-column: 1 / -1;
  margin-top: 18px;
  padding-bottom: 28px;
}
.gs-bd2-info-card--terms .gs-bd2-about-body {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  max-height: none;
  overflow: visible;
}

/* ---- Right column wrapper: stacks buy panel, share card, promise
   card as siblings so each has its own border (PDF reference shows
   them as three distinct cards, not one big container). ---- */
.gs-bd2-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ---- Right: buy panel ---- */
.gs-bd2-buy {
background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    padding: 18px 20px;
    min-width: 0;
}
.gs-bd2-buy-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding-bottom: 16px; border-bottom: 1px solid #e4e7ec;
}
.gs-bd2-buy-head-text { min-width: 0; flex: 1; }
/* Bestseller pill (PDF reference): soft cream background, dark text,
   smaller star + lighter font-weight than our previous heavy pill. */
.gs-bd2-bestseller {
 display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff7e2;
    color: #111827;
    border: 1px solid #f6c95e;
    padding: 3px 8px 4px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: 0;
}
.gs-bd2-bestseller svg {     color: #f6c95e; }
.gs-bd2-buy-title {
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}
.gs-bd2-buy-tag {
    font-size: 13px;
    color: #475467;
    margin: 0 0 12px;
    font-weight: 500;
}
.gs-bd2-buy-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #475467;
}
.gs-bd2-rating-val { font-weight: 700; color: #111827; }
.gs-bd2-rating-stars { display: inline-flex; gap: 1px; }
.gs-bd2-rating-count { color: #667085; font-weight: 400; }
.gs-bd2-rating-sep { color: #cbd5e1; }
.gs-bd2-sold { color: #475467; font-weight: 500; }


.gs-bd2-buy-rating .gs-bd2-sold{
      background: #f3edfd99;
    padding: 3px 9px 4px;
    border-radius: 10px;
    font-size: 10px;
    color: black;
}
.gs-bd2-partner {
  flex: none;
  text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.gs-bd2-partner img { /* max-width: 80px; */ max-height: 28px; object-fit: contain; }
.gs-bd2-partner span {
  font-size: 11px;
    color: #475467;
    font-weight: 500;
}

.gs-bd2-step { margin-top: 16px; }
.gs-bd2-step-label { font-size: 13px; font-weight: 700; color: #111827;    margin-bottom: 18px; }
.gs-bd2-step-label strong {color: #111827;}
.gs-bd2-denoms {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.gs-bd2-denom {
      position: relative;
    background: #fff;
    border: 1.5px solid #e4e7ec;
    border-radius: 10px;
    padding: 10px 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gs-bd2-denom:hover { border-color: #c4b5fd; }
.gs-bd2-denom.is-selected { border-color: #6d3df5; background: #f6f2ff; }
.gs-bd2-denom strong {     display: block;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    text-align: left;}
.gs-bd2-denom-save  { 
      display: block;
    font-size: 10.5px;
    color: #667085;
    font-weight: 600;
    margin-top: 3px;
    text-align: left;
 }
.gs-bd2-denom-save em { font-style: normal; color: #667085; }
/* "Most Popular" badge: small pill anchored to the TOP-RIGHT of the
   denomination button (PDF reference) instead of centered above. */
.gs-bd2-denom-pop {
      position: absolute;
    top: -13px;
    right: 0px;
    left: auto;
    transform: none;
    background: #6d3df5;
    color: #fff;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.gs-bd2-denom--custom strong { color: #475467; }
.gs-bd2-denom--custom .gs-bd2-denom-save {     color: #667085; }

/* Payable Amount */
.gs-bd2-payable {
margin-top: 16px;
border-top: 1px solid #e4e7ec;
padding: 16px 0 0px;
}
.gs-bd2-payable-row { display: flex; align-items: stretch; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.gs-bd2-payable-col { flex: 1; min-width: 220px; }
.gs-bd2-payable-h   { font-size: 13px;     color: #111827;font-weight: 700; margin-bottom: 8px; }
.gs-bd2-payable-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.gs-bd2-payable-grid > div { display: flex; flex-direction: column; }
/* Native [hidden] attribute sets display:none, but the rule above
   forces display:flex on every child div including the save-row div,
   keeping it visible even when JS marks it hidden. Re-assert
   display:none for any [hidden] child so the save row + WOW banner
   actually disappear at 0% discount. */
.gs-bd2-payable-grid > div[hidden] { display: none; }
.gs-bd2-payable-grid span { font-size: 11px; color: #667085; }
.gs-bd2-save-label { color: #16a34a !important; }
.gs-bd2-payable-grid strong { font-size: 14px; color: #111827; font-weight: 700; }
.gs-bd2-mrp s { color: #667085; text-decoration: line-through; font-weight: 500; }
.gs-bd2-saving { color: #16a34a !important; }
/* PDF reference: "(5%)" rendered in the SAME green as the save amount,
   not muted gray. Both pieces read as one cohesive saving callout. */
.gs-bd2-saving em { font-style: normal; font-size: 12px; color: #16a34a; font-weight: 600; }
/* Total Payable column (PDF style): left-aligned text inside its own
   column, separated from the MRP / You Save column by a vertical
   light-gray left border. */
.gs-bd2-payable-total {
 text-align: left;
    border-left: 1px solid #e4e7ec;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    min-width: 250px;
}
.gs-bd2-payable-total span {
     display: block;
    font-size: 13px;
    color: #475467;
    margin-bottom: 6px;
    font-weight: 500;
}
.gs-bd2-payable-total strong {
    font-size: 28px;
    font-weight: 700;
    color: #6d3df5;
    letter-spacing: -0.5px;
    text-align: end;
}
.gs-bd2-wow {
    margin-top: 17px;
    background: #fafbff;
    border-radius: 7px;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: #5a2de2;
    line-height: 1.5;
    box-shadow: 0 0 2px rgb(100, 100, 100, .6);
}
/* Purple checkmark badge (PDF reference): solid purple disc with a
   white tick inside, sized to align with the first line of text. */
.gs-bd2-wow-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #6d3df5;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.gs-bd2-wow-icon svg { width: 14px; height: 14px; }
.gs-bd2-wow strong { color: #6d3df5; font-weight: 700; }

/* Quantity */
.gs-bd2-step--qty { margin-top: 18px; }
.gs-bd2-qty-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
/* Bulk-pricing inline layout: stepper (left), helper text (middle),
   "View Bulk Pricing" link pinned to the FAR RIGHT (PDF reference). */
.gs-bd2-bulk-text {
  font-size: 12px; color: #475467; flex: 1;
}
.gs-bd2-bulk-link {
  font-size: 12px; color: #6d3df5; font-weight: 600;
  text-decoration: none; margin-left: auto; white-space: nowrap;
}
.gs-bd2-bulk-link:hover { text-decoration: underline; }
.gs-bd2-qty {
  display: inline-flex; align-items: center;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 8px;
  overflow: hidden;
}
.gs-bd2-qty button {
  width: 36px; height: 27px; background: #fff; border: 0; cursor: pointer;
  font-size: 18px; color: #475467;
}
.gs-bd2-qty button:hover { background: #f6f2ff; color: #111827; }
.gs-bd2-qty input {
  width: 44px; height: 27px; border: 0; text-align: center;
  font-size: 14px; font-weight: 700; color: #111827; background: transparent; outline: none;
}
.gs-bd2-qty input::-webkit-outer-spin-button,
.gs-bd2-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gs-bd2-bulk { display: flex; flex-direction: column; gap: 2px; }
.gs-bd2-bulk span { font-size: 12px; color: #475467; }
.gs-bd2-bulk a { font-size: 12px; color: #6d3df5; font-weight: 600; text-decoration: none; }

/* CTAs */
.gs-bd2-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.gs-bd2-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 7px;
  font-size: 14px; font-weight: 700;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .1s, background .15s;
}
.gs-bd2-cta--ghost {
  background: #fff; color: #6d3df5; border-color: #6d3df5;
}
.gs-bd2-cta--ghost:hover { background: #f6f2ff; }
.gs-bd2-cta--primary {
  background: linear-gradient(135deg, #6d3df5 0%, #5a2de2 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(109, 61, 245,.3);
}
.gs-bd2-cta--primary:hover { box-shadow: 0 14px 30px rgba(109,61,245,.4); }

/* Delivery & Sharing - standalone card under the buy panel (PDF
   reference shows it as its own bordered card, not a sub-section of
   the buy panel). The .gs-bd2-share has its full styling in the
   "Outline polish" block lower down (border + radius + padding). */
.gs-bd2-share h3 { font-size: 14px; font-weight: 700; color: #111827; margin: 0 0 12px; }
.gs-bd2-share-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: center;
}
.gs-bd2-share-col { min-width: 0; }
/* Vertical separator between Shareable Link and Share via columns,
   matching the PDF. Implemented as a left-border on the right column
   instead of a manual <hr>. */
.gs-bd2-share-col--right {
  border-left: 1px solid #e4e7ec;
  padding-left: 18px;
}
.gs-bd2-share-label { font-size: 12px; font-weight: 600; color: #111827; margin-bottom: 2px; }
.gs-bd2-share small { font-size: 11px; color: #667085; display: block; margin-bottom: 6px; }
.gs-bd2-share-input {
  display: flex; gap: 0;
  border: 1px solid #e4e7ec; border-radius: 8px;
  overflow: hidden; background: #fff;
}
.gs-bd2-share-input input {
  flex: 1; border: 0; padding: 8px 12px; font-size: 11px; color: #475467;
  outline: none; min-width: 0;
}
/* Solid purple Copy Link button (PDF reference) - was light-purple
   tonal background before, now matches the primary Buy Now palette. */
.gs-bd2-share-input button {
  background: #6d3df5; color: #fff; border: 0; padding: 8px 16px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.gs-bd2-share-input button:hover { background: #5a2de2; }
/* Share icons: each is a column of (round icon disc + small label).
   PDF reference shows compact circles with the platform name below,
   not the larger label-less circles we had previously. */
/* Share row: 3 buttons (WhatsApp / Message / Email) spread to fill the
   column width with larger, aligned discs. The old :last-child transparent
   rule styled the removed "More" button and is intentionally gone. */
.gs-bd2-share-icons { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.gs-bd2-share-icon {
  flex: 1;
  display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
  text-decoration: none; color: #475467;
}
.gs-bd2-share-icon-disc {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.gs-bd2-share-icon-disc svg { width: 22px; height: 22px; }
.gs-bd2-share-icon small {
  font-size: 12px; color: #475467; font-weight: 600;
  margin: 0; display: block;
}

/* Meta info grid: PDF reference shows up to 4 fields laid out in a
   single horizontal row. Brands with all 6 fields wrap to a second
   row of 4+2; on tablet/mobile the responsive overrides drop to 2
   columns. */
.gs-bd2-meta {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid #e4e7ec;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 16px;
}
.gs-bd2-meta > div { display: flex; flex-direction: column; gap: 2px; }
.gs-bd2-meta span   { font-size: 11px; color: #667085; }
.gs-bd2-meta strong { font-size: 11px; color: #111827; font-weight: 600; }

/* Terms link, standing where the ICICI bank-offer strip used to be.
   The strip is gone, but its "T&C Apply" link was the only way into the
   brand terms modal, so the doorway stays. Deliberately quiet: this is a
   reference a buyer goes looking for, not a promotion shouting at them. */
.gs-bd2-terms-row { margin-top: 14px; }
.gs-bd2-terms-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: #6b7280; text-decoration: none;
  border-bottom: 1px dashed #d1d5db;
}
.gs-bd2-terms-link:hover { color: #111827; border-bottom-color: #9ca3af; }

/* Reserve scrollbar gutter at the document level so toggling
   body.overflow:hidden when the modal opens doesn't yank the
   vertical scrollbar out and shift the page contents right by ~15px.
   The gutter is always there - empty if no scroll is needed,
   occupied otherwise. */
html { scrollbar-gutter: stable; }

/* Bank offers T&C modal */
.gs-bd2-modal {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .6);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  z-index: 70;
}
.gs-bd2-modal.is-open { display: flex; }
.gs-bd2-modal-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  max-width: 540px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.gs-bd2-modal-card h3 {
  margin: 0;
  padding: 18px 50px 14px 22px;
  font-size: 16px; font-weight: 800; color: #111827;
  border-bottom: 1px solid #e4e7ec;
}
.gs-bd2-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: #fafbff; border: 0; border-radius: 50%;
  width: 30px; height: 30px;
  font-size: 22px; line-height: 1; color: #475467;
  cursor: pointer;
}
.gs-bd2-modal-close:hover { background: #e4e7ec; color: #111827; }
.gs-bd2-modal-body {
  padding: 16px 22px 22px;
  /* Only vertical scrolling - any wide child (long links, tables, code
     in the admin-supplied brand terms HTML) wraps or clips instead of
     producing a horizontal scrollbar at the bottom of the popup. */
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.gs-bd2-modal-body ol {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; line-height: 1.55; color: #475467;
}
.gs-bd2-modal-body * { max-width: 100%; }
.gs-bd2-modal-body img,
.gs-bd2-modal-body table { max-width: 100%; height: auto; }
.gs-bd2-modal-body table { display: block; overflow-x: auto; }
/* Section sub-headings inside the unified T&C modal (Bank Offers /
   Brand). Keeps the body scrollable and the two sections visually
   separated. */
.gs-bd2-modal-body h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #6d3df5;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.gs-bd2-modal-body h4 + h4,
.gs-bd2-modal-body ol + h4,
.gs-bd2-modal-body div + h4 {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e4e7ec;
}
.gs-bd2-modal-brand-terms {
  font-size: 13px;
  line-height: 1.6;
  color: #475467;
}
.gs-bd2-modal-brand-terms p { margin: 0 0 8px; }
.gs-bd2-modal-brand-terms p:last-child { margin-bottom: 0; }

/* WhatsApp share modal. Rides on the .gs-bd2-modal shell above and only
   adds the form bits - a narrower card, the number field, the inline
   status line and the purple send button, all matching the buy panel. */
.gs-bd2-share-modal-card { max-width: 420px; }
.gs-bd2-share-modal-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px; font-weight: 700; color: #344054;
}
.gs-bd2-share-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px; color: #111827;
  outline: none;
}
.gs-bd2-share-modal-input:focus { border-color: #6d3df5; box-shadow: 0 0 0 3px rgba(109, 61, 245, .14); }
.gs-bd2-share-modal-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #667085; }
.gs-bd2-share-modal-status { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; }
.gs-bd2-share-modal-status:empty { display: none; }
.gs-bd2-share-modal-status.is-ok { color: #067647; }
.gs-bd2-share-modal-status.is-error { color: #b42318; }
.gs-bd2-share-modal-send {
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  padding: 11px 16px;
  border: 0; border-radius: 8px;
  background: #6d3df5; color: #fff;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.gs-bd2-share-modal-send:hover { background: #5b2fd6; }
.gs-bd2-share-modal-send:disabled { opacity: .65; cursor: default; }
.gs-bd2-share-modal-alt {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px; font-weight: 600; color: #6d3df5;
  text-decoration: none;
}
.gs-bd2-share-modal-alt:hover { text-decoration: underline; }

/* GiftM Promise card (separate card under buy panel + share). PDF
   reference: soft lavender bg, purple title + subtitle, thin purple
   check-circle icon on the LEFT, decorative scallop badge on the
   RIGHT. */
.gs-bd2-promise {
    background: #f6f2ff;
    border: 1px solid #f6f2ff;
    border-radius: 8px;
    padding: 9px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.gs-bd2-promise-icon {
    flex: none;
    width: 26px;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gs-bd2-promise-icon svg{
  width: 100%;
    height: 100%;
}
.gs-bd2-promise-text { flex: 1; min-width: 0; }
.gs-bd2-promise-text strong { display: block; font-size: 14px; font-weight: 700; color: #6d3df5; letter-spacing: 0.1px; }
.gs-bd2-promise-text span   { display: block; font-size: 12px; color: #6d3df5; margin-top: 2px; }
.gs-bd2-promise-badge { flex: none; }

/* Outline polish on Delivery & Sharing block - standalone card with
   its own border (no longer nested inside the buy panel). */
.gs-bd2-share {
  background: #fff;
    border: 1px solid #6d3df5;
  border-radius: 12px;
  padding: 16px 18px;
  /* Query container: the inner 2-col share grid reacts to THIS card's
     width, not the viewport. In the 2-col page layout this card sits in a
     narrow right column even on wide screens, so a viewport breakpoint
     can't catch it - a container query can. See @container rule below. */
  container-type: inline-size;
}
/* When the card itself is narrow (e.g. the right column of the desktop
   2-col layout), stack the two share columns so "Share via" gets the full
   width and its icons don't spill outside the card. The vertical divider
   becomes a top border on the now-stacked Share-via column. */
@container (max-width: 460px) {
  .gs-bd2-share-grid { grid-template-columns: 1fr; }
  .gs-bd2-share-col--right {
    border-left: 0; padding-left: 0;
    padding-top: 12px; border-top: 1px solid #e4e7ec;
  }
  /* The meta row also gets cramped at this card width - drop it to 2-up. */
  .gs-bd2-meta { grid-template-columns: repeat(2, 1fr); }
}

/* Responsive */
@media (max-width: 1000px) {
  .gs-bd2-grid { grid-template-columns: 1fr;    padding: 0 0px; }
  .gs-bd2-crumb, .gs-cart2-crumb{
       padding: 18px 0px 14px;
  }
  
  .gs-bd2-buy { position: static; }
  .gs-bd2-denoms { grid-template-columns: repeat(3, 1fr); }
  .gs-bd2-info-grid { grid-template-columns: 1fr; }

  .gs-bd2-meta { grid-template-columns: repeat(2, 1fr); }
  .gs-cart2-grid{
        padding: 0;
  }
  .gs-cart2-title{
    padding: 0;
  }
}
@media (max-width: 600px) {
  /* Breadcrumb: slightly tighter vertical padding on phones; keeps the
     same colours/size/gap as the category page, wraps when the trail is
     long via the base flex-wrap. */
  .gs-bd2-crumb {  gap: 8px; }
  .gs-bd2-gallery { grid-template-columns: 1fr; }
  .gs-bd2-thumbs { flex-direction: row; overflow-x: auto; }
  /* With-thumbs variant stacks too: thumbs become a scrollable row
     above the hero (the higher-specificity desktop column rules are
     overridden here). */
  .gs-bd2-gallery--with-thumbs { grid-template-columns: 1fr; }
  .gs-bd2-gallery--with-thumbs .gs-bd2-thumbs { flex-direction: row; overflow-x: auto; }
  .gs-bd2-denoms { grid-template-columns: repeat(2, 1fr); }
  .gs-bd2-ctas   { grid-template-columns: 1fr; }
  /* .gs-bd2-share-grid stacking is handled by the @container rule (it
     reacts to the card width, which is narrow even on wide viewports). */
  .gs-bd2-meta { grid-template-columns: repeat(2, 1fr); }
    .gs-bd2-trust { 
              grid-template-columns: repeat(2, 1fr);
        gap: 10px 10px;
                padding-left: 10px;
     }
}

/* ----- Checkout page v2 (shares cart visual language) ----- */
.gs-checkout-grid.gs-checkout-grid--v2 {
  max-width: 1280px; margin: 0 auto 24px; padding: 0 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: flex-start;
}
.gs-checkout-form-v2 { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.gs-checkout-form-v2 .gs-checkout-card {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0;
}
.gs-checkout-form-v2 .gs-checkout-card h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 4px;
  font-size: 16px; font-weight: 800; color: #111827;
}
.gs-checkout-form-v2 .gs-checkout-card h3 svg { width: 18px; height: 18px; color: #6d3df5; }
.gs-checkout-form-v2 .gs-checkout-card-sub { font-size: 12.5px; color: #667085; margin: 0 0 14px; }
.gs-checkout-form-v2 .gs-checkout-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.gs-checkout-form-v2 .gs-checkout-field { display: flex; flex-direction: column; }
.gs-checkout-form-v2 .gs-checkout-field--full { grid-column: 1 / -1; }
.gs-checkout-form-v2 .gs-checkout-field label {
  font-size: 11.5px; color: #667085; font-weight: 600; margin-bottom: 6px;
}
.gs-checkout-form-v2 .gs-checkout-input,
.gs-checkout-form-v2 .gs-checkout-textarea {
  background: #fafbff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13px;
  color: #111827;
  outline: none;
  font-family: inherit;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.gs-checkout-form-v2 .gs-checkout-input:focus,
.gs-checkout-form-v2 .gs-checkout-textarea:focus {
  background: #fff; border-color: #6d3df5;
  box-shadow: 0 0 0 3px rgba(109, 61, 245, .12);
}
.gs-checkout-form-v2 .gs-checkout-rec {
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 14px;
  margin-top: 10px;
}
.gs-checkout-form-v2 .gs-checkout-rec-head {
  display: flex; align-items: center; gap: 12px;
}
.gs-checkout-form-v2 .gs-checkout-rec-img {
  width: 44px; height: 44px; border-radius: 8px;
  background: #f6f2ff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; overflow: hidden;
}
.gs-checkout-form-v2 .gs-checkout-rec-img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.gs-checkout-form-v2 .gs-checkout-rec-img--initial { font-weight: 800; color: #6d3df5; }
.gs-checkout-form-v2 .gs-checkout-rec-name { font-size: 13px; font-weight: 700; color: #111827; }
.gs-checkout-form-v2 .gs-checkout-rec-meta { font-size: 11.5px; color: #667085; }
.gs-checkout-form-v2 .gs-checkout-gift-toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fafbff; border: 1px solid #e4e7ec;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #475467;
  cursor: pointer;
}
.gs-checkout-form-v2 .gs-checkout-gift-toggle:hover { border-color: #c4b5fd; color: #6d3df5; }
.gs-checkout-form-v2 .gs-checkout-gift-toggle input { accent-color: #6d3df5; }
.gs-checkout-form-v2 .gs-checkout-gift-fields { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e4e7ec; }
.gs-checkout-form-v2 .gs-checkout-rec.is-gift .gs-checkout-gift-fields { display: block; }
.gs-checkout-form-v2 .gs-checkout-pay {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid #e4e7ec; border-radius: 10px;
  cursor: pointer; margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.gs-checkout-form-v2 .gs-checkout-pay:hover { border-color: #c4b5fd; }
.gs-checkout-form-v2 .gs-checkout-pay input[type=radio] { accent-color: #6d3df5; }
.gs-checkout-form-v2 .gs-checkout-pay:has(input:checked) {
  border-color: #6d3df5; background: #f6f2ff;
}
.gs-checkout-form-v2 .gs-checkout-pay-main { flex: 1; min-width: 0; }
.gs-checkout-form-v2 .gs-checkout-pay-title { font-size: 13px; font-weight: 700; color: #111827; }
.gs-checkout-form-v2 .gs-checkout-pay-meta  { font-size: 11.5px; color: #667085; margin-top: 2px; }
.gs-checkout-form-v2 .gs-checkout-pay-balance {
  font-size: 12px; font-weight: 700; color: #111827;
  padding: 4px 10px; border-radius: 999px; background: #fafbff;
}
.gs-checkout-form-v2 .gs-checkout-pay-balance--low { background: #fef2f2; color: #991b1b; }
.gs-checkout-form-v2 .gs-checkout-warn {
  margin-top: 8px; padding: 10px 12px;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; color: #991b1b; font-size: 12px;
}
.gs-checkout-form-v2 .gs-checkout-info {
  margin: 8px 0 0; font-size: 12px; color: #667085; line-height: 1.55;
}
.gs-checkout-error {
  margin-top: 10px; padding: 10px 12px;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; color: #991b1b; font-size: 12px;
  display: none;
}
.gs-checkout-error:not(:empty) { display: block; }

/* Responsive */
@media (max-width: 1000px) {
  .gs-cart2-grid { grid-template-columns: 1fr; }
  .gs-cart2-summary { position: static; }
  .gs-cart2-delivery { grid-template-columns: 1fr; }
  .gs-cart2-trust { grid-template-columns: repeat(2, 1fr);        gap: 15px; }
  .gs-checkout-grid.gs-checkout-grid--v2 { grid-template-columns: 1fr; }
  .gs-checkout-form-v2 .gs-checkout-fields { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* NOTE: the cart ITEM layout is owned by the cart responsive block
     higher up (single source of truth) so the two systems no longer
     fight. Only non-item tweaks live here. */
  .gs-cart2-card--row { flex-wrap: wrap; }
  .gs-cart2-coupon { width: 100%; }
  .gs-cart2-coupon input { flex: 1; min-width: 0; }
  .gs-cart2-progress { flex-wrap: wrap; }
  .gs-cart2-trust { grid-template-columns: 1fr; }
  .gs-cart2-summary{
        padding: 16px 15px;
  }
  .gs-cart2-help{
        padding: 16px 15px;
  }
  .gs-cart2-trust-item{
        padding: 0 15px;
  }
  .gs-cart2-card--row{
        padding: 12px 15px;
  }
  
}

/* ============================================================
   TERMS & CONDITIONS PAGE - stripped-down look, purple banner on top,
   no borders / rules / yellow accent lines anywhere else.
   ============================================================ */
/* The hero uses calc(50% - 50vw) negative margins to break out to the
   viewport edge. 50vw includes the vertical-scrollbar gutter, which
   pushes the banner ~15px past the visible viewport and triggers a
   horizontal scrollbar. Scoping overflow-x: clip on the body just for
   pages that include the terms wrapper keeps the breakout working
   without leaking horizontal scroll. */
body:has(.gs-terms-page),
body:has(.gs-terms2-page) {
  overflow-x: clip;
}

/* ============================================================
   TERMS / POLICY PAGES v2 - GiftM legal document redesign
   Dark hero banner + 2-column body with sticky TOC and
   numbered/categorised sections. Used by Terms & Conditions
   (and to be reused by Privacy / Cookie / Grievance).
   ============================================================ */
.gs-terms2-page {
  background: #fff;
  color: #111827;
  font-family: inherit;
}
/* Defensive: stop any host-stylesheet `h1..h6 { color: ... }` rule
   from overriding white-on-dark headings inside dark-bg components
   (e.g. <h3> inside .gs-terms2-controller-head). Forcing `inherit`
   here means headings pick up the color set on their styled wrapper,
   while still allowing per-component rules to set an explicit color. */
.gs-terms2-page h1,
.gs-terms2-page h2,
.gs-terms2-page h3,
.gs-terms2-page h4,
.gs-terms2-page h5,
.gs-terms2-page h6 {
  color: inherit;
}
/* Smooth scroll for in-page TOC anchor clicks - jumps land softly
   on each section instead of snapping. Scoped to pages with the
   terms wrapper so it doesn't affect other navigation. */
html:has(.gs-terms2-page) { scroll-behavior: smooth; }

/* ---- HERO ----
   PDF reference: deep navy gradient with a soft purple radial glow
   behind the centered logo (darker corners) + DENSE concentric ring
   patterns radiating from the TOP-LEFT and TOP-RIGHT corners. The
   ring spacing is tight (~32px between rings) so the corner art
   reads as a true ripple, not a couple of stray circles. */
.gs-terms2-hero {
    background: radial-gradient(ellipse 70% 75% at 50% 22%, rgba(139, 92, 246, 0.35) 0%, rgba(99, 49, 199, 0.18) 35%, transparent 70%), linear-gradient(135deg, #1e293b 0%, #1e1a52 30%, #251950 60%, #2d1a55 100%);
  color: #fff;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 64px 24px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Top-LEFT decorative concentric rings - PDF reference: EXACTLY ~7
   rings emanating from the corner with WIDE coverage (rings extend
   ~half the hero width). 85px spacing × 7 = ~595px visible spread;
   circle 1180px anchored at -590px puts the centre at the corner so
   only the bottom-right quadrant shows as a clean fan. */
.gs-terms2-hero::before {
 content: "";
    position: absolute;
    left: -260px;
    top: -215px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.55;
    z-index: 0;
    background: radial-gradient(circle at center, transparent 0 54px, rgba(255, 255, 255, 0.11) 54px 55px, transparent 56px), radial-gradient(circle at center, transparent 0 80px, rgba(255, 255, 255, 0.11) 80px 81px, transparent 82px), radial-gradient(circle at center, transparent 0 106px, rgba(255, 255, 255, 0.11) 106px 107px, transparent 108px), radial-gradient(circle at center, transparent 0 132px, rgba(255, 255, 255, 0.11) 132px 133px, transparent 134px), radial-gradient(circle at center, transparent 0 158px, rgba(255, 255, 255, 0.11) 158px 159px, transparent 160px), radial-gradient(circle at center, transparent 0 184px, rgba(255, 255, 255, 0.11) 184px 185px, transparent 186px), radial-gradient(circle at center, transparent 0 210px, rgba(255, 255, 255, 0.11) 210px 211px, transparent 212px);
}
/* Top-RIGHT decorative concentric rings - mirror image of the left. */
.gs-terms2-hero::after {
   content: "";
    position: absolute;
    right: -260px;
    top: -215px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.55;
    z-index: 0;
    background:
        radial-gradient(circle at center, transparent 0 54px, rgba(255, 255, 255, 0.11) 54px 55px, transparent 56px),
        radial-gradient(circle at center, transparent 0 80px, rgba(255, 255, 255, 0.11) 80px 81px, transparent 82px),
        radial-gradient(circle at center, transparent 0 106px, rgba(255, 255, 255, 0.11) 106px 107px, transparent 108px),
        radial-gradient(circle at center, transparent 0 132px, rgba(255, 255, 255, 0.11) 132px 133px, transparent 134px),
        radial-gradient(circle at center, transparent 0 158px, rgba(255, 255, 255, 0.11) 158px 159px, transparent 160px),
        radial-gradient(circle at center, transparent 0 184px, rgba(255, 255, 255, 0.11) 184px 185px, transparent 186px),
        radial-gradient(circle at center, transparent 0 210px, rgba(255, 255, 255, 0.11) 210px 211px, transparent 212px);
}
.gs-terms2-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}
.gs-terms2-hero-brand {
      display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;

}
.gs-terms2-hero-logo {
     max-height: auto;
    max-width: 150px;
    filter: brightness(0) invert(1);
}
.gs-terms2-hero-mark { font-size: 26px; line-height: 1; }
.gs-terms2-hero-wordmark {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.3px;
}
.gs-terms2-hero-company {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.82);
    margin: 16px 0 28px;
    letter-spacing: 0.02em;
    font-weight: 400;
}
.gs-terms2-hero-divider {
    display: inline-block;
    width: 36px;
    height: 2px;
    background: #e7b84c;
    border-radius: 2px;
    margin: 0 0 12px;
}
.gs-terms2-hero-title {
    font-size: clamp(34px, 4.5vw, 52px);
    font-weight: 600;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -0.6px;
}
.gs-terms2-hero-sub {
    font-size: 17.6px;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 45px;
    font-weight: 400;
}
.gs-terms2-hero-meta {
    display: inline-flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    margin: 0 0 37px;
}
/* PDF reference: each meta item is separated by a thin vertical
   divider line. Implemented as border-right on every card except
   the last, with symmetric horizontal padding for visual balance. */
.gs-terms2-meta-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 0 30px;
  border-right: 2px solid rgba(255, 255, 255, 0.18);
}
.gs-terms2-meta-card:first-child { padding-left: 0; }
.gs-terms2-meta-card:last-child { padding-right: 0; border-right: 0; }
/* PDF reference: icon sits directly on the gradient with NO box/bg
   behind it - just the stroke glyph. */
.gs-terms2-meta-icon {
    width: 30px;
    height: auto;
    border-radius: 0;
    background: transparent;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.65);
    flex: none;
    padding: 0;
}
.gs-terms2-meta-icon svg{
      width: 100%;
    height: auto;
}
.gs-terms2-meta-label {
       display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 3px;
    font-weight: 400;
}
.gs-terms2-meta-value {
     display: block;
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0;
}
/* PDF reference: URLs sit on their OWN ROW below the meta cards.
   Using `display: flex` (block-level) instead of inline-flex forces
   the line break - the meta row above is inline-flex which previously
   pulled the URLs onto the same line. */
.gs-terms2-hero-urls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
    margin: 0;
    font-size: 13px;
}
.gs-terms2-hero-urls a {
      color: rgba(255, 255, 255, 80%);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    font-weight: 400;
    font-size: 15px;
}
.gs-terms2-hero-urls a:hover { color: #fff; }

/* ---- ELECTRONIC RECORD NOTICE - PDF reference: soft lavender card
   with a chunkier circular icon badge (filled lavender disc + thick
   purple "i" glyph) on the left, 3-line text on the right. No drop
   shadow on the strip, generous padding. ---- */
.gs-terms2-notice {
 max-width: 930px;
    margin: 28px auto 35px;
    padding: 20px 25px;
    background: #f6f2ff;
    border-radius: 10px;
    display: flex;
    gap: 25px;
    box-shadow: 0 0 2px rgb(0, 0, 0, 28%);
}
.gs-terms2-notice-icon {
    width: 51px;
    height: 51px;
    border-radius: 50%;
    background: #fafbff;
    color: #6d3df5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.gs-terms2-notice-icon svg { 
      width: 35px;
    height: 35px;
    stroke: rgb(124 58 237 / 77%);
 }
.gs-terms2-notice p {
    margin: 0;
    font-size: 15px;
    color: #475467;
    line-height: 1.95;
}
.gs-terms2-notice p + p { margin-top: 0; }

/* ---- LAYOUT: sidebar TOC + main content ---- */
.gs-terms2-layout {
  max-width: 1140px;
  margin: 0 auto 60px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* ---- SIDEBAR TOC ---- */
.gs-terms2-toc {
  position: sticky;
  top: 24px;
}
/* Sidebar card - PDF reference: bordered white card with thin
   light-gray border, generous padding, no shadow. Active item gets
   lavender background + purple text (no left-border accent). */
.gs-terms2-toc-card {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    padding: 18px 0px 20px 0px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.gs-terms2-toc-card::-webkit-scrollbar { width: 4px; }
.gs-terms2-toc-card::-webkit-scrollbar-thumb { background: #e4e7ec; border-radius: 4px; }
.gs-terms2-toc-head {
      font-size: 11px;
    font-weight: 700;
    color: #667085;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 13px;
    padding: 0px 23px;
}
.gs-terms2-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gs-terms2-toc-list a {
   display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 23px;
    font-size: 14px;
    color: #475467 !important;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    border: 0;
}
.gs-terms2-toc-list a:hover { color: #6d3df5; }
.gs-terms2-toc-list a.is-active {
     background: #f6f2ff;
    font-weight: 600;
    position: relative;
}

.gs-terms2-toc-list a.is-active::before{
      content: " ";
    height: 28px;
    width: 3.7px;
    position: absolute;
    left: 0;
    background: #6d3df5;
    border-radius: 0px 5px 5px 0px;
    top: 50%;
    transform: translatey(-50%);
}
.gs-terms2-toc-num {
  flex: none;
  display: inline-block;
  width: 22px;
  font-size: 12px;
  color: #667085;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.gs-terms2-toc-list a.is-active .gs-terms2-toc-num { color: #6d3df5; }
.gs-terms2-toc-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- MAIN CONTENT ---- */
.gs-terms2-main { min-width: 0; }

.gs-terms2-section {
  padding: 24px 0 28px;
  border-bottom: 1px solid #e4e7ec;
  /* Scroll target lands ~120px from top so the sticky site header
     doesn't cover the section heading. */
  scroll-margin-top: 120px;
}
.gs-terms2-section:first-child { padding-top: 8px; }
.gs-terms2-section:last-child { border-bottom: 0; }

.gs-terms2-section-head { margin-bottom: 16px; }
.gs-terms2-section-tag {
display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 14px;
}
/* PDF reference: rounded-rectangle badge (~28x22, 6px radius) with
   lavender bg and purple text. Sits inline with the uppercase
   category label to its right. */
.gs-terms2-section-num {
     display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 30px;
    border-radius: 7px;
    background: #6d3df5;
    color: white;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.gs-terms2-section-cat {
    font-size: 14px;
    font-weight: 700;
    color: #6d3df5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.gs-terms2-section-title {
     margin: 0;
    font-size: 29px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.4px;
    line-height: 1.25;
}

/* Section body */
.gs-terms2-section-body {
       font-size: 16px;
    color: #475467;
    line-height: 1.75;
}
.gs-terms2-section-body p {    margin: 0 0 20px;
    font-size: 16px;}
.gs-terms2-section-body p:last-child { margin-bottom: 0; }
.gs-terms2-section-body strong { color: #111827; font-weight: 600; }
.gs-terms2-section-body em { font-style: italic; }
.gs-terms2-section-body a {
  color: #6d3df5;
  text-decoration: none;
  border-bottom: 1px solid rgba(109, 61, 245, 0.3);
}
.gs-terms2-section-body a:hover { border-bottom-color: #6d3df5; }

/* Sub-sections (e.g. 5.1, 5.2) */
.gs-terms2-sub { margin: 18px 0; }
.gs-terms2-sub h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  letter-spacing: 0.01em;
}
.gs-terms2-sub h3::before {
  content: "";
  width: 3px;
  height: 14px;
  background: #6d3df5;
  border-radius: 2px;
  flex: none;
}

/* Definition grid - 2-column key/value layout used for Definitions
   (Section 2) and Miscellaneous (Section 38). Left column carries
   the term in a soft lavender pill-bg; right column carries the
   description in white. PDF reference. */
.gs-terms2-defgrid {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: 0;
  margin: 16px 0;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  overflow: hidden;
  font-size: 13.5px;
}
.gs-terms2-defterm,
.gs-terms2-defdesc {
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ec;
}
.gs-terms2-defterm:nth-last-of-type(1),
.gs-terms2-defdesc:nth-last-of-type(1) {
  border-bottom: 0;
}
.gs-terms2-defterm {
  background: #f6f2ff;
  color: #111827;
  font-weight: 700;
  font-size: 13px;
}
.gs-terms2-defdesc {
  background: #fff;
  color: #475467;
  line-height: 1.65;
}
.gs-terms2-defdesc a {
  color: #6d3df5;
  text-decoration: none;
  border-bottom: 1px solid rgba(109, 61, 245, 0.3);
}
.gs-terms2-defdesc a:hover { border-bottom-color: #6d3df5; }
@media (max-width: 640px) {
  .gs-terms2-defgrid { grid-template-columns: 1fr; }
}

/* Lists */
.gs-terms2-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.gs-terms2-list li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 14px;
  
}
.gs-terms2-list li:last-child { border-bottom: none; }
.gs-terms2-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
     background: #475467;
}

/* Tables */
.gs-terms2-table-wrap {
  margin: 14px 0;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  overflow: hidden;
}
.gs-terms2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.gs-terms2-table thead {
  background: linear-gradient(135deg, #1e293b 0%, #1e293b 100%);
  color: #fff;
}
.gs-terms2-table thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gs-terms2-table tbody td {
  padding: 11px 16px;
  color: #475467;
  border-bottom: 1px solid #e4e7ec;
  vertical-align: top;
}
.gs-terms2-table tbody tr:nth-child(even) { background: #fafbff; }
.gs-terms2-table tbody tr:last-child td { border-bottom: 0; }
.gs-terms2-table tbody td:first-child { color: #111827; font-weight: 500; }

/* Liability pills inside table */
.gs-terms2-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.gs-terms2-pill--zero    { background: #dcfce7; color: #065f46; }
.gs-terms2-pill--limited { background: #fef3c7; color: #7a5010; }
.gs-terms2-pill--full    { background: #fafbff; color: #8b1a1a; }
.gs-terms2-pill--inv     { background: #fafbff; color: #3949ab; }

/* Alert boxes */
.gs-terms2-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px 0;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  border-left: 3px solid #6d3df5;
}
.gs-terms2-alert strong {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #111827;
}
.gs-terms2-alert span { color: #475467; line-height: 1.6; }
.gs-terms2-alert--info  { background: #fafbff; border-left-color: #6d3df5; }
.gs-terms2-alert--info strong { color: #1a3a5c; }
.gs-terms2-alert--warn  { background: #fafbff; border-left-color: #d97706; }
.gs-terms2-alert--warn strong { color: #5a3e10; }
.gs-terms2-alert--legal { background: #fafbff; border-left-color: #6d3df5; }
.gs-terms2-alert--legal strong { color: #5a2de2; }

/* Officer card (Section 37) */
.gs-terms2-officer {
  margin: 18px 0;
  padding: 26px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0b1020 0%, #1e293b 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.gs-terms2-officer::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1.5px solid rgba(109, 61, 245, 0.25);
}
.gs-terms2-officer-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  position: relative;
}
.gs-terms2-officer-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 22px;
  position: relative;
}
.gs-terms2-officer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  position: relative;
}
.gs-terms2-officer-grid .gs-terms2-officer-full { grid-column: 1 / -1; }
.gs-terms2-officer-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}
.gs-terms2-officer-value {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}
.gs-terms2-officer-value[href] {
  color: #c4b5fd;
  border-bottom: 1px solid rgba(196, 181, 253, 0.4);
  text-decoration: none;
  width: fit-content;
}
.gs-terms2-officer-value[href]:hover { color: #fff; border-bottom-color: #fff; }

/* ---- Responsive ----
   3 breakpoints: tablet (≤980), mobile (≤640), small phone (≤440).
   The terms page is a content-heavy legal doc, so the priorities are:
   (1) keep text readable, (2) prevent horizontal scroll, (3) shrink
   decorative chrome before content.
*/

/* TABLET - sidebar collapses to a 2-column grid above content */
@media(max-width:1130px){
  .gs-bd2-payable-total{
    border-left:0;
        width: 100%;
    padding: 15px 0 0;
    border-top: 1px solid #e4e7ec;
  }
  .gs-bd2-payable-total strong{
        text-align: left;
  }
}
@media (max-width: 980px) {
  .gs-terms2-layout {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 14px;
  }
  .gs-terms2-toc { position: static; }
  .gs-terms2-toc-card { max-height: none; }
  .gs-terms2-toc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 12px; }
  /* Shrink decorative rings so they don't bleed into the centred logo */
  .gs-terms2-hero::before,
  .gs-terms2-hero::after { width: 800px; height: 800px; left: -420px; right: auto; top: -420px; background: repeating-radial-gradient(circle at center, transparent 0 60px, rgba(255, 255, 255, 0.1) 60px 61px); }
  .gs-terms2-hero::after { left: auto; right: -420px; }
  .gs-terms2-hero { padding: 52px 22px 56px; }
  .gs-terms2-hero-meta { gap: 0; }
  .gs-terms2-meta-card { padding: 0 20px; }
}

/* MOBILE - single-column TOC, stacked meta cards, compact hero */
@media (max-width: 640px) {
  .gs-terms2-hero { padding: 40px 16px 44px; }
  .gs-terms2-hero-divider { margin-bottom: 16px; }
  .gs-terms2-hero-sub { margin-bottom: 24px; font-size: 13.5px; }
  /* Meta cards stack vertically - remove vertical separators (they
     would render as awkward horizontal lines between stacked cards). */
  .gs-terms2-hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    text-align: left;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  .gs-terms2-meta-card {
    padding: 0;
    border-right: 0;
    width: 100%;
  }
  .gs-terms2-hero-urls { gap: 14px; flex-wrap: wrap; }
  /* Decorative rings further reduced for phones */
  .gs-terms2-hero::before,
  .gs-terms2-hero::after { width: 560px; height: 560px; left: -320px; right: auto; top: -320px; background: repeating-radial-gradient(circle at center, transparent 0 44px, rgba(255, 255, 255, 0.1) 44px 45px); }
  .gs-terms2-hero::after { left: auto; right: -320px; }

  /* Notice card compact */
  .gs-terms2-notice {
    margin: 18px auto 24px;
    padding: 16px 18px;
    gap: 14px;
    border-radius: 12px;
  }
  .gs-terms2-notice-icon { width: 38px; height: 38px; }
  .gs-terms2-notice-icon svg { width: 22px; height: 22px; }
  .gs-terms2-notice p { font-size: 13px; line-height: 1.65; }

  /* TOC items one per row */
  .gs-terms2-toc-list { grid-template-columns: 1fr; }
  .gs-terms2-toc-card { padding: 16px 12px 16px 14px; border-radius: 10px; }

  /* Section spacing tighter, title smaller */
  .gs-terms2-layout { padding: 0 14px; margin-bottom: 40px; }
  .gs-terms2-section { padding: 20px 0 24px; }
  .gs-terms2-section-title { font-size: 20px; }
  .gs-terms2-section-body { font-size: 14px; }
  .gs-terms2-sub h3 { font-size: 13.5px; }

  /* Tables: horizontal scroll if needed, smaller text */
  .gs-terms2-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gs-terms2-table thead th,
  .gs-terms2-table tbody td { padding: 10px 12px; font-size: 12.5px; }

  /* Officer card stacks */
  .gs-terms2-officer { padding: 22px; }
  .gs-terms2-officer-grid { grid-template-columns: 1fr; gap: 14px; }
  .gs-terms2-officer-grid .gs-terms2-officer-full { grid-column: auto; }

  /* Def-grid already collapses to 1-col at 640px via existing rule */
  .gs-bd2-bulk-link{
    width: 100%;
  }
}

/* SMALL PHONE - final tuning at ~440px and below */
@media (max-width: 440px) {
  .gs-terms2-hero { padding: 34px 14px 38px; }
  .gs-terms2-hero-title { font-size: 30px; }
  .gs-terms2-hero-sub { font-size: 13px; }
  .gs-terms2-hero-company { font-size: 11.5px; }
  .gs-terms2-meta-value { font-size: 13px; }
  .gs-terms2-meta-label { font-size: 11px; }
  /* Rings smaller still so they don't overpower the small canvas */
  .gs-terms2-hero::before,
  .gs-terms2-hero::after { width: 420px; height: 420px; left: -250px; right: auto; top: -250px; background: repeating-radial-gradient(circle at center, transparent 0 36px, rgba(255, 255, 255, 0.1) 36px 37px); }
  .gs-terms2-hero::after { left: auto; right: -250px; }

  .gs-terms2-notice { padding: 14px 16px; gap: 12px; }
  .gs-terms2-notice-icon { width: 34px; height: 34px; }
  .gs-terms2-notice-icon svg { width: 20px; height: 20px; }
  .gs-terms2-notice p { font-size: 12.5px; line-height: 1.6; }

  .gs-terms2-section-title { font-size: 18px; }
  .gs-terms2-section-body { font-size: 13.5px; }
  .gs-terms2-section-num { width: 28px; height: 22px; font-size: 11px; }
  .gs-terms2-section-cat { font-size: 11px; }

  .gs-terms2-toc-list a { font-size: 12.5px; padding: 9px 10px 9px 6px; gap: 10px; }
  .gs-terms2-officer { padding: 18px; }
  .gs-terms2-officer-name { font-size: 18px; }
}
.gs-terms-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #111827;
  font-size: 14px;
  line-height: 1.65;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Solid purple banner that breaks out of every parent container so it
   stretches edge-to-edge of the viewport. calc(50% - 50vw) pulls each
   side back to the viewport boundary regardless of how narrow the page
   wrapper / shell is. We deliberately DO NOT set width:100vw because
   100vw includes the vertical scrollbar gutter, which combined with
   the negative margins kicks the horizontal-scrollbar in. Letting
   width:auto resolve naturally gives the same visual result without
   the overflow. */
.gs-terms-hero {
  background: #6d3df5;
  color: #ffffff;
  text-align: center;
  padding: 48px 32px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border: 0;
  border-radius: 0;
  position: relative;
}
.gs-terms-hero-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}
.gs-terms-hero-mark { font-size: 26px; line-height: 1; }
.gs-terms-hero-name {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
}
/* Brand logo image (preferred over the emoji + wordmark when the
   tenant has uploaded a dark-variant logo). Sized for the hero
   banner and inverted-friendly. */
.gs-terms-hero-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.gs-terms-hero-meta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 16px;
}
.gs-terms-hero-title {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}
.gs-terms-hero-sub {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 12px;
  font-style: italic;
}
.gs-terms-hero-eff {
  font-size: 14px;
  color: #ffffff;
  margin: 0 0 12px;
}
.gs-terms-hero-eff strong { color: #ffffff; font-weight: 700; }
.gs-terms-hero-urls {
  font-size: 14px;
  margin: 0;
  color: #ffffff;
}
.gs-terms-hero-urls a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 1px;
}
.gs-terms-hero-urls a:hover { border-bottom-color: #ffffff; }
.gs-terms-hero-urls span { color: rgba(255, 255, 255, 0.8); margin: 0 8px; }

/* Body sits below the banner with comfortable padding, no border. */
.gs-terms-preamble {
  font-size: 13.5px;
  color: #475467;
  margin: 28px 0 24px;
  padding: 0 32px;
}

.gs-terms-section {
  margin-bottom: 28px;
  padding: 0 32px;
}
.gs-terms-section h2 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}
.gs-terms-section h3 {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 18px 0 8px;
}
.gs-terms-section p {
  margin: 0 0 12px;
  color: #111827;
  text-align: justify;
}
.gs-terms-section p:last-child { margin-bottom: 0; }

.gs-terms-section a {
  color: #6d3df5;
  text-decoration: none;
}
.gs-terms-section a:hover { text-decoration: underline; }

.gs-terms-list {
  margin: 0 0 12px;
  padding-left: 22px;
  color: #111827;
}
.gs-terms-list li {
  margin-bottom: 6px;
  line-height: 1.6;
}
.gs-terms-list li:last-child { margin-bottom: 0; }

/* Tables: simple borderless rows with light header tint. */
.gs-terms-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px;
  font-size: 13.5px;
}
.gs-terms-table th,
.gs-terms-table td {
  padding: 10px 14px;
  border: 1px solid #e4e7ec;
  text-align: left;
  vertical-align: top;
}
.gs-terms-table thead th {
  background: #fafbff;
  color: #111827;
  font-weight: 700;
}
.gs-terms-table tbody td a { color: #6d3df5; text-decoration: none; }
.gs-terms-table tbody td a:hover { text-decoration: underline; }
.gs-terms-table--rows tbody th {
  background: #fafbff;
  color: #111827;
  font-weight: 700;
  width: 32%;
}

.gs-terms-foot {
  text-align: center;
  margin-top: 24px;
  padding: 20px 32px 12px;
  color: #667085;
  font-size: 13px;
  border: 0;
}
.gs-terms-foot a {
  color: #6d3df5;
  text-decoration: none;
  margin: 0 4px;
}
.gs-terms-foot a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .gs-terms-hero { padding: 32px 20px; }
  .gs-terms-hero-title { font-size: 26px; }
  .gs-terms-hero-sub { font-size: 13.5px; }
  .gs-terms-preamble,
  .gs-terms-section,
  .gs-terms-foot { padding-left: 18px; padding-right: 18px; }
  .gs-terms-section h2 { font-size: 17px; }
  .gs-terms-section h3 { font-size: 14px; }
  .gs-terms-section p,
  .gs-terms-list { font-size: 13.5px; }
  .gs-terms-table { font-size: 12.5px; display: block; overflow-x: auto; }
  .gs-terms-table--rows tbody th { width: auto; }
}

/* ============================================================
   .gs-terms2-* SHARED ADD-ONS
   ------------------------------------------------------------
   Components used by the Privacy / Cookie / Grievance pages.
   Live alongside the Terms & Conditions design system so all
   four legal pages share the same hero, TOC, section, alert,
   table, pill, officer and notice primitives - and these add
   the page-specific blocks (consent strip, rights grid, intl
   cards, escalation ladder cards, cookie category cards, etc.)
   ============================================================ */

/* ---- Strip band that sits directly under the hero ----
   Slightly lighter navy than the hero so it reads as a second
   band (separator pill row). Full-bleed via the negative-margin
   trick the hero uses. */
.gs-terms2-strip {
  background: linear-gradient(135deg, #271c5e 0%, #2e1f63 100%);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 16px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.gs-terms2-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.gs-terms2-strip-label {
      font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    flex-shrink: 0;
}
.gs-terms2-strip-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.gs-terms2-chip {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    padding: 4px 9px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.gs-terms2-chip--solid {
  background: rgba(196, 181, 253, 0.22);
  border-color: rgba(196, 181, 253, 0.45);
  color: #fff;
}
.gs-terms2-stripsep {
  color: rgba(255, 255, 255, 0.35);
  font-size: 14px;
  user-select: none;
}
/* Dot chips (cookie page) */
.gs-terms2-chipdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gs-terms2-chipdot--red   { background: #ff6b6b; }
.gs-terms2-chipdot--green { background: #5ed49a; }

/* ---- Controller card (Privacy S2) ----
   White card with a dark gradient header strip + 2-col body of
   labelled cells, full-width row support via -full modifier. */
.gs-terms2-controller {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  overflow: hidden;
  margin: 16px 0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}
.gs-terms2-controller-head {
  background: linear-gradient(135deg, #1e293b 0%, #1e293b 100%);
  padding: 16px 22px;
  color: #fff;
}
.gs-terms2-controller-head h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 3px;
  letter-spacing: -0.1px;
}
.gs-terms2-controller-head p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}
.gs-terms2-controller-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.gs-terms2-controller-cell {
  padding: 14px 22px;
  border-bottom: 1px solid #e4e7ec;
  border-right: 1px solid #e4e7ec;
}
.gs-terms2-controller-cell:nth-child(even) { border-right: 0; }
.gs-terms2-controller-cell:nth-last-child(-n+2) { border-bottom: 0; }
.gs-terms2-controller-full {
  grid-column: 1 / -1;
  border-right: 0 !important;
}
.gs-terms2-controller-label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #667085;
  font-weight: 600;
  margin-bottom: 4px;
}
.gs-terms2-controller-value {
  font-size: 13.5px;
  color: #111827;
  font-weight: 500;
}
.gs-terms2-controller-value a {
  color: #6d3df5;
  text-decoration: none;
  border-bottom: 1px solid rgba(109, 61, 245, 0.3);
}
.gs-terms2-controller-value a:hover { border-bottom-color: #6d3df5; }

/* ---- Rights grid (Privacy S9) ----
   2-col card grid of "right" cards (icon + title + desc). -full
   modifier spans both columns for the headline Nomination right. */
.gs-terms2-rightsgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 18px 0;
}
.gs-terms2-rightcard {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.gs-terms2-rightcard:hover {
  border-color: #c4b5fd;
  box-shadow: 0 4px 14px rgba(109, 61, 245, 0.08);
  transform: translateY(-1px);
}
.gs-terms2-rightcard--full { grid-column: 1 / -1; }
.gs-terms2-rightcard-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: #f6f2ff;
  color: #6d3df5;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gs-terms2-rightcard-icon svg { width: 19px; height: 19px; }
.gs-terms2-rightcard-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 3px;
}
.gs-terms2-rightcard-desc {
  font-size: 12.5px;
  color: #667085;
  line-height: 1.55;
}

/* ---- International grid (Privacy S11A) ----
   2-col cards with a small region tag, title, sub, and a paragraph
   describing the regional rights / framework. */
.gs-terms2-intlgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.gs-terms2-intlcard {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  padding: 16px;
}
.gs-terms2-intlcard-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.gs-terms2-intlcard-tag {
  flex-shrink: 0;
  background: #1e293b;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 6px;
  min-width: 38px;
  text-align: center;
}
.gs-terms2-intlcard-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
}
.gs-terms2-intlcard-sub {
  font-size: 11.5px;
  color: #667085;
}
.gs-terms2-intlcard p {
  font-size: 13px;
  color: #475467;
  line-height: 1.6;
  margin: 0;
}

/* ---- Principles grid (Grievance S2) ----
   2-col numbered tile list. */
.gs-terms2-principles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.gs-terms2-principle {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #475467;
  line-height: 1.55;
}
.gs-terms2-principle-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: #f6f2ff;
  color: #6d3df5;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  margin-top: 1px;
}

/* ---- Escalation level cards (Grievance S4) ----
   Vertical stack of L1/L2/L3/L4 cards. Each card has a coloured
   badge, name, sub-text, and a body region that can contain alerts,
   tables, officer cards, or meta info rows. */
.gs-terms2-leveltree {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0;
}
.gs-terms2-level {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  overflow: hidden;
  scroll-margin-top: 120px;
}
.gs-terms2-level-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid #e4e7ec;
}
.gs-terms2-level-badge {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.gs-terms2-level-badge--l1 { background: #fafbff; color: #1a5fa0; }
.gs-terms2-level-badge--l2 { background: #fff7e2; color: #b8540a; }
.gs-terms2-level-badge--l3 { background: #f6f2ff; color: #6d3df5; }
.gs-terms2-level-badge--l4 { background: #fafbff; color: #c0392b; }
.gs-terms2-level-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #111827;
}
.gs-terms2-level-sub {
  font-size: 12px;
  color: #667085;
  margin-top: 2px;
}
.gs-terms2-level-body {
  padding: 16px 20px;
  font-size: 13.5px;
  color: #475467;
  line-height: 1.7;
}
.gs-terms2-level-body p { margin: 0 0 12px; }
.gs-terms2-level-body p:last-child { margin-bottom: 0; }
.gs-terms2-level-body a {
  color: #6d3df5;
  text-decoration: none;
  border-bottom: 1px solid rgba(109, 61, 245, 0.3);
}
.gs-terms2-level-body a:hover { border-bottom-color: #6d3df5; }
.gs-terms2-level-meta {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e4e7ec;
}
.gs-terms2-level-meta > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gs-terms2-level-mlabel {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #667085;
  font-weight: 700;
}
.gs-terms2-level-mvalue {
  font-size: 13px;
  color: #111827;
  font-weight: 500;
}
a.gs-terms2-level-mvalue {
  color: #6d3df5;
  border-bottom: 1px solid rgba(109, 61, 245, 0.3);
  text-decoration: none;
  width: fit-content;
}
a.gs-terms2-level-mvalue:hover { border-bottom-color: #6d3df5; }

/* ---- Cookie category cards (Cookie S3) ----
   Vertical stack with a coloured icon, name + sub, and an Always
   Active / Can be declined pill on the right of the header. */
.gs-terms2-cookcards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}
.gs-terms2-cookcard {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.gs-terms2-cookcard:hover {
  border-color: #c4b5fd;
  box-shadow: 0 4px 14px rgba(109, 61, 245, 0.06);
}
.gs-terms2-cookcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #e4e7ec;
}
.gs-terms2-cookcard-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.gs-terms2-cookcard-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gs-terms2-cookcard-icon svg { width: 19px; height: 19px; }
.gs-terms2-cookcard-icon--essential { background: #fafbff; color: #8b1a1a; }
.gs-terms2-cookcard-icon--perf      { background: #fafbff; color: #1a5fa0; }
.gs-terms2-cookcard-icon--analytics { background: #fff7e2; color: #b8540a; }
.gs-terms2-cookcard-icon--ads       { background: #f6f2ff; color: #6d3df5; }
.gs-terms2-cookcard-icon--social    { background: #fafbff; color: #0c6e8a; }
.gs-terms2-cookcard-name {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}
.gs-terms2-cookcard-sub {
  font-size: 12px;
  color: #667085;
  margin-top: 2px;
}
.gs-terms2-cookcard-body {
  padding: 14px 18px;
  font-size: 13.5px;
  color: #475467;
  line-height: 1.65;
}
.gs-terms2-cookcard-body p { margin: 0 0 10px; }
.gs-terms2-cookcard-body p:last-child { margin-bottom: 0; }
.gs-terms2-cooktools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.gs-terms2-tooltag {
  background: #f6f2ff;
  color: #6d3df5;
  border: 1px solid #e4e7ec;
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 500;
}

/* ---- Control grid (Cookie S4) ----
   2-col card grid showing the ways a user can manage cookies. */
.gs-terms2-controlgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.gs-terms2-controlcard {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.gs-terms2-controlcard-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: #f6f2ff;
  color: #6d3df5;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gs-terms2-controlcard-icon svg { width: 19px; height: 19px; }
.gs-terms2-controlcard-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}
.gs-terms2-controlcard-desc {
  font-size: 12.5px;
  color: #667085;
  line-height: 1.55;
}

/* ---- TOC sub-row (Grievance L1..L4 indented under "Escalation Matrix") ---- */
.gs-terms2-toc-list a.is-sub {
  padding-left: 22px;
  font-size: 12.5px;
  color: #667085;
}
.gs-terms2-toc-list a.is-sub .gs-terms2-toc-num {
  opacity: 0.6;
  font-size: 11px;
}

/* ============================================================
   RESPONSIVE TUNING FOR ADD-ONS
   ============================================================ */

@media (max-width: 980px) {
  .gs-terms2-strip { padding: 14px 18px; }
  .gs-terms2-rightsgrid,
  .gs-terms2-intlgrid,
  .gs-terms2-principles,
  .gs-terms2-controlgrid { grid-template-columns: 1fr; }
  .gs-terms2-controller-grid { grid-template-columns: 1fr; }
  .gs-terms2-controller-cell { border-right: 0; }
  .gs-terms2-controller-cell:nth-last-child(-n+2) { border-bottom: 1px solid #e4e7ec; }
  .gs-terms2-controller-cell:last-child { border-bottom: 0; }
}

@media (max-width: 640px) {
  .gs-terms2-strip { padding: 12px 14px; }
  .gs-terms2-strip-inner { gap: 12px; }
  .gs-terms2-strip-label { font-size: 10px; }
  .gs-terms2-chip { font-size: 11.5px; padding: 4px 11px; }
  .gs-terms2-stripsep { display: none; }

  .gs-terms2-controller-head { padding: 14px 18px; }
  .gs-terms2-controller-head h3 { font-size: 15.5px; }
  .gs-terms2-controller-cell { padding: 12px 18px; }

  .gs-terms2-rightcard,
  .gs-terms2-intlcard,
  .gs-terms2-controlcard,
  .gs-terms2-principle { padding: 14px; }
  .gs-terms2-rightcard-icon,
  .gs-terms2-controlcard-icon,
  .gs-terms2-cookcard-icon { width: 34px; height: 34px; }

  .gs-terms2-level-head { padding: 12px 16px; gap: 12px; }
  .gs-terms2-level-badge { width: 38px; height: 38px; font-size: 12px; }
  .gs-terms2-level-name { font-size: 13.5px; }
  .gs-terms2-level-body { padding: 14px 16px; font-size: 13px; }
  .gs-terms2-level-meta { gap: 16px; }

  .gs-terms2-cookcard-head { padding: 12px 14px; flex-wrap: wrap; gap: 10px; }
  .gs-terms2-cookcard-body { padding: 12px 14px; }
  .gs-terms2-cookcard-name { font-size: 13.5px; }
  .gs-bd2-buy-title{
        font-size: 19px;
  }
}

@media (max-width: 440px) {
  .gs-terms2-strip { padding: 10px 12px; }
  .gs-terms2-chip { font-size: 11px; padding: 3px 10px; }
  .gs-terms2-controller-head h3 { font-size: 14.5px; }
  .gs-terms2-rightcard-title,
  .gs-terms2-controlcard-title,
  .gs-terms2-intlcard-title,
  .gs-terms2-cookcard-name { font-size: 13px; }
  .gs-terms2-rightcard-desc,
  .gs-terms2-controlcard-desc { font-size: 12px; }
  .gs-terms2-level-badge { width: 34px; height: 34px; font-size: 11.5px; border-radius: 8px; }
  .gs-terms2-level-name { font-size: 13px; }
  .gs-terms2-level-sub { font-size: 11.5px; }
  .gs-terms2-principles { gap: 8px; }
}

/* ============================================================
   .gs-terms2-* SCROLL-MORE + COLLAPSE BEHAVIOUR
   ------------------------------------------------------------
   Ported from giftm.in legal.css. The main content column shows
   only the first 2 sections by default; a "Scroll to read more"
   button appears below them. Clicking the button (or any TOC
   item) removes .is-collapsed via inline JS, revealing the rest.
   ============================================================ */
.gs-terms2-scroll-more-wrap {
  display: flex;
  justify-content: center;
  margin: 28px 0 8px;
}
.gs-terms2-scroll-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 22px;
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  font-size: 13.5px;
  color: #111827;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: box-shadow .15s, transform .15s;
  font-family: inherit;
}
.gs-terms2-scroll-more:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.gs-terms2-scroll-more svg {
  width: 14px;
  height: 14px;
  color: #667085;
}
.gs-terms2-main.is-collapsed > .gs-terms2-section:nth-of-type(n+3) {
  display: none;
}
.gs-terms2-main:not(.is-collapsed) > .gs-terms2-scroll-more-wrap {
  display: none;
}
@media (max-width: 640px) {
  .gs-terms2-scroll-more { padding: 8px 16px; font-size: 12.5px; }
  .gs-terms2-scroll-more svg { width: 12px; height: 12px; }
  .gs-terms2-scroll-more-wrap { margin: 20px 0 8px; }
}

/* ============================================================
   Global typography - Inter across the whole storefront.
   Loaded via the Google Fonts <link> in includes/header.php.
   Placed last so it wins equal-specificity ties against the
   earlier system-font stacks; class-scoped fonts (monospace
   card codes, etc.) keep theirs because their specificity is
   higher than the universal selector.
   ============================================================ */
* {
  font-family: 'Inter', Arial, sans-serif;
}
html,
body {
  font-family: 'Inter', Arial, sans-serif;
}
button,
input,
select,
textarea,
a,
label,
span,
p,
div,
table,
th,
td {
  font-family: 'Inter', Arial, sans-serif;
}

/* ============================================================
   Mobile hamburger + off-canvas drawer
   - .gm-burger lives in .gm-header-inner; hidden on desktop, shown
     ≤900px where the desktop nav row collapses.
   - .gm-drawer + .gm-drawer-backdrop are siblings of <header>; both
     position:fixed and z-indexed above page content.
   ============================================================ */
.gm-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e4e7ec;
    background: #fff;
    border-radius: 8px;
    color: #111827;
    cursor: pointer;
    flex: none;
}
.gm-burger:hover { background: #fafbff; }
.gm-burger svg { width: 20px; height: 20px; display: block; }

.gm-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 9998;
    animation: gmDrawerFade 0.18s ease;
}
@keyframes gmDrawerFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.gm-drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 86%;
    max-width: 320px;
    background: #fff;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.gm-drawer.is-open { transform: translateX(0); }

.gm-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e4e7ec;
    flex: none;
}
.gm-drawer-title {
    font-size: 20px;
    font-weight: 800;
    font-style: italic;
    color: #111827;
    display: inline-flex;
    align-items: center;
}
.gm-drawer-title img { max-height: 28px; width: auto; }
.gm-drawer-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #fafbff;
    border-radius: 8px;
    color: #111827;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gm-drawer-close:hover { background: #e4e7ec; }
.gm-drawer-close svg { width: 18px; height: 18px; }

.gm-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 12px 24px;
    -webkit-overflow-scrolling: touch;
}

.gm-drawer-account {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #f6f2ff, #f6f2ff);
    border-radius: 10px;
    text-decoration: none;
    color: #111827;
    margin-bottom: 12px;
}
.gm-drawer-account .gm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6d3df5;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex: none;
}
.gm-drawer-account .gm-avatar-anon { background: #fff; color: #6d3df5; border: 1px solid #c4b5fd; }
.gm-drawer-account .gm-avatar-anon svg { width: 18px; height: 18px; }
.gm-drawer-account > span:not(.gm-avatar) {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}
.gm-drawer-account strong { font-size: 14px; font-weight: 700; }
.gm-drawer-account > span:not(.gm-avatar) > span { font-size: 11px; color: #667085; }

.gm-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 16px;
}
.gm-drawer-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #111827;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.12s ease;
}
.gm-drawer-links a:hover { background: #fafbff; }
.gm-drawer-links a svg { width: 18px; height: 18px; color: #6d3df5; flex: none; }

.gm-drawer-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #667085;
    padding: 8px 10px;
    border-top: 1px solid #e4e7ec;
    margin-top: 4px;
}
.gm-drawer-cats {
    display: flex;
    flex-direction: column;
}
.gm-drawer-cats a {
    padding: 11px 10px;
    text-decoration: none;
    color: #475467;
    font-size: 13px;
    border-radius: 6px;
    border-left: 3px solid transparent;
}
.gm-drawer-cats a:hover { background: #fafbff; color: #111827; }
.gm-drawer-cats a.is-active {
    color: #6d3df5;
    border-left-color: #6d3df5;
    background: #f6f2ff;
    font-weight: 600;
}

/* Show burger + ensure header stays single-row at tablet/mobile */
@media (max-width: 900px) {
    .gm-burger { display: inline-flex; }
}
@media (max-width: 600px) {
    .gm-drawer { width: 92%; }
    .gm-burger { width: 36px; height: 36px; }
    .gm-burger svg { width: 18px; height: 18px; }
}
@media (max-width: 380px) {
    .gm-drawer { width: 100%; max-width: none; }
}

/* ============================================================
   Mobile gutter normalisation (<=1000px)
   On tablet/phone the ONLY side gap should come from the shell
   (.gm-shell-inner = 0 16px). Page-level wrappers therefore drop their
   own left/right padding so the gutter is never doubled. Vertical
   padding is preserved. Placed last so it wins by source order.
   ============================================================ */
@media (max-width: 1000px) {
  .gs-cat-page,
  .gs-cat-crumb,
  .gs-bd2-grid,
  .gs-bd2-crumb,
  .gs-cart2-grid,
  .gs-cart2-crumb,
  .gs-deals-page,
  .gs-offers-page,
  .gs-checkout-grid.gs-checkout-grid--v2 {
    padding-left: 0;
    padding-right: 0;
  }
}