/* Business Suite v8 — modal usability, guided variants and storefront option controls */

/* Long dialogs must always remain usable at every viewport height. */
body.suite-modal-open{overflow:hidden}
.admin-body .modal,
.suite-storefront-v7 .modal{
  display:flex;
  flex-direction:column;
  overflow:hidden!important;
  overscroll-behavior:contain;
}
.admin-body .modal-header,
.suite-storefront-v7 .modal-header{flex:0 0 auto}
.admin-body .modal-body,
.suite-storefront-v7 .modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto!important;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}
.admin-body .modal-body::-webkit-scrollbar,
.suite-storefront-v7 .modal-body::-webkit-scrollbar{width:10px}
.admin-body .modal-body::-webkit-scrollbar-thumb,
.suite-storefront-v7 .modal-body::-webkit-scrollbar-thumb{background:#c7ccd6;border:3px solid transparent;border-radius:999px;background-clip:padding-box}
.admin-body .modal-body::-webkit-scrollbar-track,
.suite-storefront-v7 .modal-body::-webkit-scrollbar-track{background:transparent}
.admin-body .modal.large{max-height:min(94vh,980px)}
.suite-storefront-v7 .modal.large{max-height:94vh}

/* Product editor section navigation and action bar. */
.product-form-jumpbar{
  position:sticky;
  top:-1px;
  z-index:8;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px;
  margin:-2px 0 18px;
  border:1px solid #e2e6ee;
  border-radius:14px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 24px rgba(16,24,40,.07);
  backdrop-filter:blur(12px);
  scrollbar-width:thin;
}
.product-form-jumpbar button{
  flex:0 0 auto;
  border:1px solid #d9dee8;
  border-radius:999px;
  background:#fff;
  color:#344054;
  padding:8px 12px;
  font-size:.78rem;
  font-weight:800;
}
.product-form-jumpbar button:hover,.product-form-jumpbar button:focus-visible{border-color:#7867ef;color:#5b45db;background:#f8f7ff}
.admin-body #saveProduct.modal-primary-save{
  position:sticky;
  bottom:-1px;
  z-index:9;
  min-height:48px;
  margin-top:20px;
  border:5px solid #fbfcfe;
  box-shadow:0 -10px 24px rgba(16,24,40,.08),0 10px 25px rgba(79,70,229,.2);
}
.product-stock-calculated{background:#f4f3ff!important;color:#5b45db!important;border-color:#d9d3ff!important}
.product-stock-help{display:block;margin-top:6px;color:#667085;font-size:.75rem}

/* Guided universal variant setup. */
.variant-quick-setup{
  margin:16px 0 4px;
  padding:14px;
  border:1px solid #e4e0ff;
  border-radius:14px;
  background:linear-gradient(145deg,#fbfaff,#f6f8ff);
}
.variant-quick-setup-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.variant-quick-setup-title b{color:#29235c}
.variant-preset-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.variant-preset-buttons button{border:1px solid #d8d2ff;background:#fff;color:#4e3ac7;border-radius:10px;padding:8px 11px;font-size:.78rem;font-weight:850}
.variant-preset-buttons button:hover{background:#eeeaff;border-color:#a99df4}
.variant-option-row{padding:12px;border:1px solid #e6e9ef;border-radius:13px;background:#fff}
.variant-bulk-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:9px;
  padding:12px;
  margin-bottom:10px;
  border:1px solid #e2e6ee;
  border-radius:13px;
  background:#fff;
}
.variant-bulk-toolbar .bulk-field{width:150px}
.variant-bulk-toolbar .form-label{margin-bottom:4px}
.variant-matrix-table thead th{position:sticky;top:0;z-index:2;background:#f7f8fa}
.variant-matrix-table tbody tr:hover td{background:#fafaff}

/* Real storefront option selectors. Native selects remain in the DOM for compatibility. */
.variant-native-select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.variant-selector{margin-top:18px}
.variant-selector>.form-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;font-size:.82rem;color:#344054}
.variant-choice-grid{display:flex;flex-wrap:wrap;gap:9px}
.variant-choice{
  position:relative;
  min-width:46px;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid #d0d5dd;
  border-radius:11px;
  padding:8px 13px;
  background:#fff;
  color:#344054;
  font-size:.84rem;
  font-weight:850;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
}
.variant-choice:hover:not(:disabled){border-color:#7b68ee;transform:translateY(-1px)}
.variant-choice.is-selected{border-color:#4f46e5;background:#f4f3ff;color:#4238c9;box-shadow:0 0 0 2px rgba(79,70,229,.12)}
.variant-choice:disabled{cursor:not-allowed;color:#98a2b3;background:#f2f4f7;border-color:#e4e7ec;text-decoration:line-through;opacity:.78}
.variant-choice:focus-visible{outline:3px solid rgba(79,70,229,.2);outline-offset:2px}
.variant-color-dot{width:17px;height:17px;flex:none;border-radius:50%;border:1px solid rgba(16,24,40,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.variant-selection-summary{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:18px 0 4px;
  padding:11px 13px;
  border:1px solid #e4e7ec;
  border-radius:12px;
  background:#f8fafc;
  color:#475467;
  font-size:.82rem;
}
.variant-selection-summary b{color:#101828}
.variant-selection-summary .selection-values{font-weight:800;color:#4f46e5}

/* Equal, compact professional product cards. */
.suite-product-card{display:flex;flex-direction:column;height:100%}
.suite-product-card .product-body{display:flex;flex-direction:column;flex:1}
.suite-product-card .product-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.suite-product-card .product-footer{margin-top:auto;padding-top:12px}
.suite-product-card .product-media:after{content:"Quick view";position:absolute;left:50%;bottom:14px;transform:translate(-50%,10px);opacity:0;background:rgba(17,24,39,.88);color:#fff;padding:7px 12px;border-radius:999px;font-size:.72rem;font-weight:850;transition:.2s;pointer-events:none}
.suite-product-card:hover .product-media:after{opacity:1;transform:translate(-50%,0)}
.suite-hero .hero-inner{isolation:isolate}
.suite-hero .hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,23,42,.18));pointer-events:none}

/* Dynamic section admin rows stay readable with many controls. */
.custom-section-admin-row{align-items:center}
.custom-section-admin-row .input,.custom-section-admin-row .select{min-width:0}

@media(max-width:820px){
  .admin-body .modal.large,.suite-storefront-v7 .modal.large{width:calc(100% - 14px);max-height:96vh}
  .product-form-jumpbar{margin-left:-2px;margin-right:-2px}
  .variant-bulk-toolbar{align-items:stretch}
  .variant-bulk-toolbar .bulk-field{width:100%}
  .variant-bulk-toolbar .btn{flex:1 1 180px}
}
@media(max-width:520px){
  .admin-body .modal-header,.suite-storefront-v7 .modal-header{min-height:58px;padding:12px 14px}
  .admin-body .modal-body,.suite-storefront-v7 .modal-body{padding:13px!important}
  .product-form-jumpbar{top:-1px;padding:8px;margin-bottom:13px}
  .product-form-jumpbar button{padding:7px 10px;font-size:.72rem}
  .variant-choice{min-height:40px;padding:7px 10px}
  .suite-product-card .product-media:after{display:none}
  .admin-body #saveProduct.modal-primary-save{border-width:3px}
}

/* Reorderable label/report fields and custom popup content. */
.ordered-field-grid{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
.ordered-field-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 9px;border:1px solid #e4e7ec;border-radius:12px;background:#fff}
.field-order-actions{display:flex;gap:5px;align-items:center}
.ordered-report-grid{display:grid;grid-template-columns:1fr;gap:9px}
.ordered-report-row{grid-template-columns:minmax(190px,.8fr) minmax(220px,1.2fr) auto!important}
.custom-popup-settings{margin-top:4px}
.custom-section-popup-image{min-height:220px;max-height:360px;border-radius:16px;overflow:hidden;background:#f2f4f7}
.custom-section-popup-image img{width:100%;height:100%;object-fit:cover}
@media(max-width:680px){.ordered-report-row{grid-template-columns:1fr!important}.field-order-actions{justify-content:flex-end}}