/* ============================================================
   Philly Blinds — Global Stylesheet
   Color palette: Espresso #1C1510 | Teal #2DE0C1 | Cream #F5ECD7
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --espresso: #1C1510;
  --espresso-mid: #251E16;
  --espresso-deep: #120E09;
  --gold: #2DE0C1;
  --gold-light: #D0FAF4;
  --gold-mid: #E8FDFB;
  --cream: #F5ECD7;
  --text-dark: #C8B8A4;
  --text-muted: #A89880;
  --text-faint: #8A7A68;
  --border-dark: #2A201A;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  font-family: var(--font);
  font-size: 14px;
  color: #1a1a1a;
  background: #fff;
  line-height: 1.6;
}

/* ---- NAV ---- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Compensate for sticky nav height (~86px) on all anchor targets */
html { scroll-padding-top: 96px; }
[id] { scroll-margin-top: 96px; }

/* Identity bar — company name + both brands */
.nav-identity {
  background: var(--espresso-deep);
  padding: 0 28px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid rgba(45,224,193,0.1);
}
.nav-company {
  /* bumped to cream for readability on dark identity bar */
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(245,236,215,0.65);
  font-weight: 400;
}
.nav-brand-row { display: flex; align-items: center; gap: 8px; }
.nav-brand-active { font-size: 11px; color: var(--gold); font-weight: 500; text-decoration: none; }
.nav-brand-sep { font-size: 10px; color: var(--text-faint); }
.nav-brand-other { font-size: 11px; color: var(--text-muted); font-weight: 400; text-decoration: none; }
.nav-brand-other:hover { color: var(--cream); }

/* Main nav row */
.nav-main {
  background: var(--espresso);
  padding: 0 28px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(45,224,193,0.12);
}
.nav-logo { font-size: 22px; font-weight: 500; color: #fff; letter-spacing: -0.4px; text-decoration: none; display: flex; align-items: center; }
.nav-logo em { color: var(--gold); font-style: normal; }
.nav-links { display: flex; gap: 24px; font-size: 13px; }
.nav-links a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.15s; font-weight: 400; }
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: var(--gold); font-weight: 500; position: relative; }
.nav-links a.active::after { content:''; position:absolute; bottom:-21px; left:0; right:0; height:2px; background:var(--gold); border-radius:1px; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-phone { font-size: 13px; color: var(--gold); font-weight: 500; text-decoration: none; display: flex; align-items: center; gap: 5px; }
.badge-24 { background: var(--gold); color: var(--espresso); font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 8px; }
.nav-cta { background: var(--gold); color: var(--espresso); border: none; padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: opacity 0.15s; }
.nav-cta:hover { opacity: 0.88; }

/* ---- BUTTONS ---- */
.btn-gold { background: var(--gold); color: var(--espresso); border: none; padding: 12px 22px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-ghost-light { background: transparent; color: var(--cream); border: 1px solid rgba(45,224,193,0.4); padding: 11px 20px; border-radius: 8px; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-dark { background: var(--espresso); color: var(--cream); border: none; padding: 11px 20px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-outline { background: transparent; border: 1px solid rgba(28,21,16,0.3); color: var(--espresso); padding: 10px 18px; border-radius: 8px; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block; }

/* ---- SECTIONS ---- */
.section { padding: 44px 28px; }
.section-warm { background: var(--gold-mid); }
.section-dark { background: var(--espresso); }
.section-white { background: #fff; }
.section-mid { background: var(--espresso-mid); }

.section-label { font-size: 10px; letter-spacing: 2.5px; color: var(--gold); text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.section-label-muted { font-size: 10px; letter-spacing: 2.5px; color: var(--text-faint); text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.section-title { font-size: 26px; font-weight: 500; margin-bottom: 8px; letter-spacing: -0.5px; color: #111; }
.section-title-light { font-size: 26px; font-weight: 500; color: #fff; margin-bottom: 8px; letter-spacing: -0.5px; }
.section-sub { font-size: 14px; color: #666; margin-bottom: 24px; line-height: 1.65; max-width: 500px; }
.section-sub-light { font-size: 14px; color: var(--text-dark); margin-bottom: 24px; line-height: 1.65; max-width: 500px; }

/* ---- BADGES ---- */
.badge { display: inline-block; font-size: 10px; font-weight: 500; padding: 2px 9px; border-radius: 20px; }
.badge-instant { background: var(--gold-light); color: #0A4A42; }
.badge-quote { background: #EAF3DE; color: #27500A; }
.badge-motor { background: var(--espresso); color: var(--gold); font-size: 9px; padding: 2px 6px; border-radius: 6px; }

/* ---- CTA BANNER ---- */
.cta-banner { background: var(--gold); padding: 36px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cta-banner h2 { font-size: 20px; font-weight: 500; color: var(--espresso); margin-bottom: 4px; }
.cta-banner p { font-size: 13px; color: #0D4A42; }
.cta-banner-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- FOOTER ---- */
.site-footer { background: var(--espresso-deep); padding: 32px 28px 24px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; margin-bottom: 24px; }
.footer-col h4 { font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.footer-col a { display: block; font-size: 12px; color: rgba(255,255,255,0.75); margin-bottom: 6px; text-decoration: none; transition: color 0.15s; }
.footer-col a:hover { color: #93c5fd; }
.footer-logo { font-size: 16px; font-weight: 500; color: var(--cream); margin-bottom: 3px; }
.footer-logo em { color: var(--gold); font-style: normal; }
.footer-brand-alt { font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 3px; }
.footer-company { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 12px; }
.footer-tagline { font-size: 11px; color: rgba(255,255,255,0.6); margin-bottom: 14px; line-height: 1.5; }
.footer-phone { font-size: 14px; font-weight: 500; color: var(--gold); }
.footer-disc { font-size: 10px; color: rgba(255,255,255,0.35); border-top: 0.5px solid var(--border-dark); padding-top: 16px; line-height: 1.6; }

/* ---- FORMS ---- */
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.form-group label { font-size: 12px; color: #666; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea { padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; background: #fff; color: #1a1a1a; font-family: var(--font); width: 100%; }
.form-group textarea { resize: vertical; min-height: 70px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.opt-btn { padding: 7px 13px; border: 1px solid #ddd; border-radius: 8px; font-size: 12px; cursor: pointer; background: #fff; color: #333; font-family: var(--font); transition: all 0.1s; }
.opt-btn.sel { border: 2px solid var(--gold); color: #0A4A42; font-weight: 500; background: var(--gold-light); }
.opt-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }

/* ---- CARDS ---- */
.card { background: #fff; border: 1px solid #e8e8e4; border-radius: 12px; overflow: hidden; transition: border-color 0.15s; }
.card:hover { border-color: var(--gold); }
.card-dark { background: var(--espresso-mid); border: 0.5px solid var(--border-dark); border-radius: 12px; }

/* ---- LIGHTBOX ---- */
.lb-wrap { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.82); z-index: 1000; align-items: center; justify-content: center; padding: 16px; }
.lb-wrap.open { display: flex; }
.lb-box { background: #fff; border-radius: 12px; width: 95%; max-width: 520px; overflow: hidden; }
.lb-img { width: 100%; max-height: 400px; object-fit: cover; display: block; }
.lb-foot { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lb-nav { display: flex; gap: 6px; }
.lb-nav button { padding: 7px 14px; border-radius: 8px; font-size: 12px; cursor: pointer; background: #f5f5f3; border: 1px solid #e8e8e4; color: #666; }
.lb-count { font-size: 11px; color: #999; }
.lb-close { cursor: pointer; color: #999; border: none; background: none; font-size: 20px; line-height: 1; padding: 0 4px; }

/* ---- DELIVERY SECTION ---- */
.delivery-section { background: #fafaf8; border: 1px solid #e8e8e4; border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.delivery-note { font-size: 12px; color: #555; line-height: 1.6; margin-top: 10px; }
.delivery-tariff { margin-top: 8px; font-size: 11px; color: #0A4A42; background: rgba(45,224,193,0.08); border: 1px solid rgba(45,224,193,0.2); border-radius: 8px; padding: 8px 12px; line-height: 1.6; }

/* ---- HERO TEXT LEGIBILITY ---- */
.page-hero .sub { color: rgba(255,255,255,0.85) !important; }
.hero-pill { color: rgba(255,255,255,0.72) !important; transition: color .15s; }
.hero-pill:hover { color: #93c5fd !important; }
.hero-phone-note { color: rgba(255,255,255,0.65) !important; }

/* ---- UTILITIES ---- */
.text-gold { color: var(--gold); }
.text-cream { color: var(--cream); }
.text-muted { color: var(--text-muted); }
.divider { border: none; border-top: 1px solid #e8e8e4; margin: 24px 0; }
.divider-dark { border: none; border-top: 0.5px solid var(--border-dark); margin: 24px 0; }
.call-strip { background: var(--espresso); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.call-strip .call-text { font-size: 12px; color: var(--text-dark); line-height: 1.5; }
.call-strip .call-num { font-size: 15px; font-weight: 500; color: var(--gold); white-space: nowrap; text-decoration: none; }

/* ---- MOBILE NAV HAMBURGER ---- */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 5px; margin-left: 8px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,0.75); border-radius: 1px; transition: all 0.2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
  display: none; background: var(--espresso-mid);
  border-bottom: 2px solid rgba(45,224,193,0.12);
  flex-direction: column; padding: 8px 0 16px;
  position: sticky; top: 64px; z-index: 99;
}
.nav-drawer.open { display: flex; }
.nav-drawer a {
  display: block; padding: 11px 20px; color: rgba(255,255,255,0.72);
  text-decoration: none; font-size: 14px;
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
}
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer a:hover { color: #fff; background: rgba(255,255,255,0.04); }
.nav-drawer a.active { color: var(--gold); font-weight: 500; }
.nav-drawer-cta {
  margin: 12px 16px 0; background: var(--gold); color: var(--espresso) !important;
  border-radius: 8px; padding: 12px 16px !important; font-weight: 600 !important;
  text-align: center; font-size: 13px !important;
}

@media (max-width: 600px) {
  /* Nav: hide desktop-only items, keep cart + hamburger */
  .nav-identity { display: none; }
  .nav-main { padding: 0 16px; }
  .nav-links { display: none; }
  .nav-phone { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: flex; }

  /* Layout */
  .section { padding: 32px 16px; }
  .section-title, .section-title-light { font-size: 22px; }

  /* Forms — 16px+ prevents iOS Safari from auto-zooming */
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 16px; padding: 11px 12px; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }

  /* Tap targets — comfortable 44px minimum */
  .opt-btn { padding: 11px 15px; font-size: 14px; min-height: 44px; }
  .btn-gold, .btn-ghost-light, .btn-dark, .btn-outline { padding: 14px 22px; font-size: 14px; }

  /* CTA banner */
  .cta-banner { flex-direction: column; text-align: center; }
  .cta-banner-btns { flex-direction: column; width: 100%; }
  .cta-banner-btns a,
  .cta-banner-btns button { text-align: center; display: block; width: 100%; }

  /* Call strip */
  .call-strip { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Footer */
  .footer-col a { font-size: 13px; margin-bottom: 8px; }

  /* Chatbot bubble + help button above sticky bar (!important beats later base styles) */
  #pb-chat { bottom: 80px !important; right: 16px !important; }
  #pb-help-btn { bottom: 148px !important; }

  /* Lightbox: slide up from bottom (base defined above this block — override works) */
  .lb-wrap { padding: 0; align-items: flex-end; }
  .lb-box { border-radius: 16px 16px 0 0; width: 100%; max-width: 100%; }

  /* Space for sticky mobile CTA bar */
  body { padding-bottom: 64px; }
}

/* ---- CHATBOT WIDGET ---- */
#pb-chat { position: fixed; bottom: 24px; right: 24px; z-index: 9999; font-family: var(--font); }

.pb-chat-bubble {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--gold); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.32);
  position: relative; transition: transform 0.18s, box-shadow 0.18s;
}
.pb-chat-bubble:hover { transform: scale(1.07); box-shadow: 0 6px 28px rgba(0,0,0,0.4); }
.pb-chat-bubble svg { width: 26px; height: 26px; fill: var(--espresso); }
.pb-chat-badge {
  position: absolute; top: -3px; right: -3px;
  background: #e74c3c; color: #fff; border-radius: 50%;
  width: 19px; height: 19px; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

.pb-chat-panel {
  position: absolute; bottom: 70px; right: 0;
  width: 340px; max-height: 520px;
  background: var(--espresso); border-radius: 16px;
  box-shadow: 0 10px 48px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; overflow: hidden;
  animation: pb-slide-up 0.2s ease;
}
.pb-chat-panel[hidden] { display: none; }
@keyframes pb-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pb-chat-header {
  background: var(--espresso-deep); padding: 13px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(45,224,193,0.15); flex-shrink: 0;
}
.pb-chat-header-info { display: flex; align-items: center; gap: 10px; }
.pb-chat-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold); color: var(--espresso);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pb-chat-name { font-size: 13px; font-weight: 600; color: var(--cream); line-height: 1.2; }
.pb-chat-status { font-size: 11px; color: #2DE0C1; }
.pb-chat-human-btn {
  background: #2DE0C1; color: var(--espresso);
  border-radius: 6px; padding: 6px 10px;
  font-size: 11px; font-weight: 700; text-decoration: none;
  white-space: nowrap; transition: opacity 0.15s; flex-shrink: 0;
}
.pb-chat-human-btn:hover { opacity: 0.85; }

.pb-chat-messages {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.pb-chat-messages::-webkit-scrollbar { width: 4px; }
.pb-chat-messages::-webkit-scrollbar-thumb { background: rgba(45,224,193,0.2); border-radius: 2px; }

.pb-msg {
  max-width: 88%; padding: 9px 13px;
  border-radius: 12px; font-size: 13px; line-height: 1.5;
}
.pb-msg-bot { background: var(--espresso-mid); color: var(--cream); align-self: flex-start; border-bottom-left-radius: 3px; }
.pb-msg-user { background: #2DE0C1; color: var(--espresso); align-self: flex-end; border-bottom-right-radius: 3px; font-weight: 500; }
.pb-msg-typing { background: var(--espresso-mid); color: var(--text-muted); align-self: flex-start; font-style: italic; font-size: 12px; }

.pb-chat-footer { padding: 10px 12px; border-top: 1px solid rgba(45,224,193,0.1); display: flex; gap: 7px; flex-shrink: 0; }
.pb-chat-footer input {
  flex: 1; background: var(--espresso-mid);
  border: 1px solid rgba(45,224,193,0.2); border-radius: 8px;
  padding: 8px 11px; color: var(--cream); font-size: 13px;
  font-family: var(--font); outline: none;
}
.pb-chat-footer input::placeholder { color: var(--text-faint); }
.pb-chat-footer input:focus { border-color: #2DE0C1; }
.pb-chat-footer button {
  background: #2DE0C1; color: var(--espresso); border: none;
  border-radius: 8px; padding: 8px 14px; font-size: 13px;
  font-weight: 700; cursor: pointer; transition: opacity 0.15s; flex-shrink: 0;
}
.pb-chat-footer button:hover { opacity: 0.85; }
.pb-chat-footer button:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 400px) {
  .pb-chat-panel { width: calc(100vw - 32px); right: -8px; }
}

/* ---- PHONE LINK IN MOBILE DRAWER ---- */
.nav-drawer-phone-link {
  display: block;
  padding: 13px 20px;
  color: var(--gold) !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  background: rgba(45,224,193,0.04);
}

/* ---- MOBILE STICKY CALL BAR ---- */
.pb-mobile-bar { display: none; }

@media (max-width: 600px) {
  .pb-mobile-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: 300;
    border-top: 1.5px solid rgba(45,224,193,0.18);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.28);
  }
  .pb-mb-call {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; font-size: 14px; font-weight: 600; text-decoration: none;
    background: var(--espresso); color: var(--gold);
    border-right: 1px solid rgba(45,224,193,0.15);
    font-family: var(--font);
  }
  .pb-mb-book {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; font-size: 14px; font-weight: 700; text-decoration: none;
    background: var(--gold); color: var(--espresso);
    font-family: var(--font);
  }
}

/* ============================================================
   GLOBAL CART + MOTOR MODAL
   ============================================================ */

/* ── NAV CART BUTTON ── */
.nav-cart-btn{position:relative;background:none;border:none;cursor:pointer;padding:6px 8px;display:flex;align-items:center;gap:5px;font-size:13px;font-weight:500;color:var(--cream);font-family:var(--font);border-radius:8px;transition:background .15s}
.nav-cart-btn:hover{background:rgba(45,224,193,.1)}
.nav-cart-count{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}

/* ── CART TOAST ── */
.pb-cart-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--espresso);color:var(--gold);padding:11px 20px;border-radius:10px;font-size:13px;font-weight:500;z-index:600;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;border:1px solid rgba(45,224,193,.25)}
.pb-cart-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── CART DRAWER ── */
.pb-cart-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500}
.pb-cart-overlay.open{display:block}
.pb-cart-drawer{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:420px;background:#fff;z-index:501;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.18)}
.pb-cart-drawer.open{transform:translateX(0)}
.pb-cart-drawer-head{padding:18px 20px;border-bottom:1px solid #e8e8e4;display:flex;align-items:center;justify-content:space-between;background:var(--espresso);flex-shrink:0}
.pb-cart-drawer-title{font-size:15px;font-weight:600;color:var(--cream)}
.pb-cart-drawer-count{font-size:12px;color:var(--text-muted)}
.pb-cart-close{background:none;border:none;color:var(--text-muted);font-size:22px;cursor:pointer;line-height:1;padding:0 2px}
.pb-cart-close:hover{color:var(--cream)}
.pb-cart-body{flex:1;overflow-y:auto;padding:16px}
.pb-cart-empty{text-align:center;padding:48px 20px;color:#aaa;font-size:13px}
.pb-cart-empty-icon{font-size:40px;margin-bottom:12px}
.pb-ci{background:#fafaf8;border:1px solid #e8e8e4;border-radius:10px;padding:14px;margin-bottom:10px;position:relative}
.pb-ci-name{font-size:13px;font-weight:600;color:#111;margin-bottom:4px}
.pb-ci-specs{font-size:11px;color:#666;line-height:1.6;margin-bottom:6px}
.pb-ci-motor{font-size:11px;color:#0D4A42;background:rgba(45,224,193,.08);border:1px solid rgba(45,224,193,.2);border-radius:6px;padding:4px 8px;line-height:1.6;margin-bottom:4px}
.pb-ci-remove{position:absolute;top:10px;right:10px;background:none;border:none;color:#ccc;font-size:18px;cursor:pointer;padding:0;line-height:1}
.pb-ci-remove:hover{color:#ef4444}
.pb-cart-foot{padding:16px;border-top:1px solid #e8e8e4;flex-shrink:0;background:#fff}
.pb-cart-quote-form{display:none}
.pb-cart-quote-form.open{display:block}

/* ── MOTOR MODAL ── */
.pb-motor-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:550;align-items:center;justify-content:center;padding:16px}
.pb-motor-overlay.open{display:flex}
.pb-motor-modal{background:#fff;border-radius:16px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;padding:24px;position:relative}
.pb-motor-modal-head{font-size:17px;font-weight:600;color:var(--espresso);margin-bottom:4px}
.pb-motor-modal-sub{font-size:12px;color:#888;margin-bottom:20px}
.pmm-section{margin-bottom:18px}
.pmm-label{font-size:12px;font-weight:600;color:#333;margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px}
.pmm-row{display:flex;gap:8px;flex-wrap:wrap}
.pmm-opt{padding:8px 14px;border:1.5px solid #e8e8e4;border-radius:8px;background:#fff;font-size:13px;font-weight:500;color:#333;cursor:pointer;font-family:var(--font);transition:border-color .15s,background .15s}
.pmm-opt:hover{border-color:var(--gold)}
.pmm-opt.sel{border:2px solid var(--gold);background:var(--gold-mid);color:var(--espresso)}
.pmm-sub{margin-top:12px;padding:12px 14px;background:#fafaf8;border:1px solid #e8e8e4;border-radius:8px}
.pmm-sub-label{font-size:11px;font-weight:600;color:#555;margin-bottom:7px;text-transform:uppercase;letter-spacing:.3px}
.pmm-note{font-size:11px;color:#888;margin-top:6px;line-height:1.5}

/* ── DIMENSION INPUTS — prominent width/height callout ── */
.dim-box{background:#fff;border:2px solid var(--gold);border-radius:12px;padding:18px 20px;margin-bottom:18px}
.dim-box-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:12px}
.dim-box .form-row{gap:16px}
.dim-box .form-group label{font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:6px}
.dim-box .form-group input{font-size:22px;font-weight:600;color:#1a1a1a;height:54px;border:2px solid #e8e8e4;border-radius:8px;text-align:center;letter-spacing:-0.5px}
.dim-box .form-group input:focus{border-color:var(--gold);outline:none}
.dim-box .dim-unit{font-size:11px;color:#999;text-align:center;margin-top:4px}

/* ============================================================
   MOBILE OVERRIDES — must live after all base component styles
   to win the CSS cascade without needing !important
   ============================================================ */
@media (max-width: 600px) {
  /* Cart toast: float above sticky bar */
  .pb-cart-toast { bottom: 72px; }
  /* shades.html add-toast (inline style on page; needs !important to beat it) */
  .add-toast { bottom: 76px !important; right: 12px !important; }

  /* Chatbot panel: narrower + height-capped */
  .pb-chat-panel { width: calc(100vw - 24px); right: -8px; max-height: 65vh; }

  /* Cart drawer: full width */
  .pb-cart-drawer { max-width: 100%; }

  /* Motor modal: slide up from bottom */
  .pb-motor-overlay { padding: 0; align-items: flex-end; }
  .pb-motor-modal { border-radius: 20px 20px 0 0; max-height: 88vh; max-width: 100%; padding: 20px 16px; }

  /* Motor option buttons: larger tap targets */
  .pmm-opt { padding: 12px 16px; min-height: 44px; font-size: 14px; }
}

/* ── Request more information link ───────────────────────────────────────── */
.req-info-link{display:inline-block;font-size:12px;color:#2563eb;text-decoration:underline;cursor:pointer;background:none;border:none;padding:0;font-family:inherit;margin-top:6px;line-height:1.5}

/* ============================================================
   ENHANCED GLOBAL UI — Second Pass
   Areas: option buttons, spec panel, CTA, mobile, layout
   ============================================================ */

/* ── Prevent horizontal overflow site-wide ── */
html, body { overflow-x: hidden; }

/* ── Improved opt-btn: hover animation, selected glow, disabled lock ── */
.opt-btn {
  padding: 8px 14px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  background: #fff;
  color: #333;
  font-family: var(--font);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.12s;
  white-space: nowrap;
  line-height: 1.4;
}
.opt-btn:hover:not(.sel):not(:disabled):not([disabled]):not(.disabled) {
  border-color: var(--gold);
  background: var(--gold-mid);
  transform: translateY(-1px);
}
.opt-btn.sel {
  border: 2px solid var(--gold);
  color: #0A4A42;
  font-weight: 600;
  background: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(45,224,193,0.15), 0 2px 8px rgba(45,224,193,0.2);
}
.opt-btn:disabled, .opt-btn[disabled], .opt-btn.disabled, .opt-btn.blocked {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* ── Improved choice-card (collection/style chooser) ── */
.choice-card {
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.choice-card:hover:not(.sel) {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(45,224,193,0.12);
}
.choice-card.sel {
  box-shadow: 0 0 0 3px rgba(45,224,193,0.2);
}

/* ── Improved spec/quote panel readability ── */
.spec-panel .spec-row,
.quote-panel .qrow,
.price-box .price-line {
  padding: 6px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
}
.spec-panel .spec-key,
.quote-panel .qrow-label {
  font-weight: 600;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.spec-panel .spec-val,
.quote-panel .qrow-val {
  font-size: 11px;
  line-height: 1.5;
}

/* ── Enhanced submit / CTA button ── */
.btn-submit-cta {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: var(--espresso);
  color: var(--cream);
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  letter-spacing: -0.2px;
  line-height: 1.4;
}
.btn-submit-cta:hover {
  background: #2c221a;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(28,21,16,0.3);
}
.btn-submit-cta .cta-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dark);
  margin-top: 3px;
  letter-spacing: 0;
}

/* ── Configurator section spacing ── */
.cfg-group {
  margin-bottom: 28px;
}
.cfg-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0ee;
}
.cfg-group + .cfg-group {
  padding-top: 4px;
}

/* ── Ring compatibility tags ── */
.compat-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(45,224,193,0.1);
  color: #0A4A42;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.compat-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.compat-tag-neutral {
  background: #f0f0ee;
  color: #666;
}

/* ── Disabled-option tooltip ── */
[data-disabled-reason] {
  position: relative;
}
[data-disabled-reason]:hover::after {
  content: attr(data-disabled-reason);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 20;
  pointer-events: none;
  max-width: 220px;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
}

/* ── Collection card with label badge ── */
.coll-type-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.coll-type-modern  { background: #E0F2FE; color: #0369A1; }
.coll-type-trad    { background: #FEF9C3; color: #713F12; }
.coll-type-luxury  { background: rgba(45,224,193,0.12); color: #0A4A42; }
.coll-type-outdoor { background: #D1FAE5; color: #065F46; }

/* ── Product image: prevent awkward cropping ── */
.product-img-photo img,
.opt-img img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Baton length visual hint ── */
.baton-visual {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
  font-size: 11px;
  color: #888;
}
.baton-bar {
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  opacity: 0.5;
}

/* ── Mobile: opt-btn full-width stacking ── */
@media (max-width: 600px) {
  .opt-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .opt-btn {
    width: 100%;
    padding: 13px 16px;
    font-size: 14px;
    min-height: 48px;
    text-align: left;
  }
  .cfg-layout,
  .config-layout {
    grid-template-columns: 1fr !important;
  }
  .spec-panel,
  .quote-panel {
    position: static !important;
    margin-top: 24px;
  }
  /* Finial / fabric grids: 2 columns on mobile */
  .fabric-grid,
  .finial-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Prevent opt-grid overflow */
  .opt-grid,
  .opt-grid-2,
  .opt-grid-3 {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Step block vertical rhythm ── */
.step-block + .step-block {
  margin-top: 14px;
}
.step-body {
  padding-top: 4px;
}

/* ── Finial grid: larger thumbnails ── */
.finial-grid .finial-card {
  text-align: center;
}
.finial-grid .finial-name {
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.3;
}
.finial-grid .finial-sku {
  font-size: 9px;
  color: #aaa;
  margin-top: 2px;
}

/* ── Section title consistency ── */
.step-head-title,
.step-title {
  line-height: 1.3;
}

/* ── Keep buttons from orphan-wrapping ── */
.opt-grid {
  align-items: start;
}
.opt-card-desc {
  word-break: break-word;
}
.req-info-link:hover{color:#1d4ed8}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

.badge-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(200,151,63,0.15);
  border: 1px solid rgba(200,151,63,0.4);
  color: var(--gold);
}

/* ============================================================
   LIVE MODE — hide all public pricing displays
   ============================================================ */
.addon-price, .mo-price, .opt-card-price,
.qtotal, .price-box, .price-pending,
.price-estimate, .price-est-label,
.price-line, .price-total-line, .price-note,
.calc-price, .price-result, .price-display,
.price-row, .price-summary, .price-breakdown,
.price-out, .step-price, .configurator-price,
#price-box, #price-pending, #qr-total, #q-total,
#inline-total, #cv-pricesize, #pr-total,
[class*="price-val"], [class*="qtotal-val"],
[id^="pr-base"], [id^="pr-lining"], [id^="pr-soft"],
[id^="pr-banding"], [id^="pr-sr"], [id^="pr-dn"],
[id^="pr-valance"], [id^="pr-acc"], [id^="pr-freight"],
[id^="pr-rd"], [id^="pr-motor"], [id^="pr-cargo"] {
  display: none !important;
}