body{font-family:-apple-system,BlinkMacSystemFont,"Inter","Plus Jakarta Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}.app{max-width:1200px}button:disabled{opacity:.6;cursor:wait}.bottom-nav{width:min(100%,1200px)}input,textarea,select{font:inherit}select{max-width:100%}.loading,.empty{padding:65px 24px;text-align:center;color:#72828b}.empty h2{color:#244650;margin:15px 0}.empty p{max-width:480px;margin:12px auto 22px;font-size:15px}.empty-symbol{display:grid;place-items:center;background:#e1f4f5;color:#21a4b6;border-radius:50%;width:80px;height:80px;font-size:36px;margin:auto}.content h1,.page-title{font-size:30px;letter-spacing:-.7px;line-height:1.25;color:#233b44;margin:0}.page-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.page-header p{color:#79868e;font-size:14px;margin:7px 0 0}.page-header .row-actions{justify-content:flex-end}.row-actions>.primary,.row-actions>.secondary{margin-top:0}.subtle{color:#7d8991;font-size:14px}.banner-note{margin:16px 0 0;border-radius:9px;background:#e5f5f3;padding:10px 15px;color:#37766d;font-size:13px}.filters{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}.filters input,.filters select,.form-field input,.form-field textarea,.form-field select,.admin-search{border:1px solid #dce4e7;background:white;border-radius:8px;padding:11px 13px;min-height:43px}.filters input{flex:1;min-width:160px}.filters select{min-width:140px}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product-card{background:white;border:1px solid #e4e9ec;border-radius:14px;padding:16px;display:flex;flex-direction:column;min-width:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;position:relative}.product-card:hover{transform:translateY(-3px);border-color:#29bfbe;box-shadow:0 8px 24px rgba(22,156,174,0.12)}.product-card:focus-visible{outline:2px solid #0d9488;outline-offset:2px}.product-card .primary{position:relative;z-index:2;cursor:pointer}.product-image{height:145px;display:grid;place-items:center;background:#f1f8f8;border-radius:10px;margin-bottom:15px;overflow:hidden;border:0;width:100%;padding:8px}.product-image img{width:100%;height:100%;object-fit:contain}.product-placeholder{font-size:46px;color:#80babb}.product-card h3{font-size:16px;line-height:1.35;margin:5px 0 7px;word-break:break-word}.product-card p{font-size:13px;color:#78848d;margin:0 0 6px}.product-card .price{font-size:20px;font-weight:bold;color:#188b9d;margin:8px 0 0}.product-card .primary{margin-top:13px;width:100%}.product-info{flex:1}.pill{display:inline-block;padding:4px 9px;font-size:12px;line-height:1.4;border-radius:6px;background:#e9f2f5;color:#52727d;text-transform:capitalize}.pill.approved,.pill.completed,.pill.paid,.pill.reviewed,.pill.confirmed{background:#e3f4e9;color:#2b8054}.pill.pending,.pill.processing,.pill.partial{background:#fff2d8;color:#996d20}.pill.cancelled,.pill.suspended,.pill.unpaid,.pill.needs_information{background:#fbe8e9;color:#a05055}.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.brand-card{border:1px solid #e1e8ed;background:white;border-radius:12px;padding:25px;display:flex;flex-direction:column;align-items:center;gap:15px;font-weight:bold;min-height:150px}.brand-card img{height:70px;width:100%;object-fit:contain}.brand-initial{width:65px;height:65px;border-radius:18px;background:#e6f6f5;color:#259ea3;display:grid;place-items:center;font-size:29px}.panel{border:1px solid #e1e7ec;background:white;border-radius:14px;padding:24px;margin-bottom:20px}.panel h2{font-size:20px;margin-bottom:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-field{min-width:0}.form-field.full{grid-column:1/-1}.form-field label{display:block;font-size:14px;font-weight:600;margin:0 0 6px}.form-field input:not([type=checkbox]),.form-field textarea,.form-field select{width:100%}.form-field textarea{min-height:92px;resize:vertical}.form-field small{display:block;font-size:12px;color:#7b8790;margin-top:5px}.form-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}.form-error{padding:12px;background:#fff0f0;color:#a43e47;border-radius:7px;font-size:14px;margin-top:15px}.check-field{display:flex;gap:10px;align-items:center;font-size:14px;padding:10px 0}.check-field input{width:18px;height:18px}.table-wrap{overflow-x:auto;border:1px solid #e2e7ea;border-radius:12px;background:#fff}table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}th{font-weight:600;background:#f2f7f8;color:#647982;font-size:12px;white-space:nowrap}th,td{padding:14px 16px;border-bottom:1px solid #e9edef}tr:last-child td{border-bottom:0}td strong{display:block;font-size:14px}td small{display:block;font-size:12px;color:#7b8790;margin-top:4px}.table-button{color:#128ea2;font-size:14px;font-weight:bold;padding:6px}.quantity{width:85px;padding:8px;border:1px solid #dce5e9;border-radius:7px}.cart-layout{display:grid;grid-template-columns:1fr 310px;gap:22px}.cart-item{display:flex;gap:15px;align-items:center;padding:17px 0;border-bottom:1px solid #e7edef}.cart-item:first-child{padding-top:0}.cart-item:last-child{border:0}.cart-item img,.cart-item .product-placeholder{width:60px;height:60px;object-fit:contain;background:#f1f8f8;border-radius:7px;display:grid;place-items:center;font-size:26px}.cart-description{flex:1}.cart-description h3{margin:0;font-size:15px}.cart-description p{margin:4px 0;font-size:13px;color:#77828a}.cart-row-actions{display:flex;align-items:center;gap:8px;margin-top:8px}.total-line{display:flex;justify-content:space-between;gap:15px;margin:12px 0}.total-line.big{font-size:23px;font-weight:bold;padding-top:15px;border-top:1px solid #e4ebef}.summary-panel{height:fit-content}.summary-panel .primary{width:100%}.account-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:25px}.account-actions .secondary{margin-top:0}.order-card{display:flex;justify-content:space-between;align-items:center;gap:20px;background:white;border:1px solid #e3e9ed;border-radius:12px;padding:20px;margin-bottom:12px}.order-card h3{font-size:16px;margin:0 0 6px}.order-card p{font-size:13px;color:#75858d;margin:7px 0 0}.order-card .amount{font-size:19px;font-weight:bold;margin-right:15px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0;font-size:14px}.detail-grid p{margin:4px 0}.status-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.file-row{border-bottom:1px solid #e3ebed;padding:18px 0;display:flex;gap:12px;justify-content:space-between;align-items:center}.file-row p{font-size:13px;color:#768891;word-break:break-word}.file-row a{color:#168c9d}.settings-block{margin-bottom:25px}.settings-block h3{font-size:17px;border-bottom:1px solid #e5ebee;padding-bottom:10px;margin:10px 0 20px}.preview-image{max-width:160px;height:75px;object-fit:contain;border:1px solid #e0e8eb;background:#f4f8f9;border-radius:8px;display:block;margin:10px 0}.upload-field{display:flex;align-items:center;gap:12px}.upload-field input[type=file]{max-width:100%;font-size:13px}.image-path{font-size:12px!important;color:#7d8a92}.setup-banner{padding:22px;background:#dff6f3;border:1px solid #c9e9e4;border-radius:12px;margin-bottom:25px}.setup-banner h2{font-size:20px;margin-bottom:8px}.setup-banner p{font-size:14px;color:#557e7a;margin:6px 0}.setup-banner a{color:#0e8691;text-decoration:underline}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}.stat{padding:22px;background:white;border:1px solid #dfe8eb;border-radius:13px}.stat strong{display:block;font-size:32px;color:#258998;letter-spacing:-1px}.stat span{font-size:13px;color:#72858d}.admin-app{max-width:1400px;padding-bottom:35px}.admin-app #main{padding:30px}.admin-app #admin-header{display:flex;align-items:center;gap:15px;background:white;padding:20px 30px;border-bottom:1px solid #e4e9ed}.admin-app #admin-header .brand{color:#244e58;font-size:23px}.admin-app #admin-header .secondary{margin:0 0 0 auto}.admin-label{font-size:11px;font-weight:bold;letter-spacing:1.5px;background:#e0f3f4;color:#2095a5;padding:5px 10px;border-radius:5px}#admin-nav:not(.in-sidebar){display:flex;overflow-x:auto;gap:3px;padding:10px 20px;background:white;border-bottom:1px solid #e1e8ed}#admin-nav:not(.in-sidebar) a{padding:11px 16px;font-size:14px;white-space:nowrap;border-radius:7px;color:#6f818b}#admin-nav:not(.in-sidebar) a.active{background:#dff5f4;color:#148697;font-weight:bold}.admin-search{width:min(320px,100%)}.admin-page .page-header .primary{font-size:14px}.admin-app .content{padding:0}.audit-item{font-size:13px;display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #ebeff2;padding:11px 0}.audit-item span{color:#7e8c93}.actions-list{display:flex;gap:12px;flex-wrap:wrap}.actions-list a{padding:12px 16px;background:#fff;border:1px solid #dce7eb;border-radius:9px;font-size:14px;color:#26889b}.error-panel{margin:25px;padding:25px;border:1px solid #f1cdd1;background:#fff5f6;border-radius:12px}.error-panel h2{font-size:21px;color:#954651}.error-panel p{font-size:15px}.wide-dialog{width:min(760px,calc(100% - 28px))}#modal-body .form-field label{margin:0 0 6px}#modal-body .form-field textarea{min-height:80px}.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:17px;font-size:12px;color:#65818b;margin:22px 0}.footer-links button{font-size:12px}.print-only{display:none}.search-submit{color:#239daf}.detail-image{max-height:240px;width:100%;object-fit:contain;background:#f5fafa;border-radius:12px;margin-bottom:15px}.wholesale-tag{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#15899a;font-weight:bold}.install-callout{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#e9f5fb;border-radius:10px;padding:16px;font-size:14px;margin:22px 0}.no-wrap{white-space:nowrap}.contact-links{display:flex;flex-wrap:wrap;gap:12px}.contact-links a{color:#138997}.brand-mark img{width:36px;height:36px;object-fit:contain}.form-hint{font-size:13px;color:#647a84;margin:15px 0}.notice a{text-decoration:underline}#modal-body .primary{margin-top:0}#modal-body p{white-space:pre-line}.policy-copy{white-space:pre-wrap;line-height:1.8}#home-section .category-grid{grid-template-columns:repeat(4,1fr)}#home-section .category .circle{width:90px;height:90px}.category-grid.full-grid{grid-template-columns:repeat(6,1fr)}.detail-description{white-space:pre-wrap}.history-link{font-size:14px;color:#158fa3}.order-warning{padding:12px;background:#fff3d9;border-radius:8px;font-size:13px;margin:15px 0;color:#8b6424}@media(min-width:900px){#home-section .category-grid{grid-template-columns:repeat(8,1fr)}#home-section .category .circle{width:85px;height:85px}}@media(max-width:900px){.product-grid{grid-template-columns:repeat(3,1fr)}.brand-grid{grid-template-columns:repeat(3,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.cart-layout{grid-template-columns:1fr}.category-grid.full-grid{grid-template-columns:repeat(4,1fr)}.admin-app #main{padding:20px}.admin-app #admin-header{padding:16px 20px}}@media(max-width:600px){.product-grid{grid-template-columns:repeat(2,1fr);gap:10px}.product-card{padding:11px}.product-image{height:115px}.product-card h3{font-size:14px}.product-card .price{font-size:18px}.product-card p{font-size:12px}.product-card .primary{font-size:13px;padding:10px 6px}.brand-grid{grid-template-columns:repeat(2,1fr);gap:12px}.brand-card{padding:20px 14px;font-size:14px;min-height:140px}.page-header{align-items:start;flex-direction:column;gap:14px}.page-title,.content h1{font-size:27px}.page-header .row-actions{justify-content:flex-start}.form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}.panel{padding:18px}.filters{gap:8px}.filters select{min-width:0;flex:1;font-size:14px;padding:10px 8px}.filters input{flex-basis:100%}.stats-grid{gap:10px}.stat{padding:17px}.stat strong{font-size:27px}.admin-app #main{padding:18px 14px}.admin-app #admin-header{padding:15px 14px;gap:9px}.admin-app #admin-header .brand{font-size:18px}.admin-label{font-size:9px;padding:4px 6px;letter-spacing:.6px}.admin-app #admin-header .secondary{font-size:12px;padding:8px}.detail-grid{grid-template-columns:1fr;gap:10px}.order-card{padding:16px;gap:12px;align-items:start}.order-card .amount{font-size:16px;margin-right:0;display:block;text-align:right;margin-bottom:8px}.order-card h3{font-size:14px}.cart-item{gap:10px}.cart-item img,.cart-item .product-placeholder{width:48px;height:48px}.cart-description h3{font-size:14px}#home-section .category .circle{width:74px;height:74px}.category-grid.full-grid{gap:22px 8px}.category-grid.full-grid .circle{width:72px;height:72px}.file-row{flex-wrap:wrap}.wholesale{margin-top:24px}.audit-item{flex-direction:column;gap:3px}.brand{font-size:24px}.tools{gap:9px}.balance{font-size:13px;padding:3px 9px}.content{padding-bottom:25px}.install-callout{align-items:start;flex-direction:column}}@media print{body{background:white}.app{box-shadow:none;max-width:100%;padding:0}header,nav,#admin-header,#admin-nav,.no-print,.toast,.modal-heading button,button,footer,.footer-links{display:none!important}dialog[open]{position:absolute;inset:0;max-width:100%;width:100%;max-height:none;overflow:visible;border-radius:0;box-shadow:none;padding:20px}body:has(dialog[open])>.app{display:none}.print-only{display:block}.panel{border:0;padding:0}.table-wrap{overflow:visible}th,td{padding:9px}#modal-body .order-admin-form{display:none}a{color:black}.content{padding:0}.page-header{display:block}}
.banner-carousel{padding-bottom:76px;transition:background-color .3s;background:#d6f4f7}.banner-carousel[data-slide-index="1"]{background:#d7f1ea}.banner-carousel[data-slide-index="2"]{background:#e2eef9}.banner-slide{width:100%}.banner-slide .slide-copy{min-height:190px;display:flex;flex-direction:column;justify-content:center}.banner-slide .hero-link{align-self:flex-start}.banner-controls{position:absolute;z-index:2;bottom:13px;left:20px;right:20px;display:flex;justify-content:center;align-items:center;gap:7px}.banner-controls>button{min-width:36px;min-height:36px;border-radius:18px;background:#ffffffd9;color:#236571;font-size:23px;line-height:1}.banner-dots{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0}.banner-dots button{height:32px;width:25px;padding:7px;display:grid;place-items:center}.banner-dots span{display:block;width:8px;height:8px;border-radius:50%;background:#8bb7bd}.banner-dots button.selected span{background:#138ca8;box-shadow:0 0 0 3px #ffffffb0}.banner-editor{padding:20px;margin-top:18px;border:1px solid #dce8ec;background:#f8fcfc;border-radius:12px}.banner-editor-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.banner-editor-heading h4{margin:0;font-size:17px}.banner-editor-heading button:disabled{cursor:not-allowed;opacity:.4}.banner-editor .form-field textarea{min-height:88px}@media(max-width:600px){.banner-carousel{padding-bottom:68px}.banner-slide .slide-copy{min-height:185px}.banner-controls{left:10px;right:10px;gap:2px}.banner-controls>button{min-width:30px;min-height:32px}.banner-dots button{width:21px}.banner-dots span{width:7px;height:7px}.banner-editor{padding:15px}}@media(prefers-reduced-motion:reduce){.banner-carousel{transition:none}}
.brand-mark.has-logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:38px;height:38px;border-radius:11px;overflow:hidden;background:#ffffff;box-shadow:0 3px 10px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.08);border:1.5px solid rgba(255,255,255,0.7);padding:2px;line-height:1}.brand-mark.has-logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px}.home-mark.has-logo{width:68px;height:68px;border:5px solid #dff5f8;outline:4px solid #ffffff;border-radius:50%;overflow:hidden;padding:0;display:grid;place-items:center;background:linear-gradient(135deg,#29bfbe,#0b8fd1);box-shadow:0 4px 14px rgba(22,156,174,0.3);margin-top:-24px;transition:transform .2s ease,box-shadow .2s ease}.home-mark.has-logo:hover,.home-mark.has-logo:active{transform:scale(1.05);box-shadow:0 6px 18px rgba(22,156,174,0.4)}.home-mark.has-logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}@media(max-width:600px){.brand-mark.has-logo{width:34px;height:34px;border-radius:9px;padding:1.5px}.brand-mark.has-logo img{border-radius:7px}.admin-app #admin-header .brand-mark.has-logo{width:32px;height:32px;border-radius:8px}.admin-app #admin-header .brand-mark.has-logo img{border-radius:6px}.home-mark.has-logo{width:62px;height:62px;border-width:4px;outline-width:3px;margin-top:-20px}}
.balance{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.18);border:1.5px solid rgba(255,255,255,0.45);border-radius:30px;padding:5px 13px;color:#ffffff;font-size:14.5px;font-weight:600;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,0.06);cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease}.balance:hover{background:rgba(255,255,255,0.28);border-color:rgba(255,255,255,0.75);transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,0.1)}.balance:active{transform:scale(0.97)}.balance .cart-pill-icon{width:16px;height:16px;stroke:#ffffff;stroke-width:2.2;display:inline-block;vertical-align:middle;flex-shrink:0}.balance .cart-pill-count{font-weight:600;letter-spacing:-0.2px}.balance .cart-pill-sep{opacity:0.65;font-weight:bold;margin:0 1px}.balance .cart-pill-total{font-weight:700;letter-spacing:-0.2px}@media(max-width:600px){.balance{font-size:13px;padding:3px 9px;gap:5px}.balance .cart-pill-icon{width:14px;height:14px}}@media(max-width:390px){.balance .cart-pill-unit{display:none}}

/* Medicine Master and Wholesale styling */
.pill.active{background:#e3f4e9;color:#2b8054}
.pill.inactive{background:#fff2d8;color:#996d20}
.pill.archived{background:#f0f2f5;color:#7a869a}
.pill.rx{background:#fee2e2;color:#991b1b;font-weight:700}
.pill.otc{background:#ecfdf5;color:#065f46}
.pill.in_stock{background:#e3f4e9;color:#2b8054}
.pill.low_stock{background:#fff2d8;color:#996d20}
.pill.out_of_stock{background:#fee2e2;color:#991b1b}
.pill.pre_order{background:#e0f2fe;color:#0369a1}
.pill.discontinued{background:#f3f4f6;color:#6b7280}
.pill.public{background:#dbeafe;color:#1e40af}
.pill.private,.pill.hidden{background:#f3f4f6;color:#4b5563}

.bulk-bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#244e58;color:#ffffff;padding:12px 20px;border-radius:10px;margin-bottom:16px;box-shadow:0 4px 15px rgba(0,0,0,0.15)}
.bulk-bar-actions{display:flex;gap:8px;flex-wrap:wrap}
.bulk-bar button{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:#fff;border-radius:6px;padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer}
.bulk-bar button:hover{background:rgba(255,255,255,0.25)}
.bulk-bar button.danger{background:#dc2626;border-color:#b91c1c}

.pagination-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:12px 0}
.pagination-bar button{background:#ffffff;border:1px solid #dce4e7;border-radius:8px;padding:8px 16px;font-weight:600;color:#244e58}
.pagination-bar button:disabled{opacity:0.4;cursor:not-allowed}

.source-badge{display:inline-flex;align-items:center;gap:6px;background:#f0f9ff;border:1px solid #bae6fd;color:#0369a1;padding:4px 10px;border-radius:6px;font-size:12px;margin-bottom:12px}
.detail-grid.three-col{grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.detail-grid.three-col{grid-template-columns:1fr}}

.preview-table{max-height:350px;overflow-y:auto;border:1px solid #e2e8f0;border-radius:8px;margin:15px 0}
.diff-tag{display:inline-block;padding:2px 6px;border-radius:4px;font-size:11px;background:#fef3c7;color:#92400e}

.admin-subnav{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:6px 10px;margin-bottom:20px;flex-wrap:wrap}
.subnav-links{display:flex;gap:4px;align-items:center;overflow-x:auto;padding:2px}
.subnav-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-size:13.5px;font-weight:600;color:#475569;border-radius:7px;text-decoration:none;white-space:nowrap;transition:all .15s ease}
.subnav-tab:hover{background:#e2e8f0;color:#1e293b}
.subnav-tab.active{background:#244e58;color:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.subnav-action{font-size:13px;padding:7px 14px;margin:0;white-space:nowrap}
@media(max-width:600px){.admin-subnav{flex-direction:column;align-items:stretch;padding:8px}.subnav-links{width:100%;padding-bottom:4px}.subnav-action{width:100%;text-align:center;margin-top:4px}}

/* Product Details Modal with Stepper and Specs */
.product-detail-header{margin-bottom:14px}
.product-price-badge{display:inline-flex;align-items:baseline;gap:6px;background:#e1f4f5;color:#128ea2;padding:6px 14px;border-radius:8px;font-weight:bold;font-size:22px;margin-top:6px}
.product-price-badge .price-unit{font-size:13px;font-weight:normal;color:#475569}
.product-specs-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:12px 16px;margin-bottom:16px;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.spec-row{display:flex;justify-content:space-between;gap:12px;color:#64748b}
.spec-row strong{color:#1e293b}
.stepper-wrap{margin:18px 0 14px}
.quantity-stepper{display:flex;align-items:center;border:1.5px solid #cbd5e1;border-radius:10px;overflow:hidden;width:fit-content;margin-top:8px;background:#fff}
.stepper-btn{width:44px;height:44px;background:#f1f5f9;border:none;font-size:20px;font-weight:bold;color:#1e293b;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.stepper-btn:hover{background:#e2e8f0}
.quantity-stepper input{width:80px;height:44px;border:none;border-left:1px solid #e2e8f0;border-right:1px solid #e2e8f0;text-align:center;font-size:17px;font-weight:bold;color:#0f172a;-moz-appearance:textfield}
.quantity-stepper input::-webkit-outer-spin-button,.quantity-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper-subtotal{margin-top:10px;font-size:14px;color:#64748b}
.stepper-subtotal strong{color:#0f766e;font-size:16px}

/* Admin Product Row Thumbnails */
.admin-prod-cell{display:flex;align-items:center;gap:12px;min-width:220px}
.admin-prod-thumb{width:46px;height:46px;flex-shrink:0;border-radius:8px;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:2px;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.admin-prod-thumb img{width:100%;height:100%;object-fit:contain}
.admin-prod-meta strong{display:block;font-size:14px;color:#1e293b;line-height:1.3}
.admin-prod-meta small{display:block;font-size:12px;color:#64748b;margin-top:3px}

/* Admin Header Auth & User Controls */
.admin-user-pill{display:inline-flex;align-items:center;gap:6px;background:#f1f8f8;color:#1b444e;padding:6px 12px;border-radius:20px;font-size:12.5px;font-weight:600;border:1px solid #cce2e5;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-user-icon{font-size:14px}
.admin-user-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-auth-btn{margin:0!important;font-size:13px!important;padding:7px 13px!important;white-space:nowrap;display:inline-flex;align-items:center;line-height:1.2}
@media(max-width:860px){
  .admin-user-pill .admin-user-email{display:none}
  .admin-user-pill{padding:6px 9px}
}
@media(max-width:600px){
  #admin-header-tools{gap:6px}
  .admin-auth-btn{padding:6px 9px!important;font-size:12px!important}
}

.quick-icon.teal{background:#e6f7f7;color:#137e8c}
.quick-icon.teal.solid{background:#137e8c;color:#fff}
.message-badge{display:inline-block;padding:3px 8px;border-radius:12px;font-size:12px;font-weight:600}
.message-unread{background:#fee2e2;color:#991b1b}
.message-read{background:#f1f5f9;color:#475569}
.message-replied{background:#dcfce7;color:#166534}

/* Responsive Desktop (PC) & Mobile Visibility */
.desktop-only{display:none!important}

@media(max-width:899px){
  #customer-header .top{flex-wrap:wrap;gap:12px;margin-bottom:12px}
  #customer-header .brand{order:1}
  #customer-header .tools{order:2}
  #customer-header .searchbox{order:3;width:100%;flex:1 1 100%;margin-top:4px}
}

@media(min-width:900px){
  .mobile-only{display:none!important}
  .desktop-only{display:block!important}
  .desktop-only.desktop-utility-bar{display:flex!important}
  .desktop-only.desktop-nav{display:block!important}
  .desktop-only.desktop-inquiry-btn{display:inline-flex!important}
  .desktop-only.desktop-account-btn{display:inline-flex!important}
  .desktop-only.header-logout-btn:not([hidden]){display:inline-flex!important}

  /* Expand Container for PC / Desktop */
  .app{max-width:1400px!important;padding-bottom:40px!important;box-shadow:0 4px 30px rgba(0,0,0,0.05)!important}

  /* Hide Mobile Bottom Nav completely on PC */
  .bottom-nav,#customer-nav{display:none!important}

  /* Top Utility Bar */
  .desktop-utility-bar{background:rgba(15,66,76,0.45);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,0.16);margin:-24px -32px 18px -32px;padding:8px 32px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#e0f6f8}
  .utility-left{display:flex;align-items:center;gap:10px}
  .utility-badge{background:rgba(255,255,255,0.22);color:#ffffff;font-weight:700;font-size:11px;letter-spacing:0.6px;padding:3px 8px;border-radius:4px;white-space:nowrap}
  .utility-text{opacity:0.92;font-size:12.5px}
  .utility-right{display:flex;align-items:center;gap:16px;white-space:nowrap}
  .utility-item{color:#e0f6f8;text-decoration:none;font-size:13px;transition:color 0.15s}
  .utility-item.phone-link:hover,.utility-item.whatsapp-link:hover{color:#ffffff;text-decoration:underline}

  /* Desktop Header Structure */
  #customer-header{padding:24px 32px 0 32px!important}
  #customer-header .top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}
  #customer-header .brand{flex-shrink:0;font-size:28px}
  #customer-header .searchbox{flex:1;max-width:650px;margin:0 auto;border:2px solid rgba(255,255,255,0.85);box-shadow:0 4px 18px rgba(0,0,0,0.08)}
  #customer-header .tools{display:flex;align-items:center;gap:12px;flex-shrink:0}

  .desktop-inquiry-btn{align-items:center;gap:6px;background:rgba(255,255,255,0.18);border:1.5px solid rgba(255,255,255,0.45);border-radius:30px;padding:6px 14px;color:#ffffff;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.15s,transform 0.15s}
  .desktop-inquiry-btn:hover{background:rgba(255,255,255,0.28);transform:translateY(-1px)}
  .desktop-inquiry-btn svg{width:17px;height:17px}

  .desktop-account-btn{align-items:center;gap:6px;background:rgba(255,255,255,0.18);border:1.5px solid rgba(255,255,255,0.45);border-radius:30px;padding:6px 14px;color:#ffffff;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.15s,transform 0.15s}
  .desktop-account-btn:hover{background:rgba(255,255,255,0.28);transform:translateY(-1px)}
  .desktop-account-btn svg{width:17px;height:17px}

  .header-logout-btn{display:none;align-items:center;gap:6px;background:rgba(255,255,255,0.18);border:1.5px solid rgba(255,255,255,0.45);border-radius:30px;padding:6px 14px;color:#ffffff;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.15s,transform 0.15s}
  .header-logout-btn:hover{background:rgba(220,38,38,0.35);border-color:rgba(254,202,202,0.8);transform:translateY(-1px)}
  .header-logout-btn svg{width:16px;height:16px;stroke:#ffffff}
  .header-logout-btn[hidden]{display:none!important}

  .mobile-logout-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.2);border:1.5px solid rgba(255,255,255,0.5);color:#ffffff;cursor:pointer;padding:0;transition:all 0.15s ease}
  .mobile-logout-btn:hover,.mobile-logout-btn:active{background:rgba(220,38,38,0.45);border-color:#fca5a5}
  .mobile-logout-btn svg{width:18px;height:18px;stroke:#ffffff}
  .mobile-logout-btn[hidden]{display:none!important}

  .utility-session-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);padding:3px 10px;border-radius:20px;font-size:12.5px;color:#ffffff}
  .utility-session-pill[hidden]{display:none!important}
  #utility-user-name{font-weight:600;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .utility-logout-link{background:rgba(220,38,38,0.3);border:1px solid rgba(254,202,202,0.5);color:#ffffff;padding:2px 8px;border-radius:12px;font-size:11.5px;font-weight:700;cursor:pointer;transition:all 0.15s ease}
  .utility-logout-link:hover{background:#dc2626;border-color:#dc2626}

  .logout-header-btn{padding:8px 16px!important;border-radius:8px!important;font-size:13.5px!important;cursor:pointer!important;transition:all 0.15s ease}
  .logout-header-btn:hover{background:#fee2e2!important;border-color:#ef4444!important}
  .account-logout-action-btn{cursor:pointer!important;transition:all 0.15s ease}
  .account-logout-action-btn:hover{background:#fecaca!important;border-color:#dc2626!important}

  /* Sleek, Professional Desktop Sub-Navigation Bar */
  .desktop-nav{background:#ffffff!important;border-bottom:1px solid #e2e8f0!important;border-top:1px solid rgba(255,255,255,0.3)!important;margin:18px -32px 0 -32px!important;padding:0 32px!important;box-shadow:0 2px 6px rgba(0,0,0,0.04)!important;border-radius:0!important}
  .desktop-nav-inner{display:flex!important;align-items:center!important;gap:4px!important;flex-wrap:nowrap!important;max-width:1400px}
  .desktop-nav-link{display:inline-flex!important;align-items:center!important;padding:14px 20px!important;color:#475569!important;font-size:14px!important;font-weight:600!important;letter-spacing:-0.1px!important;border:0!important;border-radius:0!important;background:transparent!important;cursor:pointer!important;position:relative!important;border-bottom:3px solid transparent!important;margin-bottom:-1px!important;transition:color 0.15s ease,border-color 0.15s ease,background 0.15s ease!important}
  .desktop-nav-link:hover{color:#0d9488!important;background:#f8fafc!important}
  .desktop-nav-link.active{color:#0d9488!important;font-weight:700!important;border-bottom:3px solid #0d9488!important;background:transparent!important;box-shadow:none!important}

  /* Grid Layouts for PC */
  .product-grid{grid-template-columns:repeat(4,1fr)!important;gap:20px!important}
  .quick-options{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:16px!important;margin:24px 0 35px!important;overflow-x:visible!important}
  .cart-layout{grid-template-columns:1fr 380px!important;gap:28px!important;align-items:start!important}
  .summary-panel{position:sticky!important;top:24px!important}
}


@media(min-width:1200px){
  .product-grid{grid-template-columns:repeat(5,1fr)!important}
}

/* Floating Direct Chat & Wholesale Inquiry System */
.floating-chat-container{position:fixed;z-index:1000;bottom:28px;right:28px;font-family:inherit}
.floating-chat-launcher{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#169cae,#0e7d8d);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(14,125,141,0.45);border:2.5px solid rgba(255,255,255,0.75);cursor:pointer;position:relative;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,background .2s ease}
.floating-chat-launcher:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 12px 32px rgba(14,125,141,.55)}
.floating-chat-launcher:active{transform:scale(.95)}
.floating-chat-launcher svg{width:28px;height:28px;stroke:#fff;stroke-width:2.2}
.chat-online-badge{position:absolute;top:3px;right:3px;width:13px;height:13px;border-radius:50%;background:#22c55e;border:2px solid #fff;box-shadow:0 0 0 2px rgba(34,197,94,.25);animation:pulseGreen 2s infinite}
@keyframes pulseGreen{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* Floating Chat Window */
.floating-chat-window{position:fixed;bottom:100px;right:28px;width:390px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 120px);background:#fff;border-radius:18px;box-shadow:0 16px 50px rgba(15,23,42,.22),0 2px 10px rgba(15,23,42,.08);border:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden;z-index:1001;animation:chatSlideIn .25s cubic-bezier(.16,1,.3,1)}
@keyframes chatSlideIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

.chat-header{background:linear-gradient(135deg,#169cae,#0e7d8d);color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.chat-header-info{display:flex;align-items:center;gap:12px}
.chat-header-avatar{width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.12);overflow:hidden;flex-shrink:0;padding:2px}
.chat-header-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.chat-header-info h3{margin:0;font-size:15.5px;font-weight:700;color:#fff;line-height:1.25}
.chat-header-info p{margin:2px 0 0;font-size:12px;color:#d1f4f8;display:flex;align-items:center;gap:6px}
.chat-status-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block}
.chat-header-close{background:rgba(255,255,255,.18);border:0;color:#fff;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;transition:background .15s}
.chat-header-close:hover{background:rgba(255,255,255,.32)}
.chat-header-close svg{width:18px;height:18px;stroke:#fff}

/* Chat Navigation Tabs */
.chat-nav-tabs{display:flex;background:#f1f5f9;border-bottom:1px solid #e2e8f0;padding:4px;gap:4px}
.chat-tab-btn{flex:1;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;color:#64748b;border:0;background:transparent;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;gap:6px}
.chat-tab-btn:hover{color:#0f766e}
.chat-tab-btn.active{background:#fff;color:#0f766e;box-shadow:0 1px 3px rgba(0,0,0,.08);font-weight:700}

/* Chat Pane & Message Stream */
.chat-pane{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.chat-pane[hidden]{display:none!important}
.chat-messages-stream{flex:1;overflow-y:auto;padding:16px;background:#f8fafc;display:flex;flex-direction:column;gap:12px}
#chat-thread-list{display:flex;flex-direction:column;gap:8px;width:100%}
.chat-msg{display:flex;flex-direction:column;max-width:80%;min-width:0}
.chat-msg.bot{align-self:flex-start;margin-right:auto;align-items:flex-start}
.chat-msg.user{align-self:flex-end;margin-left:auto;align-items:flex-end}
.chat-bubble{padding:9px 13px;font-size:13.5px;line-height:1.45;word-break:break-word;width:fit-content;max-width:100%;box-sizing:border-box}
.chat-bubble p{margin:0;padding:0;line-height:1.45}
.chat-bubble p + p{margin-top:6px}
.chat-msg-text{margin:0;padding:0;line-height:1.45}
.chat-msg.bot .chat-bubble{background:#fff;color:#1e293b;border-radius:14px 14px 14px 4px;border:1px solid #e2e8f0;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.chat-msg.bot .chat-bubble strong{display:block;font-size:12px;color:#0f766e;margin-bottom:4px}
.chat-msg.user .chat-bubble{background:linear-gradient(135deg,#0d9488,#0f766e);color:#fff;border-radius:14px 14px 4px 14px;box-shadow:0 2px 6px rgba(15,118,110,.2)}
.chat-msg-time{display:block;font-size:10.5px;opacity:.75;margin-top:4px;text-align:right;white-space:nowrap}
.chat-msg.user .chat-msg-time{color:rgba(255,255,255,.82)}
.chat-msg.bot .chat-msg-time{color:#64748b}
.chat-admin-reply{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.3);font-size:13px}
.chat-msg.bot .chat-admin-reply{border-top-color:#cbd5e1}

.chat-quick-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chat-chip{background:#fff;border:1px solid #cbd5e1;color:#0f766e;padding:5px 10px;border-radius:16px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.chat-chip:hover{background:#f0fdfa;border-color:#0f766e;transform:translateY(-1px)}
.chat-chip-wa{color:#16a34a!important;border-color:#86efac!important;background:#f0fdf4!important}
.chat-chip-call{color:#0284c7!important;border-color:#bae6fd!important;background:#f0f9ff!important}

/* Chat Input Bar */
.chat-input-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border-top:1px solid #e2e8f0}
.chat-input-bar input{flex:1;border:1.5px solid #cbd5e1;border-radius:24px;padding:10px 16px;font-size:13.5px;outline:none;background:#f8fafc;transition:border-color .15s,background .15s}
.chat-input-bar input:focus{border-color:#0f766e;background:#fff}
.chat-input-bar button{width:40px;height:40px;border-radius:50%;background:#0f766e;border:0;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s;flex-shrink:0}
.chat-input-bar button:hover{background:#0d6d66;transform:scale(1.05)}
.chat-input-bar button svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2}

/* In-Chat Wholesale Inquiry Form */
.chat-inquiry-body{padding:16px;overflow-y:auto;flex:1;background:#fff}
.chat-inquiry-intro{font-size:13px;color:#64748b;margin:0 0 12px;line-height:1.4}
.chat-inquiry-body .form-field{margin-bottom:10px}
.chat-inquiry-body label{font-size:12px;font-weight:700;color:#334155;margin-bottom:4px;display:block}
.chat-inquiry-body input,.chat-inquiry-body select,.chat-inquiry-body textarea{width:100%;padding:8px 10px;border:1px solid #cbd5e1;border-radius:7px;font-size:13px;background:#fafcfd}
.chat-inquiry-body textarea{min-height:65px;resize:vertical}

.chat-inquiry-card{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:8px 12px;margin:2px 0}
.chat-msg.bot .chat-inquiry-card{background:#f0fdfa;border-color:#ccfbf1}
.chat-inquiry-tag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.15);margin-bottom:4px}
.chat-msg.bot .chat-inquiry-tag{background:#ccfbf1;color:#0f766e}
.chat-inquiry-text{margin:4px 0;font-size:13px}
.chat-inquiry-meta{font-size:11px;opacity:.8}
.admin-reply-box{margin-top:6px;padding:8px 12px;background:#f0fdfa;border-left:3.5px solid #0d9488;border-radius:4px;font-size:13px}

/* Admin Live Inquiries & Chat Console (Storefront-Styled) */
.nav-unread-badge{display:inline-block;background:#e11d48;color:#fff;font-size:11px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:6px;vertical-align:middle;line-height:14px}
.admin-chat-layout{display:flex;background:#fff;border-radius:14px;border:1px solid #e2e8f0;box-shadow:0 4px 20px rgba(15,23,42,.06);overflow:hidden;height:calc(100vh - 200px);min-height:440px;margin-top:0}
.admin-chat-sidebar{width:360px;min-width:320px;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;background:#fafcfd;height:100%;min-height:0;overflow:hidden}
.admin-chat-sidebar-header{padding:12px 16px;border-bottom:1px solid #e2e8f0;background:#fff;flex-shrink:0}
.admin-chat-search{width:100%;padding:8px 14px;border:1px solid #cbd5e1;border-radius:20px;font-size:13px;outline:none;background:#f8fafc;transition:border-color .15s}
.admin-chat-search:focus{border-color:#0f766e;background:#fff}
.admin-chat-filters{display:flex;gap:6px;margin-top:8px}
.admin-filter-chip{padding:3px 9px;border-radius:14px;font-size:11.5px;font-weight:600;border:1px solid #cbd5e1;background:#fff;color:#64748b;cursor:pointer;transition:all .15s}
.admin-filter-chip:hover{color:#0f766e;border-color:#0f766e}
.admin-filter-chip.active{background:#0f766e;color:#fff;border-color:#0f766e}
.admin-chat-threads{flex:1;min-height:0;overflow-y:auto;list-style:none;margin:0;padding:0}
.admin-thread-item{padding:12px 16px;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background .15s;position:relative}
.admin-thread-item:hover{background:#f0fdfa}
.admin-thread-item.active{background:#ecfdf5;border-left:4px solid #0d9488}
.admin-thread-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.admin-thread-name{font-weight:700;font-size:13.5px;color:#1e293b}
.admin-thread-time{font-size:11px;color:#94a3b8}
.admin-thread-subject{font-size:11.5px;font-weight:600;color:#0d9488;margin-bottom:3px;display:flex;align-items:center;gap:4px}
.admin-thread-snippet{font-size:12px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.admin-thread-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:5px}
.admin-thread-phone{font-size:11px;color:#475569}

.admin-chat-main{flex:1;display:flex;flex-direction:column;background:#fff;height:100%;min-height:0;overflow:hidden}
.admin-chat-main-header{padding:10px 18px;border-bottom:1px solid #e2e8f0;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-shrink:0}
.admin-chat-customer-info{display:flex;align-items:center;gap:10px}
.admin-chat-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#0d9488,#14b8a6);color:#fff;font-weight:bold;font-size:16px;display:grid;place-items:center}
.admin-chat-customer-meta h3{margin:0;font-size:15px;color:#0f172a;line-height:1.2}
.admin-chat-customer-meta p{margin:2px 0 0;font-size:12px;color:#64748b;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-chat-header-actions{display:flex;align-items:center;gap:6px}

.admin-chat-body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;background:#f8fafc;display:flex;flex-direction:column;gap:12px}
.admin-chat-composer-wrap{background:#fff;border-top:1px solid #e2e8f0;padding:10px 16px;flex-shrink:0}
.admin-canned-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.admin-canned-chip{background:#f1f5f9;border:1px solid #e2e8f0;color:#334155;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:14px;cursor:pointer;transition:all .15s}
.admin-canned-chip:hover{background:#e0f2fe;border-color:#38bdf8;color:#0284c7}
.admin-composer-form{display:flex;gap:8px;align-items:flex-end}
.admin-composer-input{flex:1;border:1.5px solid #cbd5e1;border-radius:10px;padding:8px 12px;font-size:13px;outline:none;font-family:inherit;min-height:42px;height:42px;max-height:80px;resize:none;transition:border-color .15s}
.admin-composer-input:focus{border-color:#0d9488}
.admin-composer-submit{height:42px;padding:0 18px;background:#0d9488;color:#fff;border:0;border-radius:9px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background .15s;flex-shrink:0}
.admin-composer-submit:hover{background:#0b766c}

@media(min-width:900px){
  .admin-app.chat-view-active, .admin-app:has(.admin-chat-layout){padding-bottom:0!important}
  .admin-app.chat-view-active #main, .admin-app:has(.admin-chat-layout) #main{padding:12px 28px 10px!important}
  .page-header:has(+ .admin-chat-layout){margin-bottom:8px}
  body:has(.admin-chat-layout), body.chat-desk-open{overflow-y:hidden}
}

@media(max-width:899px){
  .admin-chat-layout{flex-direction:column;height:auto;max-height:none}
  .admin-chat-sidebar{width:100%;height:280px;border-right:0;border-bottom:1px solid #e2e8f0}
  .admin-chat-main{height:480px}
}

/* Mobile Responsiveness for Floating Chat */
@media(max-width:899px){
  .floating-chat-container{bottom:96px;right:18px}
  .floating-chat-launcher{width:54px;height:54px}
  .floating-chat-launcher svg{width:24px;height:24px}
  .floating-chat-window{right:12px;left:12px;bottom:96px;width:auto;height:500px;max-height:calc(100vh - 110px)}
}

/* ==========================================================================
   Responsive Dual-Resolution Banners (Clean, Zero-Superimposed Text Overlay)
   Desktop: 1200 x 400 px (3:1 ratio)
   Mobile:  750 x 450 px  (5:3 ratio)
   ========================================================================== */
.hero.banner-carousel {
  padding: 0 !important;
  min-height: unset !important;
  background: transparent !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px;
  margin: 18px 0;
  box-shadow: 0 4px 20px rgba(13, 148, 136, 0.08);
}
.banner-slide {
  width: 100%;
  display: block;
  line-height: 0;
}
.banner-slide[hidden] {
  display: none !important;
}
.banner-slide-link {
  display: block;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
  line-height: 0;
}
.banner-picture {
  display: block;
  width: 100%;
  line-height: 0;
}
.banner-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1200 / 400;
  object-fit: cover;
  border-radius: 16px;
}
.banner-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.banner-controls > button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  pointer-events: auto;
  padding: 0;
}
.banner-controls > [data-banner-prev] {
  left: 12px;
}
.banner-controls > [data-banner-next] {
  right: 12px;
}
.banner-controls > button:hover {
  background: rgba(15, 23, 42, 0.75);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-50%) scale(1.08);
}
.banner-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: 14px;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.banner-dots button {
  height: 14px;
  width: auto;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.banner-dots span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-dots button.selected span {
  width: 22px;
  height: 7px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
  .hero.banner-carousel {
    border-radius: 12px;
    margin: 12px 0;
  }
  .banner-img {
    aspect-ratio: 750 / 450;
    border-radius: 12px;
  }
  .banner-controls > button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: 16px;
  }
  .banner-controls > [data-banner-prev] {
    left: 6px;
  }
  .banner-controls > [data-banner-next] {
    right: 6px;
  }
  .banner-dots {
    bottom: 8px;
    padding: 3px 8px;
    gap: 4px;
  }
  .banner-dots span {
    width: 5px;
    height: 5px;
  }
  .banner-dots button.selected span {
    width: 16px;
    height: 5px;
  }
}

/* ==========================================================================
   Unified Medical Theme for Category Badges (Professional Pharmaceutical UI)
   ========================================================================== */
.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  gap: 8px;
  color: #1e293b;
  font-weight: 600;
  transition: transform 0.2s ease;
}
/* 20 Essential Medicine Wholesale Categories */
.category-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-top: 14px !important;
}

#home-section .category-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  margin-top: 14px !important;
}

.category-grid.full-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
  margin-top: 14px !important;
}

.category.category-card,
.category {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 12px 6px 10px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease !important;
  text-decoration: none !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.category.category-card:hover,
.category:hover {
  transform: translateY(-4px) !important;
  border-color: #14b8a6 !important;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.12) !important;
}

.category .circle,
.cat-icon-wrap {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.category:hover .circle,
.category:hover .cat-icon-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.08) !important;
}

.cat-illus-svg {
  width: 66px !important;
  height: 66px !important;
  display: block !important;
  fill: initial !important;
  stroke: initial !important;
  stroke-width: initial !important;
  transition: transform 0.2s ease !important;
}

.category-label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-top: 6px !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 120px !important;
  min-height: 28px !important;
  text-align: center !important;
}

.category:hover .category-label {
  color: #0f766e !important;
}

.category-see-all-wrap {
  margin-top: 12px;
}

.category-see-all-btn {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #ccfbf1;
  background: #f0fdfa;
  color: #0f766e;
  font-weight: 700;
  font-size: 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(13, 148, 136, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.category-see-all-btn:hover,
.category-see-all-btn:active {
  background: #ccfbf1;
  border-color: #99f6e4;
  transform: translateY(-1px);
}

@media (max-width: 1024px) {
  .category-grid,
  #home-section .category-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }
  .category-grid.full-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }
}

/* Mobile View: Home 4 Categories in One Line Left-to-Right */
@media (max-width: 768px) {
  #home-section .category-grid,
  .category-grid:not(.full-grid) {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px 6px !important;
    margin-top: 12px !important;
  }
  .category.category-card,
  .category {
    padding: 7px 3px 5px !important;
    border-radius: 12px !important;
    min-height: 86px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  }
  .category .circle,
  .cat-icon-wrap {
    width: 52px !important;
    height: 52px !important;
  }
  .cat-illus-svg {
    width: 48px !important;
    height: 48px !important;
  }
  .category-label {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    margin-top: 3px !important;
    min-height: 22px !important;
    max-width: 100% !important;
    letter-spacing: -0.15px !important;
  }
}

@media (max-width: 360px) {
  #home-section .category-grid,
  .category-grid:not(.full-grid) {
    gap: 6px 4px !important;
  }
  .category.category-card,
  .category {
    padding: 6px 2px 4px !important;
    min-height: 80px !important;
  }
  .category .circle,
  .cat-icon-wrap {
    width: 46px !important;
    height: 46px !important;
  }
  .cat-illus-svg {
    width: 42px !important;
    height: 42px !important;
  }
  .category-label {
    font-size: 8.5px !important;
    min-height: 20px !important;
  }
}

/* ==========================================================================
   Storefront Authentication & Drug License Verification Styles
   ========================================================================== */

.auth-modal-wrapper {
  padding: 4px 0;
}

.auth-modal-tabs {
  display: flex;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
  margin-bottom: 20px;
}

.auth-tab-btn {
  flex: 1;
  padding: 10px 16px;
  font-size: 14.5px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #64748b;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.auth-tab-btn.active {
  background: #ffffff;
  color: #0f766e;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.auth-pane-desc {
  margin: 0 0 18px 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
}

.auth-reg-notice {
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  border-left: 4px solid #0d9488;
  padding: 12px 14px;
  border-radius: 8px;
  color: #134e4a;
  font-size: 13.5px;
  line-height: 1.45;
  margin-bottom: 18px;
}

.bd-phone-input-wrap {
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bd-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-right: none;
  border-radius: 8px 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  user-select: none;
}

.bd-phone-input-wrap input {
  flex: 1;
  border-radius: 0 8px 8px 0 !important;
  border: 1px solid #cbd5e1 !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  letter-spacing: 0.5px;
}

.bd-phone-input-wrap input:focus {
  border-color: #0d9488 !important;
  outline: none;
}

.form-hint-sm {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 5px;
}

/* License Evidence Document Dropzone */
.drug-license-upload-field {
  background: #f8fafc;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.license-upload-box {
  border: 2px dashed #94a3b8;
  border-radius: 10px;
  background: #ffffff;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.license-upload-box:hover {
  border-color: #0d9488;
  background: #f0fdfa;
}

.license-upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.license-upload-content .upload-icon {
  font-size: 32px;
  line-height: 1;
}

.license-upload-content .upload-text strong {
  display: block;
  font-size: 14.5px;
  color: #1e293b;
  margin-bottom: 3px;
}

.license-upload-content .upload-text span {
  display: block;
  font-size: 12.5px;
  color: #64748b;
  max-width: 360px;
  margin: 0 auto;
}

.license-upload-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  text-align: left;
}

.license-upload-preview .file-icon {
  font-size: 26px;
  line-height: 1;
}

.license-upload-preview .file-info {
  flex: 1;
  min-width: 0;
}

.license-upload-preview .file-info strong {
  display: block;
  font-size: 13.5px;
  color: #0f766e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.license-upload-preview .file-info small {
  font-size: 12px;
  color: #64748b;
}

.upload-badge-ok {
  background: #dcfce7;
  color: #15803d;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.remove-license-file-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.remove-license-file-btn:hover {
  background: #fee2e2;
  color: #dc2626;
}

.auth-submit-btn {
  width: 100%;
  padding: 13px;
  font-size: 15.5px;
  font-weight: 700;
}

.auth-switch-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13.5px;
  color: #64748b;
}

.auth-switch-prompt .link-btn {
  background: none;
  border: none;
  color: #0d9488;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.auth-switch-prompt .link-btn:hover {
  text-decoration: underline;
}

/* Customer Account Status Banners */
.account-status-banner {
  display: flex;
  gap: 16px;
  padding: 18px;
  border-radius: 12px;
  margin-bottom: 24px;
  align-items: flex-start;
}

.account-status-banner .status-banner-icon {
  font-size: 32px;
  line-height: 1;
}

.account-status-banner .status-banner-body h4 {
  margin: 0 0 6px 0;
  font-size: 16px;
}

.account-status-banner .status-banner-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.account-status-banner.pending-banner {
  background: #fffbeb;
  border: 1.5px solid #fef3c7;
  color: #92400e;
}
.account-status-banner.pending-banner h4 {
  color: #b45309;
}

.account-status-banner.approved-banner {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  color: #14532d;
}
.account-status-banner.approved-banner h4 {
  color: #15803d;
}

.account-status-banner.suspended-banner {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: #7f1d1d;
}
.account-status-banner.suspended-banner h4 {
  color: #b91c1c;
}

/* Modern, Compact Brand Grid & Cards */
.brand-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 14px !important;
  margin: 16px 0 32px !important;
}

.brand-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 14px 14px !important;
  min-height: auto !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.brand-card:hover {
  transform: translateY(-2px) !important;
  border-color: #29bfbe !important;
  box-shadow: 0 4px 14px rgba(22, 156, 174, 0.12) !important;
}

.brand-card:active {
  transform: scale(0.98) !important;
}

.brand-logo-wrap {
  width: 100% !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  padding: 4px 8px !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  border: 1px solid #f1f5f9 !important;
  box-sizing: border-box !important;
}

.brand-logo-wrap img {
  max-width: 90% !important;
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.04)) !important;
}

.brand-name {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.25 !important;
  margin: 0 0 5px 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.brand-count {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #0f766e !important;
  background: #f0fdfa !important;
  border: 1px solid #ccfbf1 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  letter-spacing: -0.1px !important;
}

/* ==========================================================================
   Mobile UI/UX Refinements (Compact Top Bar, Sleek Search, Proportional Bottom Nav)
   Targeted for mobile screens (≤ 600px)
   ========================================================================== */
@media(max-width: 600px){
  /* Container Padding (Clearance for 60px Bottom Navigation) */
  .app {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Compact Header */
  #customer-header {
    padding: 8px 12px 10px !important;
    background: linear-gradient(135deg, #0e8fa2 0%, #1499ab 50%, #1bb8a4 100%) !important;
    box-shadow: 0 2px 10px rgba(14, 143, 162, 0.2) !important;
  }

  /* Header 2-Row Grid: Row 1 = Brand + Tools (Cart/Bell), Row 2 = Full-width Search */
  #customer-header .top {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand tools"
      "search search" !important;
    row-gap: 8px !important;
    column-gap: 10px !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }

  #customer-header .brand {
    grid-area: brand !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    min-width: 0 !important;
  }

  #customer-header .brand #store-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #customer-header .brand-mark.has-logo {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    padding: 1px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  }

  #customer-header .brand-mark:not(.has-logo) {
    font-size: 22px !important;
    color: #daf88a !important;
  }

  /* Header Right Tools: Cart Pill & Notification */
  #customer-header .tools {
    grid-area: tools !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  /* Compact Cart Button */
  #customer-header .balance {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    white-space: nowrap !important;
  }

  #customer-header .balance .cart-pill-icon {
    width: 15px !important;
    height: 15px !important;
    stroke: #ffffff !important;
    stroke-width: 2.2 !important;
  }

  #customer-header .balance .cart-pill-count {
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  /* Hide long currency & item unit text in mobile top bar */
  #customer-header .balance .cart-pill-unit,
  #customer-header .balance .cart-pill-sep,
  #customer-header .balance .cart-pill-total {
    display: none !important;
  }

  /* Notification Bell */
  #customer-header .notification {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    position: relative !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
  }

  #customer-header .notification svg {
    width: 16px !important;
    height: 16px !important;
  }

  #customer-header .notification .badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 14px !important;
    height: 14px !important;
    font-size: 9px !important;
    line-height: 14px !important;
    border: 1.5px solid #ffffff !important;
    background: #ef4444 !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    text-align: center !important;
  }

  /* Header Row 2: Compact Full-Width Searchbar */
  #customer-header .searchbox {
    grid-area: search !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
  }

  #customer-header .searchbox svg {
    width: 15px !important;
    height: 15px !important;
    color: #0f766e !important;
    stroke: #0f766e !important;
    flex-shrink: 0 !important;
  }

  #customer-header .searchbox input {
    font-size: 13px !important;
    padding: 0 !important;
    height: 100% !important;
    color: #1e293b !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    outline: none !important;
  }

  #customer-header .searchbox input::placeholder {
    color: #94a3b8 !important;
    font-size: 12.5px !important;
  }

  #customer-header .searchbox .search-submit {
    padding: 0 !important;
    font-size: 15px !important;
    color: #0d9488 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  /* Refined, Sleek Mobile Bottom Navigation (15% Enlarged for Better Ergonomics) */
  .bottom-nav, #customer-nav {
    height: 60px !important;
    padding: 3px 0 env(safe-area-inset-bottom, 0px) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05) !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;
    z-index: 99 !important;
    bottom: 0 !important;
  }

  .bottom-nav > button {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    padding: 0 !important;
    position: relative !important;
    letter-spacing: -0.2px !important;
    background: transparent !important;
    border: none !important;
  }

  .bottom-nav svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 1.8 !important;
    stroke: currentColor !important;
  }

  .bottom-nav > button.active {
    color: #0d9488 !important;
    font-weight: 700 !important;
  }

  .bottom-nav > button.active svg {
    stroke: #0d9488 !important;
  }

  /* Elegant Proportional Center Home Button (+15% size: 46px) */
  .home-mark, .home-mark.has-logo {
    width: 46px !important;
    height: 46px !important;
    border: 3px solid #ffffff !important;
    outline: none !important;
    border-radius: 50% !important;
    font-size: 23px !important;
    margin-top: -14px !important;
    background: linear-gradient(135deg, #14b8a6, #0284c7) !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35) !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    color: #daf88a !important;
  }

  .home-mark.has-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }

  /* Cart Badge in Bottom Nav */
  .cart-nav b, #cart-count {
    position: absolute !important;
    top: 3px !important;
    margin-left: 0 !important;
    right: calc(50% - 17px) !important;
    background: #0d9488 !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    min-width: 17px !important;
    height: 17px !important;
    font-size: 10.5px !important;
    line-height: 17px !important;
    padding: 0 3px !important;
    font-weight: 700 !important;
    text-align: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  }

  /* Floating Chat Button on Mobile (+15% size: 48px) */
  .floating-chat-container {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }

  .floating-chat-launcher {
    width: 48px !important;
    height: 48px !important;
    box-shadow: 0 5px 16px rgba(14, 125, 141, 0.4) !important;
    border-width: 2.5px !important;
  }

  .floating-chat-launcher svg {
    width: 23px !important;
    height: 23px !important;
  }

  .floating-chat-window {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    right: 8px !important;
    left: 8px !important;
    height: calc(100vh - 130px) !important;
  }

  /* Banner Controls & Sleek Floating Navigation on Mobile */
  .hero.banner-carousel {
    margin: 6px 0 6px 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .banner-controls {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 5 !important;
    display: block !important;
  }

  .banner-controls > button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    background: rgba(15, 23, 42, 0.42) !important;
    backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    padding: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
  }

  .banner-controls > [data-banner-prev] {
    left: 6px !important;
  }

  .banner-controls > [data-banner-next] {
    right: 6px !important;
  }

  .banner-controls > button:active {
    transform: translateY(-50%) scale(0.92) !important;
    background: rgba(15, 23, 42, 0.7) !important;
  }

  .banner-dots {
    position: absolute !important;
    bottom: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    pointer-events: auto !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
  }

  .banner-dots button {
    height: 10px !important;
    width: auto !important;
    padding: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: 0 !important;
    cursor: pointer !important;
  }

  .banner-dots span {
    display: block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    transform: none !important;
    box-shadow: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .banner-dots button.selected span {
    width: 16px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
  }

  /* Tightened Main Content Spacing on Mobile */
  .content {
    padding: 6px 12px 14px !important;
  }

  .banner-note {
    margin: 2px 0 8px !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    border-radius: 6px !important;
    text-align: center !important;
  }

  /* Quick Order & Inquiries */
  .quick,
  #home-section .quick {
    margin-top: 2px !important;
  }

  .quick h2,
  #home-section .quick h2 {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    color: #1e293b !important;
    letter-spacing: -0.2px !important;
  }

  .quick-options {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important;
    gap: 6px !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    overflow-x: visible !important;
    box-sizing: border-box !important;
  }

  .quick-options > button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    gap: 4px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  .quick-options > button:active {
    transform: scale(0.98) !important;
    background: #f8fafc !important;
  }

  .quick-options > button .quick-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
  }

  .quick-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
  }

  .quick-icon svg {
    width: 11px !important;
    height: 11px !important;
  }

  /* Compact Categories Section */
  .category-section {
    margin-bottom: 12px !important;
  }

  .heading {
    margin-bottom: 5px !important;
  }

  .heading h2 {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
  }

  .see-all {
    font-size: 11.5px !important;
  }

  .category-grid,
  #home-section .category-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    margin-top: 2px !important;
  }

  .category.category-card,
  .category {
    padding: 6px 3px 5px !important;
    border-radius: 9px !important;
    min-height: 68px !important;
    background: #ffffff !important;
    border: 1px solid #e5edf0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .category .circle,
  .cat-icon-wrap {
    width: 38px !important;
    height: 38px !important;
    margin: 0 auto 3px !important;
  }

  .cat-illus-svg {
    width: 36px !important;
    height: 36px !important;
  }

  .category-label {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    min-height: auto !important;
    margin-top: 0 !important;
    max-width: 100% !important;
    font-weight: 600 !important;
    letter-spacing: -0.15px !important;
    color: #334155 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    padding: 0 2px !important;
  }

  .category-see-all-wrap {
    margin-top: 6px !important;
  }

  .category-see-all-btn {
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    margin-top: 0 !important;
  }

  /* Wholesale Products Section */
  #home-section section:not(.quick):not(.category-section) .heading {
    margin-top: 4px !important;
    margin-bottom: 5px !important;
  }

  /* Wholesale Product Cards */
  .product-grid {
    gap: 8px !important;
  }

  .product-card {
    padding: 9px !important;
    border-radius: 10px !important;
  }

  .product-image {
    height: 98px !important;
    margin-bottom: 8px !important;
    padding: 4px !important;
    border-radius: 8px !important;
  }

  .wholesale-tag {
    font-size: 9.5px !important;
  }

  .product-card h3 {
    font-size: 13px !important;
    margin: 3px 0 4px !important;
  }

  .product-card p {
    font-size: 11px !important;
    margin: 0 0 3px !important;
  }

  .product-card .price {
    font-size: 15px !important;
    margin: 4px 0 0 !important;
  }

  .product-card .primary {
    font-size: 11.5px !important;
    padding: 7px 6px !important;
    margin-top: 7px !important;
    border-radius: 7px !important;
  }

  /* Compact Brand Cards on Mobile (Eliminates oversized boxes) */
  .brand-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 8px 0 18px !important;
  }

  .brand-card {
    padding: 10px 8px 8px !important;
    min-height: 86px !important;
    max-height: 96px !important;
    border-radius: 10px !important;
    gap: 0 !important;
  }

  .brand-logo-wrap {
    height: 38px !important;
    margin-bottom: 5px !important;
    padding: 2px 4px !important;
    border-radius: 6px !important;
  }

  .brand-logo-wrap img {
    max-height: 30px !important;
    max-width: 94% !important;
  }

  .brand-name {
    font-size: 11.5px !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.2 !important;
  }

  .brand-count {
    font-size: 9.5px !important;
    padding: 1px 6px !important;
  }

  /* Full-Page Mobile Categories Directory (.category-grid.full-grid) */
  .category-grid.full-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin: 12px 0 28px !important;
    width: 100% !important;
  }

  .category-grid.full-grid .category.category-card,
  .category-grid.full-grid .category {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    min-height: 64px !important;
    height: auto !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    text-align: left !important;
  }

  .category-grid.full-grid .category.category-card:hover,
  .category-grid.full-grid .category:hover {
    transform: translateY(-2px) !important;
    border-color: #29bfbe !important;
    box-shadow: 0 4px 14px rgba(22, 156, 174, 0.12) !important;
  }

  .category-grid.full-grid .category .circle,
  .category-grid.full-grid .cat-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  .category-grid.full-grid .cat-illus-svg {
    width: 44px !important;
    height: 44px !important;
  }

  .category-grid.full-grid .category-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.25 !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: left !important;
    letter-spacing: normal !important;
    padding: 0 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }
}

/* ==========================================================================
   Wholesale Auth Gateway Card (#account / #orders unauthenticated prompt)
   ========================================================================== */

.auth-gate-content {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 20px 16px 110px !important;
  min-height: calc(100vh - 180px) !important;
  box-sizing: border-box !important;
}

.wholesale-auth-card {
  width: 100% !important;
  max-width: 480px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 26px 18px !important;
  box-shadow: 0 10px 30px -5px rgba(15, 118, 110, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  text-align: center !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  position: relative !important;
}

.auth-gate-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f0fdfa !important;
  border: 1px solid #ccfbf1 !important;
  color: #0f766e !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 4px 11px !important;
  border-radius: 9999px !important;
  margin-bottom: 14px !important;
  text-transform: uppercase !important;
}

.auth-gate-badge-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2) !important;
}

.auth-gate-nplus {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 14px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.auth-gate-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
}

.auth-gate-subtitle {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  margin: 0 0 18px !important;
  padding: 0 4px !important;
}

.auth-gate-perks {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  text-align: left !important;
  margin-bottom: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.auth-perk-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.auth-perk-icon {
  font-size: 18px !important;
  line-height: 1.2 !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.auth-perk-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.auth-perk-text strong {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.auth-perk-text span {
  font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.35 !important;
}

.auth-gate-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

.auth-gate-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 48px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

.auth-gate-btn .btn-icon {
  font-size: 16px !important;
}

.auth-gate-btn-primary {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%) !important;
  color: #ffffff !important;
  border: 1px solid #0f766e !important;
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25) !important;
}

.auth-gate-btn-primary:hover,
.auth-gate-btn-primary:active {
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.35) !important;
}

.auth-gate-btn-secondary {
  background: #ffffff !important;
  color: #0f766e !important;
  border: 1.5px solid #29bfbe !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

.auth-gate-btn-secondary:hover,
.auth-gate-btn-secondary:active {
  background: #f0fdfa !important;
  border-color: #0d9488 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(41, 191, 190, 0.15) !important;
}

.auth-gate-support {
  padding-top: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
  font-size: 12.5px !important;
  color: #64748b !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}

.auth-gate-support-link {
  background: transparent !important;
  border: none !important;
  color: #0d9488 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.auth-gate-support-link:hover {
  background: #f0fdfa !important;
  color: #0f766e !important;
  text-decoration: underline !important;
}

@media (min-width: 540px) {
  .auth-gate-actions {
    flex-direction: row !important;
  }
  .auth-gate-btn {
    flex: 1 !important;
  }
}

/* ==========================================================================
   CLEAN MEDICAL THEMED ADMIN LOGIN STYLING
   ========================================================================== */

/* Strict protection: hide admin nav and quick-add button when not authorized */
#admin-nav[hidden],
[data-action="quick-add-product"][hidden] {
  display: none !important;
}

/* Consolidate duplicate Add Product buttons: Hide header quick-add button so each page toolbar houses the primary action button cleanly without duplication */
#admin-header-tools [data-action="quick-add-product"] {
  display: none !important;
}

.medical-login-wrapper {
  max-width: 440px;
  margin: 45px auto 65px;
  padding: 0 16px;
}

.medical-login-card {
  background: #ffffff;
  border: 1px solid #dce7eb;
  border-radius: 16px;
  padding: 34px 28px;
  box-shadow: 0 10px 30px rgba(18, 142, 162, 0.08);
  position: relative;
}

.medical-login-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0d9488, #29bfbe);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 26px;
  margin: 0 auto 14px;
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25);
}

.medical-login-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: #e6f7f6;
  color: #0d9488;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

.medical-login-header {
  text-align: center;
  margin-bottom: 20px;
}

.medical-login-header h2 {
  font-size: 22px;
  color: #1e293b;
  margin: 0 0 6px;
  font-weight: 700;
}

.medical-login-header p {
  color: #64748b;
  font-size: 13.5px;
  margin: 0;
  line-height: 1.4;
}

.medical-demo-box {
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #0f766e;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.medical-demo-btn {
  background: #0d9488;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.medical-demo-btn:hover {
  background: #0f766e;
}

.medical-pwd-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.medical-pwd-wrapper input {
  padding-right: 42px;
}

.medical-toggle-pwd {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.medical-toggle-pwd:hover {
  color: #0d9488;
}

/* ========================================================
   Wholesale Cart Stepper & Professional Item Layout
   ======================================================== */
.cart-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #e7edef;
  position: relative;
}
.cart-item:first-child {
  padding-top: 0;
}
.cart-item:last-child {
  border-bottom: 0;
}
.cart-item img,
.cart-item .product-placeholder {
  width: 70px;
  height: 70px;
  object-fit: contain;
  background: #f1f8f8;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 4px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 28px;
}
.cart-description {
  flex: 1;
  min-width: 0;
}
.cart-description h3 {
  margin: 0 0 4px 0;
  font-size: 15.5px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.35;
}
.cart-item-pack {
  margin: 0 0 6px 0;
  font-size: 13.5px;
  color: #64748b;
  font-weight: 500;
}
.cart-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cart-meta-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2.5px 8px;
  border-radius: 5px;
  line-height: 1.4;
  letter-spacing: -0.1px;
}
.cart-meta-pill.moq-pill {
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  color: #0f766e;
}
.cart-meta-pill.stock-pill {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
}
.cart-meta-pill.stock-pill.low-stock {
  background: #fffbeb;
  border-color: #fef3c7;
  color: #b45309;
}
.cart-meta-pill.unavail-pill {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.cart-row-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cart-quantity-stepper {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cart-quantity-stepper:focus-within {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.15);
}
.cart-stepper-btn {
  width: 36px;
  height: 36px;
  background: #f8fafc;
  border: none;
  font-size: 18px;
  font-weight: 700;
  color: #0f766e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  user-select: none;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.cart-stepper-btn:hover:not(:disabled) {
  background: #e6f7f7;
  color: #0d9488;
}
.cart-stepper-btn:active:not(:disabled) {
  background: #cceeee;
  transform: scale(0.96);
}
.cart-stepper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #f1f5f9;
  color: #94a3b8;
}
.cart-stepper-input {
  width: 60px;
  height: 36px;
  border: none !important;
  border-left: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-radius: 0 !important;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  padding: 0 4px !important;
  background: #ffffff;
  min-height: 36px !important;
  -moz-appearance: textfield;
}
.cart-stepper-input::-webkit-outer-spin-button,
.cart-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-stepper-input:focus {
  outline: none;
  background: #f0fdfa;
}

.cart-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 7px;
  border: 1px solid #fecaca;
  background: #fff5f5;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1.2;
}
.cart-remove-btn:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: #991b1b;
}
.cart-remove-btn svg {
  flex-shrink: 0;
  stroke: currentColor;
}

.cart-item-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding-left: 12px;
  flex-shrink: 0;
  min-width: 90px;
}
.cart-item-pricing-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  font-weight: 600;
  margin-bottom: 2px;
}
.cart-item-pricing-amount {
  font-size: 18px;
  font-weight: 800;
  color: #0f766e;
  letter-spacing: -0.3px;
}

@media (max-width: 640px) {
  .cart-item {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }
  .cart-item img,
  .cart-item .product-placeholder {
    width: 54px;
    height: 54px;
  }
  .cart-item-pricing {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #e2e8f0;
    padding-top: 10px;
    margin-top: 6px;
    padding-left: 0;
  }
  .cart-item-pricing-amount {
    font-size: 17px;
  }
}



/* ==========================================================================
   B2B Tax Invoice & Delivery Challan Suite (Phase 1)
   ========================================================================== */
.invoice-modal-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.invoice-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #f1f5f9;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

.invoice-tab-group {
  display: flex;
  gap: 6px;
}

.invoice-tab-btn {
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.invoice-tab-btn:hover {
  background: #f8fafc;
  border-color: #0d9488;
  color: #0d9488;
}

.invoice-tab-btn.active {
  background: #0d9488;
  border-color: #0d9488;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(13, 148, 136, 0.2);
}

.invoice-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  background: #0284c7;
  color: #ffffff;
  border: 1px solid #0284c7;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.invoice-print-btn:hover {
  background: #0369a1;
  border-color: #0369a1;
}

.invoice-sheet {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 24px 28px;
  color: #1e293b;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.45;
}

.invoice-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  border-bottom: 2px solid #0d9488;
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.invoice-brand-block {
  display: flex;
  gap: 14px;
  align-items: center;
}

.invoice-logo-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  padding: 2px;
}

.invoice-company-info h2 {
  font-size: 21px;
  font-weight: 800;
  color: #0f766e;
  margin: 0 0 3px 0;
  letter-spacing: -0.3px;
}

.invoice-company-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 4px 0;
}

.invoice-company-meta {
  font-size: 12px;
  color: #475569;
  line-height: 1.35;
}

.invoice-title-block {
  text-align: right;
  min-width: 200px;
}

.invoice-badge-title {
  display: inline-block;
  background: #0f766e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.challan-badge-title {
  background: #0369a1;
}

.invoice-doc-numbers {
  font-size: 13px;
  line-height: 1.4;
  color: #334155;
}

.invoice-doc-numbers strong {
  color: #0f172a;
}

.invoice-pills-row {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 6px;
}

.invoice-parties-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 13px;
}

.party-col h4 {
  margin: 0 0 6px 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #0f766e;
}

.party-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 3px;
}

.party-detail {
  color: #475569;
  line-height: 1.4;
}

.invoice-table-wrap {
  margin-bottom: 18px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.invoice-table th {
  background: #f1f5f9;
  color: #334155;
  font-weight: 700;
  padding: 9px 12px;
  border-bottom: 2px solid #cbd5e1;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.invoice-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
  vertical-align: middle;
}

.invoice-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.invoice-table .td-num {
  text-align: center;
  width: 38px;
  color: #64748b;
  font-weight: 600;
}

.invoice-table .td-qty,
.invoice-table .td-price,
.invoice-table .td-total {
  text-align: right;
  white-space: nowrap;
}

.invoice-item-name {
  font-weight: 700;
  color: #0f172a;
}

.invoice-item-sub {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}

.invoice-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.invoice-words-box {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12.5px;
}

.invoice-words-label {
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.invoice-words-val {
  font-weight: 700;
  color: #0f766e;
  font-size: 13.5px;
}

.invoice-totals-box {
  width: 270px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}

.invoice-total-line {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
}

.invoice-total-line.grand {
  background: #0f766e;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  border-bottom: 0;
}

.invoice-total-line.grand span:last-child {
  font-size: 16px;
}

.invoice-legal-note {
  border-left: 3px solid #0d9488;
  background: #f0fdf4;
  padding: 9px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 11.5px;
  color: #166534;
  line-height: 1.4;
  margin-bottom: 24px;
}

.invoice-signatures-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding-top: 36px;
  margin-top: 10px;
  border-top: 1px dashed #cbd5e1;
  text-align: center;
  font-size: 12px;
  color: #475569;
}

.sig-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sig-line {
  width: 85%;
  border-top: 1px solid #475569;
  margin-bottom: 6px;
}

.sig-title {
  font-weight: 700;
  color: #0f172a;
}

.sig-sub {
  font-size: 11px;
  color: #64748b;
}

/* Print Overrides */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 10mm;
  }
  
  html, body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .app, header, nav, #admin-header, #admin-nav, footer, .footer-links, .no-print, .invoice-actions-bar, .modal-heading, dialog > button, .order-admin-form {
    display: none !important;
  }

  body:has(dialog[open]) > .app {
    display: none !important;
  }

  dialog[open] {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  #modal-body {
    padding: 0 !important;
  }

  .invoice-sheet {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .invoice-table th {
    background: #f1f5f9 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .invoice-badge-title, .challan-badge-title, .invoice-total-line.grand {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .invoice-signatures-row {
    padding-top: 45px !important;
  }
}


/* ==========================================================================
   Comprehensive UI/UX Overhaul & Modernization
   ========================================================================== */

/* 1. Global Polish & Modern Typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Plus Jakarta Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media(min-width: 1280px) {
  .app {
    max-width: 1320px !important;
  }
}

/* 2. Mobile Floating Chat Repositioning (Zero Bottom Nav Collision) */
@media(max-width: 899px) {
  .floating-chat-container {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    z-index: 999 !important;
  }
  .floating-chat-launcher {
    width: 50px !important;
    height: 50px !important;
    box-shadow: 0 4px 18px rgba(14, 125, 141, 0.4) !important;
  }
  .floating-chat-launcher svg {
    width: 24px !important;
    height: 24px !important;
  }
  .floating-chat-window {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    height: calc(100dvh - 110px) !important;
    max-height: 560px !important;
    border-radius: 16px !important;
  }
}

/* 3. Balanced Mobile Dock Home Button */
.home-mark.has-logo {
  width: 56px !important;
  height: 56px !important;
  margin-top: -16px !important;
  border-width: 3.5px !important;
  outline-width: 2.5px !important;
  box-shadow: 0 4px 14px rgba(22, 156, 174, 0.35) !important;
}

.bottom-nav {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
}

/* 4. Product Cards Equal-Height & Geometric Grid */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

.product-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  padding: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.product-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(13, 148, 136, 0.12) !important;
  border-color: #0d9488 !important;
}

.product-card .product-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.product-card h3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  margin: 6px 0 !important;
}

.product-card .product-image {
  height: 145px !important;
  background: #f8fafc !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  padding: 10px !important;
  overflow: hidden !important;
  border: 1px solid #f1f5f9 !important;
  margin-bottom: 12px !important;
}

.product-card .product-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.2s ease !important;
}

.product-card:hover .product-image img {
  transform: scale(1.05) !important;
}

.product-card .price {
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0f766e !important;
  margin: 8px 0 0 !important;
}

.product-card .primary {
  margin-top: 14px !important;
  width: 100% !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  background: #0f766e !important;
  border-color: #0f766e !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}

.product-card .primary:hover:not(:disabled) {
  background: #0d5f59 !important;
  border-color: #0d5f59 !important;
}

@media(max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}

@media(max-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .product-card {
    padding: 12px !important;
  }
  .product-card .product-image {
    height: 115px !important;
    padding: 6px !important;
  }
  .product-card h3 {
    font-size: 13.5px !important;
    min-height: 2.7em !important;
  }
  .product-card .price {
    font-size: 17px !important;
  }
  .product-card .primary {
    padding: 9px 8px !important;
    font-size: 13px !important;
  }
}

/* 5. Cart Page Desktop Sticky Summary */
@media(min-width: 900px) {
  .cart-layout {
    display: grid !important;
    grid-template-columns: 1fr 370px !important;
    gap: 24px !important;
    align-items: flex-start !important;
  }
  .cart-layout > .panel:last-child {
    position: sticky !important;
    top: 24px !important;
    z-index: 20 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  }
}

/* 6. Instant Search Autocomplete Dropdown */
.searchbox {
  position: relative !important;
}

.search-autocomplete-dropdown {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
  z-index: 2000 !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  text-align: left !important;
}

.search-autocomplete-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  color: #1e293b !important;
}

.search-autocomplete-item:last-child {
  border-bottom: none !important;
}

.search-autocomplete-item:hover,
.search-autocomplete-item.active {
  background: #f0fdfa !important;
}

.search-autocomplete-thumb {
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 1px solid #e2e8f0 !important;
  padding: 2px !important;
}

.search-autocomplete-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.search-autocomplete-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.search-autocomplete-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.search-autocomplete-meta {
  font-size: 12px !important;
  color: #64748b !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.search-autocomplete-price {
  text-align: right !important;
  flex-shrink: 0 !important;
}

.search-autocomplete-amount {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0f766e !important;
}

.search-autocomplete-unit {
  font-size: 11px !important;
  color: #94a3b8 !important;
  display: block !important;
}

.search-autocomplete-footer {
  padding: 10px 16px !important;
  background: #f8fafc !important;
  text-align: center !important;
  font-size: 13px !important;
  color: #0f766e !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  border-top: 1px solid #e2e8f0 !important;
}

.search-autocomplete-footer:hover {
  background: #f0fdfa !important;
  text-decoration: underline !important;
}

/* 7. Category Label Truncation */
.category-label {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  word-break: break-word !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
  color: #334155 !important;
}

/* 8. Accessible Dialog Close & Micro-animations */
dialog {
  border-radius: 18px !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
}

dialog[open] {
  animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

#close-modal {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  transition: all 0.15s ease !important;
}

#close-modal:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
}


/* ==========================================================================
   Compact Above-The-Fold Product Cards & High-Density B2B Catalogue
   ========================================================================== */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  align-items: stretch !important;
  margin-top: 14px !important;
}

.product-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  padding: 12px 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  position: relative !important;
}

.product-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(13, 148, 136, 0.14) !important;
  border-color: #0d9488 !important;
}

.product-card .product-image {
  height: 110px !important;
  background: #f8fafc !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  padding: 6px !important;
  overflow: hidden !important;
  border: 1px solid #f1f5f9 !important;
  margin-bottom: 8px !important;
}

.product-card .product-image img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.product-card .wholesale-tag {
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: #0d9488 !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}

.product-card h3 {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  margin: 3px 0 !important;
  min-height: 2.5em !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.product-card p {
  font-size: 12px !important;
  color: #64748b !important;
  margin: 0 0 3px !important;
  line-height: 1.3 !important;
}

.product-card .price {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f766e !important;
  margin: 6px 0 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

.product-card .price .subtle {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

.product-card .primary {
  margin-top: 10px !important;
  width: 100% !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  background: #0f766e !important;
  border: 1px solid #0f766e !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.product-card .primary:hover:not(:disabled) {
  background: #0d5f59 !important;
  border-color: #0d5f59 !important;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.3) !important;
}

.product-card .primary:disabled {
  background: #cbd5e1 !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
  cursor: not-allowed !important;
}

/* Page Spacing Reduction so catalog sits above the fold */
.content {
  padding: 16px 24px 20px !important;
}

.page-header {
  margin-bottom: 14px !important;
}

.page-header h1 {
  font-size: 26px !important;
}

.filters {
  margin-bottom: 14px !important;
  gap: 10px !important;
}

.filters input, .filters select {
  padding: 8px 12px !important;
  min-height: 38px !important;
  font-size: 13.5px !important;
}

@media(max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}

@media(max-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .product-card {
    padding: 10px !important;
  }
  .product-card .product-image {
    height: 95px !important;
    padding: 4px !important;
  }
  .product-card h3 {
    font-size: 13px !important;
  }
  .product-card .price {
    font-size: 16px !important;
  }
  .product-card .primary {
    padding: 7px 6px !important;
    font-size: 12.5px !important;
  }
}

/* Policy Modal & Page Enhancements - Single Scrollbar & Clean Close Button */
dialog.policy-dialog,
dialog:has(.policy-modal-container) {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 86vh !important;
  padding: 24px 26px 20px !important;
  box-sizing: border-box !important;
}

dialog.policy-dialog #modal-body,
dialog:has(.policy-modal-container) #modal-body {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}

.policy-modal-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  text-align: left;
}

.policy-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.formatted-policy {
  font-size: 14px;
  color: #334155;
  line-height: 1.75;
  flex: 1 !important;
  min-height: 0 !important;
  max-height: 54vh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding-right: 14px;
  margin-top: 10px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.formatted-policy::-webkit-scrollbar {
  width: 6px;
}
.formatted-policy::-webkit-scrollbar-track {
  background: transparent;
}
.formatted-policy::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}
.formatted-policy::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

.formatted-policy .policy-heading {
  font-size: 15px;
  font-weight: 700;
  color: #0f766e;
  margin: 18px 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px dashed #ccfbf1;
}

.formatted-policy .policy-p {
  margin: 6px 0 10px 0;
  color: #475569;
}

.formatted-policy .policy-list {
  margin: 6px 0 14px 18px;
  padding-left: 6px;
  list-style-type: disc;
}

.formatted-policy .policy-list li {
  margin-bottom: 8px;
  color: #334155;
  line-height: 1.6;
}

.policy-card-panel {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  text-align: left;
}

.policy-modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding-top: 14px !important;
  margin-top: 12px !important;
  border-top: 1px solid #e2e8f0 !important;
  flex-shrink: 0 !important;
}

.policy-btn-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 28px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  margin: 0 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  background: #0d9488 !important;
  color: #ffffff !important;
  border: 1px solid #0d9488 !important;
  transition: all 0.15s ease !important;
}

.policy-btn-close:hover {
  background: #0f766e !important;
  border-color: #0f766e !important;
}

.footer-links button {
  color: #0d9488;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s;
  padding: 4px 8px;
  border-radius: 6px;
}
.footer-links button:hover {
  color: #0f766e;
  background: #f0fdfa;
  text-decoration: underline;
}