/* ============================================================
   OmniMart Storefront Theme — Adapted for Dropship SaaS
   Based on OmniMart eCommerce template design system
   ============================================================ */

/* === RESET & BASE === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:15px;color:var(--c-text);background:var(--c-bg);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
a{color:var(--c-link);text-decoration:none;transition:color .25s ease}
/* #957 — the hover colour is scoped, the rest of the link rule is not.
   `a:hover` is specificity 0,1,1, which beats ANY single class (0,1,0). Every
   `<a>` that a component styles as a button used to lose its hover colour to
   this one rule, no matter which file defined it or in what order the sheets
   load (#942, #954). The resting `a` rule above is 0,0,1 and loses to every
   class, so it is not a trap and stays as it is.
   `text-decoration` stays on the bare rule so ALL links keep it. Only the
   colour is scoped, and `:where()` adds nothing to specificity, so this rule is
   still 0,1,1 for every other link — nothing on the storefront moves.
   Add a new component button class here when you add one. */
a:hover{text-decoration:none}
a:where(:not(.product-card-add)):where(:not(.wishlist-btn)):where(:not(.compare-btn)):where(:not(.sf-icon-btn)):hover{color:var(--c-primary)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{color:var(--c-title);line-height:1.3;margin:0}
ul{list-style:none;padding:0;margin:0}
.container{max-width:var(--max-w);margin:0 auto;padding-block:0;padding-inline:24px}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 30px;border:none;font-family:var(--font);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all .25s ease;text-decoration:none;line-height:1.4;border-radius:0}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--c-primary);color:#fff}
.btn-primary:hover{background:var(--c-primary-dark,var(--c-primary));color:#fff}
.btn-outline{background:transparent;border:2px solid var(--c-entity);color:var(--c-entity)}
.btn-outline:hover{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.btn-white{background:rgba(255,255,255,.15);color:#fff;border:2px solid rgba(255,255,255,.5);backdrop-filter:blur(4px)}
.btn-white:hover{background:rgba(255,255,255,.3);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:8px 18px;font-size:12px}

/* === FORMS === */
.sf-input{width:100%;padding:10px 14px;border:1px solid var(--c-border);font-size:14px;font-family:var(--font);background:#fff;transition:border .25s ease;border-radius:0}
.sf-input:focus{outline:none;border-color:var(--c-primary)}
select.sf-input{appearance:auto}
.sf-label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--c-entity);text-transform:uppercase;letter-spacing:.3px}
.sf-required::after{content:' *';color:#e53e3e}

/* === TOP BAR (above header) — PRIMARY COLOR BG like OmniMart === */
.menu-top-area{background:var(--c-primary);padding:10px 0;font-size:13px;color:#fff}
.menu-top-area a{color:#fff;transition:all .25s}
.menu-top-area a:hover{color:rgba(255,255,255,.7) !important}
.menu-top-area .t-m-s-a{display:flex;align-items:center;gap:16px}
.menu-top-area .right-area{display:flex;align-items:center;justify-content:flex-end;gap:16px}

/* === HEADER / TOPBAR === */
.site-header{background:#fff;z-index:100}
.topbar{border-bottom:1px solid var(--c-border);padding:15px 0}
/* Stuck state — topbar becomes fixed, top-area and navbar scroll away naturally */
.navbar-stuck .topbar{position:fixed;top:0;left:0;right:0;width:100%;z-index:999;background-color:#fff;box-shadow:0 7px 30px -6px rgba(0,0,0,.15)}
.topbar .d-flex{display:flex;align-items:center;justify-content:space-between}
.site-branding .site-logo img{height:50px;width:auto}

/* Search bar — matches OmniMart exactly */
.search-box-wrap{flex:1;max-width:600px;margin:0 24px;display:block!important}
.search-box{display:flex;align-items:stretch;border:1px solid var(--c-border);border-radius:5px;height:46px;background:#fff;position:relative}
.search-box .categoris{padding:0 14px;border:none;border-right:1px solid var(--c-border);background:#fff;font-size:14px;color:var(--c-text);min-width:80px;cursor:pointer;font-family:var(--font);appearance:auto;outline:none}
.search-box .input-group{display:flex;flex:1;position:relative}
.search-box .form-control{border:none;padding:0 14px;font-size:14px;flex:1;outline:none;font-family:var(--font);height:100%}
.search-box .input-group-btn{border-left:1px solid var(--c-border)}
.search-box .input-group-btn button{background:none;border:none;color:var(--c-text);padding:0 18px;height:100%;cursor:pointer;font-size:16px}
.search-box .input-group-btn button:hover{color:var(--c-primary)}
/* Search Suggestions Dropdown */
.sf-suggestions{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--c-border);border-top:none;border-radius:0 0 8px 8px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:999;max-height:400px;overflow-y:auto}
.sf-sug-item{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;color:var(--c-entity);transition:background .15s;cursor:pointer;border-bottom:1px solid var(--c-border-l)}
.sf-sug-item:last-child{border-bottom:none}
.sf-sug-item:hover,.sf-sug-item.sf-sug-active{background:var(--c-bg)}
.sf-sug-img{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--c-border-l);flex-shrink:0}
.sf-sug-info{flex:1;min-width:0}
.sf-sug-name{font-size:13px;font-weight:500;color:var(--c-entity);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-sug-price{font-size:13px;font-weight:700;color:var(--c-primary)}
.close-m-serch{display:none}

/* Toolbar icons */
.toolbar{display:flex;align-items:center;gap:4px}
.toolbar-item{position:relative}
.toolbar-item > a{display:flex;flex-direction:column;align-items:center;padding:6px 10px;color:var(--c-entity);text-decoration:none;transition:color .25s}
.toolbar-item > a:hover{color:var(--c-primary)}
.toolbar-item > a > div{display:flex;flex-direction:column;align-items:center;gap:2px}
.toolbar-item i{font-size:20px}
.toolbar-item .text-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.toolbar-item .count-label{position:absolute;top:-10px;left:20px;background:var(--c-primary);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
.compare-icon,.cart-icon{position:relative;display:inline-block}

/* === NAVBAR (below header) === */
.site-header .navbar{background:#fff;border-bottom:1px solid var(--c-border)}
.site-header .navbar .container{padding:0 15px}
.site-menu ul{display:flex;align-items:center;gap:0;list-style:none;padding:0;margin:0}
.site-menu ul li a{display:inline-flex;align-items:center;padding:14px 18px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--c-entity);border-bottom:2px solid transparent;transition:all .25s}
.site-menu ul li a:hover,.site-menu ul li.active a{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.nav-inner{flex:1}

/* Category sidebar (left) */
.left-category-area{position:relative}
.category-header{background:var(--c-primary);color:#fff;padding:12px 16px;font-weight:700;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.5px;transition:background .25s}
.category-header:hover{background:var(--c-primary-dark,var(--c-primary));color:#fff}
/* Category dropdown — visibility controlled purely by CSS */
.cat-dropdown-menu{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
.cat-dropdown-wrap:hover .cat-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto}
/* Invisible bridge to prevent hover gap between button and dropdown */
.cat-dropdown-wrap::after{content:'';display:none;position:absolute;top:100%;left:0;right:0;width:100%;height:6px}
.cat-dropdown-wrap:hover::after{display:block}
.category-list{background:#fff;border:1px solid var(--c-border);border-top:2px solid var(--c-primary);padding:8px 0}
.category-list .navi-link{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--c-entity);font-size:14px;transition:all .2s}
.category-list .navi-link:hover{color:var(--c-primary);background:var(--c-bg)}
.category-list .navi-link img{width:24px;height:24px;object-fit:contain}
.category-list .navi-link i{margin-inline-start:auto;font-size:12px;color:var(--c-muted)}

/* === HERO SLIDER === */
.slider-area-wrapper{padding:20px 0 0}
.slider-area-wrapper.slider-full-width{padding:0;width:100%}
.slider-full-width .hero-slider{border-radius:0}
.slider-full-width .hero-slider .item{border-radius:0}
.hero-slider{position:relative;overflow:hidden;border-radius:10px}
.hero-slider .item{position:relative;display:flex;align-items:center;overflow:hidden}
.hero-slider .item .hero-slide-img{width:100%;height:auto;display:block;object-fit:cover;object-position:center}
.hero-slider .item-inner{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:40px;max-width:50%;z-index:2}
.hero-slider .item-inner .title{font-size:36px;font-weight:700;color:#232323;margin-bottom:8px;line-height:1.2}
.hero-slider .item-inner .subtitle{font-size:16px;color:#505050;margin-bottom:20px;line-height:1.6}
.sright-image{display:block;position:relative;overflow:hidden;margin-bottom:10px;border-radius:10px}
.sright-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.sright-image:hover img{transform:scale(1.05)}
.sright-image .inner-content{position:absolute;bottom:20px;inset-inline-start:20px;z-index:2}
.sright-image .inner-content p{font-size:14px;color:#fff;margin-bottom:4px}
.sright-image .inner-content h4{font-size:20px;font-weight:700;color:#fff}

/* === SERVICE / USP BAR === */
.service-section{padding:30px 0}
.single-service{display:flex;align-items:center;gap:14px;padding:16px}
.single-service2{flex-direction:column;text-align:center;gap:10px}
.single-service img{width:40px;height:40px;object-fit:contain}
.single-service .content h6{font-size:14px;font-weight:700;color:var(--c-entity);margin:0}
.single-service .content p{font-size:13px;color:var(--c-muted);margin:0}

/* === SECTION TITLE === */
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--c-border)}
.section-title h2{font-size:22px;font-weight:700;color:var(--c-entity);margin:0;position:relative;padding-inline-start:16px}
.section-title h2::before{content:'';position:absolute;inset-inline-start:0;top:0;width:4px;height:100%;background:var(--c-primary);border-radius:2px}
.section-title .links{display:flex;gap:16px;align-items:center}
.section-title .links a{font-size:13px;font-weight:600;color:var(--c-muted);padding:4px 12px;border-radius:20px;transition:all .25s}
.section-title .links a:hover,.section-title .links a.active{color:var(--c-primary);background:rgba(var(--c-primary-rgb),.08)}
.section-title .right-area{display:flex;align-items:center;gap:16px}
.section-title .right_link{font-size:13px;font-weight:600;color:var(--c-primary)}

/* === PRODUCT CARD (OmniMart style — rounded, border on hover) === */
.product-card{background:#fff;overflow:hidden;transition:all .3s linear;position:relative;border:1px solid #fff;border-radius:10px}
.product-card:hover{box-shadow:0 7px 22px -5px rgba(25,25,25,.2);border-color:var(--c-primary)}
.product-thumb{position:relative;overflow:hidden}
.product-thumb::before{content:'';display:block;padding-top:120%}
.product-thumb > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:all .5s ease}
.product-thumb .product-badge{position:absolute;top:10px;left:10px;right:auto;z-index:2;padding:3px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;border-radius:3px}
[dir="rtl"] .product-thumb .product-badge{left:auto;right:10px}
.product-thumb .product-badge2{top:auto;bottom:10px;left:10px;right:auto}
[dir="rtl"] .product-thumb .product-badge2{left:auto;right:10px}
.product-thumb .product-badge-end{left:auto;right:10px}
[dir="rtl"] .product-thumb .product-badge-end{right:auto;left:10px}
.product-button-group{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px;opacity:0;transform:translateY(15px);transition:all .3s ease;z-index:3}
.product-card:hover .product-button-group{opacity:1;transform:translateY(0)}
.product-button{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:all .25s;color:var(--c-entity);font-size:15px;text-decoration:none;backdrop-filter:blur(4px)}
.product-button:hover{background:var(--c-primary);color:#fff}
/* Hover image swap — second image shown on hover */
/* Hover image swap */
.product-thumb .hover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;z-index:1}
.product-card:hover .product-thumb .hover-img{opacity:1}
.product-thumb > img:not(.hover-img){transition:opacity .5s ease,transform .5s ease;opacity:1}
.product-card:hover .product-thumb > img:not(.hover-img){opacity:0;transform:scale(1.03)}
.product-card-body{padding:14px 12px;text-align:start}
.product-category a{font-size:12px;color:var(--c-muted);text-transform:uppercase;letter-spacing:.3px}
.product-title{margin:6px 0}
.product-title a{font-size:14px;font-weight:400;color:var(--c-entity);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px;line-height:1.4;transition:color .25s}
.product-card:hover .product-title a{color:var(--c-primary)}
.rating-stars{margin-bottom:4px;color:var(--c-primary);font-size:12px}
.rating-stars .filled{color:var(--c-primary)}
.product-price{font-size:16px;font-weight:700;color:var(--c-primary);margin:0}
.product-price del{font-size:14px;color:var(--c-muted);font-weight:400;margin-inline-start:6px}

/* Badge colors */
.bg-info{background:#2196F3!important}
.bg-success{background:#4CAF50!important}
.bg-warning{background:#FFA000!important}
.bg-danger{background:#F44336!important}
.bg-dark{background:#232323!important}
.bg-secondary{background:#f5f5f5!important;color:#505050!important}
.border-default{border:1px solid var(--c-border)!important}
.text-body{color:#505050!important}

/* Product grid */
.product-grid{display:grid;gap:15px}
.product-grid-5{grid-template-columns:repeat(5,1fr)}
.product-grid-4{grid-template-columns:repeat(4,1fr)}
.product-grid-3{grid-template-columns:repeat(3,1fr)}
.product-grid-2{grid-template-columns:repeat(2,1fr)}
.col-gd{padding:0}

/* === BANNER SECTIONS === */
.bannner-section .genius-banner{display:block;position:relative;overflow:hidden;border-radius:10px;margin-bottom:15px;border:1px solid #fff;transition:all .3s}
.bannner-section .genius-banner img{width:100%;transition:transform .4s}
.bannner-section .genius-banner:hover img{transform:scale(1.05)}
.bannner-section .genius-banner:hover{border-color:var(--c-primary)}
.bannner-section .genius-banner .inner-content{position:absolute;bottom:20px;inset-inline-start:20px;z-index:2}
.bannner-section .genius-banner .inner-content p{font-size:14px;color:#fff;margin:0 0 4px}
.bannner-section .genius-banner .inner-content h4{font-size:22px;font-weight:700;color:#fff;margin:0}

/* === OWL CAROUSEL CUSTOMIZATION === */
.owl-carousel .owl-stage-outer{overflow:hidden}
.owl-carousel .owl-nav{position:absolute;top:50%;width:100%;display:flex;justify-content:space-between;pointer-events:none;transform:translateY(-50%)}
.owl-carousel .owl-prev,.owl-carousel .owl-next{width:36px;height:36px;background:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.12);pointer-events:all;font-size:18px;color:var(--c-entity)!important;transition:all .25s;border:none;cursor:pointer;line-height:1}
.owl-carousel .owl-prev svg,.owl-carousel .owl-next svg{display:block}
.owl-carousel .owl-prev:hover,.owl-carousel .owl-next:hover{background:var(--c-primary)!important;color:#fff!important}
.owl-carousel .owl-prev{margin-left:-12px}
.owl-carousel .owl-next{margin-right:-12px}
.owl-carousel .owl-dots{text-align:center;margin-top:12px}
.owl-carousel .owl-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c-border);margin:0 4px;transition:all .25s;border:none;cursor:pointer}
.owl-carousel .owl-dot.active{background:var(--c-primary);width:24px;border-radius:5px}
.dots-inside .owl-dots{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center}
.dots-inside .owl-dot{background:rgba(255,255,255,.5)}
.dots-inside .owl-dot.active{background:#fff}

/* === FOOTER (Light Skin — matching OmniMart) === */
.site-footer{background:#fff;color:var(--c-text);padding:56px 0 0;border-top:1px solid var(--c-border)}
.site-footer .widget-title{font-size:16px;font-weight:700;color:var(--c-entity);text-transform:uppercase;letter-spacing:1px;margin-bottom:20px;position:relative;padding-bottom:12px}
.site-footer .widget-title::after{content:'';position:absolute;bottom:0;inset-inline-start:0;width:40px;height:2px;background:var(--c-primary)}
.site-footer a{color:var(--c-text);transition:color .25s}
.site-footer a:hover{color:var(--c-primary)}
.site-footer ul li{margin-bottom:10px;font-size:14px}
.site-footer .footer-social-links{display:flex;gap:8px;margin-top:16px}
.site-footer .footer-social-links a{width:36px;height:36px;border:1px solid var(--c-border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--c-muted);transition:all .25s;font-size:14px}
.site-footer .footer-social-links a:hover{border-color:var(--c-primary);color:var(--c-primary)}
.footer-copyright{border-top:1px solid var(--c-border);padding:18px 0;text-align:center;font-size:15px;color:rgba(0,0,0,.64);margin-top:32px}
.footer-newsletter .input-group{display:flex;border:1px solid #444;overflow:hidden}
.footer-newsletter .input-group input{flex:1;background:transparent;border:none;padding:10px 14px;color:#ccc;font-size:14px;font-family:var(--font)}
.footer-newsletter .input-group input::placeholder{color:#666}
.footer-newsletter .input-group button{background:var(--c-primary);border:none;color:#fff;padding:0 18px;cursor:pointer;font-weight:700;font-size:13px;transition:background .25s}
.footer-newsletter .input-group button:hover{background:var(--c-primary-dark,var(--c-primary))}
.gateway_image{max-height:28px;opacity:.6}

/* === BACK TO TOP === */
.scroll-to-top-btn{position:fixed;bottom:90px;inset-inline-end:28px;width:40px;height:40px;background:var(--c-primary);color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;opacity:0;visibility:hidden;transition:all .3s;z-index:1001;font-size:18px;text-decoration:none;cursor:pointer}
@media(max-width:768px){.scroll-to-top-btn{bottom:148px}}
.scroll-to-top-btn:hover{background:var(--c-primary-dark,var(--c-primary));color:#fff}
.scroll-to-top-btn.visible{opacity:1;visibility:visible}

/* === WHATSAPP BUTTON — moved to the widget engine (#647, PRD #642).
   The styles now ship with app/helpers/widgets/whatsapp.php, scoped to
   .sfw-wa. Nothing on the page uses .wa-float any more. === */

/* === MOBILE MENU === */
.mobile-menu{position:fixed;top:0;width:300px;max-width:85vw;height:100%;background:#fff;z-index:201;transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:2px 0 20px rgba(0,0,0,.15);-webkit-overflow-scrolling:touch}
.mobile-menu.ltr{left:0;transform:translateX(-100%)}
.mobile-menu.rtl{right:0;transform:translateX(100%)}
.mobile-menu.open.ltr{transform:translateX(0)}
.mobile-menu.open.rtl{transform:translateX(0)}
.mm-heading-area{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--c-border)}
.mm-heading-area h4{font-size:16px;font-weight:700;color:var(--c-entity);margin:0}
.mm-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--c-entity);line-height:1;padding:4px}
.mm-tabs{display:flex;border-bottom:2px solid var(--c-border)}
.mm-tabs span{flex:1;text-align:center;padding:12px;font-size:13px;font-weight:700;text-transform:uppercase;color:var(--c-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px}
.mm-tabs span.active{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.mm-panel{display:none}
.mm-panel.active{display:block}
.slideable-menu ul li a{display:flex;align-items:center;gap:10px;padding:14px 20px;color:var(--c-entity);font-size:14px;font-weight:500;border-bottom:1px solid var(--c-border-l);transition:all .2s}
.slideable-menu ul li a:hover,.slideable-menu ul li a:active{color:var(--c-primary);background:var(--c-bg)}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;cursor:pointer}
.mobile-overlay.open{display:block}
.mobile-menu-toggle{display:none}

/* === SETUP BAR === */
.setup-bar{background:#fef3c7;border-bottom:1px solid #f59e0b;padding:10px 20px;text-align:center;font-size:13px;color:#92400e}

/* === DROPDOWN MENU === */
.t-h-dropdown{position:relative}
.t-h-dropdown .t-h-dropdown-menu{display:none;position:absolute;top:100%;inset-inline-start:0;min-width:180px;background:#fff;border:1px solid var(--c-border);border-top:2px solid var(--c-primary);box-shadow:0 7px 22px -5px rgba(0,0,0,.2);z-index:50;padding:8px 0}
.t-h-dropdown:hover .t-h-dropdown-menu{display:block}
.t-h-dropdown .t-h-dropdown-menu a{display:block;padding:6px 20px;font-size:14px;color:var(--c-text);transition:all .2s}
.t-h-dropdown .t-h-dropdown-menu a:hover{color:var(--c-primary);background:var(--c-bg)}
/* Site Backdrop */
.site-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:98}

/* === SHARED UI === */
.card{background:#fff;border:1px solid var(--c-border);padding:28px;border-radius:8px}
.card-sm{padding:20px}
.badge{display:inline-block;padding:4px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.badge-success{background:#e8f5e9;color:#459647}
.badge-warning{background:#fff8e1;color:#b5440d}
.badge-danger{background:#fce4ec;color:#c0392b}
.badge-info{background:#e3f2fd;color:#1565c0}
.badge-muted{background:#f0f0f0;color:#999}

/* Summary rows */
.sum-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--c-text)}
.sum-total{font-size:20px;font-weight:700;color:var(--c-entity);border-top:2px solid var(--c-border);padding-top:12px;margin-top:8px}

/* Item rows */
.item-row{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--c-border-l)}
.item-row:last-child{border-bottom:none}
.item-img{width:64px;height:64px;object-fit:cover;border:1px solid var(--c-border-l);flex-shrink:0}
.item-info{flex:1;min-width:0}
.item-name{font-size:14px;font-weight:500;color:var(--c-entity);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-meta{font-size:13px;color:var(--c-muted);margin-top:2px}
.item-price{font-size:15px;font-weight:700;color:var(--c-entity);white-space:nowrap}

/* Quantity control */
.qty{display:flex;align-items:center;border:1px solid var(--c-border);width:fit-content}
.qty button{width:36px;height:36px;border:none;background:#f7f7f7;font-size:16px;cursor:pointer;color:var(--c-entity);font-weight:600}
.qty button:hover{background:#eee}
.qty input{width:42px;text-align:center;border:none;border-inline:1px solid var(--c-border);font-size:14px;font-weight:600;height:36px;font-family:var(--font)}

/* Steps indicator */
.steps{display:flex;align-items:center;justify-content:center;gap:0;padding:24px 0}
.step{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--c-muted)}
.step.active{color:var(--c-primary)}
.step.done{color:#459647}
.step-num{width:28px;height:28px;border-radius:50%;border:2px solid var(--c-border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.step.active .step-num{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.step.done .step-num{background:#459647;border-color:#459647;color:#fff}
.step-line{width:40px;height:2px;background:var(--c-border);margin:0 8px}

/* Result pages (success/error) */
.result-page{max-width:520px;margin:0 auto;padding:60px 20px;text-align:center}
.result-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.result-icon svg{width:36px;height:36px}
.result-icon-ok{background:#f0fdf4;color:#166534;border:2px solid #bbf7d0}
.result-icon-err{background:#fef2f2;color:#dc2626;border:2px solid #fca5a5}

/* Info boxes */
.info-box{background:#fffbeb;border:1px solid #fbbf24;border-radius:8px;padding:16px 20px;margin-bottom:20px;font-size:14px;color:#92400e;line-height:1.6}
.info-box-danger{background:#fef2f2;border-color:#fca5a5;color:#991b1b}

/* Divider */
.divider{border:none;border-top:1px solid var(--c-border);margin:20px 0}

/* === UTILITY CLASSES === */
.d-flex{display:flex!important}.d-none{display:none!important}.d-block{display:block!important}.d-inline-block{display:inline-block!important}
.flex{display:flex;align-items:center;gap:12px}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.justify-content-between{justify-content:space-between}
.justify-content-center{justify-content:center}
.justify-content-end{justify-content:flex-end}
.align-self-center{align-self:center}
.text-center{text-align:center}.text-muted{color:var(--c-muted)!important}
.text-success{color:#459647!important}.text-danger{color:#c0392b!important}
.text-sm{font-size:13px}.text-body{color:var(--c-text)!important}
.fw-bold{font-weight:700}
.w-100{width:100%}
.mt-0{margin-top:0}.mt-20{margin-top:20px}.mt-30{margin-top:30px}.mt-50{margin-top:50px}.mt-60{margin-top:60px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:16px}.mb-30{margin-bottom:30px}
.pt-0{padding-top:0}
.py-4{padding:32px 0}
.g-3{gap:15px}
.gx-3{column-gap:15px}
.row{display:flex;flex-wrap:wrap;margin:0 -7.5px}
.row > [class*="col-"]{padding:0 7.5px}
.col-lg-3{width:25%}.col-lg-4{width:33.333%}.col-lg-6{width:50%}.col-lg-8{width:66.666%}.col-lg-9{width:75%}.col-lg-12{width:100%}
.col-md-4{width:33.333%}.col-md-6{width:50%}.col-sm-6{width:50%}

/* === HIDDEN / VISIBLE === */
.hidden-on-mobile{display:block}
.visible-on-mobile{display:none}
.d-lg-none{display:none}
.d-none.d-lg-block{display:block}

/* === COUNTDOWN === */
.countdown{display:flex;gap:10px}
.countdown span{background:var(--c-entity);color:#fff;padding:6px 10px;text-align:center;font-weight:700;font-size:14px;min-width:52px;border-radius:4px}
.countdown span small{display:block;font-size:10px;font-weight:400;text-transform:uppercase;margin-top:2px}
.countdown-alt span{background:var(--c-primary)}

/* === PRELOADER === */
#preloader{position:fixed;inset:0;background:#fff;z-index:9999;display:flex;align-items:center;justify-content:center}
#preloader img{max-width:80px}

/* === LAZY LOAD FADE-IN === */
.lazy-img{opacity:0;transition:opacity .6s ease}
.lazy-img.loaded{opacity:1}

/* === TOAST NOTIFICATION === */
.sf-toast{position:fixed;top:20px;right:20px;z-index:9999;min-width:280px;padding:14px 20px;border-radius:4px;color:#fff;font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px;animation:sfToastIn .3s ease;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.sf-toast-success{background:#459647}
.sf-toast-danger{background:#c0392b}
@keyframes sfToastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}


/* === CHECKOUT === */
.co-wrap{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start}
.co-section{margin-bottom:24px}
.co-section h3{font-family:var(--font-t);font-size:18px;font-weight:400;color:var(--c-title);margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--c-border);display:flex;align-items:center;gap:10px}
.co-section h3 .co-num{width:26px;height:26px;border-radius:50%;background:var(--c-primary);color:#fff;font-family:var(--font);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.co-fg{margin-bottom:16px}
.co-pay{display:flex;align-items:center;gap:12px;padding:16px;border:2px solid var(--c-border);border-radius:8px;cursor:pointer;margin-bottom:10px;transition:all var(--ease)}
.co-pay:hover{border-color:var(--c-entity)}
.co-pay:has(input:checked){border-color:var(--c-primary);background:rgba(255,36,2,.04);box-shadow:0 0 0 1px var(--c-primary)}
.co-pay input{accent-color:var(--c-primary)}
.co-err{background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;color:#991b1b;padding:14px 18px;margin-bottom:16px;font-size:14px;line-height:1.6}
.co-secure{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--c-muted);margin-top:12px;justify-content:center}
.coupon-box{display:flex;gap:8px;margin-bottom:16px}
.coupon-box input{flex:1;padding:10px 12px;border:1px solid var(--c-border);border-radius:6px;font-size:13px;text-transform:uppercase;letter-spacing:1px;font-weight:600;background:#fff}
.coupon-box input:focus{outline:none;border-color:var(--c-primary)}
.coupon-box button{padding:10px 16px;background:var(--c-primary);color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:opacity .2s}
.coupon-box button:hover{opacity:.9}
.coupon-box button:disabled{opacity:.5;cursor:not-allowed}
.coupon-applied{display:flex;align-items:center;justify-content:space-between;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:13px}
.coupon-applied code{font-weight:700;letter-spacing:1px;color:#166534}
.coupon-applied .coupon-remove{color:#dc2626;cursor:pointer;font-size:12px;border:none;background:none;text-decoration:underline}
.coupon-msg{font-size:12px;margin-top:-12px;margin-bottom:12px;padding:0 2px}
.coupon-msg.error{color:#dc2626}
.coupon-msg.success{color:#166534}
.co-pay-icons{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--c-border-l);flex-wrap:wrap}
@media(max-width:768px){
  .co-wrap{grid-template-columns:1fr;gap:16px}
  .co-row{grid-template-columns:1fr;gap:12px}
  .co-section{margin-bottom:16px}
  .co-section h3{font-size:16px;gap:8px;padding-bottom:8px;margin-bottom:12px}
  .co-fg{margin-bottom:12px}
  .co-pay{padding:12px;gap:10px}
  .co-pay div strong{font-size:14px}
  .co-pay div .text-sm{font-size:12px}
  .co-summary-wrap .card{position:static!important;padding:20px}
  .co-err{padding:12px 14px;font-size:13px}
  .sum-total{font-size:18px}
  .item-img{width:52px;height:52px;border-radius:6px}
  .item-name{font-size:13px}
  .item-price{font-size:14px}
  .coupon-box{flex-wrap:wrap}
  .coupon-box input{min-width:0;flex:1 1 60%}
  .coupon-box button{flex:1 1 auto;text-align:center}
  .coupon-applied{flex-wrap:wrap;gap:8px;padding:10px 12px;font-size:12px}
  .steps{padding:16px 0;gap:0}
  .step{font-size:11px;gap:4px}
  .step-num{width:24px;height:24px;font-size:10px}
  .step-line{width:24px;margin:0 4px}
}

/* === CONTACT === */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px 0}
.contact-info-card{background:var(--c-primary);color:#fff;padding:40px;border-radius:10px;display:flex;flex-direction:column;gap:32px}
.contact-info-card h2{font-size:24px;font-weight:700;color:#fff;margin-bottom:4px}
.contact-info-card p{opacity:.85;font-size:14px;line-height:1.7;margin:0}
.ci-item{display:flex;gap:14px;align-items:flex-start}
.ci-icon{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ci-text h4{font-size:15px;font-weight:700;color:#fff;margin:0 0 2px}
.ci-text p{font-size:14px;margin:0;opacity:.9}
.contact-form-card{padding:10px 0}
.contact-form-card h2{font-size:22px;font-weight:700;color:var(--c-entity);margin-bottom:6px}
.contact-form-card > p{color:var(--c-muted);font-size:14px;margin-bottom:24px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-group{margin-bottom:16px}
.cf-group label{display:block;font-size:13px;font-weight:600;color:var(--c-entity);margin-bottom:6px}
.cf-group input,.cf-group textarea{width:100%;padding:12px 14px;border:1px solid var(--c-border);font-family:var(--font);font-size:14px;transition:border .2s;background:#fff}
.cf-group input:focus,.cf-group textarea:focus{outline:none;border-color:var(--c-primary)}
.cf-group textarea{resize:vertical;min-height:120px}
.cf-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;padding:16px 20px;margin-bottom:20px;border-radius:6px;font-size:14px;display:flex;align-items:center;gap:10px}
.cf-error{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;padding:12px 16px;margin-bottom:16px;border-radius:6px;font-size:14px}
@media(max-width:768px){.contact-wrap{grid-template-columns:1fr;gap:24px;padding:20px 0}.contact-info-card{padding:28px;border-radius:10px}.contact-form-card{padding:0}.cf-row{grid-template-columns:1fr}.cf-group input,.cf-group textarea{padding:14px 14px;font-size:15px}}

/* === HOME === */
.cat-card{display:block;text-align:center;transition:all .3s}
.cat-card:hover{transform:translateY(-4px)}
.cat-card-img{width:100%;aspect-ratio:1;overflow:hidden;border-radius:50%;border:3px solid var(--c-border);margin:0 auto 12px;max-width:160px;transition:border-color .3s}
.cat-card:hover .cat-card-img{border-color:var(--c-primary)}
.cat-card-img img{width:100%;height:100%;object-fit:cover}
.cat-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f5f5f5;color:#ccc}
.cat-card-name{font-size:14px;font-weight:700;color:var(--c-entity);text-transform:uppercase;letter-spacing:.3px}
.cat-card:hover .cat-card-name{color:var(--c-primary)}
@media(max-width:767px){.cat-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:480px){.cat-grid{grid-template-columns:repeat(2,1fr)!important}.cat-card-img{max-width:120px}}

/* === PAGE === */
.cms{max-width:800px;margin:0 auto;padding:48px 20px}
.cms h1{font-family:var(--font-t);font-size:clamp(24px,4vw,36px);font-weight:400;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--c-border)}
.cms-body{font-size:15px;line-height:1.9;color:var(--c-text)}
.cms-body p{margin-bottom:16px}
.cms-body h2{font-family:var(--font-t);font-size:22px;font-weight:400;color:var(--c-title);margin:28px 0 12px}
.cms-body h3{font-size:18px;font-weight:600;color:var(--c-entity);margin:20px 0 8px}
.cms-body ul,.cms-body ol{margin:12px 0;padding-inline-start:24px}
.cms-body li{margin-bottom:8px}
.cms-body a{color:var(--c-primary);text-decoration:underline}
.cms-body img{max-width:100%;margin:16px 0}
.cms-body blockquote{border-inline-start:3px solid var(--c-primary);padding:12px 20px;margin:16px 0;background:var(--c-bg)}
.cms-body table{width:100%;border-collapse:collapse;margin:16px 0}
.cms-body th,.cms-body td{padding:10px 14px;border:1px solid var(--c-border);text-align:start}
.cms-body th{background:var(--c-bg);font-weight:700;color:var(--c-entity)}

/* === PAYMENT === */
.pay-wrap{max-width:520px;margin:0 auto;padding:40px 0}
.pay-summary{background:var(--c-bg);padding:20px;margin-bottom:24px;text-align:center;border-radius:8px;border:1px solid var(--c-border-l)}
.pay-total{font-size:28px;font-weight:700;color:var(--c-primary);margin-top:8px}
.pay-order{font-size:14px;color:var(--c-muted)}
.mysr-form{margin-top:24px;min-height:200px}
.mysr-form .mysr-form-button{background-color:var(--c-primary)!important}

/* === PRODUCT === */
/* Product page */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px 0}
/* Gallery */
.pd-gallery{position:sticky;top:100px}
.pd-zoom-wrap{overflow:hidden;border:1px solid var(--c-border);background:#f9f9f9;cursor:zoom-in;position:relative}
.pd-zoom-hint{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.5);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.6;transition:opacity .2s;pointer-events:none}
.pd-zoom-wrap:hover .pd-zoom-hint{opacity:0}
.pd-main-img{width:100%;aspect-ratio:1;object-fit:contain;transition:transform .15s ease,opacity .2s}
/* Fullscreen lightbox */
.pd-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:flex;align-items:center;justify-content:center;animation:lb-in .2s ease}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
.pd-lb-img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:4px;user-select:none;-webkit-user-select:none}
.pd-lb-close{position:absolute;top:16px;right:16px;background:none;border:none;color:#fff;font-size:36px;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;opacity:.7;transition:opacity .2s}
.pd-lb-close:hover{opacity:1}
.pd-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:none;color:#fff;font-size:40px;cursor:pointer;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.6;transition:all .2s}
.pd-lb-nav:hover{opacity:1;background:rgba(255,255,255,.2)}
.pd-lb-prev{left:16px}
.pd-lb-next{right:16px}
.pd-lb-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:14px;font-weight:600}
@media(max-width:768px){.pd-lb-nav{width:36px;height:36px;font-size:28px}.pd-lb-prev{left:8px}.pd-lb-next{right:8px}}
.pd-stock{font-size:13px;margin-top:4px}
.pd-thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding:4px 0}
.pd-thumb{width:70px;height:70px;object-fit:cover;border:2px solid var(--c-border);cursor:pointer;opacity:.5;transition:all .2s;flex-shrink:0}
.pd-thumb.active,.pd-thumb:hover{border-color:var(--c-primary);opacity:1}
/* Summary */
.pd-summary{display:flex;flex-direction:column;gap:16px}
.pd-breadcrumb{font-size:13px;color:var(--c-muted)}
.pd-breadcrumb a{color:var(--c-muted)}
.pd-breadcrumb a:hover{color:var(--c-primary)}
.pd-name{font-family:var(--font-t);font-size:clamp(22px,3vw,32px);font-weight:400;color:var(--c-title)}
.pd-price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pd-price{font-size:26px;font-weight:700;color:var(--c-entity)}
.pd-price .cur{font-size:14px;font-weight:400;color:var(--c-muted)}
.pd-compare{font-size:18px;color:var(--c-muted);text-decoration:line-through}
/* Issue #1526: the badge is only "-35%". Without this the Arabic page draws
   the minus after the digits ("35%-"). The variant JS rewrites this element
   with textContent, so the rule has to live here and not in the markup. */
.pd-discount{background:var(--c-primary);color:#fff;font-size:12px;font-weight:700;padding:2px 10px;direction:ltr;unicode-bidi:isolate}
.pd-short{font-size:14px;color:var(--c-text);line-height:1.8}
.pd-sku{font-size:13px;color:var(--c-muted)}
/* Variants */
.pd-variants{display:flex;flex-direction:column;gap:16px}
.pd-vg-label{font-size:13px;font-weight:700;color:var(--c-entity);margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px}
.pd-vg-label .pd-vg-val{font-weight:400;color:var(--c-primary);margin-inline-start:4px;text-transform:none}
.pd-swatches{display:flex;flex-wrap:wrap;gap:8px}
.pd-sw-img{width:48px;height:48px;padding:2px;border:2px solid var(--c-border);cursor:pointer;transition:all .2s;overflow:hidden}
.pd-sw-img:hover{border-color:var(--c-entity)}
.pd-sw-img.active{border-color:var(--c-primary)}
.pd-sw-img img{width:100%;height:100%;object-fit:cover}
.pd-sw-txt{min-width:40px;height:36px;padding:4px 14px;border:2px solid var(--c-border);cursor:pointer;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;transition:all .2s;background:#fff;color:var(--c-entity)}
.pd-sw-txt:hover{border-color:var(--c-entity)}
.pd-sw-txt.active{border-color:var(--c-primary);background:var(--c-primary);color:#fff}
/* Issue #1566: a combination the supplier does not sell. The swatch is NOT
   removed — the buyer must still see that the colour exists — it is faded and
   struck through, the mark AliExpress, Amazon and Shopify all use. Fading on
   its own reads as "still loading". The line is drawn in currentColor, so it
   works on both the picture swatch and the text one and adds no new colour.
   This file is loaded by every storefront theme, so both product pages get it
   from one rule. */
.pd-sw-off{opacity:.35;pointer-events:none;cursor:not-allowed;position:relative}
.pd-sw-off::after{content:"";position:absolute;inset:0;background:linear-gradient(to top left,transparent calc(50% - 1px),currentColor calc(50% - 1px),currentColor calc(50% + 1px),transparent calc(50% + 1px))}
/* Qty + Cart */
.pd-qty{display:flex;align-items:center;border:1px solid var(--c-border);width:fit-content}
.pd-qty button{width:38px;height:38px;border:none;background:#f7f7f7;font-size:16px;cursor:pointer;color:var(--c-entity);font-weight:600}
.pd-qty button:hover{background:#eee}
.pd-qty input{width:45px;text-align:center;border:none;border-inline:1px solid var(--c-border);font-size:14px;font-weight:600;height:38px;font-family:var(--font)}
.pd-cart-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pd-add-btn{flex:1;min-width:200px}
/* Share */
.pd-share{display:flex;gap:12px;align-items:center;padding-top:12px;border-top:1px solid var(--c-border-l)}
.pd-share span{font-size:13px;color:var(--c-muted);font-weight:600}
.pd-share a{color:var(--c-muted);font-size:13px}
.pd-share a:hover{color:var(--c-primary)}
/* Tabs */
.pd-tabs{background:#fff;border:1px solid var(--c-border);margin-top:10px}
.pd-tabs-nav{display:flex;border-bottom:1px solid var(--c-border);justify-content:center;overflow-x:auto}
.pd-tab-btn{padding:16px 28px;font-family:var(--font);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--c-muted);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:all .2s;white-space:nowrap}
.pd-tab-btn:hover{color:var(--c-entity)}
.pd-tab-btn.active{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.pd-tab-content{display:none;padding:30px;max-width:720px;margin-inline:auto}
.pd-tab-content.active{display:block}
.pd-tab-content p{margin-bottom:12px;line-height:1.8}
.pd-tab-content img{max-width:100%;height:auto;display:block;margin:12px auto}
/* Shipping info */
.pd-ship{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pd-ship-item{display:flex;gap:12px;align-items:flex-start;padding:14px;background:var(--c-bg)}
.pd-ship-item svg{flex-shrink:0;color:var(--c-primary)}
.pd-ship-item strong{display:block;font-size:13px;color:var(--c-entity);margin-bottom:2px}
.pd-ship-item p{font-size:13px;color:var(--c-text);margin:0}
@media(max-width:768px){
  /* Product detail — single column */
  .pd{grid-template-columns:1fr!important;gap:20px;padding:16px 0}
  .pd-gallery{position:static!important;max-width:100%;overflow:hidden}
  .pd-zoom-wrap{border:none;background:transparent;cursor:zoom-in}
  .pd-main-img{aspect-ratio:auto!important;max-height:380px;width:100%!important;object-fit:contain!important;background:#f9f9f9;border:1px solid var(--c-border);border-radius:8px}
  .pd-name{font-size:20px}
  .pd-price{font-size:22px}
  .pd-compare{font-size:15px}
  .pd-price-row{gap:8px}
  .pd-sw-img{width:40px;height:40px}
  .pd-sw-txt{min-width:36px;height:32px;padding:3px 10px;font-size:12px}
  .pd-cart-row{flex-direction:column;gap:10px}
  .pd-cart-row .btn{width:100%;text-align:center;padding:14px 20px;font-size:15px}
  .pd-qty{width:100%;justify-content:center}
  .pd-qty button{width:48px;height:48px;font-size:18px}
  .pd-qty input{width:56px;height:48px;font-size:16px}
  .pd-ship{grid-template-columns:1fr}
  .pd-tabs{border:none;margin-top:0}
  .pd-tabs-nav{justify-content:flex-start;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:2px solid var(--c-border)}
  .pd-tab-btn{padding:12px 14px;font-size:11px;letter-spacing:0;flex-shrink:0}
  .pd-tab-content{padding:20px 12px}
  .pd-tab-content img{max-width:100%!important;height:auto!important}
  .pd-tab-content table{max-width:100%;overflow-x:auto;display:block}
  .pd-thumbs{gap:6px}
  .pd-thumb{width:56px;height:56px}
  .pd-breadcrumb{padding:10px 0;font-size:12px}
  .pd-swatches{gap:6px}
  .pd-variants{gap:12px}
  /* Wishlist/Compare/Share row */
  .pd-summary > div:last-child{flex-direction:column;align-items:stretch;gap:8px}
  .pd-summary > div:last-child span{margin:0!important;justify-content:center}
}
@media(max-width:576px){
  .pd-main-img{max-height:320px}
  .pd-thumb{width:48px;height:48px}
}
@media(max-width:414px){
  .pd-main-img{max-height:280px}
  .pd-cart-row .btn{padding:12px 16px;font-size:14px}
  .pd-name{font-size:18px}
  .pd-price{font-size:20px}
}

/* === SHOP === */
/* Shop page — OmniMart catalog exact match */
.shop-breadcrumb{padding:12px 0;font-size:13px;color:var(--c-muted);border-bottom:1px solid var(--c-border);margin-bottom:20px}
.shop-breadcrumb a{color:var(--c-muted)}
.shop-breadcrumb a:hover{color:var(--c-primary)}

/* Toolbar */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;background:#fff;border:1px solid var(--c-border);border-radius:10px;margin-bottom:20px}
.shop-toolbar .quick-filter{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--c-border);font-size:13px;color:var(--c-entity);cursor:pointer;background:#fff;border-radius:4px;font-family:var(--font)}
.shop-toolbar .quick-filter:hover{border-color:var(--c-primary);color:var(--c-primary)}
.shop-toolbar select{padding:8px 12px;border:1px solid var(--c-border);font-size:13px;font-family:var(--font);background:#fff;cursor:pointer;border-radius:4px;outline:none}
.shop-toolbar .showing{font-size:13px;color:var(--c-muted)}
.shop-toolbar .view-toggle{display:flex;gap:4px}
.shop-toolbar .view-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--c-border);cursor:pointer;color:var(--c-muted);background:#fff}
.shop-toolbar .view-btn.active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}

/* Layout */
.shop-layout{display:flex;gap:24px;padding-bottom:60px}
.shop-sidebar{width:240px;flex-shrink:0}
.shop-content{flex:1;min-width:0}
/* Desktop: hide mobile-only elements, show list style */
.sidebar-header{display:none}
.sidebar-footer{display:none}
.sidebar-body{display:block}
.shop-coll-chips{display:flex;flex-direction:column;gap:0}
.coll-chip{display:flex;align-items:center;gap:6px;padding:7px 0;font-size:14px;color:var(--c-text);text-decoration:none;transition:color .2s}
.coll-chip:hover,.coll-chip.active{color:var(--c-primary)}
.coll-chip.active{font-weight:600}
.chip-check{display:none}

/* Sidebar */
.shop-widget{background:#fff;border:1px solid var(--c-border);border-radius:10px;padding:20px;margin-bottom:16px}
.shop-widget h4{font-size:15px;font-weight:700;color:var(--c-entity);margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--c-border)}
.shop-widget .search-input{width:100%;padding:10px 12px;border:1px solid var(--c-border);border-radius:4px;font-size:14px;font-family:var(--font);outline:none}
.shop-widget .search-input:focus{border-color:var(--c-primary)}
.shop-coll-list a{display:block;padding:7px 0;font-size:14px;color:var(--c-text);transition:color .2s;display:flex;align-items:center;gap:6px}
.shop-coll-list a:hover,.shop-coll-list a.active{color:var(--c-primary)}
.shop-coll-list a svg{flex-shrink:0}

/* Product grid — dynamic columns */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.shop-grid-2{grid-template-columns:repeat(2,1fr)}
.shop-grid-3{grid-template-columns:repeat(3,1fr)}
.shop-grid-4{grid-template-columns:repeat(4,1fr)}
.shop-grid-5{grid-template-columns:repeat(5,1fr)}
/* List view */
.shop-grid.list-view{grid-template-columns:1fr}
.shop-grid.list-view .product-card{display:flex;flex-direction:row;border-radius:10px}
.shop-grid.list-view .product-card .product-thumb{width:220px;flex-shrink:0}
.shop-grid.list-view .product-card .product-thumb::before{padding-top:100%}
.shop-grid.list-view .product-card .product-card-body{display:flex;flex-direction:column;justify-content:center;padding:20px;flex:1}
.shop-grid.list-view .product-card .product-title a{-webkit-line-clamp:unset;min-height:auto;font-size:16px}
.shop-grid.list-view .product-card .product-button-group{display:none}

/* Product card rating stars */
.rating-stars{color:var(--c-primary);font-size:12px;margin-bottom:4px;letter-spacing:1px}
.rating-stars .star{color:var(--c-primary)}
.rating-stars .star-empty{color:#ddd}

/* Lazy load fade-in */
.lazy-img{opacity:0;transition:opacity .6s ease}
.lazy-img.loaded{opacity:1}

/* Pagination */
.shop-pagination{display:flex;align-items:center;justify-content:center;gap:4px;padding:32px 0}
.shop-pagination a,.shop-pagination span{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;font-size:14px;font-weight:600;border:1px solid var(--c-border);color:var(--c-entity);text-decoration:none;transition:all .2s;border-radius:4px}
.shop-pagination a:hover{border-color:var(--c-primary);color:var(--c-primary)}
.shop-pagination .pg-active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.shop-pagination .pg-dots{border:none;color:var(--c-muted)}

/* Empty state */
.shop-empty{text-align:center;padding:80px 20px}

/* Active filter pills */
.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filter-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#fff;border:1px solid var(--c-border);font-size:13px;color:var(--c-entity);border-radius:20px}
.filter-pill a{color:var(--c-danger);font-weight:700;text-decoration:none;font-size:16px;line-height:1}

/* Mobile filter */
.shop-filter-fab{display:none;position:fixed;bottom:24px;left:0;right:0;margin:0 auto;width:fit-content;background:var(--c-primary);color:#fff;border:none;padding:12px 24px;font-size:14px;font-weight:700;cursor:pointer;z-index:99;border-radius:30px;box-shadow:0 4px 16px rgba(0,0,0,.2);font-family:var(--font)}
.shop-filter-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200}

@media(max-width:991px){
  /* Full-screen filter panel from right */
  .shop-sidebar{
    display:flex;flex-direction:column;position:fixed;top:0;
    inset-inline-end:0;inset-inline-start:auto;
    width:100%;max-width:400px;height:100%;height:100dvh;
    background:#f8f9fa;z-index:201;overflow:hidden;padding:0;
    box-shadow:-4px 0 30px rgba(0,0,0,.1);
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.32,.72,0,1)
  }
  [dir="rtl"] .shop-sidebar{transform:translateX(-100%)}
  .shop-sidebar.open{transform:translateX(0)}

  /* Sticky header */
  .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;border-bottom:1px solid var(--c-border);flex-shrink:0}
  .sidebar-header h4{font-size:18px;font-weight:800;color:var(--c-entity);margin:0}
  .sidebar-close-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background:#f0f0f0;border-radius:50%;cursor:pointer;color:var(--c-entity);transition:background .2s}
  .sidebar-close-btn:active{background:#e0e0e0}

  /* Scrollable body */
  .sidebar-body{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

  /* Sticky footer */
  .sidebar-footer{display:flex;gap:12px;padding:16px 20px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--c-border);flex-shrink:0;box-shadow:0 -2px 10px rgba(0,0,0,.05)}
  .sidebar-btn-clear{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 16px;background:#f5f5f5;color:var(--c-entity);border:1px solid var(--c-border);border-radius:12px;font-size:14px;font-weight:600;font-family:var(--font);cursor:pointer;text-decoration:none;transition:background .2s}
  .sidebar-btn-clear:hover,.sidebar-btn-clear:active{background:#eaeaea;color:var(--c-entity)}
  .sidebar-btn-apply{flex:2;padding:14px 16px;background:var(--c-primary);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;transition:opacity .2s}
  .sidebar-btn-apply:active{opacity:.85}

  /* Widget cards inside filter */
  .shop-widget{background:#fff;border:none;border-radius:14px;padding:20px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
  .shop-widget h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--c-muted);margin-bottom:14px;padding-bottom:0;border-bottom:none}
  .shop-widget .search-input{padding:14px 16px;border-radius:10px;font-size:15px;border:1.5px solid var(--c-border);background:#fafafa}
  .shop-widget .search-input:focus{background:#fff;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(var(--c-primary-rgb,0,0,0),.08)}

  /* Collection chips */
  .shop-coll-chips{display:flex;flex-wrap:wrap;gap:10px}
  .coll-chip{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;background:#f5f5f5;border:1.5px solid var(--c-border);border-radius:20px;font-size:13px;font-weight:500;color:var(--c-text);text-decoration:none;transition:all .2s ease;white-space:nowrap}
  .coll-chip:active{transform:scale(.96)}
  .coll-chip.active{background:var(--c-primary);border-color:var(--c-primary);color:#fff;font-weight:600}
  .chip-check{flex-shrink:0}

  /* Price range bigger targets */
  .price-inputs{flex-wrap:wrap;gap:10px}
  .price-inputs input[type="number"]{width:70px!important;flex:1;padding:12px 10px;border-radius:10px;font-size:14px;border:1.5px solid var(--c-border);background:#fafafa}
  .price-inputs input[type="number"]:focus{background:#fff;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(var(--c-primary-rgb,0,0,0),.08)}
  .price-slider-track{height:40px;margin-bottom:4px}
  .price-slider-track input[type="range"]::-webkit-slider-thumb{width:24px;height:24px;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
  .price-slider-track input[type="range"]::-moz-range-thumb{width:24px;height:24px;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
  /* Hide per-widget apply (footer handles it) */
  .price-apply-btn{display:none}

  /* Overlay */
  .shop-filter-overlay{transition:opacity .35s ease;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
  .shop-filter-overlay.open{display:block;opacity:1}

  /* Hide old close row */
  .sidebar-close-row{display:none!important}

  /* FAB button */
  .shop-filter-fab{display:flex;align-items:center;gap:8px;padding:14px 28px;border-radius:50px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;box-shadow:0 4px 20px rgba(0,0,0,.2)}
  .shop-filter-fab:active{transform:scale(.94)}

  /* Grid adjustment */
  .shop-grid,.shop-grid-4,.shop-grid-5{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:767px){
  .shop-grid,.shop-grid-3,.shop-grid-4,.shop-grid-5{grid-template-columns:repeat(2,1fr);gap:10px}
  .shop-toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .shop-toolbar > div{flex-wrap:wrap}
  .shop-toolbar .showing{font-size:12px;width:100%;text-align:center}
  .active-filters{flex-wrap:wrap;gap:6px}
  .filter-pill{font-size:11px;padding:4px 10px}
  .shop-grid.list-view .product-card{flex-direction:column}
  .shop-grid.list-view .product-card .product-thumb{width:100%}
}
@media(max-width:414px){
  .shop-grid,.shop-grid-3,.shop-grid-4,.shop-grid-5{grid-template-columns:repeat(2,1fr);gap:8px}
}

/* === TRACK === */
.track-hero{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark,#232323));padding:48px 20px;text-align:center;color:#fff}
.track-hero h1{font-size:28px;font-weight:700;margin-bottom:8px;color:#fff}
.track-hero p{opacity:.85;font-size:15px;margin-bottom:24px}
.track-search{max-width:560px;margin:0 auto;display:flex;gap:0;border-radius:6px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.15)}
.track-search input{flex:1;padding:14px 18px;border:none;font-size:15px;font-family:var(--font);outline:none}
.track-search button{padding:14px 28px;background:#232323;color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;transition:background .2s;white-space:nowrap}
.track-search button:hover{background:#444}
.timeline{display:flex;align-items:flex-start;justify-content:space-between;padding:30px 0;position:relative;max-width:700px;margin:0 auto}
.timeline::before{content:'';position:absolute;top:22px;left:40px;right:40px;height:3px;background:var(--c-border);z-index:0}
.timeline-fill{position:absolute;top:22px;left:40px;height:3px;background:var(--c-primary);z-index:1;transition:width .5s ease}
.tl-step{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2;flex:1;text-align:center}
.tl-dot{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:10px;transition:all .3s}
.tl-dot-pending{background:#f0f0f0;color:var(--c-muted);border:2px solid var(--c-border)}
.tl-dot-active{background:var(--c-primary);color:#fff;border:2px solid var(--c-primary);box-shadow:0 0 0 4px rgba(var(--c-primary-rgb),.2)}
.tl-dot-done{background:#459647;color:#fff;border:2px solid #459647}
.tl-dot-cancelled{background:#dc2626;color:#fff;border:2px solid #dc2626}
.tl-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--c-muted)}
.tl-label-active{color:var(--c-primary)}
.tl-label-done{color:#459647}
.order-detail-card{max-width:700px;margin:30px auto 0;background:#fff;border:1px solid var(--c-border);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.03),0 4px 20px rgba(0,0,0,.04)}
.odc-header{padding:20px 24px;border-bottom:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.odc-section{padding:20px 24px;border-bottom:1px solid var(--c-border)}
.odc-section:last-child{border-bottom:none}
.odc-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--c-muted);margin-bottom:12px}
.odc-item{display:flex;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--c-border-l)}
.odc-item:last-child{border-bottom:none}
.odc-item-img{width:56px;height:56px;object-fit:cover;border:1px solid var(--c-border-l);border-radius:6px;flex-shrink:0}
.odc-item-name{font-size:14px;font-weight:500;color:var(--c-entity);flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.odc-item-qty{font-size:13px;color:var(--c-muted);white-space:nowrap}
.not-found-box{max-width:500px;margin:40px auto;text-align:center;padding:48px 20px;background:var(--c-card);border:1px solid var(--c-border);border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.login-prompt{max-width:700px;margin:0 auto;background:#fffbeb;border:1px solid #fbbf24;border-radius:8px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px}
.login-prompt p{margin:0;font-size:14px;color:#92400e;line-height:1.5}
@media(max-width:600px){
  .track-search{flex-direction:column}
  .track-search button{padding:12px}
  .timeline{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:0;padding:20px 10px}
  .tl-step{min-width:80px}
  .login-prompt{flex-direction:column;text-align:center}
}

/* === AUTH PAGES (Login/Register/Forgot/Reset/Verify) === */
.auth-wrap{max-width:440px;margin:0 auto;padding:48px 0}
.auth-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:12px;padding:40px;box-shadow:0 1px 3px rgba(0,0,0,.03),0 4px 20px rgba(0,0,0,.04)}
.auth-title{font-family:var(--font-t);font-size:26px;font-weight:400;color:var(--c-title);text-align:center;margin-bottom:8px}
.auth-sub{text-align:center;color:var(--c-muted);font-size:14px;margin-bottom:28px;line-height:1.6}
.auth-fg{margin-bottom:18px}
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-link{font-size:13px;color:var(--c-primary);text-decoration:none;transition:opacity .2s}
.auth-link:hover{text-decoration:underline;opacity:.85}
.auth-footer{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--c-border-l);font-size:14px;color:var(--c-text)}
.auth-err{background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;color:#991b1b;padding:12px 16px;font-size:13px;margin-bottom:18px;display:flex;align-items:center;gap:8px;line-height:1.5}
.auth-ok{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;color:#166534;padding:12px 16px;font-size:13px;margin-bottom:18px;display:flex;align-items:center;gap:8px;line-height:1.5}
.auth-back{text-align:center;margin-top:16px}
.auth-back a{font-size:13px;color:var(--c-muted);transition:color .2s}
.auth-back a:hover{color:var(--c-primary)}
.result-title{font-family:var(--font-t);font-size:28px;font-weight:400;color:var(--c-title);margin-bottom:10px}
.btn-loading{position:relative;pointer-events:none;opacity:.75}
.btn-loading::after{content:'';width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:btn-spin .5s linear infinite;display:inline-block;vertical-align:middle;margin-inline-start:8px}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media(max-width:480px){.auth-row{grid-template-columns:1fr}.auth-card{padding:28px 20px;border-radius:10px}.result-title{font-size:22px}}

/* === ACCOUNT (Profile/Orders/Order Detail) === */
.acc-greeting{font-family:var(--font-t);font-size:28px;font-weight:400;color:var(--c-title);margin-bottom:4px}
@media(max-width:480px){.acc-greeting{font-size:22px}}
.acc-wrap{max-width:800px;margin:0 auto;padding:32px 0}
.acc-nav{display:flex;gap:0;border-bottom:2px solid var(--c-border);margin-bottom:28px}
.acc-nav a{padding:12px 20px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--c-muted);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all var(--ease)}
.acc-nav a:hover,.acc-nav a.active{color:var(--c-primary);border-bottom-color:var(--c-primary)}
.acc-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:10px;padding:28px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.02)}
.acc-card h3{font-family:var(--font-t);font-size:20px;font-weight:400;color:var(--c-title);margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid var(--c-border-l)}
.acc-fg{margin-bottom:16px}
.acc-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.acc-alert-ok{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;color:#166534;padding:12px 16px;font-size:13px;margin-bottom:18px}
.acc-alert-err{background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;color:#991b1b;padding:12px 16px;font-size:13px;margin-bottom:18px}
.acc-verify{background:#fffbeb;border:1px solid #fbbf24;border-radius:8px;padding:12px 16px;font-size:13px;color:#92400e;margin-bottom:18px;display:flex;align-items:center;gap:8px}
@media(max-width:768px){.acc-row{grid-template-columns:1fr}}

/* === ORDER CARDS (Orders list) === */
.ord-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:10px;padding:20px;margin-bottom:14px;display:flex;align-items:center;gap:16px;transition:all var(--ease)}
.ord-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.06);border-color:var(--c-primary)}
.ord-img{width:64px;height:64px;object-fit:cover;border:1px solid var(--c-border-l);border-radius:8px;flex-shrink:0}
.ord-info{flex:1;min-width:0}
.ord-num{font-size:15px;font-weight:700;color:var(--c-entity)}
.ord-meta{font-size:13px;color:var(--c-muted);margin-top:2px}
.ord-total{font-size:16px;font-weight:700;color:var(--c-entity);white-space:nowrap}
.ord-status{display:inline-block;padding:4px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;border-radius:4px}
.ord-empty{text-align:center;padding:60px 20px;color:var(--c-muted)}
/* #957 — the colour moves to `color`, the stroke follows it. Same pixels, but
   the icon now takes its colour by inheritance, so anything that sets a colour
   on this icon can win without fighting a `stroke` declaration. */
.ord-empty svg{width:48px;height:48px;color:var(--c-border);stroke:currentColor;margin-bottom:12px}
@media(max-width:600px){.ord-card{flex-wrap:wrap}.ord-img{width:48px;height:48px}}

/* === ORDER DETAIL === */
.od-wrap{max-width:800px;margin:0 auto;padding:32px 0}
.od-back{font-size:13px;color:var(--c-muted);display:inline-flex;align-items:center;gap:4px;margin-bottom:12px;transition:color .2s}
.od-back:hover{color:var(--c-primary)}
.od-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.od-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:10px;padding:24px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.02)}
.od-card h3{font-family:var(--font-t);font-size:18px;font-weight:400;color:var(--c-title);margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--c-border-l)}
.od-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.od-label{color:var(--c-muted)}
.od-status{display:inline-block;padding:4px 12px;font-size:12px;font-weight:700;text-transform:uppercase;border-radius:4px}
.od-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:768px){.od-grid{grid-template-columns:1fr}.od-header{flex-direction:column;align-items:flex-start;gap:8px}}

/* === STATUS BADGES (shared) === */
.s-pending{background:#fff3cd;color:#856404}
.s-processing{background:#cce5ff;color:#004085}
.s-shipped{background:#d4edda;color:#155724}
.s-delivered{background:#d1e7dd;color:#0f5132}
.s-cancelled{background:#f8d7da;color:#721c24}

/* === FLASH DEAL SECTION === */
.flash-deal-section{background:linear-gradient(135deg,#fff5f5 0%,#fff 100%);padding:30px 0;border-bottom:1px solid var(--c-border)}
.flash-deal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.flash-deal-title{display:flex;align-items:center;gap:10px}
.flash-deal-title svg{color:var(--c-primary)}
.flash-deal-title h2{font-family:var(--font-t);font-size:22px;font-weight:700;color:var(--c-title);margin:0}
.flash-deal-name{font-size:13px;color:var(--c-muted);font-weight:400;margin-inline-start:8px}

/* === SPECIAL PICK TABS === */
.special-tabs{display:flex;gap:0;border:1px solid var(--c-border);border-radius:4px;overflow:hidden}
.sp-tab{padding:8px 20px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;border:none;background:#fff;color:var(--c-muted);cursor:pointer;transition:all .25s;border-right:1px solid var(--c-border)}
.sp-tab:last-child{border-right:none}
.sp-tab:hover{color:var(--c-entity)}
.sp-tab.active{background:var(--c-primary);color:#fff}
.sp-content{display:none}
.sp-content.active{display:block;animation:spFadeIn .3s ease}
@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:767px){.special-tabs{flex-wrap:wrap}.sp-tab{flex:1;min-width:80px;text-align:center;font-size:11px;padding:6px 10px}}

/* === POPULAR BRANDS === */
.brand-item{display:flex;align-items:center;justify-content:center;height:80px;padding:10px 20px;background:#fff;border:1px solid var(--c-border-l);border-radius:6px;transition:border-color .25s}
.brand-item:hover{border-color:var(--c-primary)}
.brand-logo{max-height:50px;max-width:120px;object-fit:contain;filter:grayscale(100%);opacity:.6;transition:all .3s}
.brand-item:hover .brand-logo{filter:grayscale(0);opacity:1}
.brand-name-text{font-size:14px;font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:1px}

/* === PRICE RANGE FILTER === */
.price-range-wrap{padding:4px 0}
.price-inputs{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.price-inputs input[type="number"]{width:70px;padding:6px 8px;border:1px solid var(--c-border);font-size:13px;font-family:var(--font);text-align:center;border-radius:4px}
.price-inputs input:focus{outline:none;border-color:var(--c-primary)}
.price-inputs span{font-size:13px;color:var(--c-muted)}
.price-currency{font-size:12px;color:var(--c-muted);font-weight:600}
.price-slider-track{position:relative;height:30px;margin-bottom:8px}
.price-slider-track input[type="range"]{position:absolute;width:100%;top:4px;pointer-events:none;-webkit-appearance:none;appearance:none;background:transparent;height:20px;margin:0}
.price-slider-track input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--c-primary);cursor:pointer;pointer-events:all;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.price-slider-track input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--c-primary);cursor:pointer;pointer-events:all;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.price-apply-btn{width:100%;padding:8px;background:var(--c-primary);color:#fff;border:none;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:opacity .2s;border-radius:4px}
.price-apply-btn:hover{opacity:.9}

/* === SEARCH AUTOCOMPLETE === */
.search-autocomplete-wrap{position:relative}
.search-suggestions{position:absolute;top:100%;inset-inline-start:0;inset-inline-end:0;background:#fff;border:1px solid var(--c-border);box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:100;display:none;max-height:320px;overflow-y:auto;border-radius:0 0 6px 6px}
.suggest-item{display:flex;align-items:center;gap:10px;padding:10px 12px;text-decoration:none;color:var(--c-text);transition:background .15s;border-bottom:1px solid var(--c-border-l)}
.suggest-item:last-child{border-bottom:none}
.suggest-item:hover{background:var(--c-bg)}
.suggest-img{width:40px;height:40px;object-fit:cover;border-radius:4px;border:1px solid var(--c-border-l);flex-shrink:0}
.suggest-info{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.suggest-name{font-size:13px;font-weight:500;color:var(--c-entity);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest-price{font-size:12px;font-weight:700;color:var(--c-primary)}

/* === FILTER CLEAR ALL === */
.filter-clear{font-size:12px;color:var(--c-primary);font-weight:600;text-decoration:none;margin-inline-start:8px}
.filter-clear:hover{text-decoration:underline}

/* === WISHLIST HEART === */
.wishlist-btn.wishlisted{color:var(--c-primary)}
.wishlist-btn svg{transition:transform .2s}
.wishlist-btn:active svg{transform:scale(1.3)}

/* === COMPARE TABLE === */
.compare-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--c-border);border-radius:8px;overflow:hidden}
.compare-table th,.compare-table td{padding:14px 16px;border-bottom:1px solid var(--c-border-l);vertical-align:middle}
.compare-table th{background:#fff;border-bottom:2px solid var(--c-border)}
.compare-table td:first-child{background:var(--c-bg);font-size:13px;white-space:nowrap}
.compare-table tr:last-child td{border-bottom:none}

/* === COMPARE BUTTON STATE === */
.compare-btn.compared{color:var(--c-primary);background:rgba(var(--c-primary-rgb,59,130,246),.1)}
/* #957 — currentColor, not a fixed colour. The rule above already paints this
   button `var(--c-primary)`, so the icon looks exactly the same, but a theme or
   a component that changes the button's `color` now changes the icon with it. */
.compare-btn.compared svg{stroke:currentColor}

/* === USER PROFILE DROPDOWN === */
.user-dropdown-wrap{position:relative}
.user-profile-trigger{cursor:pointer}
.user-dropdown{display:none;position:absolute;top:100%;right:0;min-width:220px;background:#fff;border:1px solid var(--c-border);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:200;border-radius:6px;overflow:hidden;padding:4px 0}
[dir="rtl"] .user-dropdown{right:auto;left:0}
.user-dropdown-wrap:hover .user-dropdown{display:block}
.user-dropdown-header{padding:12px 16px;border-bottom:1px solid var(--c-border-l);margin-bottom:4px}
.user-dropdown-header strong{display:block;font-size:14px;color:var(--c-entity)}
.user-dropdown-header small{display:block;font-size:12px;color:var(--c-muted);margin-top:2px}
.user-dropdown a{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;color:var(--c-text);text-decoration:none;transition:background .15s}
.user-dropdown a:hover{background:var(--c-bg);color:var(--c-primary)}
.user-dropdown a svg{flex-shrink:0;color:var(--c-muted)}
.user-dropdown a:hover svg{color:var(--c-primary)}
.user-dropdown-divider{height:1px;background:var(--c-border-l);margin:4px 0}
.user-dropdown-logout{color:#dc2626!important}
.user-dropdown-logout:hover{background:#fef2f2!important}
.user-dropdown-logout svg{color:#dc2626!important}

/* === WISHLIST ACTIVE HEART (outline + fill) === */
.wishlist-btn{transition:all .2s}
/* #957 — the heart follows the button's own colour instead of being painted on
   the svg. `.wishlist-btn.wishlisted` above already sets color:var(--c-primary)
   and the hover rule below sets the same colour the old bare `a:hover` used to,
   so the heart looks exactly the same on every theme. The difference is that a
   component can now recolour it by setting `color` on the button — that is what
   the shop card does when the heart sits on the accent background (#954). */
.wishlist-btn.wishlisted svg{fill:currentColor;stroke:currentColor}
.wishlist-btn:not(.wishlisted) svg{fill:none;stroke:currentColor}
.wishlist-btn:hover{color:var(--c-primary)}
.wishlist-btn:hover svg{stroke:currentColor}

/* === MOBILE BOTTOM NAVIGATION BAR === */
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:199;background:#fff;border-top:1px solid var(--c-border);padding:6px 0 env(safe-area-inset-bottom,6px);box-shadow:0 -2px 12px rgba(0,0,0,.08)}
.mobile-bottom-nav .bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:6px 4px;color:var(--c-muted);text-decoration:none;font-size:10px;font-weight:600;gap:2px;transition:color .2s;position:relative;-webkit-tap-highlight-color:transparent}
.mobile-bottom-nav .bottom-nav-item.active{color:var(--c-primary)}
/* #957 — currentColor. The line above already paints the active item, so the
   icon is unchanged and now follows whatever colour the item ends up with. */
.mobile-bottom-nav .bottom-nav-item.active svg{stroke:currentColor}
.mobile-bottom-nav .bottom-nav-item span{letter-spacing:.2px}
.mobile-bottom-nav .bottom-nav-cart-badge{position:absolute;top:0;right:50%;margin-right:-18px;background:var(--c-primary);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;line-height:1}
/* #1282 — hide a badge with no content, desktop and mobile. The views print
   "" for an empty cart now, and the add-to-cart script writes "" too, so this
   rule is the backstop for every path that leaves the badge empty. */
.sf-cart-badge:empty,.bottom-nav-cart-badge:empty,.cart-count-badge:empty{display:none}

/* ============================================================
   #128 — token-driven accent layer (storefront foundation).
   These rules read the per-store tokens set on :root by color.php
   (--accent, --accent-deep, --accent-rgb, --price-color). They use
   NO !important and NO hardcoded accent hex, so a store theme (its
   CSS loads AFTER this file) can override any of them with no leak.
   This replaces the old !important accent rules that used to live in
   color.php and forced the store color onto every theme.
   ============================================================ */
/* Price color comes from a token so a theme can change it. */
.product-price{color:var(--price-color,var(--c-primary))}
/* Sale + primary product badges use the accent background. */
.p-badge-sale{background:var(--accent);color:#fff}
.product-thumb .product-badge.bg-primary{background:var(--accent);color:#fff}
/* Product action buttons: darker accent on press/hover. */
.product-button:hover{background:var(--accent-deep);color:#fff}
/* Checkout: selected payment option gets a soft accent tint. */
.co-pay:has(input:checked){background:rgba(var(--accent-rgb),.04)}
/* Checkout section links hover to the accent. */
.co-section a:hover{color:var(--accent)}