/* =============================================================================
   ChiButtons — self-contained component stylesheet.
   Loaded after styles-m.css / styles-l.css, so equal-specificity rules win.

   Breakpoints are literal @media queries on purpose: Magento 2.4.8's
   lib/_responsive.less never dispatches .media-width('min', @screen__l), so any
   LESS desktop block guarded on it compiles to nothing.
     mobile  < 768   |   tablet 768–991   |   desktop >= 992   |   wide >= 1200
   ============================================================================= */

/* ------------------------------------------------------------------ 1. fonts */
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-LightItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'molla';src:url('../fonts/molla.woff2') format('woff2'),url('../fonts/molla.woff') format('woff');font-weight:normal;font-style:normal;font-display:block}

:root{
    --cb-accent:#c96;
    --cb-accent-hover:#a6c76c;
    --cb-price:#ef837b;
    --cb-cyan:#10c4ff;
    --cb-heading:#333;
    --cb-text:#999;
    --cb-muted:#777;
    --cb-border:#d7d7d7;
    --cb-hairline:#ebebeb;
    --cb-dark:#333;
}

/* ------------------------------------------------------------------ 2. icons */
.cb-i{font-family:'molla';font-style:normal;font-weight:normal;line-height:1;speak:none;display:inline-block;text-decoration:inherit;text-align:center;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.cb-i-user:before{content:'\f364'}
.cb-i-heart-o:before{content:'\f234'}
.cb-i-heart:before{content:'\f233'}
.cb-i-random:before{content:'\f2d0'}
.cb-i-cart:before{content:'\e812'}
.cb-i-shopping-cart:before{content:'\f2fa'}
.cb-i-bars:before{content:'\f131'}
.cb-i-close:before{content:'\f191'}
.cb-i-minus:before{content:'\f28e'}
.cb-i-plus:before{content:'\f2c2'}
.cb-i-angle-down:before{content:'\f110'}
.cb-i-angle-up:before{content:'\e802'}
.cb-i-angle-left:before{content:'\f111'}
.cb-i-angle-right:before{content:'\f112'}
.cb-i-long-arrow-right:before{content:'\f274'}
.cb-i-long-arrow-left:before{content:'\f273'}
.cb-i-arrow-up:before{content:'\f122'}
.cb-i-check:before{content:'\ec2d'}
.cb-i-search:before{content:'\f2eb'}
.cb-i-tag:before{content:'\f330'}
.cb-i-rocket:before{content:'\f2df'}
.cb-i-rotate-left:before{content:'\e81c'}
.cb-i-info-circle:before{content:'\e80c'}
.cb-i-life-ring:before{content:'\e803'}
.cb-i-phone:before{content:'\e806'}
.cb-i-envelope:before{content:'\f1c6'}
.cb-i-truck:before{content:'\f352'}
.cb-i-facebook:before{content:'\f09a'}
.cb-i-twitter:before{content:'\f099'}
.cb-i-instagram:before{content:'\f16d'}
.cb-i-youtube:before{content:'\f167'}

/* -------------------------------------------------------------- 3. base type */
body{font-family:'Poppins',Helvetica,Arial,sans-serif;font-weight:300;color:var(--cb-text)}
h1,h2,h3,h4,h5,h6,.page-title,.product-item-name,.product.name a{font-family:'Poppins',Helvetica,Arial,sans-serif;color:var(--cb-heading)}
h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.1;margin-bottom:15px;letter-spacing:-.01em}

a,.alink{color:var(--cb-heading);text-decoration:none;transition:all .3s ease}
a:hover,a:focus,.alink:hover{color:var(--cb-accent);text-decoration:none}
.page-main a:not(.action):not(.product-item-link):not(.logo):not(.cb-i):hover{box-shadow:0 1px 0 var(--cb-accent)}
.column.main a.product-item-link:hover{color:var(--cb-accent);box-shadow:none}

/* -------------------------------------------------------------- 4. buttons */
.action.primary,.action-primary,button.action.primary,.action.tocart{
    border-radius:0;font-weight:400;transition:all .3s ease;letter-spacing:0
}
.action.primary,.action-primary{
    background:var(--cb-accent);border:1px solid var(--cb-accent);color:#fff;
    padding:8.5px 15px;min-width:170px;font-size:14px
}
.action.primary:hover,.action.primary:focus,.action.primary:active,
.action-primary:hover,.action-primary:focus{background:var(--cb-accent-hover);border-color:var(--cb-accent-hover);color:#fff}
.action.secondary,.action-secondary{border-radius:0;border:1px solid var(--cb-accent);background:transparent;color:var(--cb-accent)}
.action.secondary:hover,.action-secondary:hover{background:var(--cb-accent);color:#fff;box-shadow:0 5px 10px rgba(0,0,0,.05)}
.cart-summary .action,.cart-summary button{border-radius:0}
.actions-toolbar .action.primary{border-radius:0}

/* -------------------------------------------------------------- 5. forms */
input[type=text],input[type=password],input[type=url],input[type=tel],input[type=search],
input[type=number],input[type=datetime],input[type=email],select,textarea{
    border-radius:1px;border:1px solid var(--cb-border);color:var(--cb-muted);
    -webkit-appearance:none;-moz-appearance:none;appearance:none;font-weight:400
}
input[type=text]:focus,input[type=password]:focus,input[type=url]:focus,input[type=tel]:focus,
input[type=search]:focus,input[type=number]:focus,input[type=email]:focus,select:focus,textarea:focus{
    border-color:var(--cb-accent);box-shadow:none
}
textarea{padding:14px 17px;min-height:150px}
div.mage-error,.field-error{color:var(--cb-accent)}
input.mage-error,select.mage-error,textarea.mage-error{border-color:var(--cb-accent)}
::placeholder{color:var(--cb-text);font-weight:300}

/* -------------------------------------------------------------- 6. prices */
.price-box .price,.price-container .price,.cart-summary .price{color:var(--cb-price)}
.old-price .price,.old-price .price-wrapper .price{color:#ccc;text-decoration:line-through}
.special-price .price{color:var(--cb-price)}

/* =========================================================== 7. HEADER: bands */
.page-header{background:var(--cb-dark);border-bottom:1px solid var(--cb-hairline);margin-bottom:0}
.page-header .panel.wrapper{background:var(--cb-dark);border-bottom:1px solid #414141}
.page-header .panel.header{
    max-width:1200px;margin:0 auto;padding:0 10px;display:flex;align-items:center;
    justify-content:space-between;min-height:42px
}
.page-header .panel.header > .cb-promo{order:1;flex:1 1 auto;min-width:0}
.page-header .panel.header .switcher{order:2;margin:0;padding:10px 0;position:relative}
.page-header .panel.header .header.links,
.page-header .panel.header .compare.wrapper{display:none}
.page-header .panel.header .action.skip{position:absolute;left:-9999px}

.cb-promo{color:#fff;font-size:13px;font-weight:300;line-height:1.45;margin:6px 0}
.cb-promo p{margin:0}
.cb-promo a{color:#fff}
.cb-promo a:hover{color:var(--cb-cyan);box-shadow:none}
.cb-promo img{display:inline-block;vertical-align:-4px;margin-right:4px}

/* currency switcher */
.page-header .switcher .label{display:none}
.page-header .switcher-trigger strong{font-weight:300;color:var(--cb-muted);font-size:13px;padding-right:16px;position:relative}
.page-header .switcher-trigger strong:after{
    content:'\f110';font-family:'molla';font-size:10px;position:absolute;right:0;top:50%;transform:translateY(-50%);
    border:0;margin:0;width:auto;height:auto
}
.page-header .switcher-trigger:hover strong{color:var(--cb-accent)}
/* Luma renders its own luma-icons caret on .action.toggle — suppress it, we use the molla one */
.page-header .panel.wrapper .switcher .options .action.toggle:after,
.page-header .panel.wrapper .switcher .options .action.toggle.active:after{display:none}
.page-header .switcher .options ul.switcher-dropdown{
    background:#fff;box-shadow:2px 5px 8px rgba(51,51,51,.06),-2px 5px 8px rgba(51,51,51,.06);
    padding:10px 20px;min-width:150px;border:0;margin-top:0;right:0;left:auto
}
.page-header .switcher .options ul.switcher-dropdown:before,
.page-header .switcher .options ul.switcher-dropdown:after{display:none}
.page-header .switcher-option a{color:var(--cb-muted);font-size:13px}
.page-header .switcher-option a:hover{color:var(--cb-accent);box-shadow:none}

/* ------------------------------------------- middle band: logo / search / icons */
.page-header .header.content{
    max-width:1200px;margin:0 auto;padding:0 10px;display:flex;align-items:center;flex-wrap:wrap
}
.page-header .header.content:before,.page-header .header.content:after{display:none}
.page-header .logo{
    float:none;margin:20px 0;max-width:260px;position:static;display:block
}
.page-header .logo img{width:100%;height:auto;max-width:100%}
.page-header .nav-toggle{position:static;display:none;margin-right:14px;font-size:0}
.page-header .nav-toggle:before{content:'\f131';font-family:'molla';font-size:26px;color:#fff}
.page-header .nav-toggle:hover:before{color:var(--cb-accent)}

.page-header .block-search{
    float:none;width:auto;flex:1 1 auto;max-width:570px;margin:0 30px;padding:0;order:2
}
.page-header .block-search .block-title{display:none}
.page-header .block-search .label{display:none}
.page-header .block-search .control{border:0;margin:0;padding:0}
.page-header .block-search input{
    position:static;margin:0;left:auto;height:46px;line-height:46px;border:1px solid #dadada;
    border-radius:30px;background:#fff;color:#333;padding:0 20px 0 52px;font-size:14px;width:100%
}
.page-header .block-search .action.search{
    left:0;right:auto;top:0;bottom:0;width:52px;padding:0;opacity:1;position:absolute;background:none;border:0
}
.page-header .block-search .action.search:before{
    content:'\f2eb';font-family:'molla';font-size:19px;color:#333;line-height:46px
}
.page-header .block-search .action.search > span{position:absolute;left:-9999px}
.page-header .block-search .search-autocomplete{margin-top:2px;z-index:120}
.page-header .block-search .search-autocomplete ul{border:0;box-shadow:0 10px 30px rgba(0,0,0,.12);border-radius:3px}

/* icon row */
.cb-header-icons{display:flex;align-items:center;margin-left:auto;order:3}
.cb-hi{position:relative;padding:20px 0;margin-left:30px;text-align:center}
.cb-hi:first-child{margin-left:0}
.cb-hi .cb-hi-link,.cb-hi .action.showcart{
    display:block;color:#fff;line-height:1;position:relative;text-decoration:none
}
.cb-hi .cb-hi-link:hover,.cb-hi .action.showcart:hover{color:var(--cb-cyan);box-shadow:none}
.cb-hi .cb-i{font-size:27px;display:block}
.cb-hi-label{display:block;font-size:11px;line-height:12px;color:#999;font-weight:300;margin-top:6px}
.cb-hi .counter.qty{
    position:absolute;top:-4px;right:-10px;min-width:17px;height:17px;line-height:17px;padding:0 2px;
    background:var(--cb-accent);color:#fff;border-radius:50%;font-size:10px;font-weight:400;margin:0
}
.cb-hi .counter.qty .counter-label{display:none}
.cb-hi-cart .minicart-wrapper{margin:0;position:static}
.cb-hi-cart .minicart-wrapper .action.showcart{padding:0}
.cb-hi-cart .minicart-wrapper .action.showcart:before{
    content:'\f2fa';font-family:'molla';font-size:29px;color:inherit;line-height:1;display:block
}
.cb-hi-cart .minicart-wrapper .action.showcart .text{
    display:block;font-size:11px;line-height:12px;color:#999;font-weight:300;margin-top:6px;
    position:static;width:auto;height:auto;overflow:visible;clip:auto;text-indent:0
}
.cb-hi-cart .minicart-wrapper .action.showcart .counter.qty{top:-4px;right:-10px}
.cb-hi-cart .minicart-wrapper .action.showcart .counter.qty.empty{display:none}
.cb-hi-cart .minicart-wrapper .action.showcart:after{display:none}
.cb-hi-cart .block-minicart{right:0;left:auto;margin-top:0}
.cb-hi-compare .action.compare.no-display{display:block !important}
.cb-hi-compare .cb-hi-label,.cb-hi-compare .cb-i{pointer-events:none}

/* account dropdown */
.cb-hi-drop{
    position:absolute;top:100%;right:-20px;min-width:230px;background:#fff;padding:18px 25px;
    box-shadow:5px 10px 16px rgba(51,51,51,.08),-5px 10px 16px rgba(51,51,51,.08);
    opacity:0;visibility:hidden;transform:translateY(6px);transition:all .25s ease;z-index:110;text-align:left
}
.cb-hi-account:hover .cb-hi-drop,.cb-hi-account.cb-open .cb-hi-drop{opacity:1;visibility:visible;transform:none}
.cb-drop-list{list-style:none;margin:0;padding:0}
.cb-drop-list li{padding:5px 0;margin:0}
.cb-drop-list a{color:var(--cb-text);font-weight:300;font-size:14px}
.cb-drop-list a:hover{color:var(--cb-accent);box-shadow:none}

/* =========================================================== 8. NAV / MEGA MENU */
.nav-sections{background:#fff;margin-bottom:0;border-bottom:1px solid var(--cb-hairline)}
.cb-nav-inner{max-width:1200px;margin:0 auto;padding:0 10px;display:flex;align-items:stretch}

/* vertical "All-in-one Maker Kits" dropdown */
.cb-cat-dropdown{position:relative;flex:0 0 auto;margin-right:15px}
.cb-cat-dropdown:before{
    content:'';position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:1px;height:15px;background:#ccc
}
.cb-cat-toggle{
    display:flex;align-items:center;width:250px;padding:16px 18px;font-weight:500;font-size:14px;
    letter-spacing:-.01em;color:var(--cb-heading);transition:background .3s,color .1s;white-space:nowrap
}
.cb-cat-toggle .cb-i{font-size:22px;margin-right:14px}
.cb-cat-dropdown:hover .cb-cat-toggle{background:var(--cb-accent);color:#fff;box-shadow:none}
.cb-cat-menu{
    list-style:none;margin:0;padding:0;position:absolute;top:100%;left:0;width:100%;background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.08);opacity:0;visibility:hidden;transition:all .25s;z-index:105
}
.cb-cat-dropdown:hover .cb-cat-menu{opacity:1;visibility:visible}
.cb-cat-menu li{border:1px solid var(--cb-hairline);border-top:none;padding:9px 19px;margin:0}
.cb-cat-menu a{color:#666;font-weight:300;font-size:14px}
.cb-cat-menu a:hover{color:var(--cb-accent);box-shadow:none}
.cb-cat-menu .cb-cat-lead{background:#f9f9f9}
.cb-cat-menu .cb-cat-lead a{color:var(--cb-heading);font-weight:500;text-transform:uppercase;font-size:13px}

/* on-sale banner */
.cb-banner-sale{margin-left:auto;display:flex;align-items:center;padding-left:24px;position:relative}
.cb-banner-sale:before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:15px;background:#ccc}
.cb-banner-sale a{font-size:14px;font-weight:600;letter-spacing:-.01em;color:#e02b27}
.cb-banner-sale a:hover{box-shadow:none}
.cb-banner-sale .cb-i{color:var(--cb-heading);font-size:15px;margin-right:7px}
.cb-banner-sale .cb-sale-hl{color:var(--cb-heading);margin-left:4px}

/* main nav */
.nav-sections .navigation{background:transparent;max-width:none;padding:0;flex:0 1 auto;font-weight:400}
.nav-sections .navigation > ul{margin:0;padding:0;display:flex;flex-wrap:nowrap}
.navigation .level0{margin:0;position:relative}
.navigation .level0 > .level-top{
    display:block;padding:17px 13px;font-size:14px;font-weight:500;line-height:1.5;color:#222;
    letter-spacing:-.01em;text-transform:none;position:relative;white-space:nowrap
}
/* jQuery-UI menu injects a caret span. On desktop we replace it with the molla chevron in the
   :after below; !important because Luma reveals it from
   `.navigation .level0.parent > .level-top > .ui-menu-icon`. On mobile it is the only thing that
   expands a submenu (tapping the label navigates), so it must stay — see the drawer block. */
@media (min-width:768px){
    .navigation .ui-menu-icon{display:none !important}
}
.navigation .level0 > .level-top:after{display:none}
.navigation .level0.parent > .level-top:after{
    content:'\f110';font-family:'molla';font-size:9px;display:inline-block;margin-left:6px;
    border:0;position:static;width:auto;height:auto;color:inherit
}
.navigation .level0 > .level-top:before{
    content:'';position:absolute;left:13px;right:13px;bottom:8px;height:1px;background:var(--cb-accent);
    transform:scaleX(0);transform-origin:left center;transition:transform .3s ease
}
.navigation .level0:hover > .level-top,
.navigation .level0.active > .level-top,
.navigation .level0.has-active > .level-top{color:var(--cb-accent);border:0}
.navigation .level0:hover > .level-top:before,
.navigation .level0.active > .level-top:before{transform:scaleX(1)}
.navigation .level0.active > .level-top{border-color:transparent}

.navigation .level0 .submenu{
    border:0;box-shadow:5px 10px 16px rgba(51,51,51,.07),-5px 10px 16px rgba(51,51,51,.07);
    min-width:235px;padding:18px 22px;font-weight:300;border-radius:0
}
.navigation .level0 .submenu a{padding:7px 0;color:var(--cb-text);font-size:14px;line-height:1.3;border:0}
.navigation .level0 .submenu a:hover{background:transparent;color:var(--cb-accent);box-shadow:none}
.navigation .level0 .submenu li{margin:0;list-style:none}
.navigation .level0 .submenu li.active > a,
.navigation .level0 .submenu li.has-active > a{border:0;color:var(--cb-accent)}
.navigation .level0.active > .level-top,
.navigation .level0.has-active > .level-top{border:0}

/* mega panel (Button Supplies) — two columns, nested lists inline */
@media (min-width:768px){
    .navigation .level0.cb-mega > .submenu{
        left:0 !important;right:auto !important;top:100% !important;box-sizing:border-box;
        width:560px;padding:25px 30px;column-count:2;column-gap:36px
    }
    .navigation .level0.cb-mega > .submenu > li{break-inside:avoid;page-break-inside:avoid;display:block;margin-bottom:14px}
    .navigation .level0.cb-mega > .submenu > li > a{
        color:var(--cb-heading);font-weight:400;font-size:14px;text-transform:uppercase;padding:0 0 6px
    }
    .navigation .level0.cb-mega > .submenu .submenu{
        position:static !important;display:block !important;box-shadow:none;padding:0;min-width:0;
        opacity:1 !important;visibility:visible !important;left:auto !important;top:auto !important;
        background:transparent;border:0
    }
    .navigation .level0.cb-mega > .submenu .submenu a{font-size:13px;padding:5px 0;text-transform:none;color:var(--cb-text)}
    .navigation .level0.cb-mega > .submenu .submenu a:hover{color:var(--cb-accent)}
    .navigation .level0.cb-mega .parent > a:after{display:none}
    /* non-mega dropdowns anchor to their item */
    .navigation .level0:not(.cb-mega) > .submenu{left:0 !important;right:auto !important;top:100% !important}
}

/* ------------------------------------------------ mobile drawer (< 768px) */
@media (max-width:767px){
    .cb-nav-inner{display:block;padding:0}
    .cb-cat-dropdown,.cb-banner-sale{display:none}
    .nav-sections{background:var(--cb-dark)}
    .nav-sections .section-item-title{background:#2c2c2c;border:0}
    .nav-sections .section-item-title a{color:#bbb;font-weight:600;font-size:12px;text-transform:uppercase}
    .nav-sections .section-item-title.active{background:var(--cb-dark)}
    .nav-sections .section-item-title.active a{color:var(--cb-accent)}
    .nav-sections .navigation{background:var(--cb-dark)}
    /* The desktop rule above makes this a nowrap flex row. Left alone, the row is ~660px wide
       inside the 336px off-canvas panel and its tail spills back across the viewport edge — the
       closed drawer's last items sit on top of the page. Stack them instead. */
    .nav-sections .navigation > ul{display:block}
    .navigation .level0{border-top:1px solid #444}
    .navigation .level0 > .level-top{color:#eee;padding:12px 20px;font-weight:400}
    .navigation .level0 > .level-top:before{display:none}
    .navigation .level0 .submenu{box-shadow:none;background:#3b3b3b;padding:0}
    .navigation .level0 .submenu a{color:#ddd;padding:10px 20px}
    .navigation .level0.parent > .level-top:after{display:none}
    /* the caret is the submenu's only tap target in the drawer — give it a real hit area */
    .navigation .level0 > .level-top{position:relative;padding-right:56px}
    .navigation .ui-menu-icon{
        display:block;position:absolute;right:0;top:0;bottom:0;width:52px;margin:0;padding:0;
        background:none;border:0;text-indent:0;font-size:0;left:auto
    }
    .navigation .ui-menu-icon:after{
        content:'\f110';font-family:'molla';font-size:10px;color:#bbb;
        position:absolute;right:20px;top:50%;transform:translateY(-50%);transition:transform .2s
    }
    .navigation .level0.active > .level-top > .ui-menu-icon:after,
    .navigation .ui-menu-icon.ui-menu-icon-open:after{transform:translateY(-50%) rotate(180deg);color:var(--cb-accent)}
    /* Opening a level0 item makes mage/menu mark every descendant `expanded`, so the whole
       subtree renders at once. A caret on a nested row would only bubble to its link and
       navigate, so drop it — level0 is the only real toggle. */
    .navigation .submenu .ui-menu-icon{display:none}
    /* Luma's own mobile submenu colour (#575757) is unreadable on the dark drawer; outrank it. */
    .nav-sections .navigation .level0 .submenu a{color:#ddd;padding:11px 20px}
    .nav-sections .navigation .level0 .submenu .submenu a{color:#a8a8a8;font-size:13px;padding-left:38px}
    .nav-sections .navigation .level0 .submenu .submenu .submenu a{padding-left:56px}
    .nav-sections .navigation .level0 .submenu li.parent > a{color:#fff;font-weight:500}
    .nav-sections .header.links{background:var(--cb-dark)}
    .nav-sections .header.links li a{color:#eee;padding:12px 20px;border-top:1px solid #444}
    .nav-sections .header.links .greet.welcome{color:#999;padding:12px 20px}
    .page-header .nav-toggle{display:block}
    .page-header .logo{margin:14px 0;max-width:170px}
    .page-header .header.content{padding:0 15px}
    .page-header .block-search{order:10;flex:0 0 100%;max-width:none;margin:0 0 14px}
    .cb-hi{margin-left:16px;padding:14px 0}
    .cb-hi .cb-i,.cb-hi-cart .minicart-wrapper .action.showcart:before{font-size:23px}
    .cb-hi-label,.cb-hi-cart .minicart-wrapper .action.showcart .text{display:none}
    .page-header .panel.header{flex-wrap:wrap;padding:0 15px;text-align:center}
    .page-header .panel.header > .cb-promo{flex:0 0 100%;order:2}
    .page-header .panel.header .switcher{order:1;margin:0 auto}
}
@media (min-width:768px) and (max-width:1199px){
    .page-header .block-search{margin:0 16px;max-width:none}
    .page-header .logo{max-width:200px}
    .cb-hi{margin-left:18px}
    .cb-cat-toggle{width:auto;padding:16px 14px}
    .cb-cat-dropdown .cb-cat-menu{width:280px}
    .navigation .level0 > .level-top{padding:17px 10px;font-size:13px}
    .cb-banner-sale{display:none}
}
/* Luma switches to the desktop nav at exactly 768px, but the six top-level labels plus the
   250px "All-in-one Maker Kits" button need ~900px. Between 768 and 991 the button collapses
   to its bars icon and the nav tightens, so the row fits without dropping either. */
@media (min-width:768px) and (max-width:991px){
    .cb-cat-toggle{padding:16px 12px}
    .cb-cat-toggle .cb-cat-label{display:none}
    .cb-cat-toggle .cb-i{margin-right:0}
    .cb-cat-dropdown{margin-right:12px}
    .navigation .level0 > .level-top{padding:17px 8px;font-size:13px}
}
@media (min-width:768px){
    .nav-sections{position:sticky;top:0;z-index:99}
    .cb-scrolled .nav-sections{box-shadow:0 3px 6px rgba(51,51,51,.09)}
    .nav-sections .section-items > .section-item-title{display:none}
}
@media (max-width:767px){
    .page-header{position:sticky;top:0;z-index:6}
}

/* =============================================================== 9. FOOTER */
.page-footer{background:#fff;margin-top:40px;padding-bottom:0}
.page-footer .footer.content{border-top:0;padding:0;margin:0 auto;max-width:1200px}
.cb-footer{padding:0 10px}
.cb-footer *{box-sizing:border-box}
.cb-footer-mid{display:flex;flex-wrap:wrap;margin:0 -10px;padding:60px 0 30px;box-sizing:border-box}
.cb-footer-col{flex:0 0 100%;max-width:100%;padding:0 10px 25px;box-sizing:border-box}
.cb-footer .widget-title{color:var(--cb-heading);font-weight:600;font-size:16px;letter-spacing:-.1px;margin:0 0 19px}
.cb-footer .widget-list{list-style:none;margin:0;padding:0}
.cb-footer .widget-list li{margin-bottom:4px}
.cb-footer .widget-list a{line-height:26px;color:inherit;position:relative;display:inline-block}
.cb-footer .widget-list a:before{
    content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--cb-cyan);
    transform:scaleX(0);transform-origin:left center;transition:transform .3s ease
}
.cb-footer .widget-list a:hover{color:var(--cb-cyan);box-shadow:none}
.cb-footer .widget-list a:hover:before{transform:scaleX(1)}
.cb-footer p{margin-bottom:12px}
.cb-footer-logo img{max-width:180px;height:auto;margin-bottom:20px}
.cb-footer .widget-call{
    position:relative;padding:21px 20px 16px 60px;border:1px solid var(--cb-hairline);border-radius:3px;
    max-width:270px;margin-bottom:15px;line-height:1.25;font-size:13px
}
.cb-footer .widget-call .cb-i{color:var(--cb-cyan);font-size:26px;position:absolute;left:18px;top:50%;transform:translateY(-50%)}
.cb-footer .widget-call a{display:block;color:var(--cb-heading);font-weight:400;font-size:18px;margin-top:2px}
.cb-footer .widget-call a:hover{color:var(--cb-cyan);box-shadow:none}

.cb-footer-bottom{
    position:relative;padding:17.5px 0;display:flex;flex-direction:column;align-items:center;gap:12px
}
.cb-footer-bottom:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--cb-hairline)}
.cb-copyright,.cb-copyright .copyright{color:var(--cb-text);font-size:13px;background:none;padding:0;margin:0;text-align:center}
.cb-footer-payments{margin:0}
.cb-footer-payments img{max-width:272px;height:auto;display:block}
@media (min-width:576px){
    .cb-footer-col{flex:0 0 50%;max-width:50%}
}
@media (min-width:992px){
    .cb-footer-col{flex:0 0 25%;max-width:25%}
    .cb-footer-bottom{flex-direction:row;justify-content:space-between}
    .cb-copyright{text-align:left}
}

/* ================================================================ 10. PLP */
/* The migrated category `image` attribute holds dead /chibuttons_v2/ paths and the old
   store never rendered a category banner. */
.catalog-category-view .category-image{display:none}
.page-main > .page-title-wrapper .page-title{display:block;text-align:center;font-size:34px;font-weight:400;margin:0}
.catalog-category-view .page-main > .page-title-wrapper{padding:40px 0 30px}
.breadcrumbs{max-width:1200px;margin:0 auto 20px;padding:0 10px;text-align:center}
.breadcrumbs .items{font-size:14px;color:#a3a3a3}
.breadcrumbs .item a{color:var(--cb-text)}
.breadcrumbs .item strong{color:var(--cb-heading);font-weight:300}
.breadcrumbs .items > li:not(:last-child):after{
    content:'\f112';font-family:'molla';font-size:10px;color:var(--cb-text);margin:0 8px;line-height:1
}

@media (min-width:992px){
    .catalog-category-view .page-main > .page-title-wrapper{padding:63px 0 30px}
    .page-main > .page-title-wrapper .page-title{font-size:40px}
    .page-layout-2columns-left .column.main{width:75%;padding-bottom:40px}
    .page-layout-2columns-left .sidebar-main{width:25%;padding-right:20px;padding-left:0}
    .page-layout-2columns-left .sidebar-additional{width:25%}
}

/* toolbar */
.cb-toolbar-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
.cb-toolbar-top .toolbar-products{flex:1;margin:0;padding:20px 0;display:flex;align-items:center;justify-content:space-between}
.toolbar select{border:1px solid var(--cb-border);height:30px;padding:0 28px 0 10px;color:var(--cb-text);font-size:13px;background-image:none}
.toolbar-sorter .sorter-label{color:var(--cb-heading);font-size:12px}
.toolbar-sorter{position:relative}
.toolbar-sorter .sorter-action{
    width:30px;height:30px;line-height:28px;border:1px solid var(--cb-border);display:inline-block;
    text-align:center;margin-left:6px;vertical-align:top
}
.toolbar-sorter .sorter-action:before{content:'\f122';font-family:'molla';font-size:14px;color:var(--cb-text);line-height:28px}
.toolbar-sorter .sorter-action.sort-desc:before{content:'\f11f'}
.toolbar-sorter .sorter-action:hover{box-shadow:none}
.toolbar-sorter .sorter-action > span{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.toolbar-amount{margin:0;padding:0;color:#ccc;font-weight:400;font-size:13px}
.toolbar-amount .toolbar-number{color:var(--cb-heading)}
.products.wrapper ~ .toolbar-products .toolbar-amount,
.products.wrapper ~ .toolbar-products .toolbar-sorter{display:none}
.toolbar .modes,.cb-toolbar-top .toolbar-products .pages{display:none}
/* Luma shows these from `.page-products .toolbar .limiter` (3 classes) */
.toolbar .limiter{display:none !important}
.products.wrapper ~ .toolbar-products{margin-top:30px;text-align:center;display:block}
.products.wrapper ~ .toolbar-products .pages{display:block;float:none}
@media (max-width:767px){
    .toolbar-amount{display:none}
    .cb-toolbar-top .toolbar-products{padding:12px 0}
    /* Luma pins .toolbar-sorter absolutely on mobile against an unpositioned .toolbar, so it
       floats up out of the FILTER row. Put it back in flow next to the filter button. */
    .cb-toolbar-top .toolbar-sorter{position:static;display:flex;align-items:center;gap:8px}
    .cb-toolbar-top .toolbar-products{justify-content:flex-end}
    .cb-toolbar-top .toolbar-sorter .sorter-options{min-width:120px;height:32px;padding:0 22px 0 8px;font-size:13px}
    .page-main > .page-title-wrapper .page-title{font-size:24px}
    .catalog-category-view .page-main > .page-title-wrapper{padding:24px 0 18px}
}

.cb-action-filter{
    background:none;border:0;color:var(--cb-heading);font-weight:400;font-size:14px;text-transform:uppercase;
    letter-spacing:-.01em;padding:0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap
}
.cb-action-filter .cb-i{font-size:16px}
.cb-action-filter:hover{color:var(--cb-accent)}

/* pagination */
.pages .items{display:inline-flex;align-items:center;justify-content:center;gap:2px;flex-wrap:wrap}
.pages a.page,.pages strong.page,.pages .action{
    min-width:30px;height:40px;line-height:38px;padding:0 6px;font-size:14px;font-weight:400;color:#706f6c;
    border:1px solid transparent;border-radius:3px;background:transparent;display:inline-block;margin:0
}
.pages strong.page{color:var(--cb-accent);border-color:var(--cb-hairline);background:transparent}
.pages a.page:hover{border-color:var(--cb-hairline);background:transparent;color:var(--cb-heading);box-shadow:none}
.pages .action{width:auto;min-width:44px}
.pages .action:before{font-family:'molla';font-size:15px;color:#706f6c;line-height:38px}
.pages .action.next:before{content:'\f274'}
.pages .action.previous:before{content:'\f273'}
.pages .action:hover{border-color:var(--cb-hairline);box-shadow:none}
.pages .action:hover:before{color:var(--cb-accent)}

/* ------------------------------------------------------------- product card */
/* !important is needed on exactly these four properties: Luma sets them from
   `.page-products .products-grid .product-item` (3 classes) and
   `.product-item:nth-child(2n+1)`, which outrank any 2-class selector here.
   Its `margin-left:2%` is what silently forced a 3-up grid. */
.products-grid .product-items{display:flex;flex-wrap:wrap;margin:0 -10px !important;padding:0;list-style:none}
.products-grid .product-item{
    flex:0 0 50%;max-width:50%;margin:0 0 20px !important;padding:0 10px !important;width:auto !important
}
@media (min-width:768px){
    .products-grid .product-item{flex:0 0 25%;max-width:25%}
}
.products-grid .product-item-info{
    width:auto;height:100%;background:#fff;position:relative;transition:box-shadow .3s ease
}
.products-grid .product-item:hover .product-item-info{box-shadow:0 5px 20px rgba(0,0,0,.06)}

.cb-product-top{position:relative;overflow:hidden}
.cb-product-top .product-item-photo{display:block;padding:0}
.cb-product-top .product-image-container{width:100% !important;display:block}
.cb-product-top .product-image-wrapper{padding-bottom:100% !important;height:0 !important;box-sizing:content-box;display:block;position:relative;overflow:hidden}
.cb-product-top .product-image-photo{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto}

.cb-product-top .product-item-inner{margin:0;position:static;border:0;box-shadow:none;background:transparent}
.cb-product-top .product-item-actions{margin:0}
.cb-product-top .actions-primary{
    position:absolute;left:0;right:0;bottom:0;z-index:2;border-bottom:1px solid var(--cb-hairline);
    opacity:0;visibility:hidden;transform:translateY(100%);transition:all .35s ease;display:block
}
.products-grid .product-item:hover .actions-primary{opacity:1;visibility:visible;transform:translateY(0)}
.cb-product-top .actions-primary form{margin:0}
.cb-product-top .action.tocart{
    display:block;width:100%;min-width:0;background:#fff;border:0;color:var(--cb-accent);
    text-transform:uppercase;font-size:13px;font-weight:400;padding:11px 15px;border-radius:0;line-height:1.4
}
.cb-product-top .action.tocart .cb-i{font-size:17px;margin-right:9px;vertical-align:-2px}
.cb-product-top .action.tocart:hover{color:#fff;background:var(--cb-accent)}
.cb-product-top .stock{padding:11px 15px;text-align:center;font-size:12px;background:#fff;
    position:absolute;left:0;right:0;bottom:0;margin:0;border-bottom:1px solid var(--cb-hairline)}

.cb-product-top .actions-secondary{
    position:absolute;right:10px;top:10px;z-index:3;display:flex;flex-direction:column;gap:6px;
    opacity:0;visibility:hidden;transform:translateX(-10px);transition:all .35s ease
}
.products-grid .product-item:hover .actions-secondary{opacity:1;visibility:visible;transform:translateX(0)}
.cb-product-top .actions-secondary .action{
    width:36px;height:36px;line-height:36px;padding:0;border:0;background:#fff;border-radius:50%;
    text-align:center;color:var(--cb-heading);box-shadow:0 1px 4px rgba(0,0,0,.08);display:block
}
.cb-product-top .actions-secondary .action:before{font-family:'molla';font-size:15px;line-height:36px;margin:0;color:inherit}
.cb-product-top .actions-secondary .action.towishlist:before{content:'\f234'}
.cb-product-top .actions-secondary .action.tocompare:before{content:'\f2d0'}
.cb-product-top .actions-secondary .action > span{position:absolute;left:-9999px}
.cb-product-top .actions-secondary .action:hover{background:var(--cb-accent);color:#fff;box-shadow:none}
@media (min-width:768px){
    .cb-product-top .actions-secondary{right:20px;top:20px}
}

.products-grid .product-item-details{text-align:center;padding:16px 8px;background:#fff}
@media (min-width:768px){.products-grid .product-item-details{padding:16px 20px}}
.products-grid .product-cate{margin-bottom:5px}
.products-grid .cate-name{color:#666;font-weight:300;font-size:13px;line-height:1.2;letter-spacing:-.01em}
.products-grid .product-item-name{margin:0 0 5px;display:block}
.products-grid .product-item-name a{font-weight:400;font-size:16px;line-height:1.25;color:var(--cb-heading);letter-spacing:-.01em}
.products-grid .price-box{margin:0 0 6px}
.products-grid .price-box .price{font-weight:400;font-size:16px;color:var(--cb-accent)}
.products-grid .price-box .price-label{display:none}
.products-grid .price-box .old-price .price{color:#ccc;font-size:14px}
.products-grid .product-item .product-reviews-summary{display:none}
/* touch fallback the original lacked: the buy button is always reachable on phones */
@media (max-width:767px){
    .cb-product-top .actions-primary{opacity:1;visibility:visible;transform:none;position:static;border-bottom:0}
    .cb-product-top .action.tocart{border-top:1px solid var(--cb-hairline);color:var(--cb-accent)}
    .cb-product-top .actions-secondary{opacity:1;visibility:visible;transform:none;right:6px;top:6px}
    .cb-product-top .actions-secondary .action{width:30px;height:30px;line-height:30px}
    .cb-product-top .actions-secondary .action:before{line-height:30px;font-size:13px}
    .cb-product-top .stock{position:static}
}

/* --------------------------------------------------------- layered navigation */
.cb-filter .filter-title,.cb-filter .filter-subtitle{display:none}
.cb-filter .filter-options{margin:0}
.cb-filter .filter-options-item{border:0}
.cb-filter .filter-options-title{
    font-size:18px;color:var(--cb-heading);font-weight:400;cursor:pointer;position:relative;
    padding:18px 30px 12px 0;margin:0;text-transform:none;border-bottom:1px solid var(--cb-hairline)
}
.cb-filter .filter-options-title:after{
    content:'\f110';font-family:'molla';font-size:13px;color:var(--cb-heading);position:absolute;right:6px;
    top:22px;border:0;width:auto;height:auto;margin:0
}
.cb-filter .filter-options-title.cb-open:after{content:'\e802'}
.cb-filter .filter-options-content{display:none;margin:0;padding:18px 0 12px;border-bottom:1px solid var(--cb-hairline)}
.cb-filter .filter-options-content.cb-open{display:block}
.cb-filter .filter-options-content .items{list-style:none;margin:0;padding:0}
.cb-filter .filter-options-content .item{margin:0 0 15px;padding:0;line-height:1.3}
.cb-filter .filter-options-content .item:last-child{margin-bottom:0}
.cb-filter .filter-options-content a{
    font-size:13px;color:var(--cb-heading);padding-left:26px;padding-right:44px;position:relative;display:block
}
.cb-filter .filter-options-content a:before{
    content:'';position:absolute;left:0;top:1px;width:14px;height:14px;border-radius:2px;
    background:#f9f9f9;border:1px solid #dadada
}
.cb-filter .filter-options-content a:after{
    content:'\ec2d';font-family:'molla';font-size:9px;color:#fff;position:absolute;left:3px;top:3px;opacity:0;transition:opacity .2s
}
.cb-filter .filter-options-content a:hover{color:var(--cb-accent);box-shadow:none}
.cb-filter .filter-options-content a:hover:before{border-color:var(--cb-heading)}
.cb-filter .filter-options-content .count{
    position:absolute;right:0;top:-1px;min-width:25px;height:20px;line-height:20px;text-align:center;
    border-radius:6px;background:#f8f8f8;color:var(--cb-muted);font-size:12px;font-weight:300;padding:0 5px
}
.cb-filter .filter-options-content .filter-count-label{position:absolute;left:-9999px}
.cb-filter .filter-current{margin-bottom:15px;padding:0;border:0}
.cb-filter .filter-current .filter-current-subtitle{
    font-size:14px;color:var(--cb-heading);font-weight:500;padding:0 0 10px;display:block;border:0
}
.cb-filter .filter-current .items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cb-filter .filter-current .item{
    border:1px solid #eaeaea;border-radius:2px;padding:5px 8px;font-size:13px;color:#222;margin:0;
    display:inline-flex;align-items:center;gap:6px
}
.cb-filter .filter-current .action.remove{position:static;margin:0}
.cb-filter .filter-current .action.remove:before{content:'\f191';font-family:'molla';font-size:11px;color:#999}
.cb-filter .filter-current .item:hover{border-color:#e02b27}
.cb-filter .filter-current .item:hover .action.remove:before{color:#e02b27}
.cb-filter .filter-actions{margin-bottom:20px}
.cb-filter .filter-clear span{font-size:13px;color:var(--cb-muted)}
.cb-filter-close{
    display:none;position:absolute;right:15px;top:10px;background:none;border:0;font-size:20px;
    color:var(--cb-heading);padding:0;z-index:2
}
@media (max-width:991px){
    .cb-filter{
        position:fixed;top:0;left:0;bottom:0;width:100%;max-width:350px;padding:30px 25px;background:#fff;
        box-sizing:border-box;
        z-index:1001;overflow-y:auto;box-shadow:1px 0 6px rgba(51,51,51,.5);opacity:0;visibility:hidden;
        transform:translateX(-100%);transition:all .35s ease
    }
    .cb-filter-open .cb-filter{opacity:1;visibility:visible;transform:translateX(0)}
    .cb-filter-open .page-wrapper:before{
        content:'';position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);z-index:1000
    }
    /* Luma's `.columns{position:relative;z-index:1}` opens a stacking context, so the drawer's
       z-index:1001 is really "1001 inside layer 1" and the overlay above wins. Drop the context
       while the drawer is open; the drawer then stacks against the root, as intended. */
    .cb-filter-open .columns{z-index:auto}
    .cb-filter-close{display:block}
    .page-layout-2columns-left .sidebar-main{padding:0;order:2}
}
@media (min-width:992px){
    .cb-action-filter{display:none}
}

/* ================================================================ 11. PDP */
.catalog-product-view .column.main{padding-bottom:40px}
.catalog-product-view .product-info-main .page-title-wrapper .page-title{text-align:left;line-height:1;margin:0 0 5px}
.catalog-product-view .product-info-main .page-title span{font-size:24px;font-weight:600;letter-spacing:-.48px}
.product-info-main .product-info-stock-sku,
.product-info-main .product.attribute.sku,
.product-info-main .stock.available,
.product-info-main .stock.unavailable{display:none}
.product-info-main .product-info-price{display:flex;align-items:center;padding:6px 0;border:0;margin-bottom:10px}
.product-info-main .product-info-price .price-box .price{font-size:24px;font-weight:400;color:var(--cb-price)}
.product-info-main .price-box .old-price .price{font-size:16px;margin-left:10px}
.product-info-main .product.attribute.overview{margin:0 0 16px}
.product-info-main .product.attribute.overview .value{line-height:26px;color:var(--cb-muted)}
.product-info-main .prices-tier{background:#f5f5f5;padding:10px 15px;border:0;margin:10px 0 15px}
.product-info-main .product-reviews-summary{margin-bottom:10px}

.box-tocart .fieldset{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.box-tocart .field.qty{margin:0}
.box-tocart .field.qty .label{display:none}
.cb-qty{position:relative;display:inline-flex;align-items:center;border:1px solid #dadada;height:52px;background:#fff}
.cb-qty input.qty{
    width:48px;height:50px;border:0;text-align:center;padding:0;font-size:15px;color:var(--cb-heading);
    -moz-appearance:textfield;background:transparent
}
.cb-qty input.qty::-webkit-outer-spin-button,.cb-qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cb-qty-btn{
    width:26px;height:50px;background:none;border:0;color:var(--cb-heading);padding:0;line-height:1;cursor:pointer
}
.cb-qty-btn:hover{color:var(--cb-accent);background:none}
.cb-qty-btn .cb-i{font-size:11px}

.box-tocart{margin-bottom:0}
.box-tocart .actions{display:flex;align-items:center;padding-top:0}
.product-info-main .action.primary.tocart{
    background:transparent;color:var(--cb-accent);border:1px solid var(--cb-accent);border-radius:0;
    font-weight:400;font-size:18px;min-width:198px;padding:10px 15px;line-height:1.6
}
.product-info-main .action.primary.tocart span{text-transform:uppercase;font-size:14px}
.product-info-main .action.primary.tocart .cb-i{font-size:18px;margin-right:8px;vertical-align:-2px}
.product-info-main .action.primary.tocart:hover{
    background:var(--cb-accent);color:#fff;border-color:var(--cb-accent);box-shadow:0 5px 10px rgba(0,0,0,.05)
}
.product-info-main .action.primary.tocart:disabled{opacity:.6}
.product-addto-links{margin:20px 0;display:flex}
.product-addto-links .action{
    background:none;border:0;padding:19px 0;color:var(--cb-accent);font-size:18px;
    display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;flex:1 0
}
.product-addto-links .action + .action{border-left:1px dotted #e5e5e5}
.product-addto-links .action span{color:#666;font-weight:400;font-size:13px;letter-spacing:-.01em;text-transform:none}
/* Luma paints these from a more specific selector with its own icon font */
.product-info-main .product-addto-links .action:before{font-family:'molla' !important;font-size:18px;line-height:1;margin:0}
.product-info-main .product-addto-links .action.towishlist:before{content:'\f234' !important}
.product-info-main .product-addto-links .action.tocompare:before{content:'\f2d0' !important}
.product-addto-links .action:hover,.product-addto-links .action:hover span{color:var(--cb-accent);background:none}
.product-options-wrapper .field .label{color:#666;font-weight:400;font-size:14px}
.product-options-wrapper .field .control select,
.product-options-wrapper .super-attribute-select{
    height:40px;border:1px solid var(--cb-border);border-radius:0;color:var(--cb-muted);
    padding:0 30px 0 20px;min-width:131px;background:#fff
}

@media (min-width:768px){
    /* Luma leaves these content-box, so 50% + 30px padding overflowed the row and dropped
       the info column below the gallery. */
    .catalog-product-view .product.media{width:50%;padding-right:30px;margin-bottom:30px;box-sizing:border-box}
    .catalog-product-view .product-info-main{width:50%;box-sizing:border-box}
}
@media (min-width:992px){
    .catalog-product-view .product-info-main{position:sticky;top:30px;align-self:flex-start}
}

/* PDP tabs — desktop strip, mobile accordion (both Luma-native, re-skinned) */
.product.data.items{margin-top:35px;border:0}
.product.data.items > .item.title{margin:0 3px 0 0}
.product.data.items > .item.title > .switch{
    background:#f0f0f0;border:1px solid #d1d1d1;color:#7d7d7d;font-weight:600;font-size:16px;height:auto;
    padding:11px 25px;line-height:22px;border-radius:0
}
.product.data.items > .item.title > .switch:hover{color:var(--cb-accent)}
/* padding-bottom 12 (not Luma's 2): the active tab must stand 1px taller than the strip so its
   white bottom border hides the panel's top border — that notch is what ties the two together. */
.product.data.items > .item.title.active > .switch,
.product.data.items > .item.title.active > .switch:focus{
    background:#fff;color:var(--cb-heading);border-bottom-color:#fff;
    padding-bottom:12px;position:relative;z-index:1
}
/* margin-top must equal the tab-strip height (11+22+11 + 2px borders) — the strip is floated. */
.product.data.items > .item.content{border:1px solid #d1d1d1;padding:20px;margin-top:46px;background:#fff}
@media (max-width:767px){
    .product.data.items > .item.title > .switch{
        background:#fafafa;border:1px solid var(--cb-hairline);border-bottom:0;font-size:16px;font-weight:400;
        padding:21px 20px;position:relative;color:var(--cb-heading)
    }
    .product.data.items > .item.title > .switch:after{
        content:'\f2c2';font-family:'molla';font-size:12px;color:#8c8c8c;position:absolute;right:20px;top:50%;transform:translateY(-50%)
    }
    .product.data.items > .item.title.active > .switch{background:#fff;color:var(--cb-accent)}
    .product.data.items > .item.title.active > .switch:after{content:'\f28e';color:var(--cb-accent)}
    .product.data.items > .item.content{border:1px solid var(--cb-hairline);border-top:0;padding:0 20px 20px;margin-top:0}
}

/* ============================================================ 12. CART */
.cart-container .form-cart{width:100%}
.cart-summary{background:#f9f9f9;border:1px dashed var(--cb-border);border-radius:3px;padding:10px 15px 20px}
@media (min-width:992px){.cart-summary{padding:25px 30px 30px}}
.cart.table-wrapper .col.qty .control.qty{position:relative;display:inline-block}
.cart.table-wrapper .edit-qty{
    width:26px;position:absolute;top:0;text-align:center;height:40px;line-height:40px;z-index:1;cursor:pointer;
    background:none;border:0;color:var(--cb-heading);padding:0
}
.cart.table-wrapper .edit-qty:hover{color:var(--cb-accent)}
.cart.table-wrapper .edit-qty.cb-qty-minus{left:0}
.cart.table-wrapper .edit-qty.cb-qty-plus{right:0}
.cart.table-wrapper .col.qty .input-text{
    min-width:100px;width:100px;background:#fff;border-color:#dadada;color:var(--cb-muted);height:40px;
    text-align:center;padding:0 26px;-moz-appearance:textfield
}
.cart.table-wrapper .col.qty .input-text::-webkit-outer-spin-button,
.cart.table-wrapper .col.qty .input-text::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cart.table-wrapper .product-item-photo{max-width:60px}
.cart-summary > .title{font-size:16px;font-weight:400;color:var(--cb-heading);border-bottom:1px solid #ccc;padding-bottom:10px}
.cart-summary .block > .title{border-bottom:1px solid #ccc}
.cart-summary .checkout-methods-items .action.primary.checkout{
    background:var(--cb-accent);border-color:var(--cb-accent);color:#fff;text-transform:uppercase;width:100%;border-radius:0
}
.cart-summary .checkout-methods-items .action.primary.checkout:hover{background:var(--cb-accent-hover);border-color:var(--cb-accent-hover)}
.cart.table-wrapper .actions-toolbar > .action,
.cart.table-wrapper .action-gift{
    background:#f2f2f2;border:1px solid #cdcdcd;color:var(--cb-heading);border-radius:0
}
.cart.table-wrapper .actions-toolbar > .action:hover{background:#e2e2e2;border-color:#cdcdcd;color:var(--cb-heading)}
.cart.table-wrapper .cart thead tr th.col{border-bottom:1px solid #d1d1d1;color:var(--cb-heading);font-weight:500}
.cart.table-wrapper .cart > .item{border-top:1px solid #d1d1d1}
.cart-discount .action.primary,.cart-summary .action.primary{border-radius:0}
.checkout-cart-index .cart-summary .block .title strong{font-size:15px;font-weight:400}
@media (min-width:992px){
    .cart-container .form-cart{width:72%;float:left}
    .cart-container .cart-summary{width:26%;float:right;margin-top:0}
}

/* ========================================================= 13. CHECKOUT */
.opc-progress-bar-item > span:before{background:#c2c2c2}
.opc-progress-bar-item._active > span:before{background:#eb5202}
.opc-progress-bar-item._active > span:after{border-color:#eb5202}
.opc-wrapper .step-title,.opc-block-summary > .title,.checkout-payment-method .step-title{
    border-bottom:0;color:var(--cb-heading);font-weight:500;font-size:16px;padding-bottom:0;margin-bottom:18px
}
.opc-block-summary{background:#f9f9f9;border:1px dashed var(--cb-border);border-radius:3px;padding:22px 30px}
.checkout-index-index .action.primary,.checkout-index-index .action-primary{
    background:var(--cb-accent);border-color:var(--cb-accent);border-radius:0
}
.checkout-index-index .action.primary:hover,.checkout-index-index .action-primary:hover{
    background:var(--cb-accent-hover);border-color:var(--cb-accent-hover)
}

/* =============================================== 14. account / forms / CMS */
.login-container .block .block-title,
.form-create-account .fieldset > .legend,
.block-collapsible-nav .title{border-bottom:1px solid var(--cb-hairline)}
.block-collapsible-nav .item.current a,.block-collapsible-nav .item.current > strong{border-color:var(--cb-accent);color:var(--cb-accent)}
.message.success{border-radius:4px}
.cms-page-view .page-main{padding-bottom:50px}
.cms-index-index .page-main,.cms-index-index .columns{max-width:none;padding:0}
.cms-index-index .column.main{padding:0;min-height:0}
.cms-index-index .page-main > .page-title-wrapper{display:none}

/* --- CMS content ---------------------------------------------------------
   The legacy pages were authored inside the molla page-builder, so their markup is
   still wrapped in .section-builder/.frame/.line/.panel-block/.col-des-* scaffolding.
   Those classes carry no styles here, which is fine (they collapse to plain blocks) —
   except that some of them were floated/negatively-margined by molla and the content
   inside still assumes it. Neutralise them explicitly rather than editing 15 pages of
   WYSIWYG HTML by hand. */
.cms-page-view .section-builder,
.cms-page-view .frame,
.cms-page-view .line,
.cms-page-view .panel-block,
.cms-page-view [class*="col-des-"],
.cms-page-view [class*="col-tb-"],
.cms-page-view [class*="col-mb-"]{width:auto;max-width:none;margin:0;padding:0;float:none;display:block}

.cms-page-view .page-title-wrapper .page-title{
    font-size:26px;font-weight:600;color:var(--cb-heading);letter-spacing:-.01em;margin:0 0 25px
}
/* WYSIWYG content is full of pasted filenames, URLs and part numbers with no break
   opportunity; without this a single one of them widens the whole page on a phone. */
.cms-page-view .column.main{color:var(--cb-text);font-size:14px;line-height:1.8;overflow-wrap:break-word}
.cms-page-view .column.main h1,.cms-page-view .column.main h2,
.cms-page-view .column.main h3,.cms-page-view .column.main h4{color:var(--cb-heading);font-weight:600;letter-spacing:-.01em}
.cms-page-view .column.main h2{font-size:22px;margin:35px 0 12px}
.cms-page-view .column.main h3{font-size:17px;margin:28px 0 10px}
.cms-page-view .column.main h4{font-size:15px;margin:22px 0 8px}
.cms-page-view .column.main strong,.cms-page-view .column.main b{color:var(--cb-heading);font-weight:600}
.cms-page-view .column.main a{color:var(--cb-accent)}
.cms-page-view .column.main a:hover{color:var(--cb-accent-hover)}
.cms-page-view .column.main p{margin:0 0 15px}
.cms-page-view .column.main ol,.cms-page-view .column.main ul{margin:0 0 20px;padding-left:20px}
.cms-page-view .column.main li{margin-bottom:6px}

/* WYSIWYG images and embeds carry hardcoded pixel widths — cap them so nothing
   pushes the page into a horizontal scroll on a phone. */
.cms-page-view .column.main img{max-width:100%;height:auto}
.cms-page-view .column.main iframe,
.cms-page-view .column.main embed,
.cms-page-view .column.main object{max-width:100%}
/* wide legacy tables scroll inside themselves instead of widening the page */
.cms-page-view .column.main table{max-width:100%;display:block;overflow-x:auto;border-collapse:collapse}
.cms-page-view .column.main td,.cms-page-view .column.main th{padding:8px 12px;border:1px solid var(--cb-hairline)}

/* search-terms tag cloud */
.cms-page-view .tags-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cms-page-view .tags-list li{margin:0}
.cms-page-view .tags-list a{
    display:inline-block;border:1px solid var(--cb-hairline);padding:5px 12px;font-size:13px;color:var(--cb-muted)
}
.cms-page-view .tags-list a:hover{border-color:var(--cb-accent);color:var(--cb-accent)}