/* Product detail popup — narrower desktop columns + stable mobile swipe gallery */
#product-dialog{
  width:min(920px,calc(100vw - 36px))!important;
  max-width:920px!important;
  max-height:min(860px,calc(100dvh - 24px))!important;
  padding:28px!important;
  border-radius:26px!important;
  overflow:auto!important;
  overscroll-behavior:contain;
}
#product-dialog .detail-layout{
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
  gap:28px!important;
  align-items:start;
}
#product-dialog .detail-layout>div,
#product-dialog .detail-copy,
#popup-buy,
#popup-options{min-width:0}
#product-dialog .detail-copy{padding-top:8px!important}
#product-dialog .detail-copy h2{font-size:34px!important;margin:12px 0 16px!important;overflow-wrap:anywhere}
#detail-description{margin:18px 0 22px!important}
#popup-options label{display:block;max-width:390px;margin-bottom:14px!important}
#popup-options select{
  display:block;
  width:100%;
  max-width:390px;
  min-width:0;
  box-sizing:border-box;
  padding:12px 14px;
  border:1px solid #bbc8c0;
  border-radius:10px;
  background:#fff;
  font:inherit;
}
#popup-quantity{width:86px!important;box-sizing:border-box}
#close-product{
  position:sticky!important;
  float:right;
  top:0!important;
  right:0!important;
  z-index:30;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid #ddd5ca!important;
  border-radius:50%!important;
  background:#fffdf9!important;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  font-size:25px!important;
  line-height:1;
}

/* Main media stage */
#media-stage{
  position:relative;
  width:100%;
  height:auto!important;
  aspect-ratio:4/4.35;
  min-height:0!important;
  padding:12px!important;
  display:grid!important;
  place-items:center;
  overflow:hidden!important;
  touch-action:pan-y;
  background:#eeeae3!important;
  border-radius:18px!important;
  user-select:none;
}
#media-stage .gallery-media{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  border-radius:10px;
  animation:galleryFade .18s ease both;
}
#media-stage video.gallery-media{background:#111}
@keyframes galleryFade{from{opacity:.45;transform:scale(.992)}to{opacity:1;transform:scale(1)}}

.gallery-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:10;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#20352a;
  box-shadow:0 8px 22px rgba(0,0,0,.15);
  font-size:24px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.gallery-nav.prev{left:12px}.gallery-nav.next{right:12px}
.gallery-nav:disabled{opacity:.32;cursor:default}
.gallery-counter{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:11;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(26,37,30,.78);
  color:#fff;
  font-size:12px;
  font-weight:700;
  backdrop-filter:blur(8px);
}
.gallery-swipe-hint{
  display:none;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:8px 0 2px;
  color:#69756d;
  font-size:12px;
}
.gallery-swipe-hint::before{content:'↔';font-size:16px;color:#2b7b4c}

/* Thumbnails become a clear horizontal strip */
#media-thumbs{
  display:flex!important;
  gap:9px!important;
  width:100%;
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:hidden;
  padding:10px 2px 4px!important;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
#media-thumbs button{
  flex:0 0 66px!important;
  width:66px!important;
  height:66px!important;
  padding:3px!important;
  border:1px solid #cbd1cb!important;
  border-radius:10px!important;
  background:#fff!important;
  overflow:hidden;
  scroll-snap-align:start;
  color:#24342b;
}
#media-thumbs button[aria-pressed=true]{border:2px solid #b87951!important;box-shadow:0 0 0 2px rgba(184,121,81,.12)}
#media-thumbs img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:6px}
#media-thumbs .video-thumb{display:grid;place-items:center;font-size:11px;font-weight:700;background:#f6f1ea!important}

@media(max-width:760px){
  #product-dialog{
    width:calc(100vw - 16px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 12px)!important;
    padding:14px 14px 22px!important;
    border-radius:20px!important;
    margin:auto!important;
  }
  #product-dialog .detail-layout{grid-template-columns:1fr!important;gap:14px!important}
  #product-dialog .detail-copy{padding-top:2px!important}
  #product-dialog .detail-copy h2{font-size:28px!important;margin:8px 0 12px!important}
  #media-stage{
    width:100%!important;
    aspect-ratio:1/1!important;
    max-height:62dvh;
    padding:8px!important;
    border-radius:14px!important;
  }
  #media-stage .gallery-media{border-radius:8px}
  .gallery-nav{width:38px;height:38px;font-size:22px;background:rgba(255,255,255,.95)}
  .gallery-nav.prev{left:8px}.gallery-nav.next{right:8px}
  .gallery-counter{bottom:8px;font-size:11px;padding:6px 9px}
  .gallery-swipe-hint{display:flex}
  #media-thumbs{gap:8px!important;padding-top:8px!important}
  #media-thumbs button{flex-basis:58px!important;width:58px!important;height:58px!important}
  #popup-options label,#popup-options select{max-width:none;width:100%}
  #popup-quantity{width:82px!important}
  .popup-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .popup-actions .button{width:100%;justify-content:center;padding:12px 10px!important}
  #detail-back{width:100%;text-align:left}
  #close-product{width:38px;height:38px;font-size:23px!important;margin-bottom:-38px}
}
@media(max-width:420px){
  #media-stage{aspect-ratio:1/1.06!important;max-height:56dvh}
  .popup-actions{grid-template-columns:1fr!important}
  #product-dialog .detail-copy h2{font-size:25px!important}
}

/* Extra narrow-phone hardening — HP only */
@media(max-width:767px){
  #product-dialog{width:calc(100vw - 10px)!important;max-height:calc(100dvh - 8px)!important;padding:11px 11px 18px!important;border-radius:17px!important}
  #product-dialog .detail-layout{gap:10px!important}
  #media-stage{aspect-ratio:1/1!important;max-height:46dvh!important;padding:6px!important}
  #media-thumbs{gap:6px!important;padding:7px 0 3px!important}
  #media-thumbs button{flex-basis:52px!important;width:52px!important;height:52px!important}
  .gallery-nav{width:34px;height:34px;font-size:20px}
  .gallery-counter{font-size:10px;padding:5px 8px}
  .gallery-swipe-hint{font-size:11px;margin:6px 0 0}
  #product-dialog .detail-copy h2{font-size:24px!important;line-height:1.08!important;margin:5px 0 9px!important}
  #detail-price{font-size:1.25rem!important}
  #detail-meta,#detail-description{font-size:.84rem!important;line-height:1.55!important}
  #detail-description{margin:10px 0 14px!important}
  #popup-options label{margin-bottom:10px!important;font-size:.84rem}
  #popup-options select{padding:11px 12px;font-size:.9rem;border-radius:9px}
  #popup-quantity{height:42px!important;padding:8px 10px!important}
  #popup-stock{font-size:.82rem;margin:8px 0!important}
  .popup-actions{gap:7px!important}
  .popup-actions .button{min-height:43px;padding:11px 8px!important;font-size:.83rem!important;white-space:normal!important;line-height:1.2!important}
  #close-product{width:35px;height:35px;font-size:21px!important;margin-bottom:-35px}
}
@media(max-width:380px){
  #media-stage{max-height:41dvh!important}
  .popup-actions{grid-template-columns:1fr!important}
}

/* Deskripsi produk 3 bagian: perhatian tetap + detail + deskripsi */
#detail-description{
  white-space:pre-line;
  line-height:1.75;
  color:#405248;
  background:#f8fbf7;
  border:1px solid #dfe8df;
  border-radius:14px;
  padding:16px 18px;
  max-height:420px;
  overflow:auto;
  scrollbar-width:thin;
}
#detail-description::first-line{font-weight:800;color:#173f2a}
@media(max-width:767px){#detail-description{padding:13px 14px;max-height:330px}}


/* Deskripsi produk: preview singkat + detail terstruktur */
.product-desc-preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.55;max-height:3.1em;color:#5f6f65!important;margin-top:6px!important}
.product-description{position:relative;display:grid;gap:14px;margin:18px 0 12px;white-space:normal;line-height:1.72;color:#34483c;transition:max-height .28s ease;overflow:hidden}
.product-description.is-collapsed{max-height:300px}
.product-description.is-collapsed:after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 82%);pointer-events:none}
.product-description-section{border:1px solid #e1ebe3;border-radius:15px;background:#fbfdfb;padding:15px 16px}
.product-description-section.attention{background:#f4f8f2;border-color:#d9e7d8}
.product-description-section h3{margin:0 0 8px;font-size:.88rem;letter-spacing:.05em;text-transform:uppercase;color:#1f6a43}
.product-description-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.94rem;color:#405448}
.description-toggle{border:1px solid #bfd6c5;background:#eef7ef;color:#1f6a43;border-radius:999px;padding:9px 15px;font-weight:800;cursor:pointer;margin:0 0 16px}
.description-toggle:hover{background:#e2f1e5}
@media(max-width:640px){.product-description.is-collapsed{max-height:250px}.product-description-section{padding:13px 14px}.product-description-text{font-size:.91rem}}


/* V3 — modal deskripsi rapi: satu scroll pada modal, bukan scroll di dalam kartu */
#detail-description.product-description{
  margin:16px 0 10px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  white-space:normal!important;
  overflow:hidden!important;
  max-height:none!important;
  display:grid!important;
  gap:12px!important;
}
#detail-description.product-description.is-collapsed{
  max-height:310px!important;
  overflow:hidden!important;
}
#detail-description.product-description:not(.is-collapsed){
  max-height:none!important;
  overflow:visible!important;
}
#detail-description.product-description.is-collapsed:after{
  height:82px!important;
  background:linear-gradient(to bottom,rgba(255,253,249,0),#fffdf9 86%)!important;
}
.product-description-section{
  margin:0!important;
  padding:15px 17px!important;
  border:1px solid #dde7df!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 3px 12px rgba(24,61,40,.035);
}
.product-description-section.attention{
  background:#f4f8f2!important;
  border-color:#d8e6d8!important;
}
.product-description-section h3{
  margin:0 0 9px!important;
  font-size:.78rem!important;
  line-height:1.25!important;
  letter-spacing:.10em!important;
  color:#17663d!important;
}
.product-description-text{
  margin:0!important;
  white-space:pre-line!important;
  line-height:1.72!important;
  color:#30473a!important;
  font-size:.93rem!important;
}
.description-toggle{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  margin:0 0 18px!important;
}
@media (min-width:761px){
  #product-dialog{width:min(1040px,calc(100vw - 40px))!important;max-width:1040px!important}
  #product-dialog .detail-layout{grid-template-columns:minmax(300px,.9fr) minmax(440px,1.1fr)!important;gap:34px!important}
}
@media(max-width:760px){
  #detail-description.product-description.is-collapsed{max-height:270px!important}
  .product-description-section{padding:13px 14px!important}
  .product-description-text{font-size:.90rem!important;line-height:1.66!important}
}


/* V4 — PERHATIAN di bawah foto, aksi pembelian di atas detail */
#product-dialog .detail-media-column{min-width:0;align-self:start}
#detail-attention.product-attention-box{
  margin-top:14px;
  padding:16px 17px;
  border:1px solid #d6e5d8;
  border-radius:15px;
  background:#f4f8f2;
  color:#30473a;
  box-shadow:0 3px 12px rgba(24,61,40,.035);
}
#detail-attention h3{margin:0 0 9px;font-size:.78rem;letter-spacing:.10em;color:#17663d}
#detail-attention-text{white-space:pre-line;line-height:1.68;font-size:.90rem;overflow-wrap:anywhere}
.product-buy-panel{
  margin:14px 0 18px;
  padding:16px 17px;
  border:1px solid #dce7df;
  border-radius:15px;
  background:#fbfdfb;
  box-shadow:0 4px 16px rgba(24,61,40,.045);
}
.product-buy-panel .buy-row{display:grid;grid-template-columns:minmax(130px,.72fr) minmax(180px,1.28fr);gap:14px;align-items:end}
.product-buy-panel label{display:block;margin:0 0 7px;font-weight:800;color:#203c2d}
.order-total-box{min-height:66px;padding:11px 14px;border-radius:12px;background:#eef7ef;border:1px solid #d5e6d8;display:flex;flex-direction:column;justify-content:center;align-items:flex-end}
.order-total-box span{font-size:.78rem;color:#617267;margin-bottom:2px}
.order-total-box strong{font-size:1.22rem;color:#17663d}
.product-buy-panel #popup-stock{margin:9px 0 11px;font-size:.84rem;color:#65756b}
.product-buy-panel .popup-actions{margin-top:8px}
#detail-description.product-description{margin-top:8px!important}
@media(min-width:761px){
  #product-dialog .detail-layout{align-items:start!important}
  #product-dialog .detail-media-column{position:sticky;top:0}
}
@media(max-width:760px){
  #product-dialog .detail-media-column{position:static}
  #detail-attention.product-attention-box{margin-top:10px;padding:13px 14px}
  #detail-attention-text{font-size:.87rem;line-height:1.62}
  .product-buy-panel{padding:13px 14px;margin:12px 0 16px}
  .product-buy-panel .buy-row{grid-template-columns:1fr 1fr;gap:10px}
  .order-total-box{min-height:58px;padding:9px 11px}
  .order-total-box strong{font-size:1.08rem}
}
@media(max-width:460px){
  .product-buy-panel .buy-row{grid-template-columns:1fr}
  .order-total-box{align-items:flex-start}
}

/* V5 — kiri khusus media + PERHATIAN; kanan khusus pembelian + detail produk */
#product-dialog .detail-layout{
  grid-template-columns:minmax(330px,.88fr) minmax(470px,1.12fr)!important;
  gap:34px!important;
}
#product-dialog .detail-media-column{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
}
#detail-attention.product-attention-box{
  order:4!important;
  margin:14px 0 0!important;
  width:100%!important;
  box-sizing:border-box!important;
  background:#f5f8f2!important;
  border:1px solid #d8e6d7!important;
  border-radius:16px!important;
  padding:16px 18px!important;
}
#detail-attention h3{
  margin:0 0 10px!important;
  padding-bottom:8px!important;
  border-bottom:1px solid #dfe9df!important;
  font-size:.78rem!important;
  letter-spacing:.13em!important;
  color:#17663d!important;
}
#detail-attention-text{
  font-size:.88rem!important;
  line-height:1.65!important;
  color:#344b3d!important;
  white-space:pre-line!important;
}
#product-dialog .detail-copy{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
}
#product-dialog .detail-copy .eyebrow{margin-bottom:8px!important}
#product-dialog .detail-copy h2{margin:4px 0 12px!important;line-height:1.05!important}
#detail-price{display:block;margin:0 0 8px!important;font-size:1.55rem!important;color:#a86336!important}
.product-meta-bar{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  margin:0 0 14px!important;
  min-height:34px;
}
.product-meta-badge{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border-radius:999px;
  background:#eef5ef;
  border:1px solid #d8e5da;
  color:#28513a;
  font-size:.78rem;
  font-weight:800;
}
.product-publisher{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  min-height:30px;
  padding:5px 0;
  color:#405448;
}
.product-publisher small{font-size:.75rem;color:#7a887f}
.product-publisher strong{font-size:.86rem;color:#30473a;font-weight:800}
.product-buy-panel{
  order:5;
  margin:2px 0 18px!important;
  padding:16px 17px!important;
  border:1px solid #dce7df!important;
  border-radius:16px!important;
  background:#fbfdfb!important;
}
#popup-options[hidden]{display:none!important}
#popup-options{display:grid;gap:13px;margin:0 0 15px}
.variation-group{margin:0;padding:0;border:0;min-width:0}
.variation-group legend{
  margin:0 0 8px;
  padding:0;
  color:#203c2d;
  font-size:.84rem;
  font-weight:900;
}
.variation-choices{display:flex;flex-wrap:wrap;gap:8px}
.variation-choices input{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}
.variation-chip{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:38px!important;
  margin:0!important;
  padding:8px 12px!important;
  border:1px solid #cedbd1!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#30473a!important;
  font-size:.84rem!important;
  font-weight:700!important;
  cursor:pointer!important;
  transition:.18s ease!important;
}
.variation-chip:hover{border-color:#8fb59a!important;background:#f6faf6!important}
.variation-choices input:checked + .variation-chip{
  background:#e3f2e6!important;
  border-color:#2c7a4d!important;
  color:#145c36!important;
  box-shadow:0 0 0 2px rgba(44,122,77,.10)!important;
}
.variation-choices input:focus-visible + .variation-chip{outline:2px solid #2c7a4d;outline-offset:2px}
.product-buy-panel .buy-row{
  display:grid!important;
  grid-template-columns:minmax(110px,.55fr) minmax(190px,1.45fr)!important;
  gap:12px!important;
  align-items:end!important;
}
.product-buy-panel .buy-row > div:first-child{min-width:0}
#popup-quantity{width:100%!important;max-width:110px!important}
.order-total-box{align-items:flex-end!important}
.popup-actions{display:grid!important;grid-template-columns:1.2fr .8fr!important;gap:10px!important}
.popup-actions .button{width:100%!important;justify-content:center!important;min-height:46px!important}
#detail-description.product-description{order:6;margin-top:0!important}
#detail-description-toggle{order:7;align-self:flex-start}
#detail-back{order:8}

@media(min-width:761px){
  #product-dialog{width:min(1100px,calc(100vw - 36px))!important;max-width:1100px!important}
  #product-dialog .detail-media-column{position:sticky!important;top:0!important}
}
@media(max-width:760px){
  #product-dialog .detail-layout{grid-template-columns:1fr!important;gap:15px!important}
  #product-dialog .detail-media-column{position:static!important}
  #detail-attention.product-attention-box{margin-top:10px!important;padding:13px 14px!important}
  #detail-attention-text{font-size:.85rem!important;line-height:1.6!important}
  .product-meta-bar{margin-bottom:10px!important}
  .product-buy-panel{padding:13px 14px!important}
  .variation-chip{min-height:36px!important;padding:7px 10px!important;font-size:.81rem!important}
  .product-buy-panel .buy-row{grid-template-columns:1fr 1fr!important}
  #popup-quantity{max-width:none!important}
  .popup-actions{grid-template-columns:1fr 1fr!important}
}
@media(max-width:460px){
  .product-buy-panel .buy-row{grid-template-columns:1fr!important}
  .order-total-box{align-items:flex-start!important}
  .popup-actions{grid-template-columns:1fr!important}
}

/* V6 - variasi per atribut, ringkas dan tidak melebar */
#popup-options{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%!important;max-width:520px!important;margin:0!important}
.variation-group{display:grid!important;grid-template-columns:92px minmax(0,1fr)!important;gap:12px!important;align-items:start!important;padding:12px 14px!important;border:1px solid #dce7de!important;border-radius:14px!important;background:#fbfdfb!important}
.variation-group legend{float:none!important;width:auto!important;margin:7px 0 0!important;font-size:.82rem!important;line-height:1.25!important;text-transform:uppercase!important;letter-spacing:.055em!important;color:#355846!important}
.variation-choices{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(72px,max-content))!important;justify-content:start!important;gap:8px!important;min-width:0!important}
.variation-chip{min-width:72px!important;max-width:150px!important;white-space:normal!important;text-align:center!important;overflow-wrap:anywhere!important}
@media(max-width:560px){.variation-group{grid-template-columns:1fr!important;gap:7px!important}.variation-group legend{margin:0!important}.variation-choices{grid-template-columns:repeat(2,minmax(0,1fr))!important}.variation-chip{width:100%!important;max-width:none!important}}


/* V8 — variasi horizontal + zoom foto desktop/mobile */
#popup-options{width:100%!important;max-width:none!important;gap:10px!important}
.variation-group{grid-template-columns:86px minmax(0,1fr)!important;gap:10px!important;padding:11px 12px!important}
.variation-group legend{margin:8px 0 0!important}
.variation-choices{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:1px 2px 5px!important;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.variation-chip{flex:0 0 auto!important;min-width:82px!important;max-width:190px!important;padding:8px 13px!important;white-space:nowrap!important}
@media(max-width:560px){.variation-group{grid-template-columns:1fr!important;gap:7px!important}.variation-group legend{margin:0!important}.variation-choices{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:7px!important}.variation-chip{width:auto!important;min-width:88px!important;max-width:180px!important}}
.product-hover-zoom{position:fixed;z-index:99999;width:min(460px,38vw);aspect-ratio:1/1;display:none;place-items:center;padding:12px;border:1px solid rgba(38,77,53,.18);border-radius:18px;background:#fffefb;box-shadow:0 22px 60px rgba(0,0,0,.25);pointer-events:none;overflow:hidden}
.product-hover-zoom.is-visible{display:grid}.product-hover-zoom img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.gallery-zoom-btn{position:absolute;right:10px;bottom:10px;z-index:14;display:none;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px 12px;border:0;border-radius:999px;background:rgba(255,255,255,.95);color:#173e2a;box-shadow:0 8px 22px rgba(0,0,0,.18);font-weight:800;font-size:.78rem;cursor:pointer}
.mobile-photo-zoom{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:14px;background:rgba(8,15,11,.94);backdrop-filter:blur(5px)}
.mobile-photo-zoom.is-open{display:flex}.mobile-photo-zoom img{max-width:96vw;max-height:88dvh;width:auto;height:auto;object-fit:contain;touch-action:pinch-zoom;user-select:none;-webkit-user-drag:none}
.mobile-photo-zoom-close{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#173e2a;font-size:26px;line-height:1;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.mobile-photo-zoom-hint{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:.76rem;white-space:nowrap}
@media(max-width:760px){.gallery-zoom-btn{display:inline-flex}.gallery-counter{left:10px!important;transform:none!important}}
@media(min-width:761px){#media-stage .gallery-media[data-zoomable="1"]{cursor:zoom-in}}


/* V9 — zoom berada di top-layer dialog + foto HP diperbesar */
#product-dialog .product-hover-zoom{
  z-index:2147483646!important;
  width:min(620px,46vw)!important;
  max-width:calc(100vw - 28px)!important;
  aspect-ratio:1/1!important;
  border-radius:20px!important;
  box-shadow:0 28px 80px rgba(0,0,0,.34)!important;
}
#product-dialog .mobile-photo-zoom{
  z-index:2147483647!important;
}
@media(max-width:760px){
  #product-dialog{width:calc(100vw - 12px)!important;max-width:none!important;padding:8px!important}
  #product-dialog .dialog-card{padding:0!important}
  #media-stage{
    width:100%!important;
    height:min(82vw,62dvh)!important;
    min-height:min(82vw,62dvh)!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    padding:4px!important;
    border-radius:14px!important;
  }
  #media-stage .gallery-media{
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    object-fit:contain!important;
  }
  #media-thumbs{margin-top:8px!important}
  .gallery-zoom-btn{right:8px!important;bottom:8px!important;min-height:42px!important;padding:9px 13px!important;font-size:.8rem!important}
  .mobile-photo-zoom img{max-width:98vw!important;max-height:91dvh!important}
}

/* V35 — jangan crop foto produk pada layar HP */
@media(max-width:760px){
  #media-stage{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:1/1.12!important;
    padding:8px!important;
    overflow:hidden!important;
  }
  #media-stage .gallery-media,
  #media-stage img.gallery-media,
  #media-stage video.gallery-media{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
    margin:auto!important;
    display:block!important;
  }
  #media-stage img.gallery-media{
    aspect-ratio:auto!important;
  }
  .gallery-zoom-btn{
    right:10px!important;
    bottom:10px!important;
  }
}
@media(max-width:420px){
  #media-stage{aspect-ratio:1/1.18!important}
}


/* V10 — variation scroller lebih lega & mudah dipakai */
#popup-options{
  width:100%!important;
  max-width:none!important;
}
.variation-group{
  grid-template-columns:96px minmax(0,1fr)!important;
  gap:14px!important;
  padding:14px 15px!important;
  min-height:88px!important;
  align-items:center!important;
}
.variation-group legend{
  margin:0!important;
  align-self:center!important;
  font-size:.86rem!important;
}
.variation-choices{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:4px 4px 12px!important;
  scroll-padding-inline:4px!important;
  scrollbar-width:auto!important;
  scrollbar-color:#8eaa97 #edf3ee!important;
}
.variation-choices::-webkit-scrollbar{height:10px!important}
.variation-choices::-webkit-scrollbar-track{background:#edf3ee!important;border-radius:999px!important}
.variation-choices::-webkit-scrollbar-thumb{background:#8eaa97!important;border-radius:999px!important;border:2px solid #edf3ee!important}
.variation-choices::-webkit-scrollbar-thumb:hover{background:#61836d!important}
.variation-chip{
  flex:0 0 auto!important;
  min-width:118px!important;
  max-width:240px!important;
  min-height:44px!important;
  padding:10px 16px!important;
  border-radius:11px!important;
  font-size:.9rem!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  text-align:center!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:760px){
  .variation-group{
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:12px!important;
    min-height:0!important;
  }
  .variation-group legend{font-size:.82rem!important}
  .variation-choices{padding-bottom:11px!important;gap:8px!important}
  .variation-chip{min-width:104px!important;max-width:200px!important;min-height:42px!important;padding:9px 13px!important;font-size:.84rem!important}
}

/* V39 variation layout */
#popup-options{display:block!important;width:100%!important;max-width:none!important;overflow:visible!important}.variation-group{display:grid!important;grid-template-columns:110px minmax(0,1fr)!important;align-items:center!important;gap:14px!important;width:100%!important;min-width:0!important;min-height:78px!important;padding:14px 16px!important;margin:0 0 10px!important;border:1px solid #dce7de!important;border-radius:14px!important;background:#fbfdfb!important;box-sizing:border-box!important}.variation-label{font-size:.84rem!important;line-height:1.2!important;text-transform:uppercase!important;letter-spacing:.055em!important;color:#355846!important;font-weight:800!important}.variation-choices{display:flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;padding:4px 4px 15px!important;scroll-behavior:smooth!important;scrollbar-width:auto!important;scrollbar-color:#6f967b #e8f0e9!important;-webkit-overflow-scrolling:touch!important}.variation-choices::-webkit-scrollbar{height:14px!important}.variation-choices::-webkit-scrollbar-track{background:#e8f0e9!important;border-radius:999px!important}.variation-choices::-webkit-scrollbar-thumb{background:#6f967b!important;border-radius:999px!important;border:3px solid #e8f0e9!important}.variation-choices input{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important}.variation-chip{flex:0 0 auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:132px!important;max-width:280px!important;min-height:46px!important;padding:10px 16px!important;border:1px solid #cbd9ce!important;border-radius:11px!important;background:#fff!important;color:#243d30!important;font-size:.9rem!important;line-height:1.25!important;font-weight:700!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;box-sizing:border-box!important}@media(max-width:760px){.variation-group{grid-template-columns:1fr!important;gap:8px!important;padding:12px!important}.variation-choices{padding-bottom:14px!important}.variation-chip{min-width:116px!important;max-width:230px!important;min-height:44px!important;font-size:.84rem!important}}