/* ============================================================
   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: #ffffff;
  border-bottom: 1px solid #eef0f4;
  text-align: center;
  padding: 8px 16px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
}

/* ---------- Header ---------- */
.gm-header {
  background: #ffffff;
  border-bottom: 0px solid #eef0f4;
  padding: 14px 0;
}

.gm-header-inner {
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  justify-content: space-between;
}

.gm-logo {
  font-family: inherit;
  font-size: 26px;
  font-weight: 800;
  font-style: italic;
  color: #111827;
  letter-spacing: -0.5px;
  flex: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding-left: 30px;
}

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

.gm-search {
  flex: 1;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 4px 4px 4px 16px;
  height: 46px;
  max-width: 640px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.gm-search:focus-within {
  border-color: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}

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

.gm-search-input svg { width: 16px; height: 16px; color: #9ca3af; flex: none; }

.gm-search-input input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 13px;
  color: #374151;
  background: transparent;
}

.gm-search-input input::placeholder { color: #9ca3af; }

.gm-search-divider {
  width: 1px;
  height: 22px;
  background: #e5e7eb;
  margin: 0 12px;
}

.gm-search-select {
  border: none;
  background: transparent;
  color: #4b5563;
  font-size: 13px;
  font-weight: 500;
  padding: 0 6px;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
}

.gm-search-btn {
  background: #111827;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 0 26px;
  height: 38px;
  margin-left: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.gm-search-btn:hover { background: #000000; }

.gm-header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.gm-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #4b5563;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
  position: relative;
}

.gm-action svg { width: 20px; height: 20px; stroke: #000; }
.gm-action:hover { color: #111827; }

.gm-action .gm-cart-badge {
  position: absolute;
  top: -4px;
  right: 4px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* ---------- Layout shell ---------- */
.gm-shell {
  background: #fff;
  min-height: 100vh;
}

.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: #000;
  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: #000; }
.gm-side-nav a:hover { background: #f3f4f6; 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: #f1f5f9; margin: 8px 4px; }

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

/* ---------- Hero banner ---------- */
.gm-hero {
  background: #f1f3f8;
  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-text { flex: 1; max-width: 38%; }

.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-text p {
  margin: 0 0 18px;
  color: #000;
  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: #000000; transform: translateY(-1px); }

.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: 17px;
  font-weight: 700;
  color: #111827;
}

.gm-view-all {
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  text-decoration: none;
  transition: color 0.15s ease;
}

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

/* ---------- 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 #eef0f4;
  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: #f3f4f6;
  border: 1px solid #eef0f4;
  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: #f3f4f6;
  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: #6b7280;
  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: #3b82f6;
}

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

.gm-grid-subtitle {
  color: #64748b;
  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 #e9e9ea;
  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: #234;
  text-decoration: none;
  white-space: nowrap;
}

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

.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 #e9e9ea;
  font-size: 14px;
  font-weight: 600;
  color: #234;
  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: #e5e7eb; }

.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;
  border: 1px solid #eef0f4;
  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 {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}

.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;
}

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

.gm-card-art > .gm-card-name-overlay {
  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: #0f172a;
  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: #f3f4f6;
  color: #0f172a;
  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. */
.gm-card-cat.gm-cat-commerce      { background:#ffedd5; color:#c2410c; }
.gm-card-cat.gm-cat-fashion       { background:#f3e8ff; color:#7e22ce; }
.gm-card-cat.gm-cat-grocery       { background:#dcfce7; color:#15803d; }
.gm-card-cat.gm-cat-food          { background:#fef3c7; color:#a16207; }
.gm-card-cat.gm-cat-travel        { background:#e0f2fe; color:#075985; }
.gm-card-cat.gm-cat-entertainment { background:#fee2e2; color:#b91c1c; }
.gm-card-cat.gm-cat-beauty        { background:#fce7f3; color:#be185d; }
.gm-card-cat.gm-cat-footwear      { background:#ffe4e6; color:#be123c; }
.gm-card-cat.gm-cat-sports        { background:#fef3c7; color:#92400e; }
.gm-card-cat.gm-cat-electronics   { background:#cffafe; color:#155e75; }
.gm-card-cat.gm-cat-gaming        { background:#ede9fe; color:#5b21b6; }
.gm-card-cat.gm-cat-jewellery     { background:#fef3c7; color:#92400e; }

.gm-card-cart.gm-cat-commerce      { background:#ffedd5; color:#c2410c; }
.gm-card-cart.gm-cat-fashion       { background:#f3e8ff; color:#7e22ce; }
.gm-card-cart.gm-cat-grocery       { background:#dcfce7; color:#15803d; }
.gm-card-cart.gm-cat-food          { background:#fef3c7; color:#a16207; }
.gm-card-cart.gm-cat-travel        { background:#e0f2fe; color:#075985; }
.gm-card-cart.gm-cat-entertainment { background:#fee2e2; color:#b91c1c; }
.gm-card-cart.gm-cat-beauty        { background:#fce7f3; color:#be185d; }
.gm-card-cart.gm-cat-footwear      { background:#ffe4e6; color:#be123c; }
.gm-card-cart.gm-cat-sports        { background:#fef3c7; color:#92400e; }
.gm-card-cart.gm-cat-electronics   { background:#cffafe; color:#155e75; }
.gm-card-cart.gm-cat-gaming        { background:#ede9fe; color:#5b21b6; }
.gm-card-cart.gm-cat-jewellery     { background:#fef3c7; color:#92400e; }

/* ============================================================
   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: #0f172a;
  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, #d1fae5 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: #0f172a;
  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: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 1.5rem;
}
.gs-bd-assured-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #10b981, #059669);
  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: #047857; font-size: 0.85rem; display: block; margin-top: 2px; }
.gs-bd-assured-text a { color: #047857; 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 #d1fae5;
}

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

/* Right column - sticky buy panel */
.gs-bd-buy {
  position: sticky;
  top: 16px;
  background: #ffffff;
  border: 1px solid #eef0f4;
  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 #f3f4f6;
}
.gs-bd-buy-head h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 3px; color: #0f172a; }
.gs-bd-buy-head p  { font-size: 0.82rem; color: #6b7280; 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, #f97316, #ea580c);
  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, #0f766e), #0b3d3a);
  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 #f3f4f6; }
.gs-bd-design-pick .gs-bd-design-label {
  font-size: 0.74rem;
  color: #6b7280;
  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 #e5e7eb;
  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: #0f766e; }
.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: #374151; }

.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 #f3f4f6;
  border-radius: 10px;
  transition: background-color 0.15s ease;
}
.gs-bd-denom:first-child { border-top: none; }
.gs-bd-denom:hover { background: #f8fafc; }

.gs-bd-denom-amt strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}
.gs-bd-denom-off {
  display: inline-block;
  background: #dcfce7;
  color: #15803d;
  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: #64748b; margin-top: 2px; display: block; }

.gs-bd-qty {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  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: #374151;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.gs-bd-qty button:hover { background: #f3f4f6; color: #0f172a; }
.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: #0f172a;
}
.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: #64748b;
}
.gs-bd-denom-total strong {
  display: block;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 2px;
}

.gs-bd-buy-foot { margin-top: 18px; padding-top: 18px; border-top: 2px dashed #e5e7eb; }
.gs-bd-redeem-link {
  display: flex;
  justify-content: flex-end;
  font-size: 0.85rem;
  color: #475569;
  margin-bottom: 12px;
}
.gs-bd-redeem-link a { color: #475569; }
.gs-bd-grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: #0f172a;
}
.gs-bd-grand strong {
  font-size: 1.55rem;
  font-weight: 900;
  color: #16a34a;
}
.gs-bd-checkout {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #0f172a, #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: #6b7280;
  margin: 12px 0 0;
}
.gs-bd-safe strong { color: #7c3aed; }

/* ============================================================
   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: #0f172a;
  line-height: 1.2;
}

.gs-cart-items {
  background: #ffffff;
  border: 1px solid #eef0f4;
  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 #f3f4f6; }
.gs-cart-row:hover { background: #f8fafc; }

.gs-cart-img {
  width: 78px;
  height: 78px;
  border-radius: 14px;
  background: #f3f4f6;
  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, #0f766e), #0b3d3a);
  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: #0f172a;
  margin: 0 0 4px;
  line-height: 1.3;
}
.gs-cart-info-meta { font-size: 0.82rem; color: #64748b; }
.gs-cart-info-meta .gs-cart-off {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  background: #dcfce7;
  color: #15803d;
  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 #e5e7eb;
  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: #374151;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.gs-cart-qty button:hover { background: #f3f4f6; color: #0f172a; }
.gs-cart-qty input {
  width: 42px;
  border: none;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  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: #0f172a;
}
.gs-cart-remove {
  background: none;
  border: none;
  color: #dc2626;
  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 #eef0f4;
  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: #0f172a;
}
.gs-cart-sum-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  margin-bottom: 10px;
  color: #475569;
}
.gs-cart-sum-row strong { font-weight: 700; color: #0f172a; }
.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 #e5e7eb;
  border-bottom: 1px dashed #e5e7eb;
  padding: 12px 0;
  margin: 14px 0;
}
.gs-cart-promo-toggle {
  cursor: pointer;
  color: var(--gm-primary, #0f766e);
  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 #e5e7eb;
  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, #0f766e);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.gs-cart-promo-form button {
  padding: 9px 16px;
  background: var(--gm-primary, #0f766e);
  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: #f0fdf4;
  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: #0f766e;
  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: #0f172a;
  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, #0f172a, #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: #6b7280;
  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 #eef0f4;
  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: #0f172a; }
.gs-cart-empty p  { color: #6b7280; 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 #eef0f4;
  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: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gs-checkout-card h3 svg {
  width: 18px;
  height: 18px;
  color: var(--gm-primary, #0f766e);
}
.gs-checkout-card-sub {
  font-size: 0.85rem;
  color: #64748b;
  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: #475569;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.gs-checkout-input,
.gs-checkout-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.92rem;
  background: #f8fafc;
  color: #0f172a;
  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, #0f766e);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.gs-checkout-textarea { resize: vertical; min-height: 72px; }

/* Recipient cards */
.gs-checkout-rec {
  border: 1px solid #e5e7eb;
  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, #0f766e);
  background: #f0fdfa;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 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: #f3f4f6;
  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, #0f766e), #0b3d3a);
  color: #ffffff;
  font-weight: 900;
  font-size: 19px;
  text-transform: uppercase;
}
.gs-checkout-rec-name { font-weight: 700; color: #0f172a; line-height: 1.3; }
.gs-checkout-rec-meta { font-size: 0.8rem; color: #64748b; margin-top: 2px; }
.gs-checkout-gift-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  transition: all 0.15s ease;
  user-select: none;
}
.gs-checkout-gift-toggle:hover { border-color: var(--gm-primary, #0f766e); color: var(--gm-primary, #0f766e); }
.gs-checkout-gift-toggle input {
  accent-color: var(--gm-primary, #0f766e);
  cursor: pointer;
  width: 14px;
  height: 14px;
}
.gs-checkout-rec.is-gift .gs-checkout-gift-toggle {
  background: var(--gm-primary, #0f766e);
  color: #ffffff;
  border-color: var(--gm-primary, #0f766e);
}
.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 #e5e7eb;
  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;
}
.gs-checkout-pay:hover { border-color: #cbd5e1; }
.gs-checkout-pay:has(input:checked) {
  border-color: var(--gm-primary, #0f766e);
  background: #f0fdfa;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.08);
}
.gs-checkout-pay input[type="radio"] {
  accent-color: var(--gm-primary, #0f766e);
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.gs-checkout-pay-main { flex: 1; }
.gs-checkout-pay-title { font-weight: 700; color: #0f172a; font-size: 0.95rem; }
.gs-checkout-pay-meta {
  font-size: 0.78rem;
  color: #64748b;
  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: #64748b;
  margin: 10px 0 0;
  line-height: 1.5;
}
.gs-checkout-info a { color: var(--gm-primary, #0f766e); 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;
}

/* Warning-tinted variant of the sign-in hero - used by the step-up
   modal so the OTP-required state reads as a security cue, not just
   another login prompt. */
.gs-signin-hero--warn {
  background: linear-gradient(135deg, #b45309, #92400e);
}

/* ============================================================
   Sign-in callout (checkout etc.) + sign-in modal (.gs-signin-*)
   ============================================================ */
.gs-signin-callout {
  background: #ffffff;
  border: 1px solid #eef0f4;
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}
.gs-signin-callout-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: grid;
  place-items: center;
  color: #b45309;
  margin-bottom: 6px;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.28);
}
.gs-signin-callout-icon svg { width: 28px; height: 28px; }
.gs-signin-callout h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.gs-signin-callout p {
  color: #64748b;
  margin: 0;
  font-size: 0.95rem;
  max-width: 520px;
  line-height: 1.55;
}
.gs-signin-callout .gs-cta {
  margin-top: 10px;
  padding: 13px 32px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.2);
}
.gs-signin-callout .gs-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.28);
  text-decoration: none;
  color: #ffffff;
}

/* Modal card replaces the legacy gs-modal-card look on the sign-in
   modal. Hero gradient picks the tenant's brand primary so the modal
   re-skins automatically when Branding changes. */
.gs-signin-modal-card {
  background: #ffffff;
  max-width: 460px;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.32);
}
.gs-signin-hero {
  position: relative;
  background: linear-gradient(135deg, var(--gm-primary, #0f766e), color-mix(in srgb, var(--gm-primary, #0f766e) 65%, #000000));
  color: #ffffff;
  padding: 32px 28px 28px;
  text-align: center;
}
.gs-signin-hero-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: #ffffff;
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.15s ease;
  padding: 0;
  line-height: 1;
}
.gs-signin-hero-close:hover { background: rgba(255, 255, 255, 0.3); }
.gs-signin-hero-logo {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  overflow: hidden;
}
.gs-signin-hero-logo img { max-width: 40px; max-height: 40px; object-fit: contain; }
.gs-signin-hero h2 {
  font-size: 1.35rem;
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.gs-signin-hero p {
  font-size: 0.88rem;
  opacity: 0.92;
  margin: 0;
}
.gs-signin-body { padding: 26px 28px 30px; }
.gs-signin-label {
  display: block;
  font-size: 0.8rem;
  color: #475569;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.gs-signin-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  background: #f8fafc;
  color: #0f172a;
}
.gs-signin-input:focus {
  border-color: var(--gm-primary, #0f766e);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}
.gs-signin-hint {
  font-size: 0.74rem;
  color: #64748b;
  margin: 8px 0 0;
  line-height: 1.5;
}
.gs-signin-terms {
  font-size: 0.78rem;
  color: #64748b;
  margin: 16px 0 18px;
  line-height: 1.5;
}
.gs-signin-terms a { color: var(--gm-primary, #0f766e); text-decoration: underline; }
.gs-signin-submit {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.2);
}
.gs-signin-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.28);
}
.gs-signin-otp-code {
  text-align: center;
  font-size: 1.55rem;
  letter-spacing: 0.55rem;
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-weight: 700;
}
.gs-signin-row { display: flex; gap: 10px; margin-top: 14px; }
.gs-signin-back {
  flex: 1;
  padding: 12px;
  background: #f3f4f6;
  color: #0f172a;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.92rem;
}
.gs-signin-back:hover { background: #e5e7eb; }
.gs-signin-row .gs-signin-submit { flex: 2; margin-top: 0; }
.gs-signin-resend {
  margin-top: 14px;
  width: 100%;
  background: none;
  border: 0;
  color: var(--gm-primary, #0f766e);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}
.gs-signin-msg {
  font-size: 0.9rem;
  color: #374151;
  margin: 0 0 16px;
  line-height: 1.55;
}
.gs-signin-msg strong { color: #0f172a; font-weight: 700; }
.gs-signin-error {
  display: none;
  color: #991b1b;
  font-size: 0.85rem;
  margin-top: 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 10px 12px;
}

/* ============================================================
   Trust strip ({{trust_strip}} shortcode)
   ============================================================ */
.gm-trust {
  background: #f6f7fb;
  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: #64748b;
  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; }
}

/* Small tablet (≤900px): sidebar becomes a horizontal scroll rail */
@media (max-width: 900px) {
  .gm-header-inner   { flex-wrap: wrap; gap: 12px; padding: 0 16px; }
  .gm-logo           { padding-left: 0; font-size: 22px; }
  .gm-search         { order: 3; flex-basis: 100%; max-width: none; margin-top: 4px; }
  .gm-header-actions { gap: 14px; margin-left: auto; }
  .gm-action         { font-size: 10px; }
  .gm-action svg     { width: 18px; height: 18px; }

  .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: #f3f4f6;
    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             { padding: 10px 0; }
  .gm-header-inner       { gap: 10px; padding: 0 12px; align-items: center; }
  .gm-logo               { font-size: 20px; }
  .gm-search             { height: 42px; padding: 4px 4px 4px 12px; }
  .gm-search-divider     { display: none; }
  .gm-search-select      { display: none; }
  .gm-search-btn         { padding: 0 16px; height: 34px; font-size: 12px; }
  .gm-search-input input { font-size: 12px; }
  /* Logo + actions sit on row 1, search wraps to row 2 (search has order:3 from the 900px tier) */
  .gm-header-actions     { gap: 16px; margin: 0; flex: 0 0 auto; }
  .gm-action span        { display: none; }
  .gm-action svg         { width: 22px; height: 22px; }

  .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: 15px; }
  .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           { height: 92px; }
  .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; }
}