/*
Theme Name: Click IT Store
Theme URI: https://example.com/
Author: Click IT Store
Description: Holiday-style retail theme for WooCommerce. Bento homepage, product carousels, sticky header, dark-mode aware.
Version: 1.0.32
Requires at least: 6.0
Requires PHP: 7.4
WC requires at least: 8.0
License: GPLv2 or later
Text Domain: click-it-store
*/
:root{--blue:#2b6b8b;--blue-dark:#235e7c;--navy:#0f3a5c;--yel:#ffc220;--lb:#e8f2f7;--tx:#1a1a1a;--bg:#fff;--mut:#5c5c5c;--grn:#2a8703;--red:#de1c24;--card:#fff;--line:#e3e4e5;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tx:#f2f2f2;--bg:#121418;--mut:#a8adb5;--card:#1b1e24;--line:#2d3139;--lb:#1a2a44;--grn:#6fd24a;color-scheme:dark}}
:root[data-theme="dark"]{--tx:#f2f2f2;--bg:#121418;--mut:#a8adb5;--card:#1b1e24;--line:#2d3139;--lb:#1a2a44;--grn:#6fd24a;color-scheme:dark}
*{box-sizing:border-box}html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.35 "Bogle",Inter,"Segoe UI",Helvetica,Arial,sans-serif}
a{color:inherit}.w{max-width:1240px;margin:0 auto;padding:0 16px}
/* A soft sea-blue header rather than a vivid one: white copy on it measures
   about 5.5:1 and the page no longer glares at the edges. */
header{background:linear-gradient(180deg,#2e7192,#256385);color:#fff;padding:10px 0;position:sticky;top:env(safe-area-inset-top,0px);z-index:60}
header .w{display:flex;align-items:center;gap:14px}
.logo{display:flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;color:#fff;line-height:1}.logo svg{width:38px;height:38px;flex:none}.logo .wm{font-size:22px;font-weight:800;letter-spacing:-.4px}.logo .wm b{background:var(--yel);color:var(--navy);padding:1px 5px;border-radius:5px;margin-left:3px}.logo .wm small{display:block;font-size:11px;font-weight:600;letter-spacing:2.4px;margin-top:3px;opacity:.9}@media(max-width:520px){.logo .wm small{display:none}.logo .wm{font-size:18px}}
.loc{background:var(--navy);border-radius:30px;padding:6px 14px;font-size:11px;white-space:nowrap}.loc b{display:block;font-size:12px}
.search{flex:1;display:flex;background:#fff;border-radius:30px;overflow:hidden;min-width:0}
.search input{flex:1;border:0;padding:11px 16px;font-size:13px;min-width:0;outline:0}
.search button{border:0;background:var(--navy);color:#fff;width:34px;height:34px;border-radius:50%;margin:3px;cursor:pointer}
.hl{display:flex;gap:16px;font-size:11px;white-space:nowrap}.hl b{display:block;font-size:12px}
nav{background:var(--lb)}nav .w{display:flex;gap:18px;padding-top:9px;padding-bottom:9px;font-size:11px;overflow-x:auto;white-space:nowrap}
nav a{text-decoration:none}nav a:first-child,nav a:nth-child(2){font-weight:700}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:150px 150px 190px 130px;gap:14px;margin:14px auto;max-width:960px}
.t{border-radius:8px;padding:14px;position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;gap:6px}
.t h3{margin:0;font-size:16px;line-height:1.15}.t.big h3{font-size:36px}.t .s{font-size:10px;text-decoration:underline;margin-top:2px}
.pill{background:#fff;color:#000;border-radius:20px;padding:3px 12px;font-size:10px;font-weight:700;align-self:flex-start;text-decoration:none}
.em{position:absolute;right:8px;bottom:6px;font-size:64px;line-height:1}
.g1{background:#1d3b2b}.g2{background:#63c3bd;color:#0a2f6e;grid-row:span 2}.g3{background:linear-gradient(120deg,#5b3a22,#c9915b);grid-column:span 2;grid-row:span 2}
.g4{background:#dfe9f3;color:var(--navy)}.g5{background:#fff7a8;color:var(--navy)}.g6{background:#cfe8fb;color:var(--navy)}
.g7{background:#7a4b13}.g8{background:linear-gradient(#bfa98a,#5a4636);grid-row:span 2}.g9{background:#cde6a8;color:#173}.g10{background:var(--blue);grid-column:span 2}
.price{font-size:34px;font-weight:800}.price s{font-size:12px;font-weight:400;display:block}
.fd{background:var(--yel);color:#000;font-weight:800;font-size:12px;padding:6px 8px;border-radius:4px;align-self:flex-start;margin-top:auto}
h2{font-size:16px;margin:26px 0 10px;display:flex;justify-content:space-between;align-items:baseline}h2 a{font-size:11px;font-weight:400}
.row{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.p{flex:0 0 156px;position:relative;font-size:12px}
.p .im{height:130px;border-radius:8px;display:grid;place-items:center;font-size:62px;background:var(--lb)}
.p .hr{position:absolute;right:4px;top:4px;background:none;border:0;font-size:18px;cursor:pointer;color:var(--mut)}
.add{background:var(--blue);color:#fff;border:0;border-radius:20px;padding:6px 14px;font-weight:700;font-size:12px;margin:8px 0;cursor:pointer}.add.done{background:var(--grn)}
.pr{font-size:16px;font-weight:800}.pr.now{color:var(--grn)}.pr s{font-size:11px;font-weight:400;color:var(--mut);margin-left:4px}
.nm{margin:2px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sm{font-size:10px;color:var(--mut)}.sm b{color:var(--blue)}
.bn{border-radius:10px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0}
.bn h3{margin:0 0 6px;font-size:28px}.bn .em{position:static;font-size:80px}
.ban1{background:linear-gradient(90deg,#1a4a33,#2c6b4d);color:#fff}
.mos{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:150px 150px;gap:14px}
.mos .t:first-child{grid-row:span 2;background:#8c1318;font-size:32px}.mos .t:first-child h3{font-size:34px}
.mos .a{background:#b3202a}.mos .b{background:#c7d8c0;color:var(--navy)}.mos .c{background:#ece6d2;color:var(--navy)}.mos .d{background:#4f2a1c;grid-row:span 2;grid-column:3;grid-row:1 / span 2}
.glp{background:var(--lb);text-align:center;padding:22px;border-radius:10px;color:var(--navy);margin:16px 0}.glp h3{margin:0;font-size:22px}
.dept{display:flex;gap:18px;overflow-x:auto}.dept div{flex:0 0 74px;text-align:center;font-size:11px}.dept span{display:grid;place-items:center;height:62px;border-radius:8px;background:#aedbf8;font-size:30px;margin-bottom:4px}
.flu{background:var(--blue);color:#fff;text-align:center;padding:26px;border-radius:4px;margin:16px 0}.flu h3{margin:0 0 6px;font-size:20px}.flu a{font-size:12px}
.two{display:grid;grid-template-columns:1fr 1.3fr;gap:18px;align-items:start}
.sv{background:var(--yel);color:#000;min-height:260px}.sv h3{font-size:44px}
.cl{background:#cfe3f4;color:var(--navy);min-height:150px}
.soc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.soc .t{height:230px;justify-content:flex-end}
.soc .tag{background:#000;color:#fff;font-size:10px;padding:6px 10px;border-radius:4px;position:absolute;top:45%;left:30%}
.fb{background:var(--lb);text-align:center;padding:20px;margin-top:30px;font-size:12px}.fb button{margin-top:8px;background:var(--card);color:var(--tx);border:1px solid var(--tx);border-radius:20px;padding:6px 18px;font-weight:700;cursor:pointer}
footer{background:var(--navy);color:#fff;padding:26px 0;font-size:11px}
footer .cols{display:grid;grid-template-columns:repeat(4,1fr) 1.6fr;gap:20px}footer h4{margin:0 0 10px;font-size:12px}footer a{display:block;margin-bottom:9px;text-decoration:none}
.sub{background:#fff;color:#222;border-radius:8px;padding:16px}.sub input{width:100%;padding:9px;border:1px solid #999;border-radius:4px;margin:6px 0}.sub button{background:var(--blue);color:#fff;border:0;border-radius:20px;padding:8px 20px;font-weight:700}
.legal{margin-top:22px;opacity:.8;display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:860px){.hl{display:none}.loc{display:none}.bento{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:150px}.g3,.g10{grid-column:span 2}.two,.mos{grid-template-columns:1fr}.mos{grid-template-rows:none}.mos .d,.mos .t:first-child{grid-row:auto;grid-column:auto;min-height:180px}footer .cols{grid-template-columns:1fr 1fr}.soc{grid-template-columns:1fr}.t.big h3{font-size:26px}.bn{flex-direction:column;align-items:flex-start}}

/* ---- WordPress / WooCommerce additions ---- */
.admin-bar header{top:32px}
@media(max-width:782px){.admin-bar header{top:46px}}
.logo img{max-height:40px;width:auto}
.hl a{color:#fff;text-decoration:none}
@media(max-width:860px){.hl{display:flex}.hl .hm{display:none}}
nav .cit-menu{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav .cit-menu a{font-weight:400}
nav .cit-menu li:nth-child(-n+2) a{font-weight:700}
.p .im{overflow:hidden;text-decoration:none}
.p .im img{width:100%;height:100%;object-fit:cover;border-radius:8px}
a.add{display:inline-block;text-decoration:none}
.p .nm a{text-decoration:none;color:inherit}
.p .added_to_cart{display:block;font-size:11px;color:var(--blue)}
.pr del{font-size:11px;font-weight:400;color:var(--mut);margin-right:4px}
.pr ins{text-decoration:none}
.dept a{flex:0 0 74px;text-align:center;font-size:11px;text-decoration:none;color:inherit}
.dept a span{display:grid;place-items:center;height:62px;border-radius:8px;background:#aedbf8;font-size:30px;margin-bottom:4px;overflow:hidden}
.dept a span img{width:100%;height:100%;object-fit:cover}
.cit-page,.cit-woo{padding-top:24px;padding-bottom:40px;min-height:50vh}
.cit-woo ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;list-style:none;padding:0;margin:0 0 24px}
.cit-woo ul.products::before,.cit-woo ul.products::after{display:none}
.woocommerce ul.products li.product{width:auto;float:none;margin:0}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--blue);color:#fff;border-radius:20px;font-weight:700;padding:10px 18px}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--blue-dark);color:#fff}
.woocommerce span.onsale{background:var(--red);border-radius:4px;min-height:0;min-width:0;line-height:1.6;padding:2px 8px}
.woocommerce ul.products li.product .price,.woocommerce div.product p.price{color:var(--grn);font-weight:800}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--lb)}

/* ------------------------------------------------------------------
   Afterpay strip: the very top of every page. Black ground, with the
   copy and the information mark in Afterpay's mint (#b2fce4) so the
   strip reads as theirs; the mark itself sits on its own mint capsule.
   ------------------------------------------------------------------ */
.apbar{background:#000;color:#b2fce4}
.apbar__inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;text-align:center}
.apbar__message{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:15px;font-weight:600;line-height:1.35;letter-spacing:.005em}
.apbar__logo{display:block;width:104px;height:auto;border-radius:4px}
.apbar__info{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;color:#b2fce4;font-size:16px;line-height:1;cursor:pointer}
.apbar__info:hover{background:rgba(178,252,228,.18);color:#fff}
.apbar__info:focus-visible{outline:2px solid #b2fce4;outline-offset:2px}

.apmodal{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)}
.apmodal[hidden]{display:none}
.apmodal__scrim{position:absolute;inset:0;background:rgba(10,14,18,.62)}
.apmodal__panel{position:relative;max-width:min(720px,100%);max-height:88vh;overflow:auto;background:#fff;border-radius:16px;padding:12px;box-shadow:0 30px 70px -24px rgba(0,0,0,.5)}
.apmodal__image{display:block;width:100%;height:auto;border-radius:10px}
.apmodal__close{position:absolute;top:18px;right:18px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#111;font-size:16px;line-height:1;cursor:pointer;box-shadow:0 2px 10px -4px rgba(0,0,0,.4)}
.apmodal__close:hover{background:#fff}
.apmodal__close:focus-visible{outline:2px solid #001e60;outline-offset:2px}
.apmodal__terms{margin:12px 2px 2px;text-align:center;font-size:12px}
.apmodal__terms a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:2px}
body.ap-modal-open{overflow:hidden}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------------------------------------------------------
   Bright, calm surface: a soft daylight ground, and the heavy seasonal
   blocks lifted to pale tints. Text stays dark on the light tiles, so
   contrast holds and nothing on the page changes meaning.
   ------------------------------------------------------------------ */
:root{--bg:#f6f9fc;--line:#e4eaf1}
body{background:var(--bg)}
.g1{background:#e9f4ee;color:#123b29}
.g3{background:linear-gradient(120deg,#fdf7ec,#f3e6d3);color:#33291b}
.g7{background:#eef3e6;color:#2b3a1c}
.g8{background:#f4efe9;color:#2d2822}
.mos .t:first-child{background:#fdeef0;color:#5a1a1f}
.mos .a{background:#fbe7ea;color:#5a1a1f}
.mos .d{background:#f2ece5;color:#4a3527}
.ban1{background:linear-gradient(90deg,#e8f3ee,#dceee5);color:#173d2c}
.soc .t{background:#f4f1ec!important;color:#2a2620}
.soc .tag{background:#001e60}
.soc .tag{text-decoration:none}

/* ------------------------------------------------------------------
   Readability: prices and stock labels need AA contrast on the pale
   ground; hints and placeholders were too light to read comfortably.
   ------------------------------------------------------------------ */
.woocommerce .stock.in-stock,.woocommerce p.stock.in-stock{color:var(--grn)!important}
.cai-hint{color:#5a6472!important}
.cai-hint a{color:#0049b8!important}
input::placeholder,textarea::placeholder{color:#5a6472;opacity:1}

/* ------------------------------------------------------------------
   Shop / category product cards. WooCommerce's own columns rules were
   shrinking every card to 30.75% of its grid cell; the card now fills
   the cell, the whole product image fits inside a fixed frame (no
   cropping), and title, price and button line up.
   ------------------------------------------------------------------ */
.cit-woo ul.products{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;align-items:stretch;margin:0 0 24px}
.cit-woo ul.products li.product{width:100%!important;float:none!important;margin:0!important;position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;min-width:0;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.cit-woo ul.products li.product > a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;width:100%!important;text-decoration:none;color:inherit}
.cit-woo ul.products li.product img{width:100%!important;height:180px!important;object-fit:contain!important;background:#fff;border-radius:8px;padding:4px;margin:0 0 10px!important}
.cit-woo ul.products li.product .woocommerce-loop-product__title,.cit-woo ul.products li.product h2{display:-webkit-box!important;font-size:14px!important;line-height:1.35!important;font-weight:600!important;margin:0!important;padding:0!important;min-height:3.8em;max-height:3.8em;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;justify-content:flex-start!important}
.cit-woo ul.products li.product .price{display:block!important;font-size:15px!important;line-height:1.3!important;margin:8px 0 0!important;color:var(--grn)!important;font-weight:800}
.cit-woo ul.products li.product .price del{font-size:12px;font-weight:400;color:var(--mut)}
.cit-woo ul.products li.product .button{margin:10px 0 0!important;width:100%;padding:9px 12px!important;font-size:13px!important;line-height:1.2!important;text-align:center;border-radius:20px!important;white-space:normal}
.cit-woo ul.products li.product .added_to_cart{display:block;margin-top:6px;font-size:12px;text-align:center;color:var(--blue)}
.cit-woo ul.products li.product .onsale{position:absolute;left:8px;top:8px;z-index:1;margin:0;font-size:10px;line-height:1.4;padding:2px 7px}

/* Homepage rails and department tiles: show the whole product, never crop. */
.p .im{background:#fff;border:1px solid var(--line)}
.p .im img{object-fit:contain!important;padding:6px;background:#fff}
.dept a span img{object-fit:contain!important;background:#fff;padding:4px}

@media (max-width:640px){
  .cit-woo ul.products{grid-template-columns:repeat(2,1fr)!important;gap:12px}
  .cit-woo ul.products li.product{padding:10px}
  .cit-woo ul.products li.product img{height:130px!important}
  .cit-woo ul.products li.product .woocommerce-loop-product__title,.cit-woo ul.products li.product h2{font-size:13px!important;min-height:3.9em;max-height:3.9em}
  .cit-woo ul.products li.product .price{font-size:14px!important}
  .cit-woo ul.products li.product .button{font-size:12px!important;padding:8px 10px!important}
}

/* ------------------------------------------------------------------
   Checkout payment choice. Card is hidden; Afterpay and the Stripe
   card gateway remain. The logo sits on the same right-hand line as
   the card badges did, centred on its row rather than floating high.
   ------------------------------------------------------------------ */
body.cit-hide-card .wc_payment_method.payment_method_woocommerce_payments{display:none!important}
#payment .wc_payment_method{display:grid!important;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;padding:10px 12px;border-radius:8px}
#payment .wc_payment_method > input{margin:0!important;grid-column:1;grid-row:1}
#payment .wc_payment_method > label{grid-column:2;grid-row:1;display:flex!important;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:0!important;font-weight:600;width:100%}
#payment .wc_payment_method > label img{float:none!important;position:static!important;margin:0!important;display:block!important;max-height:24px;width:auto;order:2}
#payment .wc_payment_method > .payment_box{grid-column:1/-1;grid-row:2;width:100%;margin-top:8px}
#payment body.cit-hide-card .wc_payment_method.payment_method_woocommerce_payments{display:none!important}
body.cit-hide-card #payment .wc_payment_method.payment_method_woocommerce_payments{display:none!important}
.g2{background:#d9f2f2;color:#0a2f6e}
.g9{color:#0f3d1f}

/* ------------------------------------------------------------------
   Remaining readability fixes: pagination, cart controls, tax notes
   and the small print under the card gateway.
   ------------------------------------------------------------------ */
.page-numbers.current{background:#e9e6ed!important;color:#241a38!important}
.woocommerce button[name="update_cart"]{background:var(--blue)!important;color:#fff!important}
.woocommerce button[name="update_cart"]:hover{background:#001e60!important;color:#fff!important}
.woocommerce small.includes_tax{color:#5a6472!important}
.clickit-stripe-secure,.clickit-stripe-field__secure{color:#5a6472!important}

/* ------------------------------------------------------------------
   Nothing in the chrome or cards sits below 12px any more.
   ------------------------------------------------------------------ */
nav .w,nav .cit-menu{font-size:12px}
footer{font-size:12px}
.loc{font-size:12px}
.loc b{font-size:12px}
.hl{font-size:12px}
.hl b{font-size:12px}
.t .s{font-size:12px}
.pill{font-size:12px}
h2 a{font-size:12px}
.p{font-size:13px}
.p .sm{font-size:12px}
.dept div,.dept a{font-size:12px}
.soc .tag{font-size:12px}
.p .added_to_cart{font-size:12px}
.pr del{font-size:12px}
small.woocommerce-price-suffix{font-size:12px!important}
.woocommerce .onsale,.cit-woo ul.products li.product .onsale{font-size:11px}

/* ------------------------------------------------------------------
   Homepage mosaic: three straight columns, edge to edge with the rest
   of the page. Each column is its own stack, so every card lines up
   with its neighbour instead of leaving gaps where a span was.
   ------------------------------------------------------------------ */
.bento{display:grid;grid-template-columns:1fr 2.1fr 1fr;grid-template-rows:none;grid-auto-rows:1fr;gap:14px;margin:14px 0;max-width:none;height:clamp(600px,54vw,760px)}
.bcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.bcol>.t{flex:1 1 0;min-height:0}
.bcol:nth-child(1)>.t:nth-child(1){flex:1.15 1 0}
.bcol:nth-child(1)>.t:nth-child(2){flex:1.75 1 0}
.bcol:nth-child(1)>.t:nth-child(3){flex:1 1 0}
.bcol:nth-child(2)>.t:nth-child(1){flex:2.2 1 0}
.bcol:nth-child(2)>.brow{flex:1.45 1 0;min-height:0}
.bcol:nth-child(2)>.t:last-child{flex:0.85 1 0}
.bcol:nth-child(3)>.t:nth-child(1){flex:1.15 1 0}
.bcol:nth-child(3)>.t:nth-child(2){flex:1.3 1 0}
.bcol:nth-child(3)>.t:nth-child(3){flex:1.7 1 0}
.brow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.brow .t{min-height:0;grid-row:auto!important;grid-column:auto!important}
.bcol .t h3{font-size:18px}
.bcol .t.big h3{font-size:42px;line-height:1.05;max-width:58%}
.two{min-width:0}
.two>*{min-width:0}
.bcol .t .em{right:10px;bottom:8px}
@media(max-width:860px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;height:auto}
  .bcol>.t,.bcol:nth-child(n)>.t:nth-child(n){flex:none;min-height:180px}
  .bcol:nth-child(2)>.t:first-child{min-height:260px}
  .bcol .t.big h3{font-size:28px;max-width:100%}
  .brow{grid-template-columns:1fr;flex:none}
  .brow .t{min-height:170px}
}

/* Shop by department: thirteen cards that stretch to fill the row and
   stay on one straight line. */
.dept{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:10px;overflow:visible}
.dept a{flex:none;min-width:0;font-size:12px;line-height:1.2}
.dept a span{height:74px;font-size:30px}
@media(max-width:1100px){.dept{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(max-width:860px){.dept{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:520px){.dept{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ------------------------------------------------------------------
   Checkout: card brand marks at the end of the card gateway's label,
   and a larger Afterpay badge.
   ------------------------------------------------------------------ */
#payment .wc_payment_method > label .cit-card-logos{display:inline-flex;align-items:center;gap:6px;order:2;margin-left:auto}
#payment .wc_payment_method > label .cit-card-logos img{max-height:26px;width:auto;display:block}
#payment .payment_methods li label img[alt="Afterpay"][src*="afterpay"]{height:32px!important;max-height:32px!important;min-width:158px;width:auto!important}

/* ------------------------------------------------------------------
   Homepage tiles carry the shop's own product photography. The shot is
   kept whole (contain, never cropped) on a small white tile so it reads
   cleanly on each card's tint.
   ------------------------------------------------------------------ */
.t .cardimg{position:absolute;right:10px;bottom:10px;width:52%;height:62%;object-fit:contain;object-position:right bottom;background:transparent;border-radius:10px;padding:0;box-shadow:none;mix-blend-mode:multiply}
.t.big .cardimg{width:46%;height:80%;right:24px;bottom:12px}
.t.big .em{font-size:150px}
.mos .t .cardimg{width:44%;height:52%}
.soc .t .cardimg{width:58%;height:52%;right:8px;bottom:8px}
@media(max-width:860px){
  .t .cardimg{width:50%;height:58%}
  .t.big .cardimg{height:62%}
}

/* ------------------------------------------------------------------
   Landing-page product cards: the picture area is the card's own pale
   tint, never a white panel. The supplier's white studio background is
   blended into that tint, so a photo sits on one flat colour instead of
   reading as a white box dropped onto the page.
   ------------------------------------------------------------------ */
.p{flex:0 0 164px;background:var(--lb);border:1px solid #d3e5f8;border-radius:12px;padding:10px 10px 12px;display:flex;flex-direction:column;min-width:0}
.p .im{height:132px;border:0;border-radius:8px;background:transparent;padding:0}
.p .im img{background:transparent;mix-blend-mode:multiply;border-radius:8px}
.p .add{align-self:flex-start}
.p .nm{min-height:2.75em}
.p .nm a{color:var(--tx)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .p{background:var(--card);border-color:var(--line)}
  :root:not([data-theme="light"]) .p .im img{mix-blend-mode:normal}
}
:root[data-theme="dark"] .p{background:var(--card);border-color:var(--line)}
:root[data-theme="dark"] .p .im img{mix-blend-mode:normal}

/* The homepage mosaic's implicit last row was collapsing to the height of
   its text, which shrank the tile's product shot to a speck. */
.mos{grid-auto-rows:150px}
.mos .t .cardimg{min-width:64px;min-height:56px}

/* ------------------------------------------------------------------
   "Buying for a business or school?" band. Deep navy ground, white
   heading and a light body line that clears AA, with the store's yellow
   for the single action so the block reads as a call to action rather
   than another pale tile.
   ------------------------------------------------------------------ */
.glp{background:linear-gradient(115deg,#123f5e,#1b5574);color:#fff;text-align:center;padding:34px 24px;border-radius:14px;margin:22px 0;border:0}
.glp h3{margin:0 0 8px;font-size:clamp(20px,2.2vw,26px);line-height:1.2;color:#fff;letter-spacing:-.2px}
.glp p{margin:0 auto 18px!important;max-width:56ch;font-size:15px;line-height:1.55;color:#e4ecfb}
.glp a{display:inline-block;background:var(--yel);color:#001e60;font-weight:800;font-size:14px;text-decoration:none;padding:11px 26px;border-radius:999px}
.glp a:hover{background:#ffd75a;color:#001e60}
.glp a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ------------------------------------------------------------------
   The Afterpay strip: a soft mint wash with a warm cream edge at the
   left, deep navy copy and a hairline under it, instead of a solid
   black band. The mark keeps its own mint capsule, so it still reads
   as Afterpay's badge rather than melting into the wash.
   ------------------------------------------------------------------ */
.apbar{
  background:linear-gradient(95deg,#fff8e7 0%,#eafff7 48%,#c9fdee 100%);
  color:#001e60;
  border-bottom:1px solid rgba(0,30,96,.12);
  box-shadow:inset 0 1px 0 #fff;
}
.apbar__message{font-weight:600;color:#001e60}
.apbar__logo{
  border-radius:6px;
  box-shadow:0 0 0 1px rgba(0,30,96,.16),0 1px 3px rgba(0,30,96,.12);
}
.apbar__info{color:#001e60}
.apbar__info:hover{background:rgba(0,30,96,.10);color:#001e60}
.apbar__info:focus-visible{outline:2px solid #001e60;outline-offset:2px}

/* Mobile mosaic: the two-column span rules from the older grid were still
   forcing implicit columns inside the single-column stack, so cards
   overlapped each other. Each tile is placed by its column on phones. */
@media(max-width:860px){
  .bento .t,
  .bento .brow .t{grid-column:auto!important;grid-row:auto!important;min-height:180px}
  .bento .bcol{flex-direction:column}
}

/* Phones: the mosaic is simply a stack of cards. The grid and the flex
   column were both still sizing tiles against desktop rows, which let
   one card sit on top of the next. */
@media(max-width:860px){
  .bento{display:block;height:auto}
  .bento .bcol{display:block}
  .bento .brow{display:block;margin-bottom:14px}
  .bento .t,
  .bento .brow .t{flex:none!important;min-height:180px;margin-bottom:14px;grid-column:auto!important;grid-row:auto!important}
  .bento .bcol:last-child>.t:last-child{margin-bottom:0}
}

/* ------------------------------------------------------------------
   Product page: the AI assistant's small print, its "how it works"
   numbers and the ask/search placeholders were below AA on white.
   They keep their size and meaning, only the ink is darkened.
   ------------------------------------------------------------------ */
.cai-empty__title{color:#4b5563!important}
.cai-empty__step .cai-empty__n{color:#001e60!important;background:#ffc220!important}
.cai-empty__step span{color:#4b5563!important}
.cai-note,.cai-hint{color:#5a6472!important}
.cai-search input::placeholder,
.cai input::placeholder,
.cai textarea::placeholder,
input::placeholder,
textarea::placeholder{color:#5a6472!important;opacity:1}

/* "Shop by department" chips: one pale tint for every chip, with the
   product shot blended into it, so a photo tile no longer shows as a
   white square next to an emoji tile. */
.dept a span{background:#dcecfb}
.dept a span img{background:transparent!important;mix-blend-mode:multiply}

/* ------------------------------------------------------------------
   Header account controls: the sign-in block and the cart were the
   smallest text in the header. Both are now proper chips - a larger
   trolley, a bold basket total and a two-line account link - with a
   hover/focus state so they read as tappable.
   ------------------------------------------------------------------ */
.hl{display:flex;align-items:center;gap:10px}
.hl a{color:#fff;text-decoration:none;border-radius:10px;transition:background .18s var(--hp-ease,ease)}
.hl a:hover{background:rgba(255,255,255,.16)}
.hl a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hl .hm{display:flex;flex-direction:column;justify-content:center;line-height:1.12;font-size:12px;font-weight:600;padding:7px 11px}
.hl .hm b{display:block;font-size:15px;font-weight:800;letter-spacing:-.1px}
.cit-cart{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26)}
.cit-cart:hover{background:rgba(255,255,255,.27)}
.cit-cart__icon{font-size:22px;line-height:1;display:block}
.cit-cart b{font-size:15px;font-weight:800;letter-spacing:-.1px;display:block}
@media(max-width:520px){
  .hl{gap:6px}
  .cit-cart{padding:6px 11px 6px 9px;gap:7px}
  .cit-cart__icon{font-size:20px}
  .cit-cart b{font-size:14px}
}

/* The cart mark is drawn rather than an emoji, so it is the same size on
   every platform and can grow with the button. */
.cit-cart__icon svg{display:block;width:22px;height:22px}
.hl .hm{font-size:13px}

/* Phones: the account block stays hidden, as before, so the search field
   keeps its room; the cart chip alone fills the corner. */
@media(max-width:860px){
  .hl .hm{display:none}
}

/* The main menu travels with the page: it sticks directly beneath the
   sticky header instead of scrolling away with the first screen. */
nav{position:sticky;top:var(--cit-menu-top,60px);z-index:59}
nav .w{padding-top:9px;padding-bottom:9px}

/* ------------------------------------------------------------------
   Product page: the assistant panel's headings and specification
   labels were the same weight as body copy. They are now bold navy
   headings with darker labels, so the specs read as a table of facts.
   ------------------------------------------------------------------ */
.cai-panel{background:var(--card)!important;border-color:var(--line)!important;color:var(--tx)!important}
.cai-panel__title{font-size:19px!important;font-weight:800!important;color:var(--tx)!important;letter-spacing:-.1px;line-height:1.3}
.cai-panel__note{color:var(--mut)!important;font-size:13px!important;line-height:1.55}
.cai-panel>p:not(.cai-panel__note){font-size:15px;line-height:1.65;color:var(--tx)}
.cai-specs dt{color:var(--mut)!important;font-weight:700;font-size:14.5px}
.cai-specs dd{font-weight:700!important;color:var(--tx)!important;font-size:14.5px}
.cai-specs__row{padding-bottom:8px;border-bottom-color:var(--line)}
.cai-ask__answer,.cai-faq__item p,.cai-faq__item summary,.cai-bundle,.cai-rail__title{color:var(--tx)!important}
.cai-ask__answer{background:var(--lb)!important}

/* The description and the specification tables are the product's own
   reference material, so they get their own surface and a size that reads at
   arm's length. Colours come from the theme's tokens, so light mode is dark
   ink on white and dark mode is light ink on charcoal - never dark on dark. */
.woocommerce-Tabs-panel{
  background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;font-size:15px;line-height:1.7
}
.woocommerce-product-details__short-description{color:var(--tx);font-size:15px;line-height:1.7}
.woocommerce-product-details__short-description p,
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li{font-size:15px;line-height:1.7;color:var(--tx)}
.woocommerce-product-details__short-description p:first-child,
.woocommerce-Tabs-panel p:first-child{margin-top:0}
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4,
.woocommerce-tabs h2{font-weight:800;color:var(--tx);line-height:1.3}
.woocommerce-Tabs-panel h4{font-size:16px}
.woocommerce-Tabs-panel table th,
.woocommerce-Tabs-panel table td{font-size:14.5px;line-height:1.55;color:var(--tx);background:transparent}
.woocommerce-Tabs-panel table th{font-weight:700}
.woocommerce-product-details__short-description strong,
.woocommerce-Tabs-panel strong{font-weight:700;color:var(--tx)}

/* "Not sure which one?" / "Shop with AI" band: the plugin's fixed cream
   surface and inherited ink made it a pale card with pale text in dark mode.
   It now uses the shop's own surface and ink. */
.cai-archive-cta{background:var(--lb)!important;border:1px solid var(--line)!important;color:var(--tx)!important}
.cai-archive-cta p{color:var(--tx)!important;font-size:15px!important;line-height:1.6!important;max-width:70ch}
.cai-archive-cta .hp-eyebrow{color:var(--blue-dark)!important;font-weight:800!important;letter-spacing:.06em}
.cai-archive-cta h2{color:var(--tx)!important;font-size:22px!important;font-weight:800!important;line-height:1.25;margin:4px 0 6px}
.cai-archive-cta .cai-open{background:var(--blue)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:12px 22px!important;font-size:14px!important;font-weight:800!important;white-space:nowrap}
.cai-archive-cta .cai-open:hover{background:var(--blue-dark)!important}