@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');
/* Reset & Base Styles */
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }

 body {
     /* Set to a darker gray temporarily so you can clearly see the white rounded corners */
     background-color: #fff;
     color: var(--text-main, #1a1a1a);
 }

 .container {
     max-width: 1300px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* --- Standard Header (Static) --- */
 .site-header {
     background-color: #fff;
     transition: opacity 0.2s ease;
 }

 body.is-scrolled .site-header {
     opacity: 0;
     pointer-events: none;
 }

 .top-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 0;
     border-bottom: 1px solid var(--bg-muted, #f0f0f0);
 }

 .top-bar-left {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
 }

 .contact-item {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 6px 12px;
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 2px;
     font-size: 13px;
     font-weight: 600;
     text-decoration: none;
     color: var(--text-main, #1a1a1a);
     transition: background-color 0.2s;
 }

 .contact-item:hover {
     background-color: #f9f9f9;
 }

 .top-bar-right {
     display: flex;
     align-items: center;
     font-size: 12px;
     font-weight: 500;
     gap: 4px;
     cursor: pointer;
 }

 .top-bar-right i.fa-flag {
     color: var(--danger, #d12229);
 }

 .middle-bar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 0;
     gap: 20px;
 }

 .search-container {
     width: 25%;
     max-width: 300px;
     flex-shrink: 0;
     position: relative;
 }

 .search-container input {
     width: 100%;
     border: none;
     border-bottom: 2px solid var(--border-light, #eaeaea);
     padding: 10px 30px 10px 0;
     font-size: 15px;
     color: var(--text-muted, #666666);
     outline: none;
     background: transparent;
     transition: border-bottom-color 0.25s ease;
 }

 .search-container input:focus {
     border-bottom-color: var(--primary, #f2ad21);
 }

 .search-container i,
 .search-container svg {
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     font-size: 16px;
     width: 18px;
     height: 18px;
     cursor: pointer;
 }

 .logo-container {
     display: flex;
     flex-grow: 1;
     justify-content: center;
     align-items: center;
 }

 .logo-container img {
     width: 220px;
     height: auto;
 }

 .user-actions {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 20px;
     flex-shrink: 0;
     width: 25%;
     max-width: 300px;
 }
  .sticky-navbar .user-actions {   
     width: auto !important;
 }

 .user-actions i,
 .user-actions svg {
     font-size: 28px;
     width: 28px;
     height: 28px;
     cursor: pointer;
 }

 .cart-wrapper {
     position: relative;
     cursor: pointer;
 }

 /* Grows into a pill once the count runs past a single digit, so 3-4 digit
    baskets stay readable instead of overflowing a fixed circle. */
 .cart-badge {
     position: absolute;
     bottom: -5px;
     right: -5px;
     background-color: #000;
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     min-width: 18px;
     height: 18px;
     padding: 0 5px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 9px;
     line-height: 1;
     box-sizing: border-box;
     animation: jiggle 6s cubic-bezier(.25, .1, .25, 1) infinite;
 }

 /* --- Navigation Bar --- */
 .bottom-bar {
     border-bottom: 1px solid var(--bg-muted, #f0f0f0);
 }

 .main-nav {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 16px;
     position: relative;
 }

 .nav-item {
     position: relative;
     display: flex;
     align-items: center;
     gap: 0px;
     font-size: 14px;
     font-weight: 500;
     color: var(--text-main, #1a1a1a);
     text-decoration: none;
     cursor: pointer;
     padding: 10px 0 20px 0;
     white-space: nowrap;
     border-bottom: 1px solid transparent;
     margin-bottom: -1px;
     transition: color 0.2s;
 }

 /* Animated hover underline — sweeps in left-to-right instead of a
    full-width border snapping on. */
 .nav-item::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 1px;
     background-color: #000;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s ease;
 }

 .nav-item:hover::after,
 .has-dropdown:hover > .nav-item::after {
     transform: scaleX(1);
 }

 .nav-item.bold {
     font-weight: 500;
 }

 /* Hover is signalled by the sweeping underline above — never a colour change. */
 .nav-item:hover {
     color: var(--text-main, #1a1a1a);
 }

 .nav-item i.fa-chevron-down,
 .nav-item .nav-caret {
     transition: transform 0.2s ease;
 }

 .has-dropdown:hover>.nav-item {
     color: var(--text-main, #1a1a1a);
 }

 .has-dropdown:hover>.nav-item i.fa-chevron-down,
 .has-dropdown:hover>.nav-item .nav-caret {
     transform: rotate(180deg);
 }

 .btn-contact {
     background-color: var(--primary, #f2ad21);
     color: var(--text-main, #1a1a1a);
     font-weight: 600;
     padding: 5px 16px;
     border-radius: 4px;
     text-decoration: none;
     transition: background-color 0.2s;
     margin-bottom: 10px;
     font-size: 14px;
 }

 .btn-contact:hover {
     background-color: var(--primary-hover, #dda020);
 }

 /* --- Mega Menu --- */
 .has-dropdown {
     position: relative;
 }

 .mega-menu {
     position: absolute;
     top: 100%;
     left: -100px;
     /* Slight offset to align better centrally */
     width: 850px;
     background: #fff;
     /* INCREASED BORDER RADIUS FOR PRONOUNCED ARC */
     border-radius: 24px;
     margin-top: 0;
     /* Flush against the navbar, no gap */
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
     display: flex;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.2s ease, visibility 0.2s ease;
     z-index: 1000;
     overflow: hidden;
     /* CRITICAL: This makes the inner content clip to the rounded corners */
     border: 1px solid var(--border-light, #eaeaea);
 }

 .has-dropdown:hover .mega-menu {
     opacity: 1;
     visibility: visible;
 }

 /* --- Promotions dropdown: a slider of on-promo products ---
    The wrapper goes position:static so the panel anchors to the navbar (which is
    position:sticky, i.e. a positioned ancestor) and spans its full width, instead
    of hanging off a narrow nav item and running past the viewport edge. */
 .promo-dropdown { position: static; }

 .promo-menu {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     max-width: min(1560px, 96vw);   /* wider than the navbar so 4 cards stay roomy */
     margin: 0 auto;                 /* flush against the navbar, no gap */
     background: #fff;
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 24px;
     padding: 26px 30px 20px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, .12);
     opacity: 0;
     visibility: hidden;
     pointer-events: none;       /* closed panel must not catch the pointer */
     transition: opacity .2s ease, visibility .2s ease;
     z-index: 1000;
 }

 /* Splide sets `visibility: visible` on its root once mounted, which would beat
    the panel's `hidden` and leave this full-width strip hoverable while closed —
    opening the dropdown from anywhere under the navbar. Make it follow the panel
    instead of asserting its own visibility. */
 .promo-menu .splide.is-initialized,
 .promo-menu .splide.is-rendered {
     visibility: inherit;
 }

 .has-dropdown:hover .promo-menu {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
 }

 /* Cards inside the dropdown are the storefront card, just tightened up. */
 .promo-menu .promo-card {
     height: 100%;
     border: 1px solid #ececec;
     border-radius: 14px;
     overflow: hidden;
     background: #fff;
     padding: 14px;              /* base card uses 20px; tighter inside the dropdown */
 }

 /* The shared card reserves 75px under the image for the absolutely-placed
    add-to-cart button. These cards have no button, so drop it to a small gap. */
 .promo-menu .product-image-wrapper {
     height: 190px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fff;
     margin-bottom: 12px;
 }

 .promo-menu .product-image-wrapper img {
     max-height: 100%;
     width: auto;
     object-fit: contain;
 }

 .promo-menu .product-info { padding: 0; flex-grow: 0; }
 /* Badges always share one row: nowrap on the container, and each badge is
    allowed to shrink (min-width:0) rather than push the next one down. */
 .promo-menu .product-badges {
     margin-bottom: 8px;
     min-height: 0;
     gap: 4px;
     flex-wrap: nowrap;
     align-items: center;
 }
 .promo-menu .badge {
     padding: 2px 6px;
     font-size: 9.5px;
     line-height: 1.5;
     letter-spacing: 0;
     white-space: nowrap;
     min-width: 0;
     flex: 0 1 auto;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 .promo-menu .badge-secondary { gap: 3px; }
 .promo-menu .badge i { margin: 0; font-size: 9px; }

 .promo-menu .product-title {
     font-size: 14px;
     line-height: 1.4;
     margin: 0 0 8px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .promo-menu .product-price { margin: 0; }

 .promo-menu .price-main { font-size: 16px; }
 .promo-menu .splide__pagination { padding: 14px 0 0; position: static; }
 .promo-menu .splide__pagination__page { background: #d9dce1; height: 4px; width: 34px; border-radius: 2px; opacity: 1; }
 .promo-menu .splide__pagination__page.is-active { background: var(--text-main, #1a1a1a); transform: none; }

 @media (max-width: 900px) {
     .promo-menu { padding: 18px; }
     .promo-menu .product-image-wrapper { height: 160px; }
 }

 .mega-left {
     width: 35%;
     background-color: #fff;
     border-right: 1px solid var(--bg-muted, #f0f0f0);
     padding: 25px 0;
     max-height: 450px;
     overflow-y: auto;
 }

 .mega-left::-webkit-scrollbar {
     width: 5px;
 }

 .mega-left::-webkit-scrollbar-track {
     background: #f1f1f1;
 }

 .mega-left::-webkit-scrollbar-thumb {
     background: #000;
     border-radius: 10px;
 }

 .mega-left ul {
     list-style: none;
 }

 .mega-left li {
     cursor: pointer;
     border-bottom: 1px solid var(--bg-muted, #f0f0f0);
 }

 .mega-left li a {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 12px 30px;
     text-decoration: none;
     color: var(--text-heading, #333333);
     font-size: 14px;
 }

 /* Hover/active only weights the label — the text colour never changes. */
 .mega-left li:hover a,
 .mega-left li.active a {
     font-weight: 600;
 }

 .mega-right {
     width: 65%;
     padding: 35px;
     max-height: 450px;
     overflow-y: auto;
 }

 .mega-right::-webkit-scrollbar {
     width: 5px;
 }

 .mega-right::-webkit-scrollbar-track {
     background: #f1f1f1;
 }

 .mega-right::-webkit-scrollbar-thumb {
     background: #000;
     border-radius: 10px;
 }

 .mega-panel {
     display: none;
     animation: fadeIn 0.3s ease;
 }

 .mega-panel.active {
     display: block;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(5px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .mega-right-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid var(--border-light, #eaeaea);
     padding-bottom: 15px;
     margin-bottom: 15px;
 }

 .mega-right-header h3 {
     font-size: 16px;
     font-weight: 600;
 }

 .mega-right-header .view-all {
     color: var(--primary, #f2ad21);
     font-size: 13px;
     text-decoration: none;
     font-weight: 500;
 }

 .mega-right-list {
     list-style: none;
 }

 .mega-right-list li {
     margin-bottom: 14px;
 }

 .mega-right-list li a {
     color: #444;
     text-decoration: none;
     font-size: 14px;
 }

 /* Sub-item hover: underline only, colour stays put. */
 .mega-right-list li a:hover {
     color: #444;
     text-decoration: underline;
 }

 /* --- Single navbar: inline under the header at the top, floating pill on scroll --- */
 .main-navbar {
     position: sticky;
     top: 0;
     z-index: 9999;
     background-color: #fff;
     border-bottom: 1px solid #e2e4e9;
     width: 100%;
     margin: 0 auto;
     transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
         width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
         border-radius 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease,
         opacity 0.3s ease, transform 0.3s ease;
 }

 /* Hidden while the product page's anchor bar has taken over the top slot. */
 .main-navbar.nav-hidden {
     opacity: 0;
     visibility: hidden;
     transform: translateY(-20px);
     pointer-events: none;
 }

 .main-navbar .navbar-inner {
     max-width: 1300px;
     margin: 0 auto;
     padding: 0 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
 }

 /* Search box + user actions live in the middle bar at the top — only reveal the
    navbar's own copies once it has detached into the floating pill. */
 .main-navbar .navbar-search,
 .main-navbar .navbar-actions {
     display: none;
 }

 /* Scrolled → detach into the floating rounded pill. */
 body.is-scrolled .main-navbar {
     top: 10px;
     width: 95%;
     max-width: 1400px;
     border: 1px solid var(--bg-muted, #f0f0f0);
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 body.is-scrolled .main-navbar .navbar-inner {
     max-width: none;
     padding: 0 30px;
     justify-content: space-between;
 }

 body.is-scrolled .main-navbar .navbar-search,
 body.is-scrolled .main-navbar .navbar-actions {
     display: flex;
 }

 body.is-scrolled .main-navbar .search-container {
    width: 100%; 
    max-width: 100px;
     /* margin-right: 20px; */
 }

 body.is-scrolled .main-navbar .search-container input {
     padding: 8px 30px 8px 0;
     font-size: 13px;
 }

 body.is-scrolled .main-navbar .user-actions {
     width: auto;
 }

 body.is-scrolled .main-navbar .main-nav {
     gap: 16px;
 }

 body.is-scrolled .main-navbar .nav-item {
     font-size: 14px;
     padding: 20px 0;
     margin-bottom: 0;
 }

 body.is-scrolled .main-navbar .btn-contact {
     margin-bottom: 0;
 }

 body.is-scrolled .main-navbar .mega-menu {
     left: -150px;
 }

 /* Sticky pill: search (left) and user actions (right) keep their size and
    position; the menu strip takes the middle and scrolls horizontally (drag)
    without a scrollbar when the items don't fit. */
 body.is-scrolled .main-navbar .navbar-search,
 body.is-scrolled .main-navbar .navbar-actions {
     flex-shrink: 0;
 }

 body.is-scrolled .main-navbar .main-nav {
     flex: 1 1 auto;
     min-width: 0;               /* allow shrinking below content width so it can scroll */
     justify-content: center;
     flex-wrap: nowrap;
     overflow-x: auto;
     overflow-y: hidden;
     scrollbar-width: none;      /* Firefox */
     -ms-overflow-style: none;   /* legacy Edge/IE */
     cursor: grab;
     scroll-behavior: smooth;
     overscroll-behavior-x: contain;
 }

 body.is-scrolled .main-navbar .main-nav::-webkit-scrollbar {
     display: none;              /* Chrome/Safari/Edge */
 }

 /* Items keep their natural width and overflow into the scroll area instead of
    being squished. */
 body.is-scrolled .main-navbar .main-nav > * {
     flex-shrink: 0;
 }

 /* While dragging: show the grabbing cursor and disable smooth-scroll so the
    strip tracks the pointer 1:1. */
 body.is-scrolled .main-navbar .main-nav.is-dragging {
     cursor: grabbing;
     scroll-behavior: auto;
     user-select: none;
 }

 /* The mega menu is a descendant of the scroll container and would be clipped
    by overflow while open — let the strip overflow visibly only while the
    dropdown is hovered (you can't drag-scroll and hover it at the same time). */
 body.is-scrolled .main-navbar .main-nav:has(.has-dropdown:hover) {
     overflow: visible;
 }


 /* --- Cart Panel Base --- */
 .cart-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     /* Above the fixed mobile nav bar (.mnav, 10040) and the mobile sheets
        (10050). These are full-height side panels: chrome that stays put
        behind them drew over the panel and, at the bottom of a phone,
        over the buttons in it. */
     z-index: 10080;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }

 .cart-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .cart-panel {
     position: fixed;
     top: 0;
     right: -450px;
     /* Hidden off-screen */
     width: 100%;
     max-width: 420px;
     height: 100vh;
     background: #fff;
     z-index: 10081;
     display: flex;
     flex-direction: column;
     box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
     transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .cart-panel.active {
     right: 0;
 }

 /* --- Cart Header --- */
 .cart-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 25px;
 }

 .cart-header h2 {
     font-size: 22px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
 }

 .close-cart {
     background: none;
     border: none;
     font-size: 20px;
     color: var(--text-muted, #666666);
     cursor: pointer;
     transition: color 0.2s;
 }

 .close-cart:hover {
     color: #000;
 }

 /* --- Cart Body --- */
 .cart-body {
     flex: 1;
     overflow-y: auto;
     padding: 0 25px 20px 25px;
 }

 .cart-body::-webkit-scrollbar {
     width: 6px;
 }

 .cart-body::-webkit-scrollbar-track {
     background: #f1f1f1;
 }

 .cart-body::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 4px;
 }

 .cart-actions-top {
     display: flex;
     justify-content: flex-end;
     margin-bottom: 20px;
 }

 .btn-clear-cart {
     background: #fff;
     border: 1px solid var(--primary, #f2ad21);
     color: var(--text-muted, #666666);
     border-radius: 20px;
     padding: 6px 16px;
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
     transition: all 0.2s;
 }

 .btn-clear-cart:hover {
     background: var(--primary-tint, #fdf6e7);
     color: #000;
 }

 /* --- Cart Item --- */
 .cart-item {
     display: flex;
     gap: 15px;
     margin-bottom: 20px;
 }

 .img-placeholder {
     width: 60px;
     height: 80px;
     background-color: var(--text-main, #1a1a1a);
     /* Dummy dark block for product */
     border: 1px solid var(--border-light, #eaeaea);
 }

 .cart-item-details {
     flex: 1;
 }

 .cart-item-title-row {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 10px;
     margin-bottom: 12px;
 }

 .cart-item-title-row h4 {
     font-size: 14px;
     font-weight: 700;
     line-height: 1.3;
     color: var(--text-heading, #333333);
 }

 .btn-remove-item {
     background: none;
     border: none;
     color: var(--text-soft, #999999);
     cursor: pointer;
     font-size: 14px;
 }

 .btn-remove-item:hover {
     color: var(--danger, #d12229);
 }

 .cart-item-qty {
     display: inline-flex;
     align-items: center;
     border: 1px solid #ddd;
     border-radius: 4px;
     padding: 4px 10px;
     margin-bottom: 15px;
 }

 .qty-btn {
     background: none;
     border: none;
     cursor: pointer;
     color: var(--text-muted, #666666);
     font-size: 12px;
     padding: 2px;
 }

 .cart-item-qty input {
     width: 30px;
     text-align: center;
     border: none;
     font-size: 14px;
     font-weight: 600;
     color: var(--text-heading, #333333);
     pointer-events: none;
 }

 .cart-item-qty span {
     font-size: 13px;
     color: var(--text-heading, #333333);
     margin-right: 10px;
 }

 .cart-item-price-info {
     text-align: right;
 }

 .main-price {
     margin-bottom: 4px;
 }

 .price-red {
     color: var(--danger, #d12229);
     font-size: 16px;
     font-weight: 700;
 }

 .price-vat {
     font-size: 13px;
     color: var(--text-muted, #666666);
 }

 .price-details {
     font-size: 11px;
     color: var(--text-soft, #999999);
     line-height: 1.4;
 }

 .cart-divider {
     border: none;
     border-top: 1px solid var(--border-light, #eaeaea);
     margin: 25px 0;
 }

 /* --- Cross Sells --- */
 .cross-sells h5 {
     font-size: 12px;
     color: #888;
     letter-spacing: 0.5px;
     margin-bottom: 15px;
 }

 .cross-sell-item {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 15px;
 }

 .cs-image .img-placeholder {
     width: 40px;
     height: 50px;
 }

 .cs-info {
     flex: 1;
 }

 .cs-info h6 {
     font-size: 13px;
     font-weight: 600;
     color: var(--text-heading, #333333);
     line-height: 1.3;
     margin-bottom: 2px;
 }

 .cs-brand {
     font-size: 11px;
     color: var(--text-soft, #999999);
 }

 .cs-price {
     font-size: 13px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
 }

 .cs-add-btn {
     background: #fff;
     border: 1px solid #ddd;
     border-radius: 50%;
     width: 28px;
     height: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-muted, #666666);
     cursor: pointer;
     transition: all 0.2s;
 }

 .cs-add-btn:hover {
     border-color: var(--primary, #f2ad21);
     color: var(--primary, #f2ad21);
 }

 /* --- Cart Footer (Fixed at bottom) --- */
 .cart-footer {
     background: var(--bg-soft, #f7f7f7);
     padding: 25px;
     border-radius: 24px 24px 0 0;
     box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.03);
 }

 .cart-summary {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 15px;
 }

 .summary-label {
     font-size: 16px;
     font-weight: 500;
     color: var(--text-heading, #333333);
 }

 .summary-values {
     text-align: right;
 }

 .sum-gross {
     font-size: 18px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
     margin-bottom: 2px;
 }

 .sum-net {
     font-size: 13px;
     color: #888;
 }

 .shipping-notice {
     font-size: 13px;
     color: #555;
     margin-bottom: 20px;
 }

 /* Buttons in Footer */
 .cart-buttons {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .btn-primary {
     background-color: var(--primary, #f2ad21);
     color: var(--on-primary, #1a1a1a);
     border: none;
     border-radius: 25px;
     padding: 14px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
 }

 .btn-primary:hover {
     background-color: var(--primary-hover, #e5a31f);
 }

 .btn-outline {
     background-color: var(--bg-soft, #f7f7f7);
     color: #4a5c6a;
     /* Dark blue/grey tint seen in screenshot */
     border: 1px solid var(--primary, #f2ad21);
     border-radius: 25px;
     padding: 12px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s;
 }

 .btn-outline:hover {
     background-color: #fff;
     color: var(--text-main, #1a1a1a);
 }

 /* --- Empty cart state --- */
 .cart-empty {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 10px 0;
     color: var(--text-main, #1a1a1a);
     font-size: 15px;
     font-weight: 500;
 }

 .cart-empty-icon {
     font-size: 40px;
     color: var(--text-main, #1a1a1a);
     flex-shrink: 0;
 }

 /* --- Cart confirm modal (clear all / remove product) --- */
 .cart-confirm-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.5);
     /* Above the fixed mobile nav bar (.mnav, 10040) and the mobile sheets
        (10050). These are full-height side panels: chrome that stays put
        behind them drew over the panel and, at the bottom of a phone,
        over the buttons in it. */
     z-index: 10090;
     opacity: 0;
     visibility: hidden;
     transition: all 0.25s ease;
 }

 .cart-confirm-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .cart-confirm-modal {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -45%);
     width: 90%;
     max-width: 640px;
     background: #fff;
     border-radius: 14px;
     z-index: 10091;
     box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
     padding: 28px 30px;
     opacity: 0;
     visibility: hidden;
     transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .cart-confirm-modal.active {
     opacity: 1;
     visibility: visible;
     transform: translate(-50%, -50%);
 }

 .cart-confirm-head {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 20px;
 }

 .cart-confirm-head h3 {
     font-size: 22px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
     line-height: 1.3;
 }

 .cart-confirm-close {
     background: none;
     border: none;
     font-size: 20px;
     color: var(--text-muted, #666666);
     cursor: pointer;
     line-height: 1;
     flex-shrink: 0;
     transition: color 0.2s;
 }

 .cart-confirm-close:hover {
     color: #000;
 }

 .cart-confirm-body {
     margin-top: 16px;
     color: #4a5c6a;
     font-size: 15px;
 }

 .cart-confirm-body--product {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .cart-confirm-body--product p {
     color: var(--text-main, #1a1a1a);
     font-weight: 500;
 }

 .cart-confirm-thumb {
     flex-shrink: 0;
 }

 .cart-confirm-thumb .img-placeholder {
     width: 70px;
     height: 60px;
     background-size: cover;
     background-position: center;
     background-color: #fff;
     border: none;
 }

 .cart-confirm-actions {
     margin-top: 28px;
     display: flex;
     justify-content: flex-end;
     gap: 14px;
 }

 .btn-confirm-cancel,
 .btn-confirm-ok {
     border: none;
     border-radius: 25px;
     padding: 12px 26px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s;
 }

 .btn-confirm-cancel {
     background-color: var(--primary, #f2ad21);
     color: var(--text-main, #1a1a1a);
 }

 .btn-confirm-cancel:hover {
     background-color: var(--primary-hover, #e5a31f);
 }

 .btn-confirm-ok {
     background-color: var(--primary, #f2ad21);
     color: var(--text-main, #1a1a1a);
 }

 .btn-confirm-ok:hover {
     background-color: var(--primary-hover, #e5a31f);
 }

 /* --- Overlay --- */
 .region-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 10005;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }

 .region-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 /* --- Modal Box --- */
 .region-modal {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -45%);
     /* Starts slightly lower for animation */
     width: 90%;
     max-width: 450px;
     background-color: var(--bg-muted, #f0f0f0);
     /* Light gray from screenshot */
     border-radius: 12px;
     z-index: 10006;
     display: flex;
     flex-direction: column;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
     max-height: 85vh;
     /* Prevents it from getting too tall */
 }

 .region-modal.active {
     opacity: 1;
     visibility: visible;
     transform: translate(-50%, -50%);
 }

 /* --- Header --- */
 .region-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     padding: 25px 25px 15px 25px;
 }

 .region-header h2 {
     font-size: 20px;
     font-weight: 600;
     color: var(--text-main, #1a1a1a);
     line-height: 1.3;
     max-width: 85%;
 }

 .close-region {
     background: none;
     border: none;
     font-size: 20px;
     color: var(--text-main, #1a1a1a);
     cursor: pointer;
     padding: 0;
 }

 /* --- Body --- */
 .region-body {
     padding: 10px 25px 20px 25px;
     overflow-y: auto;
     flex: 1;
 }

 .region-body::-webkit-scrollbar {
     width: 6px;
 }

 .region-body::-webkit-scrollbar-track {
     background: #e0e0e0;
 }

 .region-body::-webkit-scrollbar-thumb {
     background: #000;
     border-radius: 4px;
 }

 .settings-group {
     margin-bottom: 30px;
 }

 .settings-group label {
     display: block;
     font-size: 14px;
     font-weight: 600;
     color: var(--text-main, #1a1a1a);
     margin-bottom: 12px;
 }

 /* --- Option Buttons --- */
 .options-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .options-flex {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
 }

 .btn-option {
     position: relative;
     background: #fff;
     border: 1px solid var(--border-strong, #dcdcdc);
     border-radius: 6px;
     padding: 10px 16px;
     font-size: 14px;
     font-weight: 500;
     color: var(--text-main, #1a1a1a);
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     transition: all 0.2s;
 }

 .btn-option:hover {
     border-color: var(--text-soft, #999999);
 }

 .flag-icon {
     font-size: 16px;
 }

 /* Active State */
 .btn-option.active {
     background: var(--dark, #101010);
     color: #fff;
     border-color: var(--dark, #101010);
 }

 /* Checkmark Badge */
 .check-badge {
     position: absolute;
     top: -8px;
     right: -8px;
     width: 20px;
     height: 20px;
     background-color: #fff;
     color: var(--dark, #101010);
     border: 2px solid var(--dark, #101010);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
     opacity: 0;
     transform: scale(0);
     transition: all 0.2s;
 }

 .btn-option.active .check-badge {
     opacity: 1;
     transform: scale(1);
 }

 /* --- Footer --- */
 .region-footer {
     display: flex;
     justify-content: flex-end;
     gap: 12px;
     padding: 20px 25px;
 }

 .btn-region-cancel {
     background: transparent;
     border: 1px solid var(--primary-hover, #d29922);
     /* Matches the subtle outline in screenshot */
     color: #4a5c6a;
     font-size: 14px;
     font-weight: 500;
     padding: 10px 20px;
     border-radius: 20px;
     cursor: pointer;
     transition: all 0.2s;
 }

 .btn-region-cancel:hover {
     background: #fff;
     color: var(--text-main, #1a1a1a);
 }

 .btn-region-save {
     background: var(--primary, #f2ad21);
     border: none;
     color: var(--text-main, #1a1a1a);
     font-size: 14px;
     font-weight: 600;
     padding: 10px 24px;
     border-radius: 20px;
     cursor: pointer;
     transition: background 0.2s;
 }

 .btn-region-save:hover {
     background: var(--primary-hover, #dda020);
 }


 /* --- Login Overlay --- */
 .login-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     /* Above the fixed mobile nav bar (.mnav, 10040) and the mobile sheets
        (10050). These are full-height side panels: chrome that stays put
        behind them drew over the panel and, at the bottom of a phone,
        over the buttons in it. */
     z-index: 10080;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }

 .login-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 /* --- Login Panel --- */
 .login-panel {
     position: fixed;
     top: 0;
     right: -450px;
     width: 100%;
     max-width: 420px;
     height: 100vh;
     background: #fff;
     z-index: 10081;
     display: flex;
     flex-direction: column;
     box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
     transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .login-panel.active {
     right: 0;
 }

 /* --- Header --- */
 .login-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 25px;
 }

 .login-header h2 {
     font-size: 22px;
     font-weight: 600;
     color: var(--text-main, #1a1a1a);
 }

 .close-login {
     background: none;
     border: none;
     font-size: 22px;
     color: var(--text-main, #1a1a1a);
     cursor: pointer;
     transition: transform 0.2s;
 }

 .close-login:hover {
     transform: scale(1.1);
 }

 /* --- Body & Info Box --- */
 .login-body {
     padding: 0 30px 30px 30px;
     overflow-y: auto;
 }

 .login-info-box {
     background-color: #f5f5f5;
     border-radius: 6px;
     padding: 12px;
     text-align: center;
     font-size: 11px;
     color: var(--text-heading, #333333);
     font-style: italic;
     margin-bottom: 25px;
 }

 .asterisk {
     color: var(--primary, #f2ad21);
     font-weight: bold;
 }

 /* --- Form Fields --- */
 .form-group {
     margin-bottom: 18px;
 }

 .form-group label {
     display: block;
     font-size: 13px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
     margin-bottom: 8px;
 }

 .form-group input {
     width: 100%;
     border: 1px solid #ccc;
     border-radius: 25px;
     padding: 12px 15px;
     font-size: 14px;
     outline: none;
     transition: border-color 0.2s;
 }

 .form-group input:focus {
     border-color: var(--primary, #f2ad21);
 }

 .forgot-password {
     text-align: right;
     margin-bottom: 20px;
 }

 .forgot-password a {
     font-size: 13px;
     color: var(--text-heading, #333333);
     text-decoration: underline;
 }

 .forgot-password a:hover {
     color: #000;
 }

 /* Primary Button */
 .btn-login-submit {
     width: 100%;
     background-color: var(--primary, #f2ad21);
     color: var(--text-main, #1a1a1a);
     border: none;
     border-radius: 25px;
     padding: 14px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s;
 }

 .btn-login-submit:hover {
     background-color: var(--primary-hover, #dda020);
 }

 /* --- Divider --- */
 .login-divider {
     display: flex;
     align-items: center;
     text-align: center;
     margin: 25px 0;
     color: var(--text-main, #1a1a1a);
     font-size: 14px;
 }

 .login-divider::before,
 .login-divider::after {
     content: '';
     flex: 1;
     border-bottom: 1px solid var(--border-strong, #dcdcdc);
 }

 .login-divider span {
     padding: 0 15px;
 }

 /* --- Social Logins --- */
 .social-logins {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin-bottom: 20px;
 }

 .btn-social {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     background-color: #fff;
     border: 1px solid var(--primary, #f2ad21);
     border-radius: 25px;
     padding: 12px;
     font-size: 13px;
     font-weight: 500;
     color: #4a5c6a;
     cursor: pointer;
     transition: background-color 0.2s;
 }

 .btn-social:hover {
     background-color: #fafafa;
 }

 /* Custom Shoper ONE Mini-Logo inside button */
 .shoper-logo {
     background-color: var(--text-main, #1a1a1a);
     color: #fff;
     padding: 2px 8px;
     border-radius: 4px;
     font-size: 11px;
     display: inline-block;
     line-height: 1.2;
 }

 .shoper-logo strong {
     font-weight: 800;
 }

 /* --- Footer Texts --- */
 .login-disclaimer {
     font-size: 11px;
     color: var(--text-muted, #666666);
     text-align: center;
     line-height: 1.5;
     margin-bottom: 20px;
 }

 .login-register {
     text-align: center;
     font-size: 14px;
     color: var(--text-heading, #333333);
 }

 .login-register a {
     color: var(--text-main, #1a1a1a);
     font-weight: 700;
     text-decoration: none;
 }

 .login-register a:hover {
     text-decoration: underline;
 }

 /* Home Baner Slider */
 /* Container spacing */
 .banner-slider {
     padding: 20px 0;
     max-width: 100%;
     overflow: hidden;
 }

 /* Hero slider items: fixed 240px height, rounded corners. Gap (20px) and the
    centred peek come from the data-splide config on the element. */
 .banner-slider .splide__slide {
     border-radius: 16px;
     overflow: hidden;
 }
 .banner-slider .splide__slide img {
     width: 100%;
     height: 240px;
     object-fit: cover;
     border-radius: 16px;
     display: block;
     cursor: grab;
 }
 .banner-slider .splide__slide img:active {
     cursor: grabbing;
 }

 /* Image styling */
 .v2-style .splide__slide img {
     width: 100%;
     height: 320px;
     /* Adjust height as needed */
     object-fit: cover;
     border-radius: 12px;
     cursor: grab;
     display: block;
 }

 /* Change cursor when dragging */
 .v2-style .splide__slide img:active {
     cursor: grabbing;
 }

 /* Optional: Slightly fade out the edge slides to match a modern look */
 /* .splide__slide {
    opacity: 0.4;
    transition: opacity 0.4s ease;
} */

 /* Full opacity for the center active slide */
 .splide__slide.is-active {
     opacity: 1;
 }


 /* --- Outer Wrapper (Adds Top/Bottom Padding) --- */
 .product-slider-section {
     max-width: 1300px;
     margin: 0 auto;
     padding: 80px 60px;
     /* 80px top/bottom, 60px sides to make room for arrows */
 }

 /* Make sure the header aligns with the actual product grid */
 .product-slider-section .slider-section-header {
     margin-top: 0;
 }

 /* Ensure pagination has room at the bottom */
 .product-slider {
     padding-bottom: 25px;
 }

 /* Re-adjusting arrows so they don't clip off screen */
 .product-slider .splide__arrow--prev {
     left: -50px;
 }

 .product-slider .splide__arrow--next {
     right: -50px;
 }

 /* --- Section Header --- */
 /* Title on its own row (centered); "See more" on the next row, right-aligned. */
 .slider-section-header {
     position: relative;
     margin-bottom: 30px;
     margin-top: 50px;
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 .slider-section-header .section-title {
     text-align: center;
 }

 .section-title {
     font-size: 24px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
 }

 .see-more-link {
     align-self: flex-end;
     font-size: 14px;
     font-weight: 600;
     color: var(--text-main, #1a1a1a);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }

 .see-more-link:hover {
     color: var(--primary, #f2ad21);
 }

 /* --- Product Card Base --- */
 .product-card {
     background: #fff;
     border: 1px solid var(--bg-muted, #f0f0f0);
     border-radius: 12px;
     padding: 20px;
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
     transition: border-color 0.2s, box-shadow 0.2s;
 }

 .product-card:hover {
     border-color: var(--primary, #f2ad21);
     /* Orange border on hover like screenshot 2 */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 /* --- Wishlist Button (circular white pill; primary border + filled icon on hover) --- */
 .wishlist-btn {
     position: absolute;
     top: 15px;
     right: 15px;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     background: #fff;
     border: 1px solid #e2e4e9;
     border-radius: 50%;
     cursor: pointer;
     z-index: 2;
     transition: border-color 0.2s ease;
 }

 .wishlist-btn .wishlist-icon {
     width: 18px;
     height: 18px;
     fill: transparent;
     stroke: #4a5c6a;
     transition: fill 0.2s ease, stroke 0.2s ease;
 }

 /* Fav button wrapper tints when the whole CARD is hovered (no icon fill). */
 .product-card:hover .wishlist-btn {
     background-color: #0000000f;
 }

 /* Unified tile title: Noto Sans 15px, plain text colour (not link-blue),
    with a left-to-right underline on hover (like the header menu). */
 .product-card .product-title {
     font-family: "Noto Sans", sans-serif;
     font-size: 15px;
     font-weight: 600;
     line-height: 1.4;
 }
 .product-card .product-title a {
     color: inherit;
     text-decoration: none;
     background-image: linear-gradient(currentColor, currentColor);
     background-size: 0% 1px;
     background-position: left bottom;
     background-repeat: no-repeat;
     transition: background-size 0.3s ease;
 }
 .product-card .product-title a:hover {
     background-size: 100% 1px;
 }

 /* Gross price shown in red on the tiles (matches the reference card).
    Small standard gap so gross/net sit near each other when there's no
    old-price row (non-discounted products). */
 .product-card .price-main {
     color: var(--danger, #d12229);
     margin-bottom: 4px;
 }

 /* Dual-image hover: when a product has a second image, slide + fade to it. */
 .product-card .product-image-wrapper.has-alt,
 .product-card .product-image-wrapper { overflow: unset; }
 .product-card .product-image-wrapper.has-alt .tile-img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: contain;
     transition: transform 0.45s ease, opacity 0.45s ease;
 }
 .product-card .product-image-wrapper.has-alt .tile-img--secondary {
     opacity: 0;
     transform: translateX(40px);
 }
 .product-card:hover .product-image-wrapper.has-alt .tile-img--primary {
     opacity: 0;
     transform: translateX(-40px);
 }
 .product-card:hover .product-image-wrapper.has-alt .tile-img--secondary {
     opacity: 1;
     transform: translateX(0);
 }

 /* --- Image & Badges --- */
 .product-image-wrapper {
     position: relative;
     width: 100%;
     height: 200px;
     /* Fixed height for uniformity */
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 75px;
 }

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

 /* Overlaid on the product image (out of flow) so a badge never changes card
    height — cards stay equal whether or not they have a badge. */
 .product-badges {
     display: flex;
     gap: 5px;
     flex-wrap: wrap;
     margin-bottom: 12px;
     min-height: 22px;
 }

 .badge {
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     padding: 4px 8px;
     border-radius: 4px;
     letter-spacing: 0.5px;
 }

 .badge-new {
     background-color: #5b8c00;
     /* Green */
     color: #fff;
 }

 .badge-primary {
     background-color: var(--danger, #d12229);
     /* Red */
     color: #fff;
 }

 .badge-secondary {
     background-color: #fff;
     color: var(--text-main, #1a1a1a);
     border: 1px solid var(--border-strong, #dcdcdc);
     display: flex;
     align-items: center;
     gap: 4px;
 }

 /* --- Product Info & Pricing --- */
 .product-info {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
 }

 .product-title {
     font-size: 14px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
     line-height: 1.4;
     margin-bottom: 15px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     min-height: 40px;
     /* Keeps titles uniform */
 }

 .product-price {
     margin-bottom: 20px;
     flex-grow: 1;
 }

 .price-main {
     font-size: 16px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
     margin-bottom: 2px;
 }

 .price-main.is-discounted {
     color: var(--danger, #d12229);
     /* Red price if discounted */
 }

 .tax {
     font-weight: 400;
     font-size: 12px;
     color: var(--text-muted, #666666);
 }

 .price-old {
     font-size: 12px;
     color: var(--text-soft, #999999);
     margin-bottom: 4px;
     display: flex;
     align-items: center;
     gap: 8px;
     min-height: 18px;
     /* Prevents layout jump if empty */
 }

 .price-old del {
     text-decoration: line-through;
 }

 .empty-placeholder {
     visibility: hidden;
 }

 .discount-tag {
     background-color: var(--danger, #d12229);
     color: #fff;
     font-size: 10px;
     font-weight: 700;
     padding: 2px 4px;
     border-radius: 3px;
 }

 .price-net {
     font-size: 12px;
     color: var(--text-muted, #666666);
 }

 /* --- Action Button --- */
 .btn-product {
     width: 100%;
     background-color: var(--primary, #f2ad21);
     color: var(--text-main, #1a1a1a);
     border: none;
     border-radius: 25px;
     padding: 10px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s;
     margin-top: auto;
 }

 .btn-product:hover {
     background-color: var(--primary-hover, #dda020);
 }

 /* --- Splide UI Overrides --- */
 /* Custom Pagination Lines */
 .product-slider .splide__pagination {
     bottom: -20px;
     display: flex;
     gap: 8px;
 }

 .product-slider .splide__pagination__page {
     width: 35px;
     height: 4px;
     border-radius: 2px;
     background: #e0e0e0;
     border: none;
     opacity: 1;
     transition: background 0.2s;
 }

 .product-slider .splide__pagination__page.is-active {
     background: var(--text-main, #1a1a1a);
     /* Dark gray/black active line */
     transform: none;
 }

 /* --- Popular categories slider --- */
 .category-slider {
     padding-bottom: 25px;
 }
 .cat-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     height: 100%;
     background: #f6f6f6;
     border-radius: 14px;
     padding: 20px 12px;
     text-decoration: none;
     transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
 .cat-card:hover {
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
     transform: translateY(-2px);
 }
 .cat-card__img {
     width: 100%;
     height: 170px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
 }
 .cat-card__img img {
     width: 90%;
     height: 100%;
     object-fit: contain;
 }
 .cat-card__name {
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     color: var(--text-heading, #333333);
     text-align: center;
 }
 .category-slider .splide__pagination {
     bottom: -20px;
     display: flex;
     gap: 8px;
 }
 /* Only a single pagination line, always shown in the active (dark) state. */
 .category-slider .splide__pagination li:not(:first-child) {
     display: none;
 }
 .category-slider .splide__pagination__page {
     width: 35px;
     height: 4px;
     border-radius: 2px;
     background: var(--text-main, #1a1a1a);
     border: none;
     opacity: 1;
     margin: 0;
     transform: none;
 }

 /* Custom Arrows outside the container */
 .product-slider .splide__arrow {
     background: #fff;
     border: 1px solid var(--border-light, #eaeaea);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
     opacity: 1;
     width: 40px;
     height: 40px;
 }

 .product-slider .splide__arrow--prev {
     left: -50px;
 }

 .product-slider .splide__arrow--next {
     right: -50px;
 }

 .product-slider .splide__arrow svg {
     fill: var(--text-main, #1a1a1a);
     width: 14px;
     height: 14px;
 }


 /* --- Base Footer Styles --- */
 .site-footer {
     background-color: #111111;
     color: #e0e0e0;
     padding: 60px 0 30px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     font-size: 14px;
 }

 .footer-container {
     max-width: 1300px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .footer-divider {
     border: none;
     border-top: 1px solid #2a2a2a;
     margin: 40px 0;
 }

 /* --- Top Section: About & Features --- */
 .footer-top {
     display: grid;
     grid-template-columns: 1fr 1.5fr;
     gap: 60px;
     align-items: center;
 }

 .footer-about p {
     line-height: 1.6;
     color: #cccccc;
     font-size: 14px;
 }

 .footer-about strong {
     color: #ffffff;
 }

 .footer-features {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }

 .feature-item i {
     font-size: 24px;
     color: #ffffff;
     margin-bottom: 15px;
 }

 .feature-item h4 {
     font-size: 11px;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 8px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .feature-item p {
     font-size: 12px;
     color: #aaaaaa;
     line-height: 1.4;
 }

 /* --- Main Section: Links & Contact --- */
 .footer-main {
     display: grid;
     grid-template-columns: 1.2fr 1fr 1fr 1fr;
     gap: 40px;
 }

 .col-title,
 .company-name {
     color: var(--primary, #f2ad21);
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 25px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 /* Company Column */
 .company-address {
     display: flex;
     gap: 15px;
     margin-bottom: 30px;
     color: #cccccc;
     line-height: 1.6;
     font-size: 13px;
 }

 .company-address i {
     margin-top: 4px;
     color: #ffffff;
 }

 /* Contact Box */
 .contact-box {
     border: 1px solid var(--primary, #f2ad21);
     border-radius: 8px;
     padding: 20px;
     background-color: var(--primary-a03, rgba(242, 173, 33, 0.03));
     /* Extremely subtle tint */
 }

 .contact-title {
     color: var(--primary, #f2ad21);
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 5px;
 }

 .working-hours {
     font-size: 12px;
     color: #888888;
     margin-bottom: 15px;
 }

 .phone-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .phone-list li {
     display: flex;
     justify-content: space-between;
     margin-bottom: 8px;
     font-size: 13px;
 }

 .phone-list li span {
     color: #cccccc;
 }

 .phone-list li a {
     color: var(--primary, #f2ad21);
     text-decoration: none;
     font-weight: 600;
     transition: color 0.2s;
 }

 .phone-list li a:hover {
     color: #ffffff;
 }

 /* Links Columns */
 .footer-links {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-links li {
     margin-bottom: 12px;
 }

 .footer-links a {
     color: #cccccc;
     text-decoration: none;
     font-size: 13px;
     transition: color 0.2s;
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }

 .footer-links a:hover {
     color: var(--primary, #f2ad21);
 }

 .external-icon {
     font-size: 10px;
     color: #777777;
 }

 .footer-links a:hover .external-icon {
     color: var(--primary, #f2ad21);
 }

 /* --- Bottom Section: Legal & Payments --- */
 .bottom-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 40px;
     flex-wrap: wrap;
     gap: 20px;
 }

 .footer-legal {
     font-size: 12px;
     color: #777777;
 }

 .footer-legal strong {
     color: #3b82f6;
     /* Blue for reCAPTCHA matching screenshot */
 }

 .footer-legal a {
     color: #aaaaaa;
     text-decoration: none;
     transition: color 0.2s;
 }

 .footer-legal a:hover {
     color: #ffffff;
 }

 /* Payment Logos Placholders */
 .footer-payments {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .payment-logo {
     background-color: #ffffff;
     color: #111;
     padding: 4px 8px;
     border-radius: 4px;
     font-size: 11px;
     font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 24px;
 }

 .payment-logo i {
     font-size: 18px;
 }


 /* Credits */
 .footer-credits {
     text-align: center;
     font-size: 12px;
     color: #aaaaaa;
     line-height: 1.6;
 }

 .footer-credits strong {
     color: #ffffff;
 }

 .footer-credits i {
     font-size: 10px;
     margin-left: 2px;
 }

 /* --- Responsive adjustments --- */
 @media (max-width: 1024px) {
     .footer-top {
         grid-template-columns: 1fr;
     }

     .footer-main {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 768px) {
     .footer-features {
         grid-template-columns: 1fr 1fr;
     }

     .footer-main {
         grid-template-columns: 1fr;
     }

     .bottom-row {
         flex-direction: column;
         text-align: center;
         justify-content: center;
     }

     .footer-payments {
         justify-content: center;
         flex-wrap: wrap;
     }
 }

 /* --- Go to Top Button --- */
 .go-top-btn {
     position: fixed;
     bottom: 30px;
     left: 30px;
     /* Positioned on the bottom left as requested */
     width: 48px;
     height: 48px;
     background-color: #111111;
     color: #ffffff;
     border: none;
     border-radius: 50%;
     font-size: 16px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     z-index: 9998;

     /* Hidden state by default */
     opacity: 0;
     visibility: hidden;
     transform: translateY(15px);
     transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }

 /* Hover effect */
 .go-top-btn:hover {
     background-color: var(--text-heading, #333333);
     transform: translateY(-3px) scale(1.05);
     /* Slight lift on hover */
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }

 /* Visible state toggled by JavaScript */
 .go-top-btn.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .go-top-btn.show:hover {
     transform: translateY(-3px);
     /* Retain hover lift when shown */
 }



 /* Registration page style */
 /* --- Container & Typography --- */
 .registration-container {
     max-width: 600px;
     margin: 50px auto;
     background: #fff;
     padding: 40px;
     border-radius: 8px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
     border: 1px solid var(--border-light, #eaeaea);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }

 .form-title {
     font-size: 24px;
     font-weight: 600;
     color: var(--text-main, #1a1a1a);
     margin-bottom: 25px;
 }

 .asterisk {
     color: var(--primary, #f2ad21);
     font-weight: bold;
 }

 /* --- Account Type Toggle --- */
 .account-type-toggle {
     display: flex;
     gap: 15px;
     margin-bottom: 30px;
 }

 .btn-account-type {
     position: relative;
     background: #fff;
     border: 1px solid var(--border-strong, #dcdcdc);
     border-radius: 6px;
     padding: 12px 24px;
     font-size: 14px;
     font-weight: 500;
     color: var(--text-main, #1a1a1a);
     cursor: pointer;
     transition: all 0.2s;
 }

 .btn-account-type:hover {
     border-color: var(--text-soft, #999999);
 }

 .btn-account-type.active {
     background: var(--dark, #101010);
     color: #fff;
     border-color: var(--primary, #f2ad21);
 }

 /* Checkmark Badge */
 .btn-account-type .check-badge {
     position: absolute;
     top: -8px;
     right: -8px;
     width: 20px;
     height: 20px;
     background-color: #fff;
     color: var(--dark, #101010);
     border: 2px solid var(--dark, #101010);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
     opacity: 0;
     transform: scale(0);
     transition: all 0.2s;
 }

 .btn-account-type.active.with-badge .check-badge {
     opacity: 1;
     transform: scale(1);
 }

 /* --- Form Fields --- */
 .business-fields {
     display: none;
     /* Hidden by default */
     animation: fadeIn 0.3s ease;
 }

 .business-fields.active {
     display: block;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-5px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .form-group {
     margin-bottom: 20px;
 }

 .form-group label {
     display: block;
     font-size: 13px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
     margin-bottom: 8px;
 }

 .form-group input[type="text"],
 .form-group input[type="email"],
 .form-group input[type="tel"] {
     width: 100%;
     border: 1px solid var(--border-strong, #dcdcdc);
     border-radius: 25px;
     padding: 12px 20px;
     font-size: 14px;
     color: var(--text-main, #1a1a1a);
     outline: none;
     transition: border-color 0.2s;
 }

 .form-group input:focus {
     border-color: var(--primary, #f2ad21);
 }

 /* --- Custom Country Select --- */
 .custom-select-wrapper {
     position: relative;
     user-select: none;
 }

 .custom-select-trigger {
     width: 100%;
     border: 1px solid var(--primary, #f2ad21);
     /* Orange border as seen in screenshot */
     border-radius: 25px;
     padding: 12px 20px;
     font-size: 14px;
     color: var(--text-main, #1a1a1a);
     background: #fff;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .custom-select-panel {
     position: absolute;
     top: calc(100% + 5px);
     left: 0;
     width: 100%;
     background: #fff;
     border: 1px solid var(--primary, #f2ad21);
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     z-index: 100;
     display: none;
     flex-direction: column;
 }

 .custom-select-wrapper.open .custom-select-panel {
     display: flex;
 }

 .custom-select-search {
     padding: 12px 15px;
     border-bottom: 1px solid var(--border-light, #eaeaea);
     display: flex;
     align-items: center;
     gap: 10px;
     color: #6a7c92;
 }

 .custom-select-search input {
     border: none !important;
     outline: none;
     width: 100%;
     font-size: 14px;
     padding: 0 !important;
     border-radius: 0 !important;
 }

 .custom-select-list {
     list-style: none;
     max-height: 250px;
     overflow-y: auto;
     padding: 0;
     margin: 0;
 }

 .custom-select-list::-webkit-scrollbar {
     width: 6px;
 }

 .custom-select-list::-webkit-scrollbar-track {
     background: #f1f1f1;
 }

 .custom-select-list::-webkit-scrollbar-thumb {
     background: #000;
     border-radius: 4px;
 }

 .custom-select-list li {
     padding: 12px 20px;
     font-size: 14px;
     color: var(--text-main, #1a1a1a);
     cursor: pointer;
     transition: background 0.2s;
 }

 .custom-select-list li:hover,
 .custom-select-list li.selected {
     background-color: #f9f9f9;
 }

 /* --- Checkboxes & Submit --- */
 .checkbox-group {
     margin-bottom: 20px;
 }

 .checkbox-label {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     font-size: 13px;
     color: var(--text-main, #1a1a1a);
     line-height: 1.5;
     cursor: pointer;
 }

 .checkbox-label input[type="checkbox"] {
     margin-top: 3px;
     width: 16px;
     height: 16px;
     cursor: pointer;
 }

 .checkbox-label a {
     color: var(--text-main, #1a1a1a);
     text-decoration: underline;
 }

 .checkbox-label a:hover {
     color: var(--primary, #f2ad21);
 }

 .btn-submit {
     width: 100%;
     background-color: var(--primary, #f2ad21);
     color: var(--text-main, #1a1a1a);
     border: none;
     border-radius: 25px;
     padding: 14px;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s;
     margin-top: 10px;
 }

 .btn-submit:hover {
     background-color: var(--primary-hover, #dda020);
 }



 /* Category Page Style  */
 /* --- Layout & Typography --- */
 .category-page-container {
     max-width: 1400px;
     margin: 40px auto;
     padding: 0 20px;
     display: flex;
     gap: 40px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     color: var(--text-main, #1a1a1a);
 }

 /* --- Left Sidebar Layout --- */
 .sidebar {
     width: 280px;
     flex-shrink: 0;
 }

 .sidebar-widget {
     margin-bottom: 28px;
     background: #fff;
     border-radius: 8px;
 }

 /* The filters box is a rounded, bordered card (matches design). */
 .sidebar-widget.filter-widget {
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 16px;
     padding: 22px 20px;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
 }

 .widget-title {
     font-size: 24px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
     margin-bottom: 22px;
 }

 .widget-title-center {
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 25px;
     text-align: center;
 }

 /* --- Category Tree --- */
 .category-tree {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .category-tree > li {
     font-size: 15px;
     color: var(--text-heading, #333333);
     margin-bottom: 13px;
 }

 .cat-label {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     color: var(--text-main, #1a1a1a);
     transition: color 0.15s;
 }

 /* Hover underlines the label only — no colour change, no weight change.
    The toggle icon is left out so the "+" never picks up the underline. */
 .cat-label:hover .cat-label__name {
     text-decoration: underline;
 }

 /* Active is the only state that changes colour and weight. */
 .cat-label.active {
     color: var(--primary-dark, #dd950f);
     font-weight: 600;
 }

 .cat-label__name {
     flex: 1;
 }

 .toggle-icon {
     color: #b6b6b6;
     font-size: 18px;
     line-height: 1;
     font-weight: 400;
     width: 16px;
     text-align: center;
     flex-shrink: 0;
 }

 .has-children.open > .cat-label .toggle-icon {
     color: var(--primary-dark, #dd950f);
 }

 .sub-categories {
     list-style: none;
     padding-left: 14px;
     margin: 11px 0 4px;
     border-left: 1px solid #e6e6e6;
     display: none;
 }

 .sub-categories.open {
     display: block;
 }

 .sub-categories li {
     margin-bottom: 11px;
 }

 .sub-categories li:last-child {
     margin-bottom: 0;
 }

 .sub-categories a {
     color: var(--text-heading, #333333);
     text-decoration: none;
     font-size: 14px;
     transition: color 0.15s;
 }

 .sub-categories a:hover {
     text-decoration: underline;
 }

 .sub-categories li.active a {
     color: var(--primary-dark, #dd950f);
     font-weight: 600;
 }

 /* --- Filters --- */
 .filter-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     margin-bottom: 22px;
 }

 .filter-header h4 {
     font-size: 17px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
     margin: 0;
 }

 .filter-clear {
     font-size: 13px;
     color: var(--text-main, #1a1a1a);
     text-decoration: none;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     white-space: nowrap;
 }

 .filter-clear i {
     font-size: 12px;
     color: #888;
 }

 .filter-clear:hover {
     color: var(--primary-dark, #dd950f);
 }

 .filter-clear:hover i {
     color: var(--primary-dark, #dd950f);
 }

 .filter-section {
     margin-bottom: 24px;
 }

 .filter-title {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.8px;
     text-transform: uppercase;
     color: var(--text-main, #1a1a1a);
     margin-bottom: 14px;
 }

 .price-inputs {
     display: flex;
     gap: 10px;
 }

 .price-field {
     flex: 1;
 }

 .price-field label {
     display: block;
     font-size: 13px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
     margin-bottom: 8px;
 }

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

 .input-wrapper input {
     width: 100%;
     border: 1px solid #e6e6e6;
     border-radius: 24px;
     padding: 11px 44px 11px 16px;
     font-size: 13px;
     color: var(--text-main, #1a1a1a);
     outline: none;
     transition: border-color 0.15s, box-shadow 0.15s;
 }

 .input-wrapper input:hover {
     border-color: #d5d5d5;
 }

 .input-wrapper input:focus {
     border-color: var(--primary, #f2ad21);
     box-shadow: 0 0 0 3px var(--primary-a12, rgba(242, 173, 33, 0.12));
 }

 .input-wrapper .currency {
     position: absolute;
     right: 16px;
     font-size: 13px;
     color: #9a9a9a;
     pointer-events: none;
 }

 /* --- Square checkboxes (brand / availability / attribute facets) --- */
 .square-checkbox {
     display: flex;
     align-items: center;
     gap: 11px;
     margin-bottom: 12px;
     font-size: 14.5px;
     color: var(--text-heading, #333333);
     cursor: pointer;
     user-select: none;
 }

 .square-checkbox input {
     display: none;
 }

 .square-checkbox .box-checkbox {
     width: 20px;
     height: 20px;
     box-sizing: border-box;
     border: 1.5px solid #d5d5d5;
     border-radius: 5px;
     background: #fff;
     position: relative;
     display: inline-block;
     flex-shrink: 0;
     transition: background-color 0.15s, border-color 0.15s;
 }

 /* Hover and checked share the same accent so the box never changes size. */
 .square-checkbox:hover .box-checkbox {
     border-color: var(--primary, #f2ad21);
     background: var(--primary-tint, #fdf6e6);
 }

 .square-checkbox input:checked + .box-checkbox {
     background: var(--primary, #f2ad21);
     border-color: var(--primary, #f2ad21);
 }

 .square-checkbox input:checked + .box-checkbox::after {
     content: "";
     position: absolute;
     left: 6px;
     top: 2px;
     width: 5px;
     height: 10px;
     border: solid #fff;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }

 .square-checkbox:hover {
     color: var(--text-main, #1a1a1a);
 }

 .more-options {
     font-size: 13px;
     color: #555;
     text-decoration: none;
     display: inline-block;
     margin-top: 6px;
     cursor: pointer;
 }

 .more-options:hover {
     color: var(--primary-dark, #dd950f);
     text-decoration: underline;
 }



 /* ==========================================
   SIDEBAR EXCLUSIVE WIDGETS (Bestseller & Recommended)
   ========================================== */

 /* Titles */
 .sidebar-exclusive-title {
     font-size: 24px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
     text-align: center;
     margin-bottom: 25px;
 }

 /* Outer Widgets */
 .sidebar-bestseller-widget {
     margin-bottom: 40px;
     padding: 0 10px;
     /* Creates wide space on sides for Splide arrows */
     position: relative;
 }

 .sidebar-recommended-widget {
     margin-bottom: 40px;
     padding: 0;
     /* No arrows, so no extra side padding needed */
 }

 /* The Card Itself */
 .sidebar-exclusive-card {
     background: #fff;
     border: 1px solid var(--border-light, #eaeaea);
     /* Light gray border */
     border-radius: 12px;
     padding: 20px;
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 /* Image Container */
 .exclusive-image-container {
     width: 100%;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 15px;
 }

 /* Tall image for Bestseller panel */
 .exclusive-image-container img {
     max-height: 200px;
     width: auto;
     object-fit: contain;
 }

 /* Square/Full-width image for Recommended design */
 .exclusive-image-container.static-image img {
     width: 100%;
     max-height: 240px;
     object-fit: contain;
     border-radius: 8px;
 }

 /* Badges */
 .exclusive-badge {
     text-align: left;
 }

 /* Overlapping badge for Bestseller */
 .exclusive-badge.absolute-badge {
     position: absolute;
     bottom: -10px;
     left: 0;
 }

 /* Stacked badge for Recommended */
 .exclusive-badge.static-badge {
     margin-bottom: 15px;
 }

 /* Title inside Card */
 .exclusive-name {
     font-size: 15px;
     font-weight: 700;
     line-height: 1.4;
     color: var(--text-main, #1a1a1a);
     text-align: left;
     margin-bottom: 15px;
 }

 /* Pricing Group */
 .exclusive-price-group {
     text-align: left;
     margin-bottom: 20px;
     flex-grow: 1;
     /* Pushes button to bottom */
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
 }

 .exclusive-price-main {
     font-size: 16px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
     margin-bottom: 4px;
 }

 .exclusive-price-net {
     font-size: 13px;
     color: var(--text-muted, #666666);
 }

 /* Button overrides specific to these cards */
 .sidebar-exclusive-card .btn-product {
     margin-top: auto;
     width: 100%;
 }


 /* ==========================================
   EXCLUSIVE SPLIDE OVERRIDES (For Bestseller)
   ========================================== */

 .exclusive-splide {
     padding-bottom: 45px;
     /* Room for dots at the bottom */
 }

 /* Arrows */
 .exclusive-splide .splide__arrow {
     background: #fff;
     border: 1px solid var(--border-light, #eaeaea);
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
     width: 40px;
     height: 40px;
     opacity: 1;
 }

 /* Pull arrows completely outside the card */
 .exclusive-splide .splide__arrow--prev {
     left: -15px;
 }

 .exclusive-splide .splide__arrow--next {
     right: -15px;
 }

 .exclusive-splide .splide__arrow svg {
     fill: var(--text-main, #1a1a1a);
     width: 14px;
     height: 14px;
 }

 /* Pagination Dots / Lines */
 .exclusive-splide .splide__pagination {
     bottom: 0px;
     display: flex;
     gap: 8px;
 }

 .exclusive-splide .splide__pagination__page {
     width: 35px;
     height: 3px;
     border-radius: 2px;
     background: #e0e0e0;
     border: none;
     opacity: 1;
     transition: background 0.2s;
 }

 .exclusive-splide .splide__pagination__page.is-active {
     background: var(--text-main, #1a1a1a);
     transform: none;
 }

 /* --- Main Content Area --- */
 .main-content {
     flex-grow: 1;
     min-width: 0;
 }

 .category-top-header {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     margin-bottom: 15px;
 }

 .category-top-header h1 {
     font-size: 28px;
     font-weight: 600;
     margin: 0;
 }

 .product-count {
     font-size: 14px;
     color: var(--text-muted, #666666);
 }

 .product-count strong {
     color: var(--text-main, #1a1a1a);
     font-weight: 700;
 }

 .category-short-desc {
     font-size: 15px;
     color: var(--text-heading, #333333);
     line-height: 1.6;
     margin-bottom: 40px;
 }

 /* --- Toolbar (Sorting & Pagination) --- */
 .toolbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 30px;
 }

 .sort-dropdown-container {
     position: relative;
 }

 .btn-sort {
     background: #fff;
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 20px;
     padding: 10px 20px;
     font-size: 14px;
     color: var(--text-main, #1a1a1a);
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: all 0.2s;
 }

 .btn-sort:hover {
     border-color: #ccc;
 }

 .sort-options {
     position: absolute;
     top: calc(100% + 5px);
     left: 0;
     width: 220px;
     background: #fff;
     border: 1px solid var(--primary, #f2ad21);
     border-radius: 8px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     list-style: none;
     padding: 10px 0;
     margin: 0;
     z-index: 100;
     display: none;
     /* Hide via CSS, can toggle via JS */
 }

 /* Toggled open on click (see the sort-toggle handler in store.php) */
 .sort-dropdown-container.open .sort-options {
     display: block;
 }

 .sort-options li {
     padding: 10px 20px;
     font-size: 14px;
     color: var(--text-heading, #333333);
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .sort-options li:hover {
     background: var(--primary-tint, #fdf8eb);
 }

 .sort-options li.active {
     color: var(--primary-dark, #d88e00);
     font-weight: 600;
 }

 .pagination-controls {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     color: var(--text-main, #1a1a1a);
     font-weight: 600;
 }

 .page-input {
     width: 45px;
     height: 45px;
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 50%;
     text-align: center;
     font-size: 14px;
     font-weight: 600;
     outline: none;
 }

 .btn-page-nav {
     background: #fff;
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 25px;
     padding: 10px 20px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: all 0.2s;
 }

 .btn-page-nav:hover {
     border-color: #ccc;
     background: #f9f9f9;
 }

 .btn-page-nav i {
     font-size: 12px;
 }

 /* --- Product Grid --- */
 /* Flex grid: each tile is sized to (100% / --per-row), default 3 columns.
    render_tile($p, false, N) sets --per-row:N on the card to override. */
 /* The column count is driven by --per-row on the CONTAINER. It used to be a
    flex-basis on the child, which a `display: grid` parent ignores entirely —
    that is why the responsive rules below had no effect and phones were still
    getting four columns. */
 .main-product-grid {
     display: grid;
     grid-template-columns: repeat(var(--per-row, 3), 1fr);
     gap: 20px;
     margin-bottom: 40px;
 }
 .main-product-grid > .product-card {
     min-width: 0;   /* let a long product name shrink instead of widening the column */
     width: 100%;
 }

 /* Ensure the standard product card matches screenshots exactly */
 .product-card {
     background: #fff;
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 12px;
     padding: 20px;
     display: flex;
     flex-direction: column;
     transition: box-shadow 0.2s;
 }

 .product-card:hover {
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
 }

 .product-image-wrapper {
     position: relative;
     width: 100%;
     height: 220px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
 }

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


 .badge-secondary {
     background-color: #fff;
     color: var(--text-main, #1a1a1a);
     border: 1px solid var(--text-main, #1a1a1a);
     padding: 4px 8px;
     border-radius: 4px;
     font-size: 10px;
     font-weight: 700;
     display: inline-flex;
     align-items: center;
     gap: 5px;
 }

 .product-title {
     font-size: 15px;
     font-weight: 700;
     line-height: 1.4;
     margin-bottom: 15px;
     min-height: 42px;
 }

 .product-price {
     margin-bottom: 20px;
     flex-grow: 1;
 }

 .price-main {
     font-size: 16px;
     font-weight: 700;
 }

 .price-net {
     font-size: 13px;
     color: var(--text-muted, #666666);
 }

 .btn-product {
     width: 100%;
     background-color: var(--primary, #f2ad21);
     color: var(--text-main, #1a1a1a);
     border: none;
     border-radius: 25px;
     padding: 12px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s;
     margin-top: auto;
 }

 .btn-product:hover {
     background-color: var(--primary-hover, #dda020);
 }

 /* --- SEO Category Description --- */
 .category-seo-description {
     border-top: 1px solid var(--border-light, #eaeaea);
     padding-top: 40px;
     margin-top: 20px;
     color: var(--text-heading, #333333);
 }

 .category-seo-description h2 {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 20px;
     color: var(--text-main, #1a1a1a);
 }

 .category-seo-description p {
     font-size: 15px;
     line-height: 1.6;
     margin-bottom: 20px;
 }

 .category-seo-description ul {
     padding-left: 20px;
     margin-bottom: 30px;
 }

 .category-seo-description li {
     font-size: 15px;
     line-height: 1.6;
     margin-bottom: 8px;
 }

 /* --- Responsive Layout ---
    !important because index.php and the account favourites set --per-row inline
    to pick their desktop column count; without it the inline value would hold
    all the way down to a phone. */
 @media (max-width: 1200px) {
     .main-product-grid { --per-row: 3 !important; }
 }
 @media (max-width: 900px) {
     .main-product-grid { --per-row: 2 !important; }
 }

 @media (max-width: 992px) {
     .category-page-container {
         flex-direction: column;
     }

     .sidebar {
         width: 100%;
     }

     .toolbar {
         flex-direction: column;
         align-items: flex-start;
         gap: 15px;
     }

     .bottom-toolbar {
         align-items: center;
     }
 }

 /* Two per row on phones — a single full-width card wastes most of the screen
    and makes the listing endless to scroll. */
 @media (max-width: 576px) {
     .main-product-grid { --per-row: 2 !important; gap: 12px; }
 }





 /* styles for Contact page  */
 /* --- Global Contact Layout --- */
 .contact-page-wrapper {
     max-width: 1200px;
     margin: 30px auto;
     padding: 0 20px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     color: var(--text-main, #1a1a1a);
 }

 .breadcrumbs {
     font-size: 13px;
     color: var(--text-muted, #666666);
     margin-bottom: 25px;
 }

 .breadcrumbs a {
     color: var(--text-main, #1a1a1a);
     text-decoration: none;
 }

 .breadcrumbs i {
     font-size: 10px;
     margin: 0 5px;
 }

 .highlight-link {
     color: var(--primary, #f2ad21);
     text-decoration: none;
 }

 .highlight-link:hover {
     text-decoration: underline;
 }

 .underline-link {
     color: var(--text-main, #1a1a1a);
     text-decoration: underline;
 }

 .bold-underline-link {
     color: var(--text-main, #1a1a1a);
     font-weight: 700;
     text-decoration: underline;
 }

 /* --- Hero Section --- */
 .contact-hero {
     background-color: #f4f6f8;
     /* Light gray-blue from screenshot */
     border-radius: 12px;
     padding: 50px 30px;
     text-align: center;
     margin-bottom: 50px;
 }

 .contact-hero h1 {
     font-size: 32px;
     font-weight: 600;
     margin-bottom: 15px;
 }

 .contact-hero p {
     font-size: 16px;
     color: #4a5c6a;
     max-width: 700px;
     margin: 0 auto;
     line-height: 1.5;
 }

 /* --- Company Data --- */
 .company-data-section {
     display: flex;
     gap: 50px;
     margin-bottom: 60px;
     align-items: stretch;
 }

 .company-details {
     flex: 1;
 }

 .company-details h2 {
     font-size: 24px;
     font-weight: 600;
     margin-bottom: 25px;
 }

 .company-details p {
     font-size: 15px;
     line-height: 1.8;
     margin-bottom: 10px;
     color: var(--text-heading, #333333);
 }

 .company-image {
     flex: 1;
 }

 .company-image img {
     width: 100%;
     height: 100%;
     max-height: 350px;
     object-fit: cover;
     border-radius: 12px;
 }

 /* --- Contact Persons Section --- */
 .contact-persons-section {
     margin-bottom: 50px;
 }

 .contact-persons-section h2 {
     font-size: 24px;
     font-weight: 600;
     margin-bottom: 25px;
 }

 .contact-persons-list {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .person-card {
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 12px;
     padding: 20px 30px;
     background: #fff;
 }

 .person-header {
     display: flex;
     align-items: center;
     gap: 20px;
     padding-bottom: 20px;
     border-bottom: 1px solid var(--border-light, #eaeaea);
 }

 .person-header img {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     object-fit: cover;
 }

 .person-info h3 {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 5px;
 }

 .person-info p {
     font-size: 14px;
     color: var(--text-muted, #666666);
 }

 .person-contact {
     padding-top: 20px;
 }

 .person-contact p {
     font-size: 14px;
     margin-bottom: 5px;
     color: var(--text-main, #1a1a1a);
 }

 .person-contact strong {
     font-weight: 700;
 }

 /* --- Reusable Info Panel (Complaints & FAQ) --- */
 .info-panel {
     background-color: #f9f9f9;
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 12px;
     padding: 30px;
     margin-bottom: 40px;
 }

 .info-panel h2 {
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 15px;
 }

 .info-panel p {
     font-size: 15px;
     color: var(--text-heading, #333333);
     line-height: 1.6;
     margin-bottom: 10px;
 }

 /* --- Manufacturers Section --- */
 .manufacturers-section {
     margin-bottom: 60px;
 }

 .manufacturers-header {
     background-color: #f3f7f4;
     /* Light green tint */
     border-left: 5px solid var(--green-success, #2e7d32);
     /* Dark green accent line */
     padding: 25px 30px;
     border-radius: 0 12px 12px 0;
     margin-bottom: 30px;
 }

 .manufacturers-header h2 {
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 10px;
 }

 .manufacturers-header p {
     font-size: 15px;
     color: var(--text-heading, #333333);
 }

 .manufacturers-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 20px;
 }

 .manufacturer-card {
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 12px;
     padding: 25px 20px;
     background: #fff;
     text-align: center;
 }

 .manufacturer-card h3 {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .manufacturer-card p {
     font-size: 13px;
     color: var(--text-muted, #666666);
     margin-bottom: 20px;
     min-height: 35px;
 }

 .contact-link {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-size: 13px;
     color: var(--text-main, #1a1a1a);
     text-decoration: none;
     margin-bottom: 10px;
     font-weight: 500;
 }

 .contact-link i {
     font-size: 14px;
 }

 .contact-link:hover {
     color: var(--primary, #f2ad21);
     text-decoration: underline;
 }

 /* --- Contact Form Section --- */
 .contact-form-section {
     max-width: 650px;
     margin: 60px auto 80px auto;
 }

 .form-intro {
     font-size: 16px;
     text-align: center;
     margin-bottom: 50px;
 }

 .contact-form-section h2 {
     font-size: 28px;
     font-weight: 700;
     text-align: center;
     margin-bottom: 30px;
 }

 .form-info-box {
     background-color: #f5f5f5;
     border-radius: 6px;
     padding: 12px;
     text-align: center;
     font-size: 13px;
     color: var(--text-heading, #333333);
     font-style: italic;
     margin-bottom: 30px;
 }

 .asterisk {
     color: var(--primary, #f2ad21);
     font-weight: bold;
 }

 .contact-page-form .form-group {
     margin-bottom: 25px;
 }

 .contact-page-form label {
     display: block;
     font-size: 13px;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .contact-page-form input,
 .contact-page-form textarea {
     width: 100%;
     border: 1px solid var(--border-strong, #dcdcdc);
     border-radius: 25px;
     padding: 15px 20px;
     font-size: 14px;
     color: var(--text-main, #1a1a1a);
     outline: none;
     font-family: inherit;
     transition: border-color 0.2s;
 }

 .contact-page-form textarea {
     border-radius: 15px;
     /* Less rounded for textarea */
     resize: vertical;
 }

 .contact-page-form input:focus,
 .contact-page-form textarea:focus {
     border-color: var(--primary, #f2ad21);
 }

 .contact-page-form .btn-submit {
     background-color: var(--primary, #f2ad21);
     color: var(--text-main, #1a1a1a);
     border: none;
     border-radius: 25px;
     padding: 12px 35px;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s;
 }

 .contact-page-form .btn-submit:hover {
     background-color: var(--primary-hover, #dda020);
 }

 /* --- Map Section --- */
 .contact-map-section {
     width: 100%;
     display: block;
     margin-bottom: 30px;
 }

 .contact-map-section iframe {
     display: block;
 }

 /* --- Responsive Adjustments --- */
 @media (max-width: 992px) {
     .company-data-section {
         flex-direction: column;
         gap: 30px;
     }

     .manufacturers-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 576px) {
     .contact-hero {
         padding: 30px 20px;
     }

     .manufacturers-grid {
         grid-template-columns: 1fr;
     }

     .person-header {
         flex-direction: column;
         align-items: flex-start;
     }
 }


 /* About us page style  */
 /* --- Global About Page Layout --- */
 .about-page-wrapper {
     max-width: 1200px;
     margin: 30px auto;
     padding: 0 20px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     color: var(--text-main, #1a1a1a);
 }

 /* --- Hero Section --- */
 .about-hero {
     background-color: #f4f6f8;
     border-radius: 16px;
     padding: 60px 40px;
     text-align: center;
     margin-bottom: 50px;
 }

 .about-hero h1 {
     font-size: 32px;
     font-weight: 600;
     margin-bottom: 20px;
     color: var(--text-main, #1a1a1a);
 }

 .about-hero p {
     font-size: 16px;
     color: var(--text-heading, #333333);
     max-width: 900px;
     margin: 0 auto;
     line-height: 1.6;
 }

 /* --- Features Grid (2x2) --- */
 .about-features-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 25px;
     margin-bottom: 60px;
     max-width: 1000px;
     margin-left: auto;
     margin-right: auto;
 }

 .feature-card {
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 12px;
     padding: 35px 30px;
     background: #fff;
 }

 .feature-card h3 {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 15px;
 }

 .feature-card p {
     font-size: 15px;
     color: #4a5c6a;
     line-height: 1.6;
 }

 /* --- Standard Text Blocks --- */
 .about-text-block {
     margin-bottom: 40px;
 }

 .about-text-block h2 {
     font-size: 24px;
     font-weight: 600;
     margin-bottom: 15px;
 }

 .about-text-block p {
     font-size: 15px;
     color: var(--text-heading, #333333);
     line-height: 1.6;
     margin-bottom: 15px;
 }

 .clean-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .clean-list li {
     font-size: 15px;
     color: var(--text-heading, #333333);
     line-height: 1.6;
     padding-left: 20px;
     /* Indents text without standard bullets */
 }

 /* --- Trust Panel (Reliability & Security) --- */
 .trust-panel {
     background-color: #f3f7f4;
     /* Light green */
     border-left: 5px solid var(--green-success, #2e7d32);
     /* Dark green accent */
     border-radius: 0 12px 12px 0;
     padding: 35px 40px;
     margin: 50px 0;
 }

 .trust-panel h2 {
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 15px;
 }

 .trust-panel p {
     font-size: 15px;
     color: var(--text-heading, #333333);
     line-height: 1.6;
     margin-bottom: 25px;
 }

 .trust-badge-img {
     max-width: 180px;
     display: block;
 }

 /* --- Big Team Photo --- */
 .team-photo-section {
     margin-bottom: 60px;
 }

 .main-team-photo {
     width: 100%;
     border-radius: 12px;
     display: block;
 }

 /* --- Team Members Grid --- */
 .team-members-section {
     margin-bottom: 70px;
 }

 .section-title-center {
     text-align: center;
     font-size: 28px;
     font-weight: 600;
     margin-bottom: 40px;
 }

 .team-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 25px;
     justify-content: center;
 }

 .team-card {
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 12px;
     padding: 30px 20px;
     background: #fff;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .team-avatar {
     width: 140px;
     height: 140px;
     border-radius: 50%;
     object-fit: cover;
     margin-bottom: 20px;
     background-color: #f5f5f5;
 }

 .team-card h4 {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 5px;
     color: var(--text-main, #1a1a1a);
 }

 .team-role {
     font-size: 14px;
     color: var(--text-muted, #666666);
     margin-bottom: 15px;
 }

 .team-contact {
     font-size: 13px;
     display: block;
     margin-bottom: 5px;
 }

 /* --- Company Details Split Section --- */
 .company-details-split {
     display: flex;
     gap: 50px;
     align-items: stretch;
     margin-bottom: 60px;
 }

 .details-text {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .details-text h2 {
     font-size: 24px;
     font-weight: 600;
     margin-bottom: 25px;
 }

 .details-text p {
     font-size: 16px;
     line-height: 1.8;
     color: var(--text-heading, #333333);
     margin-bottom: 10px;
 }

 .details-image {
     flex: 1;
 }

 .details-image img {
     width: 100%;
     height: 100%;
     max-height: 350px;
     object-fit: cover;
     border-radius: 12px;
 }

 /* --- Utilities & Responsive --- */
 @media (max-width: 992px) {
     .about-features-grid {
         grid-template-columns: 1fr;
     }

     .company-details-split {
         flex-direction: column;
         gap: 30px;
     }

     .team-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 576px) {
     .about-hero {
         padding: 40px 20px;
     }

     .team-grid {
         grid-template-columns: 1fr;
     }
 }



 /* Style for Blog page  */
 /* --- Global Blog Layout --- */
 .blog-page-wrapper {
     max-width: 1400px;
     margin: 30px auto 80px auto;
     padding: 0 20px;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }

 /* Breadcrumbs (reused from previous, added here just in case) */
 .breadcrumbs {
     font-size: 13px;
     color: var(--text-muted, #666666);
     margin-bottom: 25px;
 }

 .breadcrumbs a {
     color: var(--text-main, #1a1a1a);
     text-decoration: none;
 }

 .breadcrumbs i {
     font-size: 10px;
     margin: 0 5px;
 }

 /* --- Header Row --- */
 .blog-header-row {
     display: block;
 }

 /* 28px/600, the same as the store's category heading (.category-top-header h1)
    — the blog index and the store listing are the same kind of page and were
    titled at two different sizes. */
 .blog-header-row h1 {
     font-size: 28px;
     font-weight: 600;
     color: var(--text-main, #1a1a1a);
     margin: 0;
 }

 .blog-top-pagination-row {
     display: flex;
     justify-content: end;
     margin-bottom: 20px;
 }

 /* --- Pagination Controls --- */
 .pagination-controls {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 14px;
     color: var(--text-main, #1a1a1a);
     font-weight: 600;
 }

 .page-label {
     font-weight: 700;
 }

 .page-total {
     color: var(--text-heading, #333333);
     font-weight: 400;
 }

 .page-input {
     width: 45px;
     height: 45px;
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 50%;
     text-align: center;
     font-size: 14px;
     font-weight: 600;
     outline: none;
     color: var(--text-main, #1a1a1a);
 }

 .btn-page-nav {
     background: #fff;
     border: 1px solid var(--border-light, #eaeaea);
     border-radius: 25px;
     height: 45px;
     min-width: 45px;
     padding: 0 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     font-weight: 600;
     color: var(--text-main, #1a1a1a);
     cursor: pointer;
     transition: all 0.2s;
 }

 .btn-page-nav i {
     font-size: 12px;
 }

 .page-text-btn {
     gap: 8px;
 }

 .btn-page-nav:hover {
     border-color: #ccc;
     background: #f9f9f9;
 }

 /* Icon-only prev/next: a circle rather than the labelled pill. The pager reads
    "‹ Page [3] out of 12 ›", so the arrows carry no words — and with no first
    and last buttons beside them, there is no ambiguity about what they do. */
 .btn-page-nav--icon {
     width: 45px;
     min-width: 45px;
     padding: 0;
     border-radius: 50%;
     flex: 0 0 auto;
 }

 /* Disabled at the ends rather than removed: buttons that disappear make the
    row change width every time you reach the first or last page. */
 .btn-page-nav:disabled {
     opacity: 0.4;
     cursor: default;
     background: #fff;
     border-color: var(--border-light, #eaeaea);
 }

 .btn-page-nav:disabled:hover { border-color: var(--border-light, #eaeaea); background: #fff; }

 /* The page box is typed into, so it needs to look like a field rather than a
    label. Spinners are hidden — at 45px they would leave no room for the digits,
    and Enter is the way this is used. */
 .page-input::-webkit-outer-spin-button,
 .page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 .page-input { -moz-appearance: textfield; appearance: textfield; padding: 0; }
 .page-input:focus { border-color: var(--text-main, #1a1a1a); }

 /* Right in a toolbar on desktop; assets/css/responsive.css centres it on a
    phone, where there is nothing to sit beside. */
 .toolbar .pagination-controls { margin-left: auto; }

 /* --- Blog Grid --- */
 .blog-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 35px;
     margin-bottom: 50px;
 }

 /* --- Blog Card --- */
 .blog-card {
     background: #fff;
     border: 1px solid var(--bg-muted, #f0f0f0);
     border-radius: 24px;
     /* Large rounded corners from screenshot */
     overflow: hidden;
     /* Clips the image to the border radius */
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
     display: flex;
     flex-direction: column;
     height: 100%;               /* equal-height cards in grids and sliders */
     transition: box-shadow 0.3s ease, transform 0.3s ease;
 }

 .blog-card:hover {
     box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
     transform: translateY(-3px);
 }

 .blog-card-image {
     width: 100%;
     height: 300px;
 }

 .blog-card-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .blog-card-content {
     padding: 40px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     /* Pushes author to bottom if text lengths vary */
 }

 .blog-date {
     font-size: 13px;
     color: var(--text-soft, #999999);
     margin-bottom: 20px;
     display: block;
 }

 .blog-title {
     font-family: "Poppins", sans-serif;
     font-size: 17px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
     margin-bottom: 20px;
     line-height: 1.4;
     /* Max 2 lines, ellipsis; reserve the height so cards stay aligned. */
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     min-height: 2.8em; /* 2 lines × 1.4 line-height */
 }

 .blog-excerpt {
     font-size: 15px;
     color: #555;
     line-height: 1.7;
     margin-bottom: 30px;
     flex-grow: 1;
     /* Max 3 lines, ellipsis. */
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .blog-author {
     font-size: 15px;
     font-weight: 700;
     color: var(--text-main, #1a1a1a);
 }

 /* --- Footer Row (Bottom Pagination) --- */
 .blog-footer-row {
     display: flex;
     justify-content: flex-end;
     /* Aligns pagination to the right */
     padding-top: 20px;
 }

 /* --- Responsive Layout --- */
 @media (max-width: 992px) {
     .blog-grid {
         grid-template-columns: 1fr;
         /* 1 column on smaller screens */
     }

     .blog-card-image {
         height: 250px;
     }
 }

 @media (max-width: 576px) {
     .blog-header-row {
         flex-direction: column;
         align-items: flex-start;
         gap: 20px;
     }

     .blog-card-content {
         padding: 25px;
     }

     .blog-footer-row {
         justify-content: center;
     }
 }

 /* Extracted from inline head */
 .turbo-progress-bar {
     position: fixed;
     display: block;
     top: 0;
     left: 0;
     height: 3px;
     background: #0076ff;
     z-index: 2147483647;
     transition:
         width 300ms ease-out,
         opacity 150ms 150ms ease-in;
     transform: translate3d(0, 0, 0);
 }

 /* Extracted from inline head */
 @font-face {
     font-family: 'aurora-icons';
     font-display: swap;
     src: url(https://dcsaascdn.net/fonts/aurora-icons.svg) format('svg'), url(https://dcsaascdn.net/fonts/aurora-icons.ttf) format('truetype'), url(https://dcsaascdn.net/fonts/aurora-icons.woff) format('woff');
     font-weight: normal;
     font-style: normal;
 }

 .main-module_gallery__1Ajgx {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     box-sizing: border-box;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 .main-module_gallery__image__1LYNa {
     margin: auto;
     display: block;
     max-width: -webkit-max-content;
     max-width: -moz-max-content;
     max-width: max-content;
     max-height: -webkit-max-content;
     max-height: -moz-max-content;
     max-height: max-content;
 }

 .main-module_gallery__image_max-width__2uWqp {
     width: 100%;
     height: auto;
 }

 .main-module_gallery__image_max-height__3iunQ {
     height: 100%;
     width: auto;
 }

 .main-module_gallery__image_adjusted__Ix20O {
     max-width: 100%;
     max-height: 100%;
 }

 .main-module_gallery__image_max-sizes__w2lwL {
     height: auto;
     width: auto;
 }

 .main-module_gallery__image-container__2uLDK {
     display: flex;
     overflow: auto;
     scroll-behavior: smooth;
 }

 .main-module_gallery__image-container__2uLDK::-webkit-scrollbar {
     width: 7px;
     height: 7px;
 }

 .main-module_gallery__image-container__2uLDK::-webkit-scrollbar-thumb {
     background-color: rgba(0, 0, 0, 0.4);
 }

 .main-module_gallery__images__19e1P {
     display: -ms-grid;
     display: grid;
     height: 100%;
     -ms-grid-rows: 1fr;
     grid-template-rows: 1fr;
 }

 .main-module_gallery__images-container__y3z5v {
     overflow: hidden;
     width: 100%;
     background-color: rgba(255, 255, 255, 0.9);
 }

 .main-module_gallery__images_with-transition__1cAJq {
     transition: transform 0.3s cubic-bezier(0.25, 0.25, 0.75, 1) 0s;
 }

 .main-module_gallery-bar__2jTh6 {
     height: 60px;
     display: -ms-grid;
     display: grid;
     /* -ms-grid-columns: -webkit-max-content 1fr (-webkit-max-content)[2];
         -ms-grid-columns: max-content 1fr (max-content)[2]; */
     grid-template-columns: -webkit-max-content 1fr repeat(2, -webkit-max-content);
     grid-template-columns: max-content 1fr repeat(2, max-content);
     grid-template-areas: 'imageNumbers description copyLink close';
     -ms-grid-rows: 1fr;
     grid-template-rows: 1fr;
     align-items: center;
     background-color: #242424;
     color: #ffffff;
     padding: 0 20px;
     position: relative;
     font-size: 13px;
     font-weight: bold;
 }

 .main-module_gallery-bar__2jTh6 *:focus {
     outline-color: #ffffff;
     outline-offset: 0;
 }

 .main-module_gallery-bar__2jTh6 .main-module_icon__2BB-1 {
     font-size: 16px;
 }

 .main-module_gallery-bar__2jTh6 .main-module_icon__2BB-1:hover {
     cursor: pointer;
 }

 .main-module_gallery-bar__2jTh6 .main-module_icon_inactive__2QRrA {
     color: #5c657e;
 }

 .main-module_gallery-bar__2jTh6 .main-module_icon_inactive__2QRrA:hover {
     cursor: default;
 }

 .main-module_gallery-bar__image-numbers__2gLMV {
     -ms-grid-row: 1;
     -ms-grid-column: 1;
     grid-area: imageNumbers;
     margin-right: 50px;
 }

 .main-module_gallery-bar__image-description__15_99 {
     -ms-grid-row: 1;
     -ms-grid-column: 2;
     grid-area: description;
     color: #d0e6ff;
     font-weight: normal;
     overflow-wrap: anywhere;
     display: none;
 }

 .main-module_gallery-bar__copy-link__25EN6 {
     -ms-grid-row: 1;
     -ms-grid-column: 3;
     grid-area: copyLink;
     display: flex;
     font-size: 12px;
     border: 2px solid #ffffff;
     border-radius: 3px;
     padding: 6px 10px;
     margin-left: 50px;
     color: #ffffff;
     font-size: 100%;
     font-weight: bold;
 }

 .main-module_gallery-bar__copy-link__25EN6:hover {
     cursor: pointer;
 }

 .main-module_gallery-bar__copy-link__25EN6 .main-module_icon__2BB-1 {
     margin-right: 11px;
 }

 .main-module_gallery-bar__copy-link__25EN6 .main-module_hide_desktop__3M7Iv {
     display: inline-block;
 }

 .main-module_gallery-bar__copy-link_confirmation__2Q0uN {
     position: absolute;
     top: 80px;
     left: 0;
     right: 0;
     margin: 0 auto;
     width: -webkit-max-content;
     width: -moz-max-content;
     width: max-content;
     min-width: 15rem;
     background-color: #d2eec4;
     z-index: 5;
     display: flex;
     align-items: center;
     max-width: 100%;
     padding: 1rem;
     border-radius: 3px;
     color: #5a9986;
 }

 .main-module_gallery-bar__copy-link_confirmation-text__14S1V {
     padding: 0 10px;
     text-align: center;
     min-width: 8rem;
     width: 100%;
 }

 .main-module_gallery-bar__image-close__3tyC0 {
     -ms-grid-row: 1;
     -ms-grid-column: 4;
     grid-area: close;
     -ms-grid-column-align: end;
     justify-self: end;
     margin-left: 30px;
 }

 .main-module_gallery__1Ajgx .main-module_gallery-bar__copy-link__25EN6 .main-module_hide_mobile__37dVg {
     display: none;
 }

 .main-module_gallery__1Ajgx .main-module_loader__mask__2I5iM {
     background: #242424;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
 }

 .main-module_gallery__1Ajgx .main-module_loader__mask__2I5iM::after {
     content: '';
     background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iYSIgZD0iTTkuNDc0IDBIMTh2OS40NzRIOS40NzR6Ii8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIGZpbGw9IiNERUU0RjciIGQ9Ik05IDE4QTkgOSAwIDEgMSA5IDBhOSA5IDAgMCAxIDAgMTh6bTAtMi42NDNBNi4zNTcgNi4zNTcgMCAxIDAgOSAyLjY0M2E2LjM1NyA2LjM1NyAwIDAgMCAwIDEyLjcxNHoiLz4KICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2EiLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iIzNDODNFQyIgZD0iTTkgMThBOSA5IDAgMSAxIDkgMGE5IDkgMCAwIDEgMCAxOHptMC0yLjY0M0E2LjM1NyA2LjM1NyAwIDEgMCA5IDIuNjQzYTYuMzU3IDYuMzU3IDAgMCAwIDAgMTIuNzE0eiIgbWFzaz0idXJsKCNiKSIvPgogICAgPC9nPgo8L3N2Zz4=') no-repeat;
     background-size: 30px 30px;
     display: block;
     width: 30px;
     height: 30px;
     -webkit-animation: main-module_rotate__yjo_3 2s linear infinite;
     animation: main-module_rotate__yjo_3 2s linear infinite;
     transform-origin: 50% 50%;
 }

 .main-module_gallery__1Ajgx .main-module_icon__2BB-1 {
     display: inline-block;
     font-family: 'aurora-icons';
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: inherit;
     text-decoration: none;
     position: relative;
     vertical-align: middle;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 .main-module_gallery__1Ajgx .main-module_icon__2BB-1::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 }

 .main-module_gallery__1Ajgx .main-module_icon-close__1bvaY::before {
     content: '\E90D';
 }

 .main-module_gallery__1Ajgx .main-module_icon-loader__2wviL::before {
     content: '\E906';
 }

 .main-module_gallery__1Ajgx .main-module_icon-link__rVNQ8::before {
     content: '\E973';
 }

 .main-module_gallery__1Ajgx .main-module_icon-success__1ltet::before {
     content: '\E93D';
 }

 .main-module_gallery__1Ajgx .main-module_icon-arrow__2lOOE {
     position: relative;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     margin-top: -60px;
     font-size: 19px;
     color: #ffffff;
 }

 .main-module_gallery__1Ajgx .main-module_icon-arrow__2lOOE::before {
     content: '\E920';
 }

 .main-module_gallery__1Ajgx .main-module_icon-arrow-container__2jvGl {
     height: 100%;
     width: 52px;
     position: fixed;
     top: 60px;
     background-color: rgba(36, 36, 36, 0.3);
     z-index: 2;
     cursor: pointer;
 }

 .main-module_gallery__1Ajgx .main-module_icon-arrow-container_previous__2y-vp {
     left: 0;
 }

 .main-module_gallery__1Ajgx .main-module_icon-arrow-container_next__1gy5p {
     right: 0;
 }

 .main-module_gallery__1Ajgx .main-module_icon-arrow-container__2jvGl:hover {
     background-color: rgba(36, 36, 36, 0.6);
 }

 .main-module_gallery__1Ajgx .main-module_icon-arrow_rotate-180__3tVhZ {
     transform: translate(-50%, -50%) rotate(180deg);
 }

 .main-module_gallery__1Ajgx .main-module_hide__2dq3c {
     display: none !important;
 }

 .main-module_gallery__1Ajgx .main-module_hide_mobile__37dVg {
     display: none;
 }

 .main-module_gallery__1Ajgx .main-module_zoom-in__2kYCX {
     cursor: zoom-in;
 }

 .main-module_gallery__1Ajgx .main-module_zoom-out__2DXiQ {
     cursor: zoom-out;
 }

 .main-module_gallery__1Ajgx .main-module_grabbing__2uCRI {
     cursor: -webkit-grabbing;
     cursor: grabbing;
 }

 .main-module_gallery_mobile__2NF8_ .main-module_gallery__images-container__y3z5v {
     background-color: #242424;
 }

 .main-module_gallery_mobile__2NF8_ .main-module_gallery__images_with-transition__1cAJq {
     transition: transform 0.3s cubic-bezier(0.25, 0.25, 0.25, 1) 0s;
 }

 @media screen and (min-width: 576px) {
     .main-module_gallery__1Ajgx .main-module_gallery-bar__image-description__15_99 {
         display: block;
     }

     .main-module_gallery__1Ajgx .main-module_gallery-bar__copy-link_confirmation__2Q0uN {
         min-width: 20rem;
     }
 }

 @media screen and (min-width: 576px) and (max-width: 820px) {
     .main-module_gallery-bar__2jTh6 {
         height: 80px;
     }

     .main-module_gallery-bar__copy-link_confirmation__2Q0uN {
         top: 100px;
     }

     .main-module_gallery__1Ajgx .main-module_icon-arrow-container__2jvGl {
         top: 80px;
     }
 }

 @media screen and (min-width: 820px) {
     .main-module_gallery__1Ajgx .main-module_hide_mobile__37dVg {
         display: block;
     }

     .main-module_gallery__1Ajgx .main-module_gallery-bar__image-close__3tyC0 {
         margin-left: 50px;
     }

     .main-module_gallery__1Ajgx .main-module_gallery-bar__copy-link__25EN6 .main-module_hide_mobile__37dVg {
         display: block;
     }

     .main-module_gallery__1Ajgx .main-module_gallery-bar__copy-link__25EN6 .main-module_hide_desktop__3M7Iv {
         display: none;
     }
 }

 @-webkit-keyframes main-module_rotate__yjo_3 {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 @keyframes main-module_rotate__yjo_3 {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }


 .cursor-pointer {
     cursor: pointer;
 }

 .lang_action_box {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 5px put the flag against the word. The flag is a picture of a thing, not
       a bullet — it needs the space of a word-gap to read as its own element. */
    gap: 9px;
 }
/* ===== Blog card links (keep original look, make clickable) ===== */
.blog-card-image a{display:block;width:100%;height:100%}
.blog-title a{color:inherit;text-decoration:none}
.blog-title a:hover{color:var(--primary-hover, #dda020)}
.blog-empty{grid-column:1 / -1;text-align:center;color:#777;font-size:16px;padding:60px 0}
.btn-page-nav[disabled]{opacity:.4;cursor:not-allowed}
a.btn-page-nav{text-decoration:none}

/* ===== Single blog page ===== */
.single-blog-wrapper{
    max-width:820px;
    margin:30px auto 60px auto;
    padding:0 20px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.single-blog-header{margin-bottom:30px}
.single-blog-meta{
    display:flex;align-items:center;flex-wrap:wrap;gap:16px;
    font-size:13px;color:var(--text-soft, #999999);margin-bottom:18px;
}
.single-blog-meta i{margin-right:5px}
.single-blog-cat{
    background:var(--primary-tint, #fbf5e9);color:var(--primary-ink, #845d15);
    padding:5px 14px;border-radius:999px;
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
}
.single-blog-title{
    font-size:40px;line-height:1.25;font-weight:700;color:var(--text-main, #1a1a1a);margin:0;
}
.single-blog-hero{
    width:100%;border-radius:24px;overflow:hidden;margin-bottom:40px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
}
.single-blog-hero img{width:100%;height:auto;display:block;max-height:460px;object-fit:cover}
.single-blog-content{
    font-size:17px;line-height:1.8;color:var(--text-heading, #333333);
}
.single-blog-content p{margin:0 0 22px}
.single-blog-content h2{font-size:28px;font-weight:700;color:var(--text-main, #1a1a1a);margin:38px 0 16px}
.single-blog-content h3{font-size:22px;font-weight:700;color:var(--text-main, #1a1a1a);margin:30px 0 14px}
.single-blog-content ul,.single-blog-content ol{margin:0 0 22px;padding-left:22px}
.single-blog-content li{margin-bottom:8px}
.single-blog-content img{max-width:100%;height:auto;border-radius:14px;margin:14px 0}
.single-blog-content a{color:var(--primary-hover, #dda020);text-decoration:underline}
.single-blog-content blockquote{
    border-left:4px solid var(--primary, #f2ad21);background:var(--primary-wash, #fbf9f4);
    margin:24px 0;padding:16px 22px;border-radius:0 12px 12px 0;
    font-style:italic;color:#555;
}
.single-blog-content table{border-collapse:collapse;width:100%;margin:0 0 22px}
.single-blog-content th,.single-blog-content td{border:1px solid var(--border-light, #eaeaea);padding:10px 12px;text-align:left}
.single-blog-back{margin-top:40px}

/* ===== Related blogs ===== */
.related-blogs{background:var(--primary-wash, #faf9f7);padding:60px 0;margin-top:20px}
.related-blogs-inner{max-width:1400px;margin:0 auto;padding:0 20px}
.related-blogs-title{
    font-size:28px;font-weight:700;color:var(--text-main, #1a1a1a);margin:0 0 30px;
}

@media (max-width:768px){
    .single-blog-title{font-size:30px}
    .single-blog-content{font-size:16px}
}

/* ===== Contact form feedback boxes ===== */
.form-success-box{background:#e7f8f1;border:1px solid #b7e6d3;color:var(--success-deep, #0b7a54);padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:15px}
.form-error-box{background:#fde8e8;border:1px solid #f5c2c2;color:#a11512;padding:14px 18px;border-radius:10px;margin-bottom:20px;font-size:15px}

/* ===== Product wholesale quantity pricing ===== */
.qty-pricing{margin:0 0 24px}
.qty-pricing__table{width:100%;border-collapse:collapse;max-width:520px;margin-top:14px}
.qty-pricing__table th,.qty-pricing__table td{border:1px solid var(--border-light, #eaeaea);padding:10px 16px;text-align:left;font-size:15px}
.qty-pricing__table th{background:var(--primary-wash, #faf9f7);font-weight:700;color:var(--text-main, #1a1a1a)}
.qty-pricing__table td{color:var(--text-heading, #333333)}
.product-desc-text{white-space:normal}

/* ===== SVG sprite icons (Feather) — from Aurora style.css =====
   Usage: <svg class="icon"><use href="/assets/icons/symbol-defs.svg#icon-user"></use></svg>
   Default is OUTLINE (stroke). Add .icon_filled for a SOLID icon. */
.icon {
  fill: transparent;
  stroke: var(--dark, #101010);
  width: 16px;
  height: 16px;
}
.icon_l {
  width: 20px;
  height: 20px;
}
.icon_xl {
  width: 24px;
  height: 24px;
}
.icon_xxl {
  width: 32px;
  height: 32px;
}
.icon_xxxl {
  width: 64px;
  height: 64px;
}
.icon_clickable {
  cursor: pointer;
}
.icon_filled {
  fill: var(--dark, #101010);
}
.icon_no-stroke {
  stroke: transparent;
}
.icon_secondary-color {
  stroke: #434343;
}
.icon_tertiary-color {
  stroke: #5d5d5d;
}
.icon_link {
  fill: transparent;
  stroke: #222;
}
.icon_success {
  fill: transparent;
  stroke: var(--primary-light, #f2b544);
}
.icon_success-filled {
  stroke: #fff;
  background-color: var(--primary-light, #f2b544);
  border-radius: 50%;
  vertical-align: middle;
  padding: 0.5rem;
  box-shadow: 0 0 0px 6px #e8fdf4;
}
.icon_error {
  fill: transparent;
  stroke: var(--dark, #101010);
}
.icon_error-filled {
  stroke: #fff;
  background-color: var(--dark, #101010);
  border-radius: 50%;
  vertical-align: middle;
  padding: 0.5rem;
  box-shadow: 0 0 0px 6px #fce9e8;
}
.icon_promo {
  fill: transparent;
  stroke: #fff;
  background-color: var(--danger, #cd1916);
  padding: 0.06666667rem;
  border-radius: 0.13333333rem;
  vertical-align: middle;
}

/* Labeled icon (icon + caption, e.g. header account/cart buttons) */
.labeled-icon {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  width: fit-content;
  text-decoration: none;
}
.labeled-icon_horizontal {
  flex-direction: row;
  column-gap: 0.5rem;
}
.labeled-icon__icon {
  width: 20px;
  height: 20px;
  fill: transparent;
  stroke: var(--dark, #101010);
}
.labeled-icon__icon_m {
  width: 16px;
  height: 16px;
}
.labeled-icon__signature {
  font-size: 0.73333333rem;
  line-height: 1.33333333rem;
  color: var(--dark, #101010);
  text-decoration: none;
}
.labeled-icon__signature_secondary {
  font-size: 0.86666667rem;
  line-height: 1.33333333rem;
}
.labeled-icon:hover {
  cursor: pointer;
}
.labeled-icon:hover .labeled-icon__signature {
  text-decoration: underline;
}

/* Header/navbar icons: inherit surrounding text color (so they recolor on
   hover just like the old Font Awesome icons) and sit inline with text. */
.site-header .icon,
.main-navbar .icon {
  stroke: currentColor;
  vertical-align: middle;
}

.menu-action-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    outline-offset: -1px
}

.menu-action-button_icon-spread {
    justify-content: space-between
}

.menu-action-button_close {
    padding: 1.86666667rem;
    cursor: pointer
}

.menu-action-button_close .menu-action-button__icon {
    color: var(--dark, #101010);
    stroke: var(--dark, #101010)
}

.menu-action-button__icon {
    fill: transparent;
    width: 16px;
    height: 16px;
    color: var(--dark, #101010);
    stroke: var(--dark, #101010)
}

.menu-action-button__icon_l {
    width: 20px;
    height: 20px
}

.menu-action-button__icon_xl {
    width: 24px;
    height: 24px
}

.menu-action-button__icon_xxl {
    width: 32px;
    height: 32px
}

.menu-action-button__icon_xxxl {
    width: 64px;
    height: 64px
}

.menu-action-button__icon_clickable {
    cursor: pointer
}

.menu-action-button__icon_filled {
    fill: var(--dark, #101010)
}

.menu-action-button__icon_no-stroke {
    stroke: transparent
}

.menu-action-button__icon_secondary-color {
    stroke: #434343
}

.menu-action-button__icon_tertiary-color {
    stroke: #5d5d5d
}

.menu-action-button__icon_link {
    fill: transparent;
    stroke: #222
}

.menu-action-button__icon_success {
    fill: transparent;
    stroke: var(--primary-light, #f2b544)
}

.menu-action-button__icon_success-filled {
    stroke: #fff;
    background-color: var(--primary-light, #f2b544);
    border-radius: 50%;
    vertical-align: middle;
    padding: 0.5rem;
    box-shadow: 0 0 0px 6px #e8fdf4
}

.menu-action-button__icon_error {
    fill: transparent;
    stroke: var(--dark, #101010)
}

.menu-action-button__icon_error-filled {
    stroke: #fff;
    background-color: var(--dark, #101010);
    border-radius: 50%;
    vertical-align: middle;
    padding: 0.5rem;
    box-shadow: 0 0 0px 6px #fce9e8
}

.menu-action-button__icon_promo {
    fill: transparent;
    stroke: #fff;
    background-color: var(--danger, #cd1916);
    padding: .06666667rem;
    border-radius: .13333333rem;
    vertical-align: middle
}

.menu-action-button__icon_left {
    margin-right: .53333333rem
}

.menu-action-button__icon_right {
    margin-left: .26666667rem
}


@keyframes jiggle {
  0%,
  9%,
  18% {
    transform: translateY(0);
  }
  2% {
    transform: translateY(-10px);
  }
  3% {
    transform: translateY(-3px);
  }
  5% {
    transform: translateY(-8px);
  }
  7% {
    transform: translateY(-2px);
  }
  11% {
    transform: translateY(-10px);
  }
  12% {
    transform: translateY(-3px);
  }
  14% {
    transform: translateY(-8px);
  }
  16% {
    transform: translateY(-2px);
  }
}

/* --- Top promo announcement bar (Splide: arrows only, no pagination) --- */
.promo-bar {
    background: #0a0a0a;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Root is padded so the centred text never slides under the edge arrows. */
.promo-splide {
    position: relative;
    padding: 0 52px;
}

.promo-splide .splide__track {
    overflow: hidden;
}

.promo-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    min-height: 44px;
    padding: 6px 12px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--border-light, #eaeaea);
}

.promo-slide .promo-ico { font-size: 15px; line-height: 1; }
.promo-slide .promo-text strong { color: #fff; font-weight: 700; }

.promo-slide .promo-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.promo-slide .promo-btn:hover {
    background: var(--primary, #f2ad21);
    border-color: var(--primary, #f2ad21);
    color: var(--text-main, #1a1a1a);
}

/* Flat, full-height arrows pinned to the bar edges. */
.promo-splide .splide__pagination { display: none !important; }

.promo-splide .splide__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    opacity: 1;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    z-index: 2;
}
.promo-splide .splide__arrow:hover { background: rgba(255, 255, 255, 0.07); }
.promo-splide .splide__arrow:disabled { opacity: 0.35; cursor: default; }
.promo-splide .splide__arrow--prev { left: 0; border-right: 1px solid rgba(255, 255, 255, 0.12); }
.promo-splide .splide__arrow--next { right: 0; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.promo-splide .splide__arrow svg {
    width: 15px;
    height: 15px;
    fill: #fff;
}

@media (max-width: 600px) {
    .promo-splide { padding: 0 44px; }
    .promo-slide { font-size: 12px; gap: 10px; }
    .promo-splide .splide__arrow { width: 36px; }
}
/* --- Favourited (active) heart on product tiles --- */
.wishlist-btn.is-active {
    border-color: var(--primary, #f2ad21);
}
.wishlist-btn.is-active .wishlist-icon {
    fill: var(--primary, #f2ad21);
    stroke: var(--primary, #f2ad21);
}

/* --- Shared "notify me when back in stock" modal --- */
.notify-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.notify-modal.open { display: flex; }
.notify-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.notify-modal__dialog {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    padding: 32px 28px 28px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: notify-pop 0.22s ease-out;
}
@keyframes notify-pop {
    from { transform: translateY(12px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}
.notify-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #9aa3ab;
    cursor: pointer;
}
.notify-modal__close:hover { color: var(--text-main, #1a1a1a); }
.notify-modal__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-tint-strong, #fef3d7);
    color: var(--primary, #f2ad21);
    font-size: 22px;
}
.notify-modal__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-main, #1a1a1a);
    margin-bottom: 8px;
}
.notify-modal__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted, #666666);
    margin-bottom: 20px;
}
.notify-modal__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.notify-modal__input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    border: 1px solid #e2e4e9;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s ease;
}
.notify-modal__input:focus { border-color: var(--primary, #f2ad21); }
.notify-modal__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.notify-modal__btn--primary { background: var(--primary, #f2ad21); color: var(--on-primary, #1a1a1a); }
.notify-modal__btn--primary:hover { background: var(--primary-hover, #dda020); }
.notify-modal__btn:disabled { opacity: 0.6; cursor: default; }
.notify-modal__success {
    font-size: 14px;
    font-weight: 600;
    color: var(--success-bright, #10b981);
    margin: 8px 0 0;
}

/* --- Shared "added to cart" confirmation popup (.cam) --- */
.cam { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; }
.cam.open { display: flex; }
.cam__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.cam__dialog { position: relative; background: #fff; width: 100%; max-width: 460px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); animation: notify-pop 0.22s ease-out; overflow: hidden;
    /* Height follows the content until the content would not fit, and then
       stops at the screen. Without the cap the dialog simply grew past the
       viewport — a centred overlay clips equally top and bottom, so a long
       product name pushed "Go to cart" off the bottom of the screen with no way
       to scroll to it. Flex column so the head and foot hold their place and
       only the middle scrolls. */
    display: flex;
    flex-direction: column;
    max-height: 100%;
}
/* Head and foot keep their size; the body is what gives. */
.cam__head, .cam__foot { flex: 0 0 auto; }
.cam__body {
    flex: 1 1 auto;
    min-height: 0;              /* a flex item will not shrink below its content without this */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cam__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--border-light, #eaeaea); }
.cam__head-title { font-size: 16px; font-weight: 700; color: var(--success-bright, #10b981); }
.cam__head-title i { margin-right: 6px; }
.cam__close { background: none; border: none; font-size: 18px; color: #9aa3ab; cursor: pointer; }
.cam__close:hover { color: var(--text-main, #1a1a1a); }
.cam__body { padding: 22px; }
.cam__product { display: flex; gap: 20px; align-items: flex-start; }
.cam__thumb { position: relative; width: 96px; height: 96px; flex-shrink: 0; border: 1px solid var(--border-light, #eaeaea); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.cam__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 10px; }
.cam__qty-badge { position: absolute; top: -8px; left: -8px; background: var(--primary, #f2ad21); color: var(--on-primary, #1a1a1a); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.cam__info { flex: 1; min-width: 0; }
.cam__name { font-size: 16px; font-weight: 700; margin: 0 0 10px; line-height: 1.35; }
.cam__price { font-size: 16px; margin-bottom: 14px; }
.cam__price strong { font-weight: 700; }
.cam__muted { color: var(--text-muted, #666666); font-size: 13px; font-weight: 400; }
.cam__basket-qty { font-size: 13px; color: var(--text-muted, #666666); }
.cam__divider { border: none; border-top: 1px dashed var(--border-light, #eaeaea); margin: 20px 0; }
.cam__totals { text-align: right; font-size: 15px; line-height: 1.9; }
.cam__totals strong { font-weight: 700; }
.cam__foot { display: flex; gap: 10px; padding: 0 22px 22px; }
.cam__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
.cam__btn--primary { background: var(--primary, #f2ad21); color: var(--on-primary, #1a1a1a); }
.cam__btn--primary:hover { background: var(--primary-hover, #dda020); }
.cam__btn--ghost { background: #fff; color: var(--text-main, #1a1a1a); border-color: var(--primary, #f2ad21); }
.cam__btn--ghost:hover { background: var(--primary-tint, #fff7e8); }

/* Overflowing content only: assets/../includes/cart_added_modal.php measures the
   dialog on open and sets .cam--full when the content wants more height than the
   screen has. The popup then stops being a card and becomes the screen — edge to
   edge, no radius, no outer gutter — so every pixel goes to the content instead
   of to the frame around it. A popup that fits is left exactly as it was. */
/* While a full-height side panel (cart, sign-in, sign-up) is open, the fixed
   mobile nav bar is not part of the conversation. The panel already paints over
   it, and the class removes any chance of the bar still taking a tap meant for
   the bottom of the panel. Set by assets/js/script.js when a panel opens. */
body.panel-open .mnav { display: none; }

.cam--full { padding: 0; }
.cam--full .cam__dialog {
    max-width: none;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
}
.cam--full .cam__head { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
.cam--full .cam__foot { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 520px) {
    .cam__product { flex-direction: column; align-items: center; text-align: center; }
    .cam__foot { flex-direction: column; }
    .cam__totals { text-align: center; }
}


/* --- Root Variables ---
   Aliases only: the values come from the palette in admin > Appearance, which
   redeclares each of these in a :root:root block. The fallbacks are what the
   timeline used before the palette existed. */
:root {
    --tl-primary: var(--primary, #f2ad21);          /* Yellow Icon Color */
    --tl-text-dark: var(--secondary, #1c1e21);      /* Main Title Color */
    --tl-text-muted: var(--text-muted, #6a6a6a);    /* Description Color */
    --tl-bg-highlight: #e8ebf0;                     /* Animated Gray Background */
    --tl-border: var(--border-light, #eaeaea);      /* Card Border */
    --tl-plus-bg: var(--secondary, #1c1e21);        /* Plus Icon Background */
}

.timeline-section {
    max-width: 1400px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.timeline-main-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--tl-text-dark);
    margin-bottom: 50px;
}

/* --- Container & Gap Logic --- */
.timeline-container {
    display: flex;
    align-items: stretch;
    width: 100%;
    /* Note: The 12px gap is handled by the .timeline-connector width */
}

/* --- Cards --- */
.timeline-item {
    flex: 1;
    position: relative;
    background: #ffffff;
    border: 1px solid var(--tl-border);
    border-radius: 12px;
    overflow: hidden; /* Clips the sliding background */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.timeline-content {
    position: relative;
    z-index: 1; /* Keeps content above the sliding background */
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.timeline-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--tl-bg-highlight);
    z-index: 0;
    transform: translateX(calc(-100% - 80px)); /* Initial hidden state */
}

/* --- Typography & Icons (Based on your provided CSS) --- */
.timeline-icon {
    font-size: 28px;
    color: var(--tl-primary);
    margin-bottom: 25px;
    display: block;
}

.timeline-text {
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 0.2px;
    color: var(--tl-text-muted);
}

.timeline-text p {
    margin: 0;
}

.timeline-text p.timeline-title {
    font-weight: 700;
    color: var(--tl-text-dark);
    font-size: 17px;
    padding: 0 0 8px;
    line-height: 1.3;
}

/* --- Connectors (Acts as the 12px Gap) --- */
.timeline-connector {
    width: 12px; /* Creates exactly 12px gap between cards */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.timeline-dot {
    width: 4px;
    height: 4px;
    background-color: var(--border-strong, #dcdcdc);
    border-radius: 50%;
}

.timeline-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    background: var(--tl-plus-bg);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    z-index: 10;
    /* Default state mapped to your animation requirement */
    transform: translate(-50%, -50%) scale(0);
}

/* ========================================================
   EXACT ANIMATION MAPPING (18s Loop)
   ======================================================== */

/* Targeting Cards (nth-child 1, 3, 5, 7, 9, 11) */
.timeline-item:nth-child(1) .timeline-card-bg { animation: anim-fill-1 18s infinite ease-in-out; }
.timeline-item:nth-child(3) .timeline-card-bg { animation: anim-fill-2 18s infinite ease-in-out; }
.timeline-item:nth-child(5) .timeline-card-bg { animation: anim-fill-3 18s infinite ease-in-out; }
.timeline-item:nth-child(7) .timeline-card-bg { animation: anim-fill-4 18s infinite ease-in-out; }
.timeline-item:nth-child(9) .timeline-card-bg { animation: anim-fill-5 18s infinite ease-in-out; }
.timeline-item:nth-child(11) .timeline-card-bg { animation: anim-fill-6 18s infinite ease-in-out; }

/* Targeting Connectors (nth-child 2, 4, 6, 8, 10) */
.timeline-connector:nth-child(2) .timeline-plus { animation: anim-plus-1 18s infinite ease-in-out; }
.timeline-connector:nth-child(4) .timeline-plus { animation: anim-plus-2 18s infinite ease-in-out; }
.timeline-connector:nth-child(6) .timeline-plus { animation: anim-plus-3 18s infinite ease-in-out; }
.timeline-connector:nth-child(8) .timeline-plus { animation: anim-plus-4 18s infinite ease-in-out; }
.timeline-connector:nth-child(10) .timeline-plus { animation: anim-plus-5 18s infinite ease-in-out; }

/* Background Fill Keyframes */
@keyframes anim-fill-1 {
    0% { transform: translateX(calc(-100% - 80px)); }
    3%, 14% { transform: translateX(0); }
    17%, 100% { transform: translateX(calc(100% + 80px)); }
}
@keyframes anim-fill-2 {
    0%, 14% { transform: translateX(calc(-100% - 80px)); }
    20%, 30% { transform: translateX(0); }
    34%, 100% { transform: translateX(calc(100% + 80px)); }
}
@keyframes anim-fill-3 {
    0%, 30% { transform: translateX(calc(-100% - 80px)); }
    37%, 47% { transform: translateX(0); }
    51%, 100% { transform: translateX(calc(100% + 80px)); }
}
@keyframes anim-fill-4 {
    0%, 47% { transform: translateX(calc(-100% - 80px)); }
    54%, 64% { transform: translateX(0); }
    68%, 100% { transform: translateX(calc(100% + 80px)); }
}
@keyframes anim-fill-5 {
    0%, 64% { transform: translateX(calc(-100% - 80px)); }
    71%, 81% { transform: translateX(0); }
    85%, 100% { transform: translateX(calc(100% + 80px)); }
}
@keyframes anim-fill-6 {
    0%, 81% { transform: translateX(calc(-100% - 80px)); }
    88%, 97% { transform: translateX(0); }
    100% { transform: translateX(calc(100% + 80px)); }
}

/* Plus Icon Keyframes */
@keyframes anim-plus-1 {
    0%, 14% { transform: translate(-50%, -50%) scale(0); }
    17%, 90% { transform: translate(-50%, -50%) scale(1); }
    95%, 100% { transform: translate(-50%, -50%) scale(0); }
}
@keyframes anim-plus-2 {
    0%, 30% { transform: translate(-50%, -50%) scale(0); }
    34%, 90% { transform: translate(-50%, -50%) scale(1); }
    95%, 100% { transform: translate(-50%, -50%) scale(0); }
}
@keyframes anim-plus-3 {
    0%, 47% { transform: translate(-50%, -50%) scale(0); }
    51%, 90% { transform: translate(-50%, -50%) scale(1); }
    95%, 100% { transform: translate(-50%, -50%) scale(0); }
}
@keyframes anim-plus-4 {
    0%, 64% { transform: translate(-50%, -50%) scale(0); }
    68%, 90% { transform: translate(-50%, -50%) scale(1); }
    95%, 100% { transform: translate(-50%, -50%) scale(0); }
}
@keyframes anim-plus-5 {
    0%, 81% { transform: translate(-50%, -50%) scale(0); }
    85%, 90% { transform: translate(-50%, -50%) scale(1); }
    95%, 100% { transform: translate(-50%, -50%) scale(0); }
}

/* Responsive handling to allow scrolling on small screens */
@media (max-width: 1100px) {
    .timeline-container {
        overflow-x: auto;
        padding-bottom: 20px;
    }
    .timeline-item {
        min-width: 250px; /* Prevents cards from squishing on mobile */
    }
}


/* Home Newsletter Section Style  */
/* --- Newsletter Variables (Ensure these are in your :root if not already) --- */
:root {
    --nl-primary: var(--primary, #f2ad21);
    --nl-primary-hover: var(--primary-hover, #dda020);
    --nl-bg-dark: var(--dark, #111315);
    --nl-grid-line: rgba(255, 255, 255, 0.04);
}

/* --- Newsletter Section Layout --- */
.newsletter-section {
    /* Dark background with subtle solar-panel grid pattern */
    background-color: var(--nl-bg-dark);
    background-image: 
        linear-gradient(var(--nl-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--nl-grid-line) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center center;
    
    padding: 80px 20px;
    text-align: center;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.newsletter-container {
    max-width: 700px;
    margin: 0 auto;
}

/* --- Typography --- */
.newsletter-section h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.newsletter-subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: #d1d1d1;
    margin-bottom: 40px;
    padding: 0 10px;
}

.newsletter-subtitle strong {
    color: #ffffff;
    font-weight: 700;
}

/* --- Form Input Area --- */
.newsletter-form {
    display: flex;
    align-items: center;
    border: 2px solid var(--nl-primary);
    border-radius: 50px;
    padding: 6px;
    background-color: transparent;
    max-width: 600px;
    margin: 0 auto 25px auto;
    transition: box-shadow 0.3s ease;
}

.newsletter-form:focus-within {
    box-shadow: 0 0 15px var(--primary-a20, rgba(242, 173, 33, 0.2));
}

.newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    padding: 15px 25px;
    font-size: 15px;
    outline: none;
    width: 100%;
}

.newsletter-form input::placeholder {
    color: #888888;
}

.newsletter-form button {
    background-color: var(--nl-primary);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    width: 48px;
    height: 40px; /* Matched to input height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.newsletter-form button:hover {
    background-color: var(--nl-primary-hover);
}

.newsletter-form button:active {
    transform: scale(0.95);
}

/* --- Legal Footer Text --- */
.newsletter-legal {
    font-size: 12px;
    color: #888888;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto;
}

.newsletter-legal a {
    color: #cccccc;
    text-decoration: underline;
    transition: color 0.2s;
    white-space: nowrap;
}

.newsletter-legal a:hover {
    color: var(--nl-primary);
}

.newsletter-legal i {
    font-size: 10px;
    margin-left: 3px;
    text-decoration: none;
    display: inline-block;
}

/* --- Responsive Adjustments --- */
@media (max-width: 576px) {
    .newsletter-section {
        padding: 60px 20px;
    }
    .newsletter-section h2 {
        font-size: 22px;
    }
    .newsletter-subtitle {
        font-size: 14px;
    }
    .newsletter-form {
        padding: 4px;
    }
    .newsletter-form input {
        padding: 12px 20px;
    }
    .newsletter-legal {
        font-size: 11px;
    }
}


/* Logo Slider  */
/* --- Logo Slider Section --- */
.logo-slider-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 64px;
}

#partner-logos-slider {
    position: relative;
    padding-bottom: 25px; /* Creates space for the button below the track */
}

/* Slide Alignment */
#partner-logos-slider .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

#partner-logos-slider .splide__slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Play/Pause Button */
.logo-slider-toggle {
    position: absolute;
    bottom: -10px;
    right: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #e8ebf0; /* Light gray from screenshot */
    border: none;
    color: var(--text-main, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.logo-slider-toggle:hover {
    background-color: #d0d4da;
}

.logo-slider-toggle:active {
    transform: scale(0.95);
}

.logo-slider-toggle i {
    font-size: 14px;
}
/* ==========================================================================
   Cart page (cart.php) — same layout as the basket screens: products list on
   the left, login + summary on the right, bestsellers slider underneath.
   ========================================================================== */
.cart-page {
    max-width: 1300px;
    margin: 0 auto;
    padding: 34px 20px 0;
}

.cart-page__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-main, #1a1a1a);
    margin-bottom: 26px;
}

.cart-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
}

.cart-card {
    background: #fff;
    border: 1px solid var(--border-light, #eaeaea);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.cart-card--flush { padding: 0; overflow: hidden; }

.cart-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.cart-card__title {
    font-size: 21px;
    font-weight: 700;
    color: var(--text-main, #1a1a1a);
}

.cart-card__note {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}

.cart-card__divider {
    border: none;
    border-top: 1px solid var(--border-light, #eaeaea);
    margin: 18px 0 0;
}

/* --- Product lines --- */
.cart-line {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 22px;
    padding: 24px 0;
    border-bottom: 1px solid var(--bg-muted, #f0f0f0);
}

.cart-line:last-child { border-bottom: none; }

.cart-line__thumb {
    width: 92px;
    height: 92px;
    border: 1px solid var(--border-light, #eaeaea);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.cart-line__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cart-line__name a {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-main, #1a1a1a);
    text-decoration: none;
}

.cart-line__name a:hover { color: var(--primary, #f2ad21); }

.cart-line__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 14px 0 12px;
}

.cart-line__stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}

.cart-line__stepper .qty-btn {
    width: 38px;
    height: 38px;
    background: #fff;
    border: none;
    color: #555;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.cart-line__stepper .qty-btn:hover { background: var(--primary-tint, #fdf6e7); color: var(--text-main, #1a1a1a); }
.cart-line__stepper .js-line-minus { border-right: 1px solid #ddd; }
.cart-line__stepper .js-line-plus { border-left: 1px solid #ddd; }

.cart-line__qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    font-size: 13px;
    color: var(--text-heading, #333333);
}

.cart-line__qty input {
    width: 30px;
    border: none;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-heading, #333333);
    pointer-events: none;
}

.cart-line__remove {
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    color: #4a5c6a;
    text-decoration: underline;
    cursor: pointer;
}

.cart-line__remove:hover { color: var(--danger, #d12229); }

.cart-line__shipping {
    font-size: 13px;
    color: #555;
}

.cart-line__price {
    display: flex;
    align-items: baseline;
    align-content: flex-start;   /* keep both lines together when they wrap */
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    text-align: right;
    max-width: 230px;
}

.cart-line__price-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main, #1a1a1a);
}

.cart-line__vat {
    font-size: 12px;
    color: #777;
}

/* --- Empty basket --- */
.cart-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 46px 0 34px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-main, #1a1a1a);
}

/* The sprite basket is a stroke-only outline — filling it turns the glyph into a
   solid blob, so keep the fill transparent and colour the stroke instead. */
.cart-page__empty .icon {
    width: 42px;
    height: 42px;
    fill: transparent;
    stroke: currentColor;
}

/* --- Save cart + loyalty --- */
.cart-page__save {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 26px;
}

.cart-page__save .btn-outline { padding: 10px 26px; }

.cart-loyalty { padding: 0 4px 10px; }

.cart-loyalty h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main, #1a1a1a);
    margin-bottom: 6px;
}

.cart-loyalty p {
    font-size: 13px;
    color: #4a5c6a;
    line-height: 1.6;
}

.cart-loyalty a { color: #4a5c6a; }

/* --- Right column --- */
.cart-side__login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 22px 24px;
}

.btn-primary--inline {
    display: inline-flex;
    padding: 10px 22px;
    border-radius: 25px;
    white-space: nowrap;
}

.cart-side__note {
    background: var(--bg-soft, #f7f7f7);
    padding: 16px 24px;
    font-size: 13px;
    color: #555;
}

.cart-summary-box {
    background: var(--bg-soft, #f7f7f7);
    border-radius: 12px;
    padding: 20px;
    margin-top: 18px;
}

.cart-summary-box .cart-summary { margin-bottom: 12px; }
.cart-summary-box .shipping-notice { margin-bottom: 16px; }
.cart-summary-box .btn-primary { text-decoration: none; }

@media (max-width: 992px) {
    .cart-page__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .cart-page__title { font-size: 26px; }
    .cart-card { padding: 18px; }
    .cart-line {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 14px;
    }
    .cart-line__thumb { width: 72px; height: 72px; }
    .cart-line__price {
        grid-column: 1 / -1;
        justify-content: flex-start;
        max-width: none;
    }
}

/* --- Add-to-cart button: spinner while the request is in flight --- */
.btn-product.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.btn-product.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(26, 26, 26, 0.25);
    border-top-color: var(--text-main, #1a1a1a);
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Checkout page (checkout-new.php)
   ========================================================================== */
.co {
    background: #f3f2f4;
    padding: 24px 20px 60px;
}

.co__inner {
    max-width: 1300px;
    margin: 0 auto;
}

.co__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main, #1a1a1a);
    text-decoration: none;
    margin-bottom: 18px;
}

.co__back:hover { color: var(--primary, #f2ad21); }
.co__back .icon { width: 16px; height: 16px; fill: transparent; stroke: currentColor; }

/* Page loader — replaced by the real content on window load */
.co__loader {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 420px;
    color: var(--text-muted, #666666);
    font-size: 14px;
}

.co.is-loading .co__loader { display: flex; }
.co.is-loading .co__grid { display: none; }

.co__spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #e3e1e6;
    border-top-color: var(--primary, #f2ad21);
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}

.co__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 24px;
    align-items: start;
}

/* --- Cards --- */
.co-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.co-card--flush { padding: 0; overflow: hidden; }

.co-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main, #1a1a1a);
}

.co-card__note {
    font-size: 13px;
    color: #777;
    margin-top: 4px;
}

.co-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.co-card > .co-card__title { margin-bottom: 18px; }

/* --- Consumer / Business switch --- */
.co-seg {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
}

.co-seg__item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.co-seg__item span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 10px 18px;
    border: 1px solid #dcdfe4;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main, #1a1a1a);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.co-seg__item span:hover { border-color: var(--text-main, #1a1a1a); }

.co-seg__item input:checked + span {
    background: var(--text-main, #1a1a1a);
    border-color: var(--text-main, #1a1a1a);
    color: #fff;
}

.co-seg__item input:checked + span::after {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: -7px;
    right: -7px;
    font-size: 14px;
    color: var(--text-main, #1a1a1a);
    background: #fff;
    border-radius: 50%;
    line-height: 1;
}

.co-seg__item input:focus-visible + span { outline: 2px solid var(--primary, #f2ad21); outline-offset: 2px; }

/* --- Fields --- */
.co-field { margin-bottom: 18px; }

.co-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #33383f;
    margin-bottom: 6px;
}

.co-req { color: var(--danger, #d12229); margin-right: 3px; }

.co-input {
    width: 100%;
    border: 1px solid #d8dce3;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-main, #1a1a1a);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.co-input:focus {
    outline: none;
    border-color: var(--primary, #f2ad21);
    box-shadow: 0 0 0 3px var(--primary-a18, rgba(242, 173, 33, 0.18));
}

.co-textarea { resize: vertical; min-height: 96px; }

.co-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.co-cols--zip { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

.co-error {
    display: none;
    font-size: 12.5px;
    color: var(--danger, #d12229);
    margin-top: 6px;
}

.co-error:not([hidden]) { display: block; }
.is-error .co-input { border-color: var(--danger, #d12229); }
.is-error .co-error { display: block; }

/* --- Checkboxes --- */
.co-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.55;
    color: #33383f;
    cursor: pointer;
}

.co-check input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--primary, #f2ad21);
    cursor: pointer;
}

.co-check small {
    display: block;
    color: #8a9099;
    font-size: 12.5px;
}

.co-check a { color: #33383f; }

/* --- Country select --- */
.co-select { position: relative; }

.co-select__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--primary, #f2ad21);
    border-radius: 8px;
    background: #fff;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-main, #1a1a1a);
    cursor: pointer;
}

.co-select__caret { width: 14px; height: 14px; fill: #6b7280; }

.co-select__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e3e1e6;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    padding: 10px;
}

.co-select__search {
    width: 100%;
    border: 1px solid #d8dce3;
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 8px;
}

.co-select__search:focus { outline: none; border-color: var(--primary, #f2ad21); }

.co-select__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.co-select__opt {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-main, #1a1a1a);
    cursor: pointer;
}

.co-select__opt:hover { background: var(--primary-tint, #faf3e3); }

.co-select__opt.is-selected {
    background: var(--primary-tint, #fdf6e7);
    font-weight: 600;
}

/* --- Delivery --- */
.co-country {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin-bottom: 16px;
}

.co-country__flag { font-size: 18px; line-height: 1; }

.co-delivery-fields { margin-top: 4px; }

/* --- Payment --- */
.co-pay {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--primary, #f2ad21);
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--primary-wash, #fffdf8);
}

.co-pay__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.co-pay__opt input { width: 16px; height: 16px; accent-color: var(--primary, #f2ad21); }

.co-pay__name { font-size: 14px; font-weight: 500; color: var(--text-main, #1a1a1a); }

.co-pay__info {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-darker, #b8860b);
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}

.co-pay__info:hover, .co-pay__info.is-open { color: var(--primary-ink, #8a6508); }

.co-pay__free {
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-hover, #d9902a);
}

.co-pay__secure {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #8a9099;
    margin-top: 14px;
}

.co-bank {
    margin-top: 12px;
    border: 1px solid #e3e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    background: #fbfcfe;
}

.co-bank__head { display: flex; gap: 12px; align-items: flex-start; }

.co-bank__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primary-tint-strong, #fbf1dc);
    color: var(--primary-darker, #b8860b);
    display: flex;
    align-items: center;
    justify-content: center;
}

.co-bank__head strong { font-size: 15px; color: #1f2733; }
.co-bank__head p { margin-top: 4px; font-size: 13px; line-height: 1.55; color: #5b6472; }

.co-bank__grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.co-bank__grid dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a93a5;
}

.co-bank__grid dd {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f2733;
    word-break: break-word;
}

.co-bank__grid dd.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.co-bank__note {
    margin-top: 14px;
    font-size: 12.5px;
    color: #6b7280;
    background: #fff;
    border: 1px dashed #d7deea;
    border-radius: 8px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.co-bank__note i { color: #16a34a; }

/* --- Side: login --- */
.co-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 20px 24px;
}

.co-login__note {
    background: var(--bg-soft, #f7f7f7);
    padding: 14px 24px;
    font-size: 13px;
    color: #555;
}

/* --- Side: product list --- */
.co-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    color: var(--text-main, #1a1a1a);
    cursor: pointer;
    white-space: nowrap;
}

.co-edit:hover { color: var(--primary, #f2ad21); }

.co-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--bg-muted, #f0f0f0);
}

.co-item__thumb {
    width: 64px;
    height: 64px;
    border: 1px solid var(--border-light, #eaeaea);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.co-item__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

.co-item__name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-main, #1a1a1a);
    text-decoration: none;
}

.co-item__name:hover { color: var(--primary, #f2ad21); }

.co-item__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.co-item__qty { font-size: 12.5px; color: #555; }
.co-item__qty-edit { display: none; align-items: center; gap: 12px; }
.co-items.is-editing .co-item__qty-ro { display: none; }
.co-items.is-editing .co-item__qty-edit { display: inline-flex; }

.co-stepper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 2px 6px;
}

.co-stepper__btn {
    background: none;
    border: none;
    color: #555;
    font-size: 10px;
    padding: 4px 5px;
    cursor: pointer;
}

.co-stepper__btn:hover { color: var(--text-main, #1a1a1a); }
.co-stepper__val { font-size: 13px; font-weight: 600; }
.co-stepper__unit { font-size: 12px; color: var(--text-muted, #666666); }

.co-item__remove {
    background: none;
    border: none;
    padding: 0;
    font-size: 12.5px;
    color: #4a5c6a;
    text-decoration: underline;
    cursor: pointer;
}

.co-item__remove:hover { color: var(--danger, #d12229); }

.co-item__price { text-align: right; white-space: nowrap; }
.co-item__line { font-size: 14px; font-weight: 700; color: var(--text-main, #1a1a1a); }
.co-item__vat { font-size: 11.5px; color: #777; margin-left: 4px; }
.co-item__unit { display: block; font-size: 11.5px; color: var(--text-soft, #999999); margin-top: 2px; }

/* Same empty state as the basket page (.cart-page__empty). */
.co-items__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 46px 0 34px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-main, #1a1a1a);
    text-align: center;
}

/* The sprite basket is a stroke-only outline — filling it turns the glyph into a
   solid blob, so keep the fill transparent and colour the stroke instead. */
.co-items__empty .icon {
    width: 42px;
    height: 42px;
    fill: transparent;
    stroke: currentColor;
}

.co__save {
    display: flex;
    justify-content: flex-end;
    margin: -6px 0 20px;
}

.co__save .btn-outline { padding: 9px 22px; }

/* --- Side: summary --- */
/* The global reset strips the card title's margin, so the gap above the coupon
   box is set here — and matched below it, same as the cart page. */
.co-coupon { margin: 20px 0; }

.co-coupon__row { display: flex; gap: 10px; }
.co-coupon__row .btn-primary--inline { flex: 0 0 auto; }

.co-sum { border-top: 1px solid var(--bg-muted, #f0f0f0); padding-top: 16px; }

.co-sum__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: #33383f;
    margin-bottom: 12px;
}

.co-sum__row small { display: block; font-size: 12px; color: #8a9099; }
.co-sum__free { color: var(--success-bright, #10b981); font-weight: 600; }

.co-total {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--bg-muted, #f0f0f0);
    padding-top: 16px;
    margin-bottom: 18px;
}

.co-total__label { font-size: 15px; font-weight: 500; }
.co-total__values { text-align: right; }
.co-total__values strong { display: block; font-size: 18px; font-weight: 700; }
.co-total__values small { font-size: 12.5px; color: #8a9099; }

.co-notice {
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: #8a1c16;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 14px;
}

.co-notice[hidden] { display: none; }

.co-pay-btn { width: 100%; }
.co-pay-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.co-pay-btn.is-loading {
    color: transparent;
    position: relative;
    pointer-events: none;
}

.co-pay-btn.is-loading i { visibility: hidden; }

.co-pay-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(26, 26, 26, 0.25);
    border-top-color: var(--text-main, #1a1a1a);
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

.co-loyalty {
    margin-top: 14px;
    font-size: 12.5px;
    color: #777;
    text-align: center;
}

@media (max-width: 1100px) {
    .co__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .co-cols, .co-cols--zip, .co-bank__grid { grid-template-columns: 1fr; }
    .co-card { padding: 18px; }
    .co-item__row { flex-direction: column; align-items: flex-start; }
    .co-item__price { text-align: left; }
}

/* ============================================================
   HEADER LIVE SEARCH  (includes/v2/header.php)
   Dropdown under the search box: term suggestions + matching
   products, fetched from actions/search_suggest.php. The box
   itself is narrow (and narrower still in the sticky navbar),
   so the panel sizes itself rather than following the input.
   ============================================================ */
.search-suggest {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 460px;
    max-width: calc(100vw - 32px);
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .14);
    padding: 16px;
    z-index: 10020;
    text-align: left;
    cursor: default;
}
/* Flipped when the box sits too close to the right edge. */
.search-suggest.ss-right { left: auto; right: 0; }

.search-suggest::-webkit-scrollbar { width: 10px; }
.search-suggest::-webkit-scrollbar-thumb { background: #c9ccd1; border-radius: 6px; border: 3px solid #fff; }

/* --- loading strip --- */
.ss-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 0 14px;
    font-size: 14px;
    color: #667085;
}
.search-suggest.is-loading .ss-loading { display: flex; }
.ss-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--primary, #f2ad21);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ss-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }

/* --- sections --- */
.ss-section + .ss-section { margin-top: 18px; }
.ss-head {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #667085;
    margin-bottom: 10px;
}
.ss-sub {
    font-size: 13px;
    font-style: italic;
    color: #98a2b3;
    margin: -4px 0 10px;
}

/* --- term suggestions --- */
.ss-term {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    color: #344054;
    text-align: left;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
}
.ss-term b { font-weight: 700; color: #101828; }
.ss-term:hover,
.ss-term.is-active { background: #f4f6f8; color: #344054; text-decoration: none; }

/* --- product rows --- */
.ss-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    transition: border-color .18s ease, background-color .18s ease;
}
.ss-item:last-child { margin-bottom: 0; }
.ss-item:hover,
.ss-item.is-active {
    border-color: var(--primary, #f2ad21);
    background: var(--primary-tint, #fff8ec);
    text-decoration: none;
}
.ss-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ss-info { min-width: 0; }
.ss-name {
    display: block;
    font-size: 15px;
    line-height: 1.35;
    color: #0f1b2d;
    font-weight: 500;
}
.ss-name b { font-weight: 700; }
.ss-price {
    display: block;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 700;
    color: #101828;
}

/* --- footer / empty --- */
.ss-all {
    display: block;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eceff2;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary, #f2ad21);
    text-decoration: none;
}
.ss-all:hover { text-decoration: underline; color: var(--primary, #f2ad21); }
.ss-empty { padding: 6px 2px 2px; font-size: 14px; color: #667085; }

@media (max-width: 620px) {
    .search-suggest { width: calc(100vw - 32px); padding: 14px; }
}

/* ============================================================
   LOYALTY PROGRAMME MODAL  (cart.php)
   Opened from the "more about the loyalty program" link; its
   primary action hands over to the shared login panel.
   ============================================================ */
.cart-loyalty .link-btn {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: #4a5c6a;
    text-decoration: underline;
    cursor: pointer;
}
.cart-loyalty .link-btn:hover { color: #101828; }

.loyalty-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .5);
    z-index: 10005;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.loyalty-overlay.active { opacity: 1; visibility: visible; }

.loyalty-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 90%;
    max-width: 460px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .22);
    padding: 26px 28px 24px;
    z-index: 10006;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.loyalty-modal.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

.loyalty-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.loyalty-modal__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #0f1b2d;
    line-height: 1.25;
}
.loyalty-modal__close {
    border: none;
    background: none;
    padding: 4px;
    margin: -4px -6px 0 0;
    line-height: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.loyalty-modal__close .icon { width: 22px; height: 22px; stroke: #667085; }
.loyalty-modal__close:hover .icon { stroke: #101828; }

.loyalty-modal__body { margin-top: 18px; }
.loyalty-modal__body p {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.6;
    color: #344054;
}
.loyalty-modal__body p:last-child { margin-bottom: 0; }

.loyalty-modal__actions {
    display: flex;
    gap: 14px;
    margin-top: 26px;
}
.loyalty-btn {
    /* Grow from the label's own width so "Start collecting points" stays on one
       line and both buttons keep the same height. */
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 12px 16px;
    border-radius: 999px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.loyalty-btn--ghost {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #0f1b2d;
}
.loyalty-btn--ghost:hover { border-color: #98a2b3; background: #f9fafb; }
.loyalty-btn--primary {
    border: 1px solid var(--primary, #f2ad21);
    background: var(--primary, #f2ad21);
    color: #0f1b2d;
}
.loyalty-btn--primary:hover { background: var(--primary-hover, #e09d12); border-color: var(--primary-hover, #e09d12); }

@media (max-width: 480px) {
    .loyalty-modal { padding: 22px 20px 20px; }
    .loyalty-modal__actions { flex-direction: column-reverse; }
}

/* Sprite icon inside a button (e.g. the truck on "Delivery and payment").
   The base .icon is a fixed 16px with a hard-coded stroke — follow the button's
   own colour and sit on the text baseline instead. */
.btn-primary .btn__icon,
.btn-outline .btn__icon {
    width: 18px;
    height: 18px;
    fill: transparent;
    stroke: currentColor;
    flex-shrink: 0;
}

/* ==========================================================================
   Auth feedback — shared by the login, registration and reset forms.
   ========================================================================== */
.auth-alert {
    margin: 0 0 18px;
    padding: 11px 14px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    font-size: 13px;
    line-height: 1.5;
}
.auth-alert.is-error { background: #fdecec; border-color: #dc2626; color: #a11512; }
.auth-alert.is-ok { background: #eafaf3; border-color: var(--success-bright, #10b981); color: #0b6b4a; }

.auth-intro { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: #555; }

.auth-error { display: block; margin-top: 6px; font-size: 12px; color: #dc2626; }
.auth-error:empty { display: none; }
.auth-error--block { margin: -10px 0 16px; }
.form-group.has-error input,
.form-group.has-error select { border-color: #dc2626; }

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text-heading, #333333);
    cursor: pointer;
}
.auth-remember input { width: 16px; height: 16px; accent-color: var(--primary, #f2ad21); cursor: pointer; }

.btn-login-submit.is-busy { opacity: 0.6; cursor: progress; }

/* ==========================================================================
   Header account dropdown (includes/v2/account_menu.php)
   ========================================================================== */
.acct-menu { position: relative; }
.acct-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main, #1a1a1a);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.acct-menu__toggle:hover { background: var(--bg-soft, #f7f7f7); border-color: var(--border-light, #eaeaea); }
.acct-menu__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--primary, #f2ad21);
    color: var(--text-main, #1a1a1a);
    font-size: 13px;
    font-weight: 700;
}
/* The header shows the avatar badge alone. The name and caret stay in the markup
   (screen readers still read the name, and re-enabling them is a one-line
   change) but are hidden everywhere. */
.acct-menu__name,
.acct-menu .acct-menu__caret { display: none; }

/* Kept for when the label is switched back on. Two classes deep on purpose: the
   header's generic `.user-actions i` rule sets every icon to 28px and would
   otherwise win on specificity. */
.acct-menu__name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu .acct-menu__caret {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    color: var(--text-main, #1a1a1a);
    transition: transform 0.15s ease;
}
.acct-menu.open .acct-menu__caret { transform: rotate(180deg); }

.acct-menu__drop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    /* Above the sticky .main-navbar (9999), which sits later in the DOM and
       would otherwise paint over a dropdown opened from the header above it. */
    z-index: 10030;
    min-width: 240px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border-light, #eaeaea);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.acct-menu.open .acct-menu__drop { opacity: 1; visibility: visible; transform: translateY(0); }

.acct-menu__head { padding: 10px 12px 12px; border-bottom: 1px solid var(--bg-muted, #f0f0f0); margin-bottom: 6px; }
.acct-menu__head strong { display: block; font-size: 14px; color: var(--text-main, #1a1a1a); }
.acct-menu__head span { display: block; margin-top: 2px; font-size: 12px; color: #8a9099; overflow: hidden; text-overflow: ellipsis; }

.acct-menu__drop a,
.acct-menu__drop button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    color: #33383f;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.acct-menu__drop a:hover,
.acct-menu__drop button:hover { background: var(--primary-tint, #fdf6e7); color: var(--text-main, #1a1a1a); }
.acct-menu__drop i { display: flex; align-items: center; width: 16px; font-size: 13px; color: #8a9099; }
.acct-menu__drop button { border-top: 1px solid var(--bg-muted, #f0f0f0); border-radius: 0 0 8px 8px; margin-top: 6px; color: #c02626; }
.acct-menu__drop button:hover { background: #fdecec; color: #a11512; }
.acct-menu__drop button i { color: #c02626; }

/* (The name and caret are hidden at every width — see the rule above.) */

/* ==========================================================================
   Registration panel (includes/signup_panel.php)
   Reuses .login-panel / .login-header / .login-body / .form-group from the
   login panel; only the pieces sign-up adds are defined here.
   ========================================================================== */
.signup-panel { max-width: 440px; }

/* Consumer / Company segmented control. */
.signup-seg { display: flex; gap: 12px; margin-bottom: 24px; }
.signup-seg__item {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 10px;
    border: 1px solid var(--text-main, #1a1a1a);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main, #1a1a1a);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.signup-seg__item input { position: absolute; opacity: 0; pointer-events: none; }
.signup-seg__item:hover { background: #fafafa; }
.signup-seg__item:has(input:checked) {
    background: var(--primary-tint, #fdf6e7);
    border-color: var(--primary, #f2ad21);
    box-shadow: 0 0 0 1px var(--primary, #f2ad21);
}
/* Amber tick riding the top-right corner of the selected option. */
.signup-seg__item:has(input:checked)::after {
    content: '\2713';
    position: absolute;
    top: -9px;
    right: -9px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary, #f2ad21);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.signup-form .form-hint {
    margin: 7px 2px 0;
    font-size: 11.5px;
    color: #8a9099;
}

/* A postal code never needs the full column width. */
.signup-form .form-group--short input { max-width: 180px; }

/* Country picker, styled to match the rounded text inputs. */
.signup-select { position: relative; }
.signup-select select {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 25px;
    padding: 12px 40px 12px 15px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-main, #1a1a1a);
    background: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.signup-select select:focus { border-color: var(--primary, #f2ad21); }
.signup-select i {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-main, #1a1a1a);
    pointer-events: none;
}

/* Consent rows: square box on the left, wrapping text beside it. */
.signup-check { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.signup-check input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    border: 1px solid #b9bfc7;
    border-radius: 4px;
    accent-color: var(--primary, #f2ad21);
    cursor: pointer;
}
.signup-check label {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-main, #1a1a1a);
    cursor: pointer;
}
.signup-check label a { color: var(--text-main, #1a1a1a); text-decoration: underline; }
.signup-check label a:hover { color: var(--primary, #f2ad21); }
.signup-check label small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: #8a9099;
}

.signup-form .btn-login-submit { margin-top: 6px; }

@media (max-width: 480px) {
    .signup-seg { gap: 10px; }
    .signup-seg__item { font-size: 13px; }
}

/* ==========================================================================
   Coupon box — shared by cart.php and checkout.php (assets/js/coupon.js).
   Checkout nests it inside .co-coupon, which already supplies the spacing.
   ========================================================================== */
/* One control height drives the input, the button and the applied tag, so the
   row lines up exactly instead of relying on two paddings happening to match. */
.coupon-box { --coupon-h: 48px; }
.coupon-box.is-busy { opacity: 0.55; pointer-events: none; }

/* Cart page: sits between the divider and the grey summary box, with the same
   gap above and below. The summary box's own margin is overridden so the two
   sides can never drift apart. */
.coupon-box--cart { margin: 20px 0 0; }
.coupon-box--cart + .cart-summary-box { margin-top: 20px; }

.coupon-box__label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main, #1a1a1a);
    margin-bottom: 10px;
}

.coupon-box__row { display: flex; align-items: stretch; gap: 10px; }
.coupon-box__input {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--coupon-h);
    padding: 0 20px;
    border: 1px solid #dfe3e8;
    border-radius: 999px;
    font-size: 14px;
    font-family: inherit;
    line-height: normal;
    color: var(--text-main, #1a1a1a);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.coupon-box__input::placeholder { color: #a3aab3; }
.coupon-box__input:hover { border-color: #c7cdd4; }
.coupon-box__input:focus {
    outline: none;
    border-color: var(--primary, #f2ad21);
    box-shadow: 0 0 0 3px var(--primary-a18, rgba(242, 173, 33, 0.18));
}

/* Same height and pill radius as the input — .btn-primary--inline is shared with
   other buttons, so the override is scoped to this row. */
.coupon-box__row .btn-primary--inline {
    flex: 0 0 auto;
    height: var(--coupon-h);
    padding: 0 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.coupon-box__row .btn-primary--inline:hover { box-shadow: 0 4px 12px var(--primary-a35, rgba(242, 173, 33, 0.35)); }
.coupon-box__row .btn-primary--inline:active { transform: translateY(1px); box-shadow: none; }

/* Applied state replaces the input row with a removable tag, at the same height
   so the block does not jump when a code is accepted. */
.coupon-box__applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--coupon-h);
    padding: 8px 10px 8px 18px;
    background: #f0fbf6;
    border: 1px solid #b8e6d1;
    border-radius: 999px;
}
.coupon-box__tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--success-deep, #0b7a54);
}
.coupon-box__tag i { flex-shrink: 0; font-size: 13px; }
.coupon-box__tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coupon-box__remove {
    flex-shrink: 0;
    height: 32px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(11, 122, 84, 0.08);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--success-deep, #0b7a54);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.coupon-box__remove:hover { background: #fde8e8; color: #c02626; }

.coupon-box__msg { margin: 10px 2px 0; font-size: 13px; line-height: 1.5; }
.coupon-box__msg.is-error { color: #dc2626; }
.coupon-box__msg.is-ok { color: var(--success-deep, #0b7a54); }

/* Narrow columns: stack rather than squeeze the button to an unreadable width. */
@media (max-width: 400px) {
    .coupon-box__row { flex-wrap: wrap; }
    .coupon-box__input { flex-basis: 100%; }
    .coupon-box__row .btn-primary--inline { flex: 1 1 auto; }
}

/* Discount lines in the two summary blocks. */
.co-sum__discount { color: var(--success-deep, #0b7a54); }
.co-sum__row--discount small { text-transform: uppercase; letter-spacing: 0.03em; }
.cart-summary--discount .sum-discount { font-size: 18px; font-weight: 700; color: var(--success-deep, #0b7a54); }
.cart-summary--discount .summary-label small { display: block; font-size: 12px; font-weight: 400; color: #8a9099; text-transform: uppercase; letter-spacing: 0.03em; }

/* ==========================================================================
   Save-cart modal (includes/save_basket_modal.php)
   Busy spinner -> shareable link, and the same spinner when a
   ?mx_saved_basket= link is being restored.
   ========================================================================== */
.sbm { position: fixed; inset: 0; z-index: 100001; display: none; align-items: center; justify-content: center; padding: 20px; }
.sbm.open { display: flex; }
.sbm__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.sbm__dialog {
    position: relative;
    background: #fff;
    width: 100%;
    max-width: 640px;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: notify-pop 0.22s ease-out;
    overflow: hidden;
}

.sbm__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 30px 0; }
.sbm__title { margin: 0; font-size: 26px; font-weight: 700; color: var(--text-main, #1a1a1a); line-height: 1.2; }
.sbm__close { background: none; border: none; font-size: 26px; line-height: 1; color: #9aa3ab; cursor: pointer; padding: 0; }
.sbm__close:hover { color: var(--text-main, #1a1a1a); }

.sbm__body { padding: 22px 30px 30px; }
.sbm__label { display: block; font-size: 13px; font-weight: 700; color: var(--text-main, #1a1a1a); margin-bottom: 8px; }
.sbm__link {
    width: 100%;
    padding: 13px 18px;
    border: 1px solid #d7dbe0;
    border-radius: 999px;
    font-size: 14px;
    color: var(--text-main, #1a1a1a);
    background: #fff;
}
.sbm__link:focus { outline: none; border-color: var(--primary, #f2ad21); }
.sbm__msg { margin: 0 0 20px; font-size: 15px; color: #444; line-height: 1.5; }

.sbm__copy {
    display: block;
    width: 100%;
    margin-top: 22px;
    padding: 14px 20px;
    border: none;
    border-radius: 999px;
    background: var(--primary, #f2ad21);
    color: var(--text-main, #1a1a1a);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.sbm__copy:hover { background: var(--primary-hover, #dda020); }
.sbm__copy.is-copied { background: var(--success-bright, #10b981); color: #fff; }
.sbm__copy--link { margin-top: 0; }

/* Busy stage: centred spinner + caption, sized so the dialog does not jump
   between the two states. */
.sbm__stage--busy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 230px;
    padding: 30px;
    font-size: 18px;
    color: var(--text-main, #1a1a1a);
}
.sbm__spinner {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 4px solid #ececec;
    border-top-color: var(--primary, #f2ad21);
    border-radius: 50%;
    animation: sbm-spin 0.8s linear infinite;
}
@keyframes sbm-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
    .sbm__head { padding: 20px 20px 0; }
    .sbm__title { font-size: 21px; }
    .sbm__body { padding: 18px 20px 24px; }
    .sbm__stage--busy { min-height: 180px; font-size: 16px; }
}

/* The hidden attribute must always win. Component classes here set their own
   display (.co-edit is inline-flex, .cart-page__save is flex, …), and an author
   rule beats the browser's [hidden] { display: none } — so elements toggled with
   `el.hidden = true` stayed on screen. */
[hidden] { display: none !important; }

/* ==========================================================================
   Customer account area (account.php) and the reset-password page.
   ========================================================================== */
.auth-page { padding: 60px 20px 90px; background: #fafafa; min-height: 60vh; }
.auth-card {
    max-width: 480px;
    margin: 0 auto;
    padding: 34px 34px 38px;
    background: #fff;
    border: 1px solid var(--border-light, #eaeaea);
    border-radius: 14px;
}
.auth-card__title { font-size: 24px; font-weight: 700; margin-bottom: 18px; color: var(--text-main, #1a1a1a); }
.auth-card__foot { margin-top: 18px; font-size: 13px; line-height: 1.6; color: #555; }
.auth-card__foot a { color: var(--text-main, #1a1a1a); font-weight: 600; }

.acct { padding: 34px 20px 80px; background: #fafafa; }
.acct__inner { max-width: 1080px; margin: 0 auto; }

.acct__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.acct__title { font-size: 28px; font-weight: 700; color: var(--text-main, #1a1a1a); }
.acct__sub { margin-top: 6px; font-size: 13.5px; color: #6b7280; }
.acct__head .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.acct__tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid #e6e6e6; margin-bottom: 24px; }
.acct__tab {
    padding: 12px 18px;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
}
.acct__tab:hover { color: var(--text-main, #1a1a1a); }
.acct__tab.is-active { color: var(--text-main, #1a1a1a); border-bottom-color: var(--primary, #f2ad21); }

.acct__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.acct-stat { background: #fff; border: 1px solid var(--border-light, #eaeaea); border-radius: 12px; padding: 20px; }
.acct-stat__num { display: block; font-size: 22px; font-weight: 700; color: var(--text-main, #1a1a1a); }
.acct-stat__label { display: block; margin-top: 4px; font-size: 12.5px; color: #8a9099; }

.acct-card { background: #fff; border: 1px solid var(--border-light, #eaeaea); border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.acct-card__title { font-size: 18px; font-weight: 700; color: var(--text-main, #1a1a1a); margin-bottom: 18px; }
.acct-card__foot { margin-top: 14px; font-size: 13.5px; }

.acct-table-wrap { width: 100%; overflow-x: auto; }
.acct-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.acct-table th, .acct-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--bg-muted, #f0f0f0); font-size: 13.5px; }
.acct-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #8a9099; font-weight: 600; background: #fafafa; }
.acct-table tbody tr:hover { background: #fcfcfc; }
.acct-muted { color: #8a9099; font-size: 12px; }

.acct-badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.acct-link { color: var(--text-main, #1a1a1a); font-weight: 600; font-size: 13.5px; text-decoration: underline; }
.acct-link:hover { color: var(--primary, #f2ad21); }

.acct-empty { text-align: center; padding: 40px 20px; color: #6b7280; }
.acct-empty p { margin: 14px 0 18px; font-size: 14px; }
.acct-empty .btn-primary--inline { text-decoration: none; }

.acct-address { font-size: 14px; line-height: 1.9; color: #33383f; margin-bottom: 14px; }

.acct-form { max-width: 720px; }
.acct-form--narrow { max-width: 420px; }
.acct-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.acct-form .signup-check span { font-size: 13.5px; }

@media (max-width: 640px) {
    .acct-form__grid { grid-template-columns: 1fr; }
    .acct__title { font-size: 22px; }
}

/* --- Invoice download buttons (order.php, account.php) --- */
.oc-invoice { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.oc-invoice__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--primary, #f2ad21);
    color: var(--text-main, #1a1a1a);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.oc-invoice__btn:hover { background: var(--primary-hover, #dda020); }
.oc-invoice__link { font-size: 13px; color: #5b6472; text-decoration: underline; }
.oc-invoice__link:hover { color: var(--text-main, #1a1a1a); }

/* Order rows carry two links now, so they need room to sit side by side. */
.acct-actions { display: flex; gap: 12px; white-space: nowrap; }

/* Count pill inside the account dropdown (favourites). */
.acct-menu__count {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--primary, #f2ad21);
    color: var(--text-main, #1a1a1a);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* ==========================================================================
   Favourites tab inside the account area (account.php?tab=favourites).
   Reuses the store's .main-product-grid card, pinned to four per row.
   ========================================================================== */
.acct-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.acct-card__meta { font-size: 13px; color: #8a9099; }

.acct-fav-grid { --per-row: 4; margin-bottom: 0; }
.acct-fav-pager { margin-top: 24px; }
.acct-fav-pager .btn-page-nav { text-decoration: none; }

/* Column count comes from the shared .main-product-grid breakpoints now. */

/* Neutral header for the favourites sign-in prompt (the .cam default is green). */
.cam__head-title--neutral { color: var(--text-main, #1a1a1a); }
.fav-modal__text { font-size: 14px; line-height: 1.65; color: #444; margin: 0; }

/* ==========================================================================
   Footer social icons (includes/v2/footer.php).
   Rendered only for profiles filled in under admin › Settings › Contact & social.
   ========================================================================== */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    /* Brand colour at rest so the icons read against the footer background;
       the sprite strokes follow `color` via stroke: currentColor. */
    border: 1px solid var(--primary, #f2ad21);
    border-radius: 50%;
    color: var(--primary, #f2ad21);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.footer-social__link:hover { background: var(--primary, #f2ad21); border-color: var(--primary, #f2ad21); color: var(--text-main, #1a1a1a); }
/* The base .icon rule hardcodes `stroke: var(--dark, #101010)`, which is invisible on the
   dark footer — follow the link's own colour instead. */
.footer-social__link .icon { width: 17px; height: 17px; stroke: currentColor; }

/* ==========================================================================
   Content pages built in admin › Content › Pages (page.php).
   Prose reuses .single-blog-content, so only the page furniture lives here.
   ========================================================================== */
/* Same 1300px column and the same 30px breathing room above the breadcrumbs
   that the contact, blog and store pages use — these were the odd ones out. */
.cp { padding: 30px 0 70px; }
.cp__inner { max-width: 1300px; margin: 0 auto; padding: 0 20px; }

.cp-draft {
    margin: 6px 0 18px;
    padding: 11px 16px;
    background: var(--primary-tint, #fdf6e7);
    border-left: 3px solid var(--primary, #f2ad21);
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--primary-ink, #6b5010);
}
.cp-draft a { color: var(--primary-ink, #6b5010); font-weight: 600; }

/* Hero band. The soft gradient and the hairline stop a 1300px-wide slab of
   flat grey from reading as an empty area. */
.cp-hero {
    background: linear-gradient(180deg, #f7f9fb 0%, #eef2f6 100%);
    border: 1px solid #e6ebf0;
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    margin-bottom: 38px;
}
.cp-hero__title {
    font-size: 38px;
    font-weight: 700;
    color: #10151c;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.cp-hero__sub {
    max-width: 720px;
    margin: 16px auto 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: #5b6472;
}

/* Highlight cards. --cp-per-row comes from the page's own setting. */
.cp-cards {
    display: grid;
    grid-template-columns: repeat(var(--cp-per-row, 4), 1fr);
    gap: 18px;
    margin-bottom: 44px;
}
.cp-card {
    position: relative;
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 14px;
    padding: 24px 26px;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.cp-card::before {
    /* A short accent rule instead of a full coloured border — enough to tie the
       cards to the brand without turning the row into a set of banners. */
    content: '';
    position: absolute;
    top: 0;
    left: 26px;
    width: 28px;
    height: 3px;
    background: var(--primary, #f2ad21);
    border-radius: 0 0 3px 3px;
}
.cp-card:hover {
    transform: translateY(-2px);
    border-color: #dfe5ec;
    box-shadow: 0 10px 26px rgba(16, 21, 28, 0.06);
}
.cp-card__title { font-size: 15.5px; font-weight: 700; color: #10151c; margin-bottom: 8px; }
.cp-card__body { font-size: 13.5px; line-height: 1.65; color: #5b6472; }

.cp-body__heading {
    font-size: 24px;
    font-weight: 700;
    color: #10151c;
    letter-spacing: -0.01em;
    margin-bottom: 22px;
}

/* Wide container, readable measure: the spare width holds a contents list
   rather than stretching the lines of text across 1300px. */
.cp-layout--toc {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

.cp-toc {
    position: sticky;
    top: 24px;
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 14px;
    padding: 20px 20px 22px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}
.cp-toc__title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a9099;
    margin-bottom: 12px;
}
.cp-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: cptoc; }
.cp-toc__list li { counter-increment: cptoc; }
.cp-toc__list a {
    display: block;
    padding: 7px 0 7px 26px;
    position: relative;
    font-size: 13px;
    line-height: 1.45;
    color: #4a525d;
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.15s ease;
}
.cp-toc__list a::before {
    content: counter(cptoc);
    position: absolute;
    left: 0;
    top: 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: #b6bcc4;
}
.cp-toc__list a:hover { color: var(--primary-hover, #dda020); }
.cp-toc__list a:hover::before { color: var(--primary, #f2ad21); }

/* Numbered / plain body sections. */
.cp-body {
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 14px;
    padding: 34px 38px;
}
.cp-section { scroll-margin-top: 24px; }
.cp-section + .cp-section { margin-top: 32px; padding-top: 30px; border-top: 1px solid #f0f2f5; }
.cp-section__heading {
    display: flex;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: #10151c;
    margin-bottom: 12px;
    scroll-margin-top: 24px;
}
.cp-section__no { color: var(--primary, #f2ad21); flex: none; }
.cp-section__body { font-size: 14.5px; line-height: 1.8; color: #33383f; }

/* FAQ list — <details> so it works without JS. A question is a wide click
   target, so it gets its own card rather than a divider line. */
.cp-faq { max-width: 940px; }
.cp-faq__item {
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 12px;
    margin-bottom: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cp-faq__item:last-child { margin-bottom: 0; }
.cp-faq__item[open] {
    border-color: #e2c98a;
    box-shadow: 0 8px 22px rgba(16, 21, 28, 0.05);
}
.cp-faq__q {
    position: relative;
    list-style: none;
    padding: 18px 52px 18px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #10151c;
    cursor: pointer;
}
.cp-faq__q::-webkit-details-marker { display: none; }
.cp-faq__q::after {
    content: '+';
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-tint, #fdf6e7);
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    color: var(--primary-hover, #dda020);
}
.cp-faq__item[open] .cp-faq__q::after { content: '\2212'; }
.cp-faq__q:hover { color: var(--primary-hover, #dda020); }
.cp-faq__a { padding: 0 52px 20px 20px; font-size: 14.5px; line-height: 1.8; color: #33383f; }

@media (max-width: 1100px) {
    /* The contents list needs a column of its own; stacked above the text it is
       just a second copy of the headings. */
    .cp-layout--toc { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .cp-toc { display: none; }
}
@media (max-width: 1000px) { .cp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
    .cp { padding: 18px 0 50px; }
    .cp-cards { grid-template-columns: 1fr; gap: 12px; }
    .cp-hero { padding: 34px 22px; border-radius: 14px; }
    .cp-hero__title { font-size: 25px; }
    .cp-hero__sub { font-size: 14px; }
    .cp-body { padding: 22px 20px; }
    .cp-body__heading { font-size: 20px; }
    .cp-section__heading { font-size: 15.5px; }
    .cp-section__body, .cp-faq__a { font-size: 13.5px; }
    .cp-faq__q { font-size: 14px; padding: 15px 46px 15px 16px; }
}

/* ==========================================================================
   MOBILE / TABLET CHROME  (includes/v2/mobile_nav.php)
   Below 992px the desktop navbar is replaced by a fixed bottom bar plus
   slide-up sheets. Everything here is inside a media query so the desktop
   layout is untouched.
   ========================================================================== */
.mnav { display: none; }
.msheet { display: none; }

@media (max-width: 992px) {

    /* ---- bottom bar ---- */
    .mnav {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 10040;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        background: #fff;
        border-top: 1px solid var(--border-light, #eaeaea);
        box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.07);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .mnav__btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 9px 4px 8px;
        background: none;
        border: none;
        font-family: inherit;
        font-size: 11px;
        font-weight: 500;
        color: var(--text-main, #1a1a1a);
        text-decoration: none;
        cursor: pointer;
    }
    .mnav__btn:active { background: #fafafa; }
    .mnav__icon-wrap { position: relative; display: inline-flex; }
    .mnav .mnav__icon { width: 23px; height: 23px; color: var(--text-main, #1a1a1a); }
    .mnav__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mnav__badge {
        position: absolute;
        top: -5px; right: -8px;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--text-main, #1a1a1a);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }

    /* Clear the bar so nothing hides behind it. */
    body { padding-bottom: 62px; }
    .go-top-btn { bottom: 76px; }

    /* ---- sheets (menu + search) ---- */
    .msheet { position: fixed; inset: 0; z-index: 10050; display: block; visibility: hidden; }
    .msheet.open { visibility: visible; }
    .msheet__backdrop {
        position: absolute; inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        transition: opacity 0.25s ease;
    }
    .msheet.open .msheet__backdrop { opacity: 1; }
    .msheet__panel {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .msheet.open .msheet__panel { transform: translateY(0); }

    .msheet__head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--bg-muted, #f0f0f0);
        flex: none;
    }
    .msheet__title {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-main, #1a1a1a);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .msheet .msheet__title-icon { width: 20px; height: 20px; }
    .msheet__back {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: none;
        border: none;
        padding: 0;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        color: var(--primary, #f2ad21);
        cursor: pointer;
        flex: none;
    }
    .msheet .msheet__back .icon { width: 16px; height: 16px; }
    .msheet__x { background: none; border: none; padding: 4px; color: var(--text-main, #1a1a1a); cursor: pointer; flex: none; }
    .msheet .msheet__x .icon { width: 20px; height: 20px; }
    .msheet__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

    /* ---- menu list ---- */
    .mmenu { list-style: none; margin: 0; padding: 6px 0 18px; }
    .mmenu__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        padding: 16px 20px;
        background: none;
        border: none;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        color: var(--text-main, #1a1a1a);
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }
    .mmenu__link:active { background: #fafafa; }
    .mmenu__link--all { color: var(--primary-hover, #dda020); text-decoration: underline; }
    .mmenu .mmenu__caret { width: 16px; height: 16px; color: #9aa3ab; flex: none; }
    .mmenu__sep { height: 1px; margin: 8px 20px; background: var(--bg-muted, #f0f0f0); }

    /* ---- search overlay ---- */
    .msheet--search .msheet__panel { top: 0; border-radius: 0; max-height: none; }
    .msearch__bar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 2px solid var(--primary, #f2ad21);
        flex: none;
    }
    .msheet .msearch__icon { width: 20px; height: 20px; color: var(--text-main, #1a1a1a); flex: none; }
    .msearch__input {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        font-family: inherit;
        font-size: 16px;   /* 16px stops iOS zooming on focus */
        color: var(--text-main, #1a1a1a);
        background: none;
    }
    .msearch__x { background: none; border: none; padding: 4px; color: var(--text-main, #1a1a1a); cursor: pointer; flex: none; }
    .msearch__results { flex: 1; overflow-y: auto; position: relative; padding-bottom: 20px; }
    .msearch__hint { padding: 26px 20px; font-size: 13.5px; color: #8a9099; text-align: center; }
    /* The shared suggestion dropdown is absolutely positioned on desktop; in the
       overlay it is the whole result area. */
    .msearch__results .search-suggest {
        position: static;
        width: 100%;
        max-height: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }
    .msearch__results .search-suggest:not([hidden]) + .msearch__hint { display: none; }

    body.mobile-sheet-open { overflow: hidden; }

    /* ---- header condenses ---- */
    .main-navbar { display: none; }          /* replaced by the bottom bar */
    .site-header .top-bar { padding: 0; }
    .site-header .top-bar-right { display: none; }
    .middle-bar {
        flex-direction: column;
        gap: 12px;
        padding: 14px 0 16px;
    }
    .middle-bar .search-container { width: 100%; max-width: 320px; order: 2; }
    .middle-bar .logo-container { order: 3; }
    .middle-bar .logo-container img { max-height: 46px; }
    .middle-bar .user-actions { display: none; }   /* lives in the bottom bar now */

    /* Header phones become a single centred, swipeable row. */
    .top-bar-left {
        display: flex;
        justify-content: center;
        gap: 22px;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 10px 14px;
        border-bottom: 1px solid var(--bg-muted, #f0f0f0);
    }
    .top-bar-left::-webkit-scrollbar { display: none; }
    .top-bar-left .contact-item { white-space: nowrap; font-size: 13.5px; font-weight: 600; }

    /* ---- footer stacks ---- */
    .footer-main { grid-template-columns: 1fr 1fr; gap: 26px; }
    .footer-features { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .footer-main { grid-template-columns: 1fr; }
    .footer-features { grid-template-columns: 1fr; }
    .footer-bottom .bottom-row { flex-direction: column; align-items: flex-start; gap: 16px; }
    .footer-payments { flex-wrap: wrap; }
    .mnav__label { font-size: 10.5px; }
}

/* Contact-strip arrows: desktop shows every item, so they stay hidden there. */
.top-bar-arrow { display: none; }

@media (max-width: 992px) {
    .site-header .top-bar {
        display: flex;
        align-items: center;
        gap: 4px;
        border-bottom: 1px solid var(--bg-muted, #f0f0f0);
        padding: 4px 8px;
    }
    .top-bar-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px; height: 32px;
        flex: none;
        border: 1px solid var(--border-light, #eaeaea);
        border-radius: 50%;
        background: #fff;
        color: var(--text-main, #1a1a1a);
        cursor: pointer;
    }
    .top-bar-arrow.is-hidden { visibility: hidden; }
    .site-header .top-bar-arrow .icon { width: 15px; height: 15px; }

    /* One contact per view, snapping like a carousel. */
    .site-header .top-bar-left {
        flex: 1;
        min-width: 0;
        display: flex;
        /* The base rule wraps; here each item is 100% wide, so wrapping would
           stack them vertically instead of paging sideways. */
        flex-wrap: nowrap;
        /* An earlier mobile rule centres this row. With full-width items the
           track overflows, and centring it clips BOTH ends instead of showing
           one item from the start. */
        justify-content: flex-start;
        gap: 0;
        padding: 10px 0;
        border: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .site-header .top-bar-left::-webkit-scrollbar { display: none; }
    .site-header .top-bar-left .contact-item {
        flex: 0 0 100%;
        scroll-snap-align: start;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: none;
        border: none;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-main, #1a1a1a);
        cursor: pointer;
    }

    /* Search reads as a tappable box, matching the reference design. */
    .middle-bar .search-container {
        border: 1px solid #e2e4e9;
        border-radius: 10px;
        padding: 0 16px;
        height: 46px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    /* The icon sits inside the box with breathing room on the left, rather than
       flush against the border. */
    .middle-bar .search-container .icon {
        position: static;
        /* The markup puts the input first (the icon was absolutely positioned
           on desktop), so it has to be pulled ahead of it here. */
        order: -1;
        flex: none;
        width: 18px;
        height: 18px;
        transform: none;
        color: var(--text-main, #1a1a1a);
    }
    /* The dropdown matches the input exactly — same width, same left and right
       edges — instead of being a fixed 460px anchored to the viewport. */
    .middle-bar .search-container .search-suggest {
        /* -1px so the dropdown's border sits over the container's border and the
           two outer edges line up exactly; left/right:0 aligns to the padding
           box and leaves it 1px narrow on each side. */
        left: -1px;
        right: -1px;
        width: auto;
        max-width: none;
        top: calc(100% + 8px);
    }
    .middle-bar .search-container input {
        border: none;
        padding: 0;
        height: 100%;
        font-size: 15px;
        text-align: left;   /* reads from the icon now, not centred in the box */
    }
    .middle-bar .search-container .icon { left: 0; }

    /* Department phone sheet. */
    .mphones__hours { padding: 16px 20px 6px; font-size: 13px; color: #8a9099; }
    .mphones { list-style: none; margin: 0; padding: 0 0 18px; }
    .mphones a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 20px;
        text-decoration: none;
        border-bottom: 1px solid #f4f4f4;
    }
    .mphones__label { font-size: 13.5px; color: #6b7280; }
    .mphones__num { font-size: 15px; font-weight: 700; color: var(--text-main, #1a1a1a); white-space: nowrap; }
}

/* Promo bar before Splide mounts: show only the first slide instead of letting
   the raw <li>s spill sideways. Splide overrides this once it initialises. */
.promo-splide:not(.is-initialized) .splide__list { display: block; }
.promo-splide:not(.is-initialized) .splide__slide + .splide__slide { display: none; }
.promo-bar { overflow: hidden; }

/* ==========================================================================
   Loyalty tab (account.php?tab=loyalty)
   ========================================================================== */
.acct-stat--hero { background: var(--primary-tint, #fdf6e7); border-color: var(--primary, #f2ad21); }
.acct-stat--hero .acct-stat__num { color: var(--primary-darker, #a9700a); font-size: 30px; }

.loy-rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.loy-reward {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--border-light, #eaeaea);
    border-radius: 12px;
    background: #fff;
}
.loy-reward.is-locked { opacity: 0.72; background: #fafafa; }
.loy-reward__img { height: 110px; display: flex; align-items: center; justify-content: center; }
.loy-reward__img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.loy-reward__name { font-size: 15px; font-weight: 700; color: var(--text-main, #1a1a1a); }
.loy-reward__desc { font-size: 13px; line-height: 1.55; color: #6b7280; }
.loy-reward__cost { margin-top: auto; font-size: 14px; color: #33383f; }
.loy-reward__cost strong { font-size: 19px; color: var(--text-main, #1a1a1a); }
.loy-reward__cost small { display: block; font-size: 12px; color: #8a9099; margin-top: 2px; }
.loy-reward__btn { width: 100%; justify-content: center; margin-top: 4px; }
.loy-reward__need { font-size: 12.5px; font-weight: 600; color: var(--primary-darker, #c08a12); margin-top: 4px; }

@media (max-width: 520px) { .loy-rewards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .loy-rewards { grid-template-columns: 1fr; } }

/* "Other phones" is a <button>, which does not inherit the page font and comes
   with a UA background and border of its own — without these it renders as a
   grey system button next to the bordered <a> boxes instead of matching them. */
button.contact-item {
    font-family: inherit;
    font-size: 13px;
    line-height: normal;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
button.contact-item:hover { background-color: #f9f9f9; }

/* A "Plain text" top-bar item is a notice, not a destination. */
span.contact-item--text { cursor: default; }
span.contact-item--text:hover { background-color: transparent; }

/* --- Store: mobile filter drawer ------------------------------------------
   Desktop keeps the sidebar permanently open; the toggle only exists below the
   point where the layout stacks. */
.filters-toggle { display: none; }

@media (max-width: 992px) {
    .filters-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin-bottom: 16px;
        padding: 13px 16px;
        border: 1px solid #e2e4e9;
        border-radius: 10px;
        background: #fff;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-main, #1a1a1a);
        cursor: pointer;
    }
    .filters-toggle span { flex: 1; text-align: left; }
    .filters-toggle .icon { width: 17px; height: 17px; }
    .filters-toggle__caret { transition: transform 0.2s ease; }
    .filters-toggle.is-open .filters-toggle__caret { transform: rotate(180deg); }

    /* The sidebar is a full-screen panel now, not an inline drawer — the rules
       that used to collapse it in place live in assets/css/responsive.css
       (search "filters, as a full-screen panel"). Leaving the old
       `display:block; margin-bottom:20px` here fought that: a fixed, inset:0
       panel with a bottom margin does not reach the bottom of the screen. */

    /* The toggle has to come before the sidebar visually. */
    .category-page-container { display: flex; flex-direction: column; }
    .filters-toggle { order: -2; }
    .category-page-container .sidebar { order: -1; }
}

/* ==========================================================================
   MOBILE: sections, product cards, logo, slider pagination
   The desktop section padding is 80px/60px — the 60px sides exist only to give
   the slider arrows somewhere to sit. A grid has no arrows, and on a phone that
   gutter eats a third of the screen, so both cases are handled here.
   ========================================================================== */

/* A section holding a grid rather than a slider needs no arrow gutter. */
.product-slider-section--grid { padding-left: 20px; padding-right: 20px; }

@media (max-width: 992px) {
    /* One consistent 20px gutter for every section on every page. */
    .product-slider-section,
    .product-slider-section--grid { padding: 40px 20px; }
    .slider-section-header { padding-left: 0; padding-right: 0; }

    /* Sliders show one card at a time here, so the dots add nothing but height. */
    .splide__pagination { display: none !important; }
}

@media (max-width: 576px) {
    .product-slider-section,
    .product-slider-section--grid { padding: 28px 20px; }

    /* Two cards per row means roughly half the width each — the desktop padding
       and type sizes leave almost no room for the name and price. Applied to
       every .product-card, so slider cards match the grid exactly. */
    .product-card { padding: 12px; border-radius: 10px; }
    /* Height pinned to exactly two lines. The shared rule clamps to 2 but its
       min-height is taller than two lines at this size, so a sliver of the
       third line was showing under the ellipsis. */
    .product-card .product-title {
        font-size: 12.5px;
        line-height: 1.35;
        min-height: 2.7em;
        max-height: 2.7em;
        margin-bottom: 8px;
    }
    .product-card .price-main { font-size: 14px; }
    .product-card .price-old,
    .product-card .price-net,
    .product-card .tax { font-size: 10.5px; }
    .product-card .btn-product { padding: 9px 10px; font-size: 12px; }
    .product-card .wishlist-btn { width: 30px; height: 30px; top: 8px; right: 8px; }

    /* Badges: smaller so two sit side by side instead of stacking and pushing
       the card taller than its neighbour. */
    .product-card .product-badges { gap: 4px; margin-bottom: 8px; min-height: 0; }
    .product-card .badge { font-size: 8.5px; padding: 3px 5px; letter-spacing: 0.2px; border-radius: 3px; }

    .product-card .product-image-wrapper { height: 130px; }
}

/* Header logo: it was set to a fixed 220px, which on a narrow screen is wider
   than the space it gets and stretches the row. */
@media (max-width: 992px) {
    .middle-bar .logo-container img { width: 200px; height: auto; max-height: none; }
}
@media (max-width: 420px) {
    .middle-bar .logo-container img { width: 175px; }
}

/* Slider arrows move inside the track on mobile — at -50px they sit outside the
   viewport entirely and cannot be tapped. */
@media (max-width: 992px) {
    .product-slider .splide__arrow--prev { left: 10px; }
    .product-slider .splide__arrow--next { right: 10px; }
    .product-slider .splide__arrow { width: 34px; height: 34px; }
}

/* ==========================================================================
   MOBILE refinements: slider arrows, section headers, timeline cards, badges
   ========================================================================== */
@media (max-width: 992px) {
    /* Arrows tucked just outside the track — far enough not to sit on a card,
       close enough to stay on screen. */
    .product-slider .splide__arrow--prev { left: -10px; }
    .product-slider .splide__arrow--next { right: -10px; }
    /* At -10px the arrow overlaps the card. Splide centres it vertically, which
       put it straight over the product name; raising it to the image area keeps
       the text readable while leaving the arrow where you asked for it. */
    .product-slider .splide__arrow { top: 34%; }

    /* Section heading and its "See more" link, scaled to the narrower column
       and pushed apart so they no longer read as one block. */
    .slider-section-header { gap: 14px; margin-top: 32px; margin-bottom: 20px; }
    .section-title { font-size: 19px; line-height: 1.25; }
    .see-more-link { font-size: 12.5px; font-weight: 400; }
    .see-more-link i { font-size: 11px; }

    /* "Photovoltaic Wholesaler" strip. Two-up was the previous choice here; at
       half a phone's width the card titles ("AI technology and support") broke
       across five lines. Three quarters gives the text its width back and still
       shows the edge of the next card, which is what says the row scrolls. */
    .timeline-item { min-width: 0; flex: 0 0 75%; }
    .timeline-main-title { font-size: 19px; line-height: 1.3; }
}

@media (max-width: 576px) {
    .section-title { font-size: 17.5px; }
    /* .timeline-item keeps the 75% set above — one width for every phone. */

    /* Badges: the longest pair (OPPORTUNITY + BEST-SELLER) still wrapped at
       8.5px, so trim a little further to keep them on one line. */
    .product-card .badge { font-size: 8px; padding: 3px 4px; letter-spacing: 0; }
    .product-card .product-badges { gap: 3px; flex-wrap: nowrap; }
    .product-card .badge { white-space: nowrap; }
}

/* ==========================================================================
   MOBILE: partner-logo strip, blog cards, and a header that survives scrolling
   ========================================================================== */

/* --- Partner logo strip ------------------------------------------------- */
/* 64px of padding on a 390px screen left a 262px track, so the logos were
   squeezed into a ribbon down the middle of the page. 20px matches every other
   mobile section and gives the strip the full width back; the extra room pays
   for the third logo per page. */
@media (max-width: 992px) {
    .logo-slider-section { padding: 32px 20px; }
    /* The logos are line art on transparent backgrounds, so they read smaller
       than their box. Scaling past the slide edge uses the gap as bleed and
       brings them back up to a legible size at three per page. */
    #partner-logos-slider .splide__slide img { transform: scale(1.18); }
    /* Square, and stated rather than implied: a <button> carries UA padding and
       a text line-height, either of which turns a fixed width/height pair into
       a slightly taller pill on the browsers that apply them. aspect-ratio
       keeps it square even if one of the two dimensions is overridden later. */
    .logo-slider-toggle {
        width: 32px;
        height: 32px;
        aspect-ratio: 1 / 1;
        padding: 0;
        border: 0;
        box-sizing: border-box;
        line-height: 1;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* The glyph is the other half of it: an icon font's own line box is taller
       than the mark it draws, which pushes the mark off centre inside a box
       this small. */
    .logo-slider-toggle i {
        font-size: 12px;
        line-height: 1;
        display: block;
    }
}

/* --- Blog cards --------------------------------------------------------- */
/* Two per row, matching the product grid. At half width the 40px padding and
   desktop type sizes left almost no room for the title. */
@media (max-width: 992px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    .blog-card { border-radius: 10px; }
    .blog-card-image { height: 120px; }
    .blog-card-content { padding: 12px; }

    .blog-date { font-size: 10.5px; margin-bottom: 8px; }
    .blog-title {
        font-size: 12.5px;
        line-height: 1.35;
        margin-bottom: 8px;
        min-height: 2.7em;   /* exactly the two lines the clamp allows */
        max-height: 2.7em;
    }
    .blog-excerpt {
        font-size: 11.5px;
        line-height: 1.55;
        margin-bottom: 10px;
        -webkit-line-clamp: 3;
    }
    .blog-author { font-size: 11.5px; }
}

@media (max-width: 576px) {
    .blog-grid { gap: 12px; }
    .blog-card-image { height: 100px; }
    .blog-card-content { padding: 10px; }
    .blog-excerpt { -webkit-line-clamp: 2; }
}

/* --- Header does not fade out on mobile --------------------------------- */
/* On desktop the header fades to opacity 0 past 150px because the floating
   navbar pill takes over the logo and the search box. That pill is hidden
   below 992px, so the same fade just blanked the logo and the search box while
   they were still on screen. The header stays in the normal flow — it scrolls
   away with the page, it simply no longer disappears in place. */
@media (max-width: 992px) {
    body.is-scrolled .site-header { opacity: 1; pointer-events: auto; }
}

/* --- Cart drawer: the summary flows, it is not pinned ------------------- */
/* The panel was a fixed three-part column — header, scrolling item list,
   summary welded to the bottom edge. On every screen size the summary now
   comes after the items and the cross-sells, and the panel scrolls as one
   piece. */
.cart-panel { overflow-y: auto; }
.cart-body { flex: 0 0 auto; overflow-y: visible; }
.cart-footer { flex: 0 0 auto; }

/* --- Footer bottom: one centred copyright line --------------------------- */
/* Replaces the reCAPTCHA notice and the placeholder payment chips. */
.bottom-row--single {
    justify-content: center;
    margin-bottom: 0;
    /* padding-top: 22px; */
}
.footer-copyright {
    font-size: 12.5px;
    color: #9aa0a6;
    text-align: center;
}
@media (max-width: 620px) {
    /* The stacking rule for the old two-column row would left-align this. */
    .footer-bottom .bottom-row--single { align-items: center; }
}

/* ==========================================================================
   FLOATING REGION / LANGUAGE SWITCHER  (includes/v2/footer.php)
   The header trigger (.top-bar-right) is hidden below 992px, so the same modal
   gets a floating pill above the mobile bottom bar. Desktop never sees it.
   ========================================================================== */
.region-fab { display: none; }

@media (max-width: 992px) {
    .region-fab {
        position: fixed;
        right: 16px;
        bottom: 76px;                       /* clears the .mnav bottom bar */
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        z-index: 10035;                     /* under the sheets, over content */
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        background: #111111;
        color: #ffffff;
        border: none;
        border-radius: 999px;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.02em;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
    }
    .region-fab:active { transform: scale(0.96); }
    .region-fab__flag {
        width: 22px;
        height: auto;
        border-radius: 2px;
        display: block;
    }

    /* Get out of the way while a sheet or the modal itself is open. */
    body.mobile-sheet-open .region-fab,
    body.region-modal-open .region-fab {
        opacity: 0;
        visibility: hidden;
    }

    /* ---- the modal goes full screen ---- */
    .region-overlay { z-index: 10060; }
    .region-modal {
        top: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        z-index: 10061;
        border-radius: 0;
        background-color: var(--bg-soft, #f7f7f7);
        box-shadow: none;
        transform: translateY(28px);
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.22s ease, visibility 0.22s ease;
    }
    .region-modal.active { transform: translateY(0); }

    .region-header {
        align-items: center;
        padding: 18px 18px 14px;
        border-bottom: 1px solid #e6e6e6;
        background: #fff;
    }
    .region-header h2 { font-size: 17px; }
    .close-region {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .region-body {
        padding: 20px 18px 24px;
        -webkit-overflow-scrolling: touch;
    }
    .region-body .options-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    /* Region and currency sit on the same two-column grid as the languages.
       They were content-width, which made one row of small pills under two rows
       of wide ones — three groups of buttons in a dialog should read as one set
       of controls, not three different kinds. */
    .region-body .options-flex {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .region-body .options-flex .btn-option { flex: 0 0 auto; }
    .region-body .btn-option {
        justify-content: center;
        padding: 14px 12px;
        font-size: 14.5px;
    }

    .region-footer {
        padding: 14px 18px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid #e6e6e6;
        background: #fff;
    }
    .region-footer .btn-region-cancel,
    .region-footer .btn-region-save { flex: 1; padding: 13px 16px; }
}

/* ==========================================================================
   STORE PAGE — circular icon controls
   Every icon button on the listing that is drawn as a bordered circle: the
   pager arrows, the filter panel's close, the sidebar carousel arrows and the
   card's favourite toggle. A <button> brings its own padding and a text
   line-height, either of which turns a width/height pair into a slightly taller
   pill, and an icon font's line box is taller than the mark it draws — so the
   square, the zero padding and the centring are all stated rather than assumed.
   (assets/css/responsive.css does the same for icon controls generally below
   992px; this holds on desktop too, where the store page has most of them.)
   ========================================================================== */
.pagination-controls .btn-page-nav--icon,
.sidebar__close,
.exclusive-splide .splide__arrow,
.category-page-container .wishlist-btn {
    aspect-ratio: 1 / 1;
    padding: 0;
    line-height: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* The glyph must not re-introduce the offset the box just removed. */
.pagination-controls .btn-page-nav--icon > i,
.sidebar__close > .icon,
.exclusive-splide .splide__arrow > svg,
.category-page-container .wishlist-btn > .icon {
    display: block;
    margin: 0;
}

/* --- Blog card: author line + "read it" arrow ---------------------------- */
/* The arrow is hidden by default and switched on where it earns its place —
   the blog listing on a phone (assets/css/responsive.css). Elsewhere the whole
   card is the link and a second target is just another thing to miss. */
.blog-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}
.blog-card__go {
    display: none;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    background: var(--primary, #f2ad21);
    color: var(--text-main, #1a1a1a);
    text-decoration: none;
}
.blog-card__go svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.blog-card__go:hover { background: var(--primary-hover, #e5a31f); }

/* Wordmark — shown in place of the logo when no image has been uploaded.
   Sized to sit in the same slot the logo occupies, so the header does not
   change height on a shop that never uploads one. */
.site-wordmark {
    display: inline-block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 50px;
    color: var(--secondary, #1c1e21);
    text-decoration: none;
    white-space: nowrap;
}
.site-wordmark:hover { color: var(--primary, #f2ad21); }