/* ==========================================================================
   ILMCode Storefront Theme
   --------------------------------------------------------------------------
   The original build referenced this file (plus main.css, responsive.css and
   the menu stylesheets) but never shipped them, so the shop rendered as an
   unstyled document. This restores the theme against the class names the
   Blade views actually use.

   Bootstrap 5, Font Awesome, Owl Carousel and animate.css already load from
   CDN in the layout -- everything here is theme on top of that.
   ========================================================================== */

:root {
    --shop-primary: #0a6b3d;
    --shop-primary-dark: #075430;
    --shop-accent: #f0592a;
    --shop-ink: #1e2833;
    --shop-muted: #6b7785;
    --shop-line: #e6e9ed;
    --shop-bg: #f5f6f8;
    --shop-radius: 10px;
    --shop-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    --shop-shadow-lg: 0 8px 24px rgba(16, 24, 40, .12);
}

body {
    background: var(--shop-bg);
    color: var(--shop-ink);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Boxed layout
   --------------------------------------------------------------------------
   Desktop gets a centred page with the grey backdrop showing either side;
   phones and tablets stay edge to edge. The width lives in one variable so
   the whole site follows it.
   -------------------------------------------------------------------------- */

:root { --shop-box: 1400px; }

@media (min-width: 992px) {
    html { background: #e9ecef; }

    body {
        max-width: var(--shop-box);
        margin-inline: auto;
        background: var(--shop-bg);
        box-shadow: 0 0 34px rgba(16, 24, 40, .13);
        min-height: 100vh;
        /* No overflow-x here: on the body it propagates to the viewport,
           which then becomes the scroll container and every sticky
           header on the page stops sticking. Anything that would bleed
           past the box is held in by the rules just below. */
    }

    /* The one full-bleed section must stop at the box edge too. */
    .container-fluid { max-width: 100%; }

    /* Floating buttons follow the box instead of the viewport corner.
       The layout's own inline <style> loads after this file and also sets
       .whatsapp-float, so these need the extra specificity to win. */
    body .whatsapp-float { right: max(18px, calc((100vw - var(--shop-box)) / 2 + 18px)); }
    body .scroll-top-btn { right: max(18px, calc((100vw - var(--shop-box)) / 2 + 18px)); }
    body .call_now_btn   { left:  max(18px, calc((100vw - var(--shop-box)) / 2 + 18px)); }
}

a { text-decoration: none; color: inherit; }
a:hover { color: var(--shop-primary); }
img { max-width: 100%; height: auto; }
ul { list-style: none; padding: 0; margin: 0; }

/* --------------------------------------------------------------------------
   Top bar + header
   -------------------------------------------------------------------------- */

.top-barhead {
    background: var(--shop-primary);
    color: #fff;
    font-size: 12.5px;
    padding: 7px 0;
}
.top-barhead a { color: #fff; }
.top-barhead marquee { font-weight: 500; }

.main-header {
    background: #fff;
    box-shadow: var(--shop-shadow);
    position: relative;
    /* Above .cat-nav (60) below it. The live-search panel hangs out of this
       header, and a child cannot paint above an element that outranks its own
       positioned ancestor -- so the results were sliding under the category
       bar however high their own z-index went. */
    z-index: 70;
}
/* .header-top-inner belongs to the green marquee strip, NOT the main header. */
.header-top-inner { padding: 4px 0; }

/* The real header row. */
.logo-header {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 16px 0;
}
.main-logo { flex: 0 0 auto; }
.logo-image img, .main-logo img { max-height: 46px; width: auto; display: block; }
/* No logo uploaded yet -- keep the row from collapsing. */
.main-logo img[src$="/"], .main-logo img:not([src]) { display: none; }

/* --------------------------------------------------------------------------
   Header action buttons (account / cart)
   -------------------------------------------------------------------------- */

.hdr-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 14px 7px 11px;
    border: 1.5px solid var(--shop-line); border-radius: 10px;
    background: #fff; color: var(--shop-ink);
    font: inherit; cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .12s;
}
.hdr-btn:hover {
    border-color: var(--shop-primary);
    box-shadow: 0 4px 14px rgba(10, 107, 61, .12);
    color: var(--shop-ink);
}
.hdr-btn:active { transform: translateY(1px); }

.hdr-btn > i { font-size: 17px; color: var(--shop-primary); }

.hdr-btn-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.hdr-btn-text small { font-size: 10.5px; color: var(--shop-muted); }
.hdr-btn-text strong { font-size: 13px; font-weight: 700; white-space: nowrap; }

.hdr-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--shop-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
}

.hdr-cart-icon { position: relative; display: inline-flex; }
.hdr-cart-icon i { font-size: 18px; color: var(--shop-primary); }
.hdr-cart-count {
    position: absolute; top: -7px; right: -9px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--shop-accent); color: #fff;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center;
}
.hdr-btn-cart { border-color: rgba(10, 107, 61, .28); background: #f4f9f6; }
.hdr-btn-cart:hover { background: #eef6f1; }

/* Search */
/* --------------------------------------------------------------------------
   Header search

   One rounded field with the button tucked inside it, rather than an input
   and a button glued edge to edge. The frame belongs to the form, so the
   input itself carries no border and nothing has to line up.

   z-index sits above the category bar below: the results panel is a child of
   .main-search, and a child cannot paint above an element that outranks its
   own positioned ancestor, however high its own z-index is.
   -------------------------------------------------------------------------- */
.main-search {
    flex: 1 1 auto; max-width: 620px;
    position: relative; z-index: 60;
}
.main-search form,
.main-search .input-group {
    display: flex; align-items: center; gap: 6px;
    width: 100%; padding: 4px 4px 4px 40px;
    position: relative;
    background: #fff;
    border: 2px solid var(--shop-line);
    border-radius: 999px;
    transition: border-color .18s, box-shadow .18s;
}
.main-search form:focus-within {
    border-color: var(--shop-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--shop-primary) 15%, transparent);
}
/* The magnifier that sits in the field, distinct from the button's own. */
.main-search .search-lead {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    font-size: 13px; color: #9aa5b1; pointer-events: none;
}
.main-search input[type="text"],
.main-search input[type="search"],
.search_keyword {
    flex: 1 1 auto; min-width: 0;
    height: 38px; padding: 0;
    border: 0; outline: none; background: none;
    font-size: 14.5px; color: var(--shop-ink);
}
.search_keyword::placeholder { color: #9aa5b1; }

.main-search button {
    flex: 0 0 auto;
    width: 44px; height: 38px;
    border: 0;
    background: var(--shop-primary);
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.main-search button:hover { background: var(--shop-primary-dark); }

/* Live search results */
.search_result {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow-lg);
    max-height: 430px;
    /* One declaration: hidden across, scrolling down. Setting
       overflow-y and then overflow separately let the shorthand win
       and the list could not be scrolled. */
    overflow: hidden auto;
    z-index: 80;
}
.search_result:empty { display: none; }

.search-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 15px;
    background: #f7f9fa; border-bottom: 1px solid var(--shop-line);
    font-size: 11.5px; font-weight: 700; color: var(--shop-muted);
    text-transform: uppercase; letter-spacing: .04em;
}
.search-head-more { font-weight: 500; text-transform: none; letter-spacing: 0; }

.search_product ul { max-height: 330px; overflow-y: auto; }
.search_product li { border-bottom: 1px solid #f1f3f5; }
.search_product li:last-child { border-bottom: 0; }

.search_product a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 15px;
    transition: background .15s;
}
.search_product a:hover { background: #f4f9f6; }
.search_product a > i { margin-left: auto; font-size: 11px; color: var(--shop-primary); opacity: 0; transition: opacity .15s; }
.search_product a:hover > i { opacity: 1; }

.search_img {
    width: 46px; height: 46px; flex: 0 0 46px;
    border: 1px solid var(--shop-line); border-radius: 8px;
    overflow: hidden; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.search_img img { width: 100%; height: 100%; object-fit: contain; }

.search_content { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.search_content .name {
    font-size: 13px; font-weight: 500; color: var(--shop-ink);
    margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search_content .price { margin: 0; font-size: 13px; font-weight: 700; color: #e03131; }
.search_content .price del { font-size: 11.5px; font-weight: 500; color: var(--shop-muted); margin-left: 6px; }

.search-all {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px; border-top: 1px solid var(--shop-line);
    background: #f7f9fa;
    font-size: 12.5px; font-weight: 700; color: var(--shop-primary);
}
.search-all:hover { background: #eef4f0; color: var(--shop-primary-dark); }

.search-empty { padding: 26px 18px; text-align: center; }
.search-empty i { font-size: 26px; color: #cbd2d9; }
.search-empty p { margin: 9px 0 4px; font-size: 13px; color: var(--shop-muted); }
.search-empty a { font-size: 12.5px; font-weight: 700; color: var(--shop-primary); }

/* spinner while a query is in flight */
.main-search.is-loading button i,
.mobile-search.is-loading button i { opacity: .35; }
.search-loading {
    padding: 22px; text-align: center; color: var(--shop-muted); font-size: 12.5px;
}

/* Header right-hand items. The flex row is the <ul> inside, not this wrapper --
   putting it on the wrapper left every item stacked vertically. */
.header-list-items { margin-left: auto; flex: 0 0 auto; }
.header-list-items > ul {
    display: flex; align-items: center; gap: 18px;
    margin: 0; padding: 0; list-style: none;
}
.header-list-items > ul > li { display: flex; align-items: center; position: relative; }
.header-list-items p { margin: 0; }
.header-list-items a {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 500; color: var(--shop-ink);
    white-space: nowrap;
}
.header-list-items a:hover { color: var(--shop-primary); }
.header-list-items i { font-size: 16px; color: var(--shop-primary); }

.track_btn {
    padding: 8px 14px;
    border: 1.5px solid var(--shop-line);
    border-radius: var(--shop-radius);
    transition: all .2s;
}
.track_btn:hover { border-color: var(--shop-primary); background: #f2f8f5; }

/* Cart bubble */
.menu-bag, .go_cart { position: relative; }
.mobilecart-qty, .menu-bag .badge {
    position: absolute; top: -7px; right: -10px;
    background: var(--shop-accent); color: #fff;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    font-size: 10.5px; font-weight: 700; line-height: 18px;
    text-align: center;
}

/* Cart dropdown.
   .cart-dialog is the <li> trigger; .cshort-summary is the panel. Styling the
   li as the panel left the basket permanently open beside the header. */
.cart-dialog { position: relative; }

.cshort-summary {
    position: absolute; right: 0; top: calc(100% + 14px);
    width: 310px;
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow-lg);
    padding: 14px;
    z-index: 300;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.cart-dialog:hover .cshort-summary,
.cart-dialog:focus-within .cshort-summary {
    opacity: 1; visibility: visible; transform: none;
}
.cshort-summary ul { max-height: 260px; overflow-y: auto; margin: 0 0 10px; }
.cshort-summary ul li {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 0; border-bottom: 1px solid #f0f2f4;
    font-size: 12.5px;
}
.cshort-summary ul li img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; }
.cshort-summary > p { font-size: 14px; margin: 0 0 10px; }
.go_cart {
    display: block; text-align: center;
    background: var(--shop-primary); color: #fff;
    padding: 10px; border-radius: var(--shop-radius); font-weight: 600; font-size: 13px;
}
.go_cart:hover { background: var(--shop-primary-dark); color: #fff; }
.cart_remove, .remove-cart { color: #d33; cursor: pointer; }

/* --------------------------------------------------------------------------
   Side cart
   -------------------------------------------------------------------------- */

.side-cart-overlay {
    position: fixed; inset: 0;
    background: rgba(16, 24, 40, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s;
    z-index: 900;
}
.side-cart-overlay.open { opacity: 1; visibility: visible; }

.side-cart {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 380px; max-width: 90vw;
    background: #fff;
    box-shadow: -6px 0 30px rgba(16, 24, 40, .18);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 910;
    display: flex; flex-direction: column;
}
.side-cart.open { transform: none; }

.side-cart-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 18px;
    background: var(--shop-primary); color: #fff;
    flex: 0 0 auto;
}
.side-cart-head h4 {
    margin: 0; font-size: 15px; font-weight: 700;
    display: flex; align-items: center; gap: 9px;
}
.side-cart-badge {
    background: rgba(255, 255, 255, .22);
    border-radius: 999px; padding: 1px 9px;
    font-size: 11.5px; font-weight: 700;
}
.side-cart-head button {
    border: 0; background: rgba(255, 255, 255, .16); color: #fff;
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .18s;
}
.side-cart-head button:hover { background: rgba(255, 255, 255, .3); }

.side-cart-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 0; }

.side-cart-row {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 16px;
    border-bottom: 1px solid #f1f3f5;
}
.side-cart-row img {
    width: 54px; height: 54px; flex: 0 0 54px;
    object-fit: contain; background: #fff;
    border: 1px solid var(--shop-line); border-radius: 8px;
}
.side-cart-info { flex: 1 1 auto; min-width: 0; }
.side-cart-info a {
    display: block; font-size: 12.5px; font-weight: 500; line-height: 1.4;
    color: var(--shop-ink);
}
.side-cart-info a:hover { color: var(--shop-primary); }
.side-cart-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.side-cart-meta .qty { font-size: 11.5px; color: var(--shop-muted); }
.side-cart-meta .price { font-size: 13px; font-weight: 700; color: #e03131; }

.side-cart-remove {
    border: 0; background: none; cursor: pointer;
    width: 28px; height: 28px; border-radius: 7px;
    color: #adb5bd; flex: 0 0 28px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .18s, color .18s;
}
.side-cart-remove:hover { background: #fff0f0; color: #e03131; }

.side-cart-empty { padding: 60px 24px; text-align: center; }
.side-cart-empty i { font-size: 40px; color: #dde2e6; }
.side-cart-empty p { margin: 14px 0 10px; color: var(--shop-muted); font-size: 13.5px; }
.side-cart-empty a {
    display: inline-block;
    background: var(--shop-primary); color: #fff;
    padding: 9px 20px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
}
.side-cart-empty a:hover { background: var(--shop-primary-dark); color: #fff; }

.side-cart-foot {
    flex: 0 0 auto;
    border-top: 1px solid var(--shop-line);
    padding: 15px 18px 18px;
    background: #fafbfc;
}
.side-cart-total {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.side-cart-total span { font-size: 13px; color: var(--shop-muted); }
.side-cart-total strong { font-size: 19px; font-weight: 800; color: var(--shop-ink); }

.side-cart-checkout {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--shop-accent); color: #fff;
    padding: 12px; border-radius: 9px;
    font-size: 14px; font-weight: 700;
}
.side-cart-checkout:hover { background: #d94a1d; color: #fff; }

.side-cart-view {
    display: block; text-align: center; margin-top: 9px;
    font-size: 12.5px; font-weight: 600; color: var(--shop-primary);
}

body.cart-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Category navigation bar
   --------------------------------------------------------------------------
   Sits directly under the logo row and carries the whole category tree, so
   the homepage no longer has to give up a column to it.
   -------------------------------------------------------------------------- */

.cat-nav {
    background: var(--shop-primary);
    position: relative;
    z-index: 60;
}
.cat-nav-inner { display: flex; align-items: center; gap: 18px; }

/* -- the "All Categories" button and its flyout -- */
.cat-drop { position: relative; flex: 0 0 auto; }

.cat-drop-btn {
    display: inline-flex; align-items: center; gap: 10px;
    height: 46px; padding: 0 18px;
    background: rgba(0, 0, 0, .16);
    border: 0; color: #fff;
    font-size: 13.5px; font-weight: 700;
    cursor: pointer;
    min-width: 240px;
}
.cat-drop-btn .cat-caret { margin-left: auto; font-size: 11px; transition: transform .2s; }
.cat-drop:hover .cat-drop-btn .cat-caret { transform: rotate(180deg); }

.cat-drop-menu {
    position: absolute; left: 0; top: 100%;
    min-width: 280px;
    background: #fff;
    border: 1px solid var(--shop-line);
    border-top: 0;
    border-radius: 0 0 var(--shop-radius) var(--shop-radius);
    box-shadow: var(--shop-shadow-lg);
    padding: 6px 0;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 70;
}

/* Beyond the first few, categories wait behind "Show more" so the flyout
   finishes level with the hero slider instead of running down the page. */
.cat-drop-item.cat-extra { display: none; }
.cat-drop-menu.expanded .cat-drop-item.cat-extra { display: block; }
.cat-drop-menu.expanded { max-height: 70vh; overflow-y: auto; }

.cat-more { border-top: 1px solid var(--shop-line); margin-top: 4px; }
.cat-more button {
    width: 100%; border: 0; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 16px;
    font-size: 12px; font-weight: 700; color: var(--shop-primary);
}
.cat-more button:hover { background: #f4f7f5; }
.cat-more .more-off { display: none; }
.cat-drop-menu.expanded .cat-more .more-on { display: none; }
.cat-drop-menu.expanded .cat-more .more-off { display: inline-flex; align-items: center; gap: 7px; }
.cat-drop:hover .cat-drop-menu,
.cat-drop:focus-within .cat-drop-menu { opacity: 1; visibility: visible; transform: none; }

.cat-drop-item { position: relative; }
.cat-drop-item > a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px;
    font-size: 13px; font-weight: 500; color: var(--shop-ink);
}
.cat-drop-item > a img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.cat-drop-item > a span { flex: 1 1 auto; }
.cat-drop-item > a i { font-size: 10px; color: var(--shop-muted); }
.cat-drop-item:hover > a { background: #f4f7f5; color: var(--shop-primary); }

/* second and third level open to the right */
.cat-sub, .cat-child {
    position: absolute; left: 100%; top: -6px;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow-lg);
    padding: 6px 0;
    opacity: 0; visibility: hidden; transform: translateX(6px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 80;
}
.cat-drop-item:hover > .cat-sub,
.cat-sub > li:hover > .cat-child { opacity: 1; visibility: visible; transform: none; }

.cat-sub > li, .cat-child > li { position: relative; }
.cat-sub a, .cat-child a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 15px; font-size: 12.5px; color: var(--shop-ink);
}
.cat-sub a span { flex: 1 1 auto; }
.cat-sub a i { font-size: 9px; color: var(--shop-muted); }
.cat-sub a:hover, .cat-child a:hover { background: #f4f7f5; color: var(--shop-primary); }

/* If a flyout would run off the right edge, flip it to the left. */
.cat-drop-menu > li:last-child .cat-sub { top: auto; bottom: -6px; }

/* -- inline links -- */
.cat-nav-links { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; }
.cat-nav-links a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 14px; height: 46px;
    color: rgba(255, 255, 255, .92);
    font-size: 13px; font-weight: 500;
    transition: background .18s, color .18s;
}
.cat-nav-links a:hover { background: rgba(0, 0, 0, .14); color: #fff; }

/* An item with children (Store Management -> Menu -> Main menu) opens a
   dropdown on hover, mirroring the "All Categories" flyout beside it so the
   two menus feel like one system. */
.cat-nav-links li.has-dropdown { position: relative; }
.cat-nav-caret { font-size: 10px; transition: transform .18s; }
.has-dropdown:hover .cat-nav-caret { transform: rotate(180deg); }

.cat-nav-dropdown {
    position: absolute; left: 0; top: 100%;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: 0 0 var(--shop-radius) var(--shop-radius);
    box-shadow: var(--shop-shadow-lg);
    padding: 6px 0;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s;
    z-index: 70;
}
.has-dropdown:hover .cat-nav-dropdown,
.has-dropdown:focus-within .cat-nav-dropdown { opacity: 1; visibility: visible; transform: none; }

.cat-nav-dropdown a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 16px; height: auto;
    font-size: 12.5px; font-weight: 500; color: var(--shop-ink);
}
.cat-nav-dropdown a:hover { background: #f4f7f5; color: var(--shop-primary); }
.cat-nav-dropdown a i { width: 14px; text-align: center; color: var(--shop-muted); font-size: 11px; }

/* A category link's own picture (Categories management), shown instead of a
   Font Awesome icon -- see frontEnd/layouts/partials/menu-glyph.blade.php. */
.cat-nav-links .menu-glyph-img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.cat-nav-dropdown .menu-glyph-img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }

.cat-nav-hotline {
    display: inline-flex; align-items: center; gap: 8px;
    color: #fff; font-size: 13px; font-weight: 700;
    flex: 0 0 auto; white-space: nowrap;
}
.cat-nav-hotline:hover { color: #fff; opacity: .85; }
.cat-nav-hotline i { font-size: 15px; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.first-nav, .second-nav, .third-nav { background: #fff; }
.second-nav {
    border-top: 1px solid var(--shop-line);
    border-bottom: 1px solid var(--shop-line);
}
.second-nav ul { display: flex; flex-wrap: wrap; gap: 4px; }
.second-nav ul li a {
    display: block; padding: 12px 14px;
    font-size: 13.5px; font-weight: 500;
}
.second-nav ul li a:hover { color: var(--shop-primary); }

.menu-bar { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.animate-dropdown { position: relative; }
.animate-dropdown > ul {
    position: absolute; left: 0; top: 100%;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: 0 0 var(--shop-radius) var(--shop-radius);
    box-shadow: var(--shop-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: all .2s ease;
    z-index: 150;
}
.animate-dropdown:hover > ul { opacity: 1; visibility: visible; transform: none; }
.animate-dropdown > ul li a { display: block; padding: 9px 15px; font-size: 13px; }
.animate-dropdown > ul li a:hover { background: #f7f8fa; color: var(--shop-primary); }

.sticky {
    position: sticky; top: 0;
    box-shadow: var(--shop-shadow);
    z-index: 100;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.slider-section, .product-section, .category-list, .homeproduct { padding: 18px 0; }

.sec_title,
.section-title-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.section-title-name, .sec_title h2, .sec_title h3 {
    font-size: 18px; font-weight: 700; margin: 0;
    position: relative; padding-bottom: 7px;
}
/* Short accent rule under the section title. */
.section-title-name::after, .sec_title h2::after, .sec_title h3::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 46px; height: 3px; border-radius: 3px;
    background: var(--shop-accent);
}
.new-heading-bgcolor {
    background: #fff;
    border-radius: var(--shop-radius);
    padding: 12px 16px;
    box-shadow: var(--shop-shadow);
}
/* "View More" reads as an orange pill, matching the order button. */
.view_more_btn, .show_more_btn {
    font-size: 12.5px; font-weight: 700;
    background: var(--shop-accent); color: #fff;
    padding: 8px 16px; border-radius: 7px;
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap;
}
.view_more_btn:hover, .show_more_btn:hover { background: #d94a1d; color: #fff; }

/* Service strip (Discount / Free Delivery / Support / Secure Payment).
   .service_info sits on each Bootstrap column, so the card look goes on the
   inner wrapper -- styling the column itself fights the grid. */
.service_info > .d-flex,
.service_info > div {
    align-items: center; gap: 12px;
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    padding: 14px 12px;
    height: 100%;
}
.service_info img, .service_info #lgid { width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px; }
.infotext h4, .infotext h5 { font-size: 15px; font-weight: 700; margin: 0 0 2px; }
.infotext p { font-size: 12px; color: var(--shop-muted); margin: 0; }

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

/* Category sections use .product_sliders, which is not an Owl carousel and
   carries no grid classes -- without this every card stretched to full width.
   Hot Deal uses .product_slider (singular) + owl-carousel and was unaffected. */
.product_sliders {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}
/* Shop, category, hot-deals and search list pages use this wrapper. */
.category-product.main_product_inner,
.main_product_inner {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}
.product_sliders > .product_item,
.main_product_inner > .product_item { margin-bottom: 0; }

/* Grid sections: two rows, the rest behind "Show more". */
.product_sliders > .product_item.row-extra { display: none; }
.product_sliders.expanded > .product_item.row-extra { display: block; }

.section-bar {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 14px; margin-bottom: 14px;
}
.section-bar .sec_title { margin: 0; }

.section-more {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 16px;
    padding: 11px;
    border: 1.5px solid var(--shop-line); border-radius: 9px;
    background: #fff; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--shop-primary);
    transition: border-color .18s, background .18s;
}
.section-more:hover { border-color: var(--shop-primary); background: #f4f9f6; }
.section-more .more-off { display: none; }
.section-more.expanded .more-on { display: none; }
.section-more.expanded .more-off { display: inline-flex; align-items: center; gap: 8px; }

/* Carousel sections: "View More" sits in the heading corner, and the Owl
   arrows tuck into the top-right beside it. */
.home-section--slider .product_slider .owl-nav { position: absolute; top: -52px; right: 118px; }
.home-section--slider .product_slider .owl-nav button.owl-prev,
.home-section--slider .product_slider .owl-nav button.owl-next {
    position: static; transform: none;
    width: 30px; height: 30px; margin-left: 5px;
    border: 1.5px solid var(--shop-line) !important;
    background: #fff !important;
}
.home-section--slider .product_slider { position: relative; }

/* The base rule above is written with two classes
   (.category-product.main_product_inner), so a one-class selector in here
   loses on specificity no matter how narrow the screen -- which is why the
   category page stayed at five columns on a phone. Each breakpoint now names
   the compound selector as well. */
@media (max-width: 1199px) {
    .product_sliders,
    .category-product.main_product_inner,
    .main_product_inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    .product_sliders,
    .category-product.main_product_inner,
    .main_product_inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .product_sliders,
    .category-product.main_product_inner,
    .main_product_inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.product_item { margin-bottom: 18px; }
.product_item_inner {
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
    position: relative;
    transition: box-shadow .22s, transform .22s, border-color .22s;
}
.product_item_inner:hover {
    box-shadow: var(--shop-shadow-lg);
    transform: translateY(-3px);
    border-color: #d7dce2;
}

.pro_img { position: relative; display: block; background: #fff; overflow: hidden; }
.pro_img img {
    width: 100%; aspect-ratio: 1 / 1;
    object-fit: contain; padding: 8px;
    transition: transform .3s;
}
.product_item_inner:hover .pro_img img { transform: scale(1.04); }

.pro_des {
    padding: 10px 10px 10px;
    display: flex; flex-direction: column; flex: 1 1 auto;
    text-align: center;
}
.pro_name {
    font-size: 13.5px; font-weight: 500; line-height: 1.45;
    margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 39px;
}
.pro_name a { color: var(--shop-ink); }
.pro_name a:hover { color: var(--shop-primary); }

.pro_price {
    margin: 0 0 10px;
    display: flex; align-items: baseline; justify-content: center; gap: 9px;
    flex-wrap: wrap;
}
.pro_price del, .pro_price .old_price {
    font-size: 13px; font-weight: 500; color: #3b5bdb; text-decoration: line-through;
}
.pro_price .now { font-size: 15.5px; font-weight: 700; color: #e03131; }
/* Older markup put both prices in a bare <p>. */
.pro_price p { margin: 0; font-size: 15.5px; font-weight: 700; color: #e03131; }
.pro_price p del { margin-right: 7px; }

.pro_btn { margin-top: auto; display: flex; gap: 7px; }
.cart_btn, .addcartbutton, .add_cart_btn, .add-to-cart, .order_button, .cam_order_now {
    flex: 1 1 auto; width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--shop-accent); color: #fff;
    border: 0; border-radius: 7px;
    padding: 10px 12px;
    font-size: 13.5px; font-weight: 700;
    cursor: pointer; text-align: center;
    transition: background .2s, transform .12s;
}
.cart_btn:hover, .addcartbutton:hover, .add_cart_btn:hover,
.add-to-cart:hover, .order_button:hover, .cam_order_now:hover {
    background: #d94a1d; color: #fff;
}
.cart_btn:active, .addcartbutton:active, .order_button:active { transform: scale(.98); }

/* NOTE: .wist_item is NOT a wishlist button in this theme -- it sits on the
   product card wrapper (<div class="product_item wist_item">). Giving it a
   fixed button size collapses every card to 36px. Leave it unstyled.
   A real wishlist control would need its own class. */

/* Discount badge -- orange pill, top right. */
.sale-badge { position: absolute; top: 8px; right: 8px; z-index: 3; }
.sale-badge-box {
    background: var(--shop-accent); color: #fff;
    border-radius: 999px; padding: 3px 10px;
    box-shadow: 0 2px 6px rgba(240, 89, 42, .35);
}
.sale-badge-inner, .sale-badge-text {
    font-size: 11px; font-weight: 700; line-height: 1.5;
    display: block; white-space: nowrap; color: #fff;
}
.sale-badge-text p { margin: 0; }

/* --------------------------------------------------------------------------
   Categories
   -------------------------------------------------------------------------- */

.cat_item {
    display: block; text-align: center;
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    padding: 14px 8px;
    transition: box-shadow .2s, transform .2s;
}
.cat_item:hover { box-shadow: var(--shop-shadow-lg); transform: translateY(-2px); }
.cat_img img, .side_cat_img img {
    width: 62px; height: 62px; object-fit: contain;
    margin: 0 auto 8px; display: block;
}
.cat_name {
    font-size: 12.5px; font-weight: 600; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.sidebar_item, .category-filter-box {
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    padding: 14px;
    margin-bottom: 16px;
}
.sidebar_item .title { font-size: 15px; font-weight: 700; margin: 0 0 10px; }

.category-item > a, .subcategory-item > a, .childcategory-item > a {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 4px;
    font-size: 13px;
    border-bottom: 1px solid #f0f2f4;
}
.childcategory-item > a { padding-left: 16px; font-size: 12.5px; color: var(--shop-muted); }
.category-item > a:hover, .subcategory-item > a:hover, .childcategory-item > a:hover { color: var(--shop-primary); }
.toggle-sub { cursor: pointer; transition: transform .2s; }
.toggle-sub.open { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Offer timer
   -------------------------------------------------------------------------- */

/* NOTE: .timer_inner is the row that holds the section heading and the
   countdown side by side -- it is NOT a digit cell. Giving it the dark chip
   styling painted a black box over the section title. */
.timer_inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; width: 100%;
}

.offer_timer { display: flex; gap: 6px; align-items: center; }
/* The digits themselves. */
.offer_timer .syotimer-cell,
.offer_timer > span {
    background: var(--shop-ink); color: #fff;
    border-radius: 6px; padding: 4px 8px;
    font-size: 13px; font-weight: 700; min-width: 34px; text-align: center;
}

/* --------------------------------------------------------------------------
   Slider
   -------------------------------------------------------------------------- */

/* Hero row: category rail on the left, slider on the right. */
.slider-section { padding: 16px 0; }
.slider-section > .container-fluid > .row { align-items: stretch; }

.category-list {
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow);
    height: 100%;
    max-height: 460px;
    overflow-y: auto;
    padding: 6px 0 !important;
}
.category-list .cat_item,
.category-list .category-item > a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border: 0; border-radius: 0; box-shadow: none;
    text-align: left;
    font-size: 13px; font-weight: 500;
}
.category-list .cat_item:hover,
.category-list .category-item > a:hover {
    background: #f5f7f9; color: var(--shop-primary); transform: none; box-shadow: none;
}
.category-list .cat_img img,
.category-list .side_cat_img img {
    width: 30px; height: 30px; margin: 0; border-radius: 50%; object-fit: cover;
}
.category-list .cat_name { font-size: 13px; font-weight: 500; -webkit-line-clamp: 1; }

.home-slider-container, .main_slider { border-radius: var(--shop-radius); overflow: hidden; }
.home-slider-container { box-shadow: var(--shop-shadow); background: #fff; }
.main_slider .slider-item img,
.main_slider img {
    width: 100%; height: 100%; max-height: 460px;
    object-fit: cover; border-radius: var(--shop-radius);
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: var(--shop-shadow);
    font-size: 16px; color: var(--shop-ink) !important;
}
.owl-carousel .owl-nav button.owl-prev { left: 8px; }
.owl-carousel .owl-nav button.owl-next { right: 8px; }
.owl-dots { text-align: center; margin-top: 8px; }
.owl-dots .owl-dot span {
    width: 8px; height: 8px; margin: 0 3px; border-radius: 50%;
    background: #cbd2d9; display: inline-block;
}
.owl-dots .owl-dot.active span { background: var(--shop-primary); width: 20px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Cart / checkout tables
   -------------------------------------------------------------------------- */

.cart_table, .cart_details {
    background: #fff; border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow); padding: 16px;
}
.cart_table table { width: 100%; }
.cart_table th {
    font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
    color: var(--shop-muted); border-bottom: 2px solid var(--shop-line);
    padding: 10px 8px; text-align: left;
}
.cart_table td { padding: 12px 8px; border-bottom: 1px solid #f0f2f4; vertical-align: middle; }
.cart_name { font-size: 13.5px; font-weight: 500; }

.quantity, .qty-cart { display: inline-flex; align-items: center; border: 1.5px solid var(--shop-line); border-radius: 7px; overflow: hidden; }
.quantity input, .qty-cart input {
    width: 46px; height: 32px; text-align: center;
    border: 0; outline: none; font-weight: 600; font-size: 13px;
}
.cart_increment, .cart_decrement {
    width: 30px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f5f6f8; cursor: pointer; user-select: none; font-size: 15px;
    border: 0;
}
.cart_increment:hover, .cart_decrement:hover { background: var(--shop-primary); color: #fff; }

.cart-summary, .cart-title {
    background: #fff; border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow); padding: 16px;
}
/* .attribute-submit is NOT in this list. It used to be, but that class is
   the category/subcategory/childcategory sidebar's jQuery submit hook --
   `<form class="attribute-submit">` around the WHOLE filter sidebar, not a
   button. Styling it as a button turned the entire sidebar (accordion, price
   slider, checkboxes) into one inline-flex green pill sized to its own
   content, which is what was overlapping the product grid on every category
   page. The sidebar forms were renamed to `filter-form`, which appears
   nowhere in this file on purpose. */
.submit-btn, .apply-area {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--shop-primary); color: #fff;
    border: 0; border-radius: 7px;
    padding: 11px 20px; font-weight: 600; font-size: 13.5px;
    cursor: pointer;
}
.submit-btn:hover, .apply-area:hover { background: var(--shop-primary-dark); color: #fff; }

/* --------------------------------------------------------------------------
   Auth pages / account
   -------------------------------------------------------------------------- */

.auth-section { padding: 40px 0; }
.auth-title { font-size: 20px; font-weight: 700; margin-bottom: 18px; text-align: center; }
.account-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.wraper__item {
    background: #fff; border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius); padding: 18px; margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.breadcrumb-section, .category-breadcrumb {
    background: #fff; border-bottom: 1px solid var(--shop-line);
    padding: 12px 0; margin-bottom: 16px; font-size: 13px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer { background: #fff; margin-top: 34px; border-top: 1px solid var(--shop-line); }
.footer-top { padding: 34px 0 24px; }
.footer-about img { max-height: 52px; margin-bottom: 12px; }
.footer-about p { font-size: 13px; color: var(--shop-muted); line-height: 1.7; }
.footer-menu h4, .stay_conn h4, .footer-menu .title {
    font-size: 15px; font-weight: 700; margin: 0 0 14px;
}
.footer-menu ul li { margin-bottom: 8px; }
.footer-menu ul li a { font-size: 13px; color: var(--shop-muted); }
.footer-menu ul li a:hover { color: var(--shop-primary); padding-left: 3px; }
.footer-hotlint { font-size: 13px; color: var(--shop-muted); }
.footer-contact { list-style: none; padding: 0; margin: 0 0 14px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 7px; font-size: 13px; color: var(--shop-muted); line-height: 1.5; }
.footer-contact svg, .footer-contact i { width: 13px; flex: 0 0 13px; margin-top: 3px; color: var(--shop-primary); }
.footer-contact a { color: var(--shop-muted); word-break: break-word; }
.footer-contact a:hover { color: var(--shop-primary); }

.social_list, .social_link, .mobile-social-link { display: flex; gap: 9px; flex-wrap: wrap; }
.social_list a, .social_link a, .mobile-social-link a {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #f2f4f6; color: var(--shop-ink);
    transition: all .2s;
}
.social_list a:hover, .social_link a:hover { background: var(--shop-primary); color: #fff; }

.footer-bottom {
    border-top: 1px solid var(--shop-line);
    padding: 14px 0;
    font-size: 12.5px; color: var(--shop-muted);
}
.copyright { margin: 0; }
.footer-bottom img { max-height: 26px; width: auto; margin-right: 8px; }

/* --------------------------------------------------------------------------
   Floating buttons
   -------------------------------------------------------------------------- */

.whatsapp-float {
    position: fixed; right: 18px; bottom: 78px; z-index: 400;
    width: 52px; height: 52px; border-radius: 50%;
    background: #25d366;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(37, 211, 102, .45);
    transition: transform .2s;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float img { width: 28px; height: 28px; }
.whatsapp-float i { color: #fff; font-size: 26px; }

/* NOTE: do not style .gotop here -- the layout puts that class on <body> and
   uses it purely as a scroll anchor. Styling it as a button hides the page. */
.scroll-top-btn {
    position: fixed; right: 18px; bottom: 18px; z-index: 400;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--shop-primary); color: #fff;
    border: 0;
    display: none; align-items: center; justify-content: center;
    box-shadow: var(--shop-shadow-lg); cursor: pointer;
}
.scroll-top-btn.show { display: inline-flex; }

.call_now_btn {
    position: fixed; left: 18px; bottom: 18px; z-index: 400;
    background: var(--shop-accent); color: #fff;
    padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 13px;
    box-shadow: var(--shop-shadow-lg);
}
.call_now_btn:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Campaign / landing page
   -------------------------------------------------------------------------- */

.campaign_offer, .campaign_offer_cust, .campro_inn {
    background: #fff; border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow); padding: 18px; margin-bottom: 16px;
}
.campro_head { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.campro_img_item img { border-radius: var(--shop-radius); }
.camp_video_sec, .camp_vid { border-radius: var(--shop-radius); overflow: hidden; }

/* --------------------------------------------------------------------------
   Utilities the views rely on
   -------------------------------------------------------------------------- */

.clearfix::after { content: ''; display: block; clear: both; }
.mobile-header, .mobile-menu, .mobile-search, .mobile-logo { display: none; }
.hidetosm { display: block; }

/* --------------------------------------------------------------------------
   The side cart and the mobile menu are parked off-screen with transforms.
   A transformed box still counts towards the scrollable area, so both were
   adding a horizontal scrollbar on phones.

   `clip` rather than `hidden`: hidden would turn <body> into a scroll
   container and break every `position: sticky` inside it.
   -------------------------------------------------------------------------- */
/* Clipping is on the drawers themselves, NOT on html/body.

   Any overflow value other than visible on the root or the body
   propagates to the viewport and turns it into a scroll container --
   and every `position: sticky` on the page then sticks to a box that
   never scrolls, which is to say it stops working. That is what broke
   both sticky headers.

   The off-canvas panels are `position: fixed`, so they are painted
   against the viewport and cannot widen the page on their own; what
   they need is simply not to be reachable while closed. */
.side-cart:not(.open),
.mobile-menu:not(.open) {
    visibility: hidden;
    pointer-events: none;
}
.side-cart, .mobile-menu { transition-property: transform, visibility; }

/* --------------------------------------------------------------------------
   Product card: bigger name, centred actions, and a second button.

   "Order now" keeps the width; "add to cart" is the square beside it. Both
   sit in forms, so the row is a flex container and the forms are told not to
   grow -- otherwise each form would take half the row.
   -------------------------------------------------------------------------- */
.pro_name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    min-height: 43px;
}

.pro_btn {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 7px;
}
.pro_btn > form { display: flex; margin: 0; }
.pro_btn > form:first-child { flex: 1 1 auto; min-width: 0; }   /* order now */
.pro_btn > form:last-child  { flex: 0 0 auto; }                 /* add to cart */
.pro_btn > form > .order_button { width: 100%; }

.cart_button {
    flex: 0 0 auto;
    width: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 1px solid var(--shop-accent); border-radius: 7px;
    background: transparent; color: var(--shop-accent);
    font-size: 15px; cursor: pointer;
    transition: background .2s, color .2s, transform .12s;
}
.cart_button:hover { background: var(--shop-accent); color: #fff; }
.cart_button:active { transform: scale(.96); }

@media (max-width: 575.98px) {
    .pro_name { font-size: 13.5px; min-height: 39px; }
    .cart_button { width: 38px; font-size: 14px; }
    .pro_btn { gap: 6px; }
}

/* ==========================================================================
   Category / subcategory / childcategory listing toolbar + filter sidebar

   Shared by category.blade.php, subcategory.blade.php and childcategory.blade.php
   -- all three render the same class names (.sorting-section, .filter_sort,
   .filter_btn, .filter_sidebar, .filter_close, .filter-form, .sidebar_item),
   so one section here styles all three pages.

   None of this had any CSS before. The sidebar rode on Bootstrap's default
   accordion look (a pale system blue that does not match the shop's
   palette), and .filter_sidebar / .filter_btn / .filter_close had no rules
   at all -- so on a phone the sidebar printed in normal flow above the
   product grid instead of the slide-in drawer its own class names describe,
   and the "Filter" button in the toolbar did nothing visible.
   ========================================================================== */

/* ---------- toolbar ---------- */
.sorting-section {
    background: #fff;
    border: 1px solid var(--shop-line);
    border-radius: var(--shop-radius);
    box-shadow: var(--shop-shadow);
    padding: 12px 16px;
    margin-bottom: 18px;
}
.sorting-section .category-breadcrumb {
    background: none; border: 0; padding: 0; margin: 0;
    height: 100%;
}
.sorting-section .category-breadcrumb a { color: var(--shop-muted); }
.sorting-section .category-breadcrumb a:hover { color: var(--shop-primary); }
.sorting-section .category-breadcrumb strong { color: var(--shop-ink); font-weight: 700; }
.sorting-section > .row { align-items: center; }

.showing-data {
    font-size: 12.5px; color: var(--shop-muted); white-space: nowrap;
    display: flex; align-items: center; height: 100%;
}

.filter_sort {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}

/* Icon button that opens the filter drawer on a phone. Hidden on desktop --
   the sidebar already sits in view there, so a button to reveal it would
   toggle something nobody could see change. */
.filter_btn {
    display: none;
    align-items: center; justify-content: center; gap: 6px;
    width: 40px; height: 40px; flex: 0 0 auto;
    border: 1.5px solid var(--shop-line); border-radius: 8px;
    background: #fff; color: var(--shop-ink);
    font-size: 15px; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.filter_btn:hover { border-color: var(--shop-primary); color: var(--shop-primary); }

.page-sort { flex: 1 1 auto; min-width: 0; }
.page-sort .sort {
    height: 40px;
    border: 1.5px solid var(--shop-line);
    border-radius: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--shop-ink);
    padding: 0 30px 0 12px;
    background-position: right 10px center;
}
.page-sort .sort:focus {
    border-color: var(--shop-primary);
    box-shadow: 0 0 0 3px rgba(10, 107, 61, .12);
}

/* ---------- sidebar: accordion theme ---------- */
/* Bootstrap 5's own accordion is a pale system blue by default, a stray
   colour next to the shop's green/orange palette everywhere else on the
   page. */
.filter_sidebar .accordion-item { border: 0; }
.filter_sidebar .accordion-button {
    font-size: 14px; font-weight: 700; color: var(--shop-ink);
    padding: 12px 6px;
    background: none; box-shadow: none;
}
.filter_sidebar .accordion-button:not(.collapsed) {
    background: none; color: var(--shop-primary); box-shadow: none;
}
.filter_sidebar .accordion-button:focus { box-shadow: none; border-color: transparent; }
.filter_sidebar .accordion-button::after { width: 14px; height: 14px; background-size: 14px; }
.filter_sidebar .accordion-body { padding: 4px 6px 14px; }

/* ---------- sidebar: price slider ---------- */
.filter-price-inputs {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 14px;
}
.filter-price-inputs p { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 13px; font-weight: 700; color: var(--shop-ink); }
.filter-price-inputs input {
    width: 64px; border: 1.5px solid var(--shop-line); border-radius: 6px;
    padding: 5px 6px; font-size: 13px; font-weight: 700; text-align: center;
    background: #f8f9fa; color: var(--shop-ink);
}
.slider-box { padding: 0 6px; }
/* jQuery UI's slider ships in flat grey; retint the handle and the filled
   track so it reads as part of this theme rather than a different one. */
.slider-box .ui-slider {
    height: 5px; border: 0; background: var(--shop-line); border-radius: 3px;
}
.slider-box .ui-slider-range { background: var(--shop-primary); border-radius: 3px; }
.slider-box .ui-slider-handle {
    width: 17px; height: 17px; top: -6px; margin-left: -8px;
    background: #fff; border: 3px solid var(--shop-primary); border-radius: 50%;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .25); outline: none;
    cursor: grab;
}
.slider-box .ui-slider-handle:active { cursor: grabbing; }

/* ---------- sidebar: checkbox filter list ---------- */
.subcategory-filter-list { list-style: none; }
.subcategory-filter-label {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 2px; cursor: pointer; font-size: 13px; color: var(--shop-ink);
}
.subcategory-filter-label .form-checkbox {
    width: 16px; height: 16px; flex: 0 0 auto;
    accent-color: var(--shop-primary); cursor: pointer;
}
.subcategory-filter-name { margin: 0; }
.subcategory-filter-label:hover .subcategory-filter-name { color: var(--shop-primary); }

/* ---------- sidebar: close bar ---------- */
/* Only meaningful once the sidebar is a drawer, i.e. on a phone -- see the
   media query below. Hidden on desktop so it cannot sit above the category
   accordion as a dead "Filter" label with nothing to close. */
.filter_close { display: none; }

/* ---------- phone: sidebar becomes a slide-in drawer ---------- */
@media (max-width: 767.98px) {
    .sorting-section { padding: 10px 12px; margin-bottom: 12px; }
    /* Bootstrap's nested .row/.col-sm-6 pair squeezes the breadcrumb and the
       results/filter/sort controls into two half-width columns on a phone --
       force one clear stack instead. */
    .sorting-section .row,
    .sorting-section .row > div,
    .sorting-section .row .row,
    .sorting-section .row .row > div {
        width: 100%; max-width: 100%; flex: 0 0 100%;
    }
    .sorting-section .category-breadcrumb { margin-bottom: 8px; font-size: 12px; }
    .sorting-section .row .row {
        display: flex; align-items: center; gap: 8px; margin: 0;
    }
    .showing-data { flex: 1 1 auto; }
    .filter_sort { flex: 0 0 auto; justify-content: flex-end; }
    .filter_btn { display: inline-flex; }
    .page-sort .sort { width: 132px; padding-right: 26px; font-size: 11.5px; }

    .filter_sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 300px; max-width: 86vw;
        background: var(--shop-bg);
        z-index: 510;
        transform: translateX(-100%);
        transition: transform .28s ease;
        box-shadow: 6px 0 24px rgba(16, 24, 40, .2);
        overflow-y: auto;
        padding: 0 14px 24px;
    }
    .filter_sidebar.active { transform: translateX(0); }

    .filter_close {
        display: flex; align-items: center; gap: 8px;
        position: sticky; top: 0; z-index: 2;
        margin: 0 -14px 14px; padding: 14px;
        background: var(--shop-primary); color: #fff;
        font-size: 14px; font-weight: 700;
        cursor: pointer;
    }

    .filter_sidebar .sidebar_item { background: #fff; }
}

/* Dark backdrop behind the filter drawer, toggled alongside .filter_sidebar
   by the same script that opens and closes the drawer (master.blade.php). */
.filter-backdrop {
    position: fixed; inset: 0;
    background: rgba(16, 24, 40, .45);
    z-index: 505;
    display: none;
}
.filter-backdrop.show { display: block; }

/* --------------------------------------------------------------------------
   Live search results over the sticky category bar

   .cat-nav is sticky at z-index 700 on desktop, and the results panel sits
   inside .main-header -- so the panel could never reach above that bar on its
   own, whatever z-index it carried: a child cannot paint above an element
   that outranks its own positioned ancestor.

   The header is lifted only while the panel is open (the class is toggled by
   wireSearch in mobile-menu.js). Leaving it lifted permanently would put the
   header above the pinned bar while scrolling past it, which looks wrong.
   -------------------------------------------------------------------------- */
.main-header.search-open,
.mobile-header.search-open { z-index: 800; }

/* --------------------------------------------------------------------------
   Information pages (About, FAQ, delivery, policies) -- page.blade.php.
   The description is admin-written HTML, so .cms-body styles plain tags.
   -------------------------------------------------------------------------- */
.cms-page { padding: 22px 0 10px; }
.cms-tabs {
    display: flex; gap: 8px; margin-bottom: 18px;
    overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.cms-tabs::-webkit-scrollbar { display: none; }
.cms-tabs a {
    flex: 0 0 auto; white-space: nowrap;
    padding: 8px 16px; border-radius: 999px;
    background: #fff; border: 1px solid var(--shop-line);
    font-size: 13.5px; color: var(--shop-ink);
    transition: all .2s;
}
.cms-tabs a:hover { border-color: var(--shop-primary); color: var(--shop-primary); }
.cms-tabs a.is-active { background: var(--shop-primary); border-color: var(--shop-primary); color: #fff; }

.cms-card {
    background: #fff; border: 1px solid var(--shop-line);
    border-radius: 14px; padding: 30px 34px;
    max-width: 900px;
}
.cms-title {
    font-size: 26px; font-weight: 700; margin: 0 0 16px;
    padding-bottom: 14px; border-bottom: 1px solid var(--shop-line);
}
.cms-body { font-size: 15px; line-height: 1.85; color: var(--shop-ink); }
.cms-body h2, .cms-body h3, .cms-body h4 {
    font-size: 17.5px; font-weight: 700; margin: 24px 0 8px; color: var(--shop-primary);
}
.cms-body p { margin: 0 0 12px; }
.cms-body ul, .cms-body ol { margin: 0 0 14px; padding-left: 22px; }
.cms-body ul { list-style: disc; }
.cms-body ol { list-style: decimal; }
.cms-body li { margin-bottom: 5px; }
.cms-body li::marker { color: var(--shop-primary); }
.cms-body a { color: var(--shop-primary); text-decoration: underline; }
.cms-body img { max-width: 100%; height: auto; border-radius: 10px; }
.cms-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; -webkit-overflow-scrolling: touch; }
.cms-body th, .cms-body td { text-align: left; padding: 9px 12px; border: 1px solid var(--shop-line); vertical-align: top; }
.cms-body th { background: #f8f9fb; font-weight: 700; }
.cms-body code { background: #f1f2f6; border-radius: 4px; padding: 1px 6px; font-size: 13.5px; }
.cms-body pre { background: #14151c; color: #e6e8ee; border-radius: 10px; padding: 14px 16px; overflow-x: auto; margin: 0 0 16px; }
.cms-body pre code { background: none; padding: 0; color: inherit; }
.cms-body blockquote { margin: 0 0 14px; padding: 10px 16px; border-left: 3px solid var(--shop-primary); background: #f8f9fb; border-radius: 0 8px 8px 0; }

/* Documentation pages (docs/{product}/getting-started.blade.php) -- a sidebar of section buttons next
   to a tabbed content panel, reusing home-blocks.js's own [data-hb-tab]/[data-hb-panel] mechanism (the
   same one the pricing block's tabs already use) so no new JS was needed. */
.doc-shell { display: flex; align-items: flex-start; gap: 24px; }
.doc-nav {
    flex: 0 0 220px; position: sticky; top: 90px;
    display: flex; flex-direction: column; gap: 4px;
    background: #fff; border: 1px solid var(--shop-line); border-radius: 14px; padding: 10px;
}
.doc-nav button {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 9px; border: none; background: transparent;
    font-size: 14px; font-weight: 600; color: var(--shop-ink); text-align: left; cursor: pointer;
    transition: background .15s, color .15s;
}
.doc-nav button i { width: 16px; text-align: center; color: var(--shop-line); }
.doc-nav button:hover { background: #f4f5f9; }
.doc-nav button.is-active { background: var(--shop-primary); color: #fff; }
.doc-nav button.is-active i { color: #fff; }
.doc-content { flex: 1 1 auto; min-width: 0; max-width: none; }
.doc-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0 0 16px; }
.doc-shots-1 { grid-template-columns: minmax(0, 1fr); }
.doc-shots figure { margin: 0; border: 1px solid var(--shop-line); border-radius: 12px; overflow: hidden; background: #f8f9fb; }
.doc-shots img { display: block; width: 100%; height: auto; border-radius: 0; }
.doc-shots figcaption { padding: 10px 12px; font-size: 13px; color: var(--shop-ink); opacity: .8; }
@media (max-width: 900px) {
    .doc-shell { flex-direction: column; }
    .doc-nav { position: static; flex-direction: row; overflow-x: auto; width: 100%; max-width: 100%; scrollbar-width: none; }
    .doc-nav button { white-space: nowrap; }
    .doc-content { width: 100%; max-width: 100%; }
    .doc-shots { grid-template-columns: minmax(0, 1fr); }
}

/* Contact Us (contact.blade.php) -- same card, ways to reach the shop, form. */
.contact-ways {
    display: grid; gap: 12px; margin-bottom: 26px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 575px) { .contact-ways { grid-template-columns: minmax(0, 1fr); } }
.contact-way {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    padding: 14px 16px; border-radius: 12px;
    border: 1px solid var(--shop-line); background: #fff;
    color: var(--shop-ink); transition: border-color .2s;
}
a.contact-way:hover { border-color: var(--shop-primary); color: var(--shop-ink); }
.contact-way-icon {
    flex: 0 0 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--shop-primary); color: #fff;
}
.contact-way-icon.is-whatsapp { background: #25d366; }
.contact-way-icon svg { width: 19px; height: 19px; }
.contact-way-text { display: flex; flex-direction: column; min-width: 0; }
.contact-way-text small { font-size: 12.5px; color: #6b7280; }
.contact-way-text strong { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.contact-form-wrap { padding-top: 22px; border-top: 1px solid var(--shop-line); }
.contact-form-title { font-size: 18px; font-weight: 700; margin: 0; }

/* Other Offices (Saudi Arabia, New York -- Bangladesh is already .contact-ways above). */
.other-offices { padding: 22px 0; border-top: 1px solid var(--shop-line); margin-bottom: 4px; }
.other-offices-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
@media (max-width: 575px) { .other-offices-grid { grid-template-columns: minmax(0, 1fr); } }
.office-card { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--shop-line); background: #f8f9fb; }
.office-card h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--shop-ink); }
.office-card p { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 7px; font-size: 13.5px; color: var(--shop-ink); }
.office-card p:last-child { margin-bottom: 0; }
.office-card svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; color: var(--shop-primary); }
.office-card a { color: var(--shop-ink); text-decoration: none; }
.office-card a:hover { color: var(--shop-primary); }
.contact-form .form-label { font-size: 13.5px; margin-bottom: 5px; }

@media (max-width: 767px) {
    .cms-page { padding-top: 14px; }
    .cms-card { padding: 20px 18px; border-radius: 12px; }
    .cms-title { font-size: 21px; }
    .cms-body { font-size: 14.5px; }
}

/* --------------------------------------------------------------------------
   App footer -- phone tab bar (partials/app-footer.blade.php)

   Only below the same 992px breakpoint where the header turns into the phone
   app bar. The white shape is an SVG path whose notch sits under the current
   tab; that tab's icon floats in a circle over the notch.
   -------------------------------------------------------------------------- */
.app-footer { display: none; }

@media (max-width: 991.98px) {
    body.no-mobile-footer footer { display: none; }

    .app-footer {
        --af-h: 64px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 450;
        height: calc(var(--af-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        display: flex; align-items: stretch;
    }
    .app-footer-bg {
        position: absolute; inset: 0 0 auto 0;
        width: 100%; height: var(--af-h);
        fill: #fff;
        filter: drop-shadow(0 -4px 14px rgba(16, 24, 40, .10));
    }
    /* White continues below the bar, past the bottom of the screen. Mobile
       browsers slide their toolbar in and out, and for a moment a fixed
       bottom:0 element leaves a thin strip where the page showed through
       underneath; this also fills the safe-area strip on notched iPhones. */
    .app-footer::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: -80px;
        height: calc(80px + env(safe-area-inset-bottom) + 2px); background: #fff;
    }

    .app-footer-item {
        position: relative; z-index: 1;
        flex: 1 1 0; min-width: 0; height: var(--af-h);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px;
        color: #8a94a1; text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .app-footer-item:hover, .app-footer-item:focus { color: var(--shop-primary); }

    .app-footer-ico {
        position: relative;
        display: flex; align-items: center; justify-content: center;
        width: 24px; height: 24px; font-size: 18px;
        transition: transform .25s cubic-bezier(.4, 0, .2, 1), background .25s, box-shadow .25s;
    }
    .app-footer-ico svg { width: 18px; height: 18px; }
    .app-footer-label {
        font-size: 11px; font-weight: 500; line-height: 1;
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* Current tab: the icon lifts into a circle sitting in the notch. */
    .app-footer-item.is-active { color: var(--shop-primary); }
    .app-footer-item.is-active .app-footer-ico {
        width: 46px; height: 46px; border-radius: 50%;
        background: #fff; color: var(--shop-primary);
        border: 4px solid var(--shop-bg);
        box-shadow: 0 6px 16px rgba(10, 107, 61, .25);
        transform: translateY(-24px);
        margin-bottom: -22px;
    }
    .app-footer-item.is-active .app-footer-ico svg { width: 19px; height: 19px; }
    .app-footer-item.is-active .app-footer-label { font-weight: 700; }

    .app-footer-badge {
        position: absolute; top: -6px; right: -9px;
        min-width: 17px; height: 17px; padding: 0 4px;
        border-radius: 999px; background: var(--shop-accent); color: #fff;
        font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
        border: 2px solid #fff;
    }
    .app-footer-item.is-active .app-footer-badge { top: -4px; right: -6px; }

    /* Room to scroll past the bar, and the floating buttons lifted above it. */
    body.has-app-footer { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    /* Chat in the bar is the WhatsApp button on phones. */
    body.has-app-footer .whatsapp-float { display: none; }
    .app-footer-item[href*="wa.me"].is-active, .app-footer-item[href*="wa.me"]:hover { color: #25d366; }
    body.has-app-footer .call_now_btn { bottom: calc(76px + env(safe-area-inset-bottom)); }

    /* No back-to-top button on phones -- a thumb flick does the same. */
    .scroll-top-btn, .scroll-top-btn.show { display: none; }

    /* The product page already has its own sticky price + order bar at the
       bottom; two bars stacked would eat a third of a phone screen. */
    body.has-sp-bar .app-footer { display: none; }
    body.has-sp-bar.has-app-footer { padding-bottom: 78px; }
    body.has-sp-bar.has-app-footer .whatsapp-float { display: inline-flex; bottom: 68px; }
}

/* Vendor credit under the copyright line. */
.footer-bottom .copyright {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
}
.footer-bottom .copyright p { margin: 0; }
.dev-credit a { color: var(--shop-primary); font-weight: 600; }
.dev-credit a:hover { text-decoration: underline; }
@media (max-width: 767px) {
    .footer-bottom .copyright { justify-content: center; text-align: center; }
}