/* --saruar-primary is 3.3:1 on white: fine for icons, fills and large text. Small text uses --saruar-primary-text (5.2:1). */
:root{--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,"Noto Sans Bengali",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--saruar-primary:#f85606;--saruar-white:#fff;--saruar-primary-text:#c2410c;--saruar-dark:#0f172a;--saruar-surface:#f8fafc;--saruar-border:#e2e8f0;--saruar-muted:#475569;--saruar-nav-height:4rem}
.sm-body{background:var(--saruar-white);color:var(--saruar-dark)}
.saruar-main{flex:1 0 auto}
/* Orange buttons: white text, black text on hover. Set through Bootstrap's own button variables, because its :hover selectors outrank a plain class. */
.sm-btn-primary{--bs-btn-color:var(--saruar-white);--bs-btn-bg:var(--saruar-primary);--bs-btn-border-color:var(--saruar-primary);--bs-btn-hover-color:var(--saruar-white);--bs-btn-hover-bg:var(--saruar-primary);--bs-btn-hover-border-color:var(--saruar-primary);--bs-btn-active-color:var(--saruar-dark);--bs-btn-active-bg:var(--saruar-primary);--bs-btn-active-border-color:var(--saruar-primary);--bs-btn-disabled-color:var(--saruar-white);--bs-btn-disabled-bg:var(--saruar-primary);--bs-btn-disabled-border-color:var(--saruar-primary);background:var(--saruar-primary);border-color:var(--saruar-primary);color:var(--saruar-white);font-weight:600}
/* Black on hover only where a mouse hovers, or a tapped button stays black on phones; keyboard focus shows black everywhere. */
@media (hover:hover){.sm-btn-primary{--bs-btn-hover-color:var(--saruar-dark)}}
.sm-btn-primary:focus-visible{color:var(--saruar-dark)}
.sm-topbar-dismissed [data-saruar-topbar]{display:none}
.sm-hero-carousel{border-radius:1.25rem;overflow:hidden}
.sm-hero{align-items:center;background:linear-gradient(105deg,#f7d29b 0%,#c98b4a 34%,#4a2c1a 68%,#17100b 100%);color:var(--saruar-white);display:flex;gap:2rem;min-height:24rem;padding:2.5rem 3.5rem 3.5rem;position:relative}
.sm-hero-pictured{background:#17100b center/cover no-repeat}
.sm-hero-seal{align-items:center;background:radial-gradient(circle at 35% 30%,#ef4444,#991b1b);border:.375rem solid #f5c542;border-radius:50%;box-shadow:0 .5rem 1.25rem rgba(0,0,0,.35);color:var(--saruar-white);display:flex;flex:0 0 auto;font-size:3.5rem;height:9rem;justify-content:center;width:9rem}
.sm-hero-copy{min-width:0}
.sm-hero-title{background:var(--saruar-dark);border:2px solid #f5c542;border-radius:1rem;color:var(--saruar-white);display:table;font-family:Georgia,'Times New Roman',serif;font-size:clamp(2rem,5vw,3.75rem);font-weight:700;line-height:1.1;margin:0 0 1rem;padding:.5rem 1.5rem}
.sm-hero-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;position:absolute;right:3rem;top:3.5rem}
.sm-hero-chips li{background:var(--saruar-dark);border:1px solid rgba(255,255,255,.7);border-radius:.75rem;font-weight:700;padding:.5rem .875rem}
.sm-hero-carousel .carousel-indicators{gap:.25rem;margin-bottom:1rem}
.sm-hero-carousel .carousel-indicators [data-bs-target]{background:var(--saruar-white);border:0;border-radius:50%;height:.625rem;margin:0 .25rem;opacity:.7;width:.625rem}
.sm-hero-carousel .carousel-indicators .active{background:var(--saruar-primary);box-shadow:0 0 0 2px var(--saruar-white);opacity:1}
.sm-hero-carousel .carousel-control-prev,.sm-hero-carousel .carousel-control-next{background:rgba(255,255,255,.75);border-radius:50%;bottom:1.25rem;color:var(--saruar-primary-text);font-size:1.125rem;height:2.75rem;left:auto;opacity:1;top:auto;width:2.75rem}
.sm-hero-carousel .carousel-control-prev{right:4.5rem}
.sm-hero-carousel .carousel-control-next{right:1.25rem}
@media (max-width:767.98px){.sm-hero{flex-direction:column;gap:1rem;min-height:0;padding:1.5rem 1.25rem 4.5rem;text-align:center}.sm-hero-seal{font-size:2rem;height:5rem;width:5rem}.sm-hero-title{margin-left:auto;margin-right:auto}.sm-hero-chips{justify-content:center;margin-bottom:1rem;position:static}}
.sm-admin-workspace{min-width:0}
.sm-admin-sidebar{--bs-offcanvas-width:270px}
.sm-admin-section{color:var(--saruar-muted);font-size:.75rem;font-weight:600;letter-spacing:.05em;margin:0 0 .25rem;padding:0 .75rem}
.sm-admin-link{align-items:center;background:none;border:0;border-radius:.375rem;color:var(--saruar-dark);display:flex;font-size:.9375rem;gap:.625rem;padding:.4375rem .75rem;text-align:left;text-decoration:none}
.sm-admin-link:hover,.sm-admin-link:focus-visible{background:var(--saruar-surface);color:var(--saruar-primary-text)}
.sm-admin-link.active{background:var(--saruar-primary-text);color:var(--saruar-white)}
.sm-admin-link .bi-chevron-down{font-size:.75rem;transition:transform .15s ease}
.sm-admin-link:not(.collapsed) .bi-chevron-down{transform:rotate(180deg)}
@media (min-width:992px){.sm-admin-sidebar{background:var(--saruar-white)!important;flex:0 0 270px;height:100vh;overflow-y:auto;position:sticky;top:0;width:270px}.sm-admin-sidebar .offcanvas-body{display:flex;padding:1rem!important}}
@media (prefers-reduced-motion:reduce){.sm-admin-link .bi-chevron-down{transition:none}}
.sm-crud-form{min-height:0}
.table-responsive{position:relative}
.sm-crud-drawer{--bs-offcanvas-width:28rem}
.sm-seo-preview{border:1px solid var(--saruar-border);border-radius:.375rem;overflow-wrap:anywhere;padding:.75rem}
.sm-seo-title{color:#1a0dab;font-size:1.0625rem}
.sm-settings-nav .list-group-item.active{background:var(--saruar-primary-text);border-color:var(--saruar-primary-text)}
.sm-product-card{position:relative;background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:calc(.5rem + 1px);color:var(--saruar-dark);display:flex;flex-direction:column;gap:.5rem;height:100%;padding:.75rem;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease}
.sm-product-card:hover,.sm-product-card:focus-within{border-color:var(--saruar-primary);box-shadow:0 .25rem .75rem rgba(15,23,42,.08)}
.sm-product-link{color:inherit;display:flex;flex:1;flex-direction:column;gap:.5rem;text-decoration:none}
.sm-card-actions{display:flex;gap:.5rem}
.sm-card-actions .sm-btn-primary{flex:1;padding-inline:.25rem;white-space:nowrap}
.sm-toast-area{bottom:calc(5.5rem + env(safe-area-inset-bottom))}
@media (min-width:992px){.sm-toast-area{bottom:0}}
.sm-card-cart{flex:none;padding-inline:0;width:2.25rem}
/* Card cart button: orange icon; orange fill with a white icon under a mouse or when pressed, never the grey outline. */
.sm-card-cart{--bs-btn-color:var(--saruar-primary-text);--bs-btn-border-color:var(--saruar-border);--bs-btn-hover-color:var(--saruar-primary-text);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--saruar-border);--bs-btn-active-color:var(--saruar-white);--bs-btn-active-bg:var(--saruar-primary);--bs-btn-active-border-color:var(--saruar-primary);--bs-btn-focus-shadow-rgb:248,86,6}
@media (hover:hover){.sm-card-cart{--bs-btn-hover-color:var(--saruar-white);--bs-btn-hover-bg:var(--saruar-primary);--bs-btn-hover-border-color:var(--saruar-primary)}}.sm-card-actions .btn{font-size:.8125rem;min-height:2.25rem;padding-block:.25rem}
.sm-product-thumb{position:relative;align-items:center;background:var(--saruar-surface);border-radius:calc(.375rem + 1px);color:var(--saruar-primary);display:flex;font-size:3.75rem;height:11rem;justify-content:center}
.sm-product-thumb-large{font-size:5rem;height:18rem}
.sm-has-image{background:var(--saruar-surface) center/contain no-repeat}
.sm-product-name{font-size:.9375rem;font-weight:500;margin-top:.5rem}
.sm-price strong{color:var(--saruar-primary-text)}
.sm-buy-form{max-width:20rem}
.sm-cart-line{align-items:center;border-bottom:1px solid var(--saruar-border);display:flex;flex-wrap:wrap;gap:.75rem;padding:.75rem 0}
.sm-cart-quantity{width:4.5rem}
@media (prefers-reduced-motion:reduce){.sm-product-card{transition:none}}
.sm-discount-tag{background:var(--saruar-primary);border-radius:.375rem;color:var(--saruar-white);font-size:.8125rem;font-weight:700;padding:.125rem .5rem}
.sm-brand-tile{align-items:center;background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:.75rem;color:var(--saruar-dark);display:flex;font-weight:600;gap:.75rem;height:100%;padding:.75rem 1rem;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease}
.sm-brand-tile:hover,.sm-brand-tile:focus-visible{border-color:var(--saruar-primary);box-shadow:0 .25rem .75rem rgba(15,23,42,.08)}
.sm-brand-icon{align-items:center;background:#fff7ed;border-radius:.5rem;color:var(--saruar-primary);display:flex;flex:0 0 auto;font-size:1.375rem;height:2.75rem;justify-content:center;width:2.75rem}
.sm-flash-panel{background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:.75rem;display:flex;flex-direction:column;height:100%;justify-content:center;padding:1rem;text-align:center}
.sm-flash-title{color:var(--saruar-primary-text);font-size:1.75rem;font-weight:800;margin:0 0 .5rem;text-transform:uppercase}
.sm-flash-discount{border:1px solid var(--saruar-primary-text);border-radius:2rem;color:var(--saruar-primary-text);font-size:.8125rem;font-weight:700;padding:.125rem .5rem}
.sm-countdown{font-weight:700;margin-top:.25rem;white-space:nowrap}
.sm-countdown span{background:var(--saruar-dark);border-radius:.375rem;color:var(--saruar-white);display:inline-block;min-width:2rem;padding:.375rem .125rem}
@media (prefers-reduced-motion:reduce){.sm-brand-tile{transition:none}}
.sm-page{margin:0 auto;max-width:48rem;width:100%}
.sm-qr svg{display:block;height:auto;max-width:14rem;width:100%}
.sm-otp-group{max-width:20rem}
.sm-auth-card{border:1px solid var(--saruar-border);border-radius:.5rem;margin:0 auto;max-width:28rem;padding:1.5rem}
.sm-top-bar{background:var(--saruar-dark);color:var(--saruar-white);font-size:.875rem}
.sm-top-bar a{color:var(--saruar-white);text-decoration:none;white-space:nowrap}
.sm-top-bar a:hover,.sm-top-bar a:focus-visible{color:var(--saruar-primary)}
.sm-topbar-badge{border:1px solid rgba(255,255,255,.4);border-radius:.25rem;font-size:.75rem;padding:.125rem .375rem;white-space:nowrap}
.sm-logo{color:var(--saruar-primary);font-size:1.5rem;font-weight:700;text-decoration:none}
.sm-logo:hover,.sm-logo:focus-visible{color:var(--saruar-primary-text)}
.sm-logo-tag{color:var(--saruar-muted);font-size:.75rem;font-weight:400}
.sm-search-results{background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:.5rem;box-shadow:0 .5rem 1rem rgba(15,23,42,.12);left:0;margin-top:.25rem;max-height:20rem;overflow-y:auto;position:absolute;right:0;z-index:1000}
.sm-search-link{align-items:center;color:var(--saruar-dark);display:flex;gap:.75rem;padding:.5rem 1rem;text-decoration:none}
.sm-search-link .bi{color:var(--saruar-primary)}
.sm-search-thumb{border-radius:.375rem;flex:0 0 2.25rem;height:2.25rem;width:2.25rem}
.sm-search-link:hover,.sm-search-link:focus-visible{background:var(--saruar-surface);color:var(--saruar-primary-text)}
.sm-header-link{align-items:center;color:var(--saruar-dark);display:flex;font-size:.875rem;gap:.5rem;text-decoration:none;white-space:nowrap}
.sm-header-link .bi{font-size:1.25rem}
.sm-header-link:hover,.sm-header-link:focus-visible{color:var(--saruar-primary-text)}
.sm-menu-bar{background:var(--saruar-white);border-bottom:1px solid var(--saruar-border);box-shadow:0 .125rem .375rem rgba(15,23,42,.05)}
.sm-menu-toggle{color:var(--saruar-dark);font-weight:500;padding-left:0;white-space:nowrap}
.sm-category-strip{flex:1 1 auto;-webkit-mask-image:linear-gradient(to right,#000 92%,transparent);mask-image:linear-gradient(to right,#000 92%,transparent);min-width:0;overflow-x:auto;padding:.75rem 0;scroll-behavior:smooth;scrollbar-width:none}
.sm-category-strip::-webkit-scrollbar{display:none}
.sm-strip-link{color:var(--saruar-muted);text-decoration:none;white-space:nowrap}
.sm-strip-link:hover,.sm-strip-link:focus-visible{color:var(--saruar-primary-text)}
.sm-strip-arrow{border:0;color:var(--saruar-primary-text);font-size:1.25rem;padding:.25rem .375rem}
.sm-all-categories{background:var(--saruar-surface);border-top:1px solid var(--saruar-border)}
.sm-menu-link,.saruar-quick-pill{color:var(--saruar-dark);display:inline-block;font-size:.875rem;text-decoration:none;white-space:nowrap}
.sm-menu-link{padding:.25rem .5rem}
.saruar-quick-pill{background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:2rem;padding:.25rem .75rem;transition:border-color .15s ease,color .15s ease}
.saruar-quick-pill .bi{color:var(--saruar-primary)}
.sm-menu-link:hover,.sm-menu-link:focus-visible,.saruar-quick-pill:hover,.saruar-quick-pill:focus-visible{border-color:var(--saruar-primary);color:var(--saruar-primary-text)}
.saruar-quick-pill.active{background:var(--saruar-primary);border-color:var(--saruar-primary);color:var(--saruar-white)}
.saruar-quick-pill.active .bi{color:var(--saruar-dark)}
.saruar-match>.saruar-category-card{border-color:var(--saruar-primary);box-shadow:0 0 0 1px var(--saruar-primary)}
.saruar-match>.sm-drawer-link{background:#fff7ed;border-radius:.375rem}
.sm-eyebrow{background:#fff7ed;color:var(--saruar-primary-text);font-weight:600}
.sm-recommended,#saruarAllCategoriesCollapse{scroll-margin-top:8rem}
.sm-empty-card{border:1px dashed var(--saruar-border);border-radius:.5rem;padding:2rem 1rem;text-align:center}
@media (min-width:992px){.row-cols-lg-7>*{flex:0 0 auto;width:14.285714%}}
.sm-footer{background:var(--saruar-surface);border-top:1px solid var(--saruar-border);color:var(--saruar-muted)}
.sm-footer h2,.sm-footer h3{color:var(--saruar-dark);font-weight:600}
.sm-footer .sm-footer-brand{color:var(--saruar-primary);font-weight:700}
.sm-footer a:not(.btn):not(.sm-product-link):not(.sm-card-wish):not(.sm-social-link){color:inherit;text-decoration:none}
/* Footer text links only: Suggested Items cards, their buttons and the social icons sit in the footer too and must look like everywhere else. */
.sm-footer a:not(.btn):not(.sm-product-link):not(.sm-card-wish):not(.sm-social-link):hover,.sm-footer a:not(.btn):not(.sm-product-link):not(.sm-card-wish):not(.sm-social-link):focus-visible{color:var(--saruar-primary-text)}
.sm-footer-contact li,.sm-footer-links li{margin-bottom:.5rem}
.sm-footer-band{border-bottom:1px solid var(--saruar-border)}
.sm-footer .sm-footer .sm-social-link{align-items:center;background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:50%;color:var(--saruar-primary);display:inline-flex;height:2.25rem;justify-content:center;width:2.25rem}
.sm-footer a.sm-social-link:hover,.sm-footer a.sm-social-link:focus-visible{border-color:var(--saruar-primary);text-decoration:none}
.sm-social-pending{color:var(--saruar-muted)}
/* Follow Us: every network in its own brand colour, linked or not yet. */
.sm-social-facebook{color:#1877f2}
.sm-social-instagram .bi{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sm-social-youtube{color:#f00}
.sm-social-linkedin{color:#0a66c2}
.sm-social-x{color:#000}
.sm-discount-badge{background:var(--saruar-primary);border-radius:.375rem;color:var(--saruar-white);display:inline-block;font-size:.8125rem;font-weight:600;padding:.25rem .5rem}
.sm-qr-badge{color:var(--saruar-dark);font-size:3.5rem;line-height:1}
.sm-footer-contact .bi{color:var(--saruar-primary);margin-right:.35rem}
.sm-app-box{background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:.5rem;padding:1rem}
.sm-footer-payments{border-top:1px solid var(--saruar-border)}
/* Payment logos: one 36px-high row. Card marks keep their 780x500 card (56x36); the others keep their own proportions. */
.sm-pay-logo{align-items:center;background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:.375rem;color:var(--saruar-dark);display:inline-flex;gap:.25rem;height:2.25rem;justify-content:center;min-width:3.5rem;overflow:hidden;padding:0 .5rem}
.sm-pay-svg{display:block;flex:none}
.sm-pay-logo-visa,.sm-pay-logo-mastercard,.sm-pay-logo-amex{border:0;padding:0;width:3.5rem}
.sm-pay-logo-visa .sm-pay-svg,.sm-pay-logo-mastercard .sm-pay-svg,.sm-pay-logo-amex .sm-pay-svg{height:2.25rem;width:3.5rem}
.sm-pay-logo-bkash,.sm-pay-logo-nagad{padding:0;width:3.75rem}
.sm-pay-logo-bkash .sm-pay-svg,.sm-pay-logo-nagad .sm-pay-svg{height:3.5rem;width:3.5rem}
.sm-pay-logo-sslcommerz .sm-pay-svg{height:1.375rem;width:6.353rem}
.sm-pay-logo-cod{font-size:.8125rem;font-weight:700}
.sm-pay-logo-cod .bi{color:#15803d;font-size:1.25rem}
.sm-footer-bottom{border-top:1px solid var(--saruar-border)}
.saruar-category-card{align-items:center;background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:.5rem;color:var(--saruar-dark);display:flex;flex-direction:column;font-size:.875rem;gap:.5rem;height:100%;justify-content:center;padding:1rem .5rem;text-align:center;text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.saruar-category-card .bi{color:var(--saruar-primary);font-size:1.75rem;line-height:1}
.saruar-category-card:hover,.saruar-category-card:focus-visible{border-color:var(--saruar-primary);box-shadow:0 .25rem .75rem rgba(15,23,42,.08);transform:translateY(-2px)}
.sm-nav-icon{display:inline-block;position:relative}
.saruar-cart-count{font-size:.625rem;position:absolute;right:-.75rem;top:-.25rem}
.sm-drawer-link{align-items:center;color:var(--saruar-dark);display:flex;gap:.75rem;padding:.75rem 1rem;text-decoration:none}
.sm-drawer-link .bi{color:var(--saruar-primary);font-size:1.125rem}
.sm-drawer-link:hover,.sm-drawer-link:focus-visible{background:var(--saruar-surface);color:var(--saruar-primary-text)}
.sm-support-list li{margin-bottom:.75rem}
.sm-support-list .bi{color:var(--saruar-primary);margin-right:.5rem}
.sm-support-list a{color:inherit}
.sm-empty-icon{color:var(--saruar-muted);font-size:3rem}
@media (max-width:991.98px){.sm-body{padding-bottom:calc(6.75rem + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.sm-category-strip{scroll-behavior:auto}.saruar-category-card,.sm-footer .saruar-quick-pill{transition:none}.saruar-category-card:hover,.saruar-category-card:focus-visible{transform:none}}
.sm-slider-track{position:relative;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:.25rem 0}
.sm-slider-track::-webkit-scrollbar{display:none}
.sm-slider-item{flex:0 0 calc((100% - 1rem)/2);scroll-snap-align:start}
@media (min-width:768px){.sm-slider-item{flex-basis:calc((100% - 2rem)/3)}}
@media (min-width:992px){.sm-slider-item{flex-basis:calc((100% - 3rem)/4)}}
@media (min-width:1200px){.sm-slider-item{flex-basis:calc((100% - 4rem)/5)}}
@media (prefers-reduced-motion:reduce){.sm-slider-track{scroll-behavior:auto}}
.sm-qty-stepper{max-width:10rem}
.sm-qty-stepper .form-control{-moz-appearance:textfield;appearance:textfield}
.sm-qty-stepper .form-control::-webkit-inner-spin-button,.sm-qty-stepper .form-control::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sm-faq-answer{white-space:pre-line}
.sm-error-page{margin:0 auto;max-width:34rem;padding:2rem 0;text-align:center}
.sm-error-page .sm-logo{align-items:center;display:inline-flex;gap:.375rem;justify-content:center}
.sm-error-code{color:var(--saruar-primary);font-size:clamp(4rem,18vw,7rem);font-weight:800;line-height:1;margin-bottom:.5rem}
.sm-error-search{margin-left:auto;margin-right:auto;max-width:24rem}
.saruar-mobile-bottom-nav{padding:0 .5rem calc(.5rem + env(safe-area-inset-bottom));pointer-events:none}
.sm-mobile-bar{background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:1.25rem;box-shadow:0 .5rem 1.5rem rgba(15,23,42,.12);margin:0 auto;max-width:30rem;pointer-events:auto}
.saruar-mobile-item{flex:1 1 0;min-width:0}
.sm-mobile-link{align-items:center;background:none;border:0;border-radius:1rem;color:var(--saruar-muted);display:flex;flex-direction:column;font-size:.6875rem;font-weight:500;gap:.25rem;height:var(--saruar-nav-height);justify-content:center;min-width:2.75rem;padding:0 .125rem;position:relative;text-decoration:none;width:100%}
.sm-mobile-link>.bi{font-size:1.375rem;line-height:1}
.sm-mobile-link>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-mobile-link:focus-visible,.sm-mobile-link.active{color:var(--saruar-primary-text)}
@media (hover:hover){.sm-mobile-link:hover{color:var(--saruar-primary-text)}}
.sm-mobile-link:focus-visible{outline:2px solid var(--saruar-primary-text);outline-offset:-2px}
.sm-mobile-link.active{font-weight:700}
.sm-mobile-link.active:not(.sm-mobile-center)::before{background:var(--saruar-primary);border-radius:0 0 .25rem .25rem;content:"";height:.1875rem;left:50%;position:absolute;top:0;transform:translateX(-50%);width:1.5rem}
.sm-mobile-center{justify-content:flex-end;padding-bottom:.75rem}
.sm-nav-fab{align-items:center;background:var(--saruar-primary);border:.25rem solid var(--saruar-white);border-radius:50%;box-shadow:0 .375rem 1rem rgba(248,86,6,.35);color:var(--saruar-white);display:flex;font-size:1.5rem;height:3.5rem;justify-content:center;left:50%;position:absolute;top:-1.75rem;transform:translateX(-50%);width:3.5rem}
.sm-nav-fab .saruar-cart-count{border:2px solid var(--saruar-white);right:-.375rem;top:-.25rem}
.sm-mobile-center.active .sm-nav-fab,.sm-mobile-center:focus-visible .sm-nav-fab{box-shadow:0 0 0 .1875rem var(--saruar-primary-text),0 .375rem 1rem rgba(248,86,6,.35)}
.sm-status-select{font-weight:600;min-width:8.5rem}
.sm-status-select[data-status=Pending]{background-color:#fff3cd;border-color:#ffda6a;color:#664d03}
.sm-status-select[data-status=Processing]{background-color:#cff4fc;border-color:#9eeaf9;color:#055160}
.sm-status-select[data-status=Completed]{background-color:#d1e7dd;border-color:#a3cfbb;color:#0a3622}
.sm-status-select[data-status=Cancelled]{background-color:#f8d7da;border-color:#f1aeb5;color:#58151c}
.sm-status-select option{background-color:var(--saruar-white);color:var(--saruar-dark)}
/* Cart, wishlist, account, checkout and thank-you pages. Phones first: table rows stack as cards with labels. */
.sm-page-hero{background:#f3f4f6;overflow:hidden;padding:2rem 1rem 1.75rem;position:relative;text-align:center}
.sm-page-hero::before,.sm-page-hero::after{background-image:radial-gradient(#d1d5db 2px,transparent 2.5px);background-size:12px 12px;content:"";height:2.5rem;position:absolute;width:6rem}
.sm-page-hero::before{bottom:.5rem;left:10%}
.sm-page-hero::after{right:10%;top:.5rem}
.sm-page-hero-title{font-size:1.75rem;font-weight:700;margin-bottom:.25rem;position:relative}
.sm-page-hero-crumbs{display:flex;font-size:.875rem;gap:.375rem;justify-content:center;list-style:none;margin:0;padding:0;position:relative}
.sm-page-hero-crumbs li+li::before{color:var(--saruar-muted);content:"/";margin-right:.375rem}
.sm-page-hero-crumbs a{color:var(--saruar-dark)}
.sm-shop-table{border-collapse:separate;border-spacing:0;width:100%}
.sm-shop-table thead{display:none}
.sm-shop-table tbody tr{align-items:center;border-bottom:1px solid var(--saruar-border);display:flex;flex-wrap:wrap;gap:.5rem .75rem;padding:1rem 0}
.sm-shop-table td{display:block;padding:0}
.sm-shop-table td.sm-shop-product{flex:1 1 0;min-width:0}
.sm-shop-table td.sm-shop-product{order:-2}
.sm-shop-table td.sm-shop-remove{order:-1}
@media (max-width:575.98px){.sm-page-hero::before,.sm-page-hero::after{width:3.5rem}.sm-page-hero::before{left:3%}.sm-page-hero::after{right:3%}}
.sm-shop-table td[data-label],.sm-shop-table td.sm-shop-action{width:100%}
.sm-shop-table td[data-label]{align-items:center;display:flex;justify-content:space-between}
.sm-shop-table td[data-label]::before{color:var(--saruar-muted);content:attr(data-label);font-size:.875rem}
.sm-shop-action .btn{width:100%}
.sm-shop-item{align-items:center;display:flex;gap:.75rem;min-width:0}
.sm-shop-item a{color:var(--saruar-dark);font-weight:600;text-decoration:none}
.sm-shop-thumb{align-items:center;background:var(--saruar-surface);border-radius:.5rem;color:var(--saruar-primary);display:inline-flex;flex:0 0 3.5rem;font-size:1.5rem;height:3.5rem;justify-content:center;width:3.5rem}
.sm-shop-sub{color:var(--saruar-muted);display:block;font-size:.8125rem}
@media (min-width:768px){
.sm-shop-table thead{display:table-header-group}
.sm-shop-table tbody tr{display:table-row}
.sm-shop-table th,.sm-shop-table td,.sm-shop-table td[data-label]{border-bottom:1px solid var(--saruar-border);display:table-cell;padding:1rem .75rem;vertical-align:middle;width:auto}
.sm-shop-table thead th{background:var(--saruar-primary);border:0;color:var(--saruar-white);font-weight:600;white-space:nowrap}
.sm-shop-table thead th:first-child{border-radius:.5rem 0 0 .5rem}
.sm-shop-table thead th:last-child{border-radius:0 .5rem .5rem 0}
.sm-shop-table td[data-label]::before{content:none}
.sm-shop-table td[data-label]{white-space:nowrap}
.sm-shop-table td.sm-shop-remove{width:3.5rem}
.sm-shop-action .btn{width:auto}
.sm-shop-table td.sm-shop-action{text-align:right;white-space:nowrap;width:1%}
}
.sm-icon-button{align-items:center;background:none;border:0;border-radius:50%;color:var(--saruar-dark);display:inline-flex;font-size:1.125rem;height:2.75rem;justify-content:center;width:2.75rem}
.sm-icon-button:focus-visible,.sm-account-tab:focus-visible{outline:2px solid var(--saruar-primary);outline-offset:2px}
.sm-qty-pill{border:1px solid var(--saruar-border);border-radius:2rem;flex-wrap:nowrap;max-width:8.5rem;overflow:hidden}
.sm-qty-pill .btn{border:0;min-height:2.75rem;min-width:2.75rem}
.sm-qty-pill .form-control{border:0;padding-inline:0}
.btn.rounded-pill{min-height:2.75rem;padding-inline:1.5rem}
.form-control.rounded-pill,.form-select.rounded-pill{min-height:2.75rem;padding-inline:1rem}
.sm-rounded-field{border-radius:1rem}
.sm-text-link{align-items:center;color:var(--saruar-dark);display:inline-flex;font-weight:600;min-height:2.75rem;text-decoration:none}
.sm-shop-table-foot{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding-top:1.25rem}
.sm-coupon-form,.sm-share-link{align-items:center;display:flex;flex:1 1 18rem;flex-wrap:wrap;gap:.5rem;max-width:32rem}
.sm-coupon-form .form-control,.sm-share-link .form-control{flex:1 1 10rem}
.sm-share-actions{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}
.sm-summary-card,.sm-form-card{border:1px solid var(--saruar-border);border-radius:.75rem;padding:1.25rem}
.sm-summary-title{border-bottom:1px solid var(--saruar-border);font-size:1rem;font-weight:700;margin-bottom:.75rem;padding-bottom:.75rem}
.sm-summary-lines{margin:0}
.sm-summary-lines div{display:flex;font-size:.9375rem;justify-content:space-between;padding:.375rem 0}
.sm-summary-lines dt{color:var(--saruar-muted);font-weight:400}
.sm-summary-lines dd{font-weight:600;margin:0}
.sm-summary-total{border-top:1px solid var(--saruar-border);display:flex;font-size:1.0625rem;justify-content:space-between;margin:.75rem 0 1rem;padding-top:.75rem}
.sm-summary-warning{color:#b91c1c;font-size:.875rem;margin:.25rem 0 .5rem}
.sm-summary-items{border-top:1px solid var(--saruar-border);font-size:.875rem;margin:0 0 1rem;padding-top:.75rem}
.sm-summary-items li{display:flex;gap:.75rem;justify-content:space-between;padding:.25rem 0}
.sm-coupon-chip{background:#fff7ed;border-radius:1rem;color:var(--saruar-primary-text);font-size:.75rem;font-weight:600;margin-left:.25rem;padding:.125rem .5rem}
.sm-service-strip{border-top:1px solid var(--saruar-border);display:grid;gap:1rem;margin:2.5rem 0 0;padding:1.5rem 0 0}
.sm-service-strip li{align-items:center;display:flex;gap:.75rem}
.sm-service-strip i{color:var(--saruar-primary);font-size:2rem}
.sm-service-strip strong{display:block}
.sm-service-strip span{color:var(--saruar-muted);font-size:.875rem}
@media (min-width:768px){.sm-service-strip{grid-template-columns:repeat(3,1fr)}}
.sm-stock{font-size:.875rem;font-weight:600}
.sm-stock-in{color:#15803d}
.sm-stock-out{color:#b91c1c}
.sm-wishlist-button{margin-top:.75rem}
.sm-account-nav{display:flex;flex-direction:column;gap:.5rem}
.sm-account-nav form{margin:0}
.sm-account-tab{align-items:center;background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:.5rem;color:var(--saruar-dark);display:flex;min-height:2.75rem;padding:.5rem 1rem;text-align:left;text-decoration:none;width:100%}
.sm-account-tab.active{background:var(--saruar-primary);border-color:var(--saruar-primary);color:var(--saruar-white);font-weight:600}
.sm-account-avatar{align-items:center;background:#fff7ed;border:2px solid var(--saruar-primary);border-radius:50%;color:var(--saruar-primary-text);display:flex;font-size:1.75rem;font-weight:700;height:6rem;justify-content:center;margin-bottom:1.25rem;width:6rem}
.sm-order-status{background:var(--saruar-surface);border-radius:1rem;font-size:.8125rem;font-weight:600;padding:.25rem .625rem}
.sm-order-status-processing{background:#fff7ed;color:var(--saruar-primary-text)}
.sm-order-status-completed{background:#dcfce7;color:#166534}
.sm-order-status-cancelled{background:#fee2e2;color:#991b1b}
.sm-payment-icon{color:var(--saruar-primary);font-size:2rem}
.sm-thanks-card{border:1px solid var(--saruar-border);border-radius:.75rem;margin:0 auto;max-width:32rem;padding:2rem 1.25rem;text-align:center}
.sm-thanks-icon{align-items:center;background:var(--saruar-primary);border-radius:50%;color:var(--saruar-white);display:inline-flex;font-size:2rem;height:4rem;justify-content:center;width:4rem}
@media (hover:hover){.sm-icon-button:hover{background:var(--saruar-surface)}.sm-account-tab:not(.active):hover{border-color:var(--saruar-primary)}}
/* Recommended Categories slider: the same cards per row the grid had (2, 3, 4, 7), with the 1rem gap of the slider track. */
/* Shelves (Recommended Categories, Just for You, Suggested Items, Recommended for You): a white box with a soft drop shadow. */
.sm-shelf{--saruar-shelf-pad:.75rem;background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:.75rem;box-shadow:0 .5rem 1.5rem rgba(15,23,42,.08),0 .125rem .25rem rgba(15,23,42,.04);padding:var(--saruar-shelf-pad)}
@media (min-width:768px){.sm-shelf{--saruar-shelf-pad:1.25rem}}
/* Edge fade: the row reaches into the box padding and fades there, so cards fade only as they scroll in or out; a snapped card sits fully clear of the fade. */
.sm-fade-edges{margin-inline:calc(-1 * var(--saruar-shelf-pad));padding-inline:var(--saruar-shelf-pad);scroll-padding-inline:var(--saruar-shelf-pad);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--saruar-shelf-pad),#000 calc(100% - var(--saruar-shelf-pad)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--saruar-shelf-pad),#000 calc(100% - var(--saruar-shelf-pad)),transparent)}
.sm-slider-arrow{align-items:center;display:inline-flex;height:2.75rem;justify-content:center;padding:0;width:2.75rem}
/* Slider arrows: orange fill with a white arrow under a mouse or when pressed, never the grey hover; phones skip the hover so a tapped arrow does not stay orange. */
.sm-slider-arrow{--bs-btn-hover-color:var(--bs-btn-color);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--bs-btn-border-color);--bs-btn-active-color:var(--saruar-white);--bs-btn-active-bg:var(--saruar-primary);--bs-btn-active-border-color:var(--saruar-primary);--bs-btn-focus-shadow-rgb:248,86,6}
@media (hover:hover){.sm-slider-arrow{--bs-btn-hover-color:var(--saruar-white);--bs-btn-hover-bg:var(--saruar-primary);--bs-btn-hover-border-color:var(--saruar-primary)}}
/* Suggested Items: compact cards, a short picture area so the shelf is about half as tall. */
.sm-shelf-compact .sm-product-thumb{font-size:2.25rem;height:5.5rem}
/* Orange outlined pill, 44px tall (View More, the product page's Add to Cart): fills orange under a mouse or when pressed; phones skip the hover so a tap does not stay orange. */
.sm-btn-outline-primary{--bs-btn-color:var(--saruar-primary-text);--bs-btn-border-color:var(--saruar-primary-text);--bs-btn-hover-color:var(--saruar-primary-text);--bs-btn-hover-bg:transparent;--bs-btn-hover-border-color:var(--saruar-primary-text);--bs-btn-active-color:var(--saruar-white);--bs-btn-active-bg:var(--saruar-primary-text);--bs-btn-active-border-color:var(--saruar-primary-text);--bs-btn-disabled-color:var(--saruar-primary-text);--bs-btn-disabled-border-color:var(--saruar-primary-text);--bs-btn-focus-shadow-rgb:248,86,6;align-items:center;display:inline-flex;font-weight:600;gap:.375rem;justify-content:center;min-height:2.75rem;padding-inline:2rem}
@media (hover:hover){.sm-btn-outline-primary{--bs-btn-hover-color:var(--saruar-white);--bs-btn-hover-bg:var(--saruar-primary-text)}}
/* Product page: Add to Cart and Buy Now always side by side - halves of the row on phones, natural width from 768px. */
.sm-buy-actions{display:flex;flex-wrap:nowrap;gap:.75rem}
.sm-buy-actions .btn{flex:1 1 0;min-height:3rem;min-width:0;padding-inline:.75rem;white-space:nowrap}
@media (min-width:768px){.sm-buy-actions .btn{flex:0 0 auto;padding-inline:1.75rem}}
/* Product page facts (SKU, brand, category, availability): label on the left, value on the right. */
.sm-product-facts{border-block:1px solid var(--saruar-border);display:grid;gap:.5rem 1rem;grid-template-columns:max-content 1fr;margin:1rem 0;padding-block:.75rem}
.sm-product-facts dt{color:var(--saruar-muted);font-weight:500}
.sm-product-facts dd{margin:0}
/* Product description from the Quill editor: the formatting classes the sanitizer keeps, styled without loading Quill on the shop. */
.sm-product-description{overflow-wrap:anywhere}
/* The editor wraps each list item's text in a paragraph; without this every bullet gets a paragraph gap. */
.sm-product-description li>p{margin:0}
.sm-product-description .ql-align-center{text-align:center}.sm-product-description .ql-align-right{text-align:right}.sm-product-description .ql-align-justify{text-align:justify}
.sm-product-description .ql-size-small{font-size:.75em}.sm-product-description .ql-size-large{font-size:1.5em}.sm-product-description .ql-size-huge{font-size:2.5em}
.sm-product-description .ql-font-serif{font-family:Georgia,"Times New Roman",serif}.sm-product-description .ql-font-monospace{font-family:SFMono-Regular,Consolas,"Courier New",monospace}
.sm-product-description .ql-direction-rtl{direction:rtl}
.sm-product-description .ql-indent-1{padding-inline-start:3em}.sm-product-description .ql-indent-2{padding-inline-start:6em}.sm-product-description .ql-indent-3{padding-inline-start:9em}.sm-product-description .ql-indent-4{padding-inline-start:12em}.sm-product-description .ql-indent-5{padding-inline-start:15em}.sm-product-description .ql-indent-6{padding-inline-start:18em}.sm-product-description .ql-indent-7{padding-inline-start:21em}.sm-product-description .ql-indent-8{padding-inline-start:24em}
.sm-product-description blockquote{border-inline-start:4px solid var(--saruar-border);color:var(--saruar-muted);margin:0 0 1rem;padding-inline-start:1rem}
.sm-product-description pre{background:var(--saruar-surface);border-radius:.5rem;padding:.75rem 1rem;white-space:pre-wrap}
/* Admin description editor (Tiptap): one rounded box like the screenshot, toolbar on top; the writing area reuses the shop's description styles. */
.sm-tiptap{background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:.75rem}
.sm-tiptap.is-invalid{border-color:var(--bs-form-invalid-border-color)}
.sm-tiptap:focus-within{border-color:var(--saruar-primary);box-shadow:0 0 0 .2rem rgba(248,86,6,.15)}
.sm-tiptap-toolbar{align-items:center;border-bottom:1px solid var(--saruar-border);display:flex;flex-wrap:wrap;gap:.25rem .5rem;padding:.5rem .75rem}
.sm-tt-group{align-items:center;display:flex;gap:.125rem}
.sm-tt-btn{align-items:center;background:none;border:0;border-radius:.375rem;color:var(--saruar-dark);cursor:pointer;display:inline-flex;font-size:1.05rem;height:2.25rem;justify-content:center;margin:0;width:2.25rem}
.sm-tt-btn[aria-pressed="true"]{background:#fff7ed;color:var(--saruar-primary-text)}
@media (hover:hover){.sm-tt-btn:hover{background:var(--saruar-surface);color:var(--saruar-primary-text)}}
.sm-tt-btn:focus-visible,.sm-tt-color:focus-within{outline:2px solid var(--saruar-primary);outline-offset:1px}
.sm-tt-color{position:relative}
.sm-tt-color input{cursor:pointer;height:100%;inset:0;opacity:0;position:absolute;width:100%}
.sm-tt-select{background-color:transparent;background-position:right .25rem center;border:0;font-size:.875rem;padding-inline:.375rem 1.5rem;width:auto}
.sm-tiptap-body .tiptap{min-height:14rem;outline:0;padding:.75rem 1rem}
.sm-tiptap-body .tiptap p.is-editor-empty:first-child::before{color:var(--saruar-muted);content:attr(data-placeholder);float:left;height:0;pointer-events:none}
.sm-tiptap-body .tiptap ul,.sm-tiptap-body .tiptap ol{padding-inline-start:1.5rem}
.sm-stock-in{color:#15803d;font-weight:600}
.sm-stock-out{color:#b91c1c;font-weight:600}
/* The quantity pill's minus and plus in orange, filling orange under a mouse. */
.sm-qty-pill .btn{color:var(--saruar-primary-text)}
@media (hover:hover){.sm-qty-pill .btn:hover{background:var(--saruar-primary);color:var(--saruar-white)}}
.sm-qty-pill:focus-within{border-color:var(--saruar-primary);box-shadow:0 0 0 .2rem rgba(248,86,6,.18)}
/* Brand tiles and the Flash Sale row: the same tiles per view the grid had (2, 3, 6). */
.sm-tile-slide{flex:0 0 calc((100% - 1rem)/2);min-width:0;scroll-snap-align:start}
@media (max-width:374.98px){.sm-tile-slide .sm-brand-tile{flex-direction:column;gap:.375rem;padding:.75rem .5rem;text-align:center}}
@media (min-width:768px){.sm-tile-slide{flex-basis:calc((100% - 2rem)/3)}}
@media (min-width:992px){.sm-tile-slide{flex-basis:calc((100% - 5rem)/6)}}
/* Storefront buttons: capsule pills (icon-only square buttons become circles); orange ones get a soft glow. Admin pages keep their own shapes. */
.sm-store .btn{--bs-btn-border-radius:50rem}
.sm-store .sm-btn-primary{box-shadow:0 .25rem .75rem rgba(248,86,6,.22)}
.sm-store .sm-btn-primary:disabled{box-shadow:none}
/* Header search: a pill field with the orange button as its rounded end, and an orange focus ring. */
.sm-header-search .form-control{border-radius:50rem;padding-inline-start:1.25rem}
.sm-header-search .form-control:focus{border-color:var(--saruar-primary);box-shadow:0 0 0 .2rem rgba(248,86,6,.18)}
.sm-header-search .sm-btn-primary{box-shadow:none;padding-inline:1.25rem}
.sm-category-slide{flex:0 0 calc((100% - 1rem)/2);scroll-snap-align:start}
.sm-category-slide .saruar-category-card{height:100%}
@media (min-width:576px){.sm-category-slide{flex-basis:calc((100% - 2rem)/3)}}
@media (min-width:768px){.sm-category-slide{flex-basis:calc((100% - 3rem)/4)}}
@media (min-width:992px){.sm-category-slide{flex-basis:calc((100% - 6rem)/7)}}
/* Checkout area search: the list opens under the box, 44px rows, orange for the row being chosen. */
.sm-area-field{position:relative}
.sm-area-results{background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:.75rem;box-shadow:0 .5rem 1rem rgba(15,23,42,.12);left:calc(var(--bs-gutter-x)*.5);margin-top:.25rem;max-height:16rem;overflow-y:auto;padding:.25rem;position:absolute;right:calc(var(--bs-gutter-x)*.5);z-index:1035}
.sm-area-option,.sm-area-empty{align-items:center;border-radius:.5rem;display:flex;min-height:2.75rem;padding:.5rem .75rem}
.sm-area-option{cursor:pointer}
.sm-area-option.active{background:#fff7ed;color:var(--saruar-primary-text)}
.sm-area-empty{color:var(--saruar-muted)}
@media (hover:hover){.sm-area-option:hover{background:#fff7ed}}
/* Checkout payment choice: whole row is the tap target, orange when chosen. */
.sm-payment-methods{border:0;margin:0;padding:0}
.sm-payment-option{border:1px solid var(--saruar-border);border-radius:.75rem;margin-bottom:.5rem;min-height:2.75rem;padding:.625rem .75rem .625rem 2.5rem}
.sm-payment-option .form-check-input{margin-left:-1.75rem}
.sm-payment-option .form-check-input:checked{background-color:var(--saruar-primary);border-color:var(--saruar-primary)}
.sm-payment-option:has(:checked){background:#fff7ed;border-color:var(--saruar-primary)}
.sm-payment-option .form-check-label{display:block}
/* Clickable orange fills turn their text black on hover, like the orange buttons. */
@media (hover:hover){.saruar-quick-pill.active:hover,.sm-account-tab.active:hover{color:var(--saruar-dark)}}
/* Header: one row at every width - logo, then search taking the space left, then Track Order, Wishlist, Cart and Account. Search never drops to a row of its own. */
.sm-header-row{align-items:center;display:flex;flex-wrap:nowrap;gap:1rem;position:relative}
/* The shop name with "(Online Shopping)" under it, both beside the bag icon. */
.sm-header-row .sm-logo{align-items:center;column-gap:.375rem;display:inline-grid;flex:0 0 auto;grid-template-columns:auto auto;line-height:1.15;min-width:0;order:1}
.sm-header-row .sm-logo .bi{grid-row:span 2}
.sm-header-row .sm-logo-tag{grid-column:2}
.sm-header-actions{align-items:center;display:flex;flex:0 0 auto;gap:.25rem;order:3}
.sm-header-search{flex:1 1 0;min-width:0;order:2}
/* Below 768px the search box is narrow, so its suggestions open across the whole header row instead of under the box alone. */
@media (max-width:767.98px){.sm-header-search.position-relative{position:static!important}}
.sm-header-search .input-group{flex-wrap:nowrap}
.sm-header-search .form-control{min-width:0}
.sm-header-search .sm-btn-primary{flex:0 0 auto;min-width:2.75rem}
/* Each button: its icon centred above its word. */
.sm-header-actions .sm-header-link{background:none;border:0;border-radius:.5rem;flex-direction:column;gap:.125rem;justify-content:center;line-height:1.1;min-height:2.75rem;min-width:2.75rem;padding:0 .375rem}
/* Hidden on screen below 768px but still read aloud, so every header button keeps its name. */
.sm-header-label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
.sm-header-link .sm-account-caret{font-size:.75rem}
.sm-account-menu{border-radius:.75rem;min-width:12rem;padding:.375rem}
.sm-account-menu .dropdown-item{align-items:center;border-radius:.5rem;display:flex;gap:.5rem;min-height:2.75rem}
.sm-account-menu .dropdown-item .bi{color:var(--saruar-primary)}
.sm-account-menu .dropdown-item:active{background:var(--saruar-primary);color:var(--saruar-white)}
.sm-account-menu .dropdown-item:active .bi{color:var(--saruar-white)}
.sm-account-hello{color:var(--saruar-muted);font-size:.875rem}
/* Phones: the logo shrinks to its bag icon (the shop name is still read aloud) so search and all four buttons fit beside it. */
@media (max-width:575.98px){.sm-header-row{gap:.5rem}.sm-header-row .sm-logo{font-size:1.5rem}.sm-header-row .sm-logo-name,.sm-header-row .sm-logo-tag{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sm-header-actions{gap:0}.sm-header-actions .sm-header-link{min-width:2.5rem;padding:0 .25rem}.sm-header-search .sm-btn-primary{padding-inline:.75rem}.sm-header-search .form-control{padding-inline-start:.875rem}}
@media (max-width:374.98px){.sm-header-row{gap:.375rem}.sm-header-row .sm-logo{font-size:1.375rem}.sm-header-actions .sm-header-link{min-width:2.25rem;padding:0 .125rem}}
/* Large phones and small tablets: a smaller full logo leaves the search room. */
@media (min-width:576px) and (max-width:767.98px){.sm-header-row .sm-logo{font-size:1.125rem}}
@media (min-width:768px){.sm-header-label{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:normal;width:auto}.sm-header-actions .sm-header-link{font-size:.75rem;min-width:3.5rem}}
@media (min-width:1200px){.sm-header-search{flex:1 1 0;margin-inline:auto;max-width:26rem;order:2}.sm-header-actions{gap:1rem;order:3}}
.sm-cart-drawer{--bs-offcanvas-width:28rem}
.sm-cart-drawer .offcanvas-header{border-bottom:1px solid var(--saruar-border);margin-inline:1rem;padding-inline:0}
.sm-cart-drawer .offcanvas-title{font-size:1.5rem;font-weight:500;margin:0}
.sm-drawer-lines{border-bottom:1px solid var(--saruar-border);margin:0 0 1.25rem;padding:0 0 .75rem}
.sm-drawer-line{align-items:center;display:grid;gap:.25rem .75rem;grid-template-areas:"thumb info qty price remove";grid-template-columns:3.5rem minmax(0,1fr) auto 6.5rem auto;padding:.5rem 0}
.sm-drawer-thumb{align-items:center;background:var(--saruar-surface);border:1px solid var(--saruar-border);border-radius:.5rem;color:var(--saruar-muted);display:flex;font-size:1.5rem;grid-area:thumb;height:3.5rem;justify-content:center;width:3.5rem}
.sm-drawer-info{grid-area:info;min-width:0}
.sm-drawer-info a{color:var(--saruar-dark);display:block;overflow-wrap:anywhere;text-decoration:none}
.sm-drawer-sub{color:var(--saruar-muted);display:block;font-size:.8125rem}
.sm-drawer-qty{grid-area:qty}
.sm-drawer-qty .sm-qty-stepper{border:1px solid var(--saruar-border);border-radius:.375rem;flex-wrap:nowrap;width:auto}
.sm-drawer-qty .btn{border:0;color:var(--saruar-muted);min-height:2.75rem;min-width:2rem;padding:0}
.sm-drawer-qty .form-control{border:0;flex:0 0 1.75rem;font-size:.875rem;padding:0;width:1.75rem}
.sm-drawer-price{font-weight:600;grid-area:price;text-align:end;white-space:nowrap}
.sm-drawer-remove{grid-area:remove}
.sm-drawer-remove .sm-icon-button{color:var(--saruar-muted)}
@media (max-width:479.98px){.sm-drawer-line{grid-template-areas:"thumb info info info" "thumb qty price remove";grid-template-columns:3.5rem auto minmax(0,1fr) auto}}
.sm-drawer-promo .form-control{border-color:var(--saruar-border);min-height:2.75rem}
.sm-drawer-apply,.sm-drawer-continue{--bs-btn-border-color:var(--saruar-border);--bs-btn-hover-border-color:var(--saruar-border);--bs-btn-active-border-color:var(--saruar-border);--bs-btn-color:var(--saruar-dark);--bs-btn-hover-color:var(--saruar-dark);font-weight:600;min-height:2.75rem}
.sm-drawer-note{border-bottom:1px dashed var(--saruar-border);color:var(--saruar-muted);font-size:.8125rem;margin:.5rem 0 0;min-height:2.25rem;padding-bottom:1rem}
.sm-drawer-totals{border-bottom:1px dashed var(--saruar-border);margin:1rem 0;padding-bottom:.5rem}
.sm-drawer-totals div{display:flex;gap:1rem;justify-content:space-between;margin-bottom:.5rem}
.sm-drawer-totals dt{font-weight:400}
.sm-drawer-totals dd{margin:0;text-align:end}
.sm-drawer-minor{color:var(--saruar-muted);font-size:.8125rem}
.sm-drawer-total{display:flex;justify-content:space-between;margin-bottom:1rem}
.sm-drawer-total strong{font-size:1.125rem}
.sm-cart-drawer .sm-btn-primary{margin-bottom:.5rem;min-height:2.75rem}
@media (hover:hover){.sm-drawer-apply,.sm-drawer-continue{--bs-btn-hover-bg:var(--saruar-surface)}}
.sm-auth-stage{--saruar-auth-dark:#9e9e9e;--saruar-auth-input:#eee;--saruar-auth-line:#ddd;align-items:center;background:var(--saruar-auth-dark);display:flex;font-family:Montserrat,var(--bs-font-sans-serif);justify-content:center;padding:3rem 0}
.sm-auth-slider{background:var(--saruar-white);border-radius:12px;box-shadow:0 14px 28px rgba(0,0,0,.25);height:480px;overflow:hidden;position:relative;width:min(768px,95%)}
.sm-auth-slider h2{font-size:1.75rem;font-weight:700;margin:0 0 .75rem}
.sm-auth-form{height:100%;left:0;position:absolute;top:0;transition:transform .6s ease-in-out,opacity .3s ease-in-out .3s;width:50%}
.sm-auth-form form{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;overflow-y:auto;padding:1.5rem 2.5rem;text-align:center}
.sm-auth-form h2{color:var(--saruar-dark)}
.sm-auth-signin{z-index:2}
.sm-auth-signup{opacity:0;transition-delay:0s,0s;z-index:1}
.is-register .sm-auth-signin{opacity:0;transform:translateX(100%);transition-delay:0s,0s}
.is-register .sm-auth-signup{opacity:1;transform:translateX(100%);transition-delay:0s,.3s;z-index:5}
.sm-auth-social{display:flex;gap:10px;justify-content:center;list-style:none;margin:0 0 .75rem;padding:0}
.sm-auth-social a{align-items:center;border:1px solid var(--saruar-auth-line);border-radius:6px;color:var(--saruar-dark);display:flex;font-size:.875rem;height:2.75rem;justify-content:center;text-decoration:none;width:2.75rem}
.sm-auth-social a:focus-visible,.sm-auth-forgot:focus-visible,.sm-auth-ghost:focus-visible{outline:2px solid var(--saruar-primary);outline-offset:2px}
.sm-auth-small{color:var(--saruar-muted);font-size:.6875rem;font-weight:500}
p.sm-auth-small{margin:0 0 .75rem}
.sm-auth-form .form-control{background:var(--saruar-auth-input);border:0;border-radius:4px;flex:0 0 auto;font-size:.8125rem;height:2.5rem;margin-bottom:.5rem;padding:0 .75rem;width:100%}
.sm-auth-form .form-control::placeholder{color:var(--saruar-muted);font-size:.75rem}
.sm-auth-form .form-control:focus{box-shadow:0 0 0 2px var(--saruar-primary)}
.sm-auth-form .form-control.is-invalid{box-shadow:0 0 0 1px var(--bs-form-invalid-border-color)}
.sm-auth-error{color:var(--bs-form-invalid-color);font-size:.6875rem;margin:-.25rem 0 .5rem;text-align:start;width:100%}
.sm-auth-status{background:var(--bs-success-bg-subtle);border-radius:4px;color:var(--bs-success-text-emphasis);font-size:.75rem;margin:0 0 .5rem;padding:.5rem;width:100%}
.sm-auth-remember{margin:.25rem 0 0;min-height:auto}
.sm-auth-forgot{align-items:center;display:inline-flex;min-height:2.75rem;text-decoration:none}
.sm-auth-submit,.sm-auth-ghost{border-radius:6px;font-size:.75rem;font-weight:700;letter-spacing:1px;min-height:2.75rem;padding:.625rem 2.8rem;text-transform:uppercase;transition:transform 80ms ease-in}
.sm-auth-submit:active,.sm-auth-ghost:active{transform:scale(.95)}
.sm-auth-overlay-wrap{border-radius:0 12px 12px 0;height:100%;left:50%;overflow:hidden;position:absolute;top:0;transition:transform .6s ease-in-out,border-radius .6s ease-in-out;width:50%;z-index:100}
.is-register .sm-auth-overlay-wrap{border-radius:12px 0 0 12px;transform:translateX(-100%)}
.sm-auth-overlay{background:var(--saruar-primary);color:var(--saruar-white);height:100%;left:-100%;position:relative;transition:transform .6s ease-in-out;width:200%}
.is-register .sm-auth-overlay{transform:translateX(50%)}
.sm-auth-panel{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;padding:0 2.5rem;position:absolute;text-align:center;top:0;transition:transform .6s ease-in-out;width:50%}
.sm-auth-panel p{font-size:.75rem;margin:0 0 1.25rem}
.sm-auth-panel-left{transform:translateX(-20%)}
.is-register .sm-auth-panel-left{transform:none}
.sm-auth-panel-right{right:0}
.is-register .sm-auth-panel-right{transform:translateX(20%)}
.sm-auth-ghost{align-items:center;background:transparent;border:1.5px solid var(--saruar-white);color:var(--saruar-white);display:inline-flex;text-decoration:none}
@media (hover:hover){.sm-auth-social a:hover{border-color:var(--saruar-primary);color:var(--saruar-primary)}.sm-auth-forgot:hover{color:var(--saruar-dark)}.sm-auth-ghost:hover{background:var(--saruar-white);color:var(--saruar-primary-text)}}
/* Parts only the phone layout shows; on desktop their wrappers vanish so the sliding card lays out as before. */
.sm-auth-hero,.sm-auth-switch,.sm-auth-pass-icon,.sm-auth-eye{display:none}
.sm-auth-sheet,.sm-auth-pass,.sm-auth-row{display:contents}
.sm-auth-label{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
/* Phones: no slide. One form at a time: an orange top with its title, then a white sheet with the fields. */
@media (max-width:767.98px){.sm-auth-stage{align-items:stretch;background:var(--saruar-primary);padding:0}.sm-auth-slider{background:none;border-radius:0;box-shadow:none;height:auto;overflow:visible;width:100%}.sm-auth-form,.is-register .sm-auth-form{height:auto;opacity:1;position:static;transform:none;transition:none;width:100%}.sm-auth-slider:not(.is-register) .sm-auth-signup,.is-register .sm-auth-signin,.sm-auth-overlay-wrap{display:none}.sm-auth-form form{display:block;height:auto;overflow:visible;padding:0;text-align:start}.sm-auth-hero{align-items:center;color:var(--saruar-white);display:flex;flex-direction:column;justify-content:center;min-height:13rem;padding:2rem 1rem 3.5rem;text-align:center}.sm-auth-hero strong{font-size:1.5rem;font-weight:700}.sm-auth-hero span{font-size:.875rem;font-weight:700}.sm-auth-sheet{background:var(--saruar-white);border-radius:1.5rem 1.5rem 0 0;display:flex;flex-direction:column;margin-top:-1.5rem;padding:2rem 1.5rem 2.5rem}.sm-auth-form h2,p.sm-auth-small{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sm-auth-label{clip:auto;color:var(--saruar-dark);font-size:.75rem;font-weight:500;height:auto;margin:0 0 .25rem;overflow:visible;position:static;width:auto}.sm-auth-form .form-control{background:var(--saruar-white);border:1px solid var(--saruar-auth-line);border-radius:6px;height:2.75rem;margin-bottom:1rem}.sm-auth-form .form-control:focus{border-color:var(--saruar-primary);box-shadow:0 0 0 1px var(--saruar-primary)}.sm-auth-pass{display:block;position:relative}.sm-auth-pass .form-control{padding-inline:2.5rem 2.75rem}.sm-auth-pass-icon{color:var(--saruar-muted);display:block;left:.875rem;position:absolute;top:.75rem}.sm-auth-eye{align-items:center;background:none;border:0;color:var(--saruar-muted);display:flex;height:2.75rem;justify-content:center;position:absolute;right:0;top:0;width:2.75rem}.sm-auth-eye:focus-visible{outline:2px solid var(--saruar-primary);outline-offset:-2px}.sm-auth-row{align-items:center;display:flex;justify-content:space-between;margin:-.25rem 0 .5rem}.sm-auth-remember{margin:0}.sm-auth-forgot{color:var(--saruar-primary-text)}.sm-auth-submit{font-size:.9375rem;width:100%}.sm-auth-switch{color:var(--saruar-dark);display:block;font-size:.75rem;margin:1.25rem 0 0;text-align:center}.sm-auth-switch a{align-items:center;color:var(--saruar-primary-text);display:inline-flex;font-weight:600;min-height:2.75rem;text-decoration:none}.sm-auth-error{margin:-.75rem 0 .75rem}.sm-auth-social{justify-content:flex-start}}
@media (prefers-reduced-motion:reduce){.sm-auth-slider *{transition-duration:.01ms!important;transition-delay:0s!important}}
.sm-auth-brand{height:1.25rem;width:1.25rem}
.sm-auth-social .bi{font-size:1.125rem}
.sm-card-tags{align-items:flex-start;display:flex;flex-direction:column;gap:.25rem;left:.5rem;position:absolute;top:.5rem}
.sm-card-tag{background:var(--saruar-dark);border-radius:.375rem;color:var(--saruar-white);font-size:.75rem;font-weight:700;padding:.125rem .5rem}
.sm-card-wish-spot{position:absolute;right:1.25rem;top:1.25rem}
.sm-card-wish{align-items:center;background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:50%;box-shadow:0 1px 3px rgba(15,23,42,.12);color:var(--saruar-primary-text);display:inline-flex;font-size:1rem;height:2.25rem;justify-content:center;text-decoration:none;width:2.25rem}
.sm-card-wish.is-saved{color:var(--saruar-primary)}
.sm-card-wish:focus-visible{outline:2px solid var(--saruar-primary);outline-offset:2px}
@media (hover:hover){.sm-card-wish:hover{border-color:var(--saruar-primary);color:var(--saruar-primary)}}
.sm-search-text{display:flex;flex:1;flex-direction:column;min-width:0}
.sm-search-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-search-sku{color:var(--saruar-muted);font-size:.75rem}
.sm-search-price{color:var(--saruar-primary-text);font-size:.875rem;font-weight:600;white-space:nowrap}
.sm-track-steps{display:flex;gap:.5rem;justify-content:space-between;list-style:none;margin:0;padding:0}
.sm-track-step{align-items:center;color:var(--saruar-muted);display:flex;flex:1;flex-direction:column;font-size:.875rem;gap:.375rem;position:relative;text-align:center}
.sm-track-step:not(:first-child)::before{background:var(--saruar-border);content:"";height:2px;left:-50%;position:absolute;right:50%;top:1.25rem;z-index:0}
.sm-track-dot{align-items:center;background:var(--saruar-white);border:2px solid var(--saruar-border);border-radius:50%;display:flex;font-size:1.125rem;height:2.5rem;justify-content:center;position:relative;width:2.5rem;z-index:1}
.sm-track-step.is-done{color:var(--saruar-dark);font-weight:600}
.sm-track-step.is-done .sm-track-dot{background:var(--saruar-primary);border-color:var(--saruar-primary);color:var(--saruar-white)}
.sm-track-step.is-done:not(:first-child)::before{background:var(--saruar-primary)}
/* Pop-ups sit above the phone bottom bar (1030) and below drawers (1040+): the header holds the search and account lists, and .sm-area-results uses the same 1035. */
.sm-main-header.sticky-top{z-index:1035}
/* Categories rise from the bottom bar as a sheet, centred and as wide as the bar. */
.sm-categories-sheet{--bs-offcanvas-height:75vh;border-radius:1.25rem 1.25rem 0 0;margin:0 auto;max-width:30rem;padding-bottom:env(safe-area-inset-bottom)}
.sm-info-page{max-width:48rem}
.sm-info-page h2{font-size:1.125rem;font-weight:600;margin:1.5rem 0 .5rem}
.sm-info-page a{color:var(--saruar-primary-text)}
.sm-help-links{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));list-style:none;padding:0}
.sm-help-links a{align-items:center;border:1px solid var(--saruar-border);border-radius:.5rem;color:var(--saruar-dark);display:flex;gap:.5rem;min-height:2.75rem;padding:.5rem .75rem;text-decoration:none}
.sm-help-links .bi{color:var(--saruar-primary)}
@media (hover:hover){.sm-help-links a:hover{border-color:var(--saruar-primary)}}
/* No underlined links anywhere: Bootstrap underlines every link and .btn-link; colour and weight mark them instead. */
a,.btn-link,.btn-link:hover,.btn-link:focus-visible{text-decoration:none}
.sm-info-page a,.sm-faq-answer a,main p a{font-weight:500}
.sm-col-qty{min-width:7rem;width:8rem}
.sm-col-money{min-width:8rem;width:10rem}
[data-purchase-line] select{min-width:16rem}
/* Product Image card in the product editor. */
.sm-pimg-title{color:var(--saruar-dark);font-size:1.125rem;font-weight:700;margin:0 0 .25rem}
.sm-pimg-sub{color:var(--saruar-muted);font-size:.9375rem}
.sm-pimg-add,.sm-pimg-more{align-items:center;background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:.5rem;color:var(--saruar-muted);cursor:pointer;display:flex;flex-shrink:0;font-size:1.25rem;height:2.75rem;justify-content:center;margin:0;width:2.75rem}
.sm-pimg-main{aspect-ratio:3/2;background:var(--saruar-surface) center/cover no-repeat;border-radius:.5rem;margin-bottom:.75rem;position:relative}
.sm-pimg-badge{background:rgba(255,255,255,.85);border-radius:.25rem;bottom:.625rem;color:var(--saruar-muted);font-size:.75rem;left:.625rem;padding:.25rem .5rem;position:absolute}
.sm-pimg-thumbs{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;padding-top:.5rem}
.sm-pimg-thumb{height:3.75rem;position:relative;width:3.75rem}
.sm-pimg-pic{background:var(--saruar-surface) center/cover no-repeat;border:1px solid var(--saruar-border);border-radius:.5rem;height:100%;padding:0;width:100%}
.sm-pimg-pic.is-main{border:2px solid var(--saruar-dark)}
.sm-slide-thumb{background:var(--saruar-surface) center/cover no-repeat;border-radius:.375rem;display:block;height:2.5rem;width:5rem}
.sm-pimg-remove{align-items:center;background:var(--saruar-white);border:1px solid var(--saruar-border);border-radius:50%;color:var(--saruar-muted);display:flex;font-size:.875rem;height:1.375rem;justify-content:center;padding:0;position:absolute;right:-.5rem;top:-.5rem;width:1.375rem}
/* A 44px touch area around the small round button. */
.sm-pimg-remove::before{content:"";inset:-.6875rem;position:absolute}
.sm-pimg-more{border-style:dashed;font-size:1.5rem;height:3.75rem;width:3.75rem}
.sm-pimg-drop{align-items:center;border:1px dashed var(--saruar-border);border-radius:.5rem;color:var(--saruar-muted);cursor:pointer;display:flex;flex-direction:column;font-size:.875rem;gap:.25rem;margin:0;padding:1.25rem 1rem;text-align:center}
.sm-pimg-drop-line{align-items:center;display:flex;gap:.5rem}
.sm-pimg-drop .bi-upload{font-size:1.25rem}
.sm-pimg-drop small{color:#64748b;font-size:.75rem}
.sm-pimg-link{color:var(--saruar-primary-text)}
.sm-pimg-drop.is-dragover,.sm-pimg-drop:focus-within{background:#fff7ed;border-color:var(--saruar-primary)}
/* Production hardening (Phase 1). A safety net only: no page overflows today. clip, unlike hidden, keeps the sticky header working. */
body{overflow-x:clip}
svg,video,canvas,iframe{max-width:100%}
/* 44px touch targets on touch screens; mouse users keep Bootstrap's sizes. */
@media (pointer:coarse){.btn,.form-control,.form-select,.page-link,.list-group-item-action,.sm-tt-btn{min-height:2.75rem}.btn,.sm-tt-btn{min-width:2.75rem}}
/* The card's small buttons and the banner's close button keep their look; an invisible ring makes them 44px to tap. */
.sm-card-actions .btn,.sm-card-wish{position:relative}
.sm-card-actions .btn::after,.sm-card-wish::after{content:"";inset:-.25rem;position:absolute}
.sm-top-bar .btn-close{background-size:.75rem;box-sizing:border-box;height:2.75rem;margin:-.6875rem -.6875rem -.6875rem 0;width:2.75rem}
/* A button that is sending shows a spinner (saruar-mart.min.js sets aria-busy). */
.btn[aria-busy=true]::before,.sm-card-wish[aria-busy=true]::before{animation:spinner-border .75s linear infinite;border:.15em solid currentColor;border-radius:50%;border-right-color:transparent;content:"";display:inline-block;height:1em;margin-right:.375rem;vertical-align:-.125em;width:1em}
.btn[aria-busy=true]:has(> .bi:only-child) > .bi,.sm-card-wish[aria-busy=true] > .bi{display:none}
.btn[aria-busy=true]:has(> .bi:only-child)::before,.sm-card-wish[aria-busy=true]::before{margin-right:0}
@media (prefers-reduced-motion:reduce){.btn[aria-busy=true]::before,.sm-card-wish[aria-busy=true]::before{animation-duration:1.5s}}
/* Bootstrap removes the outline from .btn and only some variants bring a focus shadow back, so every button gets the same ring. */
.btn:focus-visible{outline:2px solid var(--saruar-primary-text);outline-offset:2px}

.sm-notif-menu{max-height:420px;overflow-y:auto;width:320px}