:root{
  --commerce-surface: rgba(8,18,28,.86);
  --commerce-border: rgba(255,255,255,.10);
  --commerce-soft: rgba(255,255,255,.06);
  --commerce-accent: #3bb6ff;
  --commerce-accent-2: #ff4b4b;
  --commerce-success: #38d996;
  --commerce-warning: #ffbe3b;
  --commerce-shadow: 0 18px 54px rgba(0,0,0,.28);
}
.commerce-strip{padding:22px 0;background:linear-gradient(180deg,rgba(10,16,24,.95),rgba(10,16,24,.6));border-top:1px solid var(--commerce-border);border-bottom:1px solid var(--commerce-border)}
.commerce-strip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.commerce-strip-card,.commerce-trust-card,.checkout-supreme,.account-shell,.tracking-shell,.multiview-shell,.hero-studio-shell,.mv-panel{
  background:var(--commerce-surface);border:1px solid var(--commerce-border);border-radius:24px;box-shadow:var(--commerce-shadow);backdrop-filter: blur(12px)
}
.commerce-strip-card{padding:18px 18px 16px;display:flex;gap:12px;align-items:flex-start}
.commerce-strip-card b{display:block;font-size:15px;margin-bottom:6px}
.commerce-strip-card span{display:block;color:#b8c5d2;font-size:13px;line-height:1.55}
.commerce-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(59,182,255,.11);border:1px solid rgba(59,182,255,.18);font-size:12px;color:#dff4ff}
.commerce-chip.red{background:rgba(255,75,75,.08);border-color:rgba(255,75,75,.18)}
.commerce-chip.green{background:rgba(56,217,150,.10);border-color:rgba(56,217,150,.18)}
.commerce-dock{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:10px}
.commerce-dock a{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:16px;background:#0a1118;border:1px solid rgba(255,255,255,.08);color:#fff;text-decoration:none;box-shadow:var(--commerce-shadow);font-size:13px}
.commerce-dock a small{display:block;color:#9bb0c5}
.commerce-fav-btn{position:absolute;top:12px;right:12px;width:42px;height:42px;border:none;border-radius:50%;display:grid;place-items:center;background:rgba(6,10,14,.75);color:#fff;box-shadow:var(--commerce-shadow);cursor:pointer;z-index:4}
.commerce-fav-btn.active{background:rgba(255,75,75,.18);color:#ff9e9e}
.product-card .commerce-fav-btn{top:14px;right:14px}
.multiview-shell,.hero-studio-shell{padding:18px;position:relative}
.mv-stage{position:relative;min-height:480px;display:grid;place-items:center;border-radius:20px;background:radial-gradient(circle at 50% 32%,rgba(255,255,255,.05),rgba(255,255,255,.015) 40%,rgba(4,8,12,.8) 100%);overflow:hidden}
.mv-stage img{max-width:100%;max-height:460px;object-fit:contain;display:block;filter:drop-shadow(0 22px 35px rgba(0,0,0,.38))}
.mv-stage .mv-badge{position:absolute;left:18px;top:18px}
.mv-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px}
.mv-toolbar h3{margin:0;font-size:18px}
.mv-toolbar p{margin:4px 0 0;color:#9eb0c0;font-size:13px}
.mv-switch,.mv-thumbs,.checkout-tabs,.payment-badges,.installment-grid,.account-kpis{display:flex;flex-wrap:wrap;gap:10px}
.mv-switch button,.mv-thumbs button,.checkout-tabs button{border:none;cursor:pointer;border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.05);color:#fff;transition:.2s ease}
.mv-switch button.active,.mv-thumbs button.active,.checkout-tabs button.active{background:linear-gradient(135deg,rgba(59,182,255,.24),rgba(255,75,75,.14));border:1px solid rgba(59,182,255,.25)}
.mv-thumbs{margin-top:14px}
.mv-thumbs button{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:108px}
.mv-thumbs img{width:72px;height:72px;object-fit:contain;background:rgba(255,255,255,.03);border-radius:12px;padding:6px}
.mv-info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.mv-info-grid div{padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.mv-info-grid small{display:block;color:#8ea1b6;font-size:11px;margin-bottom:4px;letter-spacing:.08em}
.mv-info-grid strong{font-size:14px}
.multiview-detail-wrap{margin-top:28px}
.commerce-trust-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:18px;margin-top:22px}
.commerce-trust-card{padding:22px}
.commerce-trust-card h3,.checkout-supreme h3,.account-shell h2,.tracking-shell h2{margin:0 0 8px}
.commerce-trust-card p,.checkout-supreme p,.account-shell p,.tracking-shell p{color:#adc0d1}
.payment-badges span{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);font-size:12px;border:1px solid rgba(255,255,255,.08)}
.checkout-supreme{padding:24px;margin-top:24px}
.checkout-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:18px;align-items:start}
.checkout-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.checkout-form-grid .span-2{grid-column:span 2}
.checkout-supreme label{display:block}
.checkout-supreme label span{display:block;margin-bottom:8px;font-size:13px;color:#adc0d1}
.checkout-supreme input,.checkout-supreme textarea,.checkout-supreme select{
  width:100%;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:#fff;outline:none
}
.checkout-supreme textarea{min-height:120px;resize:vertical}
.checkout-panel{padding:18px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.checkout-panel .line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.09)}
.checkout-panel .line:last-child{border-bottom:none}
.checkout-panel .total{font-size:22px;font-weight:700;color:#fff}
.installment-grid{margin-top:14px}
.installment-grid .ins-card{flex:1 1 120px;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.installment-grid .ins-card b{display:block;font-size:16px}
.checkout-pay-pane{display:none;margin-top:14px}
.checkout-pay-pane.active{display:block}
.checkout-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.checkout-note{font-size:12px;color:#8ea1b6;margin-top:10px}
.timeline{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.timeline-step{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:flex-start}
.timeline-step i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-style:normal}
.timeline-step.active i{background:rgba(56,217,150,.18);border-color:rgba(56,217,150,.22)}
.order-status-line{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.order-status-line div{padding:14px 10px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);text-align:center}
.order-status-line div.active{background:linear-gradient(180deg,rgba(56,217,150,.16),rgba(255,255,255,.03));border-color:rgba(56,217,150,.24)}
.account-shell,.tracking-shell{padding:24px}
.account-kpis article{flex:1 1 180px;padding:18px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.account-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:18px}
.account-section{padding:18px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.account-list{display:flex;flex-direction:column;gap:12px}
.account-item{padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.account-item .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.account-item .meta span{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);font-size:12px}
.studio-modal{position:fixed;inset:0;background:rgba(2,5,8,.82);display:none;align-items:center;justify-content:center;z-index:120;padding:20px}
.studio-modal.open{display:flex}
.studio-modal .modal-inner{position:relative;width:min(1100px,92vw);padding:20px;border-radius:26px;background:#0a1218;border:1px solid rgba(255,255,255,.08)}
.studio-modal img{width:100%;height:min(80vh,860px);object-fit:contain}
.studio-modal button{position:absolute;top:16px;right:16px;border:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer}
.hero-studio-shell .mv-stage{min-height:420px}
.hero-studio-shell .mv-stage img{max-height:400px}
.hero-dual-pane{display:none}
.hero-dual-pane.active{display:block}
.hero-view-toggle{display:flex;gap:10px;margin:0 0 12px}
.hero-view-toggle button{border:none;padding:12px 15px;border-radius:14px;background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.hero-view-toggle button.active{background:linear-gradient(135deg,rgba(59,182,255,.25),rgba(255,75,75,.14))}
.hero-pane-3d{position:relative}
@media (max-width: 1080px){
  .commerce-strip-grid,.mv-info-grid,.commerce-trust-grid,.checkout-grid,.account-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .commerce-strip-grid{grid-template-columns:1fr}
  .mv-stage{min-height:320px}
  .mv-stage img{max-height:300px}
  .checkout-form-grid{grid-template-columns:1fr}
  .checkout-form-grid .span-2{grid-column:span 1}
  .order-status-line{grid-template-columns:repeat(2,minmax(0,1fr))}
  .commerce-dock{left:12px;right:12px;bottom:12px}
  .commerce-dock a{justify-content:center}
}