:root{
  --navy:#0F2A4A;
  --navy-dark:#0A1F38;
  --blue:#1E5FA8;
  --gold:#C89B3C;
  --bg:#F7F8FA;
  --card:#FFFFFF;
  --line:#E4E7EC;
  --ink:#141A24;
  --ink-dim:#5B6472;
  --ink-faint:#8B93A1;
  --green:#1E9E5A;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:"Inter",sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:1120px;margin:0 auto;padding:0 20px;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:8px;font-weight:600;font-size:0.94rem;border:1px solid transparent;cursor:pointer;}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--navy-dark);}
.btn-outline{background:#fff;border-color:var(--line);color:var(--ink);}
.btn-outline:hover{border-color:var(--navy);}
.btn-block{width:100%;justify-content:center;}

/* ============ HEADER ============ */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;}
.header-row{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand img{width:34px;height:34px;border-radius:50%;}
.brand span{font-weight:800;font-size:1.15rem;letter-spacing:-0.01em;white-space:nowrap;}
.brand span em{color:var(--blue);font-style:normal;}
nav{display:flex;align-items:center;gap:28px;}
nav a{font-size:0.92rem;color:var(--ink-dim);font-weight:500;white-space:nowrap;}
nav a:hover{color:var(--ink);}
.nav-cta-mobile{display:none;}
.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;padding:0;}
.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);margin:0 auto;border-radius:2px;transition:transform 0.2s ease,opacity 0.2s ease;}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============ AD BANNER (top, below header) ============ */
.ad-banner{background:#fff;border-bottom:1px solid var(--line);padding:10px 0;}
.ad-banner + .ad-banner{padding-top:0;}
.ad-box{border:1px dashed #C6CBD4;border-radius:6px;min-height:70px;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:0.78rem;background:#FAFBFC;text-align:center;padding:8px;}
.ad-box--header{min-height:90px;}
.ad-box--skyscraper{min-height:600px;width:160px;margin:0 auto;}
.ad-label{font-size:0.65rem;letter-spacing:0.06em;color:var(--ink-faint);text-align:center;margin-bottom:5px;text-transform:uppercase;}

/* ============================================================
   RESPONSIVE AD SCALING
   Real ad-network iframes (Adsterra, A-Ads) render at a FIXED
   pixel size set by their own script/inline styles -- they can't
   reflow like normal page content. On narrow screens a fixed
   728px or 300px unit would either overflow the viewport or force
   horizontal scrolling. This wrapper visually scales the ad block
   down to fit its container using a CSS transform, which shrinks
   the whole rendered ad (iframe included) proportionally rather
   than clipping or overflowing it. The wrapper's own height is
   reduced by JS to match the scaled-down size, so it doesn't leave
   a large empty gap beneath the shrunk ad.
   ============================================================ */
.ad-scale-wrap{
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.ad-scale-inner{
  transform-origin: top center;
  flex-shrink: 0;
}

.ad-label{font-size:0.65rem;letter-spacing:0.06em;color:var(--ink-faint);text-align:center;margin-bottom:5px;text-transform:uppercase;}

/* ============ HERO — simple ============ */
.hero{background:var(--navy);color:#fff;padding:56px 0 60px;}
.hero-inner{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center;}
.hero h1{font-size:2.3rem;font-weight:800;line-height:1.15;max-width:560px;}
.hero p{margin-top:14px;color:#C6D2E3;font-size:1.02rem;max-width:480px;}
.hero-cta{margin-top:26px;display:flex;gap:12px;}
.hero-badges{display:flex;gap:20px;margin-top:30px;flex-wrap:wrap;}
.hero-badge{font-size:0.84rem;color:#C6D2E3;display:flex;align-items:center;gap:7px;}
.hero-ad{flex-shrink:0; width:100%; max-width:300px;}
.ad-label--light{color:#8CA0C2;}
.ad-box--dark{background:rgba(255,255,255,0.04);border-color:#2C4666;color:#8CA0C2;min-height:250px;}

/* ============ LAYOUT: content + sidebar ad ============ */
.page-layout{display:grid;grid-template-columns:1fr 260px;gap:28px;padding-top:44px;padding-bottom:44px;align-items:start;}
.sidebar{position:sticky;top:84px;display:flex;flex-direction:column;gap:20px;}
.sidebar .ad-box{min-height:250px;}

/* ============ CATALOG ============ */
.catalog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:14px;}
.catalog-head h2{font-size:1.5rem;font-weight:800;}
.catalog-head p{color:var(--ink-dim);font-size:0.9rem;margin-top:4px;}
.filters{display:flex;gap:8px;flex-wrap:wrap;}
.filter-btn{background:#fff;border:1px solid var(--line);color:var(--ink-dim);padding:7px 14px;border-radius:100px;font-size:0.84rem;cursor:pointer;font-weight:500;}
.filter-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;}
.product-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;}
.product-card img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.product-body{padding:14px 15px 15px;}
.product-tier{display:inline-block;font-size:0.68rem;font-weight:700;letter-spacing:0.04em;color:var(--blue);background:#EAF1FA;padding:3px 8px;border-radius:5px;margin-bottom:8px;}
.product-title{font-size:1rem;font-weight:700;margin-bottom:5px;}
.product-meta{font-size:0.78rem;color:var(--ink-faint);margin-bottom:12px;}
.product-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;}
.product-price{font-weight:800;font-size:1.15rem;}
.product-price-block{display:flex;flex-direction:column;line-height:1.25;}
.product-price-was{font-size:0.76rem;color:var(--ink-faint);text-decoration:line-through;}
.product-price-now{font-weight:800;font-size:1.15rem;color:var(--green);}
.product-discount-ribbon{position:absolute;top:10px;right:10px;background:#C0392B;color:#fff;font-size:0.68rem;font-weight:800;padding:4px 9px;border-radius:100px;z-index:1;box-shadow:0 2px 6px rgba(192,57,43,0.35);}
.product-buy{background:var(--navy);color:#fff;border:none;padding:8px 14px;border-radius:7px;font-size:0.82rem;font-weight:600;cursor:pointer;}
.product-buy:hover{background:var(--navy-dark);}

/* in-grid native ad card */
.ad-card{background:#FAFBFC;border:1px dashed #C6CBD4;border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:230px;color:var(--ink-faint);font-size:0.8rem;gap:6px;padding:10px;box-sizing:border-box;overflow:hidden;width:100%;}

/* ============ HOW IT WORKS — simple ============ */
.how{padding:50px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.how h2{font-size:1.5rem;font-weight:800;text-align:center;margin-bottom:36px;}
.how-steps{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.how-step{flex:1;min-width:200px;text-align:center;}
.how-step-num{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 12px;font-size:0.9rem;}
.how-step h4{font-size:0.98rem;margin-bottom:6px;}
.how-step p{font-size:0.84rem;color:var(--ink-dim);}

/* ============ CHECKOUT MODAL ============ */
.modal-overlay{position:fixed;inset:0;background:rgba(15,20,30,0.55);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:#fff;border-radius:12px;max-width:420px;width:100%;padding:26px;}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.modal-head h3{font-size:1.15rem;}
.modal-close{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--ink-faint);line-height:1;}
.modal-product{display:flex;gap:12px;align-items:center;padding:12px;background:#F7F8FA;border-radius:8px;margin-bottom:14px;position:relative;}
.modal-product img{width:56px;height:56px;object-fit:cover;border-radius:6px;}
.modal-product-title{font-weight:700;font-size:0.92rem;}
.modal-product-price{color:var(--ink-dim);font-size:0.85rem;}

/* price display with strikethrough original + discounted price */
.price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.price-was{color:var(--ink-faint);text-decoration:line-through;font-size:0.85rem;}
.price-now{color:var(--green);font-weight:800;font-size:1rem;}
.discount-badge{display:inline-flex;align-items:center;gap:4px;background:#FEECEC;color:#C0392B;font-size:0.7rem;font-weight:800;padding:3px 8px;border-radius:100px;margin-left:4px;}
.discount-timer{font-size:0.72rem;color:#C0392B;font-weight:600;margin-top:2px;}

/* promo code entry */
.promo-field{margin-bottom:16px;}
.promo-field label{display:block;font-size:0.82rem;font-weight:600;margin-bottom:6px;color:var(--ink-dim);}
.promo-input-row{display:flex;gap:8px;}
.promo-input-row input{flex:1;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-size:0.94rem;font-family:inherit;text-transform:uppercase;}
.promo-input-row input::placeholder{text-transform:none;}
.promo-apply-btn{background:var(--navy);color:#fff;border:none;padding:0 16px;border-radius:8px;font-size:0.86rem;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.promo-apply-btn:disabled{background:#C6CBD4;cursor:default;}
.promo-feedback{font-size:0.8rem;margin-top:8px;min-height:1.1em;}
.promo-feedback.success{color:var(--green);font-weight:600;}
.promo-feedback.error{color:#C0392B;}
.promo-applied-banner{display:flex;justify-content:space-between;align-items:center;background:#E9F7EF;border:1px solid #B7E4C7;border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:0.84rem;color:#1E7E42;font-weight:600;}
.promo-remove-btn{background:none;border:none;color:#1E7E42;text-decoration:underline;font-size:0.78rem;cursor:pointer;font-weight:500;}

.checkout-email-field{margin-bottom:16px;text-align:left;}
.checkout-email-field label{display:block;font-size:0.82rem;font-weight:600;margin-bottom:6px;color:var(--ink-dim);}
.checkout-email-field input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-size:0.94rem;font-family:inherit;}
.checkout-email-error{font-size:0.78rem;color:#C0392B;margin-top:6px;min-height:1em;}

/* order total summary before the pay button */
.order-total-row{display:flex;justify-content:space-between;align-items:center;padding-top:14px;margin-top:4px;border-top:1px solid var(--line);margin-bottom:16px;}
.order-total-label{font-size:0.88rem;color:var(--ink-dim);}
.order-total-value{font-size:1.3rem;font-weight:800;color:var(--navy);}

.pay-note{font-size:0.76rem;color:var(--ink-faint);margin-top:14px;text-align:center;}

/* ============ DETAIL MODAL (product / prize gallery + specs) ============ */
.detail-overlay{position:fixed;inset:0;background:rgba(15,20,30,0.6);display:none;align-items:center;justify-content:center;z-index:250;padding:20px;}
.detail-overlay.open{display:flex;}
.detail-modal{background:#fff;border-radius:14px;max-width:720px;width:100%;max-height:88vh;overflow-y:auto;padding:0;}
.detail-modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2;}
.detail-modal-head h3{font-size:1.1rem;font-weight:800;}
.detail-modal-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink-faint);line-height:1;}
.detail-modal-body{padding:22px;}
.detail-gallery-main{width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#0B1220;margin-bottom:10px;position:relative;}
.detail-gallery-main img{width:100%;height:100%;object-fit:contain;}
.detail-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(15,20,30,0.55);color:#fff;border:none;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;}
.detail-gallery-nav.prev{left:10px;}
.detail-gallery-nav.next{right:10px;}
.detail-gallery-thumbs{display:flex;gap:8px;overflow-x:auto;margin-bottom:18px;}
.detail-gallery-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:7px;flex-shrink:0;cursor:pointer;border:2px solid transparent;opacity:0.7;}
.detail-gallery-thumbs img.active{border-color:var(--navy);opacity:1;}
.detail-price-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.detail-price{font-weight:800;font-size:1.3rem;}
.detail-desc{font-size:0.9rem;color:var(--ink-dim);margin-bottom:18px;line-height:1.6;white-space:pre-line;}
.detail-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-bottom:6px;}
.detail-spec{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line);padding-bottom:8px;}
.detail-spec-label{font-size:0.7rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:0.03em;}
.detail-spec-value{font-size:0.88rem;font-weight:600;}
@media (max-width:520px){ .detail-specs{grid-template-columns:1fr;} }

.product-card{cursor:pointer;}
.product-card .product-buy{position:relative;z-index:2;}

/* ============ FOOTER ============ */
footer{background:var(--navy-dark);color:#B7C2D4;padding:40px 0 24px;margin-top:20px;}
.footer-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;padding-bottom:24px;border-bottom:1px solid #1E3556;}
.footer-brand{display:flex;align-items:center;gap:10px;}
.footer-brand img{width:30px;height:30px;border-radius:50%;}
.footer-brand span{color:#fff;font-weight:700;}
.footer-brand span em{color:var(--blue);font-style:normal;}
.footer-links{display:flex;gap:24px;flex-wrap:wrap;}
.footer-links a{font-size:0.86rem;}
.footer-links a:hover{color:#fff;}
.footer-bottom{padding-top:18px;font-size:0.78rem;text-align:center;color:#7C8AA3;}

/* ============ RESPONSIVE ============ */
@media (max-width:1040px){
  .hero-inner{display:block;}
  .hero-ad{margin-top:28px;max-width:300px;}
}
@media (max-width:900px){
  .page-layout{grid-template-columns:1fr;}
  .sidebar{position:static;}
}
@media (max-width:820px){
  nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 20px rgba(0,0,0,0.08);
    padding-bottom:14px;
  }
  nav.open{display:flex;}
  nav a{padding:14px 20px;border-bottom:1px solid var(--line);white-space:normal;}
  .nav-cta-mobile{
    display:block;
    margin:10px 20px 0;
    padding:13px 20px;
    background:var(--navy);
    color:#fff;
    font-weight:700;
    text-align:center;
    border-radius:8px;
    border-bottom:none;
  }
  .header-actions .btn-primary{display:none;}
  .nav-burger{display:flex;}
  header{position:sticky;}
}
@media (max-width:640px){
  .hero h1{font-size:1.8rem;}
  .how-steps{flex-direction:column;}
  .ad-box--header{min-height:50px;}
  .ad-box--header::after{content:" (320×50 on mobile)";}
  .hero-ad{max-width:100%;}
  .ad-box--dark{min-height:180px;}
}
@media (max-width:420px){
  .brand span{font-size:1rem;}
  .header-row{gap:10px;}
  .modal{padding:20px;}
  .promo-apply-btn{padding:0 12px;font-size:0.8rem;}
}