/* ============================================================
   PROXYM DESIGN SYSTEM
   Font: Plus Jakarta Sans
   Theme: Warm Cream + Gold
   ============================================================ */

/* ── Tokens ── */
:root {
  --ds-bg:          #FAFAF8;
  --ds-surface:     #FFFFFF;
  --ds-border:      #E8E4DC;
  --ds-border-gold: rgba(201,168,76,.35);

  --ds-gold:        #C9A84C;
  --ds-gold-dark:   #A8892E;
  --ds-gold-pale:   #F7F1E3;
  --ds-gold-light:  rgba(201,168,76,.10);

  --ds-text:        #1A1714;
  --ds-text-2:      #3D3731;
  --ds-muted:       #6B6560;
  --ds-muted-2:     #9B958F;

  --ds-shadow-xs:   0 1px 2px rgba(0,0,0,.05);
  --ds-shadow-sm:   0 1px 4px rgba(0,0,0,.07);
  --ds-shadow-md:   0 4px 16px rgba(0,0,0,.08);
  --ds-shadow-lg:   0 12px 40px rgba(0,0,0,.10);
  --ds-shadow-xl:   0 24px 64px rgba(0,0,0,.12);

  --ds-radius-sm:   8px;
  --ds-radius:      14px;
  --ds-radius-lg:   20px;
  --ds-radius-xl:   28px;

  --ds-ease:        cubic-bezier(.23,1,.32,1);
  --ds-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ds-duration:    .55s;
}

/* ── Global font override ── */
body,
h1, h2, h3, h4, h5, h6,
.navbar, .nav-menu, button, input, select, textarea, label,
.btn, .footer, .card, p, span, a, li, td, th {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ── Base body override ── */
body {
  background-color: var(--ds-bg) !important;
  color: var(--ds-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ── */
h1 { font-weight: 800 !important; letter-spacing: -.03em; }
h2 { font-weight: 700 !important; letter-spacing: -.02em; }
h3 { font-weight: 700 !important; letter-spacing: -.01em; }

/* ── Section title override ── */
.section-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  color: var(--ds-text) !important;
}
.section-title::after {
  background: linear-gradient(90deg, var(--ds-gold), var(--ds-gold-dark)) !important;
}

/* ============================================================
   NAVIGATION — Complete redesign
   ============================================================ */
.navbar {
  background: #000 !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.04) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  transition: background .3s ease, backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Once the page is scrolled, fade to transparent (JS toggles this class) */
.navbar.nav-scrolled {
  background: transparent !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.mobile-menu-toggle span {
  background-color: #fff !important;
}

.nav-container {
  padding: .9rem 1.5rem !important;
}

.logo-image {
  height: 52px !important;
  transition: opacity .2s ease !important;
}
.logo-image:hover { opacity: .85 !important; }

/* Nav links — exclude the CTA button */
.nav-menu li a:not(.nav-cta) {
  font-size: .9rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  letter-spacing: -.01em !important;
  padding: .5rem 0 !important;
  transition: color .22s ease !important;
}
.nav-menu li a:not(.nav-cta):hover { color: var(--ds-gold) !important; }

.nav-menu li a:not(.nav-cta)::after {
  background: var(--ds-gold) !important;
  height: 2px !important;
  border-radius: 2px !important;
}

.nav-cta,
.nav-menu li a.nav-cta {
  background: transparent !important;
  color: #fff !important;
  padding: .6rem 1.5rem !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  letter-spacing: -.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color .22s ease, transform .2s var(--ds-ease) !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}
.nav-cta:hover,
.nav-menu li a.nav-cta:hover {
  background: transparent !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
  color: var(--ds-gold) !important;
}
.nav-cta::after,
.nav-menu li a.nav-cta::after { display: none !important; width: 0 !important; }

.cart-count {
  background: var(--ds-gold) !important;
  color: var(--ds-text) !important;
  font-weight: 700 !important;
}

/* Mobile nav */
@media (max-width: 768px) {
  .nav-menu {
    background: rgba(0,0,0,.9) !important;
    backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: var(--ds-shadow-lg) !important;
  }
}

/* ============================================================
   BUTTONS — Global override
   ============================================================ */
.btn-primary {
  background: var(--ds-gold) !important;
  color: var(--ds-text) !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  letter-spacing: -.01em !important;
  padding: .85rem 2rem !important;
  transition: background .22s ease, transform .2s var(--ds-ease), box-shadow .22s ease !important;
  box-shadow: 0 2px 8px rgba(201,168,76,.2) !important;
}
.btn-primary:hover {
  background: var(--ds-gold-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(201,168,76,.3) !important;
  color: #fff !important;
}

.btn-secondary {
  background: transparent !important;
  color: var(--ds-text) !important;
  border: 2px solid var(--ds-border) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  transition: border-color .22s, background .22s, color .22s !important;
}
.btn-secondary:hover {
  border-color: var(--ds-gold) !important;
  background: var(--ds-gold-pale) !important;
  color: var(--ds-gold-dark) !important;
}

.btn-outline {
  border-color: var(--ds-gold) !important;
  color: var(--ds-gold-dark) !important;
  border-radius: 999px !important;
}
.btn-outline:hover {
  background: var(--ds-gold) !important;
  color: var(--ds-text) !important;
}

/* ============================================================
   FOOTER — Complete redesign
   ============================================================ */
.footer {
  background: var(--ds-text) !important;
  color: rgba(255,255,255,.8) !important;
}

/* Remove the 1200px container cap — let footer fill the full page width */
.footer .container {
  max-width: 100% !important;
  padding: 0 3rem !important;
}
@media (max-width: 768px) {
  .footer .container { padding: 0 1.25rem !important; }
}

.footer-grid {
  grid-template-columns: 2fr 1fr 1.5fr 1fr 1.5fr !important;
  gap: 2rem !important;
}
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}

.footer-col h3 {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: var(--ds-gold) !important;
}

.footer-col h4 {
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--ds-gold) !important;
  margin-bottom: 1.1rem !important;
  padding-bottom: .5rem !important;
  border-bottom: 1px solid rgba(201,168,76,.25) !important;
}

.footer-col li {
  margin-bottom: .6rem !important;
}

.footer-col a {
  color: rgba(255,255,255,.65) !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  transition: color .2s ease !important;
}
.footer-col a:hover { color: var(--ds-gold) !important; }

/* Highlight email and phone in contact column */
.footer-col a[href^="mailto:"],
.footer-col a[href^="tel:"] {
  color: var(--ds-gold) !important;
  font-weight: 600 !important;
}
.footer-col a[href^="mailto:"]:hover,
.footer-col a[href^="tel:"]:hover {
  color: #fff !important;
}

.footer-bottom p {
  font-size: .82rem !important;
  color: rgba(255,255,255,.4) !important;
}

.social-links a {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  transition: background .22s, border-color .22s, transform .2s var(--ds-ease) !important;
}
.social-links a:hover {
  background: var(--ds-gold) !important;
  border-color: var(--ds-gold) !important;
  transform: translateY(-2px) !important;
  color: var(--ds-text) !important;
}

/* ============================================================
   SCROLL REVEAL — Base state (hidden until JS triggers)
   ============================================================ */
.ds-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .65s var(--ds-ease), transform .65s var(--ds-ease);
}
.ds-reveal.ds-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PAGE HEADER (About, Contact, etc.)
   ============================================================ */
.page-header {
  background: linear-gradient(135deg, var(--ds-text) 0%, #2D2620 100%) !important;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(201,168,76,.15) 0%, transparent 65%);
  pointer-events: none;
}
.page-header h1 { color: #fff !important; letter-spacing: -.03em !important; }
.page-header p  { color: rgba(255,255,255,.7) !important; }

/* ============================================================
   CARDS — Global warm shadow + left gold border
   ============================================================ */
.card,
.benefit-card .flip-card-face,
.faq-item,
.contact-cta,
.ab-offer,
.ab-empower-card,
.ab-mv-card,
.hm-why-card,
.hm-t-card,
.hm-pc,
.stat-card,
.plan-card,
.checkout-step,
.panel-card,
.summary-card {
  border-radius: var(--ds-radius) !important;
  border-color: var(--ds-border) !important;
  border-left: 4px solid var(--ds-gold) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  background: var(--ds-surface) !important;
}

/* ============================================================
   FORMS — Global styling (excluding phone selector internals)
   ============================================================ */
.form-group input:not(.country-search):not(.phone-number-input),
.form-group select,
.form-group textarea,
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
  border-color: var(--ds-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: border-color .22s ease, box-shadow .22s ease !important;
}
.form-group input[type="text"]:not(.country-search):not(.phone-number-input) {
  border-color: var(--ds-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
input:not(.country-search):not(.phone-number-input):focus,
select:focus, textarea:focus {
  border-color: var(--ds-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.15) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--ds-muted-2) !important; }

/* ── Phone selector — light theme overrides ── */
.country-code-btn {
  background: var(--ds-bg) !important;
  border-color: var(--ds-border) !important;
  color: var(--ds-text) !important;
}
.country-code-btn:hover, .country-code-btn.open {
  background: var(--ds-gold-pale) !important;
}
/* Phone number input: keep flex:1, don't override border-radius */
.phone-number-input {
  flex: 1 !important;
  min-width: 0 !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  border-left-color: transparent !important;
}
.phone-number-input:focus {
  border-color: var(--ds-gold) !important;
  border-left-color: var(--ds-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.15) !important;
  outline: none !important;
}
.country-dropdown {
  background: var(--ds-surface) !important;
  border-color: var(--ds-border) !important;
}
.country-search {
  background: var(--ds-bg) !important;
  color: var(--ds-text) !important;
  border-bottom-color: var(--ds-border) !important;
}
.country-option:hover, .country-option.selected {
  background: var(--ds-gold-light) !important;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.ds-gold-text { color: var(--ds-gold-dark) !important; }
.ds-surface    { background: var(--ds-surface) !important; }
.ds-border     { border-color: var(--ds-border) !important; }

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */

/* Hero — guard against collapsing in landscape mobile */
.hero { min-height: 500px; }

/* Section title — prevent overflow on very small screens */
@media (max-width: 380px) {
  .section-title { font-size: 1.6rem !important; }
}

/* Contact grid — tighter gap at tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .contact-grid { gap: 2rem !important; }
}

/* Cart — image sizing robustness */
.cart-item-image img { max-width: 120px !important; width: 100% !important; }

/* Album frame preview — never fixed height */
.living-room-bg { height: auto !important; min-height: 280px; }

/* Business card preview — prevent overflow inside pd-preview-stage */
@media (max-width: 480px) {
  .card-preview { width: 100% !important; max-width: 260px !important; height: 155px !important; }
  .card-preview-container { flex-direction: column !important; }
  .pd-preview-stage { padding: 1rem !important; }
}

/* About page — reduce vertical whitespace on mobile */
@media (max-width: 600px) {
  .ab-hero    { padding: 4rem 0 3rem !important; }
  .ab-section { padding: 3rem 0 !important; }
  .ab-closing { padding: 3.5rem 0 !important; }
  .ab-placeholder { height: 200px !important; }
  .ab-grid-2  { gap: 2rem !important; }
}

/* Products page — visual-box height on mobile */
@media (max-width: 600px) {
  .products-page .visual-box { height: auto !important; min-height: 220px !important; padding: 1.25rem !important; }
  .products-page .product-hero { padding: 2.5rem 0 2rem !important; }
}

/* Navbar — ensure hamburger shows on mobile */
@media (max-width: 768px) {
  .nav-container { padding: .75rem 1rem !important; }
  .logo-image    { height: 42px !important; }
}