/*
 * Shared design tokens + components — Globee Commerce (TIG-55).
 *
 * TIG-55 asks the storefront to look like a premium travel-goods retailer
 * (reference: tumi.sg) instead of the generic "Globee Commerce" placeholder
 * look it had before. This is a visual reskin only — style-inspired, not a
 * literal clone (no TUMI copy/trademarked program names) — every page keeps
 * its "Globee Commerce" branding, every element id/class the JS/SDK
 * integration depends on is unchanged, only what's *around* them changed.
 *
 * One shared stylesheet, one token set, linked from all 5 pages — cart.html/
 * checkout.html/thankyou.html already used a --token set of their own before
 * this change (just with different values); home.html/product.html are
 * brought onto the same tokens here for the first time.
 */

:root {
  /* ── Palette — deep navy + warm brass, premium-travel rather than tech-SaaS ── */
  --bg:          #ffffff;   /* page background (light pages: home/product) */
  --bg-dark:     #0e1c2e;   /* page background (dark pages: cart/checkout/thankyou) */
  --secondary:   #101f33;   /* header/footer bar */
  --secondary2:  #16283f;   /* slightly lighter navy, for hover/active states */
  --surface:     #f7f6f2;   /* light card/section fill */
  --surface2:    #ffffff;   /* light card fill, on top of --surface */
  --surface-dark:  #16283f; /* dark card/section fill */
  --surface2-dark: #1c3049; /* dark card fill, on top of --surface-dark */
  --text:        #14181f;   /* body text, light pages */
  --text-dark:   #f2f1ec;   /* body text, dark pages */
  --text-muted:  #6b7280;   /* secondary text, light pages */
  --text-muted-dark: #8b96a8; /* secondary text, dark pages */
  --border:      #e4e1da;   /* hairline, light pages */
  --border-dark: #263a54;   /* hairline, dark pages */
  --accent:      #b8935a;   /* brass/gold — reserved for OBMS-injected moments
                                (offer banners, substitute recs, toasts, score
                                bar) so a viewer can tell at a glance which UI
                                came from the storefront vs. from OBMS */
  --accent-dark: #9c7943;
  --ink:         #14181f;   /* near-black, for primary CTAs on light pages */
  --ink-hover:   #2a3441;
  --green:       #2e7d32;
  --red:         #b3261e;
  --thumb-bg:    #f0efe9;   /* product-thumbnail backdrop, light */
  --thumb-bg-dark: #0f1923; /* product-thumbnail backdrop, dark */

  /* ── Type — single clean sans stack, hierarchy via weight/size/spacing,
         not a display serif (matches the reference site's actual type,
         and avoids pulling in a webfont — this site stays dependency-free) ── */
  --font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ── Crisp edges + generous spacing reads "retail", not "rounded SaaS card" ── */
  --radius: 2px;
  --radius-lg: 3px;
}

* , *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: var(--font); }

/* ── Announcement bar — dismissible, sits above the sticky header (TIG-55) ── */
.gc-announce {
  background: var(--ink); color: var(--text-dark); font-size: 12px;
  text-align: center; padding: 9px 40px; position: relative;
}
.gc-announce strong { font-weight: 700; }
.gc-announce-close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--text-muted-dark); font-size: 16px;
  cursor: pointer; line-height: 1; padding: 4px;
}
.gc-announce-close:hover { color: var(--text-dark); }

/* ── Shared header — logo + nav + cart button ──────────────────────────── */
.gc-header {
  background: var(--secondary);
  border-bottom: 1px solid var(--border-dark);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  position: sticky;
  top: 0;
  z-index: 800;
  gap: 24px;
}
.gc-logo {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.gc-logo span { color: var(--accent); }
.gc-nav { display: flex; gap: 28px; align-items: center; flex: 1; }
.gc-nav a {
  color: var(--text-muted-dark);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.gc-nav a:hover, .gc-nav a.active { color: var(--text-dark); }
.gc-crumb-sep { color: var(--border-dark); font-size: 13px; }
.gc-crumb-current { color: var(--text-dark); font-size: 13px; }
.gc-cart-btn {
  background: none; border: 1px solid var(--border-dark); color: var(--text-dark);
  border-radius: var(--radius); padding: 8px 18px; font-size: 12px;
  letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer;
  display: flex; align-items: center; gap: 8px; transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.gc-cart-btn:hover { border-color: var(--accent); background: var(--secondary2); }

/* ── Shared footer — proportionate to a 6-product demo, not a full retailer
       mega-footer: brand blurb + three trust points + newsletter + bottom bar ── */
.gc-footer { background: var(--secondary); border-top: 1px solid var(--border-dark); margin-top: 56px; }
.gc-footer-inner { max-width: 1300px; margin: 0 auto; padding: 40px 40px 24px; }
.gc-footer-social { display: flex; justify-content: flex-end; gap: 16px; margin-bottom: 24px; }
.gc-footer-social a {
  color: var(--text-muted-dark); display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 1px solid var(--border-dark); border-radius: 50%;
  transition: color 0.15s, border-color 0.15s;
}
.gc-footer-social a:hover { color: var(--text-dark); border-color: var(--text-muted-dark); }
.gc-footer-social svg { width: 14px; height: 14px; }
.gc-footer-top {
  display: grid; grid-template-columns: 1.2fr repeat(3, 0.8fr) 1.3fr; gap: 32px;
  padding-bottom: 28px; border-bottom: 1px solid var(--border-dark);
}
@media (max-width: 760px) { .gc-footer-top { grid-template-columns: 1fr; } }
.gc-footer-brand { font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dark); margin-bottom: 10px; }
.gc-footer-blurb { font-size: 13px; color: var(--text-muted-dark); line-height: 1.6; max-width: 320px; }
.gc-footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dark); margin-bottom: 12px; }
.gc-footer-col a { display: block; font-size: 13px; color: var(--text-muted-dark); text-decoration: none; margin-bottom: 9px; transition: color 0.15s; }
.gc-footer-col a:hover { color: var(--text-dark); }
.gc-footer-newsletter-title { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dark); margin-bottom: 12px; }
.gc-footer-newsletter-desc { font-size: 13px; color: var(--text-muted-dark); line-height: 1.6; margin-bottom: 14px; max-width: 280px; }
.gc-newsletter-form { display: flex; border-bottom: 1px solid var(--border-dark); padding-bottom: 8px; }
.gc-newsletter-form input {
  flex: 1; background: none; border: none; color: var(--text-dark); font-size: 13px;
  padding: 4px 0; outline: none; font-family: var(--font);
}
.gc-newsletter-form input::placeholder { color: var(--text-muted-dark); }
.gc-newsletter-form button {
  background: none; border: none; color: var(--text-dark); cursor: pointer;
  font-size: 15px; padding: 0 2px; transition: color 0.15s;
}
.gc-newsletter-form button:hover { color: var(--accent); }
.gc-newsletter-note { font-size: 11px; color: var(--accent); margin-top: 8px; min-height: 14px; }
.gc-footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-top: 18px; font-size: 12px; color: var(--text-muted-dark);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.gc-btn {
  border: none; border-radius: var(--radius); cursor: pointer;
  font-size: 14px; font-weight: 700; letter-spacing: 0.4px;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.gc-btn-primary { background: var(--ink); color: #fff; padding: 13px 28px; }
.gc-btn-primary:hover { background: var(--ink-hover); }
.gc-btn-accent { background: var(--accent); color: #fff; padding: 11px 24px; }
.gc-btn-accent:hover { background: var(--accent-dark); }
.gc-btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 11px 24px; }
.gc-btn-outline:hover { border-color: var(--text-muted); }

/* ── Badges / pills ─────────────────────────────────────────────────────── */
.gc-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); }
.gc-badge-accent {
  display: inline-block; background: var(--accent); color: #fff; font-size: 10px;
  font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px;
}
.gc-badge-sale {
  display: inline-block; background: var(--red); color: #fff; font-size: 10px;
  font-weight: 700; padding: 3px 9px; border-radius: 20px;
}