/* =========================================================
   SRK ELECTRONICS — front page
   Ported verbatim from docs/design/Home/index.html (lines 24-558).

   Everything below the @font-face block is the prototype's CSS as authored,
   unchanged, so that any later diff against the design is meaningful. Changes
   belong in a separate file or a clearly marked block at the end.

   Loaded only on the front page — see functions.php.
   ========================================================= */

/* ---------------------------------------------------------
   Self-hosted fonts

   The prototype pulled Manrope and the two IBM Plex families from
   fonts.googleapis.com. Self-hosted here instead: one less third-party
   connection on an Indian retail storefront, no render-blocking request to a
   host that may be slow or blocked, and the local environment works offline.

   Latin subset only (U+0000-00FF and friends) — this store's copy is English
   and the part numbers are ASCII. The other 56 subsets Google serves are not
   downloaded. Five files, 100 KB total.

   Manrope and IBM Plex Sans are variable fonts: one file each covering the
   whole weight range, declared with a `font-weight` range so the browser
   interpolates. Google's own CSS lists them once per weight pointing at the
   same URL, which works but hides the fact. IBM Plex Mono is still shipped as
   static instances, so it gets three files.

   font-display: swap matches the prototype's `&display=swap`.
   --------------------------------------------------------- */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------
   Below this line: the prototype's stylesheet, verbatim.
   --------------------------------------------------------- */

/* =========================================================
   SRK ELECTRONICS
   Palette: mostly white. Navy carries every action.
   Gold appears only on prices and stock badges — roughly 4%
   of the page — so it reads as a brand signal, not decoration.
   ========================================================= */
:root{
  --navy:#0B2C5C;          /* brand navy — all primary actions */
  --navy-d:#08203F;        /* footer / dark band */
  --navy-l:#14417F;        /* hover */
  --navy-w:#F2F6FC;        /* navy wash — quiet hover fill */
  --gold:#B47B12;          /* gold that is legible on white */
  --gold-f:#E3A82C;        /* gold fill, badges only */
  --gold-w:#FCF6E8;        /* gold wash */
  --ink:#0E1B2E;
  --ink-70:#3E4C60;
  --ink-50:#63748A;
  --ink-30:#93A0B1;
  --line:#E2E7EE;
  --line-s:#EEF1F5;
  --bg:#FFFFFF;
  --bg-2:#F6F8FA;
  --stock:#0F7A52;
  --notice-bg:#5C4010;     /* dispatch-notice bar — dark amber, brand gold family, not red */
  --notice-tint:#F1E4CC;   /* body text on --notice-bg */

  --display:"Manrope",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --r:8px; --r-lg:12px; --r-xl:16px;
  --pad:clamp(16px,4vw,44px);
  --maxw:1300px;
}
/* This file's reset rules (*, a, button, img, h1-h4, body) are scoped to
   :where(.srk-chrome,[id="main"],.foot) rather than bare selectors, since
   header.php/footer.php render on every page now and a bare `a{color:inherit}`
   would restyle Bricks' own page content too (its wrapper is #brx-content,
   confirmed never #main, so nothing collides). [id="main"], not #main, since
   an ID selector would outrank this file's own utility classes.
   :where() specifically — not a plain compound selector — because
   :where(...) contributes ZERO specificity. A compound selector here
   previously made this reset MORE specific than downstream utility classes
   like .btn-navy, so navy buttons rendered with invisible dark-on-dark text.
   Do not swap :where() back out for a plain selector list. */
:where(.srk-chrome,[id="main"],.foot),
:where(.srk-chrome,[id="main"],.foot) *{box-sizing:border-box;margin:0;padding:0}
:where(.srk-chrome,[id="main"],.foot){background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
:where(.srk-chrome,[id="main"],.foot) a{color:inherit;text-decoration:none}
:where(.srk-chrome,[id="main"],.foot) button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:where(.srk-chrome,[id="main"],.foot) img{max-width:100%;display:block}
:where(.srk-chrome,[id="main"],.foot) :focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:3px}
:where(.srk-chrome,[id="main"],.foot) h1,
:where(.srk-chrome,[id="main"],.foot) h2,
:where(.srk-chrome,[id="main"],.foot) h3,
:where(.srk-chrome,[id="main"],.foot) h4{font-family:var(--display);letter-spacing:-.03em;line-height:1.1;font-weight:800}
/* Every rem value below is pre-scaled ×1.8 — do not "simplify" one back down.
   Bricks' own frontend.min.css sets html{font-size:62.5%} (its convention for
   1.6rem = 16px), but this stylesheet's values assume a plain 16px root.
   Rather than override html's font-size — which would also resize every
   Bricks-authored rem value site-wide, not just this file's — every number
   here is multiplied by 1.8 (18px target ÷ 10px actual Bricks root) instead,
   so only this stylesheet's own output is affected. */
html{scroll-behavior:smooth}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* keyboard users land here first, before 12 department links */
.skip{position:absolute;left:12px;top:-56px;z-index:200;background:var(--navy);color:#fff;
  padding:11px 18px;border-radius:var(--r);font-weight:600;font-size:1.584rem;transition:top .16s}
.skip:focus{top:12px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.band{padding-block:clamp(48px,6vw,84px)}
.band-2{background:var(--bg-2)}

.h1{font-size:clamp(3.78rem,4vw,5.58rem)}
.h2{font-size:clamp(2.7rem,2.6vw,3.87rem)}
.h3{font-size:1.8rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.eyebrow{font-family:var(--mono);font-size:1.224rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.lede{color:var(--ink-50);max-width:56ch}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--body);font-size:1.584rem;font-weight:600;padding:0 18px;height:42px;
  border-radius:var(--r);transition:.15s;white-space:nowrap;border:1px solid transparent}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-l)}
.btn-out{border-color:var(--line);color:var(--ink);background:#fff}
.btn-out:hover{border-color:var(--navy);color:var(--navy)}
.btn-ghost-l{border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost-l:hover{background:rgba(255,255,255,.1)}
.btn-lg{height:48px;padding:0 24px;font-size:1.692rem}
.btn-sm{height:36px;padding:0 14px;font-size:1.476rem}

/* ---------- utility bar ---------- */
.util{background:var(--navy-d);color:#B9C6D8;font-size:1.368rem}
.util .wrap{display:flex;align-items:center;gap:18px;min-height:36px;flex-wrap:wrap}
.util a:hover{color:#fff}
.util .push{margin-left:auto}
.util .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#37C98A;margin-right:6px}

/* ---------- dispatch notice bar ----------
   Same .util bar shape/position, just recoloured — amber, not red, since a
   dispatch-date change is a notice, not an error. */
.util-notice{background:var(--notice-bg);color:var(--notice-tint);
  position:fixed;top:0;left:0;right:0;height:36px;z-index:65}
.util-notice strong{color:var(--gold-f)}
.util-notice .notice-ic{flex:none;color:var(--gold-f)}
/* .head is sticky;top:0 on its own — pushed down by the fixed notice bar's height so
   the two stack instead of overlapping, only while a notice is active. */
.has-notice .head{top:36px}
/* Fixed positioning takes the notice bar out of flow, so in-flow content below it
   needs this padding or it starts at y:0, hidden underneath, on first paint. */
.has-notice{padding-top:36px}
/* Fixed elements ignore the admin bar's html{margin-top} shift, so they need their
   own top offset to avoid rendering underneath #wpadminbar for logged-in staff. */
body.admin-bar .util-notice{top:32px}
body.admin-bar.has-notice .head{top:68px}

/* One line always: long notices scroll rather than wrap. The icon/"Notice:"
   label stay fixed; only .notice-track's text moves. */
.util-notice .wrap{flex-wrap:nowrap}
.util-notice .notice-track{flex:1 1 auto;min-width:0;overflow:hidden;position:relative}
.util-notice .notice-text{display:inline-block;white-space:nowrap;padding-left:100%;
  animation:srk-notice-scroll linear infinite;animation-duration:var(--notice-dur,16s)}
@keyframes srk-notice-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Falls back to a single ellipsis-truncated line for prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce){
  .util-notice .notice-text{animation:none;padding-left:0;display:block;
    overflow:hidden;text-overflow:ellipsis}
}

/* ---------- header ---------- */
.head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.head .wrap{display:flex;align-items:center;gap:clamp(12px,2vw,28px);min-height:74px}
.logo img{height:40px;width:auto}
/* Scoped to .head — WordPress's body_class() outputs a bare "search" class on every
   search-results page, and this stylesheet loads site-wide. An unscoped .search rule
   matched <body> itself on /?s=..., squeezing the whole page into an 882px box. */
.head .search{flex:1;min-width:0;max-width:882px;display:flex;align-items:stretch;
  border:1.5px solid var(--navy);border-radius:var(--r);overflow:hidden;height:48px;background:#fff;
  box-shadow:0 1px 2px rgba(11,44,92,.05);transition:box-shadow .15s}
.head .search:focus-within{box-shadow:0 0 0 3px rgba(11,44,92,.13)}
.selwrap{position:relative;display:flex;align-items:center;background:var(--bg-2);border-right:1px solid var(--line);flex:none}
.selwrap select{border:none;background:none;height:100%;padding:0 32px 0 15px;font-family:var(--body);
  font-weight:500;font-size:1.512rem;color:var(--ink-70);cursor:pointer;appearance:none;outline:none;
  max-width:184px;text-overflow:ellipsis}
.selwrap:hover{background:#EDF1F6}
.selwrap .chev{position:absolute;right:12px;pointer-events:none;color:var(--ink-50)}
.head .search input{flex:1;min-width:0;border:none;outline:none;height:100%;padding:0 16px;
  font-family:var(--body);font-size:1.656rem;color:var(--ink)}
.head .search input::placeholder{color:var(--ink-30)}
.head .search button{background:var(--navy);color:#fff;padding:0 24px;display:flex;align-items:center;gap:8px;
  font-size:1.584rem;font-weight:600;flex:none}
.head .search button:hover{background:var(--navy-l)}

/* Sizes the FiboSearch shortcode into the same slot .search occupied — the plugin's
   own wrapper has no flex-grow, so inside .head .wrap it would otherwise default to
   its own min-width. Sizing only; everything else is the plugin's own stylesheet,
   left alone so the search bar looks the same on every page. */
.head .wrap .dgwt-wcas-search-wrapp{flex:1;min-width:0;max-width:882px}
.head-act{display:flex;align-items:center;gap:8px;flex:none}
.icn-btn{display:flex;align-items:center;gap:8px;padding:0 12px;height:44px;border-radius:var(--r);color:var(--ink-70);font-size:1.512rem;font-weight:500}
.icn-btn:hover{background:var(--bg-2);color:var(--navy)}
.icn-btn b{font-family:var(--mono);font-size:1.404rem;color:var(--ink)}

/* department nav */
.deptnav{background:#fff;border-bottom:1px solid var(--line);position:relative}
/* overflow-x:auto is load-bearing: the twelve departments need ~1740px and never get
   more than --maxw's 1300px, at any desktop width. Side effect: overflow-x forces
   overflow-y to auto too, clipping .dd-panel's absolute-positioned dropdown to this
   row's height instead of letting it escape downward. Fixed in home.js, which
   switches the open .dd-panel to position:fixed (not subject to this row's clipping)
   rather than sacrificing the scroll here. */
.deptnav .wrap{display:flex;align-items:center;gap:8px;overflow-x:auto;min-height:46px;scrollbar-width:none}
.deptnav .wrap::-webkit-scrollbar{display:none}
.deptnav a{font-size:1.53rem;font-weight:500;color:var(--ink-70);padding:8px 13px;border-radius:var(--r);white-space:nowrap}
.deptnav a:hover{background:var(--bg-2);color:var(--navy)}
.deptnav a.all{background:var(--navy);color:#fff;font-weight:600}
.deptnav a.all:hover{background:var(--navy-l)}
/* dd-chev marks a department as having sub-categories, matching the chevron
   already used for the category select and the mobile drawer's disclosures. */
.dd > a{display:flex;align-items:center;gap:5px}
.dd-chev{color:var(--ink-30);flex:none;transition:transform .15s}
.dd:hover .dd-chev,.dd:focus-within .dd-chev{color:var(--navy);transform:rotate(180deg)}
/* Signals there's more to scroll, since scrollbar-width:none hides the scrollbar.
   home.js toggles these against real scroll position. */
.deptnav-fade{position:absolute;top:1px;bottom:1px;width:32px;pointer-events:none;
  opacity:0;transition:opacity .15s;z-index:1}
/* A white-to-transparent fade would be invisible against .deptnav's own white
   background, so this uses a faint navy tint instead. */
.deptnav-fade-l{left:0;background:linear-gradient(90deg,rgba(11,44,92,.09),rgba(11,44,92,0))}
.deptnav-fade-r{right:0;background:linear-gradient(270deg,rgba(11,44,92,.09),rgba(11,44,92,0))}
.deptnav-fade.is-on{opacity:1}

/* ---------- hero ---------- */
.hero{background:var(--bg-2);border-bottom:1px solid var(--line);padding-block:clamp(36px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,60px);align-items:center}
.hero h1{margin:14px 0 16px}
.hero h1 span{color:var(--navy)}
.hero .lede{font-size:1.836rem}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}
.quick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:22px;font-size:1.476rem;color:var(--ink-50)}
.quick .qlab{font-family:var(--mono);font-size:1.224rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-30)}
.quick a{border:1px solid var(--line);background:#fff;border-radius:99px;padding:5px 13px;
  font-family:var(--mono);font-size:1.368rem;color:var(--ink-70);transition:.14s}
.quick a:hover{border-color:var(--navy);color:var(--navy);background:var(--navy-w)}

/* dispatch cutoff — quiet, factual */
.cutoff{display:flex;align-items:center;gap:12px;margin-top:24px;padding:12px 16px;
  background:var(--gold-w);border:1px solid #F0E2C2;border-radius:var(--r);font-size:1.53rem;color:#6A5312}
.cutoff b{font-family:var(--mono);font-weight:600;color:#4A3A0C;font-variant-numeric:tabular-nums}
.cutoff svg{flex:none;color:var(--gold)}

/* featured card */
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.feat-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line-s)}
.feat-img{background:#fff;padding:18px;display:grid;place-items:center}
.feat-img img{width:100%;max-width:250px;aspect-ratio:1;object-fit:contain}
.feat-body{padding:0 20px 20px}
.feat-body .cat{font-family:var(--mono);font-size:1.224rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-30)}
.feat-body h3{margin:6px 0 8px}
.spec{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.spec span{font-family:var(--mono);font-size:1.26rem;background:var(--bg-2);border:1px solid var(--line-s);
  border-radius:4px;padding:3px 7px;color:var(--ink-70)}
.price{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.price .now{font-family:var(--mono);font-weight:600;font-size:2.34rem;color:var(--gold)}
.price .was{font-family:var(--mono);font-size:1.476rem;color:var(--ink-30);text-decoration:line-through}
.price .gst{width:100%;font-family:var(--mono);font-size:1.188rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-30)}
.stock{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:1.296rem;color:var(--stock)}
.stock i{width:6px;height:6px;border-radius:50%;background:var(--stock)}

/* ---------- best sellers carousel ---------- */
.feat-top{gap:12px}
.feat-ctrl{display:flex;align-items:center;gap:10px}
.fdots{display:flex;gap:6px;width:auto!important}
.fdots .swiper-pagination-bullet{width:7px;height:7px;margin:0!important;border-radius:99px;
  background:var(--ink-30);opacity:1;transition:width .25s,background .25s}
.fdots .swiper-pagination-bullet-active{width:20px;background:var(--navy)}
.fplay{width:27px;height:27px;border-radius:99px;border:1px solid var(--line);flex:none;
  display:grid;place-items:center;color:var(--ink-50);transition:.15s}
.fplay:hover{border-color:var(--navy);color:var(--navy)}
/* autoplay progress — tells you the slide is about to move */
.fbar{height:2px;background:var(--line-s);position:relative;overflow:hidden}
.fbar i{position:absolute;top:0;left:0;bottom:0;width:0;background:var(--gold-f)}
/* SRK: added in the port. Swiper 8.4.4 has no autoplayTimeLeft to drive this
   bar from JS, so it is animated instead — same 5s, same left-to-right fill,
   restarted by home.js on every slide change. See assets/js/home.js. */
.fbar i.run{animation:srk-fbar linear forwards}
@keyframes srk-fbar{from{width:0}to{width:100%}}
.feat .swiper{width:100%}
.feat .swiper-slide{height:auto}
.feat-img{min-height:212px}
.fslide{display:flex;flex-direction:column}
.fslide .stock{margin:2px 0 10px}
@media(prefers-reduced-motion:reduce){ .fbar{display:none} }

/* ---------- trust bar ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.trust > div{padding:20px 22px;border-right:1px solid var(--line)}
.trust > div:last-child{border-right:none}
.trust svg{color:var(--navy);margin-bottom:10px}
.trust h3{margin-bottom:4px}
.trust p{font-size:1.494rem;color:var(--ink-50);line-height:1.5}

/* ---------- section head ---------- */
.sec{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:26px}
.sec .eyebrow{display:block;margin-bottom:10px}
.sec p{color:var(--ink-50);font-size:1.656rem;margin-top:8px;max-width:56ch}
.sec-link{font-size:1.548rem;font-weight:600;color:var(--navy);display:inline-flex;gap:6px;align-items:center}
.sec-link:hover{gap:10px}

/* ---------- departments ---------- */
.depts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dept{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;background:#fff;
  display:flex;flex-direction:column;gap:10px;min-height:160px;transition:.16s}
.dept:hover{border-color:var(--navy);box-shadow:0 6px 20px -12px rgba(11,44,92,.4)}
.dept-hd{display:flex;justify-content:space-between;align-items:flex-start}
.dept-ico{width:36px;height:36px;border-radius:var(--r);background:var(--bg-2);display:grid;place-items:center;color:var(--navy)}
.dept:hover .dept-ico{background:var(--navy);color:#fff}
.dept .n{font-family:var(--mono);font-size:1.224rem;color:var(--ink-30)}
.dept h3{margin-top:auto}
.dept p{font-size:1.44rem;color:var(--ink-50);line-height:1.45}

/* ---------- product grid ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{font-size:1.494rem;font-weight:600;padding:7px 14px;border-radius:99px;border:1px solid var(--line);color:var(--ink-50);background:#fff}
.tab:hover{border-color:var(--navy);color:var(--navy)}
.tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.grid5{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;transition:.16s;position:relative}
.card:hover{border-color:var(--navy);box-shadow:0 8px 26px -14px rgba(11,44,92,.45)}
/* .card's own display:flex outranks the browser default [hidden]{display:none} at equal
   specificity (author beats UA) — without this, home.js's filter sets the hidden
   attribute but every card keeps rendering regardless of which tab is active. */
.card[hidden]{display:none}
.card-img{padding:16px;display:grid;place-items:center;background:#fff;border-bottom:1px solid var(--line-s)}
.card-img img{width:100%;aspect-ratio:1;object-fit:contain}
.badge{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:1.188rem;font-weight:600;
  background:var(--gold-f);color:#39290A;padding:2px 7px;border-radius:4px}
.card-b{padding:14px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-b .cat{font-family:var(--mono);font-size:1.152rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-30)}
.card-b h3{font-size:1.566rem;font-weight:600;line-height:1.35;flex:1}
.card:hover .card-b h3{color:var(--navy)}
.sku{font-family:var(--mono);font-size:1.224rem;color:var(--ink-30)}
.card .price .now{font-size:1.89rem}
.card .btn{width:100%;margin-top:4px}

/* ---------- variant ladder ---------- */
.ladder{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff}
.ladder-hd{padding:16px 20px;border-bottom:1px solid var(--line);background:var(--bg-2);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ladder-hd h3{font-size:1.836rem}
.ladder-hd p{font-size:1.494rem;color:var(--ink-50);margin-top:3px}
.row{display:grid;grid-template-columns:minmax(0,1fr) 110px 130px 110px;gap:16px;align-items:center;
  padding:13px 20px;border-bottom:1px solid var(--line-s);font-size:1.584rem}
.row:last-child{border-bottom:none}
.row:hover{background:var(--bg-2)}
.row .rname{font-weight:500}
.row .rmeta{font-family:var(--mono);font-size:1.368rem;color:var(--ink-50)}
.row .rprice{font-family:var(--mono);font-weight:600;color:var(--gold);text-align:right}
.row .rhead{font-family:var(--mono);font-size:1.224rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-30)}
.row.is-head{background:#fff;font-weight:600;border-bottom:1px solid var(--line)}
.row.is-head span{font-family:var(--mono);font-size:1.188rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-30);font-weight:500}
.row.is-head span:last-child{text-align:right}

/* ---------- bulk band ---------- */
.bulk{background:var(--navy-d);color:#fff;border-radius:var(--r-xl);padding:clamp(28px,4vw,52px);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.bulk h2{color:#fff}
.bulk p{color:#AFBFD4;margin-top:14px;font-size:1.728rem;max-width:48ch}
.bulk .eyebrow{color:#E3A82C}
.bulk-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.brk{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);overflow:hidden}
.brk-hd{padding:12px 16px;background:rgba(255,255,255,.05);font-family:var(--mono);font-size:1.26rem;
  letter-spacing:.1em;text-transform:uppercase;color:#E3A82C;border-bottom:1px solid rgba(255,255,255,.12)}
.brk-r{display:flex;justify-content:space-between;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.08);font-size:1.584rem}
.brk-r:last-child{border-bottom:none}
.brk-r span:first-child{color:#AFBFD4;font-family:var(--mono);font-size:1.44rem}
.brk-r span:last-child{font-family:var(--mono);font-weight:600}
.brk-r.best span:last-child{color:#E3A82C}

/* ---------- footer ---------- */
.foot{background:var(--navy-d);color:#9FB1C8;margin-top:0}
.foot .wrap{padding-block:clamp(42px,5vw,64px) 0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:clamp(22px,3.4vw,48px)}
.foot h4{font-family:var(--mono);font-size:1.188rem;letter-spacing:.14em;text-transform:uppercase;
  color:#E3A82C;margin-bottom:14px;font-weight:500}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot a,.foot address,.foot p{font-size:1.53rem;color:#9FB1C8}
.foot a:hover{color:#fff}
.foot address{font-style:normal;line-height:1.7}
.foot img{height:46px;width:auto;margin-bottom:14px}
.foot .blurb{max-width:32ch;line-height:1.6}
.carriers{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.carriers span{font-family:var(--mono);font-size:1.224rem;border:1px solid rgba(255,255,255,.16);
  padding:4px 10px;border-radius:99px}
.foot-bot{margin-top:clamp(30px,4vw,48px);padding-block:18px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:1.26rem;color:#6F84A0}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .grid5{grid-template-columns:repeat(3,1fr)}
  .depts,.trust{grid-template-columns:repeat(2,1fr)}
  .trust > div:nth-child(2){border-right:none}
  .trust > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:980px){
  .hero-grid,.bulk{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:minmax(0,1fr) 110px;gap:10px}
  .row .rhide{display:none}
}
@media(max-width:860px){
  /* Grid, not flex+order: FiboSearch reasserts its own layout via JS at times a
     flex-based order/flex-basis override couldn't reliably beat. grid-row/column
     is more explicit and leaves less surface for it to override — burger/logo/
     account auto-place into row 1, search is pinned to row 2, spanning both columns. */
  .head .wrap{display:grid;grid-template-columns:auto auto 1fr auto;
    align-items:center;gap:10px 14px;padding-block:12px}
  .head .search,
  .head .dgwt-wcas-search-wrapp{grid-row:2;grid-column:1/-1}
  .head-act{grid-row:1;grid-column:4;margin-left:0}
  .selwrap{display:none}
}
@media(max-width:640px){
  .grid5,.depts,.trust{grid-template-columns:1fr}
  .trust > div{border-right:none;border-bottom:1px solid var(--line)}
  /* Shop and Policies stay side by side; logo/blurb and Shop location go full-width. */
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > div:first-child,
  .foot-grid > div:last-child{grid-column:1/-1}
  /* Rotating single-item carousel: all four items stack on top of each other
     (position:absolute, same box) and take turns fading into view, one shared
     keyframe with each item's animation-delay offset by a quarter cycle. */
  .util:not(.util-notice) .wrap{position:relative;display:block;
    min-height:24px;padding-block:12px}
  .util:not(.util-notice) .wrap > *{position:absolute;left:0;right:0;top:0;
    margin:0;text-align:center;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;animation:srk-util-carousel 12s ease-in-out infinite}
  .util:not(.util-notice) .wrap > *:nth-child(1){animation-delay:0s}
  .util:not(.util-notice) .wrap > *:nth-child(2){animation-delay:-3s}
  .util:not(.util-notice) .wrap > *:nth-child(3){animation-delay:-6s}
  .util:not(.util-notice) .wrap > *:nth-child(4){animation-delay:-9s}
  .util:not(.util-notice){font-size:1.1rem}
}
@keyframes srk-util-carousel{
  0%{opacity:0;transform:translateY(6px)}
  4%,21%{opacity:1;transform:translateY(0)}
  25%,100%{opacity:0;transform:translateY(-6px)}
}
@media(max-width:640px) and (prefers-reduced-motion:reduce){
  .util:not(.util-notice) .wrap > *{animation:none;opacity:0}
  .util:not(.util-notice) .wrap > *:first-child{opacity:1}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ============ ADDED SECTIONS ============ */

/* just landed — horizontal rail */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;overscroll-behavior-x:contain}
.rail .card{scroll-snap-align:start}
.newtag{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:1.116rem;
  background:var(--navy);color:#fff;padding:2px 7px;border-radius:4px;z-index:2}
.ph{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:100%;aspect-ratio:1;background:var(--bg-2);border-radius:var(--r);border:1px dashed var(--line)}
.ph b{font-family:var(--mono);font-size:2.34rem;font-weight:600;color:var(--navy);letter-spacing:-.02em}
.ph small{font-family:var(--mono);font-size:1.17rem;color:var(--ink-30)}
.rng{font-family:var(--mono);font-size:1.35rem;color:var(--gold);font-weight:600}

/* how your order moves — dark band */
.dband{background:var(--navy-d);color:#fff}
.dband h2,.dband h3{color:#fff}
.dband .sec p{color:#AFBFD4}
.dband .sec{border-top-color:rgba(255,255,255,.28)}
.flow{display:grid;grid-template-columns:repeat(3,1fr)}
.step{padding:4px 26px 4px 0;border-right:1px solid rgba(255,255,255,.13)}
.step:last-child{border-right:none;padding-right:0}
.step:not(:first-child){padding-left:26px}
.stepn{font-family:var(--mono);font-size:1.26rem;color:var(--gold-f);letter-spacing:.14em;display:block;margin-bottom:15px}
.stepic{width:42px;height:42px;border-radius:var(--r);background:rgba(255,255,255,.07);
  display:grid;place-items:center;color:var(--gold-f);margin-bottom:16px}
.step h3{margin-bottom:8px;font-size:1.98rem}
.step p{color:#AFBFD4;font-size:1.566rem;line-height:1.55}
.step .meta{font-family:var(--mono);font-size:1.314rem;color:#7C92AF;margin-top:14px;display:block;
  padding-top:13px;border-top:1px solid rgba(255,255,255,.1)}
.flow-note{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
  font-size:1.494rem;color:#7C92AF}

/* genuine parts */
.gen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,3.6vw,54px);align-items:center}
.assure{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.arow{display:flex;gap:15px;padding:17px 20px;border-bottom:1px solid var(--line-s)}
.arow:last-child{border-bottom:none}
.arow > svg{flex:none;color:var(--navy);margin-top:3px}
.arow h3{font-size:1.674rem;margin-bottom:3px}
.arow p{font-size:1.476rem;color:var(--ink-50);line-height:1.5}
.arow a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* who buys from us */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px;
  display:flex;flex-direction:column;gap:9px;transition:.16s}
.wcard:hover{border-color:var(--navy);box-shadow:0 6px 20px -12px rgba(11,44,92,.4)}
.wk{font-family:var(--mono);font-size:1.17rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gold)}
.wcard h3{font-size:1.8rem}
.wq{font-size:1.53rem;color:var(--ink-70);border-left:2px solid var(--gold-f);padding-left:12px;font-style:italic}
.wcard p{font-size:1.494rem;color:var(--ink-50);line-height:1.5;flex:1}
.wcard .wm{font-family:var(--mono);font-size:1.296rem;color:var(--navy);padding-top:11px;border-top:1px solid var(--line-s)}

@media(max-width:980px){
  .gen{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .step{border-right:none;border-bottom:1px solid rgba(255,255,255,.13);padding:22px 0}
  .step:not(:first-child){padding-left:0}
  .step:last-child{border-bottom:none}
  .who{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){ .who{grid-template-columns:1fr} }

/* ============ REBUILD PASS ============ */

/* ---------- card semantics ----------
   The card is one honest link to the product page, so the call to action reads
   "View product" rather than "Add to cart" — the static page cannot add to a
   cart, and a button that lies is worse than one that is plain. On the
   child-theme port, drop Woo's real add-to-cart in beside it. */
.card-b .btn{pointer-events:none}   /* the card itself carries the click */

/* ---------- cart badge ---------- */
.cartb{position:relative}
.cartb .cnt{position:absolute;top:2px;left:22px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:var(--gold-f);color:#39290A;font-family:var(--mono);
  font-size:1.116rem;font-weight:600;display:grid;place-items:center;line-height:1}

/* ---------- hamburger + mobile drawer ---------- */
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r);
  place-items:center;color:var(--ink);flex:none}
.burger:hover{border-color:var(--navy);color:var(--navy)}
.scrim{position:fixed;inset:0;background:rgba(8,32,63,.5);z-index:98;opacity:0;pointer-events:none;
  transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(87vw,352px);background:#fff;z-index:99;
  transform:translateX(-100%);transition:transform .24s ease;display:flex;flex-direction:column;
  box-shadow:0 0 40px rgba(8,32,63,.28)}
.drawer.on{transform:none}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);flex:none}
.drawer-hd .eyebrow{color:var(--ink-30)}
.drawer-x{width:36px;height:36px;border-radius:var(--r);display:grid;place-items:center;color:var(--ink-50)}
.drawer-x:hover{background:var(--bg-2);color:var(--navy)}
.drawer-body{overflow-y:auto;padding:8px 0 24px;flex:1;overscroll-behavior:contain}
.dgrp{border-bottom:1px solid var(--line-s)}
.dgrp > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 18px;font-size:1.656rem;font-weight:600;cursor:pointer;list-style:none}
.dgrp > summary::-webkit-details-marker{display:none}
.dgrp > summary:hover{background:var(--bg-2);color:var(--navy)}
.dgrp > summary svg{flex:none;color:var(--ink-30);transition:transform .18s}
.dgrp[open] > summary svg{transform:rotate(180deg)}
.dgrp[open] > summary{color:var(--navy)}
.dsub{display:flex;flex-direction:column;padding:2px 0 12px}
.dsub a{padding:8px 18px 8px 30px;font-size:1.53rem;color:var(--ink-50)}
.dsub a:hover{background:var(--navy-w);color:var(--navy)}
.dsub a.all{font-family:var(--mono);font-size:1.332rem;color:var(--navy);font-weight:600}
.drawer-foot{flex:none;border-top:1px solid var(--line);padding:14px 18px;display:flex;
  flex-direction:column;gap:9px;background:var(--bg-2)}
.drawer-foot a{font-size:1.53rem;color:var(--ink-70);display:flex;align-items:center;gap:9px}
.drawer-foot a:hover{color:var(--navy)}
.drawer-foot svg{color:var(--ink-30);flex:none}

/* ---------- desktop sub-category flyout ----------
   190 sub-categories can't all live in the bar. Hovering a department
   drops the ones people actually ask for at the counter. */
.deptnav .wrap{position:relative}
.dd{position:relative}
.dd > a{display:block}
.dd-panel{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--line);
  border-radius:0 0 var(--r-lg) var(--r-lg);border-top:none;box-shadow:0 18px 34px -20px rgba(11,44,92,.42);
  padding:8px;display:none;z-index:70}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{display:block}
.dd-panel a{display:block;padding:7px 11px;font-size:1.494rem;color:var(--ink-70);border-radius:6px;white-space:nowrap}
.dd-panel a:hover{background:var(--navy-w);color:var(--navy)}
.dd-panel .sep{border-top:1px solid var(--line-s);margin:6px 0}
/* Same specificity as .deptnav a.all above, so being later only wins the color
   property here — background/color are both stated explicitly so nothing falls
   through from the earlier rule as invisible navy-on-navy. */
.dd-panel a.all{font-family:var(--mono);font-size:1.314rem;font-weight:600;background:var(--navy);color:#fff}
.dd-panel a.all:hover{background:var(--navy-l);color:#fff}

/* ---------- rail controls ---------- */
.railwrap{position:relative}
.railnav{display:flex;gap:8px}
.rbtn{width:34px;height:34px;border:1px solid var(--line);border-radius:99px;display:grid;
  place-items:center;color:var(--ink-50);background:#fff;flex:none;transition:.15s}
.rbtn:hover:not(:disabled){border-color:var(--navy);color:var(--navy)}
.rbtn:disabled{opacity:.34;cursor:default}
.rail{scrollbar-width:thin}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.rail::-webkit-scrollbar-thumb:hover{background:var(--ink-30)}

/* ---------- product grid ---------- */
.grid5{grid-template-columns:repeat(4,1fr)}
.card-b .sku{margin-top:-2px}
.gcount{font-family:var(--mono);font-size:1.368rem;color:var(--ink-30);margin-top:16px}

/* filter buttons are a toggle group, not tabs — there are no tab panels */
.tab[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---------- promo banners ----------
   Source art is 2484x1250 with the headline baked into the pixels, so the
   ratio is locked and the real text lives in alt + the caption below.
   Reserving the box by aspect-ratio keeps CLS at zero. */
.promo{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.promo .swiper-slide{height:auto}
.promo a{display:block;position:relative}
/* height:auto is load-bearing — the width/height attributes are a presentational
   hint, and without it the box becomes 1250px tall and cover eats the headline */
.promo img{width:100%;height:auto;aspect-ratio:2000/1006;object-fit:cover;background:var(--bg-2)}
/* caption is the accessible, selectable version of the baked-in headline */
.promo-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap;padding:13px 18px;
  background:linear-gradient(to top,rgba(8,32,63,.88),rgba(8,32,63,0));color:#fff}
.promo-cap b{font-family:var(--display);font-size:1.764rem;font-weight:700;letter-spacing:-.02em}
.promo-cap span{font-family:var(--mono);font-size:1.296rem;color:#C6D4E6}
.promo-cap em{font-style:normal;font-family:var(--body);font-size:1.476rem;font-weight:600;
  color:var(--gold-f);display:inline-flex;align-items:center;gap:6px}
.promo a:hover .promo-cap em{gap:10px}
.promo-ui{position:absolute;right:16px;top:16px;z-index:5;display:flex;align-items:center;gap:8px}
.pbtn{width:32px;height:32px;border-radius:99px;background:rgba(255,255,255,.9);color:var(--navy);
  display:grid;place-items:center;flex:none;box-shadow:0 2px 8px rgba(8,32,63,.2);transition:.15s}
.pbtn:hover{background:#fff;transform:scale(1.06)}
/* Swiper stamps .swiper-pagination-horizontal on this node at runtime, which
   pins it to bottom:8px/left:0 — right on top of the caption. Outrank it. */
.promo .pdots{position:absolute;z-index:5;display:flex;gap:6px;
  left:18px!important;top:18px!important;bottom:auto!important;width:auto!important}
.pdots .swiper-pagination-bullet{width:7px;height:7px;margin:0!important;border-radius:99px;
  background:rgba(255,255,255,.55);opacity:1;transition:width .25s,background .25s}
.pdots .swiper-pagination-bullet-active{width:22px;background:var(--gold-f)}

/* COD strip — one message, no carousel to compete with it */
.cod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0;
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:#fff}
.cod-txt{padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;justify-content:center;gap:11px}
.cod-txt h2{font-size:clamp(2.34rem,2.2vw,3.24rem)}
.cod-txt p{font-size:1.62rem;color:var(--ink-50);max-width:44ch}
.cod-txt .fine{font-size:1.404rem;color:var(--ink-30);border-left:2px solid var(--line);padding-left:11px}
.cod-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.cod-img{background:var(--bg-2);border-left:1px solid var(--line)}
.cod-img img{width:100%;height:100%;aspect-ratio:1400/705;object-fit:cover}
/* display font, not mono — a monospaced comma leaves a gap wide enough to read
   as "₹5 , 000" at heading size */
.cod-amt{font-family:var(--display);font-weight:800;letter-spacing:-.03em;color:var(--gold);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- footer additions ---------- */
.foot .logo-w{font-family:var(--display);font-size:2.43rem;font-weight:800;letter-spacing:-.03em;
  color:#fff;margin-bottom:12px;display:block}
.foot .logo-w i{color:var(--gold-f);font-style:normal}
.gstin{font-family:var(--mono);font-size:1.296rem;color:#7C92AF;margin-top:12px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.social{display:flex;gap:8px;margin-top:16px}
.social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.16);border-radius:99px;
  display:grid;place-items:center;color:#9FB1C8;transition:.15s}
.social a:hover{border-color:var(--gold-f);color:var(--gold-f)}
.maplink{display:inline-flex;align-items:center;gap:7px;margin-top:11px;font-size:1.44rem;
  color:var(--gold-f)!important}
.maplink:hover{text-decoration:underline;text-underline-offset:2px}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .dd-panel{display:none!important}
  /* No submenu opens here, so a chevron promising one would be a lie —
     the link underneath still works, it just goes straight to the
     department page instead of offering a hover panel first. */
  .dd-chev{display:none}
}
@media(max-width:860px){
  .burger{display:grid}
  .deptnav{display:none}
}
@media(max-width:860px){
  .cod{grid-template-columns:1fr}
  .cod-img{border-left:none;border-top:1px solid var(--line);order:-1}
}
@media(max-width:640px){
  .grid5{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .rail{grid-auto-columns:minmax(64%,1fr)}
  .railnav{display:none}
  .hero-cta .btn{flex:1 1 100%}
  /* On a phone the artwork is ~180px tall and its baked-in headline collides
     with anything laid over it. Show the full frame, then put the caption
     underneath as a solid bar instead of a gradient overlay. */
  .promo img{object-position:center}
  .promo-cap{position:static;background:var(--navy-d);padding:12px 14px;
    flex-direction:column;align-items:flex-start;gap:5px}
  .promo-cap b{font-size:1.656rem}
  .promo-cap em{font-size:1.44rem}
  /* the SRK logo sits top-left in every banner — dots would land on it */
  .promo .pdots{display:none!important}
  .promo-ui{right:10px;top:10px;gap:6px}
  .pbtn{width:28px;height:28px}
}