.rs-3d-viewer{margin-top:16px;border:1px solid rgba(70,211,255,.25);border-radius:18px;background:linear-gradient(145deg,rgba(5,12,20,.95),rgba(10,15,28,.9));box-shadow:0 18px 60px rgba(0,0,0,.28),0 0 35px rgba(0,174,255,.06);overflow:hidden}
.rs-3d-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.rs-3d-head strong{display:block;font-size:14px;margin-top:2px}
.rs-3d-quality{font-size:10px;font-weight:900;letter-spacing:.12em;color:#72dcff;border:1px solid rgba(114,220,255,.25);border-radius:999px;padding:5px 8px}
.rs-3d-stage{position:relative;background:radial-gradient(circle at 50% 38%,rgba(42,104,135,.22),transparent 42%),repeating-conic-gradient(#101a23 0 25%,#0b131b 0 50%) 0/28px 28px;min-height:300px}
.rs-3d-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.42))}
.rs-3d-stage canvas{display:block;width:100%;height:clamp(300px,35vw,520px);touch-action:none}
.rs-3d-loading,.rs-3d-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;z-index:3;padding:20px;text-align:center}
.rs-3d-loading{background:rgba(3,7,12,.42);backdrop-filter:blur(4px)}
.rs-3d-error{color:#ff9da8;background:rgba(35,7,13,.55)}
.rs-3d-hint{position:absolute;left:10px;right:10px;bottom:9px;text-align:center;font-size:10px;color:rgba(255,255,255,.58);z-index:4;pointer-events:none}
.rs-3d-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px;border-top:1px solid rgba(255,255,255,.08)}
.rs-3d-toolbar .btn{font-size:12px;padding:7px 10px}
.rs-3d-toolbar .btn.active{border-color:#36c8ff;box-shadow:0 0 18px rgba(54,200,255,.18)}
.rs-3d-animation{margin-left:auto;display:flex;align-items:center;gap:6px;color:#93a0b5;font-size:12px}
.rs-3d-animation select{max-width:180px;background:#0c1420;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:7px}
.v811-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.v811-asset-card{min-width:0}
.v811-asset-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.v811-asset-head h3{margin:5px 0 2px;font-size:18px}
.v811-asset-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.v811-asset-meta span{font-size:11px;padding:6px 9px;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:#b8c4d5}
.v811-asset-card details>summary{list-style:none}
.v811-asset-card details>summary::-webkit-details-marker{display:none}
code{color:#72dcff}
pre{white-space:pre-wrap;background:#060a11;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.08)}
@media(max-width:900px){.v811-admin-grid{grid-template-columns:1fr}}
@media(max-width:600px){.rs-3d-toolbar{align-items:stretch}.rs-3d-animation{margin-left:0;width:100%}.rs-3d-animation select{flex:1;max-width:none}.rs-3d-hint{font-size:9px}}

.rs-3d-viewer{contain:content}
.rs-3d-stage{min-height:280px}
.rs-3d-stage canvas{outline:none}
.rs-3d-loading span:last-child{font-variant-numeric:tabular-nums}
.v811-asset-help{font-size:12px;line-height:1.55}
.v811-file-status{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.v811-file-status span{font-size:11px;padding:5px 8px;border-radius:999px;background:rgba(114,220,255,.07);border:1px solid rgba(114,220,255,.16)}
@media(max-width:600px){.rs-3d-stage canvas{height:clamp(280px,82vw,440px)}}


/* =========================================================
   RabbitSkin V8.11.2 FIX2 — Product layout hardening
   ========================================================= */
.rs-3d-viewer--product{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  clear:both;
  box-sizing:border-box;
  margin:16px 0 0;
}
.rs-3d-viewer--product *{box-sizing:border-box}
.rs-3d-viewer--product .rs-3d-stage{
  width:100%;
  min-width:0;
  overflow:hidden;
}
.rs-3d-viewer--product .rs-3d-stage canvas{
  width:100%!important;
  max-width:100%;
  display:block;
}
.rs-3d-viewer--product .rs-3d-toolbar{
  min-width:0;
}
.rs-3d-viewer--product .rs-3d-animation{
  min-width:0;
}
.rs-3d-viewer--product .rs-3d-animation select{
  min-width:0;
  width:auto;
}

/* Recommendations must always occupy the full product page row.
   This also protects against inherited grid/flex rules from templates. */
main.wrap > .recommendation-section,
.product-detail > .recommendation-section,
.recommendation-section--full{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  grid-column:1 / -1!important;
  float:none!important;
  clear:both!important;
  position:relative;
  box-sizing:border-box;
}
.recommendation-section--full .recommendation-grid{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.recommendation-section--full .recommendation-grid>.card{
  min-width:0;
  width:100%;
}
.recommendation-section--full .recommendation-grid .product-image{
  min-width:0;
  width:100%;
  overflow:hidden;
}
.recommendation-section--full .recommendation-grid h3{
  overflow-wrap:anywhere;
  word-break:normal;
}
@media(max-width:1000px){
  .recommendation-section--full .recommendation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .recommendation-section--full .recommendation-grid{grid-template-columns:1fr}
  .rs-3d-viewer--product{margin-top:12px}
  .rs-3d-viewer--product .rs-3d-stage canvas{height:clamp(280px,82vw,440px)!important}
  .rs-3d-viewer--product .rs-3d-animation{width:100%}
  .rs-3d-viewer--product .rs-3d-animation select{flex:1;width:100%}
}


/* =========================================================
   V8.11.2 FIX3 — Product page layout isolation
   ========================================================= */
.product-page-main{
  display:block!important;
  width:min(1240px,92%)!important;
  margin-inline:auto!important;
}
.product-page-main > .product-detail{
  width:100%!important;
  max-width:none!important;
}
.product-page-main > .recommendation-section,
.product-page-main > .recommendation-section--full{
  display:block!important;
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:24px 0 0!important;
  padding:20px!important;
  clear:both!important;
  float:none!important;
  grid-column:auto!important;
  box-sizing:border-box!important;
}
.product-page-main > .recommendation-section .recommendation-grid,
.product-page-main > .recommendation-section--full .recommendation-grid{
  display:grid!important;
  width:100%!important;
  max-width:none!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
}
.product-page-main > .recommendation-section .recommendation-grid>.card,
.product-page-main > .recommendation-section--full .recommendation-grid>.card{
  min-width:0!important;
  width:100%!important;
}
@media(max-width:1000px){
  .product-page-main > .recommendation-section .recommendation-grid,
  .product-page-main > .recommendation-section--full .recommendation-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:640px){
  .product-page-main > .recommendation-section,
  .product-page-main > .recommendation-section--full{
    padding:14px!important;
    margin-top:16px!important;
  }
  .product-page-main > .recommendation-section .recommendation-grid,
  .product-page-main > .recommendation-section--full .recommendation-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
}
@media(max-width:430px){
  .product-page-main > .recommendation-section .recommendation-grid,
  .product-page-main > .recommendation-section--full .recommendation-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   V8.11.2 FIX4 — 3D optional / product layout invariant
   This stylesheet is intentionally loaded on every product page.
   It must never reserve space for 3D; it only controls the layout.
   ========================================================= */
main.product-page-main{
  display:block!important;
  width:min(1240px,92%)!important;
  margin:0 auto!important;
}
main.product-page-main > .product-detail{
  display:grid!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:30px 0 0!important;
}
main.product-page-main > .recommendation-section.recommendation-section--full{
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:24px 0 30px!important;
  clear:both!important;
  float:none!important;
  grid-column:auto!important;
}
main.product-page-main > .recommendation-section.recommendation-section--full > .recommendation-grid{
  display:grid!important;
  width:100%!important;
  box-sizing:border-box!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
}
@media(max-width:1000px){
  main.product-page-main > .recommendation-section.recommendation-section--full > .recommendation-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:640px){
  main.product-page-main > .product-detail{
    grid-template-columns:1fr!important;
    gap:16px!important;
    margin-top:16px!important;
  }
  main.product-page-main > .recommendation-section.recommendation-section--full{
    margin-top:16px!important;
    padding:14px!important;
  }
  main.product-page-main > .recommendation-section.recommendation-section--full > .recommendation-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
}
@media(max-width:430px){
  main.product-page-main > .recommendation-section.recommendation-section--full > .recommendation-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   V8.11.2 FIX5 — Product detail columns independent of 3D
   The presence/absence of a 3D asset MUST NOT change the
   product detail grid. 3D is content inside media-column.
   ========================================================= */
main.product-page-main > .product-detail{
  display:grid!important;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;
  align-items:start!important;
  gap:30px!important;
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

/* The media column owns gallery + optional 3D. */
main.product-page-main > .product-detail > .media-column{
  min-width:0!important;
  width:100%!important;
  align-self:start!important;
}

/* The information column stays beside media whether 3D exists or not. */
main.product-page-main > .product-detail > .detail-info{
  min-width:0!important;
  width:100%!important;
  align-self:start!important;
}

/* No empty 3D space is ever reserved. */
main.product-page-main .rs-3d-viewer{
  width:100%!important;
  max-width:100%!important;
}

/* Keep the full-width recommendation outside the product grid. */
main.product-page-main > .recommendation-section.recommendation-section--full{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  clear:both!important;
  float:none!important;
  grid-column:auto!important;
}

/* Mobile: the same invariant remains true, but columns stack for usability.
   Whether 3D exists or not, the order is identical. */
@media (max-width: 767px){
  main.product-page-main > .product-detail{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
}


/* =========================================================
   V8.11.2 FIX6 — FINAL PRODUCT GRID INVARIANT
   This block intentionally comes LAST. It overrides legacy
   product-detail media rules without touching Bootstrap/header.
   ========================================================= */

/* Desktop + tablet: always keep media and information side by side. */
@media (min-width: 768px){
  main.product-page-main > .product-detail{
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
    align-items:start!important;
    gap:28px!important;
    width:100%!important;
    max-width:none!important;
    margin:30px 0 0!important;
    box-sizing:border-box!important;
  }

  main.product-page-main > .product-detail > .media-column{
    display:block!important;
    min-width:0!important;
    width:100%!important;
    grid-column:1!important;
    grid-row:1!important;
  }

  main.product-page-main > .product-detail > .detail-info{
    display:block!important;
    min-width:0!important;
    width:100%!important;
    grid-column:2!important;
    grid-row:1!important;
  }

  /* 3D is content of media-column, never a third product column. */
  main.product-page-main .rs-3d-viewer{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* Recommendations are outside product-detail and span the page. */
  main.product-page-main > .recommendation-section,
  main.product-page-main > .recommendation-section--full{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    margin:24px 0 30px!important;
    clear:both!important;
    float:none!important;
    grid-column:auto!important;
    box-sizing:border-box!important;
  }

  main.product-page-main > .recommendation-section .recommendation-grid,
  main.product-page-main > .recommendation-section--full .recommendation-grid{
    display:grid!important;
    width:100%!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
    box-sizing:border-box!important;
  }
}

/* Real mobile: one column, but 3D remains between gallery and info. */
@media (max-width:767px){
  main.product-page-main > .product-detail{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
    width:100%!important;
    max-width:none!important;
    margin:16px 0 0!important;
  }

  main.product-page-main > .product-detail > .media-column,
  main.product-page-main > .product-detail > .detail-info{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
  }

  main.product-page-main > .recommendation-section,
  main.product-page-main > .recommendation-section--full{
    display:block!important;
    width:100%!important;
    margin:16px 0 24px!important;
    clear:both!important;
    float:none!important;
  }

  main.product-page-main > .recommendation-section .recommendation-grid,
  main.product-page-main > .recommendation-section--full .recommendation-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
  }
}

@media (max-width:430px){
  main.product-page-main > .recommendation-section .recommendation-grid,
  main.product-page-main > .recommendation-section--full .recommendation-grid{
    grid-template-columns:1fr!important;
  }
}

/* V8.11.2 FIX9 — only the requested Shading toggle */
.rs-3d-shading{display:inline-flex;align-items:center;gap:6px;color:#93a0b5;font-size:12px;cursor:pointer}
.rs-3d-shading input{accent-color:#42d7ff}
@media(max-width:600px){.rs-3d-shading{margin-left:0}}


/* =========================================================
   V8.11.2 FIX10 — 3D Asset Manager UX
   ========================================================= */
.rs3d-search-panel{padding:14px 16px}
.rs3d-search-form{display:flex;gap:10px;align-items:center}
.rs3d-search-box{position:relative;flex:1;min-width:0}
.rs3d-search-box>i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#6fdfff;pointer-events:none}
.rs3d-search-box .input{padding-left:38px;padding-right:40px;width:100%}
.rs3d-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#8c9bad;cursor:pointer;padding:5px}
.rs3d-search-clear:hover{color:#fff}
.rs3d-search-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;color:#8290a5;font-size:11px}
.rs3d-search-meta span{display:inline-flex;align-items:center;gap:6px}
.rs3d-search-meta i{color:#63ddff}
.rs3d-upload-wrap{min-width:0}
.rs3d-upload-zone{
  position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;gap:11px;min-height:78px;padding:12px 14px;
  border:1px dashed rgba(93,212,255,.34);border-radius:13px;
  background:linear-gradient(135deg,rgba(65,183,230,.065),rgba(255,255,255,.018));
  cursor:pointer;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;
  overflow:hidden;
}
.rs3d-upload-zone:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(90,220,255,.06),transparent);transform:translateX(-100%);transition:transform .5s}
.rs3d-upload-zone:hover:after,.rs3d-upload-zone.is-dragover:after{transform:translateX(100%)}
.rs3d-upload-zone:hover,.rs3d-upload-zone.is-dragover{border-color:rgba(93,220,255,.9);background:rgba(51,172,215,.09);box-shadow:0 10px 24px rgba(0,160,230,.08);transform:translateY(-1px)}
.rs3d-upload-zone.is-ready{border-color:rgba(82,225,156,.75);background:rgba(50,185,115,.07)}
.rs3d-upload-zone.is-error{border-color:rgba(255,96,119,.8);background:rgba(190,40,65,.07)}
.rs3d-upload-zone>i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(83,211,255,.08);border:1px solid rgba(83,211,255,.15);color:#65ddff;font-size:20px}
.rs3d-upload-zone strong,.rs3d-upload-zone span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs3d-upload-zone strong{font-size:12px;color:#e8f4ff}
.rs3d-upload-zone span{font-size:10px;color:#8293a7;margin-top:3px}
.rs3d-upload-zone .btn{position:relative;z-index:2;white-space:nowrap}
.rs3d-upload-zone--compact{min-height:70px;grid-template-columns:36px minmax(0,1fr) auto;padding:9px 11px}
.rs3d-upload-zone--compact>i{width:36px;height:36px;font-size:17px}
.rs3d-hidden-file{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
@media(max-width:700px){
  .rs3d-search-form{flex-wrap:wrap}
  .rs3d-search-box{flex-basis:100%}
  .rs3d-upload-zone{grid-template-columns:38px minmax(0,1fr);min-height:84px}
  .rs3d-upload-zone .btn{grid-column:1/-1;width:100%}
}


/* V8.11.2 FIX13 — Noesis-style compact lighting presets */
.rs3d-light-control{position:relative;display:inline-flex;align-items:center}
.rs3d-light-menu{position:absolute;right:0;bottom:calc(100% + 8px);z-index:30;min-width:145px;padding:6px;border:1px solid rgba(110,210,255,.25);border-radius:12px;background:rgba(8,14,24,.97);box-shadow:0 14px 35px rgba(0,0,0,.35)}
.rs3d-light-menu button{display:flex;width:100%;align-items:center;gap:8px;border:0;border-radius:8px;background:transparent;color:#dce8f5;padding:8px 9px;font-size:11px;text-align:left;cursor:pointer}
.rs3d-light-menu button:hover{background:rgba(87,207,255,.09);color:#fff}
.rs3d-light-menu button.is-active{background:rgba(87,207,255,.13);color:#73ddff}

/* V8.11.2 FIX14 — material fidelity controls */
.rs3d-light-sep{height:1px;margin:5px 4px;background:rgba(150,190,220,.14)}
.rs3d-light-menu button.is-active{background:rgba(87,207,255,.13);color:#73ddff}