/*
Theme Name: Keystone Discounts
Theme URI: https://keystonediscounts.com
Author: Keystone Discounts
Description: Dark retail storefront for Keystone Discounts. Below retail, every day.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
Text Domain: keystone
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');

*{box-sizing:border-box}

:root{
  /* KS_RETAIL_V2 - white retail palette (2026-07-12).
     0 of 8 major retailers use a dark canvas. Checked walmart, bestbuy, staples,
     officedepot, amazon, target, newegg, overstock - all #FFFFFF.
     Colour roles are load-bearing:
       RED   = sale price / savings.  Never anything else.
       GREEN = shipping / stock.      Never a price.
       BLUE  = brand / CTA / links. */
  --bg:#FFFFFF; --surface:#FFFFFF; --card:#FFFFFF; --sunken:#F4F5F7; --band:#F7F8FA;
  --hdr:#0B2C5C; --hdr2:#0A2551;
  --line:#E3E6EA; --line2:#D4D9DF; --line3:#C3CAD2;
  --text:#111418; --text2:#3D4552; --text3:#5B6572; --muted:#6E7784; --muted2:#8A929D;
  --blue:#0B5FCC; --blue-hi:#0A54B5; --blue-lt:#0B5FCC; --blue-soft:#EAF2FF;
  --red:#CC0000; --red-hi:#B30000; --red-soft:#FDECEC;
  --green:#2E8B00; --green-soft:#EDF7E8;
  --amber:#B45309; --amber-soft:#FEF3E2;
  --orange:#CC0000; --orange-lt:#CC0000; --orange-h:#B30000;
  --purple:#0B5FCC; --purple-lt:#0B5FCC;
  --shadow:0 1px 2px rgba(16,24,40,.05);
  --shadow-hi:0 8px 24px rgba(16,24,40,.12);
}

html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-lt)}
img{max-width:100%;height:auto;display:block}

.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 32px}

/* ============ HEADER ============ */
.ks-hdr{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.ks-hrow{display:flex;align-items:center;gap:28px;padding:14px 0}
.ks-logo{display:flex;align-items:center;gap:10px}
.ks-kd{
  width:36px;height:36px;border-radius:8px;background:var(--blue);color:#0E1116;
  font-weight:900;font-size:15px;letter-spacing:.5px;display:grid;place-items:center;flex:none;
}
.ks-wm1{font-weight:800;font-size:16.5px;letter-spacing:-.2px;line-height:1.1;color:var(--text);white-space:nowrap}
.ks-wm2{font-size:10.5px;font-weight:600;letter-spacing:1.6px;color:var(--muted);text-transform:uppercase;line-height:1.2}

.ks-srch{flex:1;display:flex;height:42px;background:var(--sunken);border:1px solid var(--line2);border-radius:9px;overflow:hidden;max-width:560px}
.ks-srch input{flex:1;background:none;border:0;outline:none;color:var(--text);padding:0 16px;font-family:inherit;font-size:14px}
.ks-srch input::placeholder{color:var(--muted2)}
.ks-sbtn{width:54px;background:var(--blue);border:0;color:#0E1116;display:grid;place-items:center;cursor:pointer}
.ks-sbtn:hover{background:var(--blue-hi)}

.ks-hbt{display:flex;align-items:center;gap:8px;color:var(--text2);font-size:13px;font-weight:600;white-space:nowrap}
.ks-hbt:hover{color:#fff}
.ks-cartn{background:var(--orange);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px;font-weight:700}

.ks-nav{display:flex;gap:2px;border-top:1px solid #22262C;overflow-x:auto}
.ks-nvl{padding:11px 13px;font-size:13px;font-weight:600;color:#B9C0CB;white-space:nowrap;border-bottom:2px solid transparent}
.ks-nvl:hover{color:#fff}
.ks-nvl.on{color:#fff;border-bottom-color:var(--blue)}
.ks-nvdeal{color:var(--orange-lt)!important}
.ks-nvdeal:hover{color:var(--orange-h)!important}

/* ============ HERO ============ */
.ks-hero{display:grid;grid-template-columns:1fr 540px;gap:44px;padding:46px 0 42px;align-items:center}
.ks-h1{font-size:42px;line-height:1.08;font-weight:800;letter-spacing:-1.2px;margin:0;color:var(--text)}
.ks-hsub{color:var(--text3);font-size:15.5px;line-height:1.6;margin:14px 0 0;max-width:440px}
.ks-hvp{display:flex;gap:20px;margin-top:22px;flex-wrap:wrap}
.ks-vpi{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text2)}
.ks-vpi svg{color:var(--blue);flex:none}
.ks-hbtns{display:flex;gap:12px;margin-top:26px}

.ks-hcard{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:var(--card)}
.ks-hcard-img{position:relative;height:400px;min-height:400px;max-height:400px;background:#FAFAFA;overflow:hidden !important}
.ks-hcard-img img{position:absolute !important;inset:24px !important;width:calc(100% - 48px) !important;height:calc(100% - 48px) !important;max-width:none !important;max-height:none !important;object-fit:contain !important;display:block !important}
.ks-hplate{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(14,16,20,.94) 45%);
  padding:56px 20px 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
}
.ks-hpn{font-size:15px;font-weight:700;margin:7px 0 6px;color:var(--text)}

/* ============ BUTTONS ============ */
.ks-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--blue);color:#0E1116!important;font-weight:700;font-size:14.5px;
  padding:12px 22px;border-radius:9px;border:0;cursor:pointer;font-family:inherit;
}
.ks-cta:hover{background:var(--blue-hi);color:#0E1116!important}
.ks-cta2{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:none;border:1px solid var(--line3);color:var(--text)!important;
  font-weight:600;font-size:14.5px;padding:12px 20px;border-radius:9px;cursor:pointer;font-family:inherit;
}
.ks-cta2:hover{border-color:var(--blue);color:#fff!important}

/* ============ SECTIONS ============ */
.ks-sec{padding:38px 0 8px}
.ks-shd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.ks-st{font-size:22px;font-weight:800;letter-spacing:-.4px;margin:0;color:var(--text)}
.ks-kick{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--orange-lt);display:block;margin-bottom:6px}
.ks-seeall{font-size:13px;font-weight:600;color:var(--blue)}

/* ============ DEPARTMENT TILES ============ */
.ks-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ks-tile{
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s;
}
.ks-tile:hover{border-color:#3A414D;transform:translateY(-2px)}
.ks-tslot{position:relative;height:120px;min-height:120px;max-height:120px;flex:0 0 120px;border-radius:7px;overflow:hidden !important;background:#FAFAFA}
.ks-tslot img{position:absolute !important;inset:8px !important;width:calc(100% - 16px) !important;height:calc(100% - 16px) !important;max-width:none !important;max-height:none !important;object-fit:contain !important;display:block !important}
.ks-tname{font-size:14px;font-weight:700;color:var(--text)}
.ks-tcount{font-size:12px;color:var(--muted);font-weight:500}

/* ============ PRODUCT GRID ============ */
.ks-dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ks-pc{
  background:var(--card);border:1px solid var(--line);border-radius:11px;overflow:hidden;
  transition:border-color .15s,transform .15s;position:relative;display:flex;flex-direction:column;
}
.ks-pc:hover{border-color:#3A414D;transform:translateY(-2px)}
.ks-pimg{position:relative;height:185px;min-height:185px;max-height:185px;flex:0 0 185px;background:#FAFAFA;overflow:hidden !important}
.ks-pimg img{position:absolute !important;inset:10px !important;width:calc(100% - 20px) !important;height:calc(100% - 20px) !important;max-width:none !important;max-height:none !important;object-fit:contain !important;display:block !important}
.ks-pcb{padding:13px 14px 15px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;flex:1;min-width:0;background:var(--card);position:relative;z-index:2}
.ks-pnm{font-size:13.5px;font-weight:600;line-height:1.35;color:#DDE1E7;margin:0}
.ks-prow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto}
.ks-pr{font-size:24px;font-weight:800;letter-spacing:-.5px;color:var(--text)}
.ks-msrp{color:#77808E;text-decoration:line-through;font-size:13.5px;font-weight:500}

.ks-svchip{
  background:rgba(24,17,15,.72);color:var(--orange-lt);padding:3px 8px;border-radius:6px;
  font-size:11.5px;font-weight:700;position:absolute;top:10px;left:10px;z-index:2;backdrop-filter:blur(4px);
}
.ks-svin{background:rgba(240,96,60,.16);color:var(--orange-lt);padding:2px 7px;border-radius:5px;font-size:11.5px;font-weight:700}

/* ============ BADGES ============ */
.ks-bdg{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:5px;display:inline-block}
.ks-bdg-new{background:rgba(75,163,227,.14);color:var(--blue-lt)}
.ks-bdg-ob{background:rgba(255,138,76,.15);color:var(--orange-h)}
.ks-bdg-ug{background:rgba(154,163,178,.14);color:#AEB6C2}

/* ============ STOCK ============ */
.ks-instk{color:var(--green);font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.ks-lowstk{color:var(--orange-h);font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.ks-dot{width:6px;height:6px;border-radius:99px;background:var(--green)}
.ks-dotw{width:6px;height:6px;border-radius:99px;background:var(--orange-h)}

/* ============ TRUST ============ */
.ks-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:30px 0;border-top:1px solid #22262C;margin-top:34px}
.ks-titem{display:flex;gap:12px;align-items:flex-start}
.ks-tico{width:38px;height:38px;border-radius:9px;background:#22262E;display:grid;place-items:center;color:var(--blue);flex:none}
.ks-tt{font-size:13.5px;font-weight:700;margin:0 0 3px;color:var(--text)}
.ks-ts{font-size:12px;color:var(--muted);line-height:1.45;margin:0}

/* ============ PDP ============ */
.ks-pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;padding:24px 0 44px;align-items:start}
.ks-gmain{position:relative;height:430px;min-height:430px;max-height:430px;border-radius:14px;overflow:hidden !important;border:1px solid var(--line2);background:#FAFAFA}
.ks-gmain img{position:absolute !important;inset:24px !important;width:calc(100% - 48px) !important;height:calc(100% - 48px) !important;max-width:none !important;max-height:none !important;object-fit:contain !important;display:block !important}
.ks-pbrand{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.3px;margin:10px 0 6px}
.ks-ptitle{font-size:27px;font-weight:800;letter-spacing:-.6px;line-height:1.15;margin:0;color:var(--text)}
.ks-bprow{display:flex;align-items:baseline;gap:12px;margin-top:18px;flex-wrap:wrap}
.ks-bpr{font-size:40px;font-weight:800;letter-spacing:-1.5px;color:var(--text)}
.ks-bmsrp{color:#77808E;text-decoration:line-through;font-size:17px;font-weight:500}
.ks-bsv{background:rgba(240,96,60,.16);color:var(--orange-lt);padding:4px 10px;border-radius:6px;font-size:13px;font-weight:700}

.ks-condbx{margin-top:18px;padding:14px 16px;background:#1A1E25;border:1px solid var(--line);border-radius:10px}
.ks-condh{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.ks-condt{font-size:13px;font-weight:700;color:var(--text)}
.ks-condn{font-size:13px;color:var(--text3);line-height:1.55;margin:0}

.ks-pickbx{
  margin-top:16px;padding:12px 14px;background:rgba(139,127,232,.08);
  border:1px solid rgba(139,127,232,.3);border-radius:10px;
  font-size:12.5px;color:var(--purple-lt);line-height:1.5;display:flex;gap:9px;align-items:flex-start;
}
.ks-shiprow{display:flex;gap:9px;align-items:flex-start;margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.5}
.ks-shiprow svg{flex:none;margin-top:1px;color:var(--blue)}

.ks-spec{padding:26px 0 0}
.ks-spech{font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}

/* ============ BREADCRUMB ============ */
.ks-crumb{display:flex;gap:8px;align-items:center;padding:18px 0 0;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.ks-crsep{color:#4A515C}
.ks-crcur{color:var(--text2);font-weight:600}

/* ============ FOOTER ============ */
.ks-ftr{background:var(--sunken);padding:34px 0 28px;border-top:1px solid #22262C;margin-top:40px}
.ks-fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.ks-fh{font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.ks-fl{display:flex;flex-direction:column;gap:8px;font-size:13px}
.ks-fl a{color:#B9C0CB;font-weight:500}
.ks-fl a:hover{color:#fff}
.ks-fnote{font-size:12px;color:var(--muted2);line-height:1.55;margin:10px 0 0}

/* ============ RESPONSIVE ============ */
@media(max-width:1100px){
  .ks-dgrid,.ks-tiles{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .ks-hero{grid-template-columns:1fr;gap:28px}
  .ks-pdp{grid-template-columns:1fr;gap:28px}
  .ks-fgrid{grid-template-columns:1fr 1fr}
  .ks-trust{grid-template-columns:1fr}
  .ks-srch{display:none}
}
@media(max-width:700px){
  .wrap{padding:0 18px}
  .ks-dgrid,.ks-tiles{grid-template-columns:repeat(2,1fr)}
  .ks-h1{font-size:30px}
  .ks-hcard-img{height:280px}
}

/* ============ WOOCOMMERCE OVERRIDES ============ */

/* add to cart */
form.cart{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
form.cart .quantity{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden;background:var(--sunken)}
form.cart .quantity input.qty{
  width:64px;height:46px;background:var(--sunken);border:0;color:var(--text);
  text-align:center;font-weight:700;font-size:14px;font-family:inherit;
}
.woocommerce div.product form.cart .button,
button.single_add_to_cart_button{
  background:var(--blue)!important;color:#0E1116!important;border:0!important;
  border-radius:9px!important;font-weight:700!important;font-size:14.5px!important;
  padding:12px 26px!important;height:46px;cursor:pointer;font-family:inherit;
}
.woocommerce div.product form.cart .button:hover,
button.single_add_to_cart_button:hover{background:var(--blue-hi)!important}

/* generic woo buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-block-components-button{
  background:var(--blue)!important;color:#0E1116!important;border:0!important;
  border-radius:9px!important;font-weight:700!important;font-family:inherit!important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{background:var(--blue-hi)!important;color:#0E1116!important}

.woocommerce a.button.alt, .woocommerce button.button.alt{background:var(--orange)!important;color:#fff!important}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{background:var(--orange-lt)!important}

/* pagination */
.woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:6px;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  background:var(--card);border:1px solid var(--line);border-radius:8px;
  color:var(--text2);padding:8px 14px;font-weight:600;font-size:13px;
}
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--blue);color:#0E1116;border-color:var(--blue);
}

/* cart + checkout tables */
.woocommerce table.shop_table{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  color:var(--text2);border-collapse:separate;overflow:hidden;
}
.woocommerce table.shop_table th{color:var(--text);background:var(--sunken)}
.woocommerce table.shop_table td{border-top:1px solid var(--line)}
.woocommerce-cart table.cart img{width:64px;border-radius:8px;background:#fff}

.cart_totals h2, .woocommerce-billing-fields h3, .woocommerce h3{color:var(--text)}

/* notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  background:var(--surface)!important;color:var(--text2)!important;
  border-top:3px solid var(--blue)!important;border-radius:10px;
}
.woocommerce-message::before, .woocommerce-info::before{color:var(--blue)!important}

/* results/ordering default (we replace it) */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{display:none}

/* placeholder image bg */
.woocommerce-placeholder{background:#fff}

/* search results page */
.search .ks-sec{padding-top:24px}


/* =================================================================
   KS_RETAIL_COMPONENTS - v2.0 , 2026-07-12
   These override the old dark components above. Everything here is modelled
   on the live Walmart / Best Buy / Staples DOM.
   =============================================================== */

body{background:#fff;color:var(--text)}
a{color:var(--blue)}
a:hover{color:var(--blue-hi)}
.wrap{max-width:1400px;padding:0 24px}

/* ------------ UTILITY / TRUST BAR ------------ */
.ks-util{background:#08203F;color:#DCE6F5;font-size:12.5px;font-weight:600}
.ks-util .wrap{display:flex;align-items:center;justify-content:center;gap:28px;height:34px;flex-wrap:wrap}
.ks-util b{color:#fff;font-weight:800}
.ks-util-i{display:flex;align-items:center;gap:7px;white-space:nowrap}
.ks-util-i svg{flex:none;opacity:.9}

/* ------------ HEADER ------------ */
.ks-hdr{background:var(--hdr);border-bottom:0;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.ks-hrow{gap:24px;padding:12px 0}
.ks-kd{background:#fff;color:var(--hdr);width:38px;height:38px;border-radius:9px}
.ks-wm1{color:#fff;font-size:17px}
.ks-wm2{color:#9DB6D8}
.ks-srch{background:#fff;border:2px solid transparent;border-radius:24px;height:44px;max-width:640px}
.ks-srch:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.ks-srch input{color:var(--text);padding:0 18px}
.ks-srch input::placeholder{color:var(--muted2)}
.ks-sbtn{width:52px;background:#FFC220;color:#111418}
.ks-sbtn:hover{background:#F0B10D}
.ks-hbt{color:#fff;padding:7px 10px;border-radius:8px}
.ks-hbt:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.ks-cartn{background:#FFC220;color:#111418;font-weight:800}

.ks-nav{background:var(--hdr2);border-top:0;gap:0}
.ks-nav::-webkit-scrollbar{display:none}
.ks-nvl{color:#D3E0F2;padding:11px 15px;border-bottom:3px solid transparent}
.ks-nvl:hover{color:#fff;background:rgba(255,255,255,.07);text-decoration:none}
.ks-nvl.on{color:#fff;border-bottom-color:#FFC220;background:rgba(255,255,255,.07)}
.ks-nvdeal{color:#FFC220!important;font-weight:800}
.ks-nvdeal:hover{color:#FFD556!important}

/* ------------ HERO ------------ */
.ks-hero{padding:32px 0 30px;grid-template-columns:1fr 460px;gap:40px}
.ks-h1{color:var(--text);font-weight:900;font-size:40px}
.ks-hsub{color:var(--text3)}
.ks-vpi{color:var(--text2);font-weight:700}
.ks-vpi svg{color:var(--green)}
.ks-hcard{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-hi);border-radius:12px}
.ks-hcard-img{height:340px;min-height:340px;max-height:340px}
.ks-hplate{position:relative;background:#fff;border-top:1px solid var(--line);padding:16px 18px 18px}
.ks-hpn{color:var(--text);margin:0 0 8px}

/* ------------ BUTTONS ------------ */
.ks-cta{background:var(--blue);color:#fff!important;border-radius:24px;padding:12px 24px}
.ks-cta:hover{background:var(--blue-hi);color:#fff!important;text-decoration:none}
.ks-cta2{background:#fff;border:1.5px solid var(--line2);color:var(--text)!important;border-radius:24px;font-weight:700}
.ks-cta2:hover{border-color:var(--text);color:var(--text)!important;text-decoration:none}

/* ------------ SECTIONS ------------ */
.ks-st{color:var(--text)}
.ks-kick{color:var(--red);font-weight:800}
.ks-seeall{color:var(--blue);font-weight:700}

/* ------------ DEPARTMENT TILES ------------ */
.ks-tile{background:#fff;border:1px solid var(--line);border-radius:10px;transition:box-shadow .15s,border-color .15s}
.ks-tile:hover{border-color:var(--line3);box-shadow:var(--shadow-hi);transform:none;text-decoration:none}
.ks-tname{color:var(--text)}
.ks-tcount{color:var(--muted)}

/* ============ PRODUCT CARD ============ */
.ks-dgrid{grid-template-columns:repeat(4,1fr);gap:16px}

.ks-pc{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s}
.ks-pc:hover{border-color:var(--line3);box-shadow:var(--shadow-hi);transform:none}
.ks-pc:hover .ks-pnm{color:var(--blue)}

.ks-pimg{height:200px;min-height:200px;max-height:200px;flex:0 0 200px;background:#fff}
.ks-pimg img{inset:16px !important;width:calc(100% - 32px) !important;height:calc(100% - 32px) !important}

.ks-save{position:absolute;top:10px;left:10px;z-index:3;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:4px;line-height:1.3}

.ks-bdg{position:absolute;top:10px;right:10px;z-index:3;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:4px 8px;border-radius:4px;line-height:1.3;border:1px solid;position:absolute}
.ks-bdg-new{background:var(--green-soft);color:#1F6100;border-color:#BFE3AC}
.ks-bdg-ob{background:var(--amber-soft);color:var(--amber);border-color:#F5D9AE}
.ks-bdg-ug{background:var(--sunken);color:var(--text3);border-color:var(--line2)}

.ks-pcb{padding:13px 14px 15px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;flex:1;min-width:0;background:#fff;position:relative;z-index:2;border-top:1px solid var(--line)}

.ks-pbrand{font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);line-height:1.2}

.ks-pnm{font-size:13.5px;font-weight:600;line-height:1.4;color:var(--text);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;transition:color .12s}

.ks-prate{display:flex;align-items:center;gap:5px;min-height:16px}
.ks-stars{display:flex;gap:1px;color:#F5A623;line-height:1}
.ks-stars svg{width:13px;height:13px}
.ks-rcount{font-size:11.5px;color:var(--muted);font-weight:600}
.ks-rnone{font-size:11.5px;color:var(--muted2);font-weight:600}

.ks-pprice{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px}
.ks-pnow{font-size:20px;font-weight:900;color:var(--red);letter-spacing:-.5px;line-height:1.2}
.ks-pwas{font-size:12.5px;color:var(--muted);text-decoration:line-through;font-weight:600}

.ks-pship{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--green);margin-top:1px}
.ks-pship svg{flex:none}
.ks-pship.ks-pickup{color:var(--amber)}

.ks-pstock{font-size:11.5px;font-weight:700;color:var(--text3)}
.ks-pstock.low{color:var(--red)}

.ks-pbuy{display:block;width:100%;margin-top:9px;text-align:center;background:var(--blue);color:#fff!important;font-weight:800;font-size:13px;padding:9px 12px;border-radius:22px;border:0;cursor:pointer;transition:background .12s}
.ks-pbuy:hover{background:var(--blue-hi);color:#fff!important;text-decoration:none}

/* ------------ TRUST STRIP ------------ */
.ks-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--band);border:1px solid var(--line);border-radius:10px;margin:34px 0 8px;overflow:hidden}
.ks-ti{display:flex;align-items:flex-start;gap:12px;padding:20px 22px;border-right:1px solid var(--line)}
.ks-ti:last-child{border-right:0}
.ks-tic{width:38px;height:38px;border-radius:9px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--blue)}
.ks-tit{font-size:13.5px;font-weight:800;color:var(--text);margin:0 0 3px}
.ks-tid{font-size:12.5px;color:var(--text3);line-height:1.5;margin:0}

/* ------------ PRODUCT PAGE ------------ */
.ks-crumbs a{color:var(--muted)}
.ks-crumbs a:hover{color:var(--blue)}
.ks-crcur{color:var(--text2)}
.ks-pwrap{grid-template-columns:1fr 420px;gap:44px}
.ks-gmain{background:#fff;border:1px solid var(--line);border-radius:12px;height:460px;min-height:460px;max-height:460px}
.ks-ptitle{color:var(--text);font-size:26px}
.ks-spech{color:var(--muted)}
.shop_attributes th{color:var(--text)!important}
.shop_attributes td{color:var(--text3)!important}
.shop_attributes tr{border-bottom:1px solid var(--line)}

/* ------------ FOOTER ------------ */
.ks-ftr{background:var(--hdr);color:#C6D5EA;margin-top:56px;padding:40px 0 28px}
.ks-ftr a{color:#C6D5EA}
.ks-ftr a:hover{color:#fff}
.ks-fh{color:#fff}
.ks-fbot{border-top:1px solid rgba(255,255,255,.14);color:#9DB6D8}

/* ------------ WOOCOMMERCE ------------ */
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,.woocommerce a.button,.woocommerce #respond input#submit{background:var(--blue)!important;color:#fff!important;border-radius:24px!important;font-weight:700!important;padding:12px 24px!important}
.woocommerce .button:hover,.woocommerce a.button:hover{background:var(--blue-hi)!important}
.woocommerce div.product form.cart .button{width:100%;padding:15px!important;font-size:15.5px!important}
.woocommerce-message,.woocommerce-info,.woocommerce-error{background:var(--blue-soft)!important;border-top:3px solid var(--blue)!important;color:var(--text)!important;border-radius:8px}

/* ------------ RESPONSIVE ------------ */
@media(max-width:1100px){
  .ks-trust{grid-template-columns:repeat(2,1fr)}
  .ks-ti:nth-child(2){border-right:0}
  .ks-ti:nth-child(1),.ks-ti:nth-child(2){border-bottom:1px solid var(--line)}
}
@media(max-width:760px){
  .ks-util .wrap{gap:14px;height:auto;padding:7px 16px;font-size:11.5px}
  .ks-pimg{height:150px;min-height:150px;max-height:150px;flex-basis:150px}
  .ks-pnow{font-size:17px}
  .ks-trust{grid-template-columns:1fr}
  .ks-ti{border-right:0;border-bottom:1px solid var(--line)}
}


/* ------------ KS_HERO_FIX ------------
   The hero had a dead gap: the text column was 1fr but the copy only filled
   half of it. Tighten it up, centre the copy vertically, and shrink the
   whole band so products come up the page. Discount retailers show DEALS
   above the fold, not a slogan.  */
.ks-hero{
  grid-template-columns:minmax(0, 1fr) 420px;
  gap:56px;
  padding:36px 0 32px;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
}
.ks-h1{font-size:38px;max-width:420px}
.ks-hsub{max-width:420px;font-size:14.5px}
.ks-hcard-img{height:300px;min-height:300px;max-height:300px}
.ks-sec{padding:28px 0 4px}

/* hero card should look like a real product card, not a floating panel */
.ks-hplate{flex-direction:column;align-items:stretch;gap:10px}
.ks-hplate .ks-cta{width:100%;text-align:center;justify-content:center}

@media(max-width:1100px){
  .ks-hero{grid-template-columns:1fr;gap:28px;max-width:none}
  .ks-h1,.ks-hsub{max-width:none}
}

/* ============ KS_PDP_V2 - retail product detail page ============
   Gallery left, buy-box rail right. Price near-black + large; RED is the
   savings badge only (the pattern 5 of 7 top retailers actually use).
   Delivery shows a NAMED DATE, not "3-5 business days". */

.ks-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 0 14px;font-size:13.5px;color:var(--text3)}
.ks-crumb a{color:var(--text3);text-decoration:none}
.ks-crumb a:hover{color:var(--blue);text-decoration:underline}
.ks-crsep{color:var(--muted2)}
.ks-crcur{color:var(--text);font-weight:600;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ks-pdp{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:48px;align-items:start;padding:8px 0 40px}

.ks-gal{position:sticky;top:16px}
.ks-gmain{position:relative;background:#fff;border:1px solid var(--line);border-radius:10px;height:520px;display:flex;align-items:center;justify-content:center;padding:28px;overflow:hidden}
.ks-gmain img{max-width:100%;max-height:100%;object-fit:contain}
.ks-gmain .ks-save{position:absolute;top:14px;left:14px}
.ks-gthumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.ks-gth{width:70px;height:70px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .12s}
.ks-gth:hover{border-color:var(--line3)}
.ks-gth.is-on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.ks-gth img{max-width:100%;max-height:100%;object-fit:contain}

.ks-buy{background:#fff}
.ks-bbrand{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.ks-ptitle{font-size:26px;line-height:1.28;font-weight:750;color:var(--text);margin:0 0 10px;letter-spacing:-.01em}

.ks-idrow{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--text3);margin-bottom:10px}
.ks-idrow b{color:var(--text2);font-weight:600}

.ks-brate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.ks-stars{display:inline-flex;gap:1px;font-size:15px;line-height:1}
.ks-stars i{color:var(--line3);font-style:normal}
.ks-stars i.on{color:#FFA41C}
.ks-rcnt{font-size:13px;color:var(--blue);text-decoration:none}
.ks-rcnt:hover{text-decoration:underline}

.ks-bprice{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.ks-bnow{font-size:34px;font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1}
.ks-bwas{font-size:14px;color:var(--muted);text-decoration:line-through}
.ks-bsv{font-size:12.5px;font-weight:800;color:#fff;background:var(--red);padding:4px 9px;border-radius:4px}

.ks-bstock{font-size:14px;font-weight:700;margin-bottom:10px}
.ks-bstock.in{color:var(--green)}
.ks-bstock.low{color:var(--red)}
.ks-bstock.out{color:var(--muted)}

.ks-bdel{font-size:13.5px;color:var(--text2);background:var(--green-soft);border:1px solid #CFE7C2;border-radius:8px;padding:10px 12px;margin-bottom:18px}
.ks-bdel b{color:#1F6600}
.ks-bdel.pick{background:var(--amber-soft);border-color:#F3D9AE;color:var(--text2)}
.ks-bdel.pick b{color:var(--amber)}

.ks-bcart form.cart{display:flex;align-items:stretch;gap:10px;margin:0}
.ks-bcart .quantity{flex:0 0 96px}
.ks-bcart .quantity input.qty{width:100%;height:48px;border:1px solid var(--line2);border-radius:8px;text-align:center;font-size:15px;font-weight:600;color:var(--text);background:#fff}
.ks-bcart button.single_add_to_cart_button{flex:1 1 auto;height:48px;background:var(--blue);color:#fff;border:0;border-radius:8px;font-size:16px;font-weight:700;cursor:pointer;transition:background .12s,transform .06s}
.ks-bcart button.single_add_to_cart_button:hover{background:var(--blue-hi)}
.ks-bcart button.single_add_to_cart_button:active{transform:translateY(1px)}
.ks-bcart .stock{display:none}

.ks-btrust{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.ks-btrust li{font-size:13px;color:var(--text3);padding:5px 0 5px 20px;position:relative}
.ks-btrust li:before{content:"";position:absolute;left:0;top:10px;width:9px;height:9px;border-radius:50%;background:var(--green-soft);box-shadow:inset 0 0 0 2px var(--green)}
.ks-btrust b{color:var(--text2);font-weight:700}

.ks-pdetail{max-width:900px;padding-bottom:24px}
.ks-psec{padding:28px 0;border-top:1px solid var(--line)}
.ks-psech{font-size:20px;font-weight:750;color:var(--text);margin:0 0 16px;letter-spacing:-.01em}

.ks-condbx{display:flex;gap:14px;align-items:flex-start}
.ks-condn{font-size:14.5px;line-height:1.65;color:var(--text2)}
.ks-condn p{margin:0 0 10px}

.ks-spectbl{width:100%;border-collapse:collapse;font-size:14px}
.ks-spectbl tr{border-bottom:1px solid var(--line)}
.ks-spectbl tr:nth-child(even){background:var(--sunken)}
.ks-spectbl th{text-align:left;padding:11px 14px;font-weight:700;color:var(--text2);width:34%;vertical-align:top}
.ks-spectbl td{padding:11px 14px;color:var(--text3);vertical-align:top}

.ks-upcline{margin:16px 0 0;font-size:13.5px;line-height:1.65;color:var(--text3);background:var(--sunken);border-left:3px solid var(--blue);border-radius:0 6px 6px 0;padding:12px 14px}
.ks-upcline strong{color:var(--text2)}

#reviews .comment-reply-title{font-size:15px;font-weight:700;color:var(--text)}
#reviews .commentlist{list-style:none;padding:0;margin:0 0 20px}
#reviews .comment_container{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
#reviews .star-rating span{color:#FFA41C}
#reviews .woocommerce-Reviews-title{display:none}
#review_form input[type=text],#review_form input[type=email],#review_form textarea{width:100%;border:1px solid var(--line2);border-radius:8px;padding:10px 12px;font-size:14px;font-family:inherit}
#review_form .submit{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:11px 22px;font-size:14px;font-weight:700;cursor:pointer}
#review_form .submit:hover{background:var(--blue-hi)}

@media(max-width:1000px){
  .ks-pdp{grid-template-columns:1fr;gap:28px}
  .ks-gal{position:static}
  .ks-gmain{height:380px}
  .ks-ptitle{font-size:22px}
  .ks-bnow{font-size:30px}
}

/* ---- KS_PDP_FIX ----
   1. Woo's .button.alt was painting Add-to-Cart RED. Red is the savings badge
      colour ONLY - the buy button must be brand blue. Raise specificity.
   2. When stock max = 1, Woo renders the qty input as type=hidden. The 96px
      box then sits there empty. Collapse it and let the button go full width. */
.ks-bcart form.cart button.single_add_to_cart_button,
.ks-bcart form.cart button.single_add_to_cart_button.alt,
.ks-bcart button.button.alt{background:var(--blue) !important;color:#fff !important;border:0 !important;border-radius:8px !important;height:48px !important;font-size:16px !important;font-weight:700 !important}
.ks-bcart form.cart button.single_add_to_cart_button:hover,
.ks-bcart button.button.alt:hover{background:var(--blue-hi) !important}
.ks-bcart .quantity:has(input[type=hidden]){display:none}
.ks-bcart .quantity input[type=hidden]{display:none}
/* WooPay express button - keep it secondary, not louder than add-to-cart */
.ks-bcart .wcpay-payment-request-wrapper,
.ks-bcart #wcpay-payment-request-button{margin-top:10px}
.ks-bcart form.cart{flex-wrap:wrap}

/* ---- KS_COND_FIX ----
   .ks-condbx was a dark navy panel from the v1 dark theme - unreadable on white.
   Make it a light retail callout. */
.ks-condbx{background:var(--sunken) !important;border:1px solid var(--line) !important;border-radius:10px !important;padding:16px 18px !important;color:var(--text2) !important}
.ks-condbx .ks-condn,.ks-condbx .ks-condn p{color:var(--text2) !important}
.ks-condn{color:var(--text2) !important}
.ks-psec .ks-condn p{margin:0 0 10px}

/* ---- KS_FOOTER_V2 - navy retail footer, matches the header band ---- */
.ks-ftr{background:var(--hdr) !important;color:#C7D3E4 !important;margin-top:48px;padding:44px 0 28px;border-top:0 !important}
.ks-ftr .ks-kd{background:#fff;color:var(--hdr)}
.ks-ftr .ks-wm1{color:#fff}
.ks-ftr .ks-wm2{color:#8FA6C4}
.ks-fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.ks-fh{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.ks-fl{display:flex;flex-direction:column;gap:9px}
.ks-fl a{color:#C7D3E4 !important;text-decoration:none;font-size:13.5px}
.ks-fl a:hover{color:#fff !important;text-decoration:underline}
.ks-fnote{color:#8FA6C4 !important;font-size:13px;line-height:1.65;margin:0}
.ks-fbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.ks-fpay{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ks-fpay span{background:#fff;color:#0B2C5C;font-size:10.5px;font-weight:800;letter-spacing:.03em;padding:5px 9px;border-radius:4px;text-transform:uppercase}
@media(max-width:900px){.ks-fgrid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.ks-fgrid{grid-template-columns:1fr}}

/* ---- KS_SORTBAR - shop sort control, white retail ---- */
.ks-sortbar{display:flex;align-items:center;gap:10px}
.ks-sortbar label{font-size:13px;color:var(--text3);font-weight:600;white-space:nowrap}
.ks-sortbar select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235B6572' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 12px center/11px 8px;border:1px solid var(--line2);border-radius:8px;height:40px;padding:0 34px 0 12px;color:var(--text);font-family:inherit;font-size:13.5px;font-weight:600;outline:none;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.ks-sortbar select:hover{border-color:var(--line3)}
.ks-sortbar select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.ks-shd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
@media(max-width:560px){.ks-sortbar{width:100%}.ks-sortbar select{flex:1}}

/* ---- KS_PAYICONS ----
   Real card marks instead of text pills. Inline SVG so there are no external
   requests and nothing can 404. Each sits on a white chip so the brand colours
   read correctly against the navy footer. */
.ks-fpay span{display:none}   /* kill the old text pills */
.ks-fpay{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ks-pay{width:44px;height:28px;display:block;border-radius:4px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.25);flex:none}
@media(max-width:560px){.ks-pay{width:38px;height:24px}}

/* ---- KS_OPENBOX ----
   Amber on OPEN BOX read as a warning/damage flag. It is not - open box is a
   VALUE proposition (inspected, complete, cheaper). Best Buy badges open-box in
   blue, never in a caution colour. Amber stays reserved for things the shopper
   genuinely must be careful about (local pickup only / oversized). */
.ks-bdg-ob{background:var(--blue-soft) !important;color:var(--blue-hi) !important;border:1px solid #BBD4F5 !important}
.ks-bdg-ug{background:var(--sunken) !important;color:var(--text2) !important;border:1px solid var(--line2) !important}

.ks-obnote{font-size:13px;line-height:1.6;color:var(--text2);background:var(--blue-soft);border:1px solid #BBD4F5;border-radius:8px;padding:10px 12px;margin-bottom:14px}
.ks-obnote b{color:var(--blue-hi);font-weight:700}

/* ---- KS_H1_FIX ----
   The H1 used <br>, which renders a line break visually but gives parsers and
   screen readers NO space: "Real inventory.Below retail." Now it's two spans
   with a real space between them; CSS restores the two-line look. */
.ks-h1 span{display:block}
@media(max-width:1100px){.ks-h1 span{display:inline}}

/* ---- KS_A11Y - real WCAG AA contrast fixes, found by auditing the live page ----
   Audited, not assumed. Three colours were failing AA on normal-size text:
     --muted2 #8A929D  = 3.14:1  (needs 4.5) - "Be the First to Review", breadcrumb "/"
     --green  #2E8B00  = 4.37:1  (needs 4.5) - the shipping line on every card
     --muted  #6E7784  - borderline, darkened for headroom
   Darkened just enough to pass; the visual hierarchy is unchanged. */
:root{
  --muted:#5F6773;
  --muted2:#6B7480;      /* was #8A929D - 3.14:1 FAIL */
  --green:#237000;       /* was #2E8B00 - 4.37:1 FAIL */
  --text3:#576270;
}
/* the green tick + "Ships in 1-2 business days" is small text, needs the full 4.5 */
.ks-pship,.ks-bstock.in{color:#237000}
.ks-bdel b{color:#1B5600}

/* visible keyboard focus - there was none */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #0B5FCC;outline-offset:2px;border-radius:4px}
.ks-hdr a:focus-visible,.ks-nav a:focus-visible{outline-color:#FFC220}

/* skip link for keyboard users */
.ks-skip{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;color:#0B2C5C;padding:12px 18px;font-weight:700;border-radius:0 0 8px 0}
.ks-skip:focus{left:0}