/* THEMES HD (11 Nov 2026, darkfix): loaded LAST. Presentation only – no pricing / cart logic.
   1) crisper type + consistent cards/shadows/radius on every theme  2) per-theme surface tokens (lx + v3) so cards, menu, cart, picker follow the theme
   3) Graphite Dark fully readable (cart lines, totals, ⋮ menu, picker, pills)  4) AA fixes found by the contrast audit on all 5 themes. Same 5 keys. */

/* ---------- 1. HD base ---------- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
html.lx body{letter-spacing:.005em}
html.lx h1,html.lx h2,html.lx h3{letter-spacing:-.015em}
html.lx #view img{image-rendering:auto}
html.lx{--hdr:14px;--hdsh:0 1px 2px rgba(16,24,40,.06),0 4px 14px -6px rgba(16,24,40,.10)}

/* ---------- 2. per-theme tokens ---------- */
/* Classic Red: neutral crisp off-white (no pink cast), brand red stays */
html.lx[data-theme=light]:not([data-accent]){--lxbg:#F4F4F6;--lxcard:#FFFFFF;--lxln:#E6E7EB;--lxwell:#F5F5F7;--lxink:#16171B;--lxink2:#33363D;--lxmut:#5A5F6B;--lxtint:#FDECEC;--lxtintq:#F1F5F9}
/* Ivory: warm paper */
html.lx[data-accent=ivory]{--lxbg:#F6F1E8;--lxcard:#FFFDF8;--lxln:#E8DFD0;--lxwell:#F8F2E8;--lxink:#241F18;--lxink2:#3D352B;--lxmut:#655B4E;--lxtint:#F6EBE4;--lxtintq:#F3ECE1;--hdsh:0 1px 2px rgba(60,40,20,.06),0 4px 14px -6px rgba(60,40,20,.12)}
/* Navy Professional: cool, crisp */
html.lx[data-accent=navypro]{--lxbg:#F1F4F9;--lxcard:#FFFFFF;--lxln:#DFE5EF;--lxwell:#F4F7FB;--lxink:#111A2C;--lxink2:#2A3550;--lxmut:#4E5A70;--lxtint:#E8EEFB;--lxtintq:#EEF2F8}
/* Emerald */
html.lx[data-accent=emerald]{--lxbg:#EFF5F1;--lxcard:#FFFFFF;--lxln:#DAE7DF;--lxwell:#F3F8F5;--lxink:#10201A;--lxink2:#24392F;--lxmut:#47604F;--lxtint:#E5F4EC;--lxtintq:#ECF3EF}
/* Graphite Dark: layered dark surfaces, light text */
html[data-accent=graphite],html.lx[data-accent=graphite],html.lx[data-theme=dark]{
  --lxbg:#121418;--lxcard:#1C2027;--lxln:#2C323C;--lxwell:#252A33;--lxink:#F3F4F6;--lxink2:#D6DAE1;--lxmut:#AEB5C1;--lxtint:#3A2428;--lxtintq:#2A303A;
  --lxsh:0 1px 2px rgba(0,0,0,.5),0 6px 18px -8px rgba(0,0,0,.6);--hdsh:0 1px 2px rgba(0,0,0,.5),0 6px 18px -8px rgba(0,0,0,.6);
  --bg0:#121418;--bg1:#1C2027;--bg2:#2C323C;--ink:#F3F4F6;--mute:#C3C9D2;--mute2:#AEB5C1;--tile:#1C2027;--glass:#1C2027;--glass2:#252A33;
  --bd:rgba(255,255,255,.09);--bd2:rgba(255,255,255,.16)}
html[data-accent=graphite] body{background:#121418!important;color:#F3F4F6}
/* YQ (Rate & Order) in Graphite: neutral graphite instead of slate-blue, still no red */
html.lx.yqneu[data-accent=graphite]{--lxr:#4A5160;--lxr2:#363C48;--lpr:#4A5160;--lpr2:#363C48;--lpg1:#2A2F38;--lpg2:#161920;--lxtint:#2A303A;--lxtintq:#2A303A;
  --t3p:#C9CFD8;--t3p2:#C9CFD8;--t3pd:#E5E8ED;--t3hov:#E5E8ED;--hxa:#4A5160;--hxb:#2A2F38;--hxt:#252A33;--hxi:#E5E8ED;--y:#C9CFD8;--yg:linear-gradient(135deg,#4A5160 0%,#2A2F38 100%)}

/* ---------- consistent cards (all themes) ---------- */
html.lx #ccw .ccl,html.lx #ccw #sumbox,html.lx .cart2 .g,html.lx .cart2 #sumbox{border-radius:var(--hdr)!important;box-shadow:var(--hdsh)!important;border:1px solid var(--lxln)!important}
html.lx #ccw .cc .nm{letter-spacing:-.005em;line-height:1.3}
html.lx #ccw .cc .amt{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
html.lx #ccw #sumbox .ccdt,html.lx #ccw #sumbox .ccdt span{color:var(--lxink)!important;font-variant-numeric:tabular-nums}
html.lx #ccw .ccq .stp button:active,html.lx .cart2 .stp button:active{transform:scale(.94)}
html.lx #ccw .cadd:active,html.lx #ccw #sumbox .ofgo:active{transform:translateY(1px)}
html.lx #ccw #sumbox .ofgo:focus-visible,html.lx .kbbtn:focus-visible,html.lx .kbm .kbi:focus-visible{outline:2px solid var(--lpr,#D81E27);outline-offset:2px}

/* ---------- 3. Graphite Dark ---------- */
html[data-accent=graphite] .kbbtn{background:#252A33;border-color:#363C48;color:#E5E8ED}
html[data-accent=graphite] .kbbtn:hover,html[data-accent=graphite] .kbbtn:focus-visible{border-color:#5A6273;color:#fff}
html.kbopen[data-accent=graphite] .kbbtn{background:#363C48;border-color:#5A6273;color:#fff}
html[data-accent=graphite] .kbm{background:#1C2027;border-top-color:#2C323C;box-shadow:0 18px 30px rgba(0,0,0,.55)}
html[data-accent=graphite] .kbm .kbi.on,html[data-accent=graphite] .kbm .kbi:hover{color:#FF8A90}
html.yqneu[data-accent=graphite] .kbm .kbi.on,html.yqneu[data-accent=graphite] .kbm .kbi:hover{color:#fff}
html[data-accent=graphite] .kbm .kbav{background:#2C323C;color:#F3F4F6}
html[data-accent=graphite] .kbm .kbc.on{color:#fff}
html[data-accent=graphite] .kbm .kbo{color:#FF8A90!important;border-color:#FF8A90}
html.yqneu[data-accent=graphite] .kbm .kbo{color:#E5E8ED!important;border-color:#5A6273}
/* cart */
html.lx[data-accent=graphite] #ccw>.cch{background:#252A33!important;border:1px solid #2C323C;color:#F3F4F6}
html.lx[data-accent=graphite] #ccw>.cch h1,html.lx[data-accent=graphite] #ccw>.cch h1 span{color:#F3F4F6}
html.lx[data-accent=graphite] #ccw .cadd{background:#1C2027!important;color:#F3F4F6!important;border-color:#3A414D!important}
html.lx[data-accent=graphite] #ccw .cadd small{color:#AEB5C1;opacity:1}
html.lx[data-accent=graphite] #ccw .ccq .stp,html.lx[data-accent=graphite] .cart2 .stp{background:#252A33;border-color:#4A5160}
html.lx[data-accent=graphite] #ccw .ccq .stp button,html.lx[data-accent=graphite] .cart2 .stp button{background:#2F3540;color:#F3F4F6}
html.lx[data-accent=graphite]:not(.yqneu) #ccw .ccq .stp,html.lx[data-accent=graphite]:not(.yqneu) .cart2 .stp{border-color:#E11D28}
html.lx[data-accent=graphite] #ccw .cc .rm{color:#AEB5C1}
html.lx[data-accent=graphite] #ccw .cci{background:#F3F4F6}
html.lx[data-accent=graphite] #ccw #sumbox .ofgo,html.lx[data-accent=graphite] #ccw #sumbox .sqbtn,html.lx[data-accent=graphite] .cart2 #sendWa{box-shadow:0 6px 16px rgba(0,0,0,.45)}
html.lx.yqneu[data-accent=graphite] #ccw #sumbox .ofgo,html.lx.yqneu[data-accent=graphite] #ccw #sumbox .sqbtn{background:#E5E8ED!important;border-color:#E5E8ED!important;color:#121418!important}
html.lx[data-accent=graphite] .cart2 .stp input,html.lx[data-accent=graphite] #ccw .ccq .stp input{color:#F3F4F6}
/* theme picker */
html[data-accent=graphite] .thpop,html[data-accent=graphite] .thpop.thsheet{background:#1C2027!important;color:#F3F4F6;border:1px solid #2C323C;box-shadow:0 18px 40px rgba(0,0,0,.6)}
html[data-accent=graphite] .thpop button{color:#E5E8ED;background:transparent}
html[data-accent=graphite] .thpop.thsheet button[aria-checked=true]{box-shadow:inset 0 0 0 2px #E5E8ED;background:#252A33}
/* misc pills / links on dark */
html[data-accent=graphite] .hsrech a{color:#E5E8ED}
html:not(.yqneu)[data-accent=graphite] .hsrech a{color:#FF8A90}
html[data-accent=graphite] .hsreoc .note3,html[data-accent=graphite] .mlnone{color:#D6DAE1}

/* ---------- 4. AA fixes (all themes) ---------- */
/* sticky cart bar "Order Form →": white on #F28C28 was 2.4:1 */
.cbgo{background:#C2410C}
html[data-theme=light]:not([data-accent]) .cbgo{background:rgba(0,0,0,.28)}
html.lx #ccw>.cch h1 span{color:#fff}
html.lx #ccw .cadd small{opacity:1}
html.lx #view p.note3.mlnone a{text-decoration:underline;text-underline-offset:2px}
html[data-theme=light]:not([data-accent]) p.note3.mlnone a{color:#A3121A}
/* ⋮ button per theme (light): theme-tinted outline instead of a plain white square */
html.lx[data-accent=ivory] .kbbtn{background:#FFFDF8;border-color:#E2D6C3}
html.lx[data-accent=navypro] .kbbtn{border-color:#D3DBE8}
html.lx[data-accent=emerald] .kbbtn{border-color:#CFE0D6}
/* accent-coloured TEXT on dark surfaces (these use --lxr, which is a fill colour): lift to an AA tint */
html[data-accent=graphite] .hsrech a,html[data-accent=graphite] .utabs .uth,html[data-accent=graphite] .utabs .uth small,html[data-accent=graphite] .hv2lnk,html[data-accent=graphite] .hv2t .ct,html.lx[data-accent=graphite] #view .hsrech a,html.lx[data-accent=graphite] #view .utabs .uth,html.lx[data-accent=graphite] #view .utabs .uth small,html.lx[data-accent=graphite] #view .hv2lnk,html.lx[data-accent=graphite] #view .hv2t .ct{color:#FF9EA3!important}
html.yqneu[data-accent=graphite] .hsrech a,html.yqneu[data-accent=graphite] .utabs .uth,html.yqneu[data-accent=graphite] .utabs .uth small,html.yqneu[data-accent=graphite] .hv2lnk,html.yqneu[data-accent=graphite] .hv2t .ct,html.lx.yqneu[data-accent=graphite] #view .hsrech a,html.lx.yqneu[data-accent=graphite] #view .utabs .uth,html.lx.yqneu[data-accent=graphite] #view .utabs .uth small,html.lx.yqneu[data-accent=graphite] #view .hv2lnk,html.lx.yqneu[data-accent=graphite] #view .hv2t .ct{color:#D6DAE1!important}

/* ---------- CATSLIDER: home category carousel (store.js hxCatSl) – fixed card size = no layout shift, theme tokens only ---------- */
.hxcs{margin:14px 0 4px}
.hxcsh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 2px 8px}
.hxcsh h2{margin:0;font-size:19px!important;font-weight:800;color:var(--lxink,var(--ink))!important;letter-spacing:-.015em}
.hxcsh a{font-size:13.5px;font-weight:700;color:var(--lxr2,var(--t3pd));text-decoration:none}
.hxcst{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 2px;padding:2px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hxcst::-webkit-scrollbar{display:none}
.hxcst:focus-visible{outline:2px solid var(--lxr,#D81E27);outline-offset:2px;border-radius:12px}
.hxcc{flex:0 0 150px;width:150px;height:214px;box-sizing:border-box;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:8px 8px 10px;border-radius:14px;
  background:var(--lxcard,#fff);border:1px solid var(--lxln,#e6e8ec);box-shadow:0 2px 14px rgba(0,0,0,.07);color:var(--lxink,#14171c);text-decoration:none!important;-webkit-tap-highlight-color:transparent;transition:transform .15s,border-color .15s,box-shadow .15s}
.hxcc:active{transform:scale(.97)}
.hxcc:hover,.hxcc:focus-visible{border-color:var(--lxr,#D81E27);box-shadow:0 10px 28px -12px rgba(20,23,28,.28);outline:none}
/* lumenxindia.com-style category tile: photo on a soft tinted well with a curved accent line under it, centred bold name, accent count */
.hxcci{position:relative;flex:none;display:flex;align-items:center;justify-content:center;width:100%;height:96px;border-radius:10px;background:linear-gradient(180deg,var(--lxtint,#FDECEC) 0%,#fff 78%);overflow:hidden;color:var(--lxr,#D81E27)}
.hxcci::after{content:"";position:absolute;left:18%;right:18%;bottom:5px;height:8px;border-bottom:2.5px solid var(--lxr,#D81E27);border-radius:0 0 50% 50%;opacity:.9}
.hxcci img{position:relative;z-index:1;width:84px;height:84px;object-fit:contain}
.hxcci .ico{width:40px;height:40px}
.hxccn{margin-top:5px;font-size:13.5px;font-weight:700;line-height:1.25;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.hxccd{font-size:11.5px;font-weight:500;line-height:1.3;color:var(--lxmut,#5b6270);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:30px}
.hxccc{margin-top:auto;font-size:12px;font-weight:700;color:var(--lxr2,#9E1219)}
html.yqneu .hxccc{color:var(--lxink2,#33363D)}
html[data-accent=graphite] .hxcci{background:linear-gradient(180deg,#E9EBEF 0%,#fff 78%)}
html[data-accent=graphite] .hxccc{color:#FF9EA3}
html.yqneu[data-accent=graphite] .hxccc{color:#D6DAE1}
html[data-accent=graphite] .hxcsh a{color:#FF9EA3}
html.yqneu[data-accent=graphite] .hxcsh a{color:#D6DAE1}
html[data-accent=graphite] .hxcc:hover,html[data-accent=graphite] .hxcc:focus-visible{border-color:#5A6273}
@media (prefers-reduced-motion:reduce){.hxcst{scroll-behavior:auto}.hxcc{transition:none}}
@media (min-width:900px){.hxcc{flex-basis:172px;width:172px}}

/* greeting card KPI (Outstanding / Overdue): the card is always a deep colour fill, but the KPI text used the page ink (dark on dark in Navy / Emerald / Ivory / Classic) */
html .hxcard .hxk small{color:rgba(255,255,255,.86)!important;opacity:1!important;letter-spacing:.06em}
html .hxcard .hxk b{color:#fff!important;font-variant-numeric:tabular-nums}
html .hxcard .hxk{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.28)!important}
html .hxcard .hxk.od.hot b{color:#FFD4D6!important}

/* lumenxindia.com reference look (Krishna 11 Nov): white header with a soft 14px shadow, tight 800 headings, 14px cards with the same soft shadow, 12px buttons.
   Our own fonts (Poppins) and colours only – no Lumenx assets. */
html.lx:not([data-accent=graphite]) .hdr{box-shadow:0 2px 14px rgba(0,0,0,.07)}
html.lx #view .hdh2,html.lx #view .hsrech h3,html.lx .hxcsh h2{font-weight:800!important;letter-spacing:-.02em!important}
html.lx #view .hxqa{border-radius:14px;box-shadow:0 2px 14px rgba(0,0,0,.07);border-color:var(--lxln)}
html.lx[data-accent=graphite] #view .hxqa{box-shadow:0 2px 14px rgba(0,0,0,.45)}
html.lx #view .hxqa:active{transform:scale(.97)}
html.lx #view .hxqa b{font-weight:700;letter-spacing:-.01em}
html.lx #view .hsreoc,html.lx #view .hsost{border-radius:14px}
html.lx #ccw #sumbox .ofgo,html.lx .cart2 #sendWa,html.lx #ccw .cadd{border-radius:12px!important}

/* bottom-nav WhatsApp label: #0F9D4A on white was 3.5:1 */
html[data-theme=light] .bwa span{color:#0B7A3A}
/* Graphite: voice / notepad-photo order buttons on #/shop were light pills on the dark page */
html[data-accent=graphite] .vpb>button:not(.rec),html[data-accent=graphite] .vpb .ph{background:#1C2027!important;border-color:#3A414D!important;color:#F3F4F6!important}
html[data-accent=graphite] .vpb .ph small,html[data-accent=graphite] .vpb>button small{color:#AEB5C1!important}
/* YQ Graphite: soft tints neutral (no red cast on Reorder / notes) */
html.yqneu[data-accent=graphite]{--t3tint:#252A33;--t3tintt:#D6DAE1}
html.yqneu[data-accent=graphite] #view .hsreoc .note3,html.yqneu[data-accent=graphite] #view .mlnone{background:#252A33!important;color:#D6DAE1}
/* guest photo hero (lxskin .lxhero) follows the picked theme instead of always ATC red; Classic unchanged */
html.lx[data-accent=ivory]:not(.yqneu) .lxhero{background:linear-gradient(120deg,#7A251E 0%,#561913 100%)}
html.lx[data-accent=navypro]:not(.yqneu) .lxhero{background:linear-gradient(120deg,#1E3A8A 0%,#122660 100%)}
html.lx[data-accent=emerald]:not(.yqneu) .lxhero{background:linear-gradient(120deg,#0F6B45 0%,#094a30 100%)}
html.lx[data-accent=graphite] .lxhero{background:linear-gradient(120deg,#262B34 0%,#15181D 100%)}
/* picker: 5 labels fit one row at 412px */
.thpop.thsheet button{font-size:10px;letter-spacing:-.01em}