/* TILES + RELNOTE (Krishna t333u, 22 Oct 2026) – loaded after polish.css. Layout / colour only.
   1) Category tiles on Home ('Shop by category', .apc) and Order Karein (.hv2t): white card, bigger centred photo, bold dark name
      (never cut), same size tiles, on a soft blue panel. YQ (html.yqneu) gets a neutral slate panel – no ATC branding change.
   2) Follow-up box after an Add ('Saath mein ye bhi?', .prel): tinted box + coloured left border + ↓ badge, one-time highlight,
      and a small '↓ dekhein' pill when the box is below the screen (store.js relNotice). Motion off with prefers-reduced-motion. */
:root{--tlp:#e6eefb;--tlb:#cddcf3;--tli:#0a1d42}
html.yqneu{--tlp:#eceff4;--tlb:#d5dbe5}

/* ---- Order Karein / category page grid ---- */
html:not([data-theme=dark]) .hv2grid{background:var(--tlp);border:1px solid var(--tlb);border-radius:14px;padding:4px}
.hv2t{background:#fff;border:1px solid var(--tlb);box-shadow:0 2px 6px rgba(20,50,120,.08)}
.hv2t .hph{background:#fff}
.hv2t .nm{color:var(--tli);font-weight:800}
@media(max-width:599px){
  .hv2grid{gap:4px}
  .hv2t{padding:2px 2px 4px}
  .hv2t .hph,html.r-shopv2 .hv2t .hph{height:64px}
  .hv2t .nm{font-size:11px;line-height:1.1;min-height:2.2em;margin-top:2px;letter-spacing:-.1px;overflow-wrap:anywhere}
  .hv2t .ct{font-size:10px;margin-top:1px}
}

/* ---- Home 'Shop by category' ---- */
html:not([data-theme=dark]) .apcat{background:var(--tlp);border:1px solid var(--tlb);border-radius:16px;padding:6px}
.apcat{gap:6px;grid-auto-rows:1fr}
.apc{border:1px solid var(--tlb);border-radius:14px;padding:4px 4px 8px;gap:4px;box-shadow:0 2px 6px rgba(20,50,120,.08)}
.apci{width:100%;height:78px;border-radius:10px;background:#fff}
.apci img{width:76px;height:76px}
.apcn{font-size:13px;font-weight:800;color:var(--tli);min-height:2.3em;display:flex;align-items:center;justify-content:center;-webkit-line-clamp:unset;overflow:visible;line-height:1.15}

/* ---- Follow-up box after an Add ---- */
.prel{border-left-width:5px}
html:not([data-theme=dark]) .prel{background:#eef4ff;border-color:#9fbdf0;border-left-color:#1f6fe0}
html.yqneu:not([data-theme=dark]) .prel{background:#f1f4f9;border-color:#b9c4d6;border-left-color:#3b5f99}
.prh{align-items:center}
.prh .pra{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#1f6fe0;color:#fff;font-style:normal;font-weight:800;font-size:14px}
html.yqneu .prh .pra{background:#3b5f99}
html:not([data-theme=dark]) .prh b{color:#0a1d42}
.prel.rnew{animation:prGlow 1.1s ease-out 2}
@keyframes prGlow{0%{box-shadow:0 0 0 0 rgba(31,111,224,.55)}70%{box-shadow:0 0 0 10px rgba(31,111,224,0)}100%{box-shadow:0 0 0 0 rgba(31,111,224,0)}}
.prnudge{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom));z-index:61;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);
  padding:10px 16px;border-radius:999px;border:0;background:#1f6fe0;color:#fff;font:inherit;font-size:14px;font-weight:600;box-shadow:0 6px 18px rgba(10,30,80,.3);cursor:pointer;white-space:nowrap}
.prnudge span{opacity:.9;font-weight:500}.prnudge b{font-weight:800}
html.yqneu .prnudge{background:#3b5f99}
.prnudge[hidden]{display:none}
.prnudge:not([hidden]){animation:prIn .25s ease-out}
@keyframes prIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:959px){body.has-cbar .prnudge{bottom:calc(152px + env(safe-area-inset-bottom))}}
@media(min-width:960px){body.has-cbar .prnudge{bottom:88px}}
.toast.tup{bottom:auto;top:calc(72px + env(safe-area-inset-top))}
@media(prefers-reduced-motion:reduce){.prel.rnew,.prnudge:not([hidden]){animation:none}}