/* ============================================================
   dōse.one PDP — new standalone design (product pages only)
   Fonts: Source Serif 4 / Public Sans / IBM Plex Mono (enqueued)
   ============================================================ */
body{background:#eceef2}
.page{width:1440px;max-width:100%;margin:0 auto;background:#fff;color:#233252;box-shadow:0 2px 24px rgba(10,20,50,.08)}

/* gallery dots (desktop hidden; shown on mobile as overlay) */
.stickybar{display:none}
.gdots{display:none}
.relrow::-webkit-scrollbar{display:none}
.gallery::-webkit-scrollbar{display:none}
.gdots span{width:7px;height:7px;border-radius:50%;background:#C4CEE2;transition:all .2s}
.gdots span.on{background:#192953;width:20px;border-radius:4px}

/* details marker off */
.faq summary::-webkit-details-marker{display:none}

/* CoA modal / lightbox */
.coa-modal{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px)}
.coa-modal.open{display:flex}
.coa-modal-bg{position:absolute;inset:0;background:rgba(0,11,50,.55)}
.coa-modal-box{position:relative;z-index:1;background:#fff;border-radius:16px;overflow:hidden;width:min(880px,100%);height:min(88vh,1000px);display:flex;flex-direction:column;box-shadow:0 40px 90px -30px rgba(0,11,50,.6)}
.coa-modal-top{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:16px 22px;border-bottom:1px solid #E6EBF4}
.coa-modal-top .mt{font:600 15px 'Source Serif 4',serif;color:#192953}
.coa-modal-close{border:none;background:transparent;cursor:pointer;font-size:1rem;color:#192953;width:34px;height:34px;border-radius:50%}
.coa-modal-close:hover{background:#F4F2EC}
.coa-modal-body{flex:1;min-height:0}
.coa-modal-body iframe{width:100%;height:100%;border:none;display:block}

/* ---------- responsive: 760px ---------- */
@media (max-width:760px){
  body{background:#fff}
  .page{box-shadow:none;padding-bottom:78px}
  .sec{padding-left:20px !important;padding-right:20px !important}
  .bc{padding-top:16px !important}
  .hero{grid-template-columns:1fr !important;gap:18px !important;padding-top:14px !important;padding-bottom:28px !important}
  .hero h1,.buybox h1{font-size:42px !important}
  /* gallery -> full-bleed swipe slider */
  .gallery{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:0 !important;margin:0 -20px !important;border-radius:0 !important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gslide{flex:0 0 100% !important;scroll-snap-align:center;border-radius:0 !important}
  .gmain{height:360px !important}
  .gthumb{height:360px !important;width:100% !important}
  .gcap{display:none !important}
  .metabadge{top:10px !important;left:14px !important}
  .gcol{position:relative}
  /* dots overlay on image bottom: smaller, semi-transparent, dark-tinted.
     Hidden at rest; pdp.js flashes .show while swiping, then they fade out. */
  .gdots{display:flex !important;position:absolute;bottom:12px;left:0;right:0;justify-content:center;gap:6px;margin-top:0;padding:6px 10px;width:max-content;margin-inline:auto;background:rgba(0,11,50,.42);border-radius:99px;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
  .gdots.show{opacity:1}
  .gdots span{width:5px;height:5px;background:rgba(255,255,255,.55)}
  .gdots span.on{background:#fff;width:14px;border-radius:3px}
  .buybox{padding:24px 22px !important;border-radius:20px !important}
  .stats{grid-template-columns:1fr 1fr !important}
  .stats>div{padding:22px 20px !important;border-right:none !important;border-bottom:1px solid rgba(255,255,255,.1)}
  .stats>div>div:first-child{font-size:26px !important}
  /* CoA -> swipe slider */
  .coa{display:flex !important;grid-template-columns:none !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;margin:0 -20px !important;padding:0 20px 4px !important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .coa::-webkit-scrollbar{display:none}
  .coa>div{flex:0 0 86% !important;scroll-snap-align:center}
  .coahead{padding:14px 18px !important}
  .coalot{font-size:16px !important;white-space:nowrap}
  .coapurity{font-size:11px !important;white-space:nowrap}
  .coabody{padding:6px 18px 16px !important}
  .coabody>div{font-size:13px !important}
  .coahd{flex-direction:column;align-items:flex-start !important;gap:12px}
  .info{grid-template-columns:1fr !important}
  .faq{grid-template-columns:1fr !important;gap:22px !important}
  .refrow{grid-template-columns:34px 1fr !important;gap:4px 14px !important;padding:16px 0 !important}
  .refmeta,.refcta{grid-column:2 !important}
  /* full-bleed scroller; scroll-padding keeps the snapped card off the screen edge */
  .related .relrow{margin:0 -20px !important;padding:0 20px 8px !important;scroll-padding-left:20px}
  .relcard{flex:0 0 78% !important}
  .noticebox{margin-left:20px !important;margin-right:20px !important}
  h2{font-size:28px !important}
  /* sticky bar: present but off-screen; pdp.js adds .revealed once the real ATC scrolls above */
  .stickybar{display:flex !important;transform:translateY(115%);transition:transform .28s ease;will-change:transform}
  .stickybar.revealed{transform:none}
  .etalabel{display:none !important}
  .infostrip{padding:16px 2px !important}
  .infocol{padding:0 8px !important;gap:6px !important;justify-content:flex-start;align-items:center}
  .infocol>div{font-size:11px !important;line-height:1.35 !important}
  #etadate{font-weight:600 !important;color:#192953 !important}
}