/*
Karla 300, 400, 500
*/

:root {--primary:#6F8149;--secondary:#E2652F;--secondarytext:#C14C1A;--bodytext:#222222;--errorred:#FF0000;--grey:#F5F4F3;--btnred:#AD060E;--brand-orange:#EA642C;--brand-gold:#F4B400;}

html, body {margin:0;padding:0;border:0;height:100%;}
html {overflow-y:scroll;}
* {box-sizing:border-box;}
body {font-family:'Karla', sans-serif;font-weight:300;font-style:normal;font-size:1rem;color:#272726;background-color:white;text-align:left;min-height:100%;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.js-focus-visible :focus:not(.focus-visible) {outline:none;}
form, fieldset, h1, h2, h3, h4, h5, h6, img, p, ul, ol, li {border:0;margin:0;padding:0;}
.clear {clear:both;font-size:1%;overflow:hidden;width:100%;height:0;}
.clearmin {clear:both;font-size:1%;overflow:hidden;width:100%;height:0;}
.clrfx:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
.space {clear:both;width:100%;height:12px;}
.rule {clear:both;width:100%;height:1px;font-size:1%;overflow:hidden;background-color:#E8EAEB;margin-bottom:7px;margin-top:5px;}
.dvdr {clear:both;width:100%;height:22px;border-bottom:1px dotted #D6D6D6;font-size:1%;overflow:hidden;margin-bottom:10px;}
.left {float:left;}
.right {float:right;display:inline;}
.hidden {display:none;}
hr {background-color:#D3D3D3;height:1px;width:100%;clear:both;border:0;border-bottom:1px solid #D3D3D3;padding:0;margin:10px 0 10px 0;}
hr.empty {background-color:var(--white) !important;height:1px;width:100%;clear:both;border:0;border-bottom:1px solid white !important;padding:0;margin:6px 0 8px 0;}
input {filter:none;cursor:pointer;}
input:focus, select:focus, textarea:focus, button:focus {outline:none;}
input:-webkit-autofill { -webkit-box-shadow:0 0 0 500px #F3F3F3 inset;}
textarea {resize:vertical;}

.outer {flex:1 0 auto;position:relative;padding-top:167px;}
.inner {position:relative;width:92%;max-width:1280px;margin:0 auto;text-align:left;}

h1 {font-size:2.4rem;color:var(--bodytext);padding:0 0 1.4rem 0;font-weight:500;line-height:1.2em;letter-spacing:-0.1rem;}
h1.home {font-size:2rem;padding:0 0 1.8rem 0;padding:0 0 1.8rem 0;letter-spacing:-0.14rem;line-height:1.1em;}
h2 {font-size:1.4rem;color:var(--bodytext);padding:0 0 0.6rem 0;font-weight:500;}
p {color:var(--bodytext);padding:0 0 1.4rem 0;line-height:1.4em;}

/*front end site pages use divs*/
header {position:fixed;width:100%;height:167px;top:0;left:0;border-top:3px solid #E2652F;z-index:101;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;background-color:white;}
header .inner {display:flex;justify-content:space-between;align-items:flex-end;position:relative;padding:0.8rem 0;}
header .logo {width:200px;height:auto;display:block;transition:all 0.3s;position:relative;}
header .logo img {width:100%;height:auto;display:block;}

header .nav {-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;background-color:#FFFFFF;position:relative; }
header .nav > ul {position:relative;list-style:none;display:flex;width:100%;justify-content:center;margin:0 auto;padding:0;text-align:center;}
header .nav > ul > li {margin:0 0.6rem;}
header .nav > ul > li.expandable > a:after {content:'\f078';color:rgb(0, 0, 0);font-family:"Font Awesome 6 Free";font-size:1rem;font-weight:900;padding-left:0.4rem;}
header .nav > ul > li > a {display:inline-block;color:rgb(0, 0, 0);text-decoration:none;font-weight:500;font-size:1.04rem;padding:0.6rem 0.5rem;margin:0 1rem;transition:background-color 0.3s ease;letter-spacing:-0.03rem;}
header .nav > ul > li > ul {position:absolute;display:block;top:100%;left:0;background-color:#FFFFFF;width:100%;padding:1rem 0.6rem;z-index:102 !important;-webkit-box-shadow:0px 5px 15px -1px rgba(190,190,190,0.87);box-shadow:0px 5px 15px -1px rgba(190,190,190,0.87);}
header .nav > ul > li > ul > li {width:13.5%;display:inline-block;text-align:center;padding:0.8rem 0.3rem;border:1px solid #D4D4D4;margin:0 0.1% 0.4rem 0.1%;position:relative;font-size:0.86rem;line-height:1em;}
header .nav > ul > li > ul > li img {width:auto;max-width:100%;display:block;height:80px;margin:0 auto 0.4rem auto;}
header .nav > ul > li > ul > li > p {padding:0}
header .nav > ul > li > ul > li > a {position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:5;}
/*header .nav ul li:hover ul.sf-js-enabled {display:flex !important;flex:1 1 0;justify-content:center;align-items:center;flex-wrap:wrap;aspect-ratio:1 / 1;}*/
/*header .nav.sf-menu > li > a {width:100%;display:flex;justify-content:center;}*/
header .nav::after{content:"";position:absolute;left:0; right:0; bottom:0;height:1px;background:var(--primary);pointer-events:none;}

header .hdrlinks {-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;text-align:right;padding-bottom:0.1rem;}
header .hdrlinks ul {list-style:none;display:flex;margin:0;padding:0;align-items:flex-end;}
header .hdrlinks ul li {margin-left:1rem;}
header .hdrlinks ul li a {position:relative;color:white;text-decoration:none;font-weight:500;font-size:0.94rem;padding:0.5rem 0.8rem;transition:background-color 0.3s ease;}
header .hdrlinks .accmenu {display:none;position:absolute;z-index:100;top:100%;right:108px;width:auto;background-color:white;border:1px solid #D4D4D4;border-radius:8px;padding:1.4rem;text-align:left;min-width:240px;-webkit-box-shadow:3px 3px 3px 0px rgba(182,182,182,0.49);box-shadow:3px 3px 3px 0px rgba(182,182,182,0.49);}
header .hdrlinks .accmenu::before {content:'';top:-10px;right:3rem;background-color:white;border-top-left-radius:0.25rem;width:1rem;height:1rem;border-top:1px solid #D4D4D4;border-left:1px solid #D4D4D4;border-bottom-color:transparent;-webkit-transform:rotateZ(45deg);-ms-transform:rotateZ(45deg);transform:rotateZ(45deg);position:absolute;z-index:1061;}
header .hdrlinks .accmenu ul {list-style:none;display:block;}
header .hdrlinks .accmenu ul li {display:block;border-bottom:1px solid #EBEBEB;text-align:left;margin-left:0;}
header .hdrlinks .accmenu ul li:last-child {border-bottom:0;}
header .hdrlinks .accmenu ul li a {display:block;padding:0.6rem 0;color:var(--bodytext);}
header .hdrlinks .accmenu ul li a:hover {color:var(--bodytext);}

.hdrctc {position:absolute;top:1.8rem;right:0;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.hdrctc p {font-size:1.1rem;color:var(--bodytext);padding:0;}
.hdrctc a {font-weight:600;color:var(--secondarytext);text-decoration:none;}
.hdrctc a:hover, .hdrctc a:focus {font-weight:600;color:var(--secondarytext);text-decoration:underline;}

.hdrsearch {flex:1 0 auto;padding:0 0 0 4rem;}
.hdrsearch .searchform {position:relative;width:100%;padding:0.2rem;border:1px solid #D4D4D4;border-radius:4px;}
.hdrsearch .searchform input {width:100%;padding:0.34rem 0.6rem;border:0;}
.hdrsearch .searchform button {position:absolute;top:3px;right:3px;width:28px;height:28px;font-family:'Karla', sans-serif;background:none;border:none;background-image:url(../images/btnsearch.png);background-size:100% 100%;cursor:pointer;}

header.small {height:95px;}
header.small .logo {width:140px;}
header.small .nav > ul > li > a {padding:0.3rem 0.5rem;}
header.small .inner {padding:0.6rem 0;}
header.small .hdrctc {top:0.6rem;}

/* ---- Accessibility: turn the effect off if the user asked for less motion */
@media (prefers-reduced-motion: reduce){
  .logo img{ animation:none !important; }
}

/* ---- Keyframes for the intro spin */
@keyframes logoSpinIn{
  0%   {transform:rotate(-360deg) scale(1); opacity:1;}
  100% {transform:rotate(0deg) scale(1);  opacity:1;}
}

/* ---- Only when the helper class is present (see JS below) */
.logo.spin-on-load img{
  will-change:transform;                /* smoother */
  animation:logoSpinIn 0.75s ease-out both;
  transform-origin:center;              /* pivot around the centre */
}


/*mobile extra search bar */
@media (max-width:768px){
    .hdrsearch{display:none;}                             /* hide wide bar       */
    .hdrlinks ul li.mobile-search-icon{                   /* show square icon   */
        display:inline-flex;margin-left:1rem;
    }
    .hdrlinks ul li .btn{
        width:38px;height:38px;padding:0;display:inline-flex;
        align-items:center;justify-content:center;border-radius:4px;
    }
    .hdrlinks ul li .btn i{font-size:1.25rem;line-height:1;}

    #mobile-search-row{display:none;padding:0.6rem 0.8rem;
        background:#fff;border-top:1px solid #d4d4d4;}
    #mobile-search-row form{position:relative;}
    #mobile-search-row input{width:100%;padding:0.5rem 0.6rem;
        border:1px solid #d4d4d4;border-radius:4px;font-size:1rem;}
    #mobile-search-row button{position:absolute;top:3px;right:3px;width:28px;height:28px;
        border:0;background:url("../images/btnsearch.png") no-repeat center/100%;cursor:pointer;}
    body.show-mobile-search #mobile-search-row{display:block;}
}

/* ───────── desktop (≥ 769 px) ───────── */
@media (min-width:769px){
    #mobile-search-row{display:none!important;}           /* never show row      */
    .hdrlinks ul li.mobile-search-icon{display:none;}     /* hide the magnifier  */
}

  
.content .inner {padding:0.6rem 0 2rem;}

.hhero{position:relative;height:auto;overflow:hidden;-webkit-box-shadow:0 3px 1px rgba(168,168,171,1);-moz-box-shadow:0 3px 1px rgba(168,168,171,1);box-shadow:0 3px 1px rgba(168,168,171,1)}  
.hhero img.bannerd{display:block;width:100%;height:auto}  
.hhero img.bannerm{display:none;width:100%;height:auto}
.hero-slider{position:relative}  
.hero-slide{height:70vh;min-height:500px;background-size:cover;background-position:center;position:relative;color:#fff}  
.hero-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0)40%,rgba(0,0,0,.6)80%,rgba(0,0,0,.8)100%);pointer-events:none;z-index:0}
.slide-link{position:absolute;inset:0;z-index:1}
.slide-content{position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);text-align:center;z-index:3;width:90%;max-width:600px}
.hero-text{position:absolute;left:50%;bottom:calc(6vh + 90px);transform:translateX(-50%);text-align:center;pointer-events:none;z-index:3} /* 90 px ≈ button height+gap; adjust if needed */ 
.hero-title{margin:0;font-family:'Karla',sans-serif;font-weight:900;font-size:clamp(2rem,6vw,4.5rem);letter-spacing:-.06em;line-height:1;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.45)}  
.hero-subtext{margin:.15rem 0 0;font-family:'Karla',sans-serif;font-weight:500;font-size:clamp(1rem,2vw,1.4rem);color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.45)}

.cta-btn{display:inline-block;padding:.9em 2.6em;border-radius:30px;background:#E2652F;color:#111;font-weight:700;text-transform:uppercase;font-size:.9rem;text-decoration:none;transition:background .2s ease}  
.cta-btn:hover,.cta-btn:focus{background:#d1460a}

.slick-dots li button:before{font-size:12px;color:#fff;opacity:.3}  
.slick-dots li.slick-active button:before{opacity:1}  
.slick-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.2);transition:background .2s}  
.slick-arrow:hover{background:#f5f5f5}  
.slick-prev{left:25px}  
.slick-next{right:25px}  
.slick-arrow svg{width:20px;height:20px;fill:#111}

.panels {}
.panels ul {display:grid;list-style:none;width:100%;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:1rem 1.4%;margin-bottom:2rem;}
.panels ul li {position:relative;border:1px solid #D4D4D4;border-radius:6px;text-align:center;padding:0 0 2.4rem 0;;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;overflow:hidden;min-height:194px;}
.panels ul li:hover {border:1px solid var(--secondary);-webkit-box-shadow:0px 0px 5px 0px rgba(226,101,47,0.82);box-shadow:0px 0px 5px 0px rgba(226,101,47,0.82);}
.panels ul li img {margin:1rem auto;width:auto;max-width:90%;display:block;height:auto;max-height:120px;}
.panels ul li p {padding:0 2.4rem 0 0.8rem;font-weight:500;font-size:0.96rem;text-align:left;color:white;width:100%;line-height:1em;}
.panels ul li a {position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:5;}
.panelslink {position:absolute;bottom:0;left:0;width:100%;height:38px;background-color:var(--primary);display:flex;align-items:center;}
.panelslink::after {position:absolute;top:6px;right:0.4rem;width:24px;height:24px;content:'';background-image:url(../images/arrowright.png);background-size:100% 100%;}
.panelsimg {display:flex;align-items:center;height:100%;}

.panels.category .panelsimg {display:block;}
.panels.category ul li img {margin:0 auto;width:100%;height:auto;max-width:1000%;display:block;height:auto;max-height:152px;}
/* 1. hide all submenus by default */
  
  /* hide all submenus by default */
ul.subsubmenu {
	display: none;
	padding-left: 1.5em;   /* indent */
	list-style: none;       /* remove bullets if you like */
  }
  
  /* when its parent <li> has .open, show the submenu */
  li.has-submenu.open > ul.subsubmenu {
	display: block;
  }
  
  /* add a little arrow on the toggle span */
  li.has-submenu .submenu-toggle {
	cursor: pointer;
	position: relative;
	padding-right: 1em;
  }
  li.has-submenu .submenu-toggle::after {
	content: "▸";
	position: absolute;
	right: 0;
	transition: transform .2s ease;
  }
  li.has-submenu.open .submenu-toggle::after {
	transform: rotate(90deg);
  }

.products {}
.products ul {display:grid;list-style:none;width:100%;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:1rem 1.4%;margin-bottom:2rem;}
.products ul li {background:white;position:relative;border:1px solid #D4D4D4;border-radius:6px;text-align:center;padding:0 0.2rem 1.4rem;transition:box-shadow .25s ease;}
.products ul li:hover {border:1px solid var(--secondary);box-shadow:0 6px 18px rgba(0,0,0,.12);}
.products ul li img {margin:1rem auto;width:auto;max-width:90%;display:block;height:auto;max-height:180px;transition:transform .3s ease;}
.products ul li p {position:absolute;bottom:0.4rem;left:0;width:100%;padding:0 0.4rem;font-weight:500;font-size:1rem;}
.products ul li a {position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:5;}
.products ul li .prod-name {position:static;margin:.6rem 0 .2rem;font-size:1rem;line-height:1.35em;color:var(--bodytext);font-weight:500;transition:transform .3s ease,color .3s;}
.products ul li .brand-name {position:static;margin:.6rem 0 .2rem;font-size:1rem;line-height:1.35em;color:var(--bodytext);font-weight:500;transition:transform .3s ease,color .3s;text-transform:uppercase;}
.products ul li .prod-price {position:static;margin:0;color:var(--secondary);font-weight:700;font-size:.98rem;transition:transform .3s ease,color .3s;}
.products ul li:hover img, .products ul li:hover .prod-name, .products ul li:hover .brand-name, .products ul li:hover .prod-price {transform:translateY(-0.05px) scale(1.035);}
.custom-badge{
    display:flex;            /* block‑level flex box → vertical margins work */
    align-items:center;
    gap:4px;
    margin:6px auto 10px;    /* ↑ 6 px above, 10 px below */
    width:max-content;       /* keeps the pill snug */
    font-size:.75rem;
    font-weight:600;
    color:#2b7a2b;
    background:#e7f8e7;
    padding:2px 6px;
    border-radius:4px;
    line-height:1.2;
}
  
/* container: no extra space, items tightly packed */
.products ul li .prod-swatches {
	display: flex;
	justify-content: center;  /* center the swatches under each card */
	align-items: center;
	gap: 4px;                 /* bump the gap a bit for breathing room */
	margin-top: 2px;          /* minimal spacing under price */
	padding: 0;
  }
  
  /* make each swatch a 12×12 square, no border */
  .products ul li .prod-swatches img {
	width: 12px;
	height: 12px;
	object-fit: cover;
	border: none;
	border-radius: 1px;       /* or 0 if you prefer */
	margin: 0;
	padding: 0;
  }
  
  /* “+N” indicator matching the height */
  .products ul li .prod-swatches .swatch-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	font-size: 0.7em;
	line-height: 1;
	color: #666;
	margin: 0;
	padding: 0;
  }
  
  

.product {display:flex;justify-content:space-between;margin-bottom:2.4rem;}
.productimg {width:42%;order:1;}
.productimginner {border:1px solid #D4D4D4;border-radius:6px;padding:1.2rem;}
.productimg img {width:auto;max-width:90%;display:block;height:auto;margin:0 auto;}
.productimg img.hidden {display:none;}
.producttxt {width:54%;order:2;}
.producttxt h1 {font-size:2rem;font-weight:600;margin:0;padding:0 0 0.4rem 0;letter-spacing:-0.06rem;}
.productbrandimg {width:auto;display:inline-block;padding:0 1rem;border:1px solid #D4D4D4;border-radius:4px;margin:0 0 1.4rem 0;}
.productbrandimg img {max-height:80px;object-fit:contain;}
.productfeatures {margin:0 0 1rem 0;}
.productfeatures h3 {padding:0 0 0.8rem 0;font-size:1.2rem;letter-spacing:-0.03rem;}
.productfeatures img {margin-right:0.4rem;}
.productfeatures a.sel img {border:2px solid #DD5800;border-radius:4px;}
.producttxtcontent {color:var(--bodytext);padding:0 0 1.4rem 0;line-height:1.4em;}
.producttxtcontent p:last-child {padding:0;}
.main-img {display:block;width:400px;height:auto;}

.mproductfeatures {display:none;}
.mproductimg {display:none;}
.mproductfeatures {margin:0 0 1rem 0;}
.mproductfeatures h3 {padding:0 0 0.8rem 0;font-size:1.2rem;letter-spacing:-0.03rem;}
.mproductfeatures img {margin-right:0.4rem;}
.mproductfeatures a.sel img {border:2px solid #DD5800;border-radius:4px;}



/* ————————————————— bundle banner ————————————————— */
.bundle-banner{
    --grad-from: var(--secondary,#1a9a5f);
    --grad-to:   color-mix(in srgb,var(--grad-from) 85%,#000);   /* css-mix for a subtle shade */
    background:linear-gradient(135deg,var(--grad-from),var(--grad-to));
    color:#fff;
    padding:.9rem 1.2rem;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.25rem;
    font-size:clamp(.95rem,2.5vw,1.05rem);
    position:relative;
    box-shadow:0 3px 6px rgba(0,0,0,.14);
    border-radius:0 0 .4rem .4rem;
    animation:bannerDrop .45s cubic-bezier(.33,1,.68,1) both;    /* slide-in */
    z-index:60;                                                  /* above sticky nav but below modals */
}

@keyframes bannerDrop{
    from{ transform:translateY(-100%); opacity:0; }
    to  { transform:none;            opacity:1; }
}

.bundle-icon{
    width:1.35em;
    height:1.35em;
    flex:none;
}

.bundle-banner .banner-msg{
    font-weight:600;
    letter-spacing:-.015em;
    line-height:1.35;
}

.banner-cta{                                         /* inherits .btn.primary base */
    white-space:nowrap;
    padding:.55em 1.15em;
    box-shadow:0 1px 3px rgba(0,0,0,.18);
    transition:transform .15s;
}
.banner-cta:hover{ transform:translateY(-1px); }

.bundle-banner .close-btn{
    position:absolute;
    top:6px;
    right:10px;
    padding:.25em .45em;
    background:none;
    border:0;
    font-size:1.65rem;
    line-height:1;
    color:#fff;
    cursor:pointer;
    opacity:.8;
    transition:opacity .15s;
}
.bundle-banner .close-btn:hover{opacity:1;}

@media (max-width:580px){
    .bundle-banner{
        flex-wrap:wrap;
        padding:1rem .9rem;
        text-align:center;
    }
    .bundle-icon{ display:none; }                      /* room is precious */
    .banner-cta{ order:3; width:100%; margin-top:.6rem;}
    .close-btn{top:4px;}
}
/* ———————————————————————————————————————————————— */



.browse {display:flex;justify-content:space-between;}
.browse .col:first-child {width:77%;order:2;}
.browse .col:last-child {width:18%;order:1;}
.browse .products ul {grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem 1.4%;}
.filterpnl {border-radius:6px;border:1px solid #D4D4D4;padding:0.8rem 0.4rem 0.8rem 0.8rem;margin-bottom:1rem;}
.filterpnlinner {height:230px;overflow-x:hidden;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:#eaae83 white;padding-right:0.8rem;}
.browse h4 {padding:0 0 0.4rem 0;}
ul.filters li {position:relative;}
ul.filters li label {cursor:pointer;display:block;padding:0.2rem 0;}
ul.filters li input[type="checkbox"] {position:absolute;top:3px;right:0;}

/* ---------- Popup button to grey out 'Add Logo Now' button.  ---------- */
.disabled-btn {background-color:#ccc !important;color:#666 !important;cursor:not-allowed;pointer-events:none;}
/* ---------- No print message for products with no positions available in basket.php  ---------- */
.no-print-msg {font-style:italic;color:#555;margin-top:0.5em;}

.faq {margin-bottom:2rem;border-bottom:1px solid #C2C3C4;}
.faqq {margin-bottom:0.4rem;padding-top:0.4rem;border-top:1px solid #C2C3C4;}
.faqq p {position:relative;display:block;padding:0.6rem 80px 0.6rem 0;color:var(--secondary);text-decoration:none;cursor:pointer;font-weight:600;}
.faqq p:focus {position:relative;display:block;padding:0.9rem 70px 0.9rem 3rem;color:var(--bodytext);text-decoration:none;cursor:pointer;font-weight:600;}
.faqq p a {color:var(--primary);text-decoration:none;font-weight:600;}
.faqq p a:hover {color:var(--bodytext);text-decoration:none;}
.faqq p span {position:absolute;width:20px;height:20px;top:0.8rem;right:0.2rem;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;background:url(../images/faq.png) center center no-repeat;background-size:100% 100%;}
.faqq p.open span {-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);transform:rotate(-180deg);}
.faqa {display:none;position:relative;color:var(--bodytext);font-size:1rem;padding:0 0 1.4rem 0;line-height:1.4em;}
.faqa p {font-size:1rem;line-height:1.4em;padding:0 0 1.4rem 0;}
.faqa p:last-child {padding:0;}
.faqa p:has( + ul) {padding:0 0 0.4rem 0;}
.faqa strong {font-weight:600;}
.faqa p a {color:var(--midblue);text-decoration:none;font-weight:600;}
.faqa p a:hover {color:var(--midblue);text-decoration:underline;}
.faqa ul {margin-left:1.2rem;}
.faqa ul li {font-size:1rem;line-height:1.4em;padding:0.15rem ;}


.openmenu {display:none;width:40px;height:30px;margin:0;position:relative;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.menuicon {background:black none repeat scroll 0 0;display:inline-block;height:3px;margin:10px 0;position:relative;transition-duration:0.4s;transition-property:background;width:40px;}
.menuicon:before, .menuicon:after {background:black none repeat scroll 0 0;content:"";display:block;height:3px;left:0;position:absolute;transition:all 0.4s ease 0s;width:40px;}
.menuicon:before {top:-10px;}
.menuicon:after {bottom:-10px;}
#bt.menuon .menuicon {background:transparent;}
#bt.menuon .menuicon:before {transform:rotateZ(-45deg) translate(-8px, 6px);background:black;}
#bt.menuon .menuicon:after {transform:rotateZ(45deg) translate(-8px, -6px);background:black;}
.openmenu .menutext:hover {text-decoration:none;}
.openmenu:hover {text-decoration:none;}

/* === Related Products === */
.related-products {padding:1.8rem 0;background-color:#F6F6F6; }
.related-products h3 {font-size:20px;margin-bottom:16px;text-transform:uppercase;letter-spacing:0.05em;}
.related-list {display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem 2%;list-style:none;padding:0;margin:0;}
.related-item {background:#fff;border:1px solid #eee;border-radius:6px;overflow:hidden;text-align:center;transition:box-shadow 0.2s ease;padding:1rem;}
.related-item:hover {box-shadow:0 4px 12px rgba(0,0,0,0.08);}
.related-link {display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;}
.related-thumb {width:100%;height:0;padding-bottom:100%;background-size:contain;background-repeat:no-repeat;background-position:center center;}
.related-info {padding:12px;flex:1;display:flex;flex-direction:column;justify-content:space-between;}
.related-info p {padding:0;}
.related-name {font-size:14px;margin:0 0 8px;flex:1;color:#333;}
.related-price {font-size:16px;font-weight:700;color:#ff6a00;margin:0;}
.related-brand {font-size:12px;color:#666;margin-top:4px;text-transform:uppercase;}

.breadcrumbs {padding:0 0 1rem 0;}
.breadcrumbs ul {list-style:none;}
.breadcrumbs ul li {font-weight:600;font-size:0.92rem;color:#231F20;letter-spacing:0;text-align:left;padding:0;line-height:1.6rem;text-decoration:none;display:inline;}
.breadcrumbs ul li a {position:relative;font-weight:600;font-size:0.92rem;color:var(--primary);letter-spacing:0;text-align:left;padding:0 0.6rem 0 0;margin:0 0.6rem 0 0;line-height:1.6rem;text-decoration:none;}
.breadcrumbs ul li a::after {position:absolute;right:-3px;content:'>';font-size:0.8rem;}
.breadcrumbs ul li a:hover {color:var(--primary);text-decoration:underline;}

.pagetitle {display:flex;justify-content:space-between;border-bottom:1px solid #D4D4D4;padding:1rem 0 ;margin-bottom:2rem;}
.pagetitleimg {width:18%;}
.pagetitleimg > div {width:100%;height:auto;border:1px solid #D4D4D4;border-radius:6px;padding:1rem;}
.pagetitleimg img {width:auto;max-width:100%;display:block;height:auto;margin:0 auto;max-height:180px;}
.pagetitletxt {width:79%;}
.pagetitletxt h1 {padding:0 0 0.4rem 0;}
.pagetitletxt p {padding:0;}

.editorial {width:74%;}
.editorial h2 {font-size:1.4rem;font-weight:500;padding:0 0 0.6rem 0;letter-spacing:-0.06rem;}
.editorial p {font-size:1rem;padding:0 0 1rem 0;line-height:1.5em;}
.editorial p strong {font-weight:600;}
.editorial ul {padding:0 0 0.8rem 0;margin-left:1.4rem;}
.editorial ul li {font-size:1rem;padding:0 0 0.3rem 0;line-height:1.5em;}
.editorial p:has( + ul ) {padding:0 0 0.3rem 0;}
.editorial a {text-decoration:none;color:var(--secondary);font-weight:600;}
.editorial a:hover, .editorial a:focus {text-decoration:underline;color:var(--secondary);font-weight:600;}


#modal-wrapper.show {height:100%;width:100%;opacity:1;transition-property:height, width, opacity;transition-duration:0s, 0s, 0.5s;transition-delay:0s, 0s, 0s;}
#modal-wrapper {position:fixed;top:0;left:0;height:0;width:0;overflow:hidden;z-index:1000 !important;opacity:0;transition-property:opacity, height, width;transition-duration:0.5s, 0s, 0s;transition-delay:0s, 0.5s, 0.5s;}
#modal-background {position:absolute;top:0;left:0;right:0;bottom:0;background-color:#222;opacity:0.5;}
#modal-content-wrapper {position:absolute;top:12px;left:12px;right:12px;bottom:12px;display:flex;justify-content:center;align-items:center;}
.modal-close-wrapper {position:absolute;top:1em;right:1em;}
.modal-close-wrapper a {color:white;font-size:2rem;font-weight:400;text-decoration:none;}
.modal-content-outer {position:relative;background-color:#eee;border-radius:4px;min-width:300px;min-height:300px;max-width:90%;max-height:86vh;padding:1rem 0.4rem 1rem 1rem;overflow:hidden;overflow-y: scroll;scrollbar-width:thin;scrollbar-color:#0A4C95 white;}
#modal-content {position:relative;padding-right:6px;}
.form-medium {width:600px;max-width:100%;padding:0 0.4rem 1.2rem;}
.form-large {width:880px;max-width:100%;padding:0 0.4rem 1.2rem;}
.form-large .btnrow {position:absolute;top:0;right:1rem;padding:0;}
.form-large .btnrow .btnclose {color:black;font-size: 2.0rem;margin-left: 1rem;text-decoration: none;vertical-align: middle;}

.listtable {border-collapse:collapse;width:100%;border:0;margin-bottom:1.2rem;}
.listtable th, table.listheadertable th {padding:8px 6px;color:#230021;font-weight:600;text-align:left;vertical-align:top;background-color:#E5E4E3;font-size:0.96rem;font-weight:600;}
.listtable td {border-bottom:1px solid #E2E2E2;padding:8px 0.6rem 8px 4px;text-align:left;font-size:0.96rem;vertical-align:top;}
.listtable td.brdless {border-bottom:0;}
.listtable td.nowrap {white-space:nowrap}
.listtable td:first-child {white-space:nowrap;}
.listtable td.ctrd, .listtable th.ctrd {text-align:center;}
.listtable td.nowrap {white-space:nowrap;}
.listtable td.dot {text-align:center;padding:14px 4px 6px 4px;}
.listtable td.dot img {width:12px;height:12px;display:block;margin:0 auto;}
.listtable h3 {font-size:100%;font-weight:600;padding:0px 0px 2px 0px;margin:0px 0px 3px 0px;border-bottom:1px solid #CFCFCF;}
.listtable a:link, .listtable a:visited {font-weight:600;color:#065CC6;text-decoration:none;}
.listtable a:active, .listtable a:hover {font-weight:600;color:#065CC6;text-decoration:underline;}
.listtable td img.iconemail {width:14px;height:14px;display:inline-block;margin-right:0.3rem;vertical-align:middle;}

/*use formcontent for popups*/
.formcontent h3 {font-size:1.3rem;font-weight:500;border-bottom:1px solid #CCCCCC;line-height:1.6em;margin-bottom:0.8rem;letter-spacing:-1px;padding-bottom:8px;}
.formcontent p {font-size:0.9rem;padding:0 0 0.8rem 0;}
.formcontent .formrow {display:block;margin:0.3rem 0;}
.formcontent .formrow label {display:inline;margin-right:0.5em;color:var(--bodytext);font-weight:500;line-height:1.1rem;font-size:0.96rem;}
.formcontent .formrow label.lbltime {width:90px;display:inline-block;}
.formcontent .formrow label.chkbx {position:relative;display:block;width:100%;margin-right:0;padding-left:1.8rem;color:#000000;font-weight:500;line-height:1.1rem;font-size:0.96rem;cursor:pointer;}
.formcontent .formrow label.chkbx input[type="checkbox"] {position:absolute;top:0;left:0;}
.formcontent .formrow span {font-size:0.76rem;color:#666666;line-height:1.1rem;font-weight:400;}
.formcontent input[type="text"], .formcontent input[type="email"], .formcontent input[type="password"], .formcontent input[type="date"], .formcontent input[type="url"] {width:100%;font-size:0.9rem;display:block;border:1px solid #BFBFBF;border-radius:4px;line-height:1.4em;padding:0.4rem 0.6rem;outline:none;font-family:'Karla', sans-serif;font-weight:300;margin:0.4rem 0;}
.formcontent input[type="time"] {width:auto;min-width:60px;font-size:0.9rem;display:inline-block;border:1px solid #BFBFBF;border-radius:4px;line-height:1.4em;padding:0.2rem 0.2rem;outline:none;font-family:'Karla', sans-serif;font-weight:300;margin:0.4rem 1.2rem 0.4rem 0;}
.formcontent select {display:block;width:100%;min-width:178px;font-size:0.9rem;border:1px solid #BFBFBF;border-radius:4px;padding:0.5rem 0.5rem;outline:none;background-color:white;cursor:pointer;font-family:'Karla', sans-serif;font-weight:300;margin:0.4rem 0;}
.formcontent textarea {width:100%;height:78px;font-size:0.9rem;display:block;border:1px solid #BFBFBF;border-radius:4px;line-height:1.4em;padding:0.4rem 0.6rem;outline:none;font-family:'Karla', sans-serif;font-weight:300;margin:0.4rem 0;resize:none}

button.btn {display:inline-block;color:white;background-color:var(--secondary);border:1px solid var(--secondary);width:auto;border-radius:4px;line-height:1em;padding:0.5rem 1rem;text-align:center;cursor:pointer;font-family:'Karla', sans-serif;font-size:0.9rem;font-weight:500;text-decoration:none;}
button.btn:disabled {background-color:#CE6A6E;border:1px solid #CE6A6E;cursor:default;}
input.btn {display:block;color:white;background-color:var(--secondary);border:1px solid var(--btnred);width:auto;border-radius:4px;line-height:1em;padding:0.5rem 1rem;text-align:center;cursor:pointer;font-family:'Karla', sans-serif;font-size:0.9rem;font-weight:500;text-decoration:none;}
button.btn:hover, input.btn:hover {color:white !important;}
a.btn {display:inline-block;color:white !important;background-color:var(--secondary);border:1px solid var(--secondary);width:auto;border-radius:4px;line-height:1em;padding:0.5rem 1rem;text-align:center;cursor:pointer;font-family:'Karla', sans-serif;font-size:0.9rem;font-weight:500;text-decoration:none !important;}
a.btn:hover, a.btn:focus {font-weight:500;color:white !important;text-decoration:none !important;}
a.btn.primary {background-color:var(--primary);border:1px solid var(--primary);}
a.btn.primary:hover {background-color:var(--primary);border:1px solid var(--primary);}
a.btn.secondary {background-color:var(--secondary);border:1px solid var(--secondary);}
a.btn.secondary:hover {background-color:var(--secondary);border:1px solid var(--secondary);}

input.btn.sml {padding:0.3rem 0.7rem;font-size:0.8rem;}
button.btn.sml {padding:0.3rem 0.7rem;font-size:0.8rem;}
a.btn.sml {padding:0.4rem 0.7rem;font-size:0.8rem;text-wrap:nowrap;}

/*product page and basket popup*/
.product-title {font-size:18px;text-transform:uppercase;font-weight:bold;}
.productcolours a.openimage img{border:2px solid transparent;border-radius:4px;box-sizing:border-box;}
.productcolours a.openimage.sel img{border-color:#ff6a00;}
.sizes-grid {display:grid;grid-template-columns:repeat(6, 1fr);gap:8px;margin-bottom:0}
.size-box {border:1px solid #dadada;background:#f7f7f7;text-align:center;padding:6px;font:14px/1 Arial}
.size-box .label {font-weight:700;margin-bottom:4px;display:block}
.size-box .qty-controls {display:flex;justify-content:center;align-items:center;gap:6px;margin:4px 0}
.size-box button {border:0;background:none;font:700 16px/1 Arial;width:20px;height:20px;cursor:pointer}
.size-box .qty {min-width:18px;display:inline-block}

.bulk-grid {display:grid;grid-template-columns:repeat(6, 1fr);gap:8px;margin-bottom:1rem}
.bulk-card {border:1px solid #eee;background:#fafafa;text-align:center;padding:0.3rem;font-size:0.9rem;}
.bulk-card.highlight {box-shadow:0 0 0 3px #ff902b40;border-color:#ff902b}
.bulk-card .price {font-size:1.2rem;font-weight:700;color:var(--secondary)}
#addToBasketBtn {background:#ff6a00;color:#fff;border:none;padding:12px 24px;font-size:18px;cursor:pointer;border-radius:4px;margin-bottom:0.6rem;width:100%}
#addToBasketBtn[disabled] {background:#ccc;cursor:not-allowed}
.vat-note {margin-top: 8px;font-size: 14px;color: #555;}
.customise-note {margin: 8px 0 0;font-size: 0.9em;font-weight: 600;color: #555;text-align: center;}
  
/* modal */
.modal-overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);display:flex;align-items:center;justify-content:center;z-index:9999}
.modal-overlay.hidden {display:none}
.modal-content {background:#fff;border-radius:6px;max-width:480px;width:90%;padding:24px;position:relative}
.close-modal {position:absolute;top:12px;right:12px;border:none;background:none;font-size:24px;line-height:1;cursor:pointer}
.modal-header {display:flex;align-items:center;gap:8px;margin-bottom:16px}
.modal-header h2 {padding:0;}
.modal-icon {font-size:24px;color:#28a745}
.item-summary img {width:60px;height:60px;object-fit:cover;border:1px solid #ddd}
.modal-actions button {border-radius:4px;padding:10px;cursor:pointer;font:16px/1 Arial}
#logoNowBtn {background:#ff6a00;color:#fff;border:none}
#viewBasketBtn {background:#fff;color:#333;border:1px solid #ccc}

/* ---------- layout + card styles (unchanged) ---------- */
.cart-columns{display:flex;flex-wrap:wrap;gap:40px;}
.cart-items{flex:1 1 0;}
.cart-summary{width:350px;padding:30px;background:#f2f2f2;border:1px solid #dedede;}
.item-card{background:#fff;border:1px solid #e3e3e3;padding:25px;margin-bottom:40px;}
.item-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;}
.header-actions{display:flex;align-items:center;gap:8px;}
.prod-meta{flex:1 1 0;}
.prod-brand{font-size:14px;font-weight:600;color:#666;margin-bottom:2px;}
.prod-title{font-size:26px;font-weight:800;margin:0;}
.remove-link{font-size:12px;color:#c10000;text-decoration:none;cursor:pointer;}
.bulk-flag{display:inline-block;background:#ff6a00;color:#fff;font-size:12px;font-weight:700;padding:2px 6px;border-radius:4px;}
.item-body{display:flex;gap:25px;margin-top:15px;align-items:flex-start;}
.item-img{width:120px;height:120px;object-fit:cover;border:1px solid #ddd;border-radius:6px;flex-shrink:0;}
.size-col{flex:1 1 0;}
.size-summary-line{font-size:15px;font-weight:600;margin-bottom:6px;}
.size-details{font-size:15px;}
.size-details summary{cursor:pointer;font-weight:600;list-style:none;position:relative;padding-right:20px;}
.size-details summary::after{content:'';position:absolute;right:0;top:6px;width:8px;height:8px;border:2px solid #000;border-left:0;border-top:0;transform:rotate(45deg);transition:.2s;}
.size-details[open] summary::after{transform:rotate(-135deg);}
.size-details summary::-webkit-details-marker{display:none;}

.size-table {width:100%;border-collapse:collapse;margin-top:10px;}
.size-table td {padding:4px 8px;background-color:#F5F4F6;border-bottom:1px solid white;}
.qty-btn {display:inline-block;width:28px;height:28px;border:1px solid #000;background:#fff;text-align:center;line-height:26px;font-size:18px;font-weight:700;text-decoration:none;color:#000;user-select:none;}
.size-table .qty-value {display:inline-block;min-width:36px;text-align:center;}
.size-total {font-weight:700;text-align:right;}
.print-section {border-top:2px dashed #000;padding-top:15px;margin-top:18px;font-size:14px;}
.print-section ul{margin:0 0 10px 20px;padding:0;}
.print-section li{margin-bottom:4px;}
.print-section .btn{margin-top:6px;}
.card-footer{border-top:2px dashed #000;margin-top:18px;padding-top:15px;text-align:right;}
.card-subtext small {display:block;font-size:0.75em;color:#666;margin-top:2px;}
.card-total{font-size:24px;font-weight:800;color:#ff6a00;}
.btn{display:inline-block;padding:6px 18px;font-size:14px;font-weight:600;border-radius:4px;text-decoration:none;}
.btn.primary{background:#ff6a00;color:#fff;}
.btn.secondary{background:#ff6a00;color:#fff;}
.summary-title{font-size:26px;font-weight:800;margin-top:0;}
.summary-table{width:100%;border-collapse:collapse;margin:15px 0 20px;}
.summary-table td{padding:6px 0;font-size:15px;}
.summary-table .lbl{text-align:left;}
.summary-table .val{text-align:right;}
.summary-total-sep{border-top:3px solid #000;height:3px;}
.grand-exvat{font-size:18px;font-weight:700;}
.grand-inc{font-size:32px;font-weight:800;color:#ff6a00;margin-top:10px;}
.shipping-note{font-size:12px;color:#666;margin-top:-4px;}
.summary-cta{display:block;margin-top:25px;text-align:center;font-size:16px;font-weight:700;padding:15px 0;border-radius:6px;background:#ff6a00;color:#fff;text-decoration:none;}

.empty-cart-wrapper {min-height:60vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 20px;}
.empty-cart-wrapper h1 {font-size:42px;font-weight:800;margin:0 0 18px;}
.empty-cart-wrapper p {font-size:18px;color:#666;margin:0 0 28px;}
.empty-cart-wrapper .btn-shop {display:inline-block;background:#ff6a00;color:#fff;padding:14px 36px;font-size:18px;font-weight:700;border-radius:6px;text-decoration:none;transition:background .25s;}
.empty-cart-wrapper .btn-shop:hover,.empty-cart-wrapper .btn-shop:focus {background:#e05d00;}
#basketModal p {padding:0}


.pageform {max-width:800px;padding:1.2rem 1.8rem;background-color:#F3F3F3;margin-bottom:1rem;}
form.register {margin-bottom:1rem;}
p.error, span.error {color:#FF0000;font-size:0.96rem !important;font-weight:500;padding:0 !important;}
form.register h3 {font-size:1rem;color:var(--bodytext);padding:0 0 0.3rem 0;font-weight:500;}
.register .formrow {position:relative;width:100%;padding:6px 0;}
.register.compact .formrow {margin-bottom:0;}
/*.register .formrow::before {position:absolute;content:'';width:1px;background-color:#D4D4D4;height:28px;top:10px;left:134px;}*/
.register .formrow.wde::before {left:181px;}
.register .formrow.onfocus {border:1px solid #5883D1;}
.register .formrow.address {display:none;}
.register .formrow label {width:132px;float:left;color:#414042;border-right:0 solid #D9E7F8;padding:6px 6px 8px 0px;cursor:pointer;font-weight:400;line-height:1.2em;font-size:0.9rem;}
.register .formrow label span {display:block;font-size:0.76rem;}
.register .formrow label.error {color:#FF0000;font-weight:400;}
.register .formrow input.txtinpt {width:calc(100% - 138px);font-weight:300;line-height:1.0em;font-size:0.86rem;float:left;color:#414042;border:0;background-color:white;padding:8px;font-family:'Karla', sans-serif;}
.register .formrow input.txtinptsml {width:calc(50% - 138px);min-width:160px;font-weight:300;line-height:1.0em;font-size:0.86rem;float:left;color:#414042;border:0;background-color:white;padding:8px;font-family:'Karla', sans-serif;}
.register .formrow input:autofill {background:#fff !important;}
.register .formrow input.txtinpt.disabled {background-color:#F3F3F3;}
.register .formrow input.txtinpt.focus-visible {background-color:white;}
.register .formrow input.txtsml {width:150px;font-weight:300;line-height:1.0em;font-size:0.86rem;color:#414042;border:0;background-color:white;padding:6px;font-family:'Karla', sans-serif;border:0;}
.register .formrow textarea {width:calc(100% - 138px);height:80px;font-weight:300;line-height:1.3em;font-size:0.86rem;float:left;color:#414042;border:0;background:white;padding:6px;font-family:'Karla', sans-serif;resize:vertical;}
.register .formrow textarea.lge {height:300px;}
.register .formrow .flt {width:calc(100% - 138px);float:right;}
.register .formrow p.txtinpt {width:calc(100% - 138px);font-size:0.86rem !important;float:right;color:#414042;border:0;background:none;padding:6px 6px 4px 0 !important;}
.register .formrow select.txtselect {width:calc(100% - 138px);font-weight:300;line-height:1.4em;font-size:0.86rem;float:left;color:#414042;border:0;background:#F3F3F3;padding:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;background:url(../images/downarrow.png) 98% center no-repeat white;background-size:16px 9px;font-family:'Karla', sans-serif;}
.register .formrow p.error {position:absolute;bottom:-16px;left:0;color:#FF0000;font-size:0.8rem !important;font-weight:400;padding:0 !important;}
.register .formrow a.removeguest {position:absolute;top:9px;right:4px;width:36px;height:32px;background-image:url(images/delete.png);background-size:100% 100%;}
.register .chkboxrow {position:relative;width:100%;padding:0;margin-bottom:24px;}
.register .chkboxrow label {position:relative;display:block;width:100%;color:#414042;padding:7px 6px 8px 24px;cursor:pointer;font-weight:400;line-height:1.0em;font-size:0.9rem;}
.register .chkboxrow label input {position:absolute;top:4px;left:0;}
.register .formrow.inline label {width:auto;float:none;display:inline-block;}
.register .formrow.inline::before {display:none;}
.register .formrow input.file {width:calc(100% - 156px);font-weight:300;line-height:1.0em;font-size:0.86rem;float:right;border:0;border-radius:0;background:#F3F3F3;padding:3px 0;}
.register .btnrow {display:block;margin:1rem 0;}

.register .former {display:flex;justify-content:space-between;padding:0.2rem 0;}
.register .former .formrow {width:48.5%;padding:0;}
.register .former .formrow label {display:block;width:100%;padding:3px 0;}
.register .former .formrow input.txtinpt {display:block;width:100%;float:none;}
.register .former .formrow select.txtselect {display:block;width:100%;float:none;}
.register input[type="checkbox"].schkbox {top:20px;}
.register input[type="checkbox"].schkbox + label span {top:20px;}

.register .formrow.wde label {width:180px;}
.register .formrow.wde input.txtinpt {width:calc(100% - 186px);}

.register .formrown {position:relative;width:100%;margin-bottom:0.8rem;}
.register .formrown h4 {font-size:1.66rem;line-height:1.0em;color:#062D5F;padding-bottom:6px;font-weight:400;letter-spacing:-1px;}
.register .formrown label {display:block;font-size:0.96rem;color:var(--bodytext);font-weight:300;padding:0 0 6px 0;cursor:pointer;}
.register .formrown label p {padding:6px 0;font-weight:300;line-height:1.2em;font-size:0.9rem;}
.register .formrown label p a {color:var(--secondary);text-decoration:none;font-weight:600;}
.register .formrown label p a:hover {color:var(--secondary);text-decoration:underline;font-weight:600;}
.register .formrown.chkbx {position:relative;padding:1rem 0 0 2rem;line-height:1.2em;}
.register .formrown textarea {font-size:90%;font-family:'Karla', sans-serif;color:#414042;padding:6px;width:100%;height:110px;background-color:white;border:1px solid white;resize:vertical;}
.register .formrown textarea:focus {border:1px solid #5883D1;}
.register .address {display:none;}

.btnrow {position:relative;}
.btnrow img {position:absolute;top:4px;right:0;margin-bottom:0;}

.slick-slider {position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;margin:0 -10px;padding-bottom:3rem;}
.slick-list {position:relative;display:block;overflow:hidden;margin:0;padding:0;}
.slick-list:focus {outline:none;}
.slick-list.dragging {cursor:pointer;cursor:hand;}
.slick-slider .slick-track,.slick-slider .slick-list {-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
.slick-track {position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto;display:flex !important;}
.slick-track:before,.slick-track:after {display:table;content:'';}
.slick-track:after{clear:both;}
slick-loading .slick-track {visibility:hidden;}
.slick-slide {display:none;float:left;height:100%;vertical-align:middle;padding:0;margin-right:10px;margin-left:10px;height:inherit !important;}
[dir='rtl'] .slick-slide {float:right;}
.slick-slide > div {height:100%;}
.slick-slide img {display:block;}
.slick-slide.slick-loading img {display:none;}
.slick-slide.dragging img {pointer-events:none;}
.slick-initialized .slick-slide {display:block;}
.slick-loading .slick-slide {visibility:hidden;}
.slick-vertical .slick-slide {display:block;height:auto;border:1px solid transparent;}
.slick-arrow.slick-hidden {display:none;}

button.slick-prev {position:absolute;top:38%;left:-2.2rem;width:26px;height:26px;font-size:0;background-image:url(../images/slickprev.png);background-size:100% 100%;background-color:transparent;border:0;cursor:pointer;outline:none;z-index:100 !important;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;opacity:0.3;}
button.slick-prev:hover {opacity:1}
button.slick-next {position:absolute;top:38%;right:-2.2rem;width:26px;height:26px;font-size:0;background-image:url(../images/slicknext.png);background-size:100% 100%;background-color:transparent;border:0;cursor:pointer;outline:none;z-index:100 !important;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;opacity:0.3;}
button.slick-next:hover {opacity:1}
button.slick-disabled {background:none;}

.hero-slider button.slick-prev {top:44%;left:1.4rem;}
.hero-slider button.slick-next {top:44%;right:1.4rem;}
.hero-slider.slick-slider {margin:0}
.hero-slider .slick-slide {margin-right:0;margin-left:0;}

.slick-dots {position:absolute;bottom:0;left:0;display:block;list-style:none;padding:0;width:auto;text-align:center;z-index:10;margin:0 auto;right:0;}
.slick-dots li {cursor:pointer;display:inline-block;width:14px;height:14px;margin:0 4px !important;padding:0 !important;position:relative;overflow:hidden;}
.slick-dots li button {background:none;border:0 none;cursor:pointer;display:block;font-size:0;width:14px;height:14px;line-height:0;outline:none;padding:0;}
.slick-dots li button:hover, .slick-dots li button:focus {outline:none;}
.slick-dots li button:hover::before, .slick-dots li button:focus::before {opacity:1;}
.slick-dots li button::before {color:white;content:"";font-family:"slick";font-size:0;width:14px;height:14px;left:0;opacity:1;position:absolute;text-align:center;top:0;background-image:url(../images/slickdot.png);background-size:100% 100%;outline:none;}
.slick-dots li.slick-active button::before {opacity:1.0;background-image:url(../images/slickdoton.png);background-size:100% 100%;outline:none;}
.slick-dots li.slick-active button {outline:none;}

.hpanels  {padding:2rem 0;text-align:center;}
.hpanels h2 {font-size:1.8rem;padding:0 0 1.3rem 0;letter-spacing:-0.1rem;color:var(--secondary)}
.hbrands {padding:0 3rem 2rem 3rem;}
.hcats {padding:0 3rem 3.4rem 3rem;}
.hslider .item {position:relative;border:1px solid #D4D4D4;border-radius:6px;text-align:center;padding:0 0 2.4rem 0;;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;overflow:hidden;min-height:194px;}
.hslider .item:hover {border:1px solid var(--secondary);-webkit-box-shadow:0px 0px 5px 0px rgba(226,101,47,0.82);box-shadow:0px 0px 5px 0px rgba(226,101,47,0.82);}
.hslider .item img {margin:1rem auto;width:auto;max-width:90%;display:block;height:auto;max-height:120px;}
.hcats .hslider .item img {margin:0 auto;width:auto;max-width:100%;display:block;height:100%;max-height:auto;}
.hslider .item p {padding:0 2.4rem 0 0.8rem;font-weight:500;font-size:0.96rem;text-align:left;color:white;width:100%;line-height:1em;}
.hslider .item a {position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:5;}
.hpanelslink {position:absolute;bottom:0;left:0;width:100%;height:36px;background-color:var(--primary);display:flex;align-items:center;}
.hpanelslink::after {position:absolute;top:6px;right:0.4rem;width:24px;height:24px;content:'';background-image:url(../images/arrowright.png);background-size:100% 100%;}
.hpanelsimg {display:flex;align-items:center;height:100%;}

.sidenav, .sidecat, .sidebrand, .sideequip {height:100%;width:0;max-width:100%;position:fixed;top:0;left:auto;right:0;background-color:white;
  overflow:hidden;padding:0 0 20px 0;transition:0.5s;
  -moz-transition:0.5s;-webkit-transition:0.5s;z-index:10050;text-align:left;
  -webkit-box-shadow: -7px 0px 12px -6px rgba(226,101,47,0.22);
  -moz-box-shadow: -7px 0px 12px -6px rgba(226,101,47,0.22);
       box-shadow: -7px 0px 12px -6px rgba(226,101,47,0.22);}
.sidenav .closebtn, .sidecat .closecatbtn, .sidebrand .closebrandbtn, .sideequip .closeequipbtn {position:absolute;top:0;right:20px;font-size:56px;text-decoration:none;color:black;line-height:42px;}
.sidenavinner, .sidecatinner, .sidebrandinner, .sideequipinner {margin:60px 3% 20px 6%;padding-right:2%;position:relative;width:91%;height:calc(100% - 60px);overflow-x:hidden;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:#0A4C95 white;}
.sidenav p, .sidecat p, .sidebrand p, .sideequip p {color:var(--bodytext);font-size:1.1rem;font-weight:600;width:86%;margin:3px 0 3px 0;padding:0 0 8px 0;border-bottom:0;}
.sidenav ul, .sidecat ul, .sideequip ul {display:none;width:96%;list-style:none;margin:10px 0;}
.sidecat ul li ul.subsubmenu {width:100%;margin:0 0 4px 0;}
.sidenav ul li {border-bottom:1px solid #E6E5E4;}
.sidenav ul li a:hover, .sidenav ul li a:focus {color:var(--secondary);}
.sidenav ul li a, .sidecat ul li a, .sideequip ul li a{position:relative;display:block;padding:0.7rem 0 0.6rem 0;color:var(--bodytext);font-weight:600;text-decoration:none;font-size:0.94rem;}
.sidenavinner > ul > li.expandable > a::after {position:absolute;top:10px;right:0;content:'\f078';color:var(--bodytext);font-family:"Font Awesome 6 Free";font-size:1rem;font-weight:900;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.sidenavinner > ul > li.expandable > a.open::after {-webkit-transform:rotate(180deg);transform:rotate(180deg);}
.sidenav ul > li > ul {display:none;margin:0;}
.sidenav ul > li > ul > li {border-bottom:0;}
.sidenav ul > li > ul > li > a {padding:0.5rem 0 0.5rem 1rem;font-size:0.9rem;margin-right:1.4rem;}
/*submenu*/
.sidenav ul.submenu {display:none;width:100%;}
.sidenav ul > li.expandable ul.submenu > li.expandable > a span.expander {position:absolute;display:block;top:4px;right:-1.4rem;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;z-index:10;}
.sidenav ul > li.expandable ul.submenu > li.expandable > a span.expander::after {content:'\f078';color:var(--bodytext);font-family:"Font Awesome 6 Free";font-size:1rem;font-weight:900;}
.sidenav ul > li.expandable ul.submenu > li.expandable > a span.expander.open {-webkit-transform:rotate(180deg);transform:rotate(180deg);}
/*.sidenavinner > ul > li.expandable > a.open + ul.submenu {display:block;}*/

.sidenav p {position:relative;padding:0 0 12px 0;color:white;font-weight:500;text-decoration:none;font-size:0.9rem;}
.sidenav p a {color:white;font-weight:500;text-decoration:none;}
.sidenav p a span {color:var(--primary);font-weight:500;text-decoration:none;}

.sidecat ul li {border-bottom:1px solid #E6E5E4;}
.sidecat ul li a:hover, .sideequip ul li a:hover, .sidecat ul li a:focus, .sideequip ul li a:focus {color:var(--secondary);}
.sidecat ul li ul.subsubmenu li {border-bottom:0;}

.sidebrand ul {display:grid;grid-template-columns:1fr 1fr;gap:0.3rem 1.4%;width:92%;list-style:none;}
.sidebrand ul li {border:1px solid #E6E5E4;padding:2px;}
.sidebrand ul li img {position:relative;display:block;width:90%;height:auto;margin:0 auto;top:50%;transform:translateY(-50%);}
.sidebrand ul li a {position:relative;}
.sidebrands .menubrands {display:none;}

.regsection {display:flex;justify-content:space-between;margin-bottom:4rem;}
.regsection .col:first-child {width:37%;}
.regsection .col:last-child {width:59%;}
.regsection h2 {font-size:1.5rem;color:var(--primary);font-weight:500;letter-spacing:-0.04rem;}
.regsection p {color:#555;font-size:1rem;line-height:1.4em;padding-bottom:0.8rem;line-height:1.5em;}
.regsection p.error {color:#FF0000;font-size:0.96rem !important;font-weight:400;padding:0 !important;}
.regsection a {text-decoration:none;color:var(--secondary);font-weight:600;}
.regsection a:hover {color:var(--secondary);text-decoration:underline;font-weight:600;}
.regsection a.bold {font-weight:500;}

input[type="checkbox"].schkbox {position:absolute;left:0;top:8px;width:20px;height:20px;overflow:hidden;z-index:3;opacity:0;cursor:pointer;}
input[type="checkbox"].schkbox + label {cursor:pointer;z-index:1;}
input[type="checkbox"].schkbox + label span {position:absolute;left:0;top:4px;display:block;width:20px;height:20px;vertical-align:middle;background:url(../images/checkbox-bg.png) 0 0 no-repeat;background-size:40px 20px;cursor:pointer;}
input[type="checkbox"].schkbox:checked + label span {background:url(../images/checkbox-bg.png) -20px 0 no-repeat;background-size:40px 20px;}
input[type="checkbox"].schkbox:focus-visible + label span {outline:rgb(59,153,252) auto 3px;}
input[type="checkbox"].schkbox.failed + label > p {color:#D00;}

input[type="radio"].schkbox {position:absolute;left:0;top:6px;width:20px;height:20px;overflow:hidden;z-index:3;opacity:0;cursor:pointer;}
input[type="radio"].schkbox + label {cursor:pointer;z-index:1;}
input[type="radio"].schkbox + label span {position:absolute;left:0;top:0;display:block;width:20px;height:20px;vertical-align:middle;background:url(../images/checkbox-bg.png) 0 0 no-repeat;background-size:40px 20px;cursor:pointer;}
input[type="radio"].schkbox:checked + label span {background:url(../images/checkbox-bg.png) -20px 0 no-repeat;background-size:40px 20px;}
input[type="radio"].schkbox:focus-visible + label span {outline:rgb(59,153,252) auto 3px;}
input[type="radio"].schkbox.failed + label > p {color:#D00;}

.checkboxrow {position:relative;}
.checkboxrow label {padding-left:26px;line-height:1.2rem;font-size:0.9rem;display:block;}
.checkboxrow input[type="checkbox"].schkbox + label span {top:3px;}

p.payico {vertical-align:middle;font-weight:500;}
p.payico img {margin-right:1rem;vertical-align:middle;}
.summary-table {width:100%;border-collapse:collapse;font-size:1rem;margin-bottom:2rem;}
.summary-table td {padding:0.6rem 0;border-bottom:1px solid #f2f2f2;}
.summary-table td:last-child {text-align:right;font-weight:500;}
.floater {position:fixed;width:50px;z-index:-1;pointer-events:none;opacity:1}
#pay-now {background:#000;color:#fff;padding:1rem;font-size:1rem;border:none;border-radius:8px;cursor:pointer;transition:background 0.2s;display:block;width:100%;}
#pay-now:hover {background:#333;}
#paypal-button-container {margin-top:2rem;}

/*image upload page*/
a.button.openupload {margin-bottom:1.4rem;}
.imagecontainer {text-align:left;}
.imagecontainer #productfile {display:none;}
.imagecontainer .upload-area {width:100%;height:150px;border:3px dashed #D4D3D5;border-radius:15px;text-align:center;overflow:auto;display:flex;align-items:center;justify-content:center;}
.imagecontainer .upload-area:hover {cursor:pointer;}
.imagecontainer .upload-area h2 {text-align:center;font-weight:normal;line-height:40px;color:var(--bodytext);}
.imagecontainer .thumbnail {width:80px;height:80px;padding:2px;border:2px solid lightgray;border-radius:3px;float:left;}
.size {font-size:12px;}

.medialist {display:grid;grid-template-columns:repeat(5, 1fr);gap:0.7rem 1%;align-items:center;justify-items:center;margin:1.4rem 0;}
.mediaitem {position:relative;border:1px solid #D5D5D5;border-radius:4px;width:100%;height:100%;overflow:hidden;padding:0.3rem 0.3rem 1.9rem 0.3rem;}
.mediaimg {position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1;width:100%;height:auto;overflow:hidden;border-radius:4px;}
.mediaimg img.mediablank {position:relative;z-index:1;display:block;width:auto;max-width:100%;height:auto;max-height:100%;}
.mediaimg img.mediaicon {display:block;max-width:60%;height:auto;margin:0 auto;}
.mediatxt {position:relative;padding:0.2rem;}
.mediatxt p {width:100%;line-height:1.5em;padding:0 0 0.2rem 0;font-size:0.76rem;color:var(--bodytext);font-weight:300;}
.mediatxt p.ttl {font-size: 0.86rem;font-weight: 400;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.mediatxt p.prods {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mediatxt p span {padding:0.02rem 0.4rem;font-size:0.8rem;color:var(--bodytext);font-weight:300;border:1px solid #7B7878;border-radius:6px;line-height:1.6em;display:inline-block;margin:0 0.2rem 0.2rem 0;}
.mediatxt p.medianame {font-weight:500;} 
.mediaitem .selector {position:absolute;z-index:2;display:block;bottom:0.6rem;right:0.6rem;}
.mediaitem img.mediadelete {position:absolute;bottom:0.6rem;right:0.6rem;width:13px;height:20px;}
.mediaitem a.mediadownload {position:absolute;bottom:0.6rem;right:0.6rem;font-size:1.2rem;color:white;}
#modal-wrapper .mediaitem {padding:0.3rem 0.3rem 1.2rem 0.3rem;}
.mediaitem a.mediaselect {position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:10;}
.mediaitem a.downloadmedia {
	position: absolute;
	bottom: 0.6rem;   /* same vertical offset as delete */
	left: 0.6rem;     /* move to left edge instead of right */
	right: auto;      /* clear any right positioning */
	z-index: 2;
  }
  
  /* match the trash‐can size so they look consistent */
  .mediaitem a.downloadmedia img.mediadownload {
	display: block;
	width: 13px;
	height: 20px;
  }

.selectmedia div {position:relative;text-align:left;}
.selectmedia .mediatxt {position:relative;padding-bottom:1rem;}
.selectmedia .mediaitem label {cursor:pointer;background:none;padding:0.2rem;border:1px solid #D5D5D5;border-radius:4px;display:block;height:100%;}
.selectmedia .mediaitem label.selected {border:1px solid #4af74a;}
.selectmedia input.chkbx {position:absolute;bottom:0.4rem;right:0.4rem;zoom:1.2;}
.selectmedia p {width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.5em;padding:0 0 0.2rem 0;font-size:0.76rem;color:var(--bodytext);font-weight:300;}
.selectmedia p.ttl {font-size:0.86rem;font-weight:400;}
.form-large .selectmedia .mediatxt p {font-size:0.86rem;}
.selectmedia .selectlink {position:relative;border-radius:10px;padding:3px;}
.selectmedia .selectlink img {position:relative;display:block;width:100%;height:auto;z-index:1;background-color:#990000;border-radius:10px;}
.selectmedia .selectlink p {position:absolute;bottom:2rem;left:0;right:0;margin:0 auto;text-align:center;color:white;font-size:0.76rem;font-weight:500;padding:0 0.4rem;z-index:2;white-space:normal;text-overflow:none;}
.selectmedia .selectlink a {position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;}

.accountcontent {display:flex;justify-content:space-between;} 
.accountcontent .main {width:79%;order:2;}
.accountcontent .side {width:18%;order:1;padding-top:0.6rem;}
.accountcontent .side h3 {padding:0 0 1.8rem 0;}
.accountcontent .side h3 a {text-decoration:none;color:var(--bodytext);font-weight:600;}
.accountcontent .side h3 a:hover, .accountcontent .side h3 a:focus {color:var(--bodytext);text-decoration:underline;font-weight:600;}
.accountcontent .side ul {list-style:none;border-bottom:1px solid #F5F4F3;}
.accountcontent .side ul li {border-top:1px solid #F5F4F3;}
.accountcontent .side ul li a {display:block;padding:0.8rem 0;color:var(--bodytext);text-decoration:none;font-weight:600;}
.accountcontent .side ul li a:hover, .accountcontent .side ul li a:focus {color:var(--secondary);text-decoration:none;font-weight:600;}
.accountcontent .editorial {width:100%;}

footer {position:relative;background-color:#252624;} 
footer .inner {padding:3rem 0 2rem 0;color:white}
footer .inner h6 {position:relative;color:white;text-transform:uppercase;padding:0 0 1rem 0;margin:0 0 1rem 0;font-size:1rem;}
footer .inner h6::after {position:absolute;bottom:0;left:0;width:100px;height:3px;content:'';background-color:#E2652F;}
footer .inner p {color:white;padding:0 0 0.8rem 0;font-size:1rem;}
footer .inner p.ttl {padding:1rem 0 0.2rem 0;font-size:1rem;font-weight:600;}
footer a {color:white;text-decoration:none;font-weight:500}
footer a:hover {color:white;text-decoration:underline;}
footer ul {list-style:none;}
footer ul li {font-size:1rem;display:inline;}
footer ul li a {padding:0.34rem 0;margin-right:0.8rem;text-decoration:none;display:inline-block;}
footer ul.blocklinks li {display:block;}
footer ul.blocklinks li a {display:block;padding:0 0 0.7rem 0;}
footer, .footerbtm { z-index: 2; }
 
.footertop {display:flex;justify-content:space-between;width:100%;color:white;padding-bottom:1rem;}
.footertop .col {}
.footertop .col:first-child {width:26%;}
.footertop .col:nth-child(2) {width:18%;}
.footertop .col:last-child {width:44%;}

.footermid {padding:1.4rem 0;}
.footermid ul {padding:0 0 2rem 0;}
.footermid img {display:inline-block;margin-right:0.8rem;}

.footerbtm {background-color:var(--secondary);}
.footerbtm .inner {padding:0.4rem 0;}
.footerbtm .inner p {padding:0;font-size:0.86rem;}


.feheader {position:relative;z-index:1;text-align:left;}
.feheader h1 {font-size:2.4rem;margin-bottom:1rem;color:#008080;line-height:1.3em;}
.feheader span { display:block;}
.fegrid { display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:20px;position:relative;width:70%}
.platforms-partner-column { position:relative;display:flex;justify-content:center;align-items:center;padding:10px;transition:transform 0.3s, box-shadow 0.3s;background-color:white;z-index:1;text-decoration:none;color:inherit;}
.platforms-partner-column img { width:80px;height:auto;transition:transform 0.3s;}
.platforms-partner-column:hover { transform:scale(1.1);box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);}
.platforms-partner-column:hover img { transform:scale(1.1);}
.platforms-partner-column::before { content:'';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid transparent;border-image:linear-gradient(90deg, #008080, #003D3D) 1;pointer-events:none;}
.platforms-additional-info {padding:40px 0;text-align:left;font-size:1.2em;line-height:1.5;background:linear-gradient(90deg, #2E2D2D, #003D3D);-webkit-background-clip:text;color:transparent;animation:platforms-gradient-text 3s infinite;z-index:1;}
@keyframes platforms-gradient-text { 0%, 100% { background-position:0% 50%;} 50% { background-position:100% 50%;} }
.platforms-cta-section {position:absolute;bottom:0;right:0;width:300px;height:300px;background-color:#013B3B;color:#EBEBEB;border-top-left-radius:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;box-sizing:border-box;cursor:pointer;transition:transform 0.3s, width 0.3s, height 0.3s;overflow:hidden;text-decoration:none;z-index:1;}
.platforms-cta-section:hover { transform:scale(1.1);}
.platforms-cta-section h2 { margin:0;font-size:2em;letter-spacing:5px;text-align:right;color:#FFFFFF;}
.platforms-wave-effect { position:fixed;bottom:0;right:0;width:400px;height:400px;background-color:rgba(1, 59, 59, 0.5);border-top-left-radius:100%;pointer-events:none;z-index:1;}
.platforms-floating-icons { position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:0;}
.platforms-floating-icon { position:absolute;width:30px;height:30px;background:url(../images/icon-linqqed-floater.png) no-repeat center/cover;animation:platforms-floatIcon 15s infinite;z-index:0;}
@keyframes platforms-floatIcon { 0% { transform:translateY(0) translateX(0);opacity:1;} 50% { transform:translateY(-100px) translateX(50px);opacity:0.5;} 100% { transform:translateY(0) translateX(0);opacity:1;}
}

@media screen and (max-width:768px) { 
	.fegrid {grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));} 
	.platforms-additional-info { text-align:center;} 
	.platforms-cta-section { width:300px;height:300px;border-top-left-radius:150px;} 
	.platforms-wave-effect { width:300px;height:300px;border-top-left-radius:150px;} 
}

.rs-modal[hidden]{display:none;}
.rs-modal {position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;pointer-events:auto !important;opacity:1 !important;}
.rs-modal.show{pointer-events:auto; opacity:1;}
.rs-modal-backdrop{position:absolute; inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);}
/* dialog */
.rs-modal-dialog{position:relative;width:min(92vw,420px);max-height:80vh;overflow:auto;background:#fff;border-radius:14px;padding:2.2rem 2.4rem 2.6rem;box-shadow:0 22px 64px rgba(0,0,0,.25);animation:rs-pop .25s cubic-bezier(.25,.8,.25,1);}
@keyframes rs-pop{from{transform:scale(.9)} to{transform:scale(1)}}
/* X button */
.rs-modal-close{position:absolute; top:12px; right:16px;border:0; background:transparent;font-size:1.8rem; line-height:1;color:#999; cursor:pointer; transition:color .2s;}
.rs-modal-close:hover{color:#333}
/* meta row */
.rs-modal-meta{display:flex; justify-content:space-between; align-items:center;margin-bottom:1.3rem; font-size:.9rem; color:#888;}
.rs-modal-meta .star{color:var(--brand-gold); font-size:1.1rem}
/* full review text */
.rs-modal-text{font-size:1.08rem; line-height:1.6; margin:0 0 2rem;white-space:pre-wrap;}
.rs-modal-footer{display:flex; justify-content:space-between; align-items:center;font-weight:600; font-size:.96rem;}
.rs-modal .badge.verified{color:var(--brand-orange);font-size:.8rem; display:inline-flex; gap:4px;}

.checkout-success {
	max-width: 520px;
	margin: 6rem auto 0 auto;
	text-align: center;
	padding: 0 1.5rem;
	font-family: "Karla", sans-serif;
  }
  .checkout-success h1 {
	font-size: 2.8rem;
	font-weight: 800;
	color: #e2652f;
	margin-bottom: 1.3rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	background: linear-gradient(90deg, #e2652f 60%, #faad5d 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  }
  .checkout-success .tick {
	font-size: 3.5rem;
	color: #41b74c;
	margin-bottom: 1.2rem;
	display: block;
  }
  .checkout-success p {
	color: #23330d;
	font-size: 1.17rem;
	margin-bottom: 1.2rem;
  }
  .checkout-success .highlight {
	color: #21261d;
	font-weight: 700;
  }
  .checkout-success .btn-primary {
	display: inline-block;
	margin-top: 2.2rem;
	padding: 15px 42px;
	font-size: 1.14rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: linear-gradient(90deg, #e2652f 60%, #faad5d 100%);
	border-radius: 2rem;
	box-shadow: 0 4px 18px rgba(226,101,47,.11);
	transition: all .19s cubic-bezier(.4,1.13,.72,1.17);
	border: none;
	outline: none;
  }
  .checkout-success .btn-primary:hover {
	background: linear-gradient(90deg, #faad5d 20%, #e2652f 80%);
	transform: translateY(-2px) scale(1.035);
	box-shadow: 0 8px 26px rgba(226,101,47,.20);
  }
  @media (max-width: 600px) {
	.checkout-success {
	  margin: 3.2rem auto 0 auto;
	  padding: 0 0.6rem;
	}
	.checkout-success h1 {
	  font-size: 2.1rem;
	}
  }

  .set-password-box {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 28px rgba(56,96,24,0.09);
	padding: 2.2em 2em 1.3em 2em;
	margin-bottom: 2.5em;
	text-align: left;
	animation: fade-in 0.65s cubic-bezier(.24,1.34,.52,1);
  }
  .set-password-box h2 {
	margin-top: 0;
  }
  .set-password-box label {
	color: #23330d;
	font-weight: 700;
	font-size: 1.03em;
  }
  .set-password-box input[type="password"] {
	border: 1px solid #c9c9c9;
	border-radius: 9px;
	background: #f8faf6;
	font-size: 1.08em;
	padding: .7em 1em;
	width: 100%;
	margin-bottom: 2px;
	transition: border 0.22s;
  }
  .set-password-box input[type="password"]:focus {
	border: 1.5px solid #199a5f;
	outline: none;
  }
  .set-password-box .btn-primary {
	margin-top: 1.3em;
	width: 100%;
	border-radius: 999px;
	font-size: 1.08em;
  }
  .set-password-box small {
	display: block;
	text-align: center;
	margin-top: 1.1em;
	color: #768d6b;
  }
  @media (max-width: 600px) {
	.set-password-box {
	  padding: 1.2em 1em 1.1em 1em;
	}
  }
  @keyframes fade-in {
	0%{opacity:0;transform:translateY(20px);}
	100%{opacity:1;transform:translateY(0);}
  }

  


  #set-password-container {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 8px 32px rgba(41,60,20,0.11);
	max-width: 430px;
	margin: 5.5em auto 4em auto;
	padding: 2.3em 2em 2em 2em;
	animation: fade-in 0.7s cubic-bezier(.22,1.2,.52,1);
  }
  #set-password-container h1 {
	color: #199a5f;
	font-size: 2.1rem;
	letter-spacing: .01em;
	margin-bottom: 1.2em;
	font-family: 'Karla',sans-serif;
	font-weight: 700;
  }
  #set-password-container h1[style*="color:#b00;"] {
	color: #d82b2b !important;
  }
  #set-password-container p {
	color: #3d4930;
	font-size: 1.09rem;
	margin-bottom: 1.1em;
	margin-top: 0;
	line-height: 1.6;
  }
  #set-password-container .btn {
	background: #199a5f;
	color: #fff !important;
	border-radius: 999px;
	border: none;
	padding: 0.73em 2.3em;
	font-size: 1.08em;
	font-weight: 600;
	box-shadow: 0 3px 16px rgba(25,154,95,0.07);
	transition: background .16s, box-shadow .18s;
	cursor: pointer;
	margin: 0 8px 10px 0;
	display: inline-block;
  }
  #set-password-container .btn:hover, #set-password-container .btn:focus {
	background: #156942;
	box-shadow: 0 6px 18px rgba(25,154,95,0.12);
  }
  #set-password-container form {
	margin: 0;
	text-align: left;
  }
  #set-password-container .formrow {
	margin-bottom: 1.12em;
  }
  #set-password-container label {
	color: #23330d;
	font-weight: 700;
	font-size: 1.05em;
	margin-bottom: 6px;
	display: block;
  }
  #set-password-container input[type="password"] {
	border: 1.5px solid #e5ebdf;
	border-radius: 10px;
	background: #f7faf5;
	font-size: 1.09em;
	padding: .72em 1em;
	width: 100%;
	margin-bottom: 3px;
	transition: border 0.18s;
  }
  #set-password-container input[type="password"]:focus {
	border: 1.5px solid #199a5f;
	outline: none;
  }
  #set-password-container .regsection {
	background: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
	border-radius: 0;
  }
  @media (max-width: 600px) {
	#set-password-container {
	  padding: 1.1em 0.6em 1.1em 0.6em;
	}
  }
  @keyframes fade-in {
	0% {opacity:0;transform:translateY(25px);}
	100% {opacity:1;transform:translateY(0);}
  }
  
  

  #forgot-password-container {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(60,60,60,0.14);
    padding: 2.6em 2em 2.2em;
    margin: 4.5em auto;
    max-width: 430px;
    font-family: "Karla", sans-serif;
    animation: pop 0.4s cubic-bezier(.24,1.34,.52,1) both;
}
#forgot-password-container h1 {
    color: #199a5f;
    font-size: 2.1rem;
    letter-spacing: .01em;
    margin-bottom: 1.5rem;
}
#forgot-password-container form label {
    font-weight: 600;
    color: #19241f;
    font-size: 1.04em;
}
#forgot-password-container input[type="email"] {
    background: #f8faf6;
    border: 1px solid #c9c9c9;
    border-radius: 10px;
    font-size: 1.08em;
    padding: .7em 1em;
    margin-top: .22em;
}
#forgot-password-container .btn-primary {
    margin-top: 1.7em;
}


 /*REVIEW SLIDER */
.revslider .item {position:relative;border:1px solid #D4D4D4;border-radius:6px;text-align:center;padding:0 0 2.4rem 0;;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;overflow:hidden;min-height:194px;}
.revslider .item:hover {border:1px solid var(--secondary);-webkit-box-shadow:0px 0px 5px 0px rgba(226,101,47,0.82);box-shadow:0px 0px 5px 0px rgba(226,101,47,0.82);}
.hrevs {padding:0 3rem 2rem 3rem;}
.hrevs .review-card {width:320px;max-width:90vw;padding:2.2rem 1.8rem 2.4rem;display:flex;flex-direction:column;background:#fff;backdrop-filter:saturate(180%) blur(4px);border:1px solid rgba(0,0,0,.05);border-radius:14px;box-shadow:0 4px 3px rgba(0,0,0,.07);transition:transform .25s ease,box-shadow .25s ease;height:100%;}
.hrevs .review-meta {display:block;margin-bottom:1rem;}
.hrevs .ago {font-size:.78rem;color:#999;font-weight:500;white-space:nowrap;margin:0 auto;display:block;text-align:center;}
.hrevs .review-meta .review-stars {font-size:1.3rem;letter-spacing:1px;color:var(--brand-gold);transition:color .3s;display:block;text-align:center;}
.hrevs .review-card:hover .review-meta .review-stars {color:#ffc107;}
.hrevs .review-card .review-text {font-size:1.03rem;line-height:1.55;color:#222;flex:1 1 auto;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;}
.hrevs .review-card .review-text p {padding:0;}
.hrevs .review-footer {display:block;justify-content:space-between;align-items:center;margin-top:0.5rem;font-weight:600;color:#444;font-size:.96rem;}
.hrevs .reviewer {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}        
.hrevs .badge.verified {display:block;color:var(--brand-orange);font-size:.74rem;/*display:inline-flex;align-items:center;gap:4px;*/user-select:none;}
.hrevs .badge.verified::before {content:'✔';font-size:.8rem;line-height:1;}
.hrevs .slick-dots{margin-top:32px;}
.hrevs .slick-dots li button:before{font-size:11px;color:var(--brand-orange);opacity:.35;}
.hrevs .slick-dots li.slick-active button:before{opacity:1;}

/* ================================================================
   CHAINSaw BUILDER  –  Namespaced like pcpartpicker list
   ---------------------------------------------------------------
   NOTE: targets only the two IDs we just added:
         #csb-builder  on the main builder page
         #csb-chooser  on the choose-part picker
   ================================================================ */

/* ------- root layout ------- */
#csb-builder,
#csb-chooser{
    max-width:1180px;
    margin:40px auto;
    padding:0 18px;
}

/* headings */
#csb-builder h1,
#csb-chooser h1{
    font-size:32px;
    font-weight:600;
    margin:0 0 18px;
}

/* ====== shared table look ====== */
#csb-builder .builder-table,
#csb-chooser .builder-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.06);
}
#csb-builder thead,
#csb-chooser thead{
    background:#f2f4f7;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.03em;
}
#csb-builder th,#csb-builder td,
#csb-chooser th,#csb-chooser td{
    padding:12px 16px;
    border-bottom:1px solid #e8eaec;
}
#csb-builder tbody tr:nth-child(even),
#csb-chooser tbody tr:nth-child(even){
    background:#fafbfc;
}
/* slim component column on builder only */
#csb-builder .component{width:160px;font-weight:600;white-space:nowrap;}

/* ====== buttons ====== */
#csb-builder .btn,
#csb-chooser .btn{
    display:inline-block;
    padding:6px 12px;
    font-size:13px;
    font-weight:600;
    border-radius:3px;
    text-decoration:none;
    user-select:none;
    border:1px solid transparent;
    transition:background .15s,border .15s,color .15s;
}
#csb-builder .btn-add,
#csb-chooser .btn-add{
    background:#E2652F;
    color:#fff;
}
#csb-builder .btn-add:hover,
#csb-chooser .btn-add:hover{background:#c6501c;}

#csb-builder .btn-remove{
    float:right;
    color:#666;
    background:none;
    font-size:16px;
    line-height:1;
    padding:0 6px;
}
#csb-builder .btn-remove:hover{color:#b00000;}

#csb-builder .btn.primary{
    background:#E2652F;
    color:#fff;
    width:100%;
    max-width:320px;
    font-size:16px;
    padding:12px 0;
    margin-top:24px;
}
#csb-builder .btn.primary[disabled]{opacity:.35;cursor:default;}

/* ===== stock placeholder ===== */
#csb-builder .stock-placeholder{
    font-style:italic;
    color:#777;
}

/* ===== stats panel ===== */
#csb-builder .stats-panel{
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    font-size:13px;
}
#csb-builder .stats-panel .label{color:#555;}
#csb-builder .stats-panel .value{font-weight:600;}

/* ===== price column ===== */
#csb-builder .price,
#csb-builder .part-price,
#csb-chooser .price{   /* chooser table price col uses same class */
    font-weight:700;
    text-align:right;
}

/* ===== choose-part specific tweaks ===== */
#csb-chooser .builder-table thead{background:#fff;}
#csb-chooser .builder-table th:first-child,
#csb-chooser .builder-table td:first-child{width:110px;}
#csb-chooser .builder-table tr:hover{background:#eef6ff;}
#csb-chooser .btn-add{
    font-size:12px;
    padding:4px 8px;
}

/* ===== responsive ===== */
@media(max-width:760px){
    #csb-builder .price,
    #csb-builder th:last-child,
    #csb-builder td:last-child{
        display:none;
    }
    #csb-builder h1,
    #csb-chooser h1{font-size:26px;}
}

#csb-builder .builder-table td.selection a.btn-remove,
#csb-chooser .builder-table td.selection a.btn-remove {
  color: #E2652F !important;
}

#csb-builder .builder-table td.selection a.btn-remove:hover,
#csb-chooser .builder-table td.selection a.btn-remove:hover {
  color: #c6501c !important;
}

/* =========================================================
   BUNDLE-CUSTOM
   ========================================================= */
:root{--bb-green:#199a5f;--bb-grey:#f9f9f9;}
#bundle-builder{width:100%;}
.page-heading{margin:0 0 1.4rem;font-weight:600;font-size:clamp(1.5rem,4vw + 0.5rem,2.125rem);letter-spacing:-0.03rem;}
.bb-btn-bar{display:flex;flex-direction:column;gap:0.9rem;}
.bb-btn-left,.bb-btn-right{display:flex;width:100%;gap:0.6rem;}
.bb-btn-left button,.bb-btn-right button{flex:1 1 0;min-width:0;min-height:2.5rem;font-size:0.97rem;}
#bb-next{font-size:1.1rem;padding:0.2rem 0.7rem;}
@media (min-width:701px){.bb-btn-bar{flex-direction:row;justify-content:space-between;align-items:center;}.bb-btn-left,.bb-btn-right{width:auto;gap:0.9rem;}.bb-btn-right{margin-top:0;}.bb-btn-left{margin-bottom:0;}}
.builder-header-row{display:flex;flex-direction:column;gap:0.5rem;margin:2.4rem 0 1.4rem;}
.bundle-total-row{display:flex;align-items:baseline;gap:0.6em;}
.bundle-total-label{font-size:1.08rem;color:#222;font-weight:500;}
.bundle-total-price{font-size:clamp(1.35rem,5vw + 0.5rem,2.05rem);font-weight:700;color:var(--bb-green);letter-spacing:-0.01em;}
@media (min-width:701px){.builder-header-row{flex-direction:row;align-items:flex-end;justify-content:space-between;}}
.bundle-progress-bar{width:100%;max-width:720px;margin:0 auto 2.4rem;text-align:center;}
.bundle-progress-bar .progress-header{font-size:0.95rem;margin-bottom:0.35rem;color:#333;}
.progress-track{position:relative;height:14px;background:#e8e8e8;border-radius:7px;overflow:hidden;}
.progress-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--bb-green) 0%,var(--brand-gold,#e9bc59) 100%);border-radius:7px 0 0 7px;transition:width 0.7s cubic-bezier(.4,1.5,.6,1);}
.tier-marker{position:absolute;top:-18px;left:0;transform:translateX(-50%);text-align:center;}
.tier-marker .dot{width:10px;height:10px;border-radius:50%;background:var(--bb-green);margin:0 auto 3px;box-shadow:0 2px 6px rgba(0,0,0,.08);}
.tier-marker .label{font-size:0.75rem;color:#555;white-space:nowrap;}
.qty-picker{display:inline-flex;align-items:center;gap:0.3rem;}
.qty-input{width:44px;text-align:center;border:1px solid #ccc;border-radius:4px;padding:4px 6px;font-size:0.9rem;appearance:textfield;background:#fff;}
.qty-btn{width:28px;height:32px;line-height:32px;text-align:center;background:#f4f4f4;border:1px solid #ccc;border-radius:4px;font-size:1.25rem;color:#444;cursor:pointer;user-select:none;transition:background .18s;}
.qty-btn:hover{background:#e9f7ef;color:var(--bb-green);border-color:var(--bb-green);}
.qty-input[value="1"]~.qty-btn[data-act="dec"]{opacity:0.35;pointer-events:none;}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.builder-table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.builder-table th{padding:0.8rem 1rem;font-size:0.92rem;font-weight:600;background:var(--bb-grey);text-align:left;}
.builder-table td{padding:0.65rem 1rem;font-size:0.9rem;border-top:1px solid #eee;vertical-align:top;}
.builder-table tr:hover td{background:var(--bb-grey);}
.sel-name{display:block;font-weight:600;margin-bottom:0.25rem;}
a.btn.table-action{display:inline-flex;align-items:center;gap:4px;margin-top:0.35rem;font-size:0.8rem;padding:0.3rem 0.55rem;}
@media (min-width:768px){.page-heading{font-size:2.15rem;}.builder-table th,.builder-table td{padding:0.55rem 0.6rem;}}
.btn[disabled],.btn[aria-disabled="true"]{opacity:0.45;cursor:not-allowed;pointer-events:none;}
#bundle-drawer a:hover{background:#f6f6f6;}
.bundle-progress-bar .discount-note,.bundle-note{font-size:0.8rem;color:var(--bb-green);margin-top:0.4rem;opacity:0.83;}
.bundle-progress-bar .discount-note p,.bundle-note p{margin:0;font-size:0.94rem;letter-spacing:-0.01em;}
.cat-cell{padding:0.65rem 1rem;font-size:0.9rem;border-top:1px solid #eee;vertical-align:top;}
.cat-label{display:block;margin-bottom:0.4rem;font-weight:600;}
.slot-thumb-wrap{display:inline-block;width:60px;height:60px;border-radius:6px;overflow:hidden;}
.slot-thumb{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
@media(max-width:650px){.slot-thumb-wrap{width:50px;height:50px;}}
.drawer-body{padding:0 1.4rem;}
.drawer-hint{display:block;width:100%;text-align:center;margin:0.8rem 0;font-size:0.85rem;line-height:1.4;opacity:0.85;}
.bundle-total-row{
  display:inline-grid;                 /* shrink‑wrap box */
  grid-template-columns:max-content auto;
  column-gap:0.55rem;
  row-gap:0.10rem;
  justify-content:center;              /* centre as one block */
  align-items:baseline;
  line-height:1.15;                    /* remove tall default leading */
}

.bundle-total-row .bt-label{           /* left column */
  font-size:0.9rem;
  white-space:nowrap;
}

.bundle-total-row .bt-price{           /* right column */
  font-size:0.9rem;
  font-weight:600;
  color:#199a5f;                       /* same green you’re using */
  text-align:right;
}

.bundle-total-row .grand{              /* the big “Total” line */
  font-size:1.25rem;                   /* ⬆ bump size */
  font-weight:700;                     /* ⬆ bump weight */
  margin-top:0.25rem;                  /* small breathing space */
}
.bb-btn-bar .btn.outline {
  background: transparent;
  color: #e7682d;              /* same orange you use for fills */
  border: 2px solid #e7682d;
}

.bb-btn-bar .btn.outline:hover,
.bb-btn-bar .btn.outline:focus {
  background: #e7682d;         /* fill on hover/focus for affordance */
  color: #fff;
}

/* Optional: keep them greyed‑out when disabled */
.bb-btn-bar .btn.outline[disabled],
.bb-btn-bar .btn.outline[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
}

.btn.outline{
  background: transparent;
  color:#e7682d;              /* orange */
  border:2px solid #e7682d;
}
/* hover / focus feedback */
.btn.outline:hover,
.btn.outline:focus{
  background:#e7682d;
  color:#fff;
}
/* disabled state keeps the “greyed‑out” look */
.btn.outline[disabled],
.btn.outline[aria-disabled="true"]{
  opacity:.4;
  cursor:not-allowed;
}
/* ---------- Drawer shell ------------------------------------------------- */
:root{--drawer-w:380px;--gap-x:1.25rem;--gap-y:.9rem;--accent:#ff6a00;--border:#ececec;}
.drawer{position:fixed;right:0;top:0;width:var(--drawer-w);max-width:100%;height:100vh;background:#fff;box-shadow:-4px 0 12px rgba(0,0,0,.18);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:99999;}
.drawer--open{transform:translateX(0);}
/* ---------- Overlay ------------------------------------------------------ */
.drawer__overlay{position:fixed;inset:0;display:none;background:rgba(30,30,30,.17);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:99998;}
.drawer__overlay.active{display:block;opacity:1;pointer-events:all;}
/* ---------- Header ------------------------------------------------------- */
.drawer__head{position:sticky;top:0;display:flex;align-items:center;gap:.8rem;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #e5e5e5;background:#fff;z-index:1;}
.drawer__head h3{font-size:1.3rem;font-weight:700;margin:0;flex:1;line-height:1.2;}
.drawer__manage{font-size:.9rem;font-weight:600;}
.btn.icon{width:32px;height:32px;display:grid;place-content:center;background:#f3f3f3;border-radius:6px;}
.btn.icon:hover{background:#ececec;}
#drawer-close{background:var(--accent);color:#fff;}
#drawer-close:hover{background:#e26000;}
#drawer-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;}
.btn.pill{display:flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:999px;font-weight:600;background:var(--accent);color:#fff;}
.btn.pill:hover{background:#e26000;}
/* ---------- List --------------------------------------------------------- */
.drawer__list{flex:1 1 auto;overflow-y:auto;padding:.25rem 0;list-style:none;margin:0;}
.bundle-row{display:flex;flex-direction:column;gap:.25rem;padding:var(--gap-y) var(--gap-x);border-bottom:1px solid var(--border);transition:background .15s;}
.bundle-row:hover{background:#fafafa;}
.bundle-row__link{display:block;text-decoration:none;color:inherit;}
.bundle-row__link:hover,.bundle-row__link:focus{text-decoration:none;}
.bundle-row__name{font-weight:600;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bundle-row__meta{font-size:.8rem;color:#666;}
.bundle-row__price{color:#199a5f;font-weight:600;}
/* ---------- Empty-state -------------------------------------------------- */
.drawer__empty{padding:1.25rem;text-align:center;color:#777;display:none;}
/* ---------- Utility ------------------------------------------------------ */
.text-green{color:#199a5f;}
/* ---------- Scrollbar (Win/Linux) --------------------------------------- */
.drawer__list::-webkit-scrollbar{width:6px;}
.drawer__list::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:3px;}





/* =========================================================
BUNDLE – Choose Product screen
========================================================= */
:root{--bb-green:#199a5f;--bb-grey:#f9f9f9;--bb-grey-2:#f7f7f7;}
/* layout wrapper (shares the one we made earlier) */
.choose-product{max-width:1100px;}
/* category pills ------------------------------------------------ */
.choose-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem;}
.choose-tabs a{padding:.5rem 1.1rem;border:1px solid var(--bb-green);border-radius:30px;font-weight:600;text-decoration:none;color:var(--bb-green);transition:.15s background,.15s color;}
.choose-tabs a:hover{background:var(--bb-grey)}
.choose-tabs a.active{background:var(--bb-green);color:#fff;pointer-events:none;}
/* table --------------------------------------------------------- */
.choose-table{width:100%;border-collapse:collapse;font-size:.93rem;}
.choose-table th,.choose-table td{padding:.6rem .75rem;border:1px solid #e2e2e2;vertical-align:middle;}
.choose-table th{background:#fafafa;font-weight:600;}
.product-row{background:var(--bb-grey);font-weight:600;cursor:pointer;transition:.15s background;}
.product-row:hover{background:#e7f4ec}
.product-row .chevron{display:inline-block;transition:.18s transform;}
.product-row.open .chevron{transform:rotate(90deg)}
@media (max-width:768px) {
	.choose-table th,.choose-table td {vertical-align:top;}
}
.colour-row{background:var(--bb-grey-2);border-top:none;cursor:pointer;transition:background .15s;}
.colour-row:hover{background:#ececec}
.colour-name{padding-left:2rem;font-weight:500}

/* image thumbnails ----------------------------------------------*/
.prod-img{width:48px;height:48px;object-fit:cover;border-radius:4px;vertical-align: middle;margin-right:1rem;}
/* layout wrapper ------------------------------------------------ */
.sizes-builder{max-width:1100px;padding:0 0 2.5rem 0;}
/* heading + drawer button -------------------------------------- */
.sizes-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;}
.sizes-footer{
    margin-top: 1rem;          /* space above */
    text-align: right;         /* right-align the button */
}

/* make it span full width on narrow screens */
@media (max-width: 600px){
    .sizes-footer{
        text-align: center;
    }
    #drawerToggleBottom{
        width: 100%;
    }
}
.btn-drawer{background:var(--bb-orange);color:#fff;border:none;border-radius:4px;font-weight:600;font-size:.95rem;padding:.55rem 1.2rem;cursor:pointer;}
/* size grid ----------------------------------------------------- */
.size-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.9rem;overflow-x:auto;}
.size-table th,.size-table td{padding:.55rem .65rem;border:1px solid #e2e2e2;text-align:left;}
.size-table thead th{background:var(--bb-grey-2);font-weight:600;}
.size-table tbody tr:nth-child(odd){background:var(--bb-grey)}
.size-table .slot{/* sticky first column   */position:sticky; left:0; z-index:2;width:240px; text-align:left; background:#fff;font-weight:600; line-height:1.3;}
.size-table thead .slot{top:0; z-index:3}
/* selects & fixed sizes ---------------------------------------- */
.size-table select,.size-table .fixed-size{width:100%;max-width:150px;padding:.3rem .35rem;border:1px solid #ccc;border-radius:3px;font-size:.85rem;}
.size-table .fixed-size{display:inline-block;background:#fff;}

/* --- Simple highlight for the active size variant --- */
.current-variant-badge {display:inline-block;background:#199a5f;color:white;border-radius:16px;padding:3px 14px;font-size:14px;font-weight:600;margin-bottom: 0.8em;}
.btn-back-bundle {display: inline-block;margin: 0.5em 0 1.1em 0;padding: 3px 10px;background: #f7f7f7;color: #444;border: 1px solid #eee;border-radius: 13px;font-size: 0.96em;text-decoration: none;transition: background 0.15s;opacity: 0.82;}
.btn-back-bundle:hover {background: #e3ede8;color: #199a5f;opacity: 1;border-color: #b6dec8;}

/* drawer -------------------------------------------------------- */
#bundleDrawer{position:fixed; inset:0 0 0 auto;/* fallback for browsers w/o */width:360px; max-width:90%;background:#fff;transform:translateX(100%);transition:.3s transform;box-shadow:-4px 0 10px rgba(0,0,0,.18);z-index:10001;display:flex;flex-direction:column;}
#bundleDrawer.open{transform:translateX(0)}
#drawerOverlay{/* darken bg & block scroll */position:fixed; inset:0;background:rgba(0,0,0,.35);opacity:0; visibility:hidden;transition:.25s opacity;z-index:10000;}
#drawerOverlay.show{opacity:1;visibility:visible}
.drawer-header,.drawer-footer{padding:1rem;border-bottom:1px solid #e5e5e5;font-weight:600}
.drawer-footer{border:none;border-top:1px solid #e5e5e5}
.drawer-body{flex:1;overflow:auto;padding:1rem}
.drawer-add{width:100%;padding:.5rem 1rem;border:1px dashed var(--bb-orange);color:var(--bb-orange);background:#fff;border-radius:5px;font-weight:600;margin-bottom:.9rem;cursor:pointer;}
.drawer-add:hover{background:#fff7f3}
.drawer-kit{display:grid;grid-template-columns:1fr 80px 30px;gap:.6rem; align-items:center;padding:.65rem .8rem;border:1px solid #ddd;border-radius:5px;margin-bottom:.8rem;cursor:pointer;font-size:.88rem;transition:.15s background;}
.drawer-kit.active{background:var(--bb-grey-2)}
.drawer-kit:hover{background:var(--bb-grey)}
.drawer-kit h4{margin:0;font-weight:600;font-size:.9rem}
.drawer-kit input{width:70px;padding:.25rem .35rem;text-align:center}
.drawer-kit .bin{font-size:1rem;opacity:.7;cursor:pointer;transition:.15s color}
.drawer-kit .bin:hover{opacity:1;color:#c90c0c}

/* toast --------------------------------------------------------- */
.toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:var(--bb-green);color:#fff;padding:.6rem 1.1rem;border-radius:4px;font-size:.85rem;z-index:12000;opacity:0;pointer-events:none;transition:.25s opacity;}
.toast.show{opacity:1}

.bundle-grid { display: grid; gap: 1.5rem; margin:0 0 2rem; padding: 0; list-style: none; grid-template-columns: repeat(4, 1fr); }
.bundle-card { background: #fff!important; border: 1px solid #e3e3e3!important; padding: 25px!important; margin-bottom: 40px!important; border-radius: 6px!important; aspect-ratio: auto!important; min-height: auto!important; overflow: visible!important; position: relative; box-shadow: none!important; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.bundle-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.bundle-card:focus-visible { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.18); }
.bundle-card__figure { all: unset; }
.slot-card__figure { all: unset; }
.bundle-card__img { all: unset; }
.slot-card__img { all: unset; }
.bundle-card__body { all: unset; }
.slot-card__body { all: unset; }
.bundle-card img { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
  
/* bundles.php styles */
.bundle-custom-grid{display:grid;gap:1.5rem;margin:0 0 2rem;padding:0;list-style:none;grid-template-columns:repeat(4,1fr);overflow: hidden;}  
@media(max-width:1024px){
	.bundle-custom-grid{grid-template-columns:repeat(3,1fr);}
} 
@media(max-width:768px){
	.bundle-custom-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
	.bundle-custom-grid{grid-template-columns:repeat(1,1fr);}
}
.bundle-custom-card{position:relative;overflow:hidden;border-radius:1rem;aspect-ratio:4/3;min-height:240px;background:rgba(255,255,255,.2);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s;} 
.bundle-custom-card:hover,.bundle-custom-card:focus-visible{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,.18);} 
.bundle-custom-card--cta{grid-column:1/-1;aspect-ratio:16/5;min-height:220px;}
.bundle-custom-card__figure,.bundle-custom-slot__figure{position:absolute;inset:0;margin:0;width:100%;height:100%;} 
.bundle-custom-card__img,.bundle-custom-slot__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.28,.75,.35,1);} 
.bundle-custom-card:hover .bundle-custom-card__img{transform:scale(1.08);}
.bundle-custom-card__body,.bundle-custom-slot__body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.4rem 1.2rem 1.8rem;color:#fff;text-shadow:0 3px 8px rgba(0,0,0,.3);background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.65) 100%);} 
.bundle-custom-card--cta .bundle-custom-card__body{align-items:center;text-align:center;justify-content:center;background:rgba(25,36,31,.72);}
.bundle-custom-card__title,.bundle-custom-slot__title{margin:0 0 .35rem;font-size:1.3rem;font-weight:700;line-height:1.25;color:#fff;} 
.bundle-custom-card--cta .bundle-custom-card__title{font-size:2rem;margin-bottom:.7rem;} 
.bundle-custom-card__price{margin:0 0 .4rem;font-size:1.05rem;font-weight:600;background:#E2652F;padding:.15em .6em;border-radius:.4em;display:inline-block;color:#fff;} 
.bundle-custom-card__blurb{margin:0;font-size:.9rem;line-height:1.35;max-height:3.3em;overflow:hidden;color:#fff;} 
.bundle-custom-card__btn{margin-top:1rem;color:#fff;}
.btn{display:inline-block;border:0;border-radius:2rem;padding:.6em 1.35em;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);} 
.btn.primary{background:#E2652F;color:#fff;} 
.btn.primary:hover{box-shadow:0 4px 16px rgba(0,0,0,.18);transform:translateY(-2px);} 
.btn.primary:focus-visible{outline:3px solid #e09777;outline-offset:2px;}

.bundleheader {position:relative;width:100%;overflow:hidden;border-radius:10px;}
.bundleheaderimg {width:100%;height:100%;display:block;position:absolute;left:0;right:0;bottom:0;margin:auto;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;z-index:1;}
.bundleheader:hover .bundleheaderimg {transform:scale(1.06);}
.bundleheaderimg::after {width:100%;height:100%;display:block;position:absolute;left:0;top:0;content:'';background:rgba(0,0,0,0.4);z-index:2;}
.bundleheader a {width:100%;height:100%;display:block;position:absolute;left:0;top:0;z-index:5;}
.bundleheadertxt {position:relative;width:100%;height:100%;display:flex;align-items:center;z-index:4;}
.bundleheadercontent {padding:5rem 2.8rem;text-align:center;width:100%;color:white;}
.bundleheadercontent h2 {font-size:2rem;font-weight: 700;margin-bottom:.7rem;color:white;}
.bundleheadercontent p {font-size:.9rem;line-height:1.35;color:white;}

.reveal-pending{opacity:0;transform:translateY(32px);} 
.reveal-in{opacity:1!important;transform:translateY(0)!important;transition:opacity .55s ease,transform .55s cubic-bezier(.4,0,.2,1);} 
.bundle-divider{grid-column:1/-1;display:flex;align-items:center;gap:.8rem;font-weight:600;color:#55625c;letter-spacing:.01em;user-select:none;margin:2.2rem 0 1rem;opacity:.85;} .bundle-divider::before,.bundle-divider::after{content:"";flex:1 1 auto;height:2px;background-image:repeating-linear-gradient(135deg,currentColor 0 6px,transparent 6px 12px);background-size:12px 100%;background-repeat:repeat-x;} 
.bundle-divider span{white-space:nowrap;font-size:.95rem;}

.preset-card-content {display:grid;gap:1.5rem;padding:0;list-style:none;grid-template-columns:repeat(4,1fr);} 
.preset-card {background:#fff;border:1px solid #e0e5e2;border-radius:1rem;overflow:hidden;transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s;box-shadow:0 2px 6px rgba(0,0,0,.06);} 
.preset-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 14px 32px rgba(0,0,0,.15);} 
.preset-card__link{display:block;height:100%;text-decoration:none;color:inherit;} 
.preset-card__body--top{display:flex;flex-direction:column;gap:.15rem;padding:.6rem 1.2rem .5rem;border-bottom:1px solid #f1f3f2;} 
.preset-card__title{margin:0;font-size:1.2rem;font-weight:700;line-height:1.2;color:#19241f;} 
.preset-card__price{font-size:.9rem;font-weight:600;line-height:1;border-radius:.35rem;background:#E2652F;color:#fff;padding:.15em .6em;display:inline-block;} 
.preset-card__body--items{padding:.6rem 1.2rem 1.3rem;} 
.preset-card__items{display:flex;flex-wrap:wrap;gap:.8rem;margin:0;padding:0;list-style:none;} 
.preset-card__items li{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:64px;font-size:.75rem;font-weight:500;text-align:center;color:#19241f;} 
.preset-card__items img{width:40px;height:40px;object-fit:contain;border-radius:.3rem;background:#f9f9f9;}  

@media(max-width:1024px){
	.preset-card-content{grid-template-columns:repeat(3,1fr);}
} 
@media(max-width:768px){
	.preset-card-content{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
	.preset-card-content{grid-template-columns:repeat(1,1fr);}
}

@media(max-width:640px){
	.preset-card__title{font-size:1.05rem;}
	.bundle-custom-card__title,.bundle-custom-slot__title{font-size:1.1rem;}
	.bundle-custom-card--cta .bundle-custom-card__title{font-size:1.4rem;}
} 
@media(max-width:480px){
	.bundle-custom-grid{gap:1rem;margin:1.5rem 0;}
	.bundle-custom-card__body{padding:1rem .9rem 1.4rem;}
	.bundle-custom-card__title,.bundle-custom-slot__title{font-size:1rem;}
	.bundle-custom-card--cta .bundle-custom-card__title{font-size:1.2rem;}
	.bundle-custom-card__price{font-size:.95rem;}
	.bundle-divider{margin:1.8rem 0 .8rem;gap:.6rem;font-size:.9rem;}
	.preset-card__body--top{padding:.45rem 1rem .35rem;gap:.12rem;}
	.preset-card__body--items{padding:.55rem 1rem 1rem;}
	.preset-card__items{gap:.6rem;}.preset-card__items li{width:56px;font-size:.7rem;gap:.2rem;}
	.preset-card__items img{width:36px;height:36px;}
} 
.w-100{width:100%!important;display:block;}
.btn{display:inline-block;border:0;border-radius:2rem;padding:.6em 1.35em;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);}
.btn.primary{background:#E2652F;color:#fff;}
.btn.primary:hover{box-shadow:0 4px 16px rgba(0,0,0,.18);transform:translateY(-2px);}
.btn.primary:focus-visible{outline:3px solid #e09777;outline-offset:2px;}
@media(max-width:640px){
	.bundle-card__title,.slot-card__title{font-size:1.1rem;}
	.bundle-card--cta .bundle-card__title{font-size:1.4rem;}
}
.reveal-pending{opacity:0;transform:translateY(32px);}
.reveal-in{opacity:1!important;transform:translateY(0)!important;transition:opacity .55s ease,transform .55s cubic-bezier(.4,0,.2,1);}
.bundle-divider{grid-column:1/-1;display:flex;align-items:center;gap:.8rem;font-weight:600;color:#55625c;letter-spacing:.01em;user-select:none;margin:2.2rem 0 1rem;opacity:.85;}
.bundle-divider::before,.bundle-divider::after{content:"";flex:1 1 auto;height:2px;background-image:repeating-linear-gradient(135deg,currentColor 0 6px,transparent 6px 12px);background-size:12px 100%;background-repeat:repeat-x;}
.bundle-divider span{white-space:nowrap;font-size:.95rem;}

@media (max-width: 1024px) { 
	.bundle-grid { grid-template-columns: repeat(3, 1fr); } 
}
@media (max-width: 768px) { 
	.bundle-grid { grid-template-columns: repeat(2, 1fr); } 
}

@media(max-width:640px){
	.preset-card__title{font-size:1.05rem;}
}
/* ---------------- MOBILE FIRST TWEAKS ---------------- */
@media(max-width:480px){
	.bundle-grid {grid-template-columns: repeat(1, 1fr);gap:1rem;margin:1.5rem 0;}
	.bundle-card__body{padding:1rem .9rem 1.4rem;}
	.bundle-card__title,.slot-card__title{font-size:1rem;}
	.bundle-card--cta .bundle-card__title{font-size:1.2rem;}
	.bundle-card__price{font-size:.95rem;}
	.bundle-divider{margin:1.8rem 0 .8rem;gap:.6rem;font-size:.9rem;}
	.preset-card__body--top{padding:.45rem 1rem .35rem;gap:.12rem;}
	.preset-card__body--items{padding:.55rem 1rem 1rem;}
	.preset-card__items{gap:.6rem;}
	.preset-card__items li{width:56px;font-size:.7rem;gap:.2rem;}
	.preset-card__items img{width:36px;height:36px;}
}

/* Utility: full width */
.w-100 { width: 100% !important; display: block; }


.kit-status          { margin-left:.35em; font-size:1.05em; }
.drawer-kit.incomplete h4 { color:#c00; }   /* optional tint for header */

/* =========================================================
   BUNDLE (bundle.php) – Mobile stacked layout
   ========================================================= */
   @media (max-width:768px){
	.builder-table{display:block;width:100%;min-width:100%!important;overflow-x:visible;}
	.builder-table thead{display:none;}
	.builder-table tr{display:block;width:100%;min-width:100%;background:#fff;border:1px solid #e5e5e5;border-radius:10px;margin:0 0 1rem;box-shadow:0 2px 6px rgba(0,0,0,.05);}
	.builder-table td{display:flex;width:100%;min-width:100%;justify-content:space-between;align-items:flex-start;gap:1.2rem;padding:.7rem 1rem;border:none!important;border-top:1px solid #f4f4f4!important;font-size:.9rem;}
	.builder-table td:first-child{border-top:none!important;}
	.builder-table td::before{content:attr(data-label);font-weight:600;color:#444;flex:0 0 auto;}
	.builder-table img{width:48px;height:48px;object-fit:cover;border-radius:6px;}
	.builder-table .colour-row{background:var(--bb-grey-2);padding-left:calc(1rem + 6px);}
	.builder-table .colour-row td{font-size:.85rem;}
	#bundle-builder .builder-table .colour-row {display: none !important;}
	.builder-table .colour-row {display: none;}
  }
	

  :root{--pb-green:#199a5f;--pb-grey:#f8f8f8;--pb-border:#e1e1e1;--pb-radius:12px;--ease:cubic-bezier(.4,0,.2,1);}
  .bundle-wrapper{padding:1rem 1rem 5.5rem;max-width:650px;margin:0 auto;}
  #preset-bundle .slot-list{display:flex;flex-direction:column;gap:1rem;list-style:none;margin:1.25rem 0 0;padding:0;}
  .slot-card{border:1px solid var(--pb-border);border-radius:var(--pb-radius);background:#fff;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.05);transition:box-shadow .25s var(--ease),transform .25s var(--ease);}
  .slot-card.open{box-shadow:0 6px 14px rgba(0,0,0,.12);}
  .slot-toggle{display:flex;align-items:center;width:100%;border:0;background:none;padding:1rem;gap:.9rem;cursor:pointer;text-align:left;}
  .slot-toggle:active{transform:scale(.98);}
  .slot-thumb{flex:0 0 64px;width:64px;height:64px;border-radius:10px;object-fit:cover;background:#f5f5f5;}
  .slot-info{flex:1 1 auto;min-width:0;}
  .slot-cat{font-size:.8rem;font-weight:600;color:#666;margin-bottom:.2rem;letter-spacing:.02em;text-transform:uppercase;}
  .slot-title{font-size:1rem;font-weight:600;margin:0;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .slot-meta{font-size:.8rem;color:#888;margin-top:.1rem;}
  .chev{flex:0 0 22px;font-size:1.2rem;line-height:1;color:#999;transition:transform .25s var(--ease);}
  .slot-card.open .chev{transform:rotate(90deg);}
  .slot-details{display:none;padding:0 1rem 1.1rem;}
  .slot-card.open .slot-details{display:block;}
  .colour-grid{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem;}
  .colour-swatch{width:38px;height:38px;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.06);}
  .colour-swatch.active{border-color:var(--pb-green);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pb-green);}
  .colour-swatch img{display:block;width:100%;height:100%;object-fit:cover;}
  .customise-box{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem;}
  #preset-bundle .bundle-bar{position:sticky;inset:unset;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--pb-border);padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;box-shadow:0 -2px 6px rgba(0,0,0,.08);backdrop-filter:blur(6px);z-index:999;}
  #preset-bundle .bundle-bar .price{font-size:1.25rem;font-weight:700;color:var(--pb-green);}
  #preset-bundle .bundle-bar .btn{flex:0 0 auto;padding:.65em 1.6em;font-size:1rem;}
  @media(min-width:769px){#preset-bundle .slot-list,#preset-bundle .bundle-bar{display:none!important;}}
  @media(max-width:768px){#preset-bundle .slot-list{display:flex!important;}#preset-bundle .bundle-bar{display:flex!important;}#preset-bundle .builder-table,#preset-bundle .bb-btn-bar{display:none!important;}}
  .lazy-swatch{opacity:0;transition:opacity .25s ease;}
  .lazy-swatch.loaded{opacity:1;}  

.StripeElement {box-sizing:border-box;height:40px;padding:10px 12px;border:1px solid transparent;border-radius:4px;background-color:white;box-shadow:0 1px 3px 0 #B2B2B2;transition:box-shadow 150ms ease;}
.StripeElement--focus {box-shadow:0 1px 3px 0 #cfd7df;}
.StripeElement--invalid {border-color:#fa755a;}
.StripeElement--webkit-autofill {background-color:#fefde5 !important;}
.paymentcontainer {max-width:740px;background-color:white;padding:20px;border-radius:10px;box-shadow:0 0 10px rgba(0, 0, 0, 0.1);}
.paymentcontainer p {padding:0 0 1rem 0;}
.paymentcontainer span {display:inline-block;width:130px;font-weight:500;}
.paymentrow {padding:1.4rem 0;border-top:1px solid #D3D3D3;} 
.formgroup {margin-bottom:1rem;} 
.paymentcontainer label {display:block;font-weight:500;font-size:0.96rem;padding:0 0 0.8rem 0;} 
.logostripe {display:block;width:82px;height:auto;}
.text-danger {height:20px;padding:0.24rem 0;color:var(--btnred);font-size:0.9rem;font-weight:400;} 

.reviews-wrap{width:100%;padding:48px 0;border-top:1px solid #e2e2e2;}
.reviews-summary{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;margin-bottom:32px;}
.reviews-summary .overall{text-align:center;}
.reviews-summary .overall .score{font-size:64px;font-weight:700;line-height:1;}
.reviews-summary .overall .stars{font-size:24px;color:#f5c518;}
.reviews-summary .breakdown{flex:1;min-width:260px;max-width:480px;width:100%;}
.breakdown .row{display:flex;align-items:center;height:10px;margin:6px 0;}
.breakdown .label{width:38px;font-size:15px;}
.breakdown .bar{flex:1;height:100%;background:#e6e6e6;border-radius:3px;margin:0 8px;position:relative;}
.breakdown .fill{display:block;height:100%;background:#f5c518;border-radius:3px;}
.breakdown .pct{width:48px;text-align:right;font-size:14px;color:#666;}
.write-review-btn{background:#12af39;color:#fff;padding:10px 20px;border-radius:4px;text-decoration:none;}
.review-filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px;}
.review-filters input[type=search], .review-filters select{padding:8px 10px;border:1px solid #ccc;border-radius:4px;}
.reviews-list .review-card {border-bottom:1px solid #eee;padding:16px 0;}
.review-card .review-meta {display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.review-card .star {font-size:17px;color:#ccc;}
.review-card .star.filled {color:#f5c518;}
.review-card .badge.verified {background:#14b85b;color:#fff;border-radius:3px;padding:2px 4px;font-size:12px;margin-left:6px;vertical-align:middle;}
.review-card .reviewer {font-weight:600;}
.review-card .ago {font-size:13px;color:#777;margin-right:6px;}
.reviews-wrap:has(.reviews-list:empty) {padding-top:32px;text-align:center;}
.reviews-wrap:has(.reviews-list:empty) .write-review-btn{display:inline-block;margin-top:12px;}

.review-form {border:1px solid #e2e2e2;padding:24px;margin-bottom:32px;}
.review-form.hidden {display:none;}
.review-form h3{margin-top:0;}
.review-form .field{margin-bottom:16px;}
.review-form .field label{display:block;font-weight:600;margin-bottom:6px;}
.review-form input, .review-form textarea{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;}
.starpicker span{font-size:26px;cursor:pointer;color:#ccc;}
.starpicker span.sel, .starpicker span:hover, .starpicker span:hover ~ span{color:#f5c518;} 
.cancel-btn{margin-left:12px;background:#ddd;color:#000;padding:10px 20px;border-radius:4px;}
.review-card.pending .star.filled{color:#bbb;}

.positioncontainer {display:flex;flex-wrap:wrap;gap:4%;justify-content:center}
.chooser {width:58%}
.posigrid {display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;background:#f6f6f6;padding:1rem}
.chooser .card {background:#fff;border:2px solid #e5e5e5;border-radius:4px;padding:4px;text-align:center;font-size:12px;cursor:pointer;user-select:none}
.chooser .card.selected {border-color:#E2652F;background:#f5fff2}
.chooser .card img {max-width:100%;height:auto}
.chooser .popular-flag {margin-top:6px;font-size:11px;font-weight:600;background: #E2652F;color: #fff;border-radius: 3px;padding: 2px 6px;display: inline-block;}
.chooser .count {margin-top:6px;color:#E2652F;font-weight:700;text-align:center;font-size:14px}
.addlogosummary {display:flex;flex-direction:column;align-items:stretch;width:38%;}
.addlogosummary.pt2 {padding-top:2.3rem;}
.addlogosummary .rightBox {border:1px solid #ddd;border-radius:4px;padding:16px;width:100%;max-width:440px}
.addlogosummary .rightBox img {float:left;margin-right:12px;max-width:90px;height:auto}





.positioncontainer .left-col {flex:0 0 420px}
.right-col {display:flex;flex-direction:column;align-items:stretch}
.pos-row {display:flex;align-items:center;gap:12px;margin-bottom:24px}
.minus {width:26px;height:26px;border:2px solid #E2652F;border-radius:4px;background:#fff;color:#E2652F;font-size:18px;line-height:18px;display:flex;justify-content:center;cursor:pointer}
.minus:hover {background:#E2652F;color:#fff}
.icon-thumb {width:60px}
.icon-thumb img {width:100%;display:block}
.pospanel {flex:1;border:1px solid #ddd;border-radius:6px;padding:12px;background:#fff}
.split-btns {display:flex;border:2px solid #ccc;border-radius:4px;overflow:hidden;height:100px;max-width: 300px;}
.split-btns button {flex:1;border:none;background:#fafafa;cursor:pointer;font-size:14px;transition:background .2s}
.split-btns button:hover {background:#f0f0f0}
.split-btns button+button {border-left:2px solid #ccc}
.preview {display:block;max-width:100%;max-height:120px;margin:0 auto 12px}
.method-btns{display:flex;border:2px solid #ccc;border-radius:4px;overflow:hidden}
.method-btns button{flex:1;border:none;background:#fafafa;cursor:pointer;font-size:14px;padding:12px 6px;transition:background .2s}
.method-btns button:hover:not(.active){background:#f0f0f0}
.method-btns button.active{background:#ff6a00;color:#fff}
.plus {width:26px;height:26px;border:2px solid #E2652F;border-radius:4px;background:#fff;color:#E2652F;font-size:18px;line-height:18px;display:block;cursor:pointer}
.chooser .plus {margin:0 auto;}
.plus:hover {background:#E2652F;color:#fff}
.method-error {color: #b00;font-size: 0.9em;margin-top: 8px;text-align: center;}
.positioncontainer #continue{margin-top:24px;padding:14px 32px;border:none;border-radius:4px;background:#ff6a00;color:#fff;font-size:18px;cursor:pointer;width:100%;max-width:440px;transition:opacity .2s}
.positioncontainer #continue:hover:not(:disabled){opacity:0.85}
.positioncontainer #continue:disabled{background:#ccc;cursor:not-allowed;opacity:0.6}


.qty-controls input.qty-input::-webkit-outer-spin-button,
.qty-controls input.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.qty-controls input.qty-input {
	width: 60px;
	padding: 6px;
	font-size: 15px;
	text-align: center;
	border: 1px solid #ff4d00c2;
	border-radius: 6px;
	background-color: #fffaf7;
	color: #333;
  }
  

/* Applies to basket.php size dropdown inputs */
.size-table input.qty-input {
	width: 50px;
	padding: 5px 6px;
	font-size: 14px;
	text-align: center;
	border: 2px solid #ff4d00;
	border-radius: 6px;
	box-sizing: border-box;
	-moz-appearance: textfield;
}

/* Remove spin buttons in Chrome, Safari, Edge, Opera */
.size-table input.qty-input::-webkit-outer-spin-button,
.size-table input.qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Remove spin buttons in Firefox */
.size-table input.qty-input[type=number] {
-moz-appearance: textfield;
}


.sect-build-kit {margin-bottom:2.4rem;}
/* === exclusive brand strip (final version) ================== */
.hsclusive {
    width:100%;    /* cancel the 200 px + 100% rules */
	display:grid;
	grid-template-columns:repeat(3, 1fr);gap:2%;
	margin-bottom:2.4rem;
}
  .hsclusive img{
    width:100%;
    height:auto;
    max-width:none;
    max-height:none;
    display:block;           /* removes the stray baseline gap */
}

@media screen and (max-width:982px) { 
	.positioncontainer {display:block} 
	.chooser {width:100%;padding-bottom: 2rem;} 
	.addlogosummary {width:100%}

}
@media screen and (max-width:600px) { 
	.posigrid {grid-template-columns:repeat(2, 1fr);gap:1rem;}
	.hsclusive {display:block;}
	.hsclusive .item {margin-bottom:1.2rem;}
}


@media screen and (max-width:1700px) {
	.medialist {grid-template-columns:repeat(5, 1fr);gap:0.7rem 1%;}
}
@media screen and (max-width:1500px) {
	.contentmain {width:calc(100% - 272px);}
	.contentside {width:240px;padding:2rem 0.6rem 2rem 0.6rem;}	
	.medialist {grid-template-columns:repeat(4, 1fr);gap:0.7rem 1%;}
}
@media screen and (max-width:1220px) {
	header .nav > ul > li > ul > li {width:19%;}
	.sizes-grid {grid-template-columns:repeat(5, 1fr);}
	.bulk-grid {grid-template-columns:repeat(5, 1fr);}
}

@media screen and (max-width:982px) {
	.outer {padding-top:132px;}
	.nav {display:none;}
	.openmenu {display:block;position:absolute;top:28px;right:0;}
	header.small .openmenu {top:10px;}
	header {height:130px;-webkit-box-shadow:0px 5px 15px -1px rgba(190,190,190,0.87);box-shadow:0px 5px 15px -1px rgba(190,190,190,0.87);}
	.panels ul {padding:0;}
	.hbrands, .hrevs {padding:0 1.6rem 2rem 1.6rem;}
	.hcats {padding:0 1.6rem 2rem 1.6rem;}
	.hpanels {padding:2rem 0 0;}
	.products ul {grid-template-columns:1fr 1fr 1fr;}
	.sizes-grid {grid-template-columns:repeat(4, 1fr);}
	.bulk-grid {grid-template-columns:repeat(4, 1fr);}
	.pageform {max-width:900px;}
	.regsection {display:block;}
    .regsection .col {width:100%;margin-bottom:1rem;}
	.regsection .col:first-child {width:100%;}
	.regsection .col:last-child {width:100%;}
	.hdrctc {right:60px;}
	.hdrctc p {font-size:0.94rem;}

	.header .nav-links {display:none;}
    .header .auth-links {display:none;}
	.editorial {width:100%;}
	
	.svclinks {display:block;margin:0 0 2rem 0;}
	.svclinks p {width:100%;}
	.content-text {padding:80px 8% 20px 8%;}
	.content-text h2 {font-size:2.1rem;padding:0 0 0.8rem 0;}
	.fegrid {width:100%;}
	
	.accountcontent {display:block;} 
	.accountcontent .main {width:100%;margin-bottom:2rem;}
	.accountcontent .side {width:100%;}
}
@media (max-width:930px){
	.cart-columns{flex-direction:column;}
	.cart-summary{width:100%;}
}
@media screen and (max-width:768px) {
	.outer {padding-top:100px;}
	.hhero img.bannerm {display:block;}
	.hhero img.bannerd {display:none;}
	header, header.small {height:96px;}
	header .inner, header.small .inner {padding:0.4rem 0;}
	header .logo, header.small .logo {width:136px;height:auto;margin:0.3rem 0;}
	.hdrctc, header.small .hdrctc {right:0;top:6px;}
	.openmenu, header.small .openmenu {top:46px;}
	.hdrsearch {display:none;}
	header .hdrlinks {position:absolute;top:42px;right:66px;}
	header .hdrlinks .btn span {display:none;}
	.content .inner {padding:0.6rem 0 1rem;}
	.panels ul {grid-template-columns:1fr 1fr 1fr;}
	.products ul {grid-template-columns:1fr 1fr;}
	.pagetitle {display:block;}
	.pagetitleimg {width:100%;max-width:220px;margin-bottom:1rem;}
	.pagetitletxt {width:100%;}
	.product {display:block;}
	.producttxt {width:100%;}
	.productimg {width:100%;}
	
	.productfeatures.img {display:none;}
	.mproductfeatures {display:block;}
	.productimg {display:none;}
	.mproductimg {display:block;margin-bottom:2rem;}
	.mmain-img {width:100%;max-width:400px;height:auto;}
	
	.related-list {grid-template-columns:1fr 1fr;}
	.medialist {grid-template-columns:repeat(3, 1fr);gap:0.7rem 2.5%;}
	
	header .hdrlinks .accmenu {right:24px;}
	.item-header {display:block;}

	.footertop {flex-wrap:wrap;}
	.footertop .col:first-child {width:58%;padding-bottom:1.4rem}
	.footertop .col:nth-child(2) {width:38%;padding-bottom:1.4rem}
	.footertop .col:last-child {width:100%;}
}
@media screen and (max-width:600px) {
	.outer {padding-top:84px;}
	header, header.small {height:80px;}
	header .inner, header.small .inner {padding:0.4rem 0;}
	header .logo, header.small .logo {width:110px;height:auto;}
	.hdrctc {display:none;}
	.openmenu, header.small .openmenu {top:26px;}
	header .hdrlinks {top:20px;}
	
	.medialist {grid-template-columns:repeat(2, 1fr);gap:0.7rem 3%;}

	.panels ul {grid-template-columns:1fr 1fr;gap:1rem 1.4%;}
	.footertop {display:block;}
	.footertop .col:first-child {width:100%;}
	.footertop .col:nth-child(2) {width:100%;}
	.footermid {padding:0;}
}
@media screen and (max-width:480px) {
	.panels ul {grid-template-columns:1fr;gap:1rem 1.4%;}
	.products ul {grid-template-columns:1fr;}
	.sizes-grid {grid-template-columns:repeat(3, 1fr);}
	.bulk-grid {grid-template-columns:repeat(3, 1fr);}
}

@media screen and (max-width:380px) {
	.medialist {grid-template-columns:repeat(1, 1fr);gap:0.7rem 0;}
	.sizes-grid {grid-template-columns:repeat(2, 1fr);}
	.bulk-grid {grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:520px){
    .checkout-success{margin:3rem 1rem;padding:3rem 1.3rem;}
    .checkout-success h1{font-size:2.2rem;}
    .checkout-success p{font-size:1rem;}
}

.pageform.account-block{
  background:#fffbe6;              /* pale yellow highlight */
  border:2px solid #F47B20;        /* orange ring */
  border-radius:12px;
  padding:1.2rem 1.4rem;
}

/* inner header now has no border/background – just flex layout */
.payico.account{
  display:flex;align-items:center;gap:1rem;
  background:none;border:none;padding:0;font-weight:600;
}
.payico.account .icon-wrap{
  width:52px;height:52px;
  border:2px solid #F47B20;        /* keep icon circle orange */
  border-radius:50%;
  display:flex;justify-content:center;align-items:center;
}
.payico.account svg{width:26px;height:26px;fill:#F47B20;}

#pay-on-account{
  display:inline-block;margin-top:1.1rem;
  padding:0.6rem 1.8rem;
  background:#F47B20;color:#fff;font-weight:600;
  border:none;border-radius:6px;cursor:pointer;
  transition:background .15s;
}
#pay-on-account:hover{background:#d76613;}

@media(max-width:1024px){
	.hrevs .review-card{width:260px}
}
@media(max-width:768px){
	.hrevs .review-card {width:90%}
}


/* Account side menu styles */

@media(max-width:800px){
    .reviews-summary{grid-template-columns:1fr;gap:20px;text-align:center;}
    .reviews-summary .breakdown{margin:0 auto;}
}
  /* 
#account-sidebar {
	position: fixed;
	top: 120px;         
	bottom: 0;           
	width: 220px;
	overflow-y: auto;    
	background: #fff;
	border-radius: 0;  
	z-index: 1;       
  }

keep existing link styling; just add a bg when fixed sidebar scrolls
#account-sidebar a.active {background:#E2652F;color:#fff;}
.account-menu         {width:220px;background:#fff;padding:1.5rem;
	border:1px solid #e1e1e1;border-radius:8px;
	box-shadow:0 2px 6px rgba(0,0,0,.05);}
.account-menu h3      {margin:.25rem 0 1rem;font-size:1rem;color:#333;}
.account-menu a       {display:block;padding:.5rem 1rem;color:#333;
	 text-decoration:none;border-radius:4px;}
.account-menu a:hover {background:#f4f6ff;color:#E2652F;}
.account-menu a.active{background:#E2652F;color:#fff;}

.account-menu {
position: fixed; 
top: 160px; 
left: 0;z-index: 100; 
width: 220px;
border-radius: 0;
box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
 */

/* Account section menu styles */
.card {
    background:#fff;border:1px solid #e1e1e1;border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,.05);padding:1rem;
    }
    .card h2 {margin:.25rem 0 1rem;font-size:1.1rem;color:#333;}
    .card-link:hover {box-shadow:0 4px 10px rgba(0,0,0,.08);}
    .tbl-standard th,
    .tbl-standard td {padding:.75rem;border-bottom:1px solid #eee;text-align:left;}
    .tbl-standard thead th {color:#555;font-weight:600;}
	.card-link { display:block; text-decoration:none; color:inherit; }
	.hover-lift:hover { transform: translateY(-4px); box-shadow:0 6px 12px rgba(0,0,0,.08); }


  .sidesearch{
    position:fixed;
    top:0;
    right:-320px;              /* hide it off‑canvas on the RIGHT  */
    left:auto;                 /* disable the ‘left’ we had before */
    width:320px;
    height:100%;
    background:#fff;
    overflow-y:auto;
    transition:right .35s ease;/* animate the ‘right’ property      */
    z-index:2000;
    box-shadow:-7px 0 5px -7px rgba(0,0,0,.35); /* nice edge shadow */
}
@media(max-width:600px){ .sidesearch{width:100%;right:-100%;  } }

.sidesearch.open{right:0;}


/* ───────── slide‑out filter styling ───────── */
.sidesearchinner {
    font-family: var(--karla, "Karla", sans-serif);
    color:#1d1d1d;
    padding:1.6rem;
    line-height:1.4;
	padding:80px 1.6rem 1.6rem;
}

#slide-search-form input[type="text"]{
    width:100%;
    box-sizing:border-box;
    padding:.55rem .85rem;
    border:1px solid #a8b0b5;
    border-radius:4px;
    margin-bottom:1rem;
}

.filter-section{
    border:0;
    margin:0 0 1rem 0;
    padding:0;
}

.filter-section legend{
    margin:0;
    padding:0;
}

.filter-toggle{
    appearance:none;
    background:#f2f4f6;
    width:100%;
    text-align:left;
    font-weight:700;
    padding:.6rem .9rem;
    border-radius:4px;
    border:1px solid #d7dce0;
    cursor:pointer;
    position:relative;
}

.filter-toggle::after{                 /* chevron */
    content:"";
    width:.45em;height:.45em;
    border:solid #555;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
    position:absolute;
    right:1rem;top:50%;
    margin-top:-.25em;
    transition:transform .25s;
}

.filter-section.closed .filter-toggle::after{
    transform:rotate(-45deg);
}

.filter-section > *:not(legend){
    padding:.7rem 1rem .2rem 1rem;
    border:1px solid #e4e7ea;
    border-top:0;
    background:#fff;
}

.filter-section.closed > *:not(legend){
    display:none;
}

/* check‑boxes */
#filters label{
    display:block;
    margin-bottom:.35rem;
    cursor:pointer;
}
#filters input[type="checkbox"]{
    margin-right:.45rem;
}

/* price range inputs */
#filters input[type=number]{
    width:5.2rem;
    padding:.4rem .5rem;
    margin-left:.35rem;
    border:1px solid #a8b0b5;
    border-radius:4px;
}

/* buttons */
.sidesearchinner button[type=submit]{
    width:100%;
    background:color-mix(in srgb, var(--secondary) 85%, #000);
    color:#fff;
    padding:.65rem 1rem;
    border:0;
    border-radius:32px;
    font-weight:700;
    margin-top:1.2rem;
    cursor:pointer;
}
.sidesearchinner button[type=submit]:hover{
    background:var(--secondary);
}

.sidesearchinner a{
    color:#007c91;
    font-size:.9rem;
}


/* clean dropdown look inside the slide‑out */
.filter-label{
    display:block;
    font-weight:700;
    margin:1rem 0 .2rem;
}

.filter-label select{
    width:100%;
    box-sizing:border-box;
    padding:.4rem .5rem;
    border:1px solid #a8b0b5;
    border-radius:4px;
    background:#fff;
    font-size:.95rem;
}

.price-range{
    display:flex;
    gap:.5rem;
    margin-top:.4rem;
}

.price-range input{
    flex:1 1 50%;
    padding:.4rem .5rem;
    border:1px solid #a8b0b5;
    border-radius:4px;
}

/* ───── dropdown‑chips widget ───── */
.filter-wrap{ margin-bottom:1.2rem; }
.filter-heading{ font-weight:700; display:block; margin:.4rem 0 .3rem; }

.filter-select{ display:none; }          /* hide native multi‑select */

.chip-box{ position:relative; }

.chip-toggler{
    width:100%;
    text-align:left;
    padding:.55rem .75rem;
    background:#fff;
    border:1px solid #a8b0b5;
    border-radius:4px;
    cursor:pointer;
    font-size:.95rem;
}

.chip-menu{
    position:absolute;
    left:0; right:0;
    top:100%;
    background:#fff;
    border:1px solid #a8b0b5;
    border-radius:4px;
    max-height:280px;
    overflow-y:auto;
    list-style:none;
    margin:.25rem 0 0;
    padding:.3rem 0;
    display:none;
    z-index:3000;
}

.chip-menu li{
    padding:.45rem .9rem;
    cursor:pointer;
}
.chip-menu li:hover{ background:#f0f4f6; }

.chip-box.open .chip-menu{ display:block; }

/* chips row (inserted before the toggler) */
.chip{
    display:inline-block;
    background:var(--secondary);
    color:#fff;
    padding:.15rem .65rem .15rem .55rem;
    border-radius:16px;
    font-size:.8rem;
    margin:0 .35rem .35rem 0;
}

.chip button{
    border:0;
    background:none;
    color:#fff;
    font-size:1rem;
    line-height:1;
    margin-left:.35rem;
    cursor:pointer;
}


/* ── Search page layout ───────────────────────────────────────── */

@media (min-width: 992px) {
	.search-layout        {display:flex; align-items:flex-start; gap:1.5rem;}
	.filters-col          {flex:0 0 260px;}
	.filters-col .filter-wrap {margin-bottom:1rem;}
	.results-col          {flex:1 1 auto;}
  }
  
  /* ── Filter chips ─────────────────────────────────────────────── */
  
  .filter-chips           {display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1rem;}
  .filter-chip            {display:inline-flex; align-items:center; background:#f4f4f4;
							border-radius:16px; padding:0 .75rem; font-size:.875rem;
							line-height:2rem;}
  .filter-chip button     {border:0; background:none; margin-left:.25rem; cursor:pointer;
							font-size:1rem; line-height:1;}
  .filter-chip button:focus-visible {outline:2px solid #000; outline-offset:2px;}
  
.filter-count        {font-size:.75rem; background:#e6e6e6; border-radius:10px;
padding:0 .45em; margin-left:.4em;}


/* ── Price slider ─────────────────────────────────────────────── */
.price-slider       {margin:.5rem 0 1rem;}
.ui-slider          {background:#d6d6d6; height:4px; border-radius:3px; position:relative;}
.ui-slider-range    {background:#598231;}      /* Root‑System green */
.ui-slider-handle   {width:16px; height:16px; background:#598231;
                     border:0; border-radius:50%; top:-6px; cursor:pointer;}
/* fallback textboxes */
.price-inputs       {display:flex; gap:.5rem; font-size:.875rem;}
.price-inputs input {width:70px;}

/* ─────────────── container ─────────────── */
.price-slider {
    --track-h:   6px;          /* thickness of track  */
    --thumb-d:  20px;          /* diameter of handle  */
    --clr-track:#ebb7a1;       /* un‑selected section */
    position:relative;
    width:100%;
    margin:1.2rem 0 2.8rem;
}

/* ─────────────── track ─────────────── */
.price-slider.ui-slider {
    height:var(--track-h);
    border-radius:3px;
    background:var(--clr-track);
    box-shadow:inset 0 1px 2px #0002;
    transition:background .25s;
}
.price-slider .ui-slider-range {
    background:linear-gradient(90deg,
        var(--secondary) 0%,
        color-mix(in srgb, var(--secondary) 80%, #000) 100%);
    border-radius:inherit;
}

/* ─────────────── handle (“thumb”) ─────────────── */
.price-slider .ui-slider-handle {
    top:calc(-1*var(--thumb-d)/2 + var(--track-h)/2);
    width:var(--thumb-d);
    height:var(--thumb-d);
    background:#fff;
    border:3px solid var(--secondary);
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 2px 5px #0003, 0 0 0 0 var(--secondary);
    transition:transform .18s cubic-bezier(.4,0,.2,1),
               box-shadow   .3s,
               border-color .25s;
}
.price-slider .ui-slider-handle:hover,
.price-slider .ui-slider-handle:focus-visible {
    transform:scale(1.16);
    border-color:var(--primary);
    box-shadow:0 2px 5px #0004,
               0 0 0 6px color-mix(in srgb,var(--secondary) 40%, transparent);
    outline:none;
}

/* ─────────────── numeric “bubble” ─────────────── */
.price-slider .price-tooltip {
    position:absolute;
    top:calc(-36px - 8px);         /* lift tooltip a little higher */
    left:50%;
    transform:translateX(-50%);
    pointer-events:none;
    padding:3px 8px;
    font:700 .8rem/1.2 system-ui, sans-serif;
    color:#fff;
    background:var(--secondary);
    border-radius:4px;
    box-shadow:0 2px 6px #0002;
    opacity:0;
    transition:opacity .15s;
}
.price-slider .price-tooltip::after {       /* arrow */
    content:'';
    position:absolute;
    left:50%; bottom:-4px;
    transform:translateX(-50%);
    border:4px solid transparent;
    border-top-color:var(--secondary);
}

/* show tooltip only while actively sliding or on focus */
.price-slider .ui-state-hover  .price-tooltip,
.price-slider .ui-state-active .price-tooltip,
.price-slider .ui-state-focus  .price-tooltip {
    opacity:.96;
}

/* ─────────────── tick marks (5%) ─────────────── */
.price-slider::before {
    content:'';
    position:absolute;
    top:50%; left:0; right:0;
    height:var(--track-h);
    transform:translateY(-50%);
    background:
        repeating-linear-gradient(
            to right,
            transparent 0, transparent calc(20% - 1px),
            #0002 calc(20% - 1px), #0002 calc(20%)
        );
    pointer-events:none;
}


/* ─────────────────────────────────────────────────────────────
   “Apply filters” button
   (theme‑aware: relies on --primary & --primary‑hover vars)
───────────────────────────────────────────────────────────── */
.btn‑apply {
    display:inline‑flex;
    align-items:center;
    gap:.55em;
    padding:.65em 1.6em;
    color:#fff;
    background:var(--secondary);
    border:0;
    border-radius:50px;
    box-shadow:0 2px 5px #0002, 0 0 0 0 var(--primary);
    cursor:pointer;
    transition:
        background .25s,
        box-shadow .3s cubic-bezier(.4,0,.2,1),
        transform  .18s cubic-bezier(.4,0,.2,1);
}
.btn‑apply i {font-size:1.05em;}            /* keep icon size neat */

.btn‑apply:hover,
.btn‑apply:focus-visible {
    background:var(--primary-hover, color-mix(in srgb, var(--primary) 80%, #000));
    box-shadow:0 3px 7px #0003, 0 0 0 4px color-mix(in srgb, var(--primary) 35%, transparent);
    transform:translateY(-1px);
    outline:none;
}

.btn‑apply:active {
    transform:translateY(0);
    box-shadow:0 1px 4px #0003;
}

.btn‑apply:disabled,
.btn‑apply[aria-disabled=\"true\"] {
    opacity:.55;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
}


.sidesearch .closesearchbtn{
    all:unset;                  /* reset every browser quirk */
    position:absolute; top:18px; right:18px;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    font:700 30px/1 "Karla",sans-serif;
    cursor:pointer;
    z-index:2100;
}

.sidesearch .closesearchbtn:hover{opacity:.75;}

/* hide the dummy bottom button that we deleted from the HTML */
/*.sidesearchinner > form > button{display:none;}*/

/* turn the pill into an icon‑only button */
.btn-apply i{margin:0;}          /* remove gap */
.btn-apply{justify-content:center;width:100%;}

/* tap‑outside overlay (created by JS) */
#sidesearch-shadow{
    position:fixed;inset:0;background:#0004;
    opacity:0;transition:opacity .25s;z-index:1999;pointer-events:none;
}
#sidesearch-shadow.open{pointer-events:auto;opacity:1;}



#slide-overlay{
	position:fixed;
	inset:0;                     /* shorthand for top/right/bottom/left:0 */
	background:transparent;      /* if you’d like a dim background, add rgba(0,0,0,.3) */
	z-index:1999;                /* just below the slide‑outs (2000) */
	display:none;
  }
  #slide-overlay.active{display:block;}

  .price-slider .ui-slider-handle{
    touch-action: none;   /* modern browsers  */
    -ms-touch-action: none;  /* old Edge/IE fallback */
}


/* ~~~ DESKTOP FAKE SEARCH FIELD ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.desk-search-btn{
  display:flex; align-items:center; gap:.55rem;
  padding:.45rem 1rem .45rem .9rem;
  min-width:190px;             /* tweak width to taste              */
  font:400 0.95rem/1.2 var(--karla, "Karla", sans-serif);
  color:#666;
  background:#fff;
  border:1px solid #a8b0b5;
  border-radius:4px;
  cursor:pointer;
  transition:box-shadow .2s, border .2s;
}
.desk-search-btn i{font-size:1rem; color:#a8b0b5;}
.desk-search-btn:hover,
.desk-search-btn:focus-visible{
  border-color:#598231;
  box-shadow:0 0 0 3px color-mix(in srgb, #598231 30%, transparent);
  outline:none;
}
.desk-search-placeholder{pointer-events:none;}

/* ▸ only show on ≥992 px – hide on tablets / phones */
@media (max-width:991px){
  .desk-search-li{display:none;}
}
/* ▸ conversely, hide the small left‑hand icon once we’re on desktop
     (optional – remove if you want to keep both) */
@media (min-width:992px){
  .hdrsearch{display:none;}
}



/* account drawer – mirrors .sidesearch */
.sideacc{
  position:fixed;
  top:0;
  right:-380px;          /* hide off‑canvas */
  width:380px;           /* 100% on small screens */
  max-width:100%;
  height:100%;
  background:#fff;
  overflow-y:auto;
  box-shadow:-7px 0 5px -7px rgba(0,0,0,.35);
  transition:right .35s ease;
  z-index:2000;
}
@media(max-width:600px){ .sideacc{width:100%;right:-100%;} }

.sideacc.open{ right:0; }

.sideacc .closeaccbtn{
  position:absolute;
  top:0;
  right:20px;
  font-size:56px;
  line-height:42px;
  color:#000;
  text-decoration:none;
}

.sideaccinner{
  margin:80px 3% 20px 6%;
  padding-right:2%;
}




/* ==== Fixed sidebar nav (logged-in users) =============================== */
.sidebar-menu{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:64px;                          /* collapsed width */
  background:#fff;
  border-right:1px solid #e5e5e5;
  overflow:hidden;
  transition:width .25s ease;
  z-index:10000;
  display:flex;
  flex-direction:column;
  padding-top:.75rem;
}
.sidebar-menu ul{list-style:none;margin:0;padding:0;width:100%;}
.sidebar-menu li{width:100%;}
.sidebar-menu a{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.9rem 1rem;
  color:#222;
  text-decoration:none;
  font-size:.94rem;
  white-space:nowrap;
  transition:background .15s;
}
.sidebar-menu a:hover{background:#f5f5f5;}
.sidebar-menu i{font-size:1.1rem;width:1.1rem;text-align:center;}
.sidebar-menu span{opacity:0;transition:opacity .2s;}

/* expand on hover (or JS-applied class) */
body.sidebar-expanded .sidebar-menu,
.sidebar-menu:hover{width:220px;}
body.sidebar-expanded .sidebar-menu span,
.sidebar-menu:hover span{opacity:1;}

/* push the main page right */
body.logged-in .outer{margin-left:64px;transition:margin-left .25s;}
body.sidebar-expanded .outer{margin-left:220px;}

/* optionally hide on phones */
@media (max-width:991px){
  .sidebar-menu{display:none;}
  body.logged-in .outer{margin-left:0;}
}

/* ==== sidebar extras =================================================== */
.sb-search-row{
  display:flex;align-items:center;gap:.5rem;
  padding:.9rem 1rem .6rem 1rem;border-bottom:1px solid #eee;
}
.sb-search-row input{
  flex:1;border:none;font-size:.9rem;background:transparent;
  outline:none;
}
.sb-search-row kbd{
  font-size:10px;font-family:inherit;color:#555;background:#f2f2f2;
  border:1px solid #ddd;border-radius:3px;padding:1px 4px;
}

/* ==== collapsed-state cleanup ========================================= */
/* Applies when the bar is collapsed (mouse not over it AND body lacks .sidebar-expanded) */
body:not(.sidebar-expanded) .sidebar-menu:not(:hover) a{
  justify-content:flex-start;      /* align icons like expanded */
  padding:.75rem 1rem;             /* 1rem left padding matches expanded */
}

/* ───── existing rules remain unchanged ─────────────────────────────── */
.sb-divider{
  font-size:10px;letter-spacing:.05em;font-weight:700;
  color:#888;padding:1.2rem 1rem .4rem 1rem;text-transform:uppercase;
}

.sb-has-sub   > a .caret{margin-left:auto;font-size:.7rem;transition:transform .2s;}
.sb-has-sub.open > a .caret{transform:rotate(180deg);}
.sb-submenu{display:none;padding-left:2.3rem;}
.sb-has-sub.open .sb-submenu{display:block;}

.badge{
  background:#d22;color:#fff;border-radius:999px;
  font-size:10px;padding:0 6px;margin-left:.4rem;
}


/* ==== KEEP HEIGHT WHEN COLLAPSED ===================================== */
/* Collapse = mouse not over sidebar & body lacks .sidebar-expanded */
body:not(.sidebar-expanded) .sidebar-menu:not(:hover) {

  /* 1. Search row  – hide the input + kbd but keep the row + icon */
  .sb-search-row input,
  .sb-search-row kbd{ display:none; }

  /* 2. Dividers – keep the row's height, hide the label text */
  .sb-divider{
      font-size:0;                /* invisible text   */
      line-height:0;
      padding:.9rem 0;            /* same vertical gap */
      border:none;                /* no border line   */
  }
}

/* remove the duplicate centring rule to avoid conflicts */
body:not(.sidebar-expanded) .sidebar-menu:not(:hover) a{
  justify-content:flex-start;
  padding:.75rem 1rem;
}



/* ─── desktop / tablet (> 640 px) ───────────────────────────── */
@media (min-width:641px){
  .employees-table{
    width:100%;
    table-layout:fixed;       /* force cells to wrap nicely */
  }
  .employees-table thead th{
    position:sticky;          /* stay in view */
    top:0;
    background:#fff;
    z-index:2;
  }
  .employees-table td{
    word-break:break-word;    /* wrap long words / e-mails */
  }
}


/* ─── mobile (≤ 640 px) ────────────────────────────────────── */
@media (max-width:640px){

  /* hide the table header row */
  .employees-table thead{ display:none; }

  /* each <tr> becomes a card-like block */
  .employees-table tbody tr{
    display:block;
    padding:.75em 0;
    border-bottom:1px solid #eee;
  }

  /* each <td> stacks and carries its own label */
  .employees-table tbody td{
    display:block;
    padding:.25em 0;
  }
  .employees-table tbody td[data-label]::before{
    content:attr(data-label) " ";
    font-weight:700;
  }

  /* first cell was the checkbox – hide on mobile */
  .employees-table tbody td:first-child{ display:none; }

  /* action buttons row gets some spacing */
  .employees-table tbody td:last-child{
    margin-top:.5em;
  }
}


/* ─── buttons / toast utility ──────────────────────────────── */

/* keep short words (Edit, Add…) on one line */
.btn.sml,
.btn.sml.outline{
  white-space:nowrap;
}

#toast-box{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  pointer-events:none;
}
.toast{
  background:#333;
  color:#fff;
  padding:.6em 1em;
  border-radius:4px;
  margin-top:.5em;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .25s, transform .25s;
}
.toast.show{
  opacity:1;
  transform:translateY(0);
}
.row-saved{ background:#e6ffe9; transition:background .4s ease; }


#import-modal .btn.outline { color: #ff4800 !important; border-color: #ff4800 !important; }
#import-preview-table th,
#import-preview-table td {
    padding: 0.55em 1em;
    font-size: 1em;
    text-align: left;
}
#import-preview-table tr {
    min-height: 38px;
}




/* Mobile-only visibility for the Workspace button */
/* Hide the header icon strip on phones */
@media (max-width: 980px){
  .hide-on-mobile { display: none !important; }
}

/* Bottom nav (mobile) */
.mb-nav{
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff; border-top: 1px solid #eee;
  display: flex; gap: 0; align-items: center;
  z-index: 997;
}
.mb-link{
  /* reset button chrome so <button> matches <a> */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  line-height: 1;
  cursor: pointer;

  /* shared layout for both <a> and <button> */
  flex: 1 1 0; 
  height: 100%;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  gap: 4px; 
  text-decoration: none; 
  color: #333; 
  font-size: 12px;
}
.mb-link i{ font-size: 20px; line-height: 1; }
.mb-link:visited{ color:#333; }             /* keep anchors same colour */
.mb-link:focus{ outline: none; }
.mb-link:focus-visible{
  outline: 2px solid #111;
  outline-offset: -2px;                     /* subtle, accessible focus */
}
.mb-link:active{ opacity: .8; }
.mb-link{ transition: transform .2s ease; }
.mb-link.is-active{ transform: translateY(-2px); }

@media (min-width: 981px){
  .mb-nav{ display:none !important; }
}

/* Make room for the bottom nav on phones */
@media (max-width: 980px){
  body.has-mb-nav{
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
}
@media (min-width: 981px){
  .mobile-workspace-icon{ display:none !important; }
}

@media (max-width: 980px){
  .mobile-workspace-icon{ display:inline-block !important; }
  /* If your header collapses list items, explicitly allow this one through */
  .hdrlinks ul li.mobile-workspace-icon{ display:inline-block !important; }
}

/* Overlay + bottom sheet */
#wsOverlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  opacity:0; pointer-events:none; transition:.2s; z-index:10020; 
}
#wsOverlay.show{ opacity:1; pointer-events:auto; }

#wsSheet{
  position:fixed; left:0; right:0; bottom:-100%;
  background:#fff; border-top-left-radius:16px; border-top-right-radius:16px;
  box-shadow:0 -10px 40px rgba(0,0,0,.2);
  max-height:85vh; display:flex; flex-direction:column; z-index:10030;
  transition: bottom .25s ease, opacity .2s ease;
  opacity: 0; /* fade in */
}
#wsSheet.open{ bottom:0; opacity:1; }
@media (max-width: 980px){
  /* Don't hide header instantly; JS collapse() will animate it. */
  body.ws-open .outer,
  body.ws-open .content,
  body.ws-open .inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}
.ws-close-fab{
  position:absolute; top:8px; right:10px;
  width:32px; height:32px; border:0; border-radius:999px;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.15);
  font-size:20px; line-height:32px; text-align:center; cursor:pointer;
}
.ws-close-fab:active{ transform: scale(0.98); }

.ws-body{ padding:14px 14px 18px; overflow:auto; }
.ws-search{ display:flex; align-items:center; gap:8px; border:1px solid #ddd; border-radius:10px; padding:8px 10px; margin-bottom:12px; }
.ws-search input{ border:0; outline:0; width:100%; font-size:16px; }

.ws-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-bottom:8px; }
.ws-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:14px 8px; border:1px solid #eee; border-radius:12px; text-decoration:none; color:#222; background:#fafafa; }
.ws-tile i{ font-size:20px; }
.ws-tile span{ font-weight:600; font-size:13px; text-align:center; }
.ws-tile:active{ background:#f1f1f1; }

.ws-sec{ border:1px solid #eee; border-radius:12px; margin-top:10px; }
.ws-sec > summary{ cursor:pointer; list-style:none; padding:10px 12px; font-weight:700; display:flex; align-items:center; gap:8px; }
.ws-sec[open] > summary{ border-bottom:1px solid #eee; }
.ws-list{ list-style:none; padding:6px 8px 10px 12px; margin:0; }
.ws-list li a{ display:block; padding:8px 6px; border-radius:8px; text-decoration:none; color:#333; }
.ws-list li a:active{ background:#f6f6f6; }

/* Desktop: keep the sheet hidden entirely */
@media (min-width: 981px){
  #wsOverlay, #wsSheet { display:none !important; }
}