/* ARCEL STR — Product detail (itemku-inspired marketplace layout) */
.product-dialog{
  width:min(1040px,96vw);
  max-height:94vh;
  overflow:auto;
  padding:0;
  border:1px solid #c5daf0;
  border-radius:18px;
  background:#f4f8fc;
  color:#16365e;
  box-shadow:0 24px 60px rgba(8,40,80,.28);
}
.product-dialog::backdrop{
  background:rgba(6,21,43,.72);
  backdrop-filter:blur(8px);
}
.dialog-close{
  position:sticky;
  float:right;
  top:10px;
  margin:10px 12px -44px 0;
  z-index:20;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#1a4a78;
  font-size:20px;
  line-height:1;
  box-shadow:0 4px 16px rgba(10,50,100,.18);
  cursor:pointer;
}

/* Two-column layout */
.shop-detail.itemku-detail{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:0;
  align-items:start;
  background:#f4f8fc;
}
.detail-left{
  padding:16px 12px 20px 16px;
  background:#eef5fb;
  border-right:1px solid #d4e4f2;
  min-width:0;
}
.detail-art{
  position:relative;
  aspect-ratio:1/1;
  max-height:none;
  min-height:0;
  margin:0;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#0b2a52,#0e3a70);
  border:1px solid #9ec8ef55;
  box-shadow:0 10px 28px rgba(10,50,100,.18);
}
.detail-art img{
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  object-fit:contain;
  object-position:center;
  padding:14px;
  background:transparent;
}
.detail-art .status-tag{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  padding:5px 10px;
  border-radius:8px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.4px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.detail-art .status-tag.ready{background:#0d9b5c;color:#fff}
.detail-art .status-tag.sold{background:#5a6475;color:#eef2f6}
.detail-featured{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  padding:5px 9px;
  border-radius:8px;
  background:linear-gradient(110deg,#ffc44d,#ff8a20);
  color:#542600;
  font-size:9px;
  font-weight:1000;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.detail-discount-badge{
  position:absolute;
  bottom:12px;
  left:12px;
  z-index:3;
  padding:5px 9px;
  border-radius:8px;
  background:#e53935;
  color:#fff;
  font-size:11px;
  font-weight:900;
}

/* Gallery thumbs */
.detail-gallery{
  display:flex;
  gap:8px;
  margin-top:10px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:thin;
}
.detail-gallery button{
  flex:0 0 64px;
  width:64px;
  height:64px;
  padding:0;
  border:2px solid transparent;
  border-radius:10px;
  overflow:hidden;
  background:#dce9f6;
  cursor:pointer;
}
.detail-gallery button.active,
.detail-gallery button:hover{
  border-color:#1a8dff;
}
.detail-gallery img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:4px;
  display:block;
  background:linear-gradient(145deg,#0b2a52,#0e3a70);
}

.detail-trust-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:12px;
}
.detail-trust-row>div{
  padding:8px 6px;
  border-radius:10px;
  background:#fff;
  border:1px solid #d4e4f2;
  text-align:center;
}
.detail-trust-row b{display:block;font-size:10px;color:#1a4a78}
.detail-trust-row span{display:block;font-size:8px;color:#6a849e;margin-top:2px;line-height:1.3}

/* Right column */
.detail-info{
  padding:18px 20px 28px;
  min-width:0;
  background:#f4f8fc;
}
.detail-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:10px;
  color:#7a95ad;
  margin-bottom:8px;
}
.detail-title-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.detail-title-line h2{
  flex:1;
  margin:0;
  font:800 clamp(18px,2.4vw,26px)/1.25 "Space Grotesk",sans-serif;
  color:#112e55;
  letter-spacing:-.3px;
}
.detail-wishlist{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid #c5dcef;
  background:#fff;
  color:#4a6f90;
  font-size:18px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.detail-wishlist.active{color:#e53935;border-color:#f5b8b8;background:#fff5f5}

.detail-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:12px 0 14px;
}
.detail-meta-row span{
  padding:5px 9px;
  border-radius:20px;
  font-size:10px;
  font-weight:800;
  border:1px solid #d0e3f4;
  background:#fff;
  color:#42688f;
}
.detail-meta-row .meta-game{background:#e8f3ff;border-color:#b6d6f5;color:#1568b8}
.detail-meta-row .meta-stock.is-ready{background:#e6f7ef;border-color:#9ed9bb;color:#0b7a4a}
.detail-meta-row .meta-stock.is-sold{background:#eef0f3;border-color:#c9ced6;color:#5a6475}

/* Price box — itemku style */
.detail-price-box{
  padding:14px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,#fff 0%,#eef6ff 100%);
  border:1px solid #c5daf0;
  box-shadow:0 4px 14px rgba(30,90,140,.07);
  margin-bottom:14px;
}
.price-main{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
}
.detail-price{
  margin:0;
  font:900 clamp(22px,3vw,30px)/1 "Space Grotesk",sans-serif;
  color:#0d6fd4;
}
.price-old{
  font-size:13px;
  color:#91a5bd;
  text-decoration:line-through;
}
.price-off{
  padding:3px 7px;
  border-radius:6px;
  background:#ffe8e6;
  color:#d32f2f;
  font-size:11px;
  font-weight:900;
}
.price-note{
  margin:8px 0 0;
  font-size:10px;
  line-height:1.5;
  color:#6a849e;
}

/* Seller card */
.detail-seller-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid #d4e4f2;
  margin-bottom:16px;
}
.seller-avatar{
  width:44px;
  height:44px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(145deg,#1a8dff,#0d4a9e);
  flex:0 0 44px;
  display:grid;
  place-items:center;
}
.seller-avatar img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:4px;
}
.seller-copy{flex:1;min-width:0}
.seller-copy b{display:block;font-size:13px;color:#112e55}
.seller-copy small{display:block;font-size:10px;color:#6a849e;margin-top:2px}
.seller-badge{
  padding:5px 9px;
  border-radius:8px;
  background:linear-gradient(110deg,#1a8dff,#0d6ad6);
  color:#fff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.5px;
}

.detail-section{margin-bottom:16px}
.detail-section h3,
.detail-reviews h3,
.similar-products h3{
  margin:0 0 8px;
  font-size:13px;
  font-weight:800;
  color:#193c68;
}
.detail-description{
  margin:0;
  font-size:12px;
  line-height:1.75;
  color:#5d7693;
  white-space:pre-line;
}
.spec-list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:6px;
}
.spec-list li{
  position:relative;
  padding:10px 12px 10px 32px;
  border:1px solid #d7e8f8;
  border-radius:10px;
  background:#fff;
  color:#486684;
  font-size:11px;
  line-height:1.55;
}
.spec-list li:before{
  content:"✓";
  position:absolute;
  left:11px;
  top:10px;
  color:#1682e9;
  font-weight:900;
}

.detail-safety{
  margin:0 0 16px;
  padding:12px 14px;
  border-radius:12px;
  background:#fff8e8;
  border:1px solid #f0dfb0;
  color:#6b5420;
  font-size:11px;
  line-height:1.65;
}

/* Reviews */
.detail-reviews{
  margin-bottom:16px;
  padding:14px;
  border-radius:14px;
  background:#fff;
  border:1px solid #d4e4f2;
}
.detail-review-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.detail-review-head small{font-size:10px;color:#7a95ad}
.review-list{display:grid;gap:8px;margin-bottom:12px}
.review-item{
  padding:10px 12px;
  border-radius:10px;
  background:#f5f9fd;
  border:1px solid #e2eef8;
}
.review-item div{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.review-item b{font-size:11px;color:#1a4a78}
.review-item span{font-size:11px;color:#f5a623}
.review-item p{margin:0;font-size:11px;color:#5d7693;line-height:1.5}
.review-form{display:grid;gap:8px}
.review-form-row{display:grid;grid-template-columns:1fr 110px;gap:8px}
.review-form input,
.review-form select,
.review-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #c5daf0;
  border-radius:10px;
  background:#f8fbfe;
  color:#16365e;
  font-size:12px;
  font-family:inherit;
}
.review-form textarea{min-height:80px;resize:vertical}
.review-form button{justify-self:start}

/* Similar products */
.similar-products{margin-bottom:20px}
.similar-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.similar-grid button{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  text-align:left;
  padding:8px;
  border:1px solid #d0e3f4;
  border-radius:12px;
  background:#fff;
  color:#244b78;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.similar-grid button:hover{
  border-color:#6eb8ff;
  box-shadow:0 4px 12px rgba(30,90,140,.1);
}
.sim-thumb{
  flex:0 0 48px;
  width:48px;
  height:48px;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(145deg,#0b2a52,#0e3a70);
}
.sim-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:3px;
}
.sim-copy{flex:1;min-width:0;display:grid;gap:2px}
.sim-copy b{
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sim-copy small{font-size:11px;font-weight:800;color:#0d6fd4}
.sim-copy em{font-style:normal;font-size:9px;font-weight:800}
.sim-copy em.ready{color:#0b7a4a}
.sim-copy em.sold{color:#8a95a5}

/* Sticky bottom actions — itemku style */
.detail-actions.itemku-actions{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:10px;
  position:sticky;
  bottom:0;
  padding:12px 0 4px;
  background:linear-gradient(0deg,#f4f8fc 70%,transparent);
  z-index:5;
}
.detail-actions .buy-link,
.detail-actions .consult-link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  border-radius:12px;
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  border:0;
}
.detail-actions .buy-link{
  background:linear-gradient(110deg,#1a8dff,#0d6ad6);
  color:#fff;
  box-shadow:0 6px 18px rgba(13,106,214,.35);
}
.detail-actions .consult-link{
  background:#fff;
  color:#1568b8;
  border:1px solid #b6d6f5;
}
.detail-actions .buy-link.disabled{
  opacity:.5;
  pointer-events:none;
  box-shadow:none;
}

/* Dark mode overrides for dialog */
body.dark .product-dialog{
  background:#0a1f3d;
  border-color:#2a5a8a;
  color:#d6e8fa;
}
body.dark .shop-detail.itemku-detail{background:#0a1f3d}
body.dark .detail-left{
  background:#071830;
  border-color:#1e4a75;
}
body.dark .detail-info{background:#0a1f3d}
body.dark .detail-title-line h2{color:#eef6ff}
body.dark .detail-price-box{
  background:linear-gradient(135deg,#0d2a52,#0a2244);
  border-color:#2a5a8a;
}
body.dark .detail-price{color:#6fc8ff}
body.dark .price-note{color:#8aafd0}
body.dark .detail-seller-card,
body.dark .detail-reviews,
body.dark .similar-grid button,
body.dark .detail-trust-row>div,
body.dark .spec-list li{
  background:#0c2748;
  border-color:#2a5a8a;
  color:#c5dcf0;
}
body.dark .seller-copy b,
body.dark .detail-section h3,
body.dark .detail-reviews h3,
body.dark .similar-products h3{color:#e8f4ff}
body.dark .detail-description,
body.dark .seller-copy small,
body.dark .review-item p{color:#9ab8d6}
body.dark .detail-meta-row span{
  background:#0c2748;
  border-color:#2a5a8a;
  color:#9ec8ef;
}
body.dark .detail-wishlist{
  background:#0c2748;
  border-color:#2a5a8a;
  color:#9ec8ef;
}
body.dark .detail-actions.itemku-actions{
  background:linear-gradient(0deg,#0a1f3d 70%,transparent);
}
body.dark .detail-actions .consult-link{
  background:#0c2748;
  border-color:#2a5a8a;
  color:#7ec4ff;
}
body.dark .detail-safety{
  background:#3a2e12;
  border-color:#6b5420;
  color:#f0d99a;
}
body.dark .review-form input,
body.dark .review-form select,
body.dark .review-form textarea{
  background:#071830;
  border-color:#2a5a8a;
  color:#d6e8fa;
}

/* Mobile */
@media(max-width:780px){
  .product-dialog{width:100vw;max-height:100vh;border-radius:0;height:100%}
  .shop-detail.itemku-detail{grid-template-columns:1fr}
  .detail-left{
    border-right:0;
    border-bottom:1px solid #d4e4f2;
    padding:12px;
  }
  body.dark .detail-left{border-color:#1e4a75}
  .detail-art{aspect-ratio:1/1;max-height:340px}
  .detail-info{padding:14px 14px 90px}
  .detail-title-line h2{font-size:18px}
  .detail-price{font-size:24px}
  .detail-trust-row{grid-template-columns:repeat(3,1fr)}
  .review-form-row{grid-template-columns:1fr}
  .similar-grid{grid-template-columns:1fr}
  .detail-actions.itemku-actions{
    position:fixed;
    left:0;right:0;bottom:0;
    margin:0;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:#f4f8fc;
    border-top:1px solid #d0e3f4;
    box-shadow:0 -6px 20px rgba(10,40,80,.12);
    grid-template-columns:90px minmax(0,1fr);
  }
  body.dark .detail-actions.itemku-actions{
    background:#0a1f3d;
    border-color:#1e4a75;
  }
}

/* HARD FIX: badges must never stretch */
.detail-art{
  display:block !important;
  position:relative !important;
  overflow:hidden !important;
}
.detail-art > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
.detail-art .status-tag{
  position:absolute !important;
  top:10px !important;
  left:10px !important;
  right:auto !important;
  bottom:auto !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  max-width:46% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:5px 10px !important;
  border-radius:8px !important;
  font-size:10px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  writing-mode:horizontal-tb !important;
  transform:none !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  z-index:5 !important;
  box-shadow:0 3px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.detail-art .status-tag.ready{
  background:linear-gradient(180deg,#22c55e,#16a34a) !important;
  color:#fff !important;
  border:1px solid #15803d !important;
}
.detail-art .status-tag.sold{
  background:linear-gradient(180deg,#94a3b8,#64748b) !important;
  color:#fff !important;
}
.detail-art .detail-featured{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  left:auto !important;
  bottom:auto !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  max-width:50% !important;
  padding:5px 10px !important;
  border-radius:8px !important;
  font-size:9px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  writing-mode:horizontal-tb !important;
  transform:none !important;
  z-index:5 !important;
  background:linear-gradient(180deg,#ffc14d,#f59e0b) !important;
  color:#4a2200 !important;
  border:1px solid #d97706 !important;
  box-shadow:0 3px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.detail-art .detail-discount-badge{
  position:absolute !important;
  bottom:10px !important;
  left:10px !important;
  top:auto !important;
  right:auto !important;
  width:auto !important;
  height:auto !important;
  z-index:5 !important;
}