/* Overnight Banner product pages. Loaded after app.css (the shared ordering engine styles),
   so engine colors are remapped here and every page-chrome class is ob- prefixed to stay clear of it. */
:root{
  --night:#0a0f24; --night-2:#121a3a; --night-3:#1b2550;
  --moon:#f5f0e3; --moon-dim:#c9c3b3; --muted:#8f97b8;
  --signal:#ff7a1a; --signal-2:#ffb35c; --sky:#7cc4ff; --go:#5be38a;
  --max:1180px;
  /* engine palette */
  --blue:#1b2550; --blue-dark:#0a0f24; --blue-mid:#2c3a75;
  --red:#ff7a1a; --red-dark:#e0600a; --yellow:#ffb35c;
  --off:#0a0f24; --shadow:0 18px 40px -22px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -24px rgba(0,0,0,.7);
}
html{scroll-behavior:smooth}
body.ob{background:var(--night);color:var(--moon);font:16px/1.6 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.ob a{color:inherit}
#timer-bar-container{display:none}
.ob-wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.ob-eyebrow{margin:0;font:700 12px/1 "JetBrains Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--signal-2)}
.ob h1,.ob h2{font-family:"Bricolage Grotesque",sans-serif;letter-spacing:-.02em;line-height:1.04}

/* header */
header.ob-head{position:sticky;top:0;z-index:900;display:block;padding:0;background:rgba(10,15,36,.9);backdrop-filter:blur(10px);border-bottom:1px solid rgba(245,240,227,.07);box-shadow:none;min-height:0}
.ob-nav{display:flex;align-items:center;gap:24px;height:80px}
.ob-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 21px "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;color:var(--moon)}
.ob-brand .logo{display:block;height:64px;width:auto}.ob-foot .ob-brand .logo{height:96px}
.ob-brand b{color:var(--signal)}
.ob-links{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:15px}
.ob-links a{text-decoration:none;color:var(--moon-dim)}
.ob-links a:hover{color:var(--moon)}
.ob-phone{font:700 14px "JetBrains Mono",monospace;color:var(--moon-dim);text-decoration:none}
.ob-cart{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:0;background:var(--signal);color:#1a0d00;font:700 15px Figtree,sans-serif;cursor:pointer}
.ob-cart span{background:var(--night);color:var(--moon);border-radius:999px;padding:1px 8px;font-size:12.5px}

/* product pills */
.ob-pills{display:flex;gap:8px;overflow-x:auto;padding:14px 22px;max-width:var(--max);margin:0 auto;scrollbar-width:none}
.ob-pills::-webkit-scrollbar{display:none}
.ob-pills a{flex:none;font-size:13.5px;font-weight:600;text-decoration:none;color:var(--moon-dim);border:1px solid rgba(245,240,227,.14);padding:7px 14px;border-radius:999px}
.ob-pills a:hover{color:var(--moon);border-color:var(--moon-dim)}
.ob-pills a.on{background:var(--moon);color:var(--night);border-color:var(--moon)}

/* hero */
.ob-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;padding:30px 22px 34px}
.ob-crumbs{font-size:13px;color:var(--muted);margin:0 0 16px}
.ob-crumbs a{color:var(--muted);text-decoration:none}
.ob-crumbs a:hover{color:var(--moon)}
.ob-hero h1{font-size:clamp(34px,4.4vw,56px);font-weight:800;margin:14px 0 0}
.ob-hero h1 em{font-style:normal;color:var(--signal)}
.ob-lede{font-size:18px;color:var(--moon-dim);margin:18px 0 22px;max-width:540px}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none}
.ob-chips li{font-size:13.5px;background:var(--night-2);border:1px solid rgba(245,240,227,.08);border-radius:8px;padding:6px 10px;color:var(--moon-dim)}
.ob-chips b{color:var(--moon);font-weight:700}
.ob-price-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ob-from{font:800 34px/1 "Bricolage Grotesque",sans-serif}
.ob-from small{display:block;font:700 11px "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--muted);margin-bottom:6px}
.ob-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;font:700 15.5px Figtree,sans-serif;text-decoration:none;background:var(--signal);color:#1a0d00}
.ob-btn:hover{background:var(--signal-2)}
.ob-media{position:relative;border-radius:14px;overflow:hidden;background:var(--night-2);box-shadow:0 30px 70px -30px #000;aspect-ratio:4/3}
.ob-media img,.ob-media svg{display:block;width:100%;height:100%;object-fit:cover}
.ob-media.tall img{object-position:50% 20%}

/* order panel (engine markup) on a moon-cream ticket */
.ob-order{padding:8px 0 30px}
.ob-order .order-section{max-width:var(--max);padding:0 22px;display:block}
.ob-order .order-panel{background:var(--moon);color:var(--night);border:0;border-radius:16px;box-shadow:0 30px 80px -30px #000;margin-bottom:22px}
.ob-order .order-panel-header{background:var(--night-3);padding:16px 22px}
.ob-order .order-panel-header h3{font-family:"Bricolage Grotesque",sans-serif;text-transform:none;letter-spacing:-.01em;font-size:21px;color:var(--moon)}
.ob-order .card-badge{background:var(--signal);color:#1a0d00}
.ob-order .form-group label{color:#4a5070;font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.1em}
.ob-order select,.ob-order input[type=number],.ob-order input[type=text]{background-color:#fff;border-color:#d8d1bd;color:var(--night)}
.ob-order select:focus,.ob-order input:focus{border-color:var(--signal)}
.ob-order .price-box{background:var(--night)}
.ob-order .price-box .pb-value{color:var(--signal-2);font-family:"Bricolage Grotesque",sans-serif;font-weight:800}
.ob-order .add-to-cart-btn{background:var(--signal);color:#1a0d00;font-family:Figtree,sans-serif;font-weight:800;letter-spacing:.02em}
.ob-order .add-to-cart-btn:hover{background:var(--signal-2)}
.ob-order .start-design-btn{background:var(--night-3);font-family:Figtree,sans-serif;font-weight:700;letter-spacing:.02em}
.ob-order .start-design-btn:hover{background:var(--night)}
.ob-order .shipping-note{background:#e9f7ee;color:#166534}

/* details + faq */
.ob-info{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:56px 22px}
.ob-info h2{font-size:clamp(28px,3vw,38px);font-weight:800;margin:12px 0 22px}
.ob-specs{border-top:1px solid rgba(245,240,227,.1)}
.ob-specs div{display:grid;grid-template-columns:140px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid rgba(245,240,227,.1);font-size:15px}
.ob-specs dt{font:700 12px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-2);padding-top:2px}
.ob-specs dd{margin:0;color:var(--moon)}
.ob details{border-top:1px solid rgba(245,240,227,.1);padding:16px 0}
.ob details:last-child{border-bottom:1px solid rgba(245,240,227,.1)}
.ob summary{cursor:pointer;font:700 17px "Bricolage Grotesque",sans-serif;list-style:none;display:flex;justify-content:space-between;gap:20px}
.ob summary::-webkit-details-marker{display:none}
.ob summary::after{content:"+";color:var(--signal);font-size:22px;line-height:1}
.ob details[open] summary::after{content:"–"}
.ob details p{color:var(--moon-dim);margin:10px 0 0}

/* related */
.ob-related{padding:20px 22px 70px}
.ob-related h2{font-size:28px;font-weight:800;margin:0 0 20px}
.ob-rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ob-rel{display:block;background:var(--moon);color:var(--night);text-decoration:none;border-radius:8px;overflow:hidden;transition:transform .2s}
.ob-rel:hover{transform:translateY(-4px)}
.ob-rel .ob-rel-m{height:150px;overflow:hidden}
.ob-rel img,.ob-rel svg{display:block;width:100%;height:150px;object-fit:cover}
.ob-rel span{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;font-weight:700;font-size:15px}
.ob-rel em{font:700 12px "JetBrains Mono",monospace;font-style:normal;color:#c25700}

/* footer */
footer.ob-foot{background:transparent;border-top:1px solid rgba(245,240,227,.08);padding:40px 0 50px;color:var(--muted);font-size:14px}
.ob-foot-row{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ob-foot .ob-brand{display:flex;margin-bottom:10px}
.ob-foot-links a{color:var(--moon-dim);text-decoration:none;margin-right:18px}
.ob-fine{margin:22px 0 0;font-size:12.5px;max-width:760px}

@media (max-width:960px){
  .ob-hero,.ob-info{grid-template-columns:1fr}
  .ob-hero{gap:26px}
  .ob-links{display:none}
  .ob-phone{margin-left:auto}
  .ob-rel-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .ob-phone{display:none}
  .ob-cart{margin-left:auto;padding:9px 14px}
  .ob-specs div{grid-template-columns:1fr;gap:2px}
  .ob-order .order-section{padding:0 10px}
}
/* app.css styles bare nav/a elements; keep page chrome on its own rules */
nav.ob-links{width:auto;justify-content:flex-end;gap:22px}
.ob-phone{white-space:nowrap}
.ob .ob-rel{color:var(--night)}
@media (max-width:560px){.ob-order .order-panel-header h3{flex:1 1 100%}}
/* product photo gallery */
.ob-gallery{display:grid;align-items:start;gap:16px;padding-top:6px;padding-bottom:20px}
.ob-gallery img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 24px 50px -28px #000}
@media (max-width:700px){.ob-gallery{grid-template-columns:1fr!important}.ob-gallery img{height:auto}}