/* 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} .twl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .twl-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:16px} .twl-sec{padding-block:56px} .twl-grid{display:grid;gap:16px} .twl-c2{grid-template-columns:repeat(2,minmax(0,1fr))} .twl-c3{grid-template-columns:repeat(3,minmax(0,1fr))} .twl-c4{grid-template-columns:repeat(4,minmax(0,1fr))} .twl-c6{grid-template-columns:repeat(6,minmax(0,1fr))} .price{font-variant-numeric:tabular-nums} .twl-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} .twl-btn:hover{text-decoration:none;filter:brightness(.95)} .twl-btn--amber{background:var(--amber);color:var(--ink)} .twl-btn--blue{background:var(--blue);color:#fff} .twl-btn--ink{background:var(--ink);color:#fff} .twl-btn--ghost{border-color:currentColor} .twl-pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-weight:600;font-size:14px;background:#fff} .twl-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 .twl-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 .twl-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 .twl-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} .twl-nav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 20px} .twl-nav-item{position:relative} .twl-nav-top{display:inline-block;padding:8px 0;font-weight:700;font-size:14px;color:#2c333c} .twl-nav-top:hover{color:#0047bb;text-decoration:none} .twl-nav-top.is-accent{color:#d8113f} .twl-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} .twl-nav-item:hover .twl-mega,.twl-nav-item:focus-within .twl-mega{display:block} .twl-mega-in{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:2px 16px} .twl-mega-link{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:10px;font-weight:600;font-size:14.5px} .twl-mega-link:hover{background:#eef3ff;text-decoration:none} .twl-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 */ .twl-nav li{list-style:none} .twl-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)} .twl-nav li:hover>.sub-menu,.twl-nav li:focus-within>.sub-menu{display:block} .twl-nav .sub-menu a{display:block;padding:8px 10px;border-radius:10px;font-size:14.5px;font-weight:600} .twl-nav .sub-menu a:hover{background:#eef3ff;text-decoration:none} .twl-drawer{display:none;background:#fff;border-bottom:1px solid #eef0f3;padding-block:8px} .twl-drawer.is-open{display:block} .twl-mnav{list-style:none;margin:0;padding:0} .twl-mnav>li{border-bottom:1px solid #eef0f3} .twl-mnav summary{cursor:pointer;padding:12px 4px;font-weight:800;font-size:16px} .twl-mnav ul{list-style:none;margin:0 0 10px;padding:0 0 0 10px} .twl-mnav ul a{display:flex;justify-content:space-between;padding:8px 4px;font-size:15px} .twl-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. */ .twl-bento{background:var(--cream);padding-block:14px 26px} .twl-bento .twl-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:twlTick 46s linear infinite} @keyframes twlTick{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 ─────────────────────────────────────── */ .twl-main{padding-block:22px 54px} .twl-main .twl-wrap{max-width:1320px} .twl-pagehead{background:var(--cream);padding-block:18px 10px;border:0} .twl-pagehead .twl-wrap{max-width:1320px} .twl-crumb{font-size:13px;color:#6b7585;margin-bottom:8px} .twl-crumb span{opacity:.5;margin:0 4px} .twl-pagehead h1{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:clamp(30px,4vw,48px);color:#101418;margin-bottom:6px} .twl-pagehead-n{margin:0;font-size:14.5px;color:#454c55;font-weight:600} .twl-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} .twl-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 */ .twl-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} .twl-filters{display:flex;flex-direction:column;gap:10px} .twl-filter-card{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:14px 16px} .twl-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} .twl-filter-card-head::-webkit-details-marker{display:none} .twl-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} .twl-filter-card[open] .twl-filter-card-head::after{transform:rotate(-135deg)} .twl-filter-card-body{padding-top:12px} .twl-filter-swatches{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0} .twl-filter-swatches a{display:block;width:22px;height:22px;border-radius:999px;box-shadow:0 0 0 1px #e6e2db} .twl-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. */ .twl-deco-toggle{background:#fff !important;border:1px solid #efeae2 !important;border-radius:18px !important;padding:18px !important;margin:0 0 16px !important} .twl-deco-toggle>p{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:16px !important;margin-bottom:12px !important} .twl-deco-toggle form{display:grid !important;grid-template-columns:1fr !important;gap:10px !important} .twl-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} .twl-deco-toggle label:hover{border-color:#b9c6e8 !important} .twl-deco-toggle label:has(input:checked){border-color:#0047bb !important;background:#eef3ff !important} .twl-deco-toggle label input[type="radio"]{grid-row:1/3;margin:3px 0 0 !important;width:18px;height:18px;accent-color:#0047bb} .twl-deco-toggle label strong{font-size:15.5px;line-height:1.25} .twl-deco-toggle label br{display:none} .twl-deco-toggle label span{grid-column:2;font-size:13.5px !important;line-height:1.45} .twl-logo-options{background:#fff !important;border:1px solid #efeae2 !important;border-radius:18px !important;padding:18px !important;margin:0 0 16px !important} .twl-logo-options h3{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:18px;margin:0 0 12px} .twl-placements{grid-template-columns:1fr !important;gap:8px !important;margin:0 0 12px !important} .twl-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} .twl-placement:hover{border-color:#b9c6e8 !important} .twl-placement:has(input:checked){border-color:#0047bb !important;background:#eef3ff !important} .twl-placement input[type="checkbox"]{width:17px;height:17px;accent-color:#0047bb;margin:0 !important} .twl-placement strong{font-size:14.5px} .twl-placement br{display:none} .twl-placement span{grid-column:3;grid-row:1;font-weight:800;font-size:14.5px;white-space:nowrap} .twl-placement small{grid-column:2/4;font-size:12.5px;color:#6b7585} /* ── responsive ────────────────────────────────────────────────────── */ @media(max-width:1050px){ .twl-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"} .twl-c6{grid-template-columns:repeat(3,minmax(0,1fr))} .twl-c4,.twl-c3{grid-template-columns:repeat(2,minmax(0,1fr))} .woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr))} .twl-foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))} .twl-trustbar .twl-wrap{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:860px){ .twl-r3,.twl-r4{display:none} .twl-burger{display:inline-block} .twl-hero-art img{height:320px} .twl-r2 .twl-wrap{flex-wrap:wrap} .twl-search{order:3;flex-basis:100%} } @media(max-width:620px){ .twl-c6,.twl-c4,.twl-c3,.twl-c2{grid-template-columns:repeat(2,minmax(0,1fr))} .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .twl-sec{padding-block:36px} .twl-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))} .twl-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. */ .twl-foot{background:var(--cream);color:#2c333c;margin-top:36px;border-top:1px solid #efeae2} .twl-foot a{color:#2c333c} .twl-foot a:hover{color:#0047bb} .twl-foot h3{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:15px;color:#101418;margin-bottom:10px} .twl-wrap.foot-chips,.twl-wrap.foot-cta,.twl-wrap.foot-cols,.twl-wrap.foot-brands,.twl-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 .twl-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. */ .twl-sec{padding-block:40px} .twl-sec .twl-wrap{max-width:1320px} .twl-h2{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:clamp(26px,3.2vw,38px);color:#101418;margin-bottom:8px} .twl-lead{font-size:16.5px;color:#454c55;max-width:70ch;margin-bottom:22px} /* the moving fact strip */ .twl-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:twlMarquee 52s linear infinite;will-change:transform} @keyframes twlMarquee{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 */ .twl-pricecard{background:#fff;border:1px solid #efeae2;border-radius:20px;padding:20px} .twl-pricecard.is-lead{border:2px solid #101418} .twl-pricecard.is-free{background:#0047bb;border-color:#0047bb;color:#fff} .twl-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} .twl-pricecard.is-free b{color:#ffb000} .twl-pricecard strong{display:block;font-size:15.5px;margin-bottom:4px} .twl-pricecard span{display:block;font-size:13.5px;line-height:1.5;color:#5b636d} .twl-pricecard.is-free span{color:#dce6ff} /* product/bundle cards used by the home sections */ .twl-card{background:#fff;border:1px solid #efeae2;border-radius:20px;padding:10px;display:flex;flex-direction:column;color:#101418} .twl-card:hover{text-decoration:none;border-color:#0047bb;transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,20,24,.08)} .twl-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:#f5f1ea;margin-bottom:10px} .twl-card-b{padding:0 4px 4px;display:flex;flex-direction:column;gap:4px;flex-grow:1} .twl-brand{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8a9199;font-weight:700} .twl-pname{font-size:14px;font-weight:700;line-height:1.3} .twl-price{margin-top:auto;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:18px} /* trades, steps, faq, cta band */ .twl-jobs a{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:4px;color:#101418} .twl-jobs a:hover{text-decoration:none;border-color:#0047bb} .twl-jobs strong{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:17px} .twl-jobs span{font-size:13px;color:#5b636d} .twl-steps div{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:16px 18px;border-top:4px solid #0047bb} .twl-steps p:first-child{margin:0 0 6px;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:17px} .twl-steps p:last-child{margin:0;font-size:14px;color:#5b636d;line-height:1.55} .twl-faq details{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:16px 18px} .twl-faq summary{font-weight:800;font-size:15.5px;cursor:pointer;font-family:"Red Hat Display",Gabarito,sans-serif} .twl-faq p{margin:10px 0 0;font-size:14.5px;color:#5b636d} .twl-ctaband{background:#101418;color:#fff;border-radius:0} .twl-ctaband .twl-wrap{display:flex;flex-wrap:wrap;gap:28px;align-items:center;padding-block:40px;max-width:1320px} .twl-ctaband .twl-h2{color:#fff} .twl-ctaband p{color:#c3ccdb;font-size:16.5px;max-width:52ch;margin:0} .twl-btn{display:inline-block;border-radius:999px;padding:14px 22px;font-weight:800;font-size:15.5px;border:2px solid transparent} .twl-btn:hover{text-decoration:none;filter:brightness(.96)} .twl-btn--amber{background:#ffb000;color:#101418} .twl-btn--ink{background:#fff;color:#101418} .twl-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:twlTick 54s linear infinite;will-change:transform} @keyframes twlTick{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. */ .twl-withside{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;align-items:start} .twl-withside-main{min-width:0} .twl-prose{font-size:16px;line-height:1.7;color:#2c333c} .twl-prose h2{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:26px;margin:1.4em 0 .5em} .twl-prose h3{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:20px;margin:1.2em 0 .4em} .twl-prose img{border-radius:16px} .twl-side{position:sticky;top:12px;display:flex;flex-direction:column;gap:12px} .twl-side-card{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:16px} .twl-side-card h3{font-family:"Red Hat Display",Gabarito,sans-serif;font-size:15px;margin:0 0 10px} .twl-side-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .twl-side-card li a{display:flex;align-items:center;gap:8px;padding:7px 4px;font-size:14px;border-radius:10px} .twl-side-card li a:hover{background:#f5f1ea;text-decoration:none} .twl-side-card li a span:nth-of-type(2){flex:1 1 auto} .twl-side-dot{width:10px;height:10px;border-radius:999px;flex:0 0 auto;background:var(--c,#0047bb)} .twl-side-dot.is-a{--c:#8fb4ff}.twl-side-dot.is-b{--c:#ff9fb8}.twl-side-dot.is-c{--c:#ffce6b} .twl-side-dot.is-d{--c:#c3a6ff}.twl-side-dot.is-e{--c:#74d3cc}.twl-side-dot.is-f{--c:#8fd3f4} .twl-side-dot.is-g{--c:#f2a3d7}.twl-side-dot.is-h{--c:#8fe0b8}.twl-side-dot.is-i{--c:#d5e86b} .twl-side-dot.is-j{--c:#ffa98f}.twl-side-dot.is-k{--c:#e0bc92}.twl-side-dot.is-l{--c:#aebbcc} .twl-side-dot.is-m{--c:#a3a8f0} .twl-side-card .bn-code{background:#f3efe8;color:#6b7585} .twl-side-prices{gap:0 !important} .twl-side-prices li{display:flex;justify-content:space-between;gap:10px;padding:8px 4px;font-size:14px;border-bottom:1px solid #f3efe8} .twl-side-prices li:last-child{border-bottom:0} .twl-side-prices i{font-style:normal;font-weight:800} .twl-side-cta{background:#0047bb;color:#fff;border-radius:18px;padding:18px} .twl-side-cta-h{margin:0 0 6px;font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:18px} .twl-side-cta-b{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:#dbe6ff} .twl-side-btn{display:block;text-align:center;background:#ffb000;color:#101418;border-radius:999px;padding:11px 16px;font-weight:800;font-size:14.5px} .twl-side-btn:hover{text-decoration:none;background:#fff} .twl-side-tel{display:block;text-align:center;margin-top:8px;color:#fff;font-weight:800;font-size:14px} /* category photo strip */ .twl-faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px} .twl-face{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:8px;display:flex;flex-direction:column;color:#101418} .twl-face:hover{text-decoration:none;border-color:#0047bb} .twl-face img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#f5f1ea} .twl-face span{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:8px 4px 2px} .twl-face b{font-size:13px;line-height:1.25} .twl-face i{font-style:normal;font-weight:800;font-size:13px;white-space:nowrap} .twl-pagehead-d{max-width:none;columns:2;column-gap:28px} .twl-pagehead-d p{break-inside:avoid} @media(max-width:1050px){ .twl-withside{grid-template-columns:minmax(0,1fr)} .twl-side{position:static;flex-direction:row;flex-wrap:wrap} .twl-side>*{flex:1 1 280px} .twl-faces{grid-template-columns:repeat(2,minmax(0,1fr))} .twl-pagehead-d{columns:1} } /* product page: the sidebar block sits in the gallery column under the tabs */ .woocommerce div.product .twl-side-wrap{grid-area:tabs;width:100%;margin-top:14px} .woocommerce div.product .twl-side-wrap .twl-side{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} @media(max-width:1050px){.woocommerce div.product .twl-side-wrap .twl-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. */ .twl-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%} .twl-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,%20%20%20%20%20%20%20%20%20"); background-size:560px 560px; background-repeat:repeat; } .twl-bento,.twl-pagehead,.twl-foot{background-color:transparent} .twl-hero,.foot-legal{background-color:#101418} /* ── category filters (theme-rendered) ─────────────────────────────── */ .twl-filters-own{display:flex;flex-direction:column;gap:10px;margin-bottom:12px} .twl-f-card{background:#fff;border:1px solid #efeae2;border-radius:18px;padding:12px 14px} .twl-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} .twl-f-card>summary::-webkit-details-marker{display:none} .twl-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} .twl-f-card[open]>summary::after{transform:rotate(-135deg)} .twl-f-card>summary b{background:#0047bb;color:#fff;border-radius:999px;font-size:11px;padding:2px 7px;margin-left:auto;margin-right:8px} .twl-f-list{list-style:none;margin:10px 0 0;padding:0;max-height:260px;overflow:auto} .twl-f-list li a{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:7px 4px;font-size:14px;border-radius:8px} .twl-f-list li a:hover{background:#f5f1ea;text-decoration:none} .twl-f-list li a.is-on{background:#eef3ff;color:#0047bb;font-weight:700} .twl-f-swatches{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px} .twl-f-swatches a{display:block;width:24px;height:24px;border-radius:999px;box-shadow:0 0 0 1px #e0dbd2} .twl-f-swatches a:hover{box-shadow:0 0 0 2px #0047bb} .twl-f-swatches a.is-on{box-shadow:0 0 0 2px #101418,0 0 0 4px #fff inset} .twl-f-price{margin-top:10px;font-size:13.5px} .twl-f-price .price_slider_wrapper .ui-slider{background:#efeae2;height:6px;border-radius:999px;margin:12px 0} .twl-f-price .ui-slider .ui-slider-range{background:#0047bb} .twl-f-price .ui-slider .ui-slider-handle{background:#101418;border:0;width:16px;height:16px;border-radius:999px;top:-5px} .twl-f-price .button{background:#101418;color:#fff;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:800} .twl-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} .twl-f-clear:hover{background:#101418;color:#fff;text-decoration:none} .shop-sidebar .twl-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 */ .twl-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} .twl-price-summary>div{margin:.35em 0 !important} .twl-price-summary #twl-custom-total{font-family:"Red Hat Display",Gabarito,sans-serif;font-weight:900;font-size:21px} .twl-price-summary.is-pulse{animation:twlPulse .5s ease} @keyframes twlPulse{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){.twl-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. */ .twl-logo-options .twl-digitising, .twl-logo-options [class*="digit"], .twl-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 .twl-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 .twl-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 .twl-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. */ .twl-deco-toggle form{gap:14px !important} .twl-deco-toggle label{padding:16px 18px !important} .twl-logo-options .twl-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 .twl-side-wrap{grid-column:2;grid-row:3;margin-top:14px} .woocommerce div.product .twl-side-wrap .twl-side{display:flex;flex-direction:column;gap:10px} .woocommerce div.product .twl-side-card,.woocommerce div.product .twl-side-cta{padding:14px} .woocommerce div.product .twl-side-card h3{font-size:14px} .woocommerce div.product .twl-side-card li a{padding:5px 4px;font-size:13.5px} .woocommerce div.product .twl-side-cta-b{font-size:13px} /* placements: two columns, tighter rows */ .twl-logo-options .twl-placements{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important} .twl-placement{padding:10px 12px !important;border-radius:12px !important;gap:2px 8px} .twl-placement strong{font-size:13.5px} .twl-placement small{font-size:11.5px;line-height:1.35} .twl-placement span{font-size:13.5px} .twl-logo-options h3{font-size:16px;margin-bottom:8px} .twl-logo-upload{margin:12px 0 0 !important} .twl-deco-toggle{padding:14px !important} @media(max-width:1050px){ .woocommerce div.product .twl-side-wrap{grid-column:1;grid-row:4} .twl-logo-options .twl-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 .twl-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 .twl-trust-icons~.twl-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. */ .twl-deco-toggle label{margin:0 0 12px !important} .twl-deco-toggle label:last-of-type{margin-bottom:0 !important} .twl-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} .twl-card-link{position:absolute;inset:0 0 86px 0;z-index:2;border-radius:20px} .twl-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. */ .twl-pagehead-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:12px} .twl-pagehead-grid .twl-pagehead-d{margin-top:0;columns:1;max-width:none;height:100%} .twl-pagehead-grid .twl-faces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0} .twl-pagehead-grid .twl-face{margin:0} @media(max-width:900px){ .twl-pagehead-grid{grid-template-columns:1fr} .twl-pagehead-grid .twl-faces{grid-template-columns:repeat(4,minmax(0,1fr))} } @media(max-width:560px){.twl-pagehead-grid .twl-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. */ .twl-quote-embedded #twl-quote-mount{margin:18px 0 10px} .twl-quote-embedded #twl-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 } .twl-quote-embedded #twl-quote-mount .twwai-wizard{position:static!important;width:100%!important;max-width:none!important} .twl-quote-embedded #twl-quote-mount .twwai-wz-body{max-height:none!important} .twl-quote-embedded #twl-quote-mount .twwai-min, .twl-quote-embedded #twl-quote-mount .twwai-expand, .twl-quote-embedded #twl-quote-mount .twwai-close, .twl-quote-embedded #twl-quote-mount .twwai-bottombar{display:none!important} .twl-quote-embedded .twwai-launcher, .twl-quote-embedded .twwai-wizard-btn-floating{display:none!important} .twl-quote-embedded .twwai-backdrop,.twl-quote-embedded .twwai-overlay{display:none!important} @media(max-width:900px){.twl-quote-embedded #twl-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. */ .twl-quote-embedded body::before,.twl-quote-embedded body::after{display:none!important;opacity:0!important} .twl-quote-embedded .twwai-dim,.twl-quote-embedded .twwai-scrim,.twl-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.twl-pricecard{text-decoration:none;display:flex;flex-direction:column} a.twl-pricecard:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 26px rgba(16,20,24,.18)} .twl-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} /* ───────────────────────────────────────────────────────────────────── TheWorkwear Ltd — e2. Palette and type lifted from the Web Print & Signs "e2" skin: crimson #c8102e on white, ink #2a2c31, rules at ink strength, Host Grotesk, and square corners throughout. Everything else in this file reads the tokens below, so this block is the whole identity. ───────────────────────────────────────────────────────────────────── */ :root{ --red:#c8102e; --red-d:#a30d26; --k:#2a2c31; --k2:#44474e; --k3:#6b6f78; --w:#fff; --wash:#f6f6f7; --paper:var(--w); --cream:var(--w); --ink:var(--k); --ink-soft:var(--k2); --ink-mute:var(--k3); --line:var(--k); --line-soft:#d8dade; --blue:var(--red); --blue-d:var(--red-d); --blue-ink:var(--k); --blue-soft:var(--wash); --amber:var(--red); --amber-d:var(--red-d); --strip:var(--k); --radius:0; color-scheme:light; } /* Square, always. The theme this was ported from rounds nearly everything; e2 rounds nothing, and half-rounded is worse than either. */ *,*::before,*::after{border-radius:0!important} body{background:var(--w);color:var(--k); font-family:"Host Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;line-height:1.45} a{color:var(--k)} a:hover{color:var(--red)} h1,h2,h3,.twl-h2,.bn-h1,.bnh-logo b{ font-family:"Host Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:800;letter-spacing:-0.02em;color:var(--k)} .twl-lead,.bn-lead,.bn-cd span{color:var(--k2)} /* Surfaces: white, with a real rule rather than a shadow. */ .twl-card,.bn-c,.bn-panel,.twl-side-card,.twl-f-card,.twl-pricecard, .woocommerce ul.products li.product,.twl-faces .twl-face,.bnh-card,.bn-cd{ background:var(--w);border:1px solid var(--line);box-shadow:none;color:var(--k)} .twl-pagehead{background:transparent;border-bottom:2px solid var(--line)} .twl-pagehead-d{background:var(--w);border:1px solid var(--line-soft);color:var(--k2)} /* Top strip: ink bar, white type, crimson on hover. */ .bnh-strip{background:var(--k);color:var(--w)} .bnh-strip a{color:var(--w)} .bnh-sb{background:transparent;border:1px solid rgba(255,255,255,.45);color:var(--w)} .bnh-sb:hover{background:var(--red);border-color:var(--red);color:var(--w)} .bnh-card{background:var(--w);border:1px solid var(--line)} .bnh-search input{background:var(--w);border:1px solid var(--line);color:var(--k)} .bnh-search input::placeholder{color:var(--k3)} /* The department rail: numbered, ruled, crimson on hover — the e2 page's 01..06 row, carrying this shop's own departments. */ .bn-chips{counter-reset:dept;border-top:2px solid var(--line);border-bottom:2px solid var(--line)} .bn-chip{background:var(--w);border:0;border-right:1px solid var(--line-soft);color:var(--k); padding:14px 16px;position:relative} .bn-chipwrap:last-child .bn-chip{border-right:0} .bn-chip::before{counter-increment:dept;content:"0" counter(dept); display:block;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--red);margin-bottom:2px} .bn-chip:hover{background:var(--wash);color:var(--k);filter:none;box-shadow:none} .bn-chip-t b{font-size:15px;font-weight:800;color:var(--k)} .bn-chip-s{font-size:12px;color:var(--k2);opacity:1} .bn-chip .bn-code{display:none} /* Every department shares the one accent — e2 is a two-colour design, not a colour-coded one. */ .bn-chip.is-a,.bn-chip.is-b,.bn-chip.is-c,.bn-chip.is-d,.bn-chip.is-e,.bn-chip.is-f, .bn-chip.is-g,.bn-chip.is-h,.bn-chip.is-i,.bn-chip.is-j,.bn-chip.is-k,.bn-chip.is-l, .bn-chip.is-m,.bn-panel.is-a,.bn-panel.is-b,.bn-panel.is-c,.bn-panel.is-d,.bn-panel.is-e, .bn-panel.is-f,.bn-panel.is-g,.bn-panel.is-h,.bn-panel.is-i,.bn-panel.is-j,.bn-panel.is-k, .bn-panel.is-l,.bn-panel.is-m{--c:var(--red);--ct:var(--wash)} /* Mega panels: white, ink-ruled, a crimson hairline at the top edge. */ .bn-panel{background:var(--w);border:1px solid var(--line);border-top:3px solid var(--red);box-shadow:0 18px 40px rgba(42,44,49,.12)} .bn-ptile{background:var(--wash);border:1px solid var(--line-soft);color:var(--k)} .bn-ptile b{color:var(--k)} .bn-pcol li a{color:var(--k2)} .bn-pcol li a:hover{color:var(--red)} .bn-pcta{background:var(--k);border:0;color:var(--w)} .bn-pcta-h{color:var(--w)} .bn-pcta-b{color:rgba(255,255,255,.76)} /* Hero: flat, tight, one word in crimson. */ .bn-head{background:var(--wash);border:1px solid var(--line)} .bn-h1 .bn-l1,.bn-h1 .bn-l2{color:var(--k)} .bn-rotw{color:var(--red)} .bn-h1 mark{background:var(--red);color:var(--w)} .bn-eb span{background:var(--k);border:0;color:var(--w);font-size:11px;letter-spacing:.08em} .bn-tick,.marquee-track span{background:var(--w);border:1px solid var(--line-soft);color:var(--k2)} .bn-tick b{color:var(--k)} /* Buttons: crimson block, ink outline, nothing rounded. */ .twl-btn,.bn-b1,.twl-side-btn,.bn-pcta-btn,.bnh-quote,.wpcf7 input[type=submit], .woocommerce .button,.woocommerce button.button{ background:var(--red);color:var(--w);border:1px solid var(--red);font-weight:800; letter-spacing:.01em;box-shadow:none} .twl-btn:hover,.bn-b1:hover,.twl-side-btn:hover,.bn-pcta-btn:hover,.bnh-quote:hover, .woocommerce .button:hover{background:var(--red-d);border-color:var(--red-d);color:var(--w)} .bn-b2{background:var(--w);color:var(--k);border:1px solid var(--k)} .bn-b2:hover{background:var(--k);color:var(--w)} .bn-b3{background:var(--w);color:var(--k);border:1px solid var(--line-soft)} /* Catalogue. */ .woocommerce ul.products li.product{padding:0 0 14px;transition:border-color .12s} .woocommerce ul.products li.product:hover{border-color:var(--red)} .woocommerce ul.products li.product img{background:var(--w)} .woocommerce ul.products li.product .woocommerce-loop-product__title{ color:var(--k);font-weight:700;font-size:14.5px;padding:0 12px} .woocommerce ul.products li.product .price,.woocommerce div.product p.price{ color:var(--k);font-weight:800;padding:0 12px} .woocommerce div.product div.summary{background:var(--w);border:1px solid var(--line);padding:24px} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--wash);border:1px solid var(--line-soft)} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--k);border-color:var(--k)} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--w)} .woocommerce div.product .woocommerce-tabs .panel{background:var(--w);border:1px solid var(--line-soft);color:var(--k2)} /* Footer: ink block, white type, crimson links. */ .twl-foot{background:var(--k);color:var(--w)} .foot-col,.foot-cta{background:transparent;border:1px solid rgba(255,255,255,.18)} .foot-col h3,.foot-col a,.foot-cta h3{color:var(--w)} .foot-col a:hover{color:var(--red)} .foot-col .bn-code{display:none} .foot-chip{background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--w)} .foot-chip:hover{background:var(--red);border-color:var(--red)} .foot-legal,.foot-cta p{color:rgba(255,255,255,.74)} .foot-brandrow a{background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--w)} .foot-trust p{background:transparent;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.78)} .foot-trust p b{color:var(--w)} /* The ported sheet fills every chip with the accent colour and does it with !important, which on this palette painted the whole rail crimson and hid the labels. e2 is the other way round: white cards, ink type, the number in red. */ .bn-chip{background:var(--w)!important;color:var(--k)!important} .bn-chip:hover{background:var(--wash)!important} .bn-chip-t b{color:var(--k)!important} .bn-chip-s{color:var(--k2)!important} .bn-chips{display:flex;gap:0} .bn-chipwrap{flex:1 1 0;min-width:0} /* Filters: the slider and its button came over from the neon site in purple and yellow. */ .price_slider_wrapper .ui-slider{background:var(--line-soft)!important} .price_slider_wrapper .ui-slider .ui-slider-range{background:var(--red)!important} .price_slider_wrapper .ui-slider .ui-slider-handle{background:var(--k)!important;border:0} .twl-f-card,.twl-side-card{background:var(--w)!important;border:1px solid var(--line-soft)!important} .twl-f-card summary,.twl-side-card h3{color:var(--k)!important} .twl-f-list li a{color:var(--k2)!important} .twl-f-list li a:hover{color:var(--red)!important} .woocommerce .woocommerce-ordering select,.woocommerce-result-count{color:var(--k)} /* Product cards: a plain white card with an ink rule, red on hover. */ .woocommerce ul.products li.product{background:var(--w)!important;border:1px solid var(--line-soft)!important} .woocommerce ul.products li.product:hover{border-color:var(--red)!important} .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price bdi{color:var(--k)!important} .woocommerce ul.products li.product .button{background:var(--red)!important;color:var(--w)!important} /* ── size and colour ────────────────────────────────────────── The catalogue is simple products with the size and colour chosen on the page (inc/options.php explains why they are not WooCommerce variations), so these selects are the thing a customer actually uses before buying and they are styled as such: full-width, square, ink rules, e2. */ .twl-opts{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 18px;width:100%} .twl-opt{display:flex;flex-direction:column;gap:6px;margin:0;min-width:180px;flex:1 1 180px} .twl-opt label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--k3)} .twl-opt select{appearance:none;width:100%;padding:12px 14px;font:inherit;font-size:15px; background:var(--w);color:var(--k);border:1px solid var(--k);cursor:pointer} .twl-opt select:focus{outline:2px solid var(--red);outline-offset:-2px} .twl-opt-note{flex:1 1 100%;margin:0;font-size:13px;color:var(--k3)} .twl-from{font-size:.72em;text-transform:uppercase;letter-spacing:.08em;color:var(--k3)} .woocommerce ul.products li.product .button.twl-pick{background:var(--w);color:var(--k);border:1px solid var(--k)} .woocommerce ul.products li.product .button.twl-pick:hover{background:var(--k);color:var(--w)} /* ── make your own bundle ─────────────────────────────────── The kit page is the one place a whole order is built at once, so it is laid out as a working form rather than a brochure: a row per garment, the choices on the row, and a bar pinned to the foot carrying the total. */ .twl-kit-page{background:var(--w)} .twl-kit-head{border-bottom:1px solid var(--k);padding:46px 0 34px} .twl-kit-eyebrow{margin:0 0 10px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; font-weight:700;color:var(--red)} .twl-kit-head h1{margin:0 0 14px;font-size:clamp(28px,4.4vw,46px);line-height:1.04;max-width:20ch} .twl-kit-lead{margin:0;max-width:62ch;color:var(--k2);font-size:16px} .twl-kit{padding-bottom:120px} .twl-kit-step{padding:34px 0 10px} .twl-kit-step>h2{display:flex;align-items:center;gap:12px;margin:0 0 8px;font-size:20px} .twl-kit-step>h2 span{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px; background:var(--k);color:var(--w);font-size:14px;flex:none} .twl-kit-note{margin:0 0 18px;color:var(--k3);font-size:14px} .twl-kit-trades{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px} .twl-kit-trade{padding:11px 16px;background:var(--w);border:1px solid var(--k);color:var(--k); font:inherit;font-size:14px;font-weight:600;cursor:pointer} .twl-kit-trade:hover{background:var(--wash)} .twl-kit-trade.is-on{background:var(--k);color:var(--w)} .twl-kit-dept{border:1px solid var(--k);margin-bottom:18px} .twl-kit-dept[hidden]{display:none} .twl-kit-dept-h{padding:16px 18px;border-bottom:1px solid var(--line-soft);background:var(--wash)} .twl-kit-dept-h h3{margin:0 0 4px;font-size:17px} .twl-kit-dept-h p{margin:0;font-size:13.5px;color:var(--k3)} .twl-kit-row{display:grid;gap:12px;align-items:end;padding:14px 18px;border-bottom:1px solid var(--line-soft); grid-template-columns:62px minmax(160px,1fr) repeat(2,minmax(110px,150px)) 110px} .twl-kit-row:last-child{border-bottom:0} .twl-kit-row.is-on{background:#fdf3f5} .twl-kit-shot img{width:62px;height:62px;object-fit:cover;background:var(--wash);display:block} .twl-kit-name{align-self:center;display:flex;flex-direction:column;gap:4px} .twl-kit-name a{font-weight:600;font-size:14.5px;text-decoration:none} .twl-kit-name a:hover{color:var(--red)} .twl-kit-name b{font-size:15px} .twl-kit-f{display:flex;flex-direction:column;gap:5px} .twl-kit-f>span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--k3)} .twl-kit-f select,.twl-kit-f input{width:100%;padding:10px 11px;font:inherit;font-size:14.5px; background:var(--w);color:var(--k);border:1px solid var(--k)} .twl-kit-f select:focus,.twl-kit-f input:focus{outline:2px solid var(--red);outline-offset:-2px} .twl-kit-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--k);color:var(--w); padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 -1px 0 var(--k)} .twl-kit-bar-in{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between} .twl-kit-sum{margin:0;display:flex;align-items:baseline;gap:10px} .twl-kit-sum b{font-size:24px;font-weight:800} .twl-kit-sum span{font-size:13.5px;color:#c9cbd0} .twl-kit-del{margin:0;font-size:13px;color:#c9cbd0} .twl-kit-go{background:var(--red);border:1px solid var(--red);color:#fff;padding:13px 22px; font-weight:700;font-size:15px;cursor:pointer} .twl-kit-go:hover{background:var(--red-d);border-color:var(--red-d);color:#fff} @media(max-width:860px){ .twl-kit-row{grid-template-columns:52px 1fr;grid-template-areas:"shot name" "size size" "col col" "qty qty"} .twl-kit-shot{grid-area:shot}.twl-kit-name{grid-area:name} .twl-kit-row .twl-kit-f:nth-of-type(1){grid-area:size} .twl-kit-row .twl-kit-f:nth-of-type(2){grid-area:col} .twl-kit-qty{grid-area:qty} .twl-kit-bar-in{justify-content:center;text-align:center} .twl-kit-go{width:100%} } /* ── one shop, one skin ───────────────────────────────────── Imran 2026-10-19: "rest of the pages do not look like home page - change the theme", "make it look like all same", "filter drop down bad design - fix all bad designs on all pages". The static half of the domain wears a crimson strip, an ink bar with a search in it and a department row; the shop still wore the bento skin it was ported from. header.php and footer.php now carry the static markup and this is the paint for it — plus a pass over the furniture WooCommerce brings with it: the price filter, the ordering select, the result count, the product cards and the pagination, none of which had been touched. */ .twl-wrap{max-width:1280px;margin:0 auto;padding:0 20px} .topbar{background:var(--red);color:#fff} .topbar .twl-wrap{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:center; padding:7px 20px;font-size:12.5px;font-weight:600} .topbar span+span::before{content:"·";opacity:.7;margin-right:10px;font-weight:700} .site-head{position:sticky;top:0;z-index:60;background:var(--k)} .site-head .bar{display:flex;align-items:center;gap:22px;padding-block:13px} .site-head .logo{color:#fff;font-weight:800;font-size:1.35rem;letter-spacing:-.03em; text-decoration:none;white-space:nowrap} .site-head .logo i{color:var(--red);font-style:normal} .hsearch{flex:1 1 auto;display:flex;min-width:0;background:#fff;border:2px solid #fff} .hsearch input[type=search]{flex:1 1 auto;min-width:0;border:0;padding:11px 14px;font:inherit; font-size:14.5px;color:var(--k);background:#fff} .hsearch input[type=search]:focus{outline:none} .hsearch button{border:0;background:var(--red);color:#fff;font:inherit;font-weight:800; font-size:14px;padding:0 20px;cursor:pointer} .hsearch button:hover{background:var(--red-d)} .site-head .hdr{display:flex;align-items:center;gap:18px} .site-head .hlink{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap; text-decoration:none} .site-head .hlink b{color:#fff;font-size:14px} .site-head .hlink span{color:#b9bdc4;font-size:11.5px} .site-head .hlink:hover b{color:var(--red)} .site-head .btn-a{background:var(--red);color:#fff;font-weight:800;font-size:14.5px; padding:12px 18px;text-decoration:none;white-space:nowrap} .site-head .btn-a:hover{background:var(--red-d);color:#fff} .site-head .burger{display:none;width:42px;height:42px;border:1px solid #4a4e56; background:transparent;flex-direction:column;align-items:center;justify-content:center; gap:4px;cursor:pointer} .site-head .burger i{display:block;width:18px;height:2px;background:#fff} .deptbar{background:#22242a;border-top:1px solid #3a3d44} .deptbar .twl-wrap{display:flex;flex-wrap:nowrap;align-items:center;gap:0;overflow-x:auto; scrollbar-width:none} .deptbar .twl-wrap::-webkit-scrollbar{display:none} .deptbar a{color:#d6d9de;font-size:13.5px;font-weight:600;padding:11px 13px;white-space:nowrap; text-decoration:none} .deptbar a:hover{background:var(--k);color:#fff} .deptbar-kit{margin-left:auto;background:var(--red);color:#fff!important;font-weight:800;flex:0 0 auto} .deptbar-kit:hover{background:var(--red-d)!important} /* the bento chrome this theme was ported with */ .bnh,.bnh-strip,.bnh-wrap,.bnh-chips-wrap{display:none!important} .woocommerce-products-header{padding:22px 0 6px} .woocommerce-products-header__title,.twl-pagehead h1{font-size:clamp(1.9rem,3.4vw,2.6rem); letter-spacing:-.02em;margin:0 0 6px} /* the result count and ordering select, which WooCommerce ships raw */ .woocommerce .woocommerce-result-count{margin:0;font-size:13.5px;color:var(--k3)} .woocommerce .woocommerce-ordering{margin:0} .woocommerce .woocommerce-ordering select,.twl select{appearance:none;-webkit-appearance:none; border:1px solid var(--k);background:#fff;color:var(--k);font:inherit;font-size:14px; font-weight:600;padding:10px 38px 10px 13px;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%232a2c31' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:11px;cursor:pointer} .twl select:focus{outline:2px solid var(--red);outline-offset:-2px} /* sidebar: one heading per card, no pastel squares, counts in mono */ .twl-side-card,.widget,.wpc-filters-main-wrap{background:#fff;border:1px solid var(--line-soft); padding:16px;margin-bottom:12px} .twl-side-card h3,.widget h3,.widgettitle,.wpc-filter-title{font-weight:800;font-size:15px; color:var(--k);margin:0 0 12px;text-transform:none;letter-spacing:0} .wpc-filter-header,.wpc-filter-title-wrapper{margin-bottom:10px} .woocommerce .widget_price_filter .ui-slider{background:var(--line-soft);height:4px;border-radius:0; margin:14px 0 12px} .woocommerce .widget_price_filter .ui-slider .ui-slider-range{background:var(--red);border-radius:0} .woocommerce .widget_price_filter .ui-slider .ui-slider-handle{background:var(--k);border-radius:0; width:14px;height:14px;top:-5px;border:0} .woocommerce .widget_price_filter .price_slider_amount .button{background:var(--k);color:#fff; border-radius:0;font-weight:700;font-size:13px;padding:9px 16px} .woocommerce .widget_price_filter .price_slider_amount .button:hover{background:var(--red)} .woocommerce .widget_price_filter .price_slider_amount{font-size:12.5px;color:var(--k3)} .twl-side-card ul,.widget ul{list-style:none;margin:0;padding:0} .twl-side-card li,.widget li{border-top:1px solid var(--line-soft)} .twl-side-card li:first-child,.widget li:first-child{border-top:0} .twl-side-card li a,.widget li a{display:flex;align-items:center;justify-content:space-between; gap:10px;padding:9px 0;font-size:14px;color:var(--k2);text-decoration:none} .twl-side-card li a:hover,.widget li a:hover{color:var(--red)} .twl-side-card li .count,.widget li .count{font-family:"JetBrains Mono",monospace;font-size:11.5px; color:var(--k3);background:transparent;padding:0} /* the coloured squares beside each department came from the pastel skin this theme was ported from and mean nothing here */ .twl-side-card li .twl-dot,.widget li .twl-dot{display:none!important} .woocommerce ul.products li.product{border:1px solid var(--line-soft);padding:10px 10px 14px; display:flex;flex-direction:column;gap:6px} .woocommerce ul.products li.product:hover{border-color:var(--k)} .woocommerce ul.products li.product a img{aspect-ratio:1/1;object-fit:cover;background:var(--wash); margin:0 0 8px} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14px;line-height:1.3; font-weight:600;min-height:2.6em;margin:0} .woocommerce ul.products li.product .price{font-weight:800;font-size:18px;color:var(--k);margin:0} .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .twl-pick{margin-top:auto;width:100%;text-align:center; background:var(--k);color:#fff;font-weight:700;font-size:13px;padding:10px 12px; border:1px solid var(--k)} .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product .twl-pick:hover{background:var(--red);border-color:var(--red);color:#fff} .woocommerce nav.woocommerce-pagination ul{border:0;gap:6px;display:flex} .woocommerce nav.woocommerce-pagination ul li{border:0} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{border:1px solid var(--line-soft);padding:9px 14px; font-weight:700;font-size:14px} .woocommerce nav.woocommerce-pagination ul li span.current{background:var(--k);color:#fff; border-color:var(--k)} .site-foot{position:relative;overflow:hidden;color:#c9cbd0; background: radial-gradient(900px 420px at 88% 0%, rgba(200,16,46,.22), transparent 62%), linear-gradient(160deg,#34373e 0%,#2b2d33 46%,#232529 100%)} .site-foot::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:22px 22px; -webkit-mask-image:linear-gradient(100deg,transparent 46%,#000 84%); mask-image:linear-gradient(100deg,transparent 46%,#000 84%)} .site-foot>.twl-wrap{position:relative;z-index:1} .site-foot a{color:#c9cbd0;text-decoration:none;font-size:14.5px} .site-foot a:hover{color:#fff} .site-foot .foot-top{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center; justify-content:space-between;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14)} .foot-promises{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 32px;font-size:14px} .foot-promises li{display:flex;flex-direction:column;gap:2px;line-height:1.35} .foot-promises b{color:#fff;font-size:15px} .foot-act{display:flex;gap:10px;flex-wrap:wrap} .foot-act .btn-a{background:var(--red);color:#fff;font-weight:800;padding:12px 20px;font-size:14.5px} .foot-act .btn-a:hover{background:var(--red-d);color:#fff} .foot-act .btn-l{border:1px solid #6d7279;color:#fff;padding:12px 20px;font-weight:800;font-size:14.5px} .foot-act .btn-l:hover{background:#fff;color:var(--k)} .site-foot .fg{display:grid;gap:22px 24px;padding:26px 0 8px; grid-template-columns:1.7fr repeat(5,minmax(0,1fr))} .foot-brand{max-width:420px} .foot-mark{font-size:1.3rem;font-weight:800;color:#fff;margin:0 0 10px} .foot-mark span{color:var(--red)} .foot-brand p{font-size:14.5px;line-height:1.6;margin:0 0 10px} .foot-phone a{color:#fff;font-weight:700;border-bottom:2px solid var(--red);padding-bottom:2px} .site-foot h4{color:#fff;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px} .site-foot ul{list-style:none;margin:0;padding:0} .site-foot li{margin-bottom:8px} .site-foot .legal{border-top:1px solid rgba(255,255,255,.14);margin-top:18px;padding:14px 0 22px; font-size:12.5px;line-height:1.65;color:#8f949b} @media(max-width:1100px){ .site-head .hlink{display:none} .deptbar-kit{margin-left:0} .site-foot .fg{grid-template-columns:repeat(3,minmax(0,1fr))} .foot-brand{grid-column:1/-1;max-width:640px} } @media(max-width:820px){ .site-head .bar{flex-wrap:wrap;gap:12px} .hsearch{order:3;flex-basis:100%} .site-head .burger{display:inline-flex} .site-head .btn-a{display:none} .topbar span:nth-child(3){display:none} .site-foot .fg{grid-template-columns:repeat(2,minmax(0,1fr))} } /* the filter card printed two headings — the card's own summary and the widget's "Filter by price" — and the department list still carried the pastel dots from the skin this theme was ported from */ .twl-f-card>summary{font-weight:800;font-size:15px;color:var(--k);cursor:pointer; list-style:none;display:flex;align-items:center;justify-content:space-between;padding:2px 0 10px} .twl-f-card>summary::-webkit-details-marker{display:none} .twl-f-card>summary::after{content:"−";font-size:17px;font-weight:800} .twl-f-card:not([open])>summary::after{content:"+"} .twl-f-price .widgettitle{display:none} .twl-side-dot{display:none!important} .twl-side-card li a{gap:10px} .twl-side-card .bn-code{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--k3); background:transparent;padding:0;font-style:normal} .woocommerce .widget_price_filter .price_slider_amount .button{float:none;margin-right:12px} .woocommerce .widget_price_filter .price_slider_amount{display:flex;align-items:center;gap:12px; flex-wrap:wrap} /* the add-to-basket / pick-a-size button: ink, crimson on hover, like the product cards on the static side */ .woocommerce ul.products li.product .button.twl-pick{background:var(--k)!important;color:#fff!important; border-color:var(--k)!important} .woocommerce ul.products li.product .button.twl-pick:hover{background:var(--red)!important; border-color:var(--red)!important;color:#fff!important} /* the sidebar CTA was still the ported skin's indigo */ .twl-side-cta{background:var(--k);color:#fff;border:1px solid var(--k);padding:16px} .twl-side-cta-h{color:#fff;font-weight:800;font-size:15px;margin:0 0 8px} .twl-side-cta-b{color:#d7d9de;font-size:13.5px;line-height:1.5;margin:0 0 12px} .twl-side-btn{display:block;width:100%;text-align:center;background:var(--red);color:#fff!important; font-weight:800;font-size:14px;padding:11px 14px;text-decoration:none;border:0} .twl-side-btn:hover{background:var(--red-d)} .twl-side-tel{display:block;text-align:center;color:#fff;margin-top:10px;font-weight:700;font-size:14px} /* ── size and colour, as things you click ──────────────────────── Imran 2026-10-19: "image should change with colour selection and instead of drop downs why not make clickable attributes". The swatch is the supplier's own hex (10,751 of 12,095 colours carry one) and two-tone names are split down the diagonal the way the garment is. */ .twl-opts{display:flex;flex-direction:column;gap:16px;margin:0 0 18px;width:100%} /* flex:1 1 180px survived from the select version of this block, and in a COLUMN flex container that 180px is a height, not a width — which is why each option stood 180px tall with 120px of nothing under it. */ .twl-opts>.twl-opt{display:flex;flex-direction:column;gap:8px;margin:0;min-width:0;flex:0 0 auto} .twl-opt-h{margin:0;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; font-weight:700;color:var(--k3)} .twl-opt-h b{color:var(--k);letter-spacing:0;text-transform:none;font-size:14px;margin-left:8px} .twl-swatches{display:flex;flex-wrap:wrap;gap:8px} .twl-swatch{position:relative;width:38px;height:38px;padding:0;cursor:pointer; border:1px solid var(--line-soft);background:var(--wash);outline-offset:2px} .twl-swatch span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap} .twl-swatch:hover{border-color:var(--k)} .twl-swatch.is-on{border-color:var(--red);box-shadow:0 0 0 2px var(--red)} .twl-swatch:focus-visible{outline:2px solid var(--k)} .twl-sizes{display:flex;flex-wrap:wrap;gap:8px} .twl-size{display:inline-flex;align-items:baseline;gap:5px;min-width:52px;justify-content:center; padding:10px 12px;cursor:pointer;background:#fff;border:1px solid var(--k);color:var(--k); font:inherit;font-size:14px;font-weight:700} .twl-size i{font-style:normal;font-size:11px;font-weight:600;color:var(--k3)} .twl-size:hover{background:var(--wash)} .twl-size.is-on{background:var(--k);color:#fff;border-color:var(--k)} .twl-size.is-on i{color:#c9cbd0} .twl-sizes.needs-pick .twl-size{border-color:var(--red)} .twl-opt-note{margin:0;font-size:13px;color:var(--k3)} /* WooCommerce's own add-to-cart was still the stock purple */ .woocommerce div.product form.cart .button, .woocommerce div.product .single_add_to_cart_button{background:var(--red)!important;color:#fff!important; border:1px solid var(--red)!important;border-radius:0!important;font-weight:800!important; font-size:15.5px!important;padding:14px 26px!important;text-transform:none!important} .woocommerce div.product form.cart .button:hover, .woocommerce div.product .single_add_to_cart_button:hover{background:var(--red-d)!important; border-color:var(--red-d)!important} .woocommerce div.product form.cart div.quantity{margin-right:10px} .woocommerce div.product form.cart .quantity input.qty{border:1px solid var(--k);border-radius:0; padding:13px 8px;width:72px;font-weight:700;background:#fff;color:var(--k)} .woocommerce div.product form.cart{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start} .woocommerce div.product form.cart .twl-opts{flex:1 1 100%} /* the express-pay row Stripe injects, lined up rather than stacked at random */ .wc-stripe-payment-request-wrapper,.wcpay-payment-request-wrapper{margin-top:12px!important} .woocommerce div.product .product_meta{font-size:13px;color:var(--k3);border-top:1px solid var(--line-soft); padding-top:12px;margin-top:14px} /* the line under a department heading, which every category page lacked */ .twl-dept-intro{max-width:70ch;margin:0 0 16px;font-size:15.5px;line-height:1.6;color:var(--k2)} .twl-dept-intro b{color:var(--k);white-space:nowrap} .term-description,.woocommerce-products-header{margin-bottom:6px}