/* Brand look ("מותג", 02.11) for the whole store: header, menu, mobile menu, categories popup, footer,
   info pages, order tracking, category / search grid and cards, filter panel, wishlist, 404, cart side panel,
   cart page, checkout and the upsell popup.

   Loaded only when general.store_look = 'brand' (src/css_style/store_look.php). Classic = nothing loaded.

   Rules this file keeps to:
   - No colour is written here. Every colour is a variable (--sb-*) worked out from the store's own colour
     (cart_effect.cart_color) by store_look.php. Error red is the only fixed colour (it means "error").
   - Inline colours the store writes per product (cart / pay buttons, the chosen shipping and payment row,
     --uc-primary on the upsell popup) are kept: an overlay only darkens them for contrast.
   - Product pages (html.sb-prod) keep their own header, footer, menu and grid: a landing page keeps its design.
     The cart panel and the upsell popup are styled on every page.
   - Look only. No payment or validation rule, no text, price or field is added, hidden or moved by CSS.
     Gateway fields (#Card_Box, #payplus_display_wrap ...) are not styled: checkout fields are scoped to #order_info. */

/* =====================================================================================================
   1. STOREFRONT (every page that is not a product page)
   ===================================================================================================== */
html:not(.sb-prod),html:not(.sb-prod) body,html:not(.sb-prod) #main_app,html:not(.sb-prod) #in_app{background:#fff!important}
html:not(.sb-prod) body,html:not(.sb-prod) body *:not(svg):not(path):not(i){font-family:Rubik,system-ui,Arial,sans-serif!important}

/* ---------- header ---------- */
html:not(.sb-prod) #myHeader header{background:#fff!important;box-shadow:0 1px 0 var(--sb-line)!important}
html:not(.sb-prod) #myHeader{box-shadow:none!important}
html:not(.sb-prod) #myHeader .header_container{min-height:72px;align-items:center;position:relative}
html:not(.sb-prod) #logo_image{max-height:38px!important;width:auto!important}
html:not(.sb-prod) .u-nav-1>li>a{font-size:16px!important;font-weight:600!important;color:var(--sb-ink)!important;padding:24px 14px!important;position:relative;cursor:pointer}
html:not(.sb-prod) .u-nav-1>li>a::after{content:"";position:absolute;right:14px;left:14px;bottom:14px;height:3px;border-radius:3px;background:var(--sb-brand);transform:scaleX(0);transition:transform .18s}
html:not(.sb-prod) .u-nav-1>li>a:hover::after{transform:scaleX(1)}
html:not(.sb-prod) .u-nav-1>li>a:hover{color:var(--sb-brand-d)!important}
html:not(.sb-prod) #cart_icon_number{background:var(--sb-brand)!important;color:var(--sb-on)!important;font-weight:700}
html:not(.sb-prod) #header_text{background:var(--sb-brand)!important;color:var(--sb-on)!important;font-size:14.5px!important;font-weight:600;padding:9px 0!important}

/* ---------- desktop categories popup: one centred panel under the header, names on the pictures ---------- */
html:not(.sb-prod) #myHeader .u-custom-menu,html:not(.sb-prod) #myHeader .u-nav-container,html:not(.sb-prod) #myHeader .u-nav-1,html:not(.sb-prod) #myHeader .u-nav-1>li{position:static!important}
html:not(.sb-prod) #myHeader .u-nav-popup{position:absolute!important;top:100%!important;left:50%!important;right:auto!important;transform:translateX(-50%);width:min(920px,calc(100vw - 48px))!important;box-sizing:border-box!important;z-index:130!important;padding:18px 22px 22px!important;direction:rtl;background:#fff!important;border:0!important;border-top:3px solid var(--sb-brand)!important;border-radius:0 0 16px 16px!important;box-shadow:0 18px 40px rgba(var(--sb-deep-rgb),.16)!important}
html[dir=ltr]:not(.sb-prod) #myHeader .u-nav-popup,html[dir=ltr]:not(.sb-prod) #catalogBox{direction:ltr}
html:not(.sb-prod) .u-nav-popup>br{display:none}
/* hover bridge: the gap between the word and the panel keeps the hover alive */
html:not(.sb-prod) #myHeader .u-nav-popup::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:8px}
html:not(.sb-prod) #catalogBox{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr));gap:16px 12px;margin:0!important;direction:rtl}
html:not(.sb-prod) #catalogBox>div{display:contents!important}
html:not(.sb-prod) #catalogBox>div>div{position:relative;min-width:0;display:block!important}
html:not(.sb-prod) #catalogBox>div>div>div:first-child,html:not(.sb-prod) #catalogBox>div>div>div:first-child>a{display:block}
html:not(.sb-prod) #catalogBox img{display:block!important;box-sizing:content-box!important;width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:cover;padding:0!important;margin:0!important;cursor:pointer;border-radius:12px!important;background:var(--sb-tint);transition:box-shadow .15s}
html:not(.sb-prod) #catalogBox>div>div>div:last-child{position:absolute;left:0;right:0;bottom:0;max-width:none!important;min-height:40px;display:flex!important;align-items:flex-end;justify-content:center;padding:14px 6px 8px;border-radius:0 0 12px 12px;background:linear-gradient(to top,rgba(var(--sb-deep-rgb),.86),rgba(var(--sb-deep-rgb),0));text-align:center;line-height:1.2;pointer-events:none}
html:not(.sb-prod) #catalogBox>div>div>div:last-child>a{pointer-events:auto;color:inherit!important;text-decoration:none!important}
html:not(.sb-prod) #catalogBox span{color:#fff!important;font-weight:700;font-size:13px!important}
html:not(.sb-prod) #catalogBox>div>div:hover img{box-shadow:0 0 0 3px var(--sb-brand)}
/* "show all" = a full-width brand bar on top */
html:not(.sb-prod) #catalogBox>div:first-child>div:first-child{grid-column:1/-1}
html:not(.sb-prod) #catalogBox>div:first-child>div:first-child img{height:0!important;aspect-ratio:auto;padding:0 0 46px!important;background:var(--sb-brand);border-radius:999px!important}
html:not(.sb-prod) #catalogBox>div:first-child>div:first-child>div:last-child{background:none;min-height:0;height:46px;align-items:center;justify-content:flex-start;padding:0 22px}
html:not(.sb-prod) #catalogBox>div:first-child>div:first-child span{font-size:15px!important;color:var(--sb-on)!important}
html:not(.sb-prod) #catalogBox>div:first-child>div:first-child span::after{content:"\2190";margin-inline-start:.4em}
html[dir=ltr]:not(.sb-prod) #catalogBox>div:first-child>div:first-child span::after{content:"\2192"}
html:not(.sb-prod) #catalogBox>div:first-child>div:first-child:hover img{background:var(--sb-brand-d);box-shadow:none}

/* ---------- info pages (contact, about, policies, accessibility): a brand title band, then a readable column ---------- */
html:not(.sb-prod) .text_page_info{margin-top:0!important;padding-top:0!important}
html:not(.sb-prod) .text_page_info>div{padding:0 0 48px!important}
html:not(.sb-prod) .text_page_info>div>center{display:block;background:linear-gradient(120deg,var(--sb-brand),var(--sb-brand-g));padding:64px 20px 58px;margin-bottom:40px}
html:not(.sb-prod) .text_page_info>div>center h2{color:var(--sb-on)!important;font-size:46px!important;font-weight:800!important;margin:0!important;letter-spacing:-.01em}
html:not(.sb-prod) .text_page_info>div>div{max-width:720px;margin:0 auto;padding:0 20px!important;color:var(--sb-ink)!important;font-size:17px!important;line-height:1.8!important}
html:not(.sb-prod) .text_page_info p>strong:only-child{display:block;font-size:22px;font-weight:800;color:var(--sb-ink);margin-top:30px}
html:not(.sb-prod) .text_page_info p>strong:only-child::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--sb-brand);margin-inline-end:10px;vertical-align:middle}
html:not(.sb-prod) .text_page_info ul{padding-inline-start:0!important;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 22px!important}
html:not(.sb-prod) .text_page_info li{background:var(--sb-tint);border-radius:16px;padding:16px 18px;line-height:1.55}
html:not(.sb-prod) .text_page_info li strong{display:block;color:var(--sb-brand-d)}
html:not(.sb-prod) .text_page_info a[href^="mailto"]{color:var(--sb-brand-d)!important;font-weight:700;font-size:19px}
html:not(.sb-prod) .text_page_info .whatsapp-button{border-radius:999px!important;padding:15px 28px!important;font-size:17px}

/* ---------- order tracking ---------- */
html:not(.sb-prod) #in_app .ot_wrap{background:linear-gradient(180deg,var(--sb-tint),#fff 70%);min-height:0!important;padding:70px 16px 80px!important}
html:not(.sb-prod) #in_app .ot_card{border:0!important;border-radius:24px!important;box-shadow:0 20px 50px rgba(var(--sb-deep-rgb),.12)!important;padding:44px 36px!important;max-width:580px!important}
html:not(.sb-prod) #in_app .ot_card h2{font-size:34px!important;font-weight:800!important;color:var(--sb-ink)!important}
html:not(.sb-prod) #in_app .ot_card .ot_sub{color:var(--sb-mut)!important;font-size:16px!important}
html:not(.sb-prod) #in_app .ot_form input#track{width:100%!important;flex:1 1 auto!important;min-height:56px!important;height:58px!important;border-radius:999px!important;border:2px solid var(--sb-line)!important;background:#fff!important;font-size:16px!important;padding:0 22px!important}
html:not(.sb-prod) #in_app .ot_form input#track:focus{border-color:var(--sb-brand)!important;box-shadow:0 0 0 4px rgba(var(--sb-brand-rgb),.14)!important}
html:not(.sb-prod) #in_app .ot_form button#openButton{height:58px!important;border-radius:999px!important;background:var(--sb-brand)!important;color:var(--sb-on)!important;font-size:17px!important;font-weight:700!important;padding:0 30px!important}

/* ---------- search bar, breadcrumbs, category title ---------- */
html:not(.sb-prod) #search_bar_wrap{background:linear-gradient(120deg,var(--sb-brand),var(--sb-brand-g));padding:36px max(20px,calc(50% - 380px)) 34px!important}
html:not(.sb-prod) #Search_input{height:58px!important;border-radius:999px!important;border:0!important;padding:0 24px!important;font-size:17px!important}
html:not(.sb-prod) #Order_Search_click_mob{width:58px!important;height:58px!important;padding:17px!important;border-radius:50%!important;background:var(--sb-deep)!important}
html:not(.sb-prod) #in_app>hr{display:none}
html:not(.sb-prod) #breadcrumbs_nav{max-width:1200px;margin:20px auto 0;padding:0 24px!important;font-size:14px!important}
html:not(.sb-prod) #breadcrumbs_current{color:var(--sb-brand-d)!important;font-weight:600}
html:not(.sb-prod) #filter_title{max-width:1200px;margin:6px auto 0!important;padding:0 24px!important;display:flex;align-items:center;justify-content:space-between}
html:not(.sb-prod) #title_collections_page{font-size:36px!important;font-weight:800!important;color:var(--sb-ink)!important;margin:0!important}
html:not(.sb-prod) #cf-open-btn{background:var(--sb-ink)!important;border:0!important;border-radius:999px!important;height:46px;padding:0 20px!important;color:#fff!important;font-weight:600;font-size:15px!important}
html:not(.sb-prod) .may_also_like_wrapper h1{font-size:36px!important;font-weight:800!important;color:var(--sb-ink)}

/* ---------- category / search grid and cards ---------- */
html:not(.sb-prod) #in_app .may_also_like_wrapper{background:transparent!important}
html:not(.sb-prod) #products_container_id.products_container{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;column-gap:24px!important;row-gap:40px!important;max-width:1240px;margin:22px auto 0!important;padding:0 24px!important;justify-content:stretch!important;box-sizing:border-box}
html:not(.sb-prod) #products_container_id .products_container_images_and_prices_and_title{position:relative;width:auto!important;margin:0!important;min-width:0}
html:not(.sb-prod) #products_container_id .products_container_images{position:relative;overflow:hidden;border-radius:18px;background:var(--sb-tint);transition:box-shadow .2s}
html:not(.sb-prod) #products_container_id .products_container_images>a{display:block}
/* most photos are 2:3 and fill the frame; square ones sit whole inside it (contain), nothing is cut */
html:not(.sb-prod) #products_container_id img.products_container_image_image{display:block;width:100%!important;height:auto!important;aspect-ratio:2/3;object-fit:contain;margin:0!important;border-radius:18px!important;transition:transform .35s ease,opacity .2s}
html:not(.sb-prod) #products_container_id .products_container_title_and_price{padding:12px 4px 0!important;text-align:start!important}
html:not(.sb-prod) #products_container_id .products_container_title{white-space:normal!important;display:block!important;overflow:visible!important;height:auto!important;margin:0 0 8px!important;min-height:2.7em;line-height:1.35}
/* the name link itself holds the two lines, so the whole name is one clickable box */
html:not(.sb-prod) #products_container_id .products_container_title>a{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px!important;line-height:1.35;color:var(--sb-ink)!important;font-weight:600;text-decoration:none!important}
html:not(.sb-prod) #products_container_id .products_container_price{align-items:center!important;gap:10px}
html:not(.sb-prod) #products_container_id .products_container_price>div[data-product-link]{flex:0 0 auto;display:flex!important;align-items:center;justify-content:center;width:40px;height:40px;box-sizing:border-box;padding:0!important;cursor:pointer;border:0!important;border-radius:50%!important;background:var(--sb-brand);transition:background .15s,transform .15s}
html:not(.sb-prod) #products_container_id .products_container_price>div[data-product-link] img{width:20px!important;height:20px!important;filter:brightness(0) invert(1)}
html:not(.sb-prod) #products_container_id .products_container_price_reguler{min-width:0}
html:not(.sb-prod) #products_container_id .products_container_price_reguler,html:not(.sb-prod) #products_container_id .products_container_price_price_itself{color:var(--sb-brand-d)!important;font-weight:800}
html:not(.sb-prod) #products_container_id .products_container_price_price_itself{font-size:18px!important}
html:not(.sb-prod) #products_container_id .symbole_code_show,html:not(.sb-prod) #products_container_id .dot_number{color:var(--sb-brand-d)}
html:not(.sb-prod) #products_container_id .products_container_price_was{color:var(--sb-mut)!important;font-size:13px!important;font-weight:500}
html:not(.sb-prod) #products_container_id .products_container_price_was .symbole_code_show{color:inherit}
html:not(.sb-prod) #products_container_id .grid-color-options{padding:8px 4px 0!important}
html:not(.sb-prod) #products_container_id .grid-color-toggle{border-color:var(--sb-line)!important}
html:not(.sb-prod) #products_container_id .grid-color-count{direction:ltr;unicode-bidi:isolate}
html:not(.sb-prod) #products_container_id .wishlist-grid-heart{width:36px!important;height:36px!important;top:10px!important;left:10px!important;z-index:2!important;background:#fff!important}
html:not(.sb-prod) #products_container_id .skeleton{background-color:var(--sb-tint2)!important;border-radius:18px!important}
html:not(.sb-prod) #products_container_id .skeleton-container .skeleton__may_also_like_img{height:auto!important;aspect-ratio:2/3}
@media(hover:hover){
  html:not(.sb-prod) #products_container_id .products_container_images_and_prices_and_title:hover .products_container_images{box-shadow:0 0 0 3px var(--sb-brand)}
  html:not(.sb-prod) #products_container_id .products_container_images_and_prices_and_title:hover img.products_container_image_image{transform:scale(1.04)}
  html:not(.sb-prod) #products_container_id .products_container_images_and_prices_and_title:hover .products_container_title>a{color:var(--sb-brand-d)!important}
  html:not(.sb-prod) #products_container_id .products_container_price>div[data-product-link]:hover{background:var(--sb-deep)}
}

/* ---------- the "nothing here" boxes: empty category, empty wishlist, filter with no results ---------- */
html:not(.sb-prod) #products_container_id .sb-empty-collection,html:not(.sb-prod) #products_container_id .wishlist_empty_box,html:not(.sb-prod) .cf-no-results{grid-column:1/-1;max-width:520px;margin:30px auto 60px!important;padding:44px 24px!important;background:var(--sb-tint)!important;border-radius:24px!important;color:var(--sb-ink)!important;text-align:center}
html:not(.sb-prod) .sb-empty-collection .sb-empty-title,html:not(.sb-prod) .wishlist_empty_box .wishlist_empty_title{font-size:21px!important;font-weight:800!important;color:var(--sb-ink)!important}
html:not(.sb-prod) .sb-empty-collection .sb-empty-hint,html:not(.sb-prod) .wishlist_empty_box .wishlist_empty_hint{font-size:16px!important;color:var(--sb-mut)!important}
html:not(.sb-prod) .sb-empty-collection a.sb-empty-btn{display:inline-flex;align-items:center;min-height:50px;padding:0 26px;border-radius:999px;background:var(--sb-brand)!important;color:var(--sb-on)!important;font-weight:700;font-size:16px;text-decoration:none!important}
html:not(.sb-prod) .wishlist_empty_box .wishlist_empty_heart{color:var(--sb-brand)!important}

/* ---------- filter panel ---------- */
html:not(.sb-prod) .cf-overlay{background:rgba(var(--sb-deep-rgb),.55)!important}
html:not(.sb-prod) .cf-drawer,html:not(.sb-prod) .cf-drawer *{font-family:Rubik,system-ui,sans-serif!important}
html:not(.sb-prod) .cf-drawer{width:420px}
/* a closed panel is really gone (not reachable by Tab, never peeks into the page) */
html:not(.sb-prod) .cf-drawer:not(.cf-drawer-open){visibility:hidden;transition:transform .32s cubic-bezier(.32,.72,0,1),visibility 0s .32s}
html:not(.sb-prod) .cf-drawer-header{background:linear-gradient(120deg,var(--sb-brand),var(--sb-brand-g));border:0!important}
html:not(.sb-prod) .cf-drawer-title{color:var(--sb-on)!important;font-size:19px!important;font-weight:700!important}
html:not(.sb-prod) .cf-drawer-close{width:44px!important;height:44px!important;background:rgba(255,255,255,.2)!important;color:var(--sb-on)!important}
html:not(.sb-prod) .cf-section-toggle span:first-child{color:var(--sb-brand-d)!important;font-weight:700!important;font-size:15px!important}
html:not(.sb-prod) .cf-radio-item{min-height:44px;font-size:15.5px!important}
html:not(.sb-prod) .cf-radio-item input[type="radio"]:checked~.cf-radio-circle{border-color:var(--sb-brand)!important}
html:not(.sb-prod) .cf-radio-item input[type="radio"]:checked~.cf-radio-circle::after{background:var(--sb-brand)!important}
html:not(.sb-prod) .cf-size-chip{border-radius:999px!important;border-color:var(--sb-line)!important}
html:not(.sb-prod) .cf-size-chip.cf-active{background:var(--sb-brand)!important;border-color:var(--sb-brand)!important;color:var(--sb-on)!important}
html:not(.sb-prod) .cf-size-chip,html:not(.sb-prod) .cf-color-label{unicode-bidi:plaintext}
html:not(.sb-prod) .cf-color-item{width:64px!important}
html:not(.sb-prod) .cf-color-label{max-width:64px!important;white-space:normal!important;line-height:1.25;text-align:center}
html:not(.sb-prod) .cf-slider-range,html:not(.sb-prod) .cf-slider-thumb{background:var(--sb-brand)!important}
html:not(.sb-prod) .cf-btn-apply{background:var(--sb-brand)!important;color:var(--sb-on)!important}
html:not(.sb-prod) .cf-btn-clear{border-color:var(--sb-line)!important;color:var(--sb-ink)!important}
html:not(.sb-prod) .cf-btn-clear,html:not(.sb-prod) .cf-btn-apply{min-height:50px;font-size:15px!important}
html:not(.sb-prod) .cf-no-results{font-size:19px!important;font-weight:700!important}
/* while the panel is open the floating accessibility button waits behind it (it sat on "show results") */
body:has(.cf-drawer-open) #acc-toggle,body:has(.cf-drawer-open) #acc-root{z-index:9990!important}

/* ---------- 404 (the page itself is drawn by main.js load_not_found_page()) ---------- */
html:not(.sb-prod) .sb-404{color:var(--sb-ink)!important}
html:not(.sb-prod) .sb-404 .sb-404-code{color:var(--sb-brand)!important;font-weight:800}
html:not(.sb-prod) .sb-404 .sb-404-title{color:var(--sb-ink)!important;font-weight:800!important}
html:not(.sb-prod) .sb-404 .sb-404-text{color:var(--sb-mut)!important}
html:not(.sb-prod) .sb-404 .sb-404-row input{border-radius:999px!important;border:2px solid var(--sb-line)!important}
html:not(.sb-prod) .sb-404 .sb-404-row input:focus{border-color:var(--sb-brand)!important;box-shadow:0 0 0 4px rgba(var(--sb-brand-rgb),.14)!important;outline:0}
html:not(.sb-prod) .sb-404 .sb-404-row button,html:not(.sb-prod) .sb-404 a.sb-404-btn.sb-404-main{background:var(--sb-brand)!important;color:var(--sb-on)!important;border-radius:999px!important}
html:not(.sb-prod) .sb-404 a.sb-404-btn:not(.sb-404-main){background:var(--sb-tint)!important;color:var(--sb-brand-d)!important;border-radius:999px!important}
/* the old server footer (English words) never shows on the 404 page */
html:not(.sb-prod) body.sb-is-404 #server_footer{display:none!important}

/* ---------- footer: deep brand tone, readable white text, the brand colour only as accent ---------- */
html:not(.sb-prod) footer.mft{background:var(--sb-deep)!important}
html:not(.sb-prod) footer.mft .mft-tag,html:not(.sb-prod) footer.mft .mft-news-sub{color:rgba(255,255,255,.82)!important}
html:not(.sb-prod) footer.mft .mft-news-h{color:#fff!important;font-weight:800!important;font-size:24px!important}
html:not(.sb-prod) footer.mft .mft-form input{border-radius:999px!important;border:0!important}
html:not(.sb-prod) footer.mft .mft-form button{background:var(--sb-brand)!important;color:var(--sb-on)!important;border-radius:999px!important;font-weight:700}
html:not(.sb-prod) footer.mft h4{color:var(--sb-soft)!important;font-size:14px!important;letter-spacing:0!important}
html:not(.sb-prod) footer.mft .mft-col a{color:#fff!important;font-size:15.5px!important}
html:not(.sb-prod) footer.mft .mft-col span{color:rgba(255,255,255,.75)!important}
html:not(.sb-prod) footer.mft .mft-secure,html:not(.sb-prod) footer.mft .mft-copy{color:rgba(255,255,255,.78)!important}
html:not(.sb-prod) footer.mft .mft-top,html:not(.sb-prod) footer.mft .mft-bar,html:not(.sb-prod) footer.mft .mft-cols{border-color:rgba(255,255,255,.14)!important}

/* ---------- mobile menu ---------- */
html:not(.sb-prod) #overlay{background:rgba(var(--sb-deep-rgb),.55)!important}
html:not(.sb-prod) #mySidebar{background:#fff!important}
html:not(.sb-prod) #mySidebar>div:first-child{background:var(--sb-brand);color:var(--sb-on);padding:18px 18px 16px!important}
html:not(.sb-prod) #mySidebar>div:first-child>span{font-weight:800!important;font-size:21px}
html:not(.sb-prod) #mySidebar>div:first-child svg{stroke:var(--sb-on)}
html:not(.sb-prod) #mySidebar>hr:first-of-type{display:none}
html:not(.sb-prod) #mySidebar hr{border-color:var(--sb-line)!important}
/* categories: chips in two columns, a small round picture and the name (the whole chip is one link) */
html:not(.sb-prod) #Category_Name_Show{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;direction:rtl;padding:14px 16px 12px}
html[dir=ltr]:not(.sb-prod) #Category_Name_Show{direction:ltr}
html:not(.sb-prod) #Category_Name_Show>div{display:contents!important}
html:not(.sb-prod) #Category_Name_Show>div>div{display:flex!important;align-items:center;gap:8px;min-width:0;min-height:48px;border:1.5px solid var(--sb-line);border-radius:999px;padding:0 5px 0 10px;text-align:start;background:#fff;cursor:pointer}
html:not(.sb-prod) #Category_Name_Show>div>div a{color:inherit!important;text-decoration:none!important;display:block}
html:not(.sb-prod) #Category_Name_Show img{display:block;width:36px!important;height:36px!important;flex:0 0 36px;object-fit:cover;border-radius:50%!important;margin:0;background:var(--sb-tint)}
html:not(.sb-prod) #Category_Name_Show>div>div>div:last-child{max-width:none!important;margin:0;line-height:1.2;min-width:0}
html:not(.sb-prod) #Category_Name_Show span.catgroy_Text{font-size:14px!important;font-weight:600!important;color:var(--sb-ink)}
html:not(.sb-prod) #Category_Name_Show>div:first-child>div:first-child{border-color:var(--sb-brand);background:var(--sb-tint)}
html:not(.sb-prod) #Category_Name_Show>div:first-child>div:first-child span.catgroy_Text{color:var(--sb-brand-d)!important}
html:not(.sb-prod) #short_links_section>div:first-child{color:var(--sb-brand-d);font-weight:700}
html:not(.sb-prod) #short_links{align-items:stretch!important;padding:0 18px!important}
html:not(.sb-prod) #short_links .short_links{display:block!important;font-size:19px!important;font-weight:600;color:var(--sb-ink)!important;padding:13px 0!important;border-bottom:1px solid var(--sb-line);text-align:start}
html:not(.sb-prod) #bottom_menu{display:flex!important;box-sizing:border-box!important;width:auto!important;justify-content:space-around;background:var(--sb-tint);margin:8px 14px;border-radius:999px;padding:8px!important}
html:not(.sb-prod) #bottom_menu img{width:30px!important;height:30px!important}

/* the floating accessibility button: smaller, in the bottom corner, never on the footer sign-up */
html:not(.sb-prod) #acc-toggle{top:auto!important;bottom:16px!important;left:12px!important;width:40px!important;height:40px!important}

@media(max-width:991px){
  html:not(.sb-prod) #myHeader .header_container{min-height:60px}
  html:not(.sb-prod) #logo_image{max-height:30px!important}
  html:not(.sb-prod) .text_page_info>div>center{padding:38px 16px 34px;margin-bottom:26px}
  html:not(.sb-prod) .text_page_info>div>center h2{font-size:32px!important}
  html:not(.sb-prod) .text_page_info>div>div{font-size:16.5px!important}
  html:not(.sb-prod) .text_page_info ul{grid-template-columns:1fr}
  html:not(.sb-prod) #in_app .ot_card{padding:30px 18px!important}
  html:not(.sb-prod) #in_app .ot_form{flex-direction:column}
  html:not(.sb-prod) #in_app .ot_form button#openButton{justify-content:center}
  html:not(.sb-prod) #search_bar_wrap{padding:22px 16px!important}
  html:not(.sb-prod) #title_collections_page{font-size:28px!important}
  html:not(.sb-prod) .may_also_like_wrapper h1{font-size:28px!important}
  html:not(.sb-prod) #breadcrumbs_nav,html:not(.sb-prod) #filter_title{padding:0 16px!important}
  html:not(.sb-prod) #acc-toggle{bottom:14px!important;left:10px!important;width:36px!important;height:36px!important}
  html:not(.sb-prod) footer.mft .mft-news{background:rgba(255,255,255,.07);border-radius:22px;padding:20px 18px}
  html:not(.sb-prod) #products_container_id.products_container{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important;row-gap:26px!important;padding:0 14px!important;margin-top:14px!important}
  html:not(.sb-prod) #products_container_id .products_container_images,html:not(.sb-prod) #products_container_id img.products_container_image_image{border-radius:14px!important}
  html:not(.sb-prod) #products_container_id .products_container_title>a{font-size:14.5px!important}
  html:not(.sb-prod) #products_container_id .products_container_price_price_itself{font-size:17px!important}
  html:not(.sb-prod) #products_container_id .products_container_title_and_price{padding:10px 2px 0!important}
  html:not(.sb-prod) #products_container_id .products_container_price>div[data-product-link]{width:38px;height:38px}
  html:not(.sb-prod) #products_container_id .products_container_price_was{display:block;margin:0!important}
  /* phone: the filter panel comes up from the bottom, thumb-height */
  html:not(.sb-prod) .cf-drawer{top:auto!important;bottom:0;right:0;left:0;width:100%!important;height:88vh!important;transform:translateY(100%)!important}
  html:not(.sb-prod) .cf-drawer.cf-drawer-open{transform:none!important}
}

/* =====================================================================================================
   2. CART + CHECKOUT + UPSELL POPUP (the quiet build's structure, in the brand's tones)
   Old browsers without :has() skip this part and keep today's look.
   ===================================================================================================== */
@supports selector(:has(*)) {

html:has(#hold_all),html:has(#hold_all) body,body:has(#hold_all) #main_app,body:has(#hold_all) #in_app{background:var(--sb-bg)!important}
#hold_all{--qc-red:#d92d20;color:var(--sb-ink)}

/* ---------- checkout: titles ---------- */
#logo_top{background:transparent!important;border:0!important;box-shadow:none!important}
#logo_top #logo_image{mix-blend-mode:multiply}
#info_title_text,#address_title_text,#ship_title_text,#payment_title_text{font-size:19px!important;font-weight:700!important;color:var(--sb-ink)!important;margin:30px 0 14px!important}
#info_title_text{margin-top:0!important}
#Payment_Form>.inner-spacer{display:none!important}
#Payment_Form>br,.Payment_box_all>br,#order_info p:empty{display:none!important}
#order_info p{margin:0!important}

/* ---------- checkout: fields (customer details only) ---------- */
#order_info .form-group input,#order_info .form-group select{height:58px!important;border-radius:14px!important;background:#fff!important;font-size:16px!important;padding-top:26px!important;padding-bottom:8px!important;outline:1.5px solid var(--sb-line)!important;outline-offset:-1px!important;box-shadow:none!important;transition:box-shadow .15s}
#order_info .form-group input:focus,#order_info .form-group select:focus{outline:2px solid var(--sb-brand)!important;box-shadow:0 0 0 4px rgba(var(--sb-brand-rgb),.12)!important}
#order_info .form-group label.label_style{color:var(--sb-mut)!important}
#order_info .form-group label.label_style:not(.label_up){transform:translateY(19px)!important;font-size:16px!important}
#order_info .form-group label.label_style.label_up{transform:translateY(8px)!important;font-size:12.5px!important}
#name_row,#zip_city{margin:12px 0!important;gap:12px!important}
#name_row>div,#zip_city>div{flex:1 1 0!important;min-width:0!important;width:auto!important;margin:0!important}
#name_row input,#zip_city input{width:100%!important}
#order_info>.form-group{margin:12px 0!important}
#order_info>p>.form-group{margin:12px 0!important}
/* the store's own red mark on a missing field, also while the cursor is in it */
#order_info .form-group input[style*="red"],#order_info .form-group input[style*="red"]:focus{outline:2px solid var(--qc-red)!important;background:#fff8f7!important;box-shadow:0 0 0 4px rgba(217,45,32,.10)!important}

/* ---------- checkout: choice rows. The colour of the chosen row stays the store's inline one ---------- */
.Box_Ship,#Payment_Form .pay-row{border-radius:16px!important;min-height:64px!important;padding:10px 18px!important;align-items:center!important;gap:12px}
.Box_Ship:has(input:checked),#Payment_Form .pay-row:has(input:checked){border-width:2px!important;border-style:solid!important;background-image:linear-gradient(rgba(255,255,255,.72),rgba(255,255,255,.72))!important}
.Box_Ship:not(:has(input:checked)),#Payment_Form .pay-row:not(:has(input:checked)){background:#fff!important;border:1.5px solid var(--sb-line)!important}
#Payment_Form .pay-row{margin-bottom:10px!important}
.just_Box_Ship{margin-bottom:10px}
#Payment_Form>span{display:block;color:var(--sb-mut);margin:-6px 0 12px}

/* ---------- checkout: pay button. Its colour stays the store's inline one; an overlay darkens it for contrast ---------- */
#send_payment{border-radius:16px!important;height:62px!important;padding:0 24px!important;background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18))!important;color:#fff!important;font-weight:700!important;letter-spacing:0!important;box-shadow:0 8px 20px rgba(var(--sb-deep-rgb),.20)!important}
.checkout-info-links{padding:18px 0 28px!important}

/* ---------- checkout: summary ---------- */
.cart_product_title{font-weight:600!important;line-height:1.35!important;margin:0 0 3px!important}
.cart_product_optine{color:var(--sb-mut)!important;margin:0!important}
.img_cart_product{border-radius:12px!important}
.product-thumbnail__quantity{background:var(--sb-ink)!important;color:#fff!important}
#discount_input_button{gap:10px!important;margin:18px 0!important}
#discount_input_button .form-group{flex:1 1 0!important;width:auto!important;min-width:0!important}
#discount_input_button .form-group p{margin:0!important}
#discount_input_button .form-group input{width:100%!important;height:50px!important;border-radius:12px!important;background:#fff!important;font-size:16px!important;padding-top:20px!important;padding-bottom:6px!important;outline:1.5px solid var(--sb-line)!important;outline-offset:-1px!important;box-shadow:none!important}
#discount_input_button .form-group input:focus{outline:2px solid var(--sb-brand)!important}
#discount_input_button label.label_style{color:var(--sb-mut)!important}
#discount_input_button label.label_style:not(.label_up){transform:translateY(15px)!important}
#discount_input_button label.label_style.label_up{transform:translateY(5px)!important}
#discount_button{height:50px!important;border-radius:12px!important;background-image:linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.86))!important;box-shadow:none!important}
#discount_button,#discount_button span{color:var(--sb-ink)!important;font-weight:700!important}
.cart_totals_row{padding:7px 0!important}
.cart_totals_label,.cart_totals_label span{color:var(--sb-mut)}
#total_show{border-top:1px solid var(--sb-line)!important;margin-top:8px!important;padding-top:14px!important}
#total_show .cart_totals_label,#total_show .cart_totals_label span{color:var(--sb-ink)!important;font-size:18px!important;font-weight:800!important}
#total_show .cart_totals_value,#total_show .cart_totals_value span{color:var(--sb-ink)!important;font-size:24px!important;font-weight:800!important}

/* ---------- checkout layout: computer. The grid follows the page direction, so LTR mirrors by itself ---------- */
@media (min-width:992px){
  #hold_all{grid-template-columns:minmax(0,1fr) 400px!important;max-width:1090px!important;margin:0 auto!important;column-gap:28px!important;min-height:0!important}
  #logo_top{padding:22px 0 18px!important}
  #cart_info{background:transparent!important;padding:0 0 40px!important;border:0!important}
  #cart_info .container{position:sticky;top:24px;width:100%!important;max-width:none!important;background:#fff!important;border-radius:22px;box-shadow:0 8px 30px rgba(var(--sb-deep-rgb),.07);padding:22px 8px!important}
  #content{padding:0 16px!important}
  #form_column{justify-self:stretch!important;max-width:none!important;width:auto!important;margin:0!important;padding:0 0 40px!important}
  #Form_all{width:auto!important;max-width:none!important;background:#fff;border-radius:22px;box-shadow:0 8px 30px rgba(var(--sb-deep-rgb),.07);padding:30px 34px 8px!important}
  #order_info .form-group input{width:100%!important}
}

/* ---------- checkout layout: phone and narrow windows ---------- */
@media (max-width:991px){
  #cart_info .flex-text{background:#fff!important;border:0!important;border-radius:14px;margin:0 16px!important;padding:14px 16px!important;box-shadow:0 2px 12px rgba(var(--sb-deep-rgb),.06)}
  #cart_info,#cart_info .container{background:transparent!important;border:0!important}
  #content{background:#fff;border-radius:16px;margin:8px 16px 0!important;padding:14px!important;width:auto!important;box-shadow:0 2px 12px rgba(var(--sb-deep-rgb),.06)}
  #form_column{padding:0 16px 24px!important;max-width:none!important}
  #Form_all{background:#fff;border-radius:20px;box-shadow:0 2px 14px rgba(var(--sb-deep-rgb),.06);padding:22px 16px 6px!important;margin-top:12px}
}

/* ---------- sticky pay button, phone in portrait only. Under 560px high (landscape, or a keyboard that shrinks the page)
   it goes back into the page so it never takes the little room left. display is never set here: the store hides this
   button with inline display:none when the PayPlus panel opens, and that keeps working. ---------- */
@media (max-width:991px) and (min-height:560px){
  html:has(#Payment_Form){scroll-padding-bottom:90px}
  #send_payment{position:fixed!important;inset-inline:0;bottom:0;width:100%!important;border-radius:0!important;height:66px!important;z-index:60;box-shadow:0 -6px 20px rgba(var(--sb-deep-rgb),.14)!important}
  #form_column{padding-bottom:96px!important}
  /* the accessibility button stays, smaller and in the page margin, above the bar */
  body:has(#Payment_Form) #acc-toggle{top:auto!important;bottom:78px!important;width:30px!important;height:30px!important}
  html[dir=rtl] body:has(#Payment_Form) #acc-toggle{left:1px!important;right:auto!important}
  html[dir=ltr] body:has(#Payment_Form) #acc-toggle{right:1px!important;left:auto!important}
}

/* ---------- cart side panel (every page, product pages too) ---------- */
.cart-slide-drawer{background:var(--sb-bg)!important}
.cart-slide-drawer:not(.open){box-shadow:none!important}
.cart-slide-drawer.slide-from-left{border-radius:0 22px 22px 0!important}
.cart-slide-drawer.slide-from-right{border-radius:22px 0 0 22px!important}
.cart-slide-overlay.open{background:rgba(var(--sb-deep-rgb),.35)!important;backdrop-filter:blur(2px)}
.cart-slide-header{background:transparent!important;border:0!important;padding:18px 20px 8px!important}
.cart-slide-header-title{font-size:20px!important;font-weight:800!important;color:var(--sb-ink)!important}
.cart-slide-info-bar{background:transparent!important;border:0!important;justify-content:flex-start!important;gap:6px!important;padding:0 16px 12px!important;flex-wrap:wrap}
.cart-slide-info-item{background:var(--sb-tint)!important;color:var(--sb-mut)!important;border-radius:99px!important;padding:5px 10px!important;font-size:12.5px!important;font-weight:500!important}
.cart-slide-products{background:transparent!important;padding:0 14px!important}
.cart-slide-product-item{background:#fff!important;border-radius:18px!important;padding:14px!important;box-shadow:0 4px 16px rgba(var(--sb-deep-rgb),.06)!important;border:0!important}
.cart-slide-product-img{border-radius:12px!important}
.cart-slide-product-title{font-size:15px!important;font-weight:600!important;line-height:1.35!important;color:var(--sb-ink)}
.cart-slide-per-unit{font-size:13px!important;color:var(--sb-mut)!important}
.cart-slide-product-variant{font-size:13px!important}
.cart-slide-qty-wrap{border:0!important;background:var(--sb-bg)!important;border-radius:99px!important;overflow:hidden}
.cart-slide-qty-btn{background:transparent!important;border:0!important;width:34px!important;height:34px!important;font-size:17px!important}
.cart-slide-qty-input{background:transparent!important;border:0!important;font-size:15px!important;font-weight:600!important}
.cart-slide-price{font-size:18px!important;font-weight:800!important;color:var(--sb-ink)!important}
.cart-slide-footer{background:#fff!important;border-radius:22px 22px 0 0!important;box-shadow:0 -6px 22px rgba(var(--sb-deep-rgb),.07)!important;border:0!important;padding:18px!important}
.cart-slide-total-row.main-total{font-size:20px!important;font-weight:800!important;margin-bottom:12px!important}
.cart-slide-checkout-btn,.cart-slide-empty-btn{border-radius:16px!important;font-weight:700!important;background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18))!important;color:#fff!important}
.cart-slide-checkout-btn{height:60px!important;font-size:18px!important;width:100%!important;margin:0!important;animation:none!important;box-shadow:0 8px 20px rgba(var(--sb-deep-rgb),.20)!important}

/* ---------- cart page (the store setting that opens a page instead of the panel) ---------- */
body:has(#atc_top #top_nave){background:var(--sb-bg)!important}
#atc_top,#top_nave,#cart_info_products,.cart_info_row{background:transparent!important;border-color:transparent!important}
#header_title{font-weight:800!important;color:var(--sb-ink)}
.cart_info_item{background:var(--sb-tint);color:var(--sb-mut);border-radius:99px;padding:5px 10px;font-size:12.5px;font-weight:500}
.cart_info_row{gap:6px;flex-wrap:wrap}
.cpg-card{background:#fff!important;border:0!important;border-radius:18px!important;padding:14px!important;box-shadow:0 4px 16px rgba(var(--sb-deep-rgb),.06)!important}
.cpg-title{font-weight:600!important;line-height:1.35!important}
.cpg-per-unit{color:var(--sb-mut)!important}
.cpg-qty-wrap{border:0!important;background:var(--sb-bg)!important;border-radius:99px!important;overflow:hidden}
.cpg-qty-wrap button,.cpg-qty-wrap input{background:transparent!important;border:0!important}
.cpg-price{font-weight:800!important;color:var(--sb-ink)!important}
#BottomBUTTOS{background:#fff!important;border:0!important;border-radius:22px 22px 0 0!important;box-shadow:0 -6px 22px rgba(var(--sb-deep-rgb),.07)!important}
#button_cart_page,#button_cart_page_top{border-radius:16px!important;font-weight:700!important;background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18))!important;color:#fff!important;animation:none!important;box-shadow:0 8px 20px rgba(var(--sb-deep-rgb),.20)!important}

/* ---------- upsell popup = the cart panel's look (FIXR3-UPS 02.11): the panel's tint, a white card, the panel's dark pay-style button.
   Its colour (--uc-primary) is the cart panel button's colour: the page's own one (upsell_cart.js reads the same cookie as cart_slide.js) ---------- */
#upsell-cart-overlay{background:rgba(var(--sb-deep-rgb),.35)!important;backdrop-filter:blur(2px)!important}
#upsell-cart-modal{background:var(--sb-bg)!important;border-radius:22px!important;box-shadow:0 24px 60px rgba(var(--sb-deep-rgb),.25)!important;overflow-x:hidden}
#upsell-cart-modal .uc-header{padding:20px 20px 8px!important}
#upsell-cart-modal .uc-close{color:var(--sb-mut)!important}
#upsell-cart-modal .uc-title{font-size:20px!important;font-weight:800!important;color:var(--sb-ink)!important}
#upsell-cart-modal .uc-subtitle{color:var(--sb-mut)!important;font-size:13.5px!important}
#upsell-cart-modal .uc-body{padding:10px 14px 4px!important}
#upsell-cart-modal .uc-offers>.uc-offer+.uc-offer::before{display:none!important}
#upsell-cart-modal .uc-offer{background:#fff!important;border:0!important;border-radius:18px!important;padding:14px!important;box-shadow:0 4px 16px rgba(var(--sb-deep-rgb),.06)!important}
#upsell-cart-modal .uc-offer.selected{box-shadow:0 0 0 2px var(--uc-primary),0 4px 16px rgba(var(--sb-deep-rgb),.06)!important}
#upsell-cart-modal .uc-offer-img{border-radius:12px!important;background:var(--sb-tint)!important}
#upsell-cart-modal .uc-offer-name{font-size:15px!important;font-weight:600!important;line-height:1.35!important;color:var(--sb-ink)!important}
#upsell-cart-modal .uc-offer-final{color:var(--sb-ink)!important;font-size:18px!important;font-weight:800!important}
#upsell-cart-modal .uc-offer-original,#upsell-cart-modal .uc-offer-msrp{color:var(--sb-mut)!important}
#upsell-cart-modal .uc-variations{border-top-color:var(--sb-line)!important}
#upsell-cart-modal .uc-var-row{border-bottom-color:var(--sb-line)!important}
#upsell-cart-modal .uc-var-label{color:var(--sb-mut)!important}
#upsell-cart-modal .uc-var-btn{border-radius:99px!important;border-color:var(--sb-line)!important;color:var(--sb-ink)!important;background:var(--sb-bg)!important}
#upsell-cart-modal .uc-var-btn.selected{background:var(--uc-primary)!important;border-color:var(--uc-primary)!important;color:#fff!important}
#upsell-cart-modal .uc-tier{border-color:var(--sb-line)!important;border-radius:14px!important;background:#fff!important}
#upsell-cart-modal .uc-tier.selected{border-color:var(--uc-primary)!important;background:var(--uc-primary-tint)!important}
#upsell-cart-modal .uc-footer{background:#fff!important;border-radius:22px 22px 0 0!important;box-shadow:0 -6px 22px rgba(var(--sb-deep-rgb),.07)!important;padding:18px!important;margin-top:12px}
#upsell-cart-modal .uc-btn-primary{border-radius:16px!important;min-height:60px!important;font-size:18px!important;font-weight:700!important;background-image:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18))!important;color:#fff!important;box-shadow:0 8px 20px rgba(var(--sb-deep-rgb),.20)!important}
#upsell-cart-modal .uc-btn-primary:disabled{background-image:none!important}
#upsell-cart-modal .uc-btn-secondary{color:var(--sb-mut)!important;font-weight:600!important}

}