/* Workwear Etc — the whole theme's CSS.
   Structure follows The Workwear's four-row header and dark hero canvas,
   because that layout is proven on the sister site; the palette is CWW's own
   and deliberately not TWW green — indigo blue with amber, so nobody mistakes
   one site for the other. The rotating strapline under the logo is the
   FatPrint idea: one mark, one line that changes, nothing else moving. */

:root{
  /* Brand */
  --blue:#1C4FD6;          /* header band, primary buttons */
  --blue-d:#1540B0;        /* nav band, hover */
  --blue-ink:#0E2A6E;      /* text on pale blue */
  --blue-soft:#EAF0FE;
  --amber:#FFB000;         /* CTA, price accents */
  --amber-d:#C98700;
  --stock:#0B7A3B;         /* "in stock" only — never a brand colour */
  --ink:#0D1117;
  --ink-soft:#3C4452;
  --ink-mute:#6B7585;
  --paper:#FAFAF8;
  --line:#E6E8EC;
  --strip:#454B55;         /* trust strip */
  --radius:14px;
  --cream:#FBF7F1;
  --wrap:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Figtree,"Segoe UI",system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:Gabarito,Figtree,sans-serif;margin:0;letter-spacing:-.02em;line-height:1.06;text-wrap:balance}
p{margin:0 0 1em}
.wwe-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wwe-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:16px}
.wwe-sec{padding-block:56px}
.wwe-grid{display:grid;gap:16px}
.wwe-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wwe-c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wwe-c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.wwe-c6{grid-template-columns:repeat(6,minmax(0,1fr))}
.price{font-variant-numeric:tabular-nums}

.wwe-btn{display:inline-block;font-weight:800;font-size:16px;padding:14px 22px;border:2px solid transparent;border-radius:999px;cursor:pointer;text-align:center}
.wwe-btn:hover{text-decoration:none;filter:brightness(.95)}
.wwe-btn--amber{background:var(--amber);color:var(--ink)}
.wwe-btn--blue{background:var(--blue);color:#fff}
.wwe-btn--ink{background:var(--ink);color:#fff}
.wwe-btn--ghost{border-color:currentColor}
.wwe-pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-weight:600;font-size:14px;background:#fff}
.wwe-pill:hover{border-color:var(--blue);color:var(--blue-ink);text-decoration:none}
.lift{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.lift:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(13,17,23,.10)}

/* ── header: the bento skin's header ───────────────────────────────
   A periwinkle fact strip, then a white rounded card floating on the cream
   page holding the wordmark, the pill search, the basket and the quote
   button, with the department links as a compact row underneath.

   The old grey trust strip is gone on purpose (Imran 2026-10-16, "remove
   this all"): the same four promises are already said by the ticker and the
   stat cards in the hero, and the strip was costing 64px of height on every
   page to repeat them. */
body{background:var(--cream)}
.bnh{position:relative;z-index:60}
.bnh-strip{background:#c9cfff;color:#101418}
.bnh-strip .wwe-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:9px;max-width:1320px}
.bnh-facts{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0;padding:0;font-size:13.5px;font-weight:500;flex:1 1 auto}
.bnh-facts li{display:flex;align-items:center;gap:10px}
.bnh-facts li+li::before{content:"";width:7px;height:7px;border-radius:999px;background:#00773a;display:inline-block}
.bnh-facts li:nth-child(3)+li::before{background:#d8113f}
.bnh-strip-act{display:flex;gap:8px;flex:0 0 auto}
.bnh-sb{background:#fff;border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:700;white-space:nowrap}
.bnh-sb:hover{text-decoration:none;background:#101418;color:#fff}

.bnh-wrap{max-width:1320px;padding-top:12px}
.bnh-card{background:#fff;border-radius:22px;padding:14px 18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;box-shadow:0 2px 14px rgba(16,20,24,.07)}
.bnh-logo{display:flex;flex-direction:column;gap:3px;line-height:1.05}
.bnh-logo b{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:25px;letter-spacing:-.02em;color:#101418}
.bnh-logo span{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:#5b636d;font-weight:700}
.bnh-logo:hover{text-decoration:none}

.bnh-search{display:flex;align-items:center;gap:8px;background:#fdf6ee;border:1px solid #efe4d6;border-radius:999px;padding:5px 6px 5px 18px;min-width:0}
.bnh-search input{flex:1 1 auto;min-width:0;border:0;background:transparent;font:500 15.5px "Red Hat Text",Figtree,sans-serif;padding:9px 0}
.bnh-search input:focus-visible{outline:none}
.bnh-search button{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:999px;background:#101418;color:#fff;display:grid;place-items:center;cursor:pointer}
.bnh-search button:hover{background:#0047bb}

.bnh-act{display:flex;align-items:center;gap:12px}
.bnh-basket{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15px;white-space:nowrap}
.bnh-basket .wwe-basket-count{background:#d8113f;color:#fff;min-width:21px;height:21px;line-height:21px;border-radius:999px;font-size:12px;font-weight:800;text-align:center}
.bnh-basket .wwe-basket-count[data-n="0"]{background:#eceff3;color:#5b636d}
.bnh-quote{background:#101418;color:#fff;border-radius:999px;padding:13px 20px;font-weight:800;font-size:15px;white-space:nowrap}
.bnh-quote:hover{text-decoration:none;background:#0047bb}
.bnh-burger{display:none;border:2px solid #101418;background:#fff;border-radius:999px;padding:9px 14px;font-weight:800;cursor:pointer}

.bnh-nav{grid-column:1/-1;border-top:1px solid #eef0f3;margin-top:4px;padding-top:8px}
.wwe-nav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 20px}
.wwe-nav-item{position:relative}
.wwe-nav-top{display:inline-block;padding:8px 0;font-weight:700;font-size:14px;color:#2c333c}
.wwe-nav-top:hover{color:#0047bb;text-decoration:none}
.wwe-nav-top.is-accent{color:#d8113f}
.wwe-mega{position:absolute;left:0;top:100%;min-width:330px;background:#fff;border:1px solid #eef0f3;border-top:3px solid #0047bb;box-shadow:0 18px 40px rgba(16,20,24,.16);padding:12px;display:none;z-index:70;border-radius:0 0 16px 16px}
.wwe-nav-item:hover .wwe-mega,.wwe-nav-item:focus-within .wwe-mega{display:block}
.wwe-mega-in{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:2px 16px}
.wwe-mega-link{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:10px;font-weight:600;font-size:14.5px}
.wwe-mega-link:hover{background:#eef3ff;text-decoration:none}
.wwe-mega-link em{font-style:normal;color:#6b7585;font-weight:700;font-size:12.5px}
/* a WordPress menu assigned to this theme: children stay hidden until hover */
.wwe-nav li{list-style:none}
.wwe-nav .sub-menu{display:none;position:absolute;left:0;top:100%;z-index:70;min-width:250px;margin:0;padding:10px;background:#fff;border:1px solid #eef0f3;border-top:3px solid #0047bb;border-radius:0 0 16px 16px;box-shadow:0 18px 40px rgba(16,20,24,.16)}
.wwe-nav li:hover>.sub-menu,.wwe-nav li:focus-within>.sub-menu{display:block}
.wwe-nav .sub-menu a{display:block;padding:8px 10px;border-radius:10px;font-size:14.5px;font-weight:600}
.wwe-nav .sub-menu a:hover{background:#eef3ff;text-decoration:none}

.wwe-drawer{display:none;background:#fff;border-bottom:1px solid #eef0f3;padding-block:8px}
.wwe-drawer.is-open{display:block}
.wwe-mnav{list-style:none;margin:0;padding:0}
.wwe-mnav>li{border-bottom:1px solid #eef0f3}
.wwe-mnav summary{cursor:pointer;padding:12px 4px;font-weight:800;font-size:16px}
.wwe-mnav ul{list-style:none;margin:0 0 10px;padding:0 0 0 10px}
.wwe-mnav ul a{display:flex;justify-content:space-between;padding:8px 4px;font-size:15px}
.wwe-mnav ul a span{color:#6b7585;font-weight:700;font-size:13px}

@media(max-width:980px){
  .bnh-card{grid-template-columns:auto auto;gap:12px}
  .bnh-search{grid-column:1/-1;order:3}
  .bnh-nav{display:none}
  .bnh-burger{display:inline-block}
  .bnh-quote{display:none}
}
@media(max-width:620px){
  .bnh-facts li:nth-child(n+2){display:none}
  .bnh-logo b{font-size:21px}
}

/* ── bento hero ────────────────────────────────────────────────────
   The WPS bento skin's layout and its "classic" palette, remapped from
   that site's divisions to garment departments. Light cream page, pastel
   cards, strong-coloured chips, mono code pills. */
.wwe-bento{background:var(--cream);padding-block:14px 26px}
.wwe-bento .wwe-wrap{max-width:1320px}

/* department chips */
.bn-chips{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:12px}
.bn-chip{border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;color:#fff;min-height:70px;justify-content:center}
.bn-chip:hover{text-decoration:none;filter:brightness(1.06)}
.bn-chip-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bn-chip-t b{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:800;font-size:17px}
.bn-chip-s{font-size:13px;opacity:.92}
.bn-code{font-family:"Red Hat Mono",ui-monospace,Consolas,monospace;font-style:normal;font-size:11px;font-weight:700;background:rgba(255,255,255,.55);color:#101418;border-radius:999px;padding:3px 7px;white-space:nowrap}

.bn-chip.is-c .bn-code{background:rgba(16,20,24,.14)}

/* ticker */
.bn-ticker{overflow:hidden;margin:4px 0 14px;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.bn-ticker-track{display:flex;width:max-content;gap:10px;animation:wweTick 46s linear infinite}
@keyframes wweTick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.bn-ticker-track{animation:none}}
.bn-tick{white-space:nowrap;border-radius:999px;padding:8px 16px;font-size:14px;color:#101418}
.bn-tick b{font-weight:800}
.bn-tick.is-t0{background:#dee9ff}.bn-tick.is-t1{background:#ffe1e9}.bn-tick.is-t2{background:#fff0c2}
.bn-tick.is-t3{background:#dbf6f2}.bn-tick.is-t4{background:#e6f6dc}.bn-tick.is-t5{background:#ffe6d2}

/* the grid */
.bn-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.bn-c{position:relative;overflow:hidden;border-radius:22px;margin:0;display:block}
.bn-head{grid-column:span 6;background:#c4dbff;padding:34px 38px;display:flex;flex-direction:column;justify-content:center}
.bn-eb{margin:0 0 18px;align-self:flex-start;background:rgba(255,255,255,.72);border-radius:999px;padding:7px 14px;font-family:"Red Hat Mono",ui-monospace,Consolas,monospace;font-size:12.5px;color:#101418}
.bn-h1{margin:0 0 16px;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:clamp(34px,4.3vw,58px);line-height:1.02;color:#101418;display:flex;flex-direction:column;gap:2px}
.bn-h1 .bn-rotw{font-style:normal;color:#0047bb;transition:opacity .22s ease}
.bn-h1 mark{background:#fff;color:#101418;border-radius:10px;padding:0 10px}
.bn-lead{font-size:17.5px;line-height:1.5;color:#2c333c;max-width:44ch;margin-bottom:22px}
.bn-ctas{display:flex;flex-wrap:wrap;gap:10px}
.bn-b{display:inline-block;border-radius:999px;padding:14px 22px;font-weight:800;font-size:15.5px;border:2px solid transparent;cursor:pointer;font-family:inherit}
.bn-b:hover{text-decoration:none;filter:brightness(.96)}
.bn-b1{background:#101418;color:#fff}
.bn-b2{background:#fff;color:#101418}
.bn-b3{background:#00773a;color:#fff}

.bn-own{grid-column:span 3;min-height:430px;background:#fff}
.bn-own img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bn-stack{grid-column:span 3;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}
.bn-sh{position:relative;overflow:hidden;border-radius:22px;background:#fff;min-height:135px}
.bn-sh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bn-pill{position:absolute;left:12px;bottom:12px;z-index:2;background:#fff;border-radius:999px;padding:8px 12px;display:flex;gap:8px;align-items:center;max-width:calc(100% - 24px);box-shadow:0 2px 10px rgba(16,20,24,.14)}
.bn-pill b{font-size:14px;font-weight:800;color:#101418;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-pill-sm b{font-size:13px}

.bn-cards{grid-column:span 12;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bn-cd{margin:0;border-radius:22px;padding:20px 22px;display:flex;flex-direction:column;gap:2px;color:#101418}
.bn-cd b{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:26px;line-height:1.1}
.bn-cd span{font-size:14px;color:#454c55}
.bn-cd.is-a{background:#ffe0cc}.bn-cd.is-b{background:#d7f0f7}.bn-cd.is-c{background:#dcf3df}.bn-cd.is-d{background:#ffd9ea}

@media(max-width:1100px){
  .bn-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bn-head{grid-column:span 12}
  .bn-own{grid-column:span 7;min-height:320px}
  .bn-stack{grid-column:span 5}
  .bn-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .bn-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bn-head{padding:24px 22px}
  .bn-own{grid-column:span 12;min-height:260px}
  .bn-stack{grid-column:span 12;grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .bn-sh{min-height:120px}
}

/* ── shop, category and search ─────────────────────────────────────── */
.wwe-main{padding-block:22px 54px}
.wwe-main .wwe-wrap{max-width:1320px}
.wwe-pagehead{background:var(--cream);padding-block:18px 10px;border:0}
.wwe-pagehead .wwe-wrap{max-width:1320px}
.wwe-crumb{font-size:13px;color:#6b7585;margin-bottom:8px}
.wwe-crumb span{opacity:.5;margin:0 4px}
.wwe-pagehead h1{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:clamp(30px,4vw,48px);color:#101418;margin-bottom:6px}
.wwe-pagehead-n{margin:0;font-size:14.5px;color:#454c55;font-weight:600}
.wwe-pagehead-d{margin-top:12px;max-width:80ch;font-size:15.5px;line-height:1.6;color:#454c55;background:#fff;border-radius:18px;padding:16px 20px}
.wwe-pagehead-d p:last-child{margin-bottom:0}

.woocommerce .woocommerce-result-count{float:none;margin:0;font-size:14px;color:#454c55;font-weight:600;display:inline-block;vertical-align:middle}
.woocommerce .woocommerce-ordering{float:none;margin:0;display:inline-block;vertical-align:middle}
.woocommerce .woocommerce-ordering select{border:1px solid #e6e2db;border-radius:999px;padding:10px 16px;background:#fff;font:600 14px "Red Hat Text",Figtree,sans-serif}

/* archive layout: filters left, products right */
.wwe-shop{display:grid;grid-template-columns:272px minmax(0,1fr);gap:26px;align-items:start;margin-top:18px}
.shop-sidebar{position:sticky;top:12px}
.shop-sidebar:empty,.shop-sidebar .rey-sidebarInner:empty{display:none}
.wwe-filters{display:flex;flex-direction:column;gap:10px}
.wwe-filter-card{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:14px 16px}
.wwe-filter-card-head{cursor:pointer;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:800;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.wwe-filter-card-head::-webkit-details-marker{display:none}
.wwe-filter-card-head::after{content:"";width:8px;height:8px;border-right:2px solid #6b7585;border-bottom:2px solid #6b7585;transform:rotate(45deg);margin-left:8px}
.wwe-filter-card[open] .wwe-filter-card-head::after{transform:rotate(-135deg)}
.wwe-filter-card-body{padding-top:12px}
.wwe-filter-swatches{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.wwe-filter-swatches a{display:block;width:22px;height:22px;border-radius:999px;box-shadow:0 0 0 1px #e6e2db}
.wwe-filter-swatches a:hover{box-shadow:0 0 0 2px #0047bb}

.woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
.woocommerce ul.products li.product{background:#fff;border:1px solid #efeae2;border-radius:20px;transition:border-color .18s,transform .18s,box-shadow .18s}
/* a white garment on a white card is invisible: the photo sits on a warm
   tint, the way the bento tiles do */
.woocommerce ul.products li.product a img{background:#f7f4ef;padding:0}
.woocommerce ul.products li.product .woocommerce-loop-product__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.woocommerce ul.products li.product .price,.woocommerce ul.products li.product .price ins,.woocommerce ul.products li.product .price bdi{color:#101418 !important}
.woocommerce ul.products li.product .button{background:#101418 !important;color:#fff !important;display:block}
.woocommerce ul.products li.product:hover{border-color:#0047bb;transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,20,24,.08)}
.woocommerce ul.products li.product>a{display:flex;flex-direction:column;flex-grow:1}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:"Red Hat Text",Figtree,sans-serif;font-size:14.5px}
.woocommerce ul.products li.product .price{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:19px}
.woocommerce ul.products li.product .button{border-radius:999px;font-size:13.5px;padding:10px 14px}
.woocommerce ul.products li.product .variable-items-wrapper{padding:0 14px;gap:4px;flex-wrap:wrap}
.woocommerce ul.products li.product .variable-items-wrapper .variable-item{width:16px !important;height:16px !important;border-radius:999px !important;box-shadow:0 0 0 1px #e6e2db}
.woocommerce span.onsale{border-radius:999px;top:10px;left:10px;padding:5px 12px;font-size:12px;background:#d8113f}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border:1px solid #e6e2db;background:#fff;border-radius:999px;min-width:44px}

/* ── single product ────────────────────────────────────────────────── */
/* Imran 2026-10-17: "move these under gallery - make it all compact" — the
   tabs sit in the left column directly under the photographs, so the buying
   column keeps its own height and the page stops being two tall halves with
   a wide empty band between them. */
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"gallery summary" "tabs summary" "related related";gap:20px 28px;align-items:start}
.woocommerce div.product div.images{grid-area:gallery;width:auto !important;float:none !important;margin:0 !important}
.woocommerce div.product div.summary{grid-area:summary;width:auto !important;float:none !important;margin:0 !important;background:#fff;border:1px solid #efeae2;border-radius:22px;padding:26px 28px}
.woocommerce div.product .woocommerce-tabs{grid-area:tabs;width:100%}
.woocommerce div.product .related,.woocommerce div.product .upsells{grid-area:related;width:100%}
.woocommerce div.product div.images img{border-radius:22px;background:#fff}
.woocommerce div.product div.images .flex-control-thumbs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:10px}
.woocommerce div.product div.images .flex-control-thumbs li{width:auto;float:none;margin:0}
.woocommerce div.product div.images .flex-control-thumbs img{border-radius:12px;border:1px solid #efeae2;opacity:1}
.woocommerce div.product .product_title{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:clamp(24px,2.6vw,34px);line-height:1.08;margin-bottom:10px}
.woocommerce div.product p.price{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:28px;color:#101418;margin-bottom:12px}
.woocommerce div.product form.cart{margin:16px 0 0}
.woocommerce div.product form.cart .variations{margin-bottom:14px;width:100%}
.woocommerce div.product form.cart .variations td,.woocommerce div.product form.cart .variations th{padding:6px 0;display:block;text-align:left}
.woocommerce div.product form.cart .variations label{font-weight:800;font-size:14px}
.woocommerce div.product form.cart .qty{border:1px solid #e6e2db;border-radius:999px;padding:12px 10px;width:70px;text-align:center;font-weight:700}
.woocommerce div.product form.cart .button{border-radius:999px;padding:15px 28px;font-size:15.5px}
.woocommerce div.product .woocommerce-tabs .panel{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:16px 18px;font-size:14.5px;line-height:1.55;color:#2c333c;margin:0}
.woocommerce div.product .woocommerce-tabs .panel>h2:first-child{display:none}
.woocommerce div.product .woocommerce-tabs .panel p{margin:0 0 .7em}
.woocommerce div.product .woocommerce-tabs .panel ul{margin:0 0 .7em;padding-left:18px}
.woocommerce div.product .woocommerce-tabs .panel li{padding:3px 0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:9px 12px;font-size:14px}
.woocommerce div.product .related>h2,.woocommerce div.product .upsells>h2{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:26px;margin-bottom:14px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 18px;border-bottom:2px solid var(--line);display:flex;flex-wrap:wrap;gap:4px}
.woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 18px;border-bottom:2px solid var(--line);display:flex;flex-wrap:wrap;gap:4px}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent;border:0;border-radius:0;margin:0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:12px 16px;font-weight:800;font-size:15px;color:var(--ink-soft);border-bottom:3px solid transparent}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--ink);border-bottom-color:var(--blue)}

/* The decoration chooser and logo placements come from the site's own
   plugin with inline styles written for the old theme — radios stacked on
   top of each other here until these rules went in. Layout only; the plugin
   keeps its own colours and copy. */
/* The site's own decoration plugin writes its layout as inline styles that
   were drawn for a full-width Rey column: `form{display:flex}` with
   `label{flex:1;min-width:280px}`. Inside this theme's summary card the two
   labels are wider than the column, so they wrapped and staggered — which is
   what "whole design is fucked" was pointing at. Inline styles can only be
   beaten with !important, so these rules restate the layout as a grid and
   leave the plugin's own colours and copy alone. */
.wwe-deco-toggle{background:#fff !important;border:1px solid #efeae2 !important;border-radius:18px !important;padding:18px !important;margin:0 0 16px !important}
.wwe-deco-toggle>p{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:16px !important;margin-bottom:12px !important}
.wwe-deco-toggle form{display:grid !important;grid-template-columns:1fr !important;gap:10px !important}
.wwe-deco-toggle label{display:grid !important;grid-template-columns:auto 1fr !important;align-items:start;gap:4px 10px;flex:none !important;min-width:0 !important;width:auto !important;padding:14px 16px !important;border:2px solid #efeae2 !important;border-radius:14px !important;background:#fff !important;margin:0 !important}
.wwe-deco-toggle label:hover{border-color:#b9c6e8 !important}
.wwe-deco-toggle label:has(input:checked){border-color:#0047bb !important;background:#eef3ff !important}
.wwe-deco-toggle label input[type="radio"]{grid-row:1/3;margin:3px 0 0 !important;width:18px;height:18px;accent-color:#0047bb}
.wwe-deco-toggle label strong{font-size:15.5px;line-height:1.25}
.wwe-deco-toggle label br{display:none}
.wwe-deco-toggle label span{grid-column:2;font-size:13.5px !important;line-height:1.45}

.wwe-logo-options{background:#fff !important;border:1px solid #efeae2 !important;border-radius:18px !important;padding:18px !important;margin:0 0 16px !important}
.wwe-logo-options h3{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:18px;margin:0 0 12px}
.wwe-placements{grid-template-columns:1fr !important;gap:8px !important;margin:0 0 12px !important}
.wwe-placement{display:grid !important;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 10px;padding:12px 14px !important;border:2px solid #efeae2 !important;border-radius:12px !important;background:#fff !important}
.wwe-placement:hover{border-color:#b9c6e8 !important}
.wwe-placement:has(input:checked){border-color:#0047bb !important;background:#eef3ff !important}
.wwe-placement input[type="checkbox"]{width:17px;height:17px;accent-color:#0047bb;margin:0 !important}
.wwe-placement strong{font-size:14.5px}
.wwe-placement br{display:none}
.wwe-placement span{grid-column:3;grid-row:1;font-weight:800;font-size:14.5px;white-space:nowrap}
.wwe-placement small{grid-column:2/4;font-size:12.5px;color:#6b7585}

/* ── responsive ────────────────────────────────────────────────────── */
@media(max-width:1050px){
  .wwe-shop{grid-template-columns:minmax(0,1fr)}
  .shop-sidebar{position:static}
  .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .woocommerce div.product{grid-template-columns:minmax(0,1fr);grid-template-areas:"gallery" "summary" "tabs" "related"}
  .wwe-c6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wwe-c4,.wwe-c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wwe-foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wwe-trustbar .wwe-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .wwe-r3,.wwe-r4{display:none}
  .wwe-burger{display:inline-block}
  .wwe-hero-art img{height:320px}
  .wwe-r2 .wwe-wrap{flex-wrap:wrap}
  .wwe-search{order:3;flex-basis:100%}
}
@media(max-width:620px){
  .wwe-c6,.wwe-c4,.wwe-c3,.wwe-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .wwe-sec{padding-block:36px}
  .wwe-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wwe-hero-price{left:8px;bottom:10px}
}

/* ── department chips + mega panels ─────────────────────────────────
   Imran 2026-10-17: "CWW - Mega Menu - expand and make it like these"
   and "may be have these full width - add a few more". The chip row runs
   the full width of the page and wraps; each chip opens a panel outlined
   in its own colour, holding featured tiles with mono codes, link columns,
   real products and a CTA card — the WPS pattern, with this catalogue's
   garments. */
.bnh-chips-wrap{max-width:1320px;padding-top:10px;position:relative;z-index:50}
.bn-chips{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:0}
/* static on purpose: the panels below are absolutely positioned, and with a
   positioned chip wrapper each panel anchored to its own chip and ran off
   the side of the screen. Against the chip ROW they are always full width
   and always on screen. */
.bn-chipwrap{position:static;display:flex}
.bn-chip{width:100%;border-radius:12px;padding:9px 11px;display:flex;flex-direction:column;gap:2px;color:#fff;min-height:56px;justify-content:center}
.bn-chip:hover{text-decoration:none;filter:brightness(1.06)}
.bn-chip-t{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0}
.bn-chip-t b{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:800;font-size:14px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-chip-s{font-size:11.5px;opacity:.94;white-space:nowrap}
.bn-chip .bn-code{font-size:9.5px;padding:2px 6px}

/* the panel */
.bn-panel{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;border:3px solid #0047bb;border-radius:22px;box-shadow:0 26px 60px rgba(16,20,24,.20);padding:18px;display:none;z-index:80;max-height:min(62vh,560px);overflow:auto}
.bn-chipwrap:hover .bn-panel,.bn-chipwrap:focus-within .bn-panel{display:block}

.bn-ptiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:14px}
.bn-ptile{background:#eef3ff;border-radius:14px;padding:12px 13px;display:flex;flex-direction:column;gap:4px;color:#101418}
.bn-ptile:hover{text-decoration:none;background:#dfe8ff}
.bn-ptile b{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:14.5px;line-height:1.2}
.bn-ptile span{font-size:12.5px;color:#4b5259}
.bn-ptile .bn-code{align-self:flex-start;background:#fff}

.bn-panel-cols{display:grid;grid-template-columns:1fr 1.5fr 1.1fr;gap:20px}
.bn-pcol-h{margin:0 0 10px;background:#eef3ff;border-radius:999px;padding:7px 14px;font-weight:800;font-size:13.5px;display:inline-block}
.bn-pcol ul{list-style:none;margin:0;padding:0}
.bn-pcol li{border-bottom:1px solid #f1ece4}
.bn-pcol li a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 2px;font-size:14.5px;color:#2c333c}
.bn-pcol li a:hover{color:#0047bb;text-decoration:none}
.bn-pcol li .bn-code{background:#f6f2eb}

.bn-pshot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:420px}
.bn-pshot{display:flex;flex-direction:column;gap:3px;color:#101418}
.bn-pshot:hover{text-decoration:none;color:#0047bb}
.bn-pshot img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#f7f4ef;max-height:140px}
.bn-pshot b{font-size:13px;line-height:1.25;margin-top:4px}
.bn-pshot span{font-size:13px;font-weight:800}

.bn-pcta{border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:8px;background:#0047bb;color:#fff}

.bn-pcta .bn-code{align-self:flex-start}
.bn-pcta-h{margin:0;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:20px}
.bn-pcta-b{margin:0;font-size:13.5px;line-height:1.5;opacity:.92}
.bn-pcta-btn{background:#101418;color:#fff;border-radius:999px;padding:11px 18px;font-weight:800;font-size:14px;text-align:center}
.bn-pcta-btn:hover{text-decoration:none;background:#fff;color:#101418}
.bn-pcta-tel{font-weight:800;font-size:14px}

@media(max-width:1100px){
  .bn-panel-cols{grid-template-columns:1fr 1fr}
  .bn-panel{width:min(100vw - 32px,860px)}
}
@media(max-width:860px){
  .bnh-chips-wrap{display:none}
}

/* ── mega footer ───────────────────────────────────────────────────
   Vibrant, like the header: cream ground, coloured department buttons, white
   link cards, a blue CTA band, dark legal strip. */
.wwe-foot{background:var(--cream);color:#2c333c;margin-top:36px;border-top:1px solid #efeae2}
.wwe-foot a{color:#2c333c}
.wwe-foot a:hover{color:#0047bb}
.wwe-foot h3{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:15px;color:#101418;margin-bottom:10px}
.wwe-wrap.foot-chips,.wwe-wrap.foot-cta,.wwe-wrap.foot-cols,.wwe-wrap.foot-brands,.wwe-wrap.foot-trust{max-width:1320px}

.foot-chips{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding-block:26px 6px}
.foot-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:12px;padding:10px 12px;color:#fff !important;min-height:46px}
.foot-chip:hover{text-decoration:none;color:#fff !important;filter:brightness(1.08);transform:translateY(-1px)}
.foot-chip b{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot-chip .bn-code{background:rgba(255,255,255,.26);color:#fff;font-size:9.5px}

.foot-cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;background:#0047bb;color:#fff;border-radius:22px;padding:26px 28px;margin-top:18px}
.foot-cta a{color:#fff}
.foot-cta-h{margin:0 0 4px;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:26px}
.foot-cta-b{margin:0;font-size:15px;max-width:58ch;color:#dbe6ff}
.foot-cta-btns{display:flex;flex-wrap:wrap;gap:10px}
.foot-btn{border:2px solid rgba(255,255,255,.45);border-radius:999px;padding:12px 20px;font-weight:800;font-size:14.5px}
.foot-btn:hover{text-decoration:none;border-color:#fff;background:rgba(255,255,255,.1)}
.foot-btn--dark{background:#ffb000;border-color:#ffb000;color:#101418 !important}
.foot-btn--dark:hover{background:#fff;border-color:#fff}

.foot-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding-block:22px}
.foot-col{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:16px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.foot-col li a{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13.5px;padding:3px 0}
.foot-col .bn-code{background:#f3efe8;color:#6b7585}

.foot-brands{padding-block:4px 18px}
.foot-brandrow{display:flex;flex-wrap:wrap;gap:8px}
.foot-brandrow a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #efeae2;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700}
.foot-brandrow a:hover{background:#0047bb;border-color:#0047bb;color:#fff !important;text-decoration:none}
.foot-brandrow a:hover .bn-code{background:rgba(255,255,255,.25);color:#fff}
.foot-brandrow .bn-code{background:#f3efe8;color:#6b7585}

.foot-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-block:0 22px}
.foot-trust p{margin:0;font-size:13px;line-height:1.5;background:#fff;border:1px solid #efeae2;border-radius:16px;padding:14px 16px}
.foot-trust p:nth-child(1){background:#dee9ff;border-color:#cfdcff}
.foot-trust p:nth-child(2){background:#e6f6dc;border-color:#d6efc6}
.foot-trust p:nth-child(3){background:#fff0c2;border-color:#ffe79c}
.foot-trust p:nth-child(4){background:#ffe1e9;border-color:#ffd0dc}
.foot-trust b{display:block;font-family:"Red Hat Display",Gabarito,sans-serif;font-size:14.5px;color:#101418}

.foot-legal{background:#101418;color:#aeb6c0}
.foot-legal a{color:#e7eaef}
.foot-legal .wwe-wrap{display:flex;flex-wrap:wrap;gap:24px;padding-block:22px 36px;font-size:13px;line-height:1.65;max-width:1320px}
.foot-legal p{margin:0;flex:1 1 240px}
.foot-legal strong{color:#fff}
.foot-copy{flex:1 1 100%;color:#78818d}

@media(max-width:1100px){.foot-chips{grid-template-columns:repeat(5,minmax(0,1fr))}.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.foot-chips{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── department chips + mega panels ─────────────────────────────────
   Imran 2026-10-17: "CWW - Mega Menu - expand and make it like these"
   and "may be have these full width - add a few more". The chip row runs
   the full width of the page and wraps; each chip opens a panel outlined
   in its own colour, holding featured tiles with mono codes, link columns,
   real products and a CTA card — the WPS pattern, with this catalogue's
   garments. */
.bnh-chips-wrap{max-width:1320px;padding-top:10px;position:relative;z-index:50}
.bn-chips{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:0}
/* static on purpose: the panels below are absolutely positioned, and with a
   positioned chip wrapper each panel anchored to its own chip and ran off
   the side of the screen. Against the chip ROW they are always full width
   and always on screen. */
.bn-chipwrap{position:static;display:flex}
.bn-chip{width:100%;border-radius:12px;padding:9px 11px;display:flex;flex-direction:column;gap:2px;color:#fff;min-height:56px;justify-content:center}
.bn-chip:hover{text-decoration:none;filter:brightness(1.06)}
.bn-chip-t{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0}
.bn-chip-t b{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:800;font-size:14px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-chip-s{font-size:11.5px;opacity:.94;white-space:nowrap}
.bn-chip .bn-code{font-size:9.5px;padding:2px 6px}

/* the panel */
.bn-panel{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;border:3px solid #0047bb;border-radius:22px;box-shadow:0 26px 60px rgba(16,20,24,.20);padding:18px;display:none;z-index:80;max-height:min(62vh,560px);overflow:auto}
.bn-chipwrap:hover .bn-panel,.bn-chipwrap:focus-within .bn-panel{display:block}

.bn-ptiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:14px}
.bn-ptile{background:#eef3ff;border-radius:14px;padding:12px 13px;display:flex;flex-direction:column;gap:4px;color:#101418}
.bn-ptile:hover{text-decoration:none;background:#dfe8ff}
.bn-ptile b{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:14.5px;line-height:1.2}
.bn-ptile span{font-size:12.5px;color:#4b5259}
.bn-ptile .bn-code{align-self:flex-start;background:#fff}

.bn-panel-cols{display:grid;grid-template-columns:1fr 1.5fr 1.1fr;gap:20px}
.bn-pcol-h{margin:0 0 10px;background:#eef3ff;border-radius:999px;padding:7px 14px;font-weight:800;font-size:13.5px;display:inline-block}
.bn-pcol ul{list-style:none;margin:0;padding:0}
.bn-pcol li{border-bottom:1px solid #f1ece4}
.bn-pcol li a{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 2px;font-size:14.5px;color:#2c333c}
.bn-pcol li a:hover{color:#0047bb;text-decoration:none}
.bn-pcol li .bn-code{background:#f6f2eb}

.bn-pshot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:420px}
.bn-pshot{display:flex;flex-direction:column;gap:3px;color:#101418}
.bn-pshot:hover{text-decoration:none;color:#0047bb}
.bn-pshot img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#f7f4ef;max-height:140px}
.bn-pshot b{font-size:13px;line-height:1.25;margin-top:4px}
.bn-pshot span{font-size:13px;font-weight:800}

.bn-pcta{border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:8px;background:#0047bb;color:#fff}

.bn-pcta .bn-code{align-self:flex-start}
.bn-pcta-h{margin:0;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:20px}
.bn-pcta-b{margin:0;font-size:13.5px;line-height:1.5;opacity:.92}
.bn-pcta-btn{background:#101418;color:#fff;border-radius:999px;padding:11px 18px;font-weight:800;font-size:14px;text-align:center}
.bn-pcta-btn:hover{text-decoration:none;background:#fff;color:#101418}
.bn-pcta-tel{font-weight:800;font-size:14px}

@media(max-width:1100px){
  .bn-panel-cols{grid-template-columns:1fr 1fr}
  .bn-panel{width:min(100vw - 32px,860px)}
}
@media(max-width:860px){
  .bnh-chips-wrap{display:none}
}

/* ── chip polish ───────────────────────────────────────────────────
   Imran 2026-10-17: "make them nice and good looking". Equal buttons on a
   fixed 7-column grid (7 + 6 across two rows), one line for the name and its
   code, one for the price, a soft inner highlight so they read as buttons
   rather than flat blocks, and a lift on hover. */
.bn-chips{grid-auto-rows:1fr;gap:9px}
.bn-chip{
  position:relative;
  min-height:62px;
  padding:10px 12px;
  border-radius:14px;
  gap:3px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 58%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 2px 6px rgba(16,20,24,.10);
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
}
.bn-chip:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 20px rgba(16,20,24,.18);filter:none}
.bn-chip:active{transform:translateY(0)}
.bn-chip-t{justify-content:space-between;width:100%}
.bn-chip-t b{font-size:14.5px;letter-spacing:-.01em}
.bn-chip .bn-code{flex:0 0 auto;font-size:9.5px;letter-spacing:.04em;background:rgba(255,255,255,.26);color:#fff;backdrop-filter:blur(2px)}

.bn-chip-s{font-size:11.5px;font-weight:600;opacity:.9}
/* the open chip keeps its colour but gains the panel's edge, so it is clear
   which panel belongs to which button */
.bn-chipwrap:hover .bn-chip,.bn-chipwrap:focus-within .bn-chip{transform:translateY(-2px);box-shadow:0 10px 22px rgba(16,20,24,.22)}
@media(max-width:1100px){.bn-chips{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:860px){.bn-chips{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── product cards: padding and rounded everything ─────────────────
   Imran 2026-10-17: "product cards need padding and redesign - round edges -
   all boxes rounded corners even on product page". The photo now sits inside
   the card with its own radius and tint, the text has breathing room, and
   the button is full width at the foot of the card. */
.woocommerce ul.products{gap:16px}
.woocommerce ul.products li.product{padding:10px;border-radius:20px;overflow:visible}
.woocommerce ul.products li.product a img{border-radius:14px;background:#f5f1ea;aspect-ratio:1/1;object-fit:cover;margin:0 0 10px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{padding:0 4px;margin:0 0 4px;font-size:14px;min-height:2.5em}
.woocommerce ul.products li.product .price{padding:0 4px;margin:0 0 8px;font-size:18px}
.woocommerce ul.products li.product .variable-items-wrapper{padding:0 4px;margin:0 0 10px}
.woocommerce ul.products li.product .button{margin:auto 0 0;width:100%;border-radius:12px;padding:11px 12px;font-size:13.5px}
.woocommerce ul.products li.product .added_to_cart{margin:8px 4px 0}
.woocommerce span.onsale{top:16px;left:16px}

/* every panel on a product page is a rounded card */
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images img{border-radius:18px}
.woocommerce div.product div.images{background:#fff;border:1px solid #efeae2;border-radius:22px;padding:12px}
.woocommerce div.product .woocommerce-tabs ul.tabs{background:#fff;border:1px solid #efeae2;border-radius:16px;padding:4px;margin-bottom:10px;border-bottom:1px solid #efeae2}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{border-radius:12px;border-bottom:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{background:#101418;color:#fff;border-bottom:0}
.woocommerce div.product .related ul.products li.product,.woocommerce div.product .upsells ul.products li.product{border-radius:20px}
.woocommerce .cart-collaterals .cart_totals,.woocommerce-cart table.cart,.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{background:#fff;border:1px solid #efeae2;border-radius:20px;padding:18px}
.woocommerce table.shop_table{border-radius:16px;border-color:#efeae2}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-radius:14px}

/* ── home page sections ────────────────────────────────────────────
   These rules went missing when the hero block was rewritten, which left the
   fact ticker and the branding-price block rendering as raw text (Imran
   2026-10-17, a note from the CWW build this theme came from). Restored in
   the bento language: cream page, white rounded cards, pastel pills. */
.wwe-sec{padding-block:40px}
.wwe-sec .wwe-wrap{max-width:1320px}
.wwe-h2{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:clamp(26px,3.2vw,38px);color:#101418;margin-bottom:8px}
.wwe-lead{font-size:16.5px;color:#454c55;max-width:70ch;margin-bottom:22px}

/* the moving fact strip */
.wwe-marquee{overflow:hidden;background:transparent;border:0;padding-block:8px;margin-block:4px}
.marquee-mask{-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.marquee-track{display:flex;width:max-content;gap:10px;animation:wweMarquee 52s linear infinite;will-change:transform}
@keyframes wweMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
.marquee-track span{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;color:#101418;background:#fff;border:1px solid #efeae2}
.marquee-track span:nth-child(6n+1){background:#dee9ff;border-color:#cfdcff}
.marquee-track span:nth-child(6n+2){background:#ffe1e9;border-color:#ffd0dc}
.marquee-track span:nth-child(6n+3){background:#fff0c2;border-color:#ffe79c}
.marquee-track span:nth-child(6n+4){background:#dbf6f2;border-color:#c6efe9}
.marquee-track span:nth-child(6n+5){background:#e6f6dc;border-color:#d6efc6}
.marquee-track span:nth-child(6n+6){background:#ffe6d2;border-color:#ffd7bb}

/* what branding costs */
.wwe-pricecard{background:#fff;border:1px solid #efeae2;border-radius:20px;padding:20px}
.wwe-pricecard.is-lead{border:2px solid #101418}
.wwe-pricecard.is-free{background:#0047bb;border-color:#0047bb;color:#fff}
.wwe-pricecard b{display:block;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:34px;line-height:1;color:#0047bb;margin-bottom:6px}
.wwe-pricecard.is-free b{color:#ffb000}
.wwe-pricecard strong{display:block;font-size:15.5px;margin-bottom:4px}
.wwe-pricecard span{display:block;font-size:13.5px;line-height:1.5;color:#5b636d}
.wwe-pricecard.is-free span{color:#dce6ff}

/* product/bundle cards used by the home sections */
.wwe-card{background:#fff;border:1px solid #efeae2;border-radius:20px;padding:10px;display:flex;flex-direction:column;color:#101418}
.wwe-card:hover{text-decoration:none;border-color:#0047bb;transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,20,24,.08)}
.wwe-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:#f5f1ea;margin-bottom:10px}
.wwe-card-b{padding:0 4px 4px;display:flex;flex-direction:column;gap:4px;flex-grow:1}
.wwe-brand{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8a9199;font-weight:700}
.wwe-pname{font-size:14px;font-weight:700;line-height:1.3}
.wwe-price{margin-top:auto;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:18px}

/* trades, steps, faq, cta band */
.wwe-jobs a{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:4px;color:#101418}
.wwe-jobs a:hover{text-decoration:none;border-color:#0047bb}
.wwe-jobs strong{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:17px}
.wwe-jobs span{font-size:13px;color:#5b636d}
.wwe-steps div{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:16px 18px;border-top:4px solid #0047bb}
.wwe-steps p:first-child{margin:0 0 6px;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:17px}
.wwe-steps p:last-child{margin:0;font-size:14px;color:#5b636d;line-height:1.55}
.wwe-faq details{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:16px 18px}
.wwe-faq summary{font-weight:800;font-size:15.5px;cursor:pointer;font-family:"Red Hat Display",Gabarito,sans-serif}
.wwe-faq p{margin:10px 0 0;font-size:14.5px;color:#5b636d}
.wwe-ctaband{background:#101418;color:#fff;border-radius:0}
.wwe-ctaband .wwe-wrap{display:flex;flex-wrap:wrap;gap:28px;align-items:center;padding-block:40px;max-width:1320px}
.wwe-ctaband .wwe-h2{color:#fff}
.wwe-ctaband p{color:#c3ccdb;font-size:16.5px;max-width:52ch;margin:0}
.wwe-btn{display:inline-block;border-radius:999px;padding:14px 22px;font-weight:800;font-size:15.5px;border:2px solid transparent}
.wwe-btn:hover{text-decoration:none;filter:brightness(.96)}
.wwe-btn--amber{background:#ffb000;color:#101418}
.wwe-btn--ink{background:#fff;color:#101418}
.wwe-btn--ghost{border-color:currentColor}

/* ── hero fact ticker ──────────────────────────────────────────────
   The hero's own ticker (inc/hero-bento.php). It lost its rules when the
   bento block was rewritten, which left eight facts printed as raw wrapped
   text under the stat cards (Imran 2026-10-17, "this shit needs to be in a
   box"). */
.bn-ticker{overflow:hidden;padding-block:10px;margin-block:2px 6px}
.bn-ticker-track{display:flex;width:max-content;gap:8px;animation:wweTick 54s linear infinite;will-change:transform}
@keyframes wweTick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.bn-ticker-track{animation:none}}
.bn-tick{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:999px;padding:9px 16px;font-size:13.5px;color:#101418;border:1px solid #efeae2;background:#fff}
.bn-tick b{font-weight:800}
.bn-tick.is-t0{background:#e7eeff;border-color:#d4e1ff}
.bn-tick.is-t1{background:#ffeaf0;border-color:#ffd6e2}
.bn-tick.is-t2{background:#fff4dc;border-color:#ffe9bd}
.bn-tick.is-t3{background:#e4f7f6;border-color:#cdeeec}
.bn-tick.is-t4{background:#edf7eb;border-color:#d9eed5}
.bn-tick.is-t5{background:#fff0e6;border-color:#ffdfca}

/* ── chip palette: 13 unique vibrant pastels ───────────────────────
   Imran 2026-10-17: "Top cat tabs should all be pastel vibrant colours but
   each unique - then mega menu sub sections or boxes should be lighter
   version of main cat tab". Each tone sets --c (the chip) and --ct (the
   tint); the panel's tiles, column pills and border all read from them, so a
   panel is always a lighter wash of its own chip. Ink text throughout, which
   is what keeps a pastel readable. */
.bn-chip{color:#101418;background:var(--c)}
.bn-chip .bn-code{background:rgba(255,255,255,.62);color:#101418}
.bn-chip-s{opacity:.82}
.bn-chip.is-a{--c:#8fb4ff;--ct:#e7eeff}
.bn-chip.is-b{--c:#ff9fb8;--ct:#ffeaf0}
.bn-chip.is-c{--c:#ffce6b;--ct:#fff4dc}
.bn-chip.is-d{--c:#c3a6ff;--ct:#f0e9ff}
.bn-chip.is-e{--c:#74d3cc;--ct:#e4f7f6}
.bn-chip.is-f{--c:#8fd3f4;--ct:#e6f5fd}
.bn-chip.is-g{--c:#f2a3d7;--ct:#fceaf7}
.bn-chip.is-h{--c:#8fe0b8;--ct:#e6f9f1}
.bn-chip.is-i{--c:#d5e86b;--ct:#f6fadf}
.bn-chip.is-j{--c:#ffa98f;--ct:#ffece5}
.bn-chip.is-k{--c:#e0bc92;--ct:#f8efe4}
.bn-chip.is-l{--c:#aebbcc;--ct:#eef2f7}
.bn-chip.is-m{--c:#a3a8f0;--ct:#ebecfd}

.bn-panel.is-a{--c:#8fb4ff;--ct:#e7eeff}
.bn-panel.is-b{--c:#ff9fb8;--ct:#ffeaf0}
.bn-panel.is-c{--c:#ffce6b;--ct:#fff4dc}
.bn-panel.is-d{--c:#c3a6ff;--ct:#f0e9ff}
.bn-panel.is-e{--c:#74d3cc;--ct:#e4f7f6}
.bn-panel.is-f{--c:#8fd3f4;--ct:#e6f5fd}
.bn-panel.is-g{--c:#f2a3d7;--ct:#fceaf7}
.bn-panel.is-h{--c:#8fe0b8;--ct:#e6f9f1}
.bn-panel.is-i{--c:#d5e86b;--ct:#f6fadf}
.bn-panel.is-j{--c:#ffa98f;--ct:#ffece5}
.bn-panel.is-k{--c:#e0bc92;--ct:#f8efe4}
.bn-panel.is-l{--c:#aebbcc;--ct:#eef2f7}
.bn-panel.is-m{--c:#a3a8f0;--ct:#ebecfd}
.bn-panel{border-color:var(--c)}
.bn-panel .bn-ptile{background:var(--ct)}
.bn-panel .bn-ptile:hover{background:var(--c)}
.bn-panel .bn-ptile .bn-code{background:rgba(255,255,255,.75)}
.bn-panel .bn-pcol-h{background:var(--ct)}
.bn-panel .bn-pcta{background:var(--c);color:#101418}
.bn-panel .bn-pcta .bn-code{background:rgba(255,255,255,.6);color:#101418}
.bn-panel .bn-pcta-b{color:#2c333c;opacity:.95}
.bn-panel .bn-pcta-btn{background:#101418;color:#fff}
.bn-panel .bn-pcta-btn:hover{background:#fff;color:#101418}
.bn-panel .bn-pcta-tel{color:#101418}
.bn-panel .bn-pcol li a:hover{color:#101418}

/* footer chips follow the same palette */
.foot-chip{color:#101418 !important;background:var(--c)}
.foot-chip .bn-code{background:rgba(255,255,255,.62);color:#101418}
.foot-chip.is-a{--c:#8fb4ff}.foot-chip.is-b{--c:#ff9fb8}.foot-chip.is-c{--c:#ffce6b}
.foot-chip.is-d{--c:#c3a6ff}.foot-chip.is-e{--c:#74d3cc}.foot-chip.is-f{--c:#8fd3f4}
.foot-chip.is-g{--c:#f2a3d7}.foot-chip.is-h{--c:#8fe0b8}.foot-chip.is-i{--c:#d5e86b}
.foot-chip.is-j{--c:#ffa98f}.foot-chip.is-k{--c:#e0bc92}.foot-chip.is-l{--c:#aebbcc}
.foot-chip.is-m{--c:#a3a8f0}

/* ── sidebar on inner pages ────────────────────────────────────────
   Imran 2026-10-17: "sidebar is a must too on all pages except home".
   Content pages, posts and the journal get the two-column layout; shop
   archives keep the filter sidebar they already have. */
.wwe-withside{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start}
.wwe-withside-main{min-width:0}
.wwe-prose{font-size:16px;line-height:1.7;color:#2c333c}
.wwe-prose h2{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:26px;margin:1.4em 0 .5em}
.wwe-prose h3{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:20px;margin:1.2em 0 .4em}
.wwe-prose img{border-radius:16px}
.wwe-side{position:sticky;top:12px;display:flex;flex-direction:column;gap:12px}
.wwe-side-card{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:16px}
.wwe-side-card h3{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:15px;margin:0 0 10px}
.wwe-side-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.wwe-side-card li a{display:flex;align-items:center;gap:8px;padding:7px 4px;font-size:14px;border-radius:10px}
.wwe-side-card li a:hover{background:#f5f1ea;text-decoration:none}
.wwe-side-card li a span:nth-of-type(2){flex:1 1 auto}
.wwe-side-dot{width:10px;height:10px;border-radius:999px;flex:0 0 auto;background:var(--c,#0047bb)}
.wwe-side-dot.is-a{--c:#8fb4ff}.wwe-side-dot.is-b{--c:#ff9fb8}.wwe-side-dot.is-c{--c:#ffce6b}
.wwe-side-dot.is-d{--c:#c3a6ff}.wwe-side-dot.is-e{--c:#74d3cc}.wwe-side-dot.is-f{--c:#8fd3f4}
.wwe-side-dot.is-g{--c:#f2a3d7}.wwe-side-dot.is-h{--c:#8fe0b8}.wwe-side-dot.is-i{--c:#d5e86b}
.wwe-side-dot.is-j{--c:#ffa98f}.wwe-side-dot.is-k{--c:#e0bc92}.wwe-side-dot.is-l{--c:#aebbcc}
.wwe-side-dot.is-m{--c:#a3a8f0}
.wwe-side-card .bn-code{background:#f3efe8;color:#6b7585}
.wwe-side-prices{gap:0 !important}
.wwe-side-prices li{display:flex;justify-content:space-between;gap:10px;padding:8px 4px;font-size:14px;border-bottom:1px solid #f3efe8}
.wwe-side-prices li:last-child{border-bottom:0}
.wwe-side-prices i{font-style:normal;font-weight:800}
.wwe-side-cta{background:#0047bb;color:#fff;border-radius:18px;padding:18px}
.wwe-side-cta-h{margin:0 0 6px;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:18px}
.wwe-side-cta-b{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:#dbe6ff}
.wwe-side-btn{display:block;text-align:center;background:#ffb000;color:#101418;border-radius:999px;padding:11px 16px;font-weight:800;font-size:14.5px}
.wwe-side-btn:hover{text-decoration:none;background:#fff}
.wwe-side-tel{display:block;text-align:center;margin-top:8px;color:#fff;font-weight:800;font-size:14px}

/* category photo strip */
.wwe-faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.wwe-face{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:8px;display:flex;flex-direction:column;color:#101418}
.wwe-face:hover{text-decoration:none;border-color:#0047bb}
.wwe-face img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#f5f1ea}
.wwe-face span{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:8px 4px 2px}
.wwe-face b{font-size:13px;line-height:1.25}
.wwe-face i{font-style:normal;font-weight:800;font-size:13px;white-space:nowrap}
.wwe-pagehead-d{max-width:none;columns:2;column-gap:28px}
.wwe-pagehead-d p{break-inside:avoid}

@media(max-width:1050px){
  .wwe-withside{grid-template-columns:minmax(0,1fr)}
  .wwe-side{position:static;flex-direction:row;flex-wrap:wrap}
  .wwe-side>*{flex:1 1 280px}
  .wwe-faces{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wwe-pagehead-d{columns:1}
}
/* product page: the sidebar block sits in the gallery column under the tabs */
.woocommerce div.product .wwe-side-wrap{grid-area:tabs;width:100%;margin-top:14px}
.woocommerce div.product .wwe-side-wrap .wwe-side{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:1050px){.woocommerce div.product .wwe-side-wrap .wwe-side{grid-template-columns:minmax(0,1fr)}}

/* ── legacy card overlays ──────────────────────────────────────────
   Two bits of furniture from the old theme sit on every product card: a
   "Customise" badge (inline-styled green pill, top-left) and a hover row of
   icon pills (Customise / Enquire / Share, .tww-card-pills). On the new card
   they landed on top of the Select options button and spilled past the
   rounded corner (Imran 2026-10-17: "product card with mouse over fucked").
   They are useful, so they are placed properly rather than hidden: badge
   inside the padding, pills as a neat bar over the photo on hover only. */
.woocommerce ul.products li.product{position:relative;overflow:hidden}
.woocommerce ul.products li.product>a:first-of-type{position:relative;display:block}

/* the inline-styled badge: keep it, just move it inside the card's padding */
.woocommerce ul.products li.product>a[style*="position:absolute"],
.woocommerce ul.products li.product>a[style*="position: absolute"]{top:18px !important;left:18px !important;z-index:3}

.tww-card-pills{
  position:absolute !important;
  left:10px;right:10px;bottom:auto;top:10px;
  display:flex;justify-content:flex-end;gap:6px;
  padding:0;margin:0;background:none !important;border:0 !important;box-shadow:none !important;
  opacity:0;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease;
  pointer-events:none;z-index:4;
}
.woocommerce ul.products li.product:hover .tww-card-pills,
.woocommerce ul.products li.product:focus-within .tww-card-pills{opacity:1;transform:translateY(0);pointer-events:auto}
.tww-pill{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid #e6e2db !important;background:#fff !important;color:#101418 !important;
  border-radius:999px !important;box-shadow:0 2px 8px rgba(16,20,24,.14);
  padding:0 !important;font-size:0 !important;cursor:pointer;
}
.tww-pill svg{width:16px;height:16px}
.tww-pill:hover{background:#101418 !important;color:#fff !important;border-color:#101418 !important}
/* the pills carry text labels in some cards: hide the words, keep the icon */
.tww-pill span,.tww-pill em{display:none !important}
@media (hover:none){
  .tww-card-pills{opacity:1;transform:none;pointer-events:auto}
}

/* The yellow "TRADE ACCOUNTS · TRUSTED UK SUPPLIER …" bar is injected by the
   site's SEO plugin with inline styles from the old theme. Imran 2026-10-17:
   "remove this from CWW" — the same four claims are already in the hero
   ticker and the footer trust cards. */
.wwe-trust-strip{display:none !important}

/* Pagination: plain pills, no boxed container, clear current page. */
.woocommerce nav.woocommerce-pagination{margin-top:28px;text-align:center}
.woocommerce nav.woocommerce-pagination ul{border:0 !important;background:none !important;display:inline-flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.woocommerce nav.woocommerce-pagination ul li{border:0 !important;margin:0;overflow:visible}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 14px;
  border:1px solid #e6e2db;background:#fff;border-radius:999px;
  font-weight:700;font-size:14.5px;color:#101418;line-height:1;
}
.woocommerce nav.woocommerce-pagination ul li a:hover{border-color:#0047bb;color:#0047bb;background:#fff}
.woocommerce nav.woocommerce-pagination ul li span.current{background:#101418;border-color:#101418;color:#fff}
.woocommerce nav.woocommerce-pagination ul li span.dots{border-color:transparent;background:none;min-width:24px;padding:0;color:#8a9199}
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev{background:#f5f1ea}

/* ── hero photos: faces, and two tiles that rotate ─────────────────
   Garment photography is shot full-length, so a square crop centred on the
   middle of the frame cuts the model's head off. Anchoring the crop near the
   top keeps the face in every tile (Imran 2026-10-17: "show faces"). */
.bn-own img,.bn-sh img,.bn-shot img{object-position:50% 16%}
.wwe-face img{object-position:50% 14%}
.bn-pshot img{object-position:50% 14%}

.bn-sh{position:relative;overflow:hidden;border-radius:22px;background:#fff}
.bn-shot{position:absolute;inset:0;opacity:0;transform:scale(1.015);transition:opacity .9s ease,transform 1.4s ease;pointer-events:none}
.bn-shot.is-on{opacity:1;transform:scale(1);pointer-events:auto}
.bn-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bn-pill i{font-style:normal;font-weight:800;font-size:12.5px;color:#0047bb;white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .bn-shot{transition:none}
}

/* ── background texture ────────────────────────────────────────────
   Imran 2026-10-17: first pass was "too much" — "something very very fade".
   Same embroidery props, but a 560px tile instead of 300 (so the motifs are
   sparse rather than wallpaper), hairline strokes at 5% opacity, and the
   grid dropped entirely. It should read as paper texture you only notice if
   you look for it. */
body{
  background-color:var(--cream);
  background-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='560'%20height='560'%20viewBox='0%200%20560%20560'>%20<g%20fill='none'%20stroke='%230B1A2B'%20stroke-opacity='0.05'%20stroke-width='1.1'%20stroke-linecap='round'%20stroke-linejoin='round'>%20<path%20d='M60%2070h26M60%20118h26M66%2070v48M80%2070v48'/><path%20d='M66%2082h14M66%2094h14M66%20106h14'/>%20<path%20d='M250%2060l38%2038'/><ellipse%20cx='252'%20cy='62'%20rx='3.4'%20ry='5'%20transform='rotate(45%20252%2062)'/><path%20d='M288%2098c8%207%203%2017-5%2015s-10-12-2-15'/>%20<path%20d='M400%2092h9M414%2092h9M428%2092h9M442%2092h9'/>%20<circle%20cx='470'%20cy='250'%20r='13'/><circle%20cx='466'%20cy='246'%20r='1.5'/><circle%20cx='474'%20cy='246'%20r='1.5'/><circle%20cx='466'%20cy='254'%20r='1.5'/><circle%20cx='474'%20cy='254'%20r='1.5'/>%20<path%20d='M70%20300c50-20%20100%2020%20150%200s100-20%20150%200'/>%20<path%20d='M120%20430l16%2016M136%20430l-16%2016M300%20470l16%2016M316%20470l-16%2016'/>%20<path%20d='M380%20380h22M380%20420h22M385%20380v40M397%20380v40'/>%20</g></svg>");
  background-size:560px 560px;
  background-repeat:repeat;
}
.wwe-bento,.wwe-pagehead,.wwe-foot{background-color:transparent}
.wwe-hero,.foot-legal{background-color:#101418}

/* ── category filters (theme-rendered) ─────────────────────────────── */
.wwe-filters-own{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.wwe-f-card{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:12px 14px}
.wwe-f-card>summary{cursor:pointer;list-style:none;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:800;font-size:14.5px;display:flex;align-items:center;justify-content:space-between}
.wwe-f-card>summary::-webkit-details-marker{display:none}
.wwe-f-card>summary::after{content:"";width:8px;height:8px;border-right:2px solid #8a9199;border-bottom:2px solid #8a9199;transform:rotate(45deg);margin-left:8px;flex:0 0 auto}
.wwe-f-card[open]>summary::after{transform:rotate(-135deg)}
.wwe-f-card>summary b{background:#0047bb;color:#fff;border-radius:999px;font-size:11px;padding:2px 7px;margin-left:auto;margin-right:8px}
.wwe-f-list{list-style:none;margin:10px 0 0;padding:0;max-height:260px;overflow:auto}
.wwe-f-list li a{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 4px;font-size:14px;border-radius:8px}
.wwe-f-list li a:hover{background:#f5f1ea;text-decoration:none}
.wwe-f-list li a.is-on{background:#eef3ff;color:#0047bb;font-weight:700}
.wwe-f-swatches{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.wwe-f-swatches a{display:block;width:24px;height:24px;border-radius:999px;box-shadow:0 0 0 1px #e0dbd2}
.wwe-f-swatches a:hover{box-shadow:0 0 0 2px #0047bb}
.wwe-f-swatches a.is-on{box-shadow:0 0 0 2px #101418,0 0 0 4px #fff inset}
.wwe-f-price{margin-top:10px;font-size:13.5px}
.wwe-f-price .price_slider_wrapper .ui-slider{background:#efeae2;height:6px;border-radius:999px;margin:12px 0}
.wwe-f-price .ui-slider .ui-slider-range{background:#0047bb}
.wwe-f-price .ui-slider .ui-slider-handle{background:#101418;border:0;width:16px;height:16px;border-radius:999px;top:-5px}
.wwe-f-price .button{background:#101418;color:#fff;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:800}
.wwe-f-clear{display:block;text-align:center;border:1px solid #efeae2;background:#fff;border-radius:999px;padding:9px 14px;font-weight:800;font-size:13.5px}
.wwe-f-clear:hover{background:#101418;color:#fff;text-decoration:none}
.shop-sidebar .wwe-side{margin-top:12px}
.foot-partners{display:block;margin-top:6px;opacity:.85}
.foot-partners a{text-decoration:underline}

/* The old theme's card pills (Enquire / Share / Customise icons) are printed
   by the SEO plugin but their click handlers were bound by Rey's JS, which
   is no longer loaded — they looked interactive and did nothing, and the set
   appeared twice per card. Hidden rather than restyled; the card itself is
   the link, and Select options is the action. */
.tww-card-pills{display:none !important}

/* live price box on the product page */
.wwe-price-summary{background:#fff !important;border:2px solid #0047bb !important;border-radius:18px !important;font-family:"Red Hat Mono",ui-monospace,Consolas,monospace !important;font-size:14.5px !important}
.wwe-price-summary>div{margin:.35em 0 !important}
.wwe-price-summary #wwe-custom-total{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:21px}
.wwe-price-summary.is-pulse{animation:wwePulse .5s ease}
@keyframes wwePulse{0%{box-shadow:0 0 0 0 rgba(0,71,187,.28)}100%{box-shadow:0 0 0 14px rgba(0,71,187,0)}}
@media (prefers-reduced-motion:reduce){.wwe-price-summary.is-pulse{animation:none}}

/* The "First-time digitising: +£10.00" note is printed by the decoration
   plugin. Imran 2026-10-17: "remove digitising" — the site says everywhere
   else that logo set-up is free, so this line contradicted the offer. The
   note goes; the setup figure in the price box is already £0.00. */
.wwe-logo-options .wwe-digitising,
.wwe-logo-options [class*="digit"],
.wwe-logo-options p:has(strong:first-child):is(:nth-last-child(1),:nth-last-child(2)){display:none}

/* The product grid had the sidebar sharing the "tabs" area, so when the buy
   column was long (logo options, price box) the left column ran out of
   content and left a half-screen hole before the related products (Imran
   2026-10-17: "why so much gap"). The sidebar now has its own full-width row
   under both columns, and the grid rows size to their content. */
.woocommerce div.product{
  grid-template-areas:"gallery summary" "tabs summary" "side side" "related related";
  grid-template-rows:auto auto auto auto;
  align-items:start;
}
.woocommerce div.product .wwe-side-wrap{grid-area:side;margin-top:4px}
.woocommerce div.product .woocommerce-tabs{align-self:start}
@media(max-width:1050px){
  .woocommerce div.product{grid-template-areas:"gallery" "summary" "tabs" "side" "related"}
}

/* Tabs sit directly under the gallery, in the gallery column, and never
   stretch past it (Imran 2026-10-17: "move this below gallery"). */
.woocommerce div.product .woocommerce-tabs{grid-area:tabs;width:100%;max-width:100%;margin-top:14px}
.woocommerce div.product .woocommerce-tabs ul.tabs{margin-bottom:10px}
.woocommerce div.product .woocommerce-tabs .panel{max-height:none}

/* The gap under the gallery: with named areas, row 1 was as tall as the buy
   column (gallery | summary), so the tabs in row 2 started level with the
   BOTTOM of the summary — a screen of empty space under the photographs.
   Placing the summary across both rows instead lets row 1 size to the
   gallery alone, so the tabs sit right under it. */
.woocommerce div.product{grid-template-areas:none;grid-template-rows:auto auto auto auto}
.woocommerce div.product div.images{grid-column:1;grid-row:1}
.woocommerce div.product div.summary{grid-column:2;grid-row:1 / span 2}
.woocommerce div.product .woocommerce-tabs{grid-column:1;grid-row:2;margin-top:14px}
.woocommerce div.product .wwe-side-wrap{grid-column:1 / -1;grid-row:3}
.woocommerce div.product .related,.woocommerce div.product .upsells{grid-column:1 / -1;grid-row:4}
@media(max-width:1050px){
  .woocommerce div.product{grid-template-columns:minmax(0,1fr)}
  .woocommerce div.product div.images{grid-column:1;grid-row:1}
  .woocommerce div.product div.summary{grid-column:1;grid-row:2}
  .woocommerce div.product .woocommerce-tabs{grid-column:1;grid-row:3}
  .woocommerce div.product .wwe-side-wrap{grid-column:1;grid-row:4}
  .woocommerce div.product .related,.woocommerce div.product .upsells{grid-column:1;grid-row:5}
}

/* One palette, two variables: --c is the department's colour, --ct its tint.
   The chip, the panel border, every box inside the panel and the footer chip
   all read from these, so a department can never be purple at the top and
   peach inside. */
.bn-panel .bn-ptile{background:var(--ct) !important}
.bn-panel .bn-ptile:hover{background:var(--c) !important}
.bn-panel .bn-pcol-h{background:var(--ct) !important}
.bn-panel .bn-pcta{background:var(--c) !important;color:#101418 !important}
.bn-panel .bn-pcta .bn-pcta-b{color:#2c333c !important}
.bn-panel{border-color:var(--c) !important}
.bn-chip{background:var(--c) !important;color:#101418 !important}
.foot-chip{background:var(--c) !important}

/* Breathing room between the two decoration choices — they were touching. */
.wwe-deco-toggle form{gap:14px !important}
.wwe-deco-toggle label{padding:16px 18px !important}
.wwe-logo-options .wwe-placements{gap:10px !important}

/* ── product page: compact options, sidebar back in the column ─────
   Imran 2026-10-17: the three sidebar cards stretched the full page width
   and read as empty space ("why it is on product page? should we not keep
   it in sidebar"), and the logo placements took half a screen. The sidebar
   now sits under the buy box in the right-hand column where a sidebar
   belongs, and the placements are a two-column grid. */
.woocommerce div.product .wwe-side-wrap{grid-column:2;grid-row:3;margin-top:14px}
.woocommerce div.product .wwe-side-wrap .wwe-side{display:flex;flex-direction:column;gap:10px}
.woocommerce div.product .wwe-side-card,.woocommerce div.product .wwe-side-cta{padding:14px}
.woocommerce div.product .wwe-side-card h3{font-size:14px}
.woocommerce div.product .wwe-side-card li a{padding:5px 4px;font-size:13.5px}
.woocommerce div.product .wwe-side-cta-b{font-size:13px}

/* placements: two columns, tighter rows */
.wwe-logo-options .wwe-placements{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}
.wwe-placement{padding:10px 12px !important;border-radius:12px !important;gap:2px 8px}
.wwe-placement strong{font-size:13.5px}
.wwe-placement small{font-size:11.5px;line-height:1.35}
.wwe-placement span{font-size:13.5px}
.wwe-logo-options h3{font-size:16px;margin-bottom:8px}
.wwe-logo-upload{margin:12px 0 0 !important}
.wwe-deco-toggle{padding:14px !important}
@media(max-width:1050px){
  .woocommerce div.product .wwe-side-wrap{grid-column:1;grid-row:4}
  .wwe-logo-options .wwe-placements{grid-template-columns:minmax(0,1fr) !important}
}

/* ── product page: less going on ───────────────────────────────────
   Imran 2026-10-17: "too much going on - simplify it ASAP". Recently-viewed
   and the duplicated trust rows go; the rest is tightened so the buy column
   reads as one flow rather than six competing panels. */
.woocommerce div.product .wwe-side-wrap{display:none}
.recently-viewed,.woocommerce .recently-viewed-products,
section[class*="recently"],div[class*="recently-viewed"]{display:none !important}
.woocommerce div.product .summary>*{margin-bottom:14px}
.woocommerce div.product .summary>*:last-child{margin-bottom:0}
.tww-lg{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:14px}
.tww-lg-head{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:16px}
.tww-lg-head span{font-weight:600;font-size:12.5px;color:#6b7585;display:block}
/* one trust row, not two */
.woocommerce div.product .summary .wwe-trust-icons~.wwe-trust-icons{display:none}

/* The two decoration cards were still touching: the gap is set on the form,
   but this block is printed by a second wiring plugin where the labels are
   not inside one. Margin on the labels works either way. */
.wwe-deco-toggle label{margin:0 0 12px !important}
.wwe-deco-toggle label:last-of-type{margin-bottom:0 !important}
.wwe-deco-toggle form{display:grid !important;grid-template-columns:1fr !important;row-gap:12px !important}

/* the repaired card link: covers the photo and the title, sits under the
   badge, the pills and the Select options button so those still work */
.woocommerce ul.products li.product{position:relative}
.wwe-card-link{position:absolute;inset:0 0 86px 0;z-index:2;border-radius:20px}
.wwe-card-link:hover{text-decoration:none}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .variable-items-wrapper,
.woocommerce ul.products li.product .tww-personalise-sticker,
.woocommerce ul.products li.product .tww-card-pills{position:relative;z-index:3}

/* ── one single row of department chips ───────────────────────────────
   Imran 2026-10-17: "when you mouse over on upper row - its menu opens up -
   when you move towards menu, mouse goes above 2nd row buttons and first
   opened menu disappears, we need to keep one row only of all pills".

   Two faults, both fixed here. First, the grid wrapped 13 chips onto two
   rows, so the panel of a top-row chip opened BELOW the second row and the
   pointer had to cross the second row to reach it — crossing a sibling chip
   closes the panel. The row is now a single flex line whatever the chip
   count. Second, even in one row the panel sat 10px clear of the chips, and
   that 10px belonged to neither the chip nor the panel, so the pointer lost
   the hover on the way down. A transparent bridge now spans the gap. */
.bn-chips{display:flex;flex-wrap:nowrap;align-items:stretch;gap:7px}
.bn-chipwrap{flex:1 1 0;min-width:0}
.bn-chip{padding:9px 10px}
.bn-chip-t b{font-size:13px}
.bn-chip-s{font-size:11px}
.bn-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}

/* Narrow screens: the row scrolls sideways rather than wrapping. Panels are
   a pointer affordance, so they are off here — the chip itself is the link,
   and the burger drawer carries the full menu. */
@media(max-width:1100px){
  .bn-chips{grid-template-columns:none;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .bn-chips::-webkit-scrollbar{display:none}
  .bn-chipwrap{flex:0 0 auto}
  .bn-chip{min-width:120px}
  .bn-panel{display:none!important}
}
@media(max-width:860px){.bn-chips{grid-template-columns:none}}

/* Hero: two rotating tiles in a two-row stack. The stack was still cut into
   three rows from when there were three static tiles, which left an empty
   third of a column under the second tile (Imran: "3rd button disappeared
   above £199"). */
.bn-stack{grid-template-rows:repeat(3,minmax(0,1fr))}
@media(max-width:720px){.bn-stack{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}}

/* The script holds a panel open for a moment after the pointer leaves, so
   the pointer can travel to it. Hover stays as the no-JS fallback. */
.bn-chipwrap.is-open .bn-panel{display:block}

/* Category head: description on the left, four photographs from that
   category on the right. The description no longer runs in two text
   columns — the second column was usually empty, which is what left a bare
   half-width block under every category title. */
.wwe-pagehead-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:12px}
.wwe-pagehead-grid .wwe-pagehead-d{margin-top:0;columns:1;max-width:none;height:100%}
.wwe-pagehead-grid .wwe-faces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.wwe-pagehead-grid .wwe-face{margin:0}
@media(max-width:900px){
  .wwe-pagehead-grid{grid-template-columns:1fr}
  .wwe-pagehead-grid .wwe-faces{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:560px){.wwe-pagehead-grid .wwe-faces{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The quote wizard embedded in /custom-quote/ rather than floating over it.
   The plugin's panel is a fixed-position window with its own chrome; in the
   page it has to behave like a block of content, so the window furniture
   (drag handle, minimise, expand, close, backdrop) is dropped and the
   panel is allowed to size itself to the column. */
.wwe-quote-embedded #wwe-quote-mount{margin:18px 0 10px}
.wwe-quote-embedded #wwe-quote-mount .twwai-panel{
  position:static!important;inset:auto!important;transform:none!important;
  width:100%!important;max-width:none!important;height:auto!important;
  max-height:none!important;border-radius:20px;box-shadow:0 18px 48px rgba(16,20,24,.12);
  display:flex!important;opacity:1!important;visibility:visible!important;z-index:1
}
.wwe-quote-embedded #wwe-quote-mount .twwai-wizard{position:static!important;width:100%!important;max-width:none!important}
.wwe-quote-embedded #wwe-quote-mount .twwai-wz-body{max-height:none!important}
.wwe-quote-embedded #wwe-quote-mount .twwai-min,
.wwe-quote-embedded #wwe-quote-mount .twwai-expand,
.wwe-quote-embedded #wwe-quote-mount .twwai-close,
.wwe-quote-embedded #wwe-quote-mount .twwai-bottombar{display:none!important}
.wwe-quote-embedded .twwai-launcher,
.wwe-quote-embedded .twwai-wizard-btn-floating{display:none!important}
.wwe-quote-embedded .twwai-backdrop,.wwe-quote-embedded .twwai-overlay{display:none!important}
@media(max-width:900px){.wwe-quote-embedded #wwe-quote-mount .twwai-panel{border-radius:16px}}

/* Belt and braces for the embedded wizard: whatever the plugin dims the
   page with — a backdrop element or a pseudo-element on body — is off on
   this page, because the wizard is the page here, not a window over it. */
.wwe-quote-embedded body::before,.wwe-quote-embedded body::after{display:none!important;opacity:0!important}
.wwe-quote-embedded .twwai-dim,.wwe-quote-embedded .twwai-scrim,.wwe-quote-embedded .twwai-shade{display:none!important}

/* The mock-up price card is a link to our own mock-up tool, so it has to
   look like one and keep the card's own layout. */
a.wwe-pricecard{text-decoration:none;display:flex;flex-direction:column}
a.wwe-pricecard:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,20,24,.18)}
.wwe-pricecard-go{margin-top:auto;padding-top:10px;font-style:normal;font-weight:800;font-size:13px;opacity:.95}

/* ── the quote panel, in this site's colours ──────────────────────────
   Imran 2026-10-17: "remove charlie option - change dull green into pastel
   site colours". The chat tab is gone, so the panel is the quote builder
   and nothing else; the plugin's own colour options now carry the hero
   periwinkle and the site's near-black CTA, and the rules below fix the
   details its options do not reach — text contrast on a pale header, and
   the greens baked into the step strip and the Next button. */
.twwai-panel [data-tab="chat"]{display:none!important}
.twwai-panel .twwai-tabs{grid-template-columns:1fr!important}
.twwai-panel .twwai-tabs [data-tab="wizard"]{width:100%;border-right:0}

.twwai-panel .twwai-head,.twwai-panel .twwai-header,.twwai-panel .twwai-top{color:#101418!important}
.twwai-panel .twwai-head *,.twwai-panel .twwai-header *,.twwai-panel .twwai-top *{color:#101418!important;border-color:rgba(16,20,24,.18)!important}
.twwai-panel .twwai-head svg,.twwai-panel .twwai-header svg{fill:#101418!important;stroke:#101418!important}

/* Step numbers, progress and primary buttons: the site's own ink and blue
   instead of the plugin's greens. */
.twwai-panel .twwai-wz-progress-strip .is-on,
.twwai-panel .twwai-wz-step.is-on,
.twwai-panel [class*="wz-step"][class*="is-on"]{background:#101418!important;border-color:#101418!important;color:#fff!important}
.twwai-panel button[class*="next"],.twwai-panel .twwai-wz-next,
.twwai-panel [class*="wz-foot"] button:last-child{background:#101418!important;border-color:#101418!important;color:#fff!important}
.twwai-panel button[class*="next"]:hover,.twwai-panel .twwai-wz-next:hover{filter:brightness(1.15)}
.twwai-panel a{color:#0047bb}

/* With Charlie gone the panel is a quote builder, so the chat furniture
   goes with him: the greeting, the message log and the message box. The
   greeting also promised "10% off auto-applied", which is the discount
   code that does not exist on this site. */
.twwai-panel .twwai-body,
.twwai-panel .twwai-form,
.twwai-panel .twwai-input,
.twwai-panel .twwai-send{display:none!important}
.twwai-panel .twwai-tabs{border-bottom:1px solid rgba(16,20,24,.10)}
.twwai-panel .twwai-tab-lbl{color:#101418!important;font-weight:800}
.twwai-panel .twwai-tab-sub{color:#5a6472!important}
/* One tab left is not a tab strip. */
.twwai-panel .twwai-tabs{display:none!important}

/* ─────────────────────────────────────────────────────────────────────
   Workwear Etc — neon.

   The palette is the Web Print & Signs "neon" skin's own: #0c0f1d ground,
   #141a30 cards, yellow / cyan / pink / green accents, Tilt Neon for
   display. It is applied to this theme's furniture rather than copied as
   markup, so the chips, mega panels, bento hero and filters all stay put
   and only the look changes.

   Everything else in this file reads the tokens below, so this block is the
   whole identity.
   ───────────────────────────────────────────────────────────────────── */
:root{
  --nbg:#0c0f1d; --ndeep:#070913; --ncard:#141a30; --ncard2:#1a2140;
  --nfield:#0f1428; --nline:#2b3458; --nline2:#56608a;
  --ntext:#eef0f8; --nmute:#b9bfd6;
  --nyel:#ffd60a; --ncyan:#00d4e0; --npink:#ff2e8b; --ngreen:#48e05a;
  --norange:#ff6a13; --nblue:#2d5bff; --nlink:#6ff0f7;

  --paper:var(--nbg);
  --cream:var(--ncard);
  --ink:var(--ntext);
  --ink-soft:var(--nmute);
  --ink-mute:#8d96b4;
  --line:var(--nline);
  --blue:var(--ncyan);
  --blue-d:#00b4bf;
  --blue-ink:var(--nlink);
  --blue-soft:var(--ncard2);
  --amber:var(--nyel);
  --amber-d:#ffe254;
  --strip:var(--ndeep);
  --radius:14px;
  color-scheme:dark;
}

body{background:var(--nbg);color:var(--ntext)}
a{color:var(--ntext)}
h1,h2,h3,.wwe-h2,.bn-h1{color:var(--ntext)}
.wwe-lead,.bn-lead,.bn-cd span,.wwe-side-prices li span{color:var(--nmute)}

/* The display face the skin uses, loaded with the others in functions.php.
   The stack falls back to Red Hat Display if it does not arrive. */
.bn-h1,.wwe-h2,.bnh-logo b,.bn-cd b,.bn-chip-t b{
  font-family:"Tilt Neon","Red Hat Display",Gabarito,sans-serif;letter-spacing:0}

/* Surfaces: dark cards, hairline borders, no drop shadows — the glow does
   that work instead. */
.wwe-card,.bn-c,.wwe-side-card,.wwe-f-card,.wwe-pricecard,
.woocommerce ul.products li.product,.wwe-faces .wwe-face,.bnh-card{
  background:var(--ncard);border:1px solid var(--nline);box-shadow:none;color:var(--ntext)}
.bnh-card{background:var(--ncard2)}
.bn-cd{background:var(--ncard);border:1px solid var(--nline)}
.wwe-pagehead{background:transparent}
.wwe-pagehead-d{background:var(--ncard);border:1px solid var(--nline);color:var(--nmute)}
.wwe-sec{background:transparent!important}
.wwe-sec[style]{background:transparent!important;border-color:var(--nline)!important}

/* Top strip, header card and every input. */
.bnh-strip{background:var(--ndeep);color:var(--ntext)}
.bnh-strip a{color:var(--ntext)}
.bnh-sb{background:transparent;border:1px solid var(--nline2);color:var(--ntext)}
.bnh-sb:hover{background:var(--nyel);color:#0c0f1d;border-color:var(--nyel)}
.bnh-search input,.wpcf7 input,.wpcf7 select,.wpcf7 textarea,
.woocommerce .woocommerce-ordering select{
  background:var(--nfield);border:1px solid var(--nline);color:var(--ntext)}
.bnh-search input::placeholder{color:#7c86a8}
.bnh-logo b{color:var(--ntext)}
.bnh-logo span{color:var(--nmute)}

/* Department chips: dark fill, outlined and lit in their own colour. */
.bn-chip{background:var(--ncard);border:2px solid var(--c);color:var(--ntext);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 14px -4px var(--c)}
.bn-chip:hover{background:var(--ncard2);filter:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 22px -2px var(--c)}
.bn-chip-t b{color:var(--c);text-shadow:0 0 10px color-mix(in srgb,var(--c) 60%,transparent)}
.bn-chip-s{color:var(--nmute);opacity:1}
.bn-chip .bn-code{background:rgba(255,255,255,.08);color:var(--nmute)}

.bn-chip.is-a,.bn-panel.is-a,.bn-pcta.is-a,.wwe-side-dot.is-a{--c:#2d5bff;--ct:#141c3a}
.bn-chip.is-b,.bn-panel.is-b,.bn-pcta.is-b,.wwe-side-dot.is-b{--c:#ff2e8b;--ct:#2a1030}
.bn-chip.is-c,.bn-panel.is-c,.bn-pcta.is-c,.wwe-side-dot.is-c{--c:#ff6a13;--ct:#2a1a12}
.bn-chip.is-d,.bn-panel.is-d,.bn-pcta.is-d,.wwe-side-dot.is-d{--c:#9b6bff;--ct:#1f1838}
.bn-chip.is-e,.bn-panel.is-e,.bn-pcta.is-e,.wwe-side-dot.is-e{--c:#00d4e0;--ct:#0d2630}
.bn-chip.is-f,.bn-panel.is-f,.bn-pcta.is-f,.wwe-side-dot.is-f{--c:#6ff0f7;--ct:#0f2a33}
.bn-chip.is-g,.bn-panel.is-g,.bn-pcta.is-g,.wwe-side-dot.is-g{--c:#ff6dae;--ct:#2b1526}
.bn-chip.is-h,.bn-panel.is-h,.bn-pcta.is-h,.wwe-side-dot.is-h{--c:#48e05a;--ct:#102a17}
.bn-chip.is-i,.bn-panel.is-i,.bn-pcta.is-i,.wwe-side-dot.is-i{--c:#ffd60a;--ct:#2a2410}
.bn-chip.is-j,.bn-panel.is-j,.bn-pcta.is-j,.wwe-side-dot.is-j{--c:#ff975a;--ct:#2a1c12}
.bn-chip.is-k,.bn-panel.is-k,.bn-pcta.is-k,.wwe-side-dot.is-k{--c:#a0b5ff;--ct:#161d38}
.bn-chip.is-l,.bn-panel.is-l,.bn-pcta.is-l,.wwe-side-dot.is-l{--c:#8cecf1;--ct:#122a2e}
.bn-chip.is-m,.bn-panel.is-m,.bn-pcta.is-m,.wwe-side-dot.is-m{--c:#ffe254;--ct:#2a2610}

/* Mega panels: dark, edged and lit in the department's colour. */
.bn-panel{background:var(--ncard);border:2px solid var(--c);box-shadow:0 0 30px -10px var(--c)}
.bn-ptile{background:var(--ct);border:1px solid var(--nline);color:var(--ntext)}
.bn-ptile b{color:var(--c)}
.bn-pcol li a,.bn-pcol-h{color:var(--ntext)}
.bn-pcol li .bn-code,.bn-ptile .bn-code{background:rgba(255,255,255,.08);color:var(--nmute)}
.bn-pcta{background:var(--ct);border:1px solid var(--c)}
.bn-pcta-h{color:var(--c)}
.bn-pcta-b{color:var(--nmute)}
.bn-pshot b{color:var(--ntext)}

/* Hero: the headline is lit rather than filled. */
.bn-head{background:var(--ncard2);border:1px solid var(--nline)}
.bn-h1 .bn-l1,.bn-h1 .bn-l2{color:var(--ntext)}
.bn-rotw{color:var(--npink);text-shadow:0 0 10px rgba(255,46,139,.65),0 0 28px rgba(255,46,139,.35)}
.bn-h1 mark{background:var(--nyel);color:#0c0f1d;border-radius:8px}
.bn-eb span{background:var(--ncard);border:1px solid var(--nline);color:var(--nmute)}
.bn-tick,.marquee-track span{background:var(--ncard);border:1px solid var(--nline);color:var(--nmute)}
.bn-tick b{color:var(--nyel);text-shadow:0 0 8px rgba(255,214,10,.5)}

/* Buttons: the skin's yellow pill, a cyan outline, a green line. */
.wwe-btn,.bn-b1,.wwe-side-btn,.bn-pcta-btn,.bnh-quote,.wpcf7 input[type=submit]{
  background:var(--nyel);color:#0c0f1d;border:0;border-radius:999px;font-weight:800;
  box-shadow:0 0 18px -6px rgba(255,214,10,.8)}
.wwe-btn:hover,.bn-b1:hover,.wwe-side-btn:hover,.bn-pcta-btn:hover,
.bnh-quote:hover,.wpcf7 input[type=submit]:hover{background:#ffe254;color:#0c0f1d}
.bn-b2{background:transparent;color:var(--ntext);border:1px solid var(--ncyan);border-radius:999px}
.bn-b2:hover{background:rgba(0,212,224,.12)}
.bn-b3{background:transparent;color:var(--ngreen);border:1px solid var(--ngreen);border-radius:999px}

/* Prices, product cards and the catalogue grid. */
.woocommerce ul.products li.product .price,.woocommerce div.product p.price,
.wwe-face i,.bn-pill i{color:var(--nyel)}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title{color:var(--ntext)}
.woocommerce ul.products li.product img,.wwe-face img{background:#fff;border-radius:10px}
.bn-pill,.bn-pill-sm{background:var(--ncard2);color:var(--ntext);border:1px solid var(--nline)}
.woocommerce-result-count,.woocommerce .woocommerce-ordering{color:var(--nmute)}

/* Filters and the sidebar. */
.wwe-f-card summary,.wwe-side-card h3{color:var(--ntext)}
.wwe-f-list li a,.wwe-side-card a{color:var(--nmute)}
.wwe-f-list li a:hover,.wwe-side-card a:hover{color:var(--ntext)}
.wwe-f-clear{color:var(--nyel)}

/* Footer. */
.wwe-foot{background:var(--ndeep);color:var(--ntext)}
.foot-col a,.foot-col h4,.foot-brandrow a{color:var(--ntext)}
.foot-col .bn-code,.foot-brandrow .bn-code{background:rgba(255,255,255,.08);color:var(--nmute)}
.foot-chip{border:1px solid var(--c);background:transparent;color:var(--ntext)}
.foot-chip .bn-code{background:rgba(255,255,255,.10);color:var(--nmute)}
.foot-legal,.foot-cta p{color:var(--nmute)}
.foot-cta{background:var(--ncard);border:1px solid var(--nline)}

/* The sheet this theme was ported from carries a set of !important rules
   for the sister site's light palette and for a product-customisation
   plugin that does not run here. They cannot be out-ranked by ordinary
   declarations, so the handful that matter are restated. */
.bn-chip{background:var(--ncard)!important;color:var(--ntext)!important}
.bn-chip-t b{color:var(--c)!important}
.bn-cd.is-a,.bn-cd.is-b,.bn-cd.is-c,.bn-cd.is-d{background:var(--ncard)!important}
.bn-cd b{color:var(--ntext)!important}
.foot-chip{background:transparent!important;color:var(--ntext)!important}
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price bdi{color:var(--nyel)!important}
.woocommerce ul.products li.product .button{background:var(--nyel)!important;color:#0c0f1d!important}
.woocommerce div.product div.summary{background:var(--ncard)!important;border-color:var(--nline)!important;color:var(--ntext)}
.wwe-price-summary{background:var(--ncard)!important;border-color:var(--ncyan)!important;color:var(--ntext)!important}
.wwe-deco-toggle,.wwe-logo-options,.wwe-placement{background:var(--ncard)!important;border-color:var(--nline)!important;color:var(--ntext)}
.tww-pill{background:var(--ncard)!important;border-color:var(--nline)!important;color:var(--ntext)!important}
.wwe-pagehead-d{color:var(--nmute)}
.bn-tick,.bn-tick.is-t0,.bn-tick.is-t1,.bn-tick.is-t2,.bn-tick.is-t3,.bn-tick.is-t4,.bn-tick.is-t5{
  background:var(--ncard)!important;border-color:var(--nline)!important;color:var(--nmute)!important}
.bn-tick b{color:var(--nyel)!important}
.bn-rotw{color:var(--npink)!important}
.wwe-pagehead h1,.wwe-pagehead-n,.woocommerce-breadcrumb,.wwe-crumb,.wwe-crumb a{color:var(--ntext)!important}
.wwe-pagehead-n,.wwe-crumb{color:var(--nmute)!important}
.wwe-f-card,.wwe-side-card{background:var(--ncard)!important;border-color:var(--nline)!important}
.wwe-f-card summary,.wwe-side-card h3,.wwe-f-price{color:var(--ntext)!important}
.woocommerce div.product .woocommerce-tabs .panel,.woocommerce #reviews{color:var(--nmute)}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--ntext)}
.price_slider_wrapper .ui-slider{background:var(--nline)!important}
.price_slider_wrapper .ui-slider .ui-slider-range{background:var(--npink)!important}
.woocommerce .button,.woocommerce button.button{background:var(--nyel)!important;color:#0c0f1d!important;border-radius:999px}

/* ── footer ───────────────────────────────────────────────────────────
   The ported footer was built for a cream page: white link cards, white
   brand pills, three pastel promise tiles. On this ground every one of
   them went invisible. Same furniture, dark surfaces. */
.wwe-foot{background:var(--ndeep)}
.foot-cta{background:var(--ncard)!important;border:1px solid var(--nline)!important}
.foot-cta h3,.foot-cta p{color:var(--ntext)}
.foot-cta p{color:var(--nmute)}
.foot-col{background:var(--ncard)!important;border:1px solid var(--nline)!important}
.foot-col h4{color:var(--ntext)!important}
.foot-col a{color:var(--nmute)!important}
.foot-col a:hover{color:var(--ntext)!important}
.foot-col .bn-code{background:rgba(255,255,255,.08)!important;color:var(--nmute)!important}
.foot-brandrow a{background:var(--ncard)!important;border:1px solid var(--nline)!important;color:var(--nmute)!important}
.foot-brandrow a:hover{background:var(--ncard2)!important;border-color:var(--ncyan)!important;color:var(--ntext)!important}
.foot-brandrow .bn-code{background:rgba(255,255,255,.08)!important;color:var(--nmute)!important}
.foot-brandrow-h,.foot-trust h4,.foot-legal,.foot-legal strong{color:var(--ntext)}
.foot-legal{color:var(--nmute)}
.foot-legal a{color:var(--nlink)}
.foot-trust{display:grid;gap:12px}
.foot-trust-card,.wwe-trust-card,.foot-trust>div{
  background:var(--ncard)!important;border:1px solid var(--nline)!important;color:var(--ntext)!important}
.foot-trust-card b,.foot-trust-card strong{color:var(--ntext)!important}
.foot-trust-card span,.foot-trust-card p{color:var(--nmute)!important}
.foot-btn{border:1px solid var(--nline2)!important;color:var(--ntext)!important;background:transparent!important}
.foot-btn:hover{background:var(--nyel)!important;color:#0c0f1d!important;border-color:var(--nyel)!important}
.foot-btn--dark{background:var(--nyel)!important;border-color:var(--nyel)!important;color:#0c0f1d!important}
.foot-col h3,.foot-brands h3,.foot-cols h3{color:var(--ntext)!important}
.foot-col li a span{color:var(--nmute)!important}
.foot-trust p{background:var(--ncard)!important;border:1px solid var(--nline)!important;color:var(--nmute)!important}
.foot-trust p b{color:var(--ntext)!important}

/* ── product cards, the Workwear Etc way ──────────────────────────────
   Deliberately not the sister site's card: the photo sits on white so the
   garment reads, the frame is dark, and the card lights up at its edge on
   hover rather than lifting. Title above, price in neon yellow below. */
.woocommerce ul.products li.product{
  background:var(--ncard)!important;border:1px solid var(--nline)!important;border-radius:14px;
  padding:10px 10px 14px;transition:border-color .15s,box-shadow .15s}
.woocommerce ul.products li.product:hover{
  border-color:var(--ncyan)!important;box-shadow:0 0 22px -8px var(--ncyan)}
.woocommerce ul.products li.product img{background:#fff;border-radius:10px;padding:6px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  color:var(--ntext)!important;font-size:14.5px;line-height:1.35;margin:10px 2px 4px}
.woocommerce ul.products li.product .price{display:block;margin:0 2px}
.woocommerce ul.products li.product .button{margin-top:10px}

/* Category head: title, count and a lit rule — the description sits in a
   quieter block underneath rather than competing with the products. */
.wwe-pagehead{border-bottom:1px solid var(--nline);padding-bottom:14px;margin-bottom:18px}
.wwe-pagehead h1{text-shadow:0 0 18px rgba(0,212,224,.35)}
.wwe-pagehead-grid{grid-template-columns:minmax(0,1fr)}
.wwe-pagehead-d{font-size:15px;max-height:9.5em;overflow:hidden;position:relative}
.wwe-pagehead-d::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.5em;
  background:linear-gradient(to bottom,transparent,var(--ncard))}
.wwe-faces{grid-template-columns:repeat(4,minmax(0,1fr))}
.wwe-face{background:var(--ncard)!important;border:1px solid var(--nline)!important}
.wwe-face span b{color:var(--ntext)}
.wwe-face span i{color:var(--nyel)}

/* ── product page ─────────────────────────────────────────────────────
   The tab strip and the description panel were still the ported light
   cards: white box, pale grey body text, invisible on this ground. */
.woocommerce div.product .woocommerce-tabs ul.tabs{background:transparent;border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:var(--ncard)!important;border:1px solid var(--nline)!important;border-radius:999px}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  background:var(--nyel)!important;border-color:var(--nyel)!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--nmute)!important;font-weight:700}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#0c0f1d!important}
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-Tabs-panel,
.woocommerce #reviews,.woocommerce div.product .up-sells,
.woocommerce div.product .related{
  background:var(--ncard)!important;border:1px solid var(--nline)!important;
  border-radius:14px;color:var(--ntext)!important}
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li,
.woocommerce div.product .woocommerce-tabs .panel td,
.woocommerce div.product .woocommerce-tabs .panel th{color:var(--nmute)!important}
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .related h2,.woocommerce div.product .up-sells h2{color:var(--ntext)!important}
.woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{
  border-color:var(--nline)!important;color:var(--nmute)!important}
.woocommerce div.product div.images{background:var(--ncard);border:1px solid var(--nline);border-radius:14px;padding:10px}
.woocommerce div.product div.images img{background:#fff;border-radius:10px}
.woocommerce div.product .product_meta{color:var(--nmute)}
.woocommerce div.product .product_meta a{color:var(--nlink)}
.woocommerce .quantity input{background:var(--nfield)!important;color:var(--ntext)!important;border:1px solid var(--nline)!important}
.woocommerce div.product form.cart .variations label,
.woocommerce div.product form.cart .variations td{color:var(--ntext)!important}
.woocommerce div.product form.cart .reset_variations{color:var(--nlink)!important}
.wvs-style-squared .variable-item:not(.radio-variable-item){background:var(--ncard2)!important;color:var(--ntext)!important;border-color:var(--nline)!important}

/* ── light mode ───────────────────────────────────────────────────────
   Imran 2026-10-17: "may be add a dark light switch in header". The whole
   theme reads the tokens above, so a light reading is a different set of
   values for the same names — surfaces and type invert, the department
   colours stay, and the glows come down to a tint because a glow on white
   just looks like a smudge. */
html[data-theme="light"]{
  --nbg:#F6F7FB; --ndeep:#EDEFF6; --ncard:#FFFFFF; --ncard2:#F2F4FA;
  --nfield:#FFFFFF; --nline:#DFE3EE; --nline2:#C3CADC;
  --ntext:#111726; --nmute:#525C73;
  --nlink:#0F62B5;
  color-scheme:light;
}
html[data-theme="light"] .bn-chip{box-shadow:0 1px 2px rgba(17,23,38,.08)}
html[data-theme="light"] .bn-chip:hover{box-shadow:0 6px 16px rgba(17,23,38,.14)}
html[data-theme="light"] .bn-panel{box-shadow:0 18px 40px rgba(17,23,38,.14)}
html[data-theme="light"] .bn-h1,html[data-theme="light"] .wwe-pagehead h1{text-shadow:none}
html[data-theme="light"] .bn-rotw{text-shadow:none}
html[data-theme="light"] .bn-tick b{text-shadow:none}
html[data-theme="light"] .bn-chip-t b{text-shadow:none}
html[data-theme="light"] .bn-tick b{color:#8A6B12}
html[data-theme="light"] .bn-chip-t b{color:color-mix(in srgb,var(--c) 62%,#111726)}
html[data-theme="light"] .bn-chip-s{color:#525C73}
html[data-theme="light"] .bn-ptile b,html[data-theme="light"] .bn-pcta-h{color:color-mix(in srgb,var(--c) 60%,#111726)}
html[data-theme="light"] .foot-chip{color:#111726!important}
html[data-theme="light"] .woocommerce ul.products li.product .price,
html[data-theme="light"] .woocommerce div.product p.price,
html[data-theme="light"] .wwe-face i{color:#8A6B12!important}
html[data-theme="light"] .wwe-btn,html[data-theme="light"] .bn-b1,
html[data-theme="light"] .bnh-quote,html[data-theme="light"] .wpcf7 input[type=submit]{
  box-shadow:0 2px 10px rgba(17,23,38,.14)}
html[data-theme="light"] .woocommerce ul.products li.product img,
html[data-theme="light"] .wwe-face img{background:#fff}
html[data-theme="light"] .bnh-strip{background:var(--ntext);color:#fff}
html[data-theme="light"] .bnh-strip a,html[data-theme="light"] .bnh-sb{color:#fff}
html[data-theme="light"] .bnh-sb{border-color:rgba(255,255,255,.4)}
html[data-theme="light"] .bnh-sb:hover{background:var(--nyel);color:#111726;border-color:var(--nyel)}

/* The switch itself: one button, the icon for the mode you would move to. */
.bnh-theme{display:inline-flex;align-items:center;justify-content:center;min-width:38px;cursor:pointer;font-size:14px;line-height:1}
.bnh-theme .bnh-theme-light{display:none}
html[data-theme="light"] .bnh-theme .bnh-theme-light{display:inline}
html[data-theme="light"] .bnh-theme .bnh-theme-dark{display:none}