:root{
  --bg:#fff; --text:#0f172a; --muted:#475569; --card:#f8fafc;
  --line:#e2e8f0; --accent:#0ea5e9; --btn:#0ea5e9; --btn-text:#fff;
}
:root[data-theme="dark"]{
  --bg:#0b1220; --text:#f8fafc; --muted:#94a3b8; --card:#0f172a;
  --line:#334155; --accent:#38bdf8; --btn:#38bdf8; --btn-text:#0b1220;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Montserrat,system-ui,Arial,sans-serif;background:var(--bg);color:var(--text)}
.container{min-width:0;max-width:1100px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;background:color-mix(in oklab, var(--bg), #fff 10%);border-bottom:1px solid var(--line);backdrop-filter:saturate(180%) blur(8px);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);font-weight:800;letter-spacing:.2px}
.theme-toggle{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;padding:6px 10px;cursor:pointer}
.hero{padding:28px 0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 12;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
@media(min-width:720px){.card{grid-column:span 6}}
@media(min-width:1024px){.card{grid-column:span 4}}
.card-body{padding:14px}
.card-badge{position:absolute;top:12px;left:12px;background:var(--accent);color:var(--btn-text);padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}
.figure{position:relative;aspect-ratio:4/3}
.price-row{display:flex;align-items:center;gap:8px;margin:8px 0 12px}
.old-price{text-decoration:line-through;color:var(--muted)}
.price{font-weight:800}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;background:var(--btn);color:var(--btn-text);text-decoration:none;font-weight:700}
.btn.secondary{background:transparent;border:1px solid var(--line);color:var(--text)}
.footer{border-top:1px solid var(--line);color:var(--muted);padding:22px 0;margin-top:28px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--line);color:var(--text);font-size:12px}

/* Gallery */
.gallery{display:grid;grid-template-columns:1fr;gap:10px}
.gallery-main{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.thumbs button{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:transparent;padding:0;cursor:pointer}
.thumbs img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
/* nav */
.gallery-wrap{position:relative}
.gallery-nav{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:space-between;padding:0 8px;pointer-events:none}
.gallery-nav button{pointer-events:auto;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:999px;width:42px;height:42px;font-weight:800}
.thumbs button[aria-current="true"]{outline:2px solid var(--accent)}
@media (max-width: 480px){
  .btn{padding:14px 18px}
  .card-body h3{font-size:18px}
}
.notice{font-size:12px;color:var(--muted);margin-top:10px}


.deal{margin:10px 0 16px;padding:10px 12px;border:1px dashed var(--line);border-radius:12px;background:color-mix(in oklab, var(--card), #ffffff 6%)}
.deal h4{margin:0 0 8px 0;font-size:16px}
.timer{display:flex;gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.timer .unit{display:flex;flex-direction:column;align-items:center;min-width:56px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.timer .num{font-size:18px;font-weight:800}
.timer .lbl{font-size:11px;color:var(--muted)}
.deal.expired{opacity:.75}
.deal.expired .timer{filter:grayscale(1)}


@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1220; --text:#f8fafc; --muted:#94a3b8; --card:#0f172a;
    --line:#334155; --accent:#38bdf8; --btn:#38bdf8; --btn-text:#0b1220;
  }
}

/* responsive helpers */
.col-12{grid-column:span 12}
@media(min-width:960px){.md-col-6{grid-column:span 6}}
.gap-24{gap:24px}

.g12{grid-template-columns:repeat(12,1fr)}

img{max-width:100%;height:auto;}


/* --- Mobile-first responsive (300–800px) --- */
:root{
  --safe-pad: 16px;
}
/* Fluid type a bit */
h1{font-size:clamp(20px, 4.6vw, 32px)}
h2{font-size:clamp(18px, 3.8vw, 26px)}
h3{font-size:clamp(16px, 3.4vw, 22px)}

/* Header responsive */
.nav{position:relative}
.nav-toggle{display:none;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:10px;padding:8px 12px;cursor:pointer}
.menu{display:flex;gap:14px;align-items:center}
@media (max-width: 700px){
  .nav-toggle{display:block}
  .menu{display:none;position:absolute;top:64px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:10px var(--safe-pad);flex-direction:column;gap:10px;z-index:15}
  .menu[data-open="true"]{display:flex}
}

/* Catalog grid: base 1 col; expand at 700/800 */
.grid{grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 12}
@media (min-width: 700px){
  .card{grid-column:span 6}
}
@media (min-width: 1024px){
  .card{grid-column:span 4}
}

/* Images: comfortable aspect on small screens */
.figure{position:relative;aspect-ratio:4/3}


/* Tighten paddings on very small screens (<=360px) */
@media (max-width: 360px){
  .container{padding:0 12px}
  .btn{padding:12px 14px}
}
/* 480–700: slightly larger actions */
@media (min-width: 480px) and (max-width: 700px){
  .btn{padding:12px 18px}
}

/* Product page columns using helpers if present */
.col-12{grid-column:span 12}
@media(min-width:700px){.md-col-6{grid-column:span 6}}
.g12{grid-template-columns:repeat(12,1fr)}
.gap-24{gap:24px}
img{max-width:100%;height:auto}



/* Lightbox modal */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:1000;padding:16px}
.lightbox[aria-hidden="false"]{display:flex}
.lightbox-inner{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.lightbox video, .lightbox iframe{width:100%;height:100%;display:block}
.lightbox-close{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.9);border:none;border-radius:999px;width:36px;height:36px;font-size:18px;cursor:pointer}
@media (max-width:480px){
  .lightbox{padding:8px}
  .lightbox-close{top:6px;right:6px;width:32px;height:32px}
}



/* --- Responsive video & cropping --- */
.lightbox-inner{position:relative;width:100%;max-width:960px;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.lightbox video, .lightbox iframe{width:100%;height:100%;display:block;object-fit:cover;background:#000}

/* Utility for inline responsive video if ever needed */
.video-responsive{position:relative;width:100%;max-width:100%;background:#000;border-radius:12px;overflow:hidden}
.video-responsive::before{content:"";display:block;padding-top:56.25%;} /* 16:9 */
.video-responsive > video,
.video-responsive > iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000}



/* Aspect ratio variants for lightbox */
.lightbox-inner{position:relative;width:100%;max-width:960px;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.lightbox-inner.ar-16-9{aspect-ratio:16/9}
.lightbox-inner.ar-4-3{aspect-ratio:4/3}
.lightbox-inner.ar-21-9{aspect-ratio:21/9}
.lightbox video, .lightbox iframe{width:100%;height:100%;display:block;object-fit:cover;background:#000}


.lightbox-inner{position:relative}
.lightbox-body{position:absolute;inset:0}



.figure img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;display:block}

@media (min-width: 480px){
  .figure{aspect-ratio:16/9}
}

@media (max-width: 480px){ .product-page .gallery-main{ aspect-ratio:3/4 } }


/* Center gallery image on mobile (product page) */
@media (max-width: 480px){
  .product-page .gallery-main img{
    object-position:center center;
  }
}



.product-page .gallery-main img,
  .product-page .gallery-main video,
  .product-page .gallery-main iframe{
    position:static !important;
    display:block;
    width:100%;
    height:auto !important;
    object-fit:contain !important;
    object-position:center center;
    margin:0 auto;
    background:var(--card);
  }
}



/* --- Mobile product page: enforce 3:4 crop, centered --- */
@media (max-width: 480px){
  .product-page .gallery-main{
    position:relative;
    aspect-ratio:3/4;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--card);
    overflow:hidden;
  }
  .product-page .gallery-main img,
  .product-page .gallery-main video,
  .product-page .gallery-main iframe{
    position:absolute !important;
    inset:0;
    width:100%;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block;
    background:var(--card);
  }
}



.product-page [data-gallery-main] > img,
  .product-page [data-gallery-main] video,
  .product-page [data-gallery-main] iframe{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block;
  }
}



.product-page [data-gallery-main] > img{
    position:absolute !important;
    left:50% !important; top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:auto !important; height:auto !important;
    min-width:100% !important; min-height:100% !important;
    object-fit:cover !important; object-position:center center !important;
  }
}