/* Shared visual finish for the catalog and its registration screens. */
:root{--ink:#1b3355;--muted:#708198;--line:#e1e8f2;--blue:#2c60b2;--shadow:0 8px 28px #1c42700a}
html,body{background:#f5f7fb}
body,button,input,select,textarea,.app-shell .sidebar .nav-item,.view h1,.view h2,.view h3{font-family:"Segoe UI",Arial,sans-serif}
body{color:#283e59;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
.view h1{font-weight:750;letter-spacing:-.9px}
.view h2{font-weight:700;letter-spacing:-.35px}
.view h3{font-weight:650}
.eyebrow{font-family:"Segoe UI",Arial,sans-serif;font-weight:700;letter-spacing:1.5px;color:#7286a2}
.app-shell .sidebar{background:#fff;border-color:#e2e9f3}
.sidebar .brand.brand-labeling{font-family:"Segoe UI",Arial,sans-serif;font-size:21px;letter-spacing:-.7px}
.labeling-logo{filter:drop-shadow(0 4px 7px #2459a920)}
.app-shell .sidebar .primary-nav .nav-item{font-size:13px;font-weight:600;line-height:1.5;transition:background .18s,color .18s}
.app-shell .sidebar .primary-nav .nav-item.active{background:#eaf1ff;color:#2459a9;box-shadow:inset 3px 0 #2c60b2}
.app-shell .sidebar .primary-nav .nav-item.active .nav-icon{color:#2459a9}
.topbar{border-color:#e5ebf4}
.crumb{font-size:11px}
.primary-button{border-radius:9px;box-shadow:0 4px 10px #2459a91a;font-weight:650}
.secondary-button,.subtle-button{border-radius:9px}
.form-card,.supplier-table-card,.product-gallery-card,.product-info-card{border-color:#e0e7f1;border-radius:15px;box-shadow:0 3px 16px #1b426006}
.view label{color:#4b607c}
.view .field-grid label,.view .full-field{font-size:12px;font-weight:600}
.view .field-grid input,.view .field-grid select,.view .full-field textarea{border-color:#dbe4f0;border-radius:8px;background:#fcfdff;color:#263f62;font-size:13px}
.view .field-grid input:focus,.view .field-grid select:focus,.view textarea:focus{border-color:#6d96d3;box-shadow:0 0 0 3px #497cc216;outline:none}
.view .form-section-heading h2{font-size:16px;color:#24416b}
.view .form-section-heading p{font-size:12px;line-height:1.6;color:#7c8ca3;font-weight:400}
.view .form-section-heading>span{border-radius:8px;background:#edf3fd;color:#3c68aa;font-family:"Segoe UI",Arial,sans-serif;font-size:11px;font-weight:700}
.editor-heading>div>p:last-child,.section-heading>p:last-child{font-size:13px;line-height:1.65;color:#75859a}
.editor-disclosure-toggle{min-height:86px;background:#fff;padding:20px 23px}
.editor-disclosure[open]>.editor-disclosure-toggle{background:linear-gradient(90deg,#f7faff,#fff);border-color:#e5ecf6}
.editor-disclosure-indicator{width:28px;height:28px;flex-basis:28px;border-color:#d9e5f6;background:#f2f6fc;font:400 20px Arial,sans-serif}
.editor-disclosure-content{padding:24px}
.package-editor-switch button{box-shadow:0 3px 12px #254d7a05;border-color:#e0e7f1;transition:background .18s,border-color .18s}
.package-editor-switch button[aria-pressed=true]{background:#ecf3ff;border-color:#a6bfe6;box-shadow:inset 3px 0 #2c60b2}
.package-editor-switch button small{color:#7389aa}
.package-editor-switch button:disabled{background:#f3f5f8;color:#939eaf;box-shadow:none;border-color:#e3e8f0}
.package-lock-notice,.bag-editor-notice{background:#f1f6fe;border-color:#dce7f7;color:#5a7598;font-size:12px}
.photo-picker-button{background:#f5f8fe;border-color:#b8cde9;border-radius:12px}
.photo-picker-button:hover{background:#edf4ff;border-color:#739ed8}
.photo-picker-icon{background:#e6effe;color:#376cb7}
.photo-upload-summary{background:#f0f5fc;border-radius:8px;color:#5b789c}
.placement-option{border-color:#dce5f2;border-radius:12px}
.placement-option:has(input:checked){border-color:#6d96d3;background:#eff5ff;box-shadow:0 0 0 2px #3e75c60c}
.placement-option:has(input:checked):after{background:#3267b6}
.sticky-footer{border-top:1px solid #e2e9f3;padding:17px 0;background:#ffffffed}
#catalogoView .catalog-welcome{border-color:#dce7f8;box-shadow:0 6px 24px #264c7e04}
#catalogoView .catalog-welcome h1{font-weight:750;letter-spacing:-1.1px}
#catalogoView .catalog-benefits span{border-radius:6px;background:#ffffffd9}
#catalogoView .catalog-panel-head{margin-top:26px}
#catalogoView .catalog-supplier-group{box-shadow:0 4px 18px #193e6605;border-color:#e1e8f2;padding:23px}
#catalogoView .catalog-supplier-identity h2{font-size:18px;font-weight:700}
#catalogoView .catalog-supplier-identity .supplier-monogram{background:#eef3ff;color:#416aaa;border:1px solid #e0e9fa;border-radius:12px}
#catalogoView .pattern-card{padding:16px;border-color:#e1e8f2;border-radius:12px}
#catalogoView .card-head{padding:0}
#catalogoView .card-title{font-size:16px;font-weight:650;letter-spacing:-.25px}
#catalogoView .card-code{font-family:"Segoe UI",Arial,sans-serif;color:#8391a5;font-size:11px}
#catalogoView .card-visual{border:1px solid #edf1f7;border-radius:9px}
#catalogoView .card-footer{padding:10px 0 0;gap:8px}
#catalogoView .card-footer button{background:#edf3fd;padding:8px 11px;border-radius:7px;min-height:34px;font-family:inherit}
#catalogoView .card-footer span{color:#8996a8}
.managed-product-list{padding:0 16px}
#productsView .managed-product-row{border-width:0 0 1px;border-radius:0;padding-top:18px;padding-bottom:18px}
#productsView .managed-product-row:last-child{border-bottom:0}
#productsView .managed-product-copy h2{font-size:15px;font-weight:650}
.supplier-row{padding-top:18px;padding-bottom:18px}
.supplier-identity strong{font-size:14px}
.product-info-card .summary-row{padding:12px 0;gap:12px}
.product-info-card .summary-row strong{font-size:12px;line-height:1.5}
@media(max-width:840px){.app-shell .sidebar{border-bottom-color:#e0e8f3}.app-shell .sidebar .primary-nav .nav-item{font-size:13px}}
@media(max-width:560px){
  .view .form-section-heading h2{font-size:15px}
  .editor-disclosure-toggle{padding:17px 14px;min-height:80px}
  .editor-disclosure-content{padding:19px 14px}
  #catalogoView .catalog-supplier-group{padding:16px}
  #catalogoView .catalog-supplier-identity h2{font-size:16px}
  .managed-product-list{padding:0 10px}
  .package-editor-switch button{min-height:76px}
}
@media(prefers-reduced-motion:reduce){button,.app-shell .sidebar .primary-nav .nav-item{transition:none}}
/* Supplier initials: compact, keyboard-accessible and wrapping on mobile. */
.supplier-alphabet { margin: 0 0 24px; padding: 16px; border: 1px solid #dce6f3; border-radius: 14px; background: #fff; }
.supplier-alphabet-label { display: block; margin-bottom: 10px; font: 600 12px/1.4 "Segoe UI",sans-serif; color: #526782; }
.supplier-alphabet-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.supplier-alphabet-buttons button { min-width: 38px; min-height: 40px; padding: 8px 11px; border: 1px solid #dce6f3; border-radius: 8px; background: #f6f9fd; color: #315479; font: 600 13px/1 "Segoe UI",sans-serif; cursor: pointer; }
.supplier-alphabet-buttons button:hover:not(:disabled) { background: #e8f0ff; border-color: #92b7ef; }
.supplier-alphabet-buttons button[aria-pressed="true"] { background: #225dcc; border-color: #225dcc; color: #fff; }
.supplier-alphabet-buttons button:disabled { color: #a4afbf; background: #f8fafc; border-color: #eef2f7; cursor: default; }
.supplier-alphabet-buttons button:focus-visible { outline: 3px solid #7bb0ff; outline-offset: 2px; }
.supplier-alphabet-buttons button[hidden] { display: none; }
@media (max-width: 600px) { .supplier-alphabet { padding: 12px; } .supplier-alphabet-buttons button { min-width: 44px; min-height: 44px; } }
/* Product consultation: optional materials and illustrated packing steps. */
.detail-packing .packing-materials-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
.detail-packing .packing-materials-heading h3 { margin:0; color:#244268; font-size:16px; }
.packing-materials-heading>span { color:#6b7f99; font-size:12px; white-space:nowrap; }
.packing-material-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:10px; list-style:none; margin:0; padding:0; }
.packing-material-cards li { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; padding:16px; background:#fff; border:1px solid #dce6f3; border-radius:12px; }
.packing-material-name { min-width:0; font-size:13px; line-height:1.6; color:#304e70; overflow-wrap:anywhere; }
.packing-material-amount { flex-shrink:0; max-width:50%; overflow-wrap:anywhere; padding:8px 11px; border-radius:8px; background:#eaf2ff; color:#225dcc; font-size:17px; line-height:1.3; }
.packing-material-amount span { font-size:12px; font-weight:600; }
.packing-instruction-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; margin-top:20px; }
.detail-packing .detail-packing-instruction { margin:0; padding:22px; min-width:0; border:1px solid #dce7f6; border-radius:14px; background:linear-gradient(135deg,#f1f6ff,#f9fbff); }
.packing-instruction-heading { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.packing-step { display:grid; place-items:center; flex:0 0 36px; height:36px; border-radius:10px; background:#225dcc; color:#fff; font-size:12px; font-weight:700; }
.detail-packing .packing-instruction-heading h3 { margin:0; color:#244268; font-size:15px; line-height:1.5; }
.detail-packing .detail-packing-instruction p { color:#4d6380; font-size:14px; line-height:1.8; }
.detail-packing .instruction-photo-slots { grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr)); gap:10px; margin-top:18px; }
.detail-packing .instruction-photo-zoom { min-width:0; border-color:#d4e1f3; border-radius:10px; padding:8px; color:#225dcc; }
.detail-packing .instruction-photo-zoom img { height:120px; }
.detail-packing .instruction-photo-zoom:hover { border-color:#225dcc; background:#f5f9ff; }
.detail-packing .instruction-photo-zoom:focus-visible { outline:3px solid #7bb0ff; outline-offset:3px; }
@media(max-width:600px) { .detail-packing .detail-packing-instruction { padding:16px; } .packing-material-cards { grid-template-columns:1fr; } }
.product-hidden-badge { display:inline-block; margin-top:8px; padding:5px 8px; border-radius:6px; background:#fff3dc; color:#825515; font-size:11px; font-weight:600; }
.managed-product-actions { flex-wrap:wrap; }
.managed-product-actions .managed-toggle-button { color:#315c91; border:1px solid #bdcfe6; background:#f1f6ff; }
@media(max-width:1070px) { .managed-product-actions { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.product-order-controls { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.product-order-controls button { min-height:36px; padding:7px 10px; border:1px solid #d4e1f3; border-radius:7px; color:#315c91; background:#f5f8ff; font:600 12px/1.3 "Segoe UI",sans-serif; cursor:pointer; }
.product-order-controls button:hover:not(:disabled) { background:#e5efff; border-color:#8badde; }
.product-order-controls button:disabled { opacity:.45; cursor:default; }
.product-order-controls button:focus-visible { outline:3px solid #7bb0ff; outline-offset:2px; }
@media(max-width:600px) { .product-order-controls button { min-height:44px; } }
.product-pinned-badge { display:inline-flex; align-items:center; width:fit-content; padding:4px 8px; margin:6px 0; border-radius:6px; color:#2356a2; background:#eaf2ff; font:600 11px/1.4 "Segoe UI",sans-serif; }
.managed-product-actions .managed-pin-button { border:1px solid #cbdcf4; color:#315c91; background:#f5f8ff; }
.managed-product-actions .managed-pin-button[aria-pressed="true"] { color:#fff; border-color:#225dcc; background:#225dcc; }
.catalog-pinned-section { padding:24px; min-width:0; border:1px solid #bed4f5; border-radius:18px; background:linear-gradient(135deg,#edf4ff,#f8fbff); }
.catalog-pinned-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.catalog-pinned-heading>div { display:flex; align-items:center; gap:10px; }
.catalog-pinned-heading h2 { margin:0; font-size:19px; color:#234d85; }
.catalog-pinned-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#225dcc; color:white; }
.catalog-pinned-heading>span { font-size:12px; color:#557498; }
@media(max-width:600px) { .catalog-pinned-section { padding:14px; } }
.product-category-filters { margin:16px 0 22px; padding:16px; min-width:0; border:1px solid #dce6f3; border-radius:12px; background:#f6f9ff; }
.product-category-filters legend { padding:0 6px; font-size:13px; font-weight:600; color:#315479; }
.product-category-options { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.product-category-options label { display:flex; align-items:center; gap:7px; min-height:36px; padding:6px 10px; border:1px solid #d4e1f3; border-radius:8px; background:#fff; font-size:12px; color:#315479; cursor:pointer; }
.product-category-options label:has(input:checked) { background:#eaf2ff; border-color:#8eafe2; }
.product-category-options input { width:15px; height:15px; accent-color:#225dcc; cursor:pointer; }
.product-category-options label span { padding:2px 7px; border-radius:12px; background:#fff; font-size:12px; }
.product-category-options button { min-height:44px; padding:8px 12px; border:1px solid #d4e1f3; border-radius:9px; background:#fff; color:#315479; cursor:pointer; margin-left:auto; }
.product-category-filters p { margin:10px 0 0; color:#647b98; font-size:12px; }
.product-category-options :focus-visible { outline:3px solid #7bb0ff; outline-offset:3px; }
@media(max-width:600px) { .product-category-options button { margin-left:0; } .product-category-options label { min-height:44px; } }
.photo-size-hint { display:grid; gap:6px; margin:14px 0; padding:12px 14px; border-left:3px solid #8badde; border-radius:8px; background:#f2f7ff; color:#506782; font:12px/1.6 "Segoe UI",sans-serif; overflow-wrap:anywhere; }
.photo-size-hint strong { color:#315c91; font-size:12px; }
.photo-size-hint small { color:#62758d; font-size:11px; }