/* ==========================================================================
   home.css — the storefront home page                                  (v3)

   Pairs with public/js/home.js. Loaded after amazon.css, so it inherits that
   palette (--ink, --ink-2, --brand, --line-2, --canvas, --shadow-lg).

   Shape: amazon.in's home page. A row of hero cards, a strip of small cards,
   then a WALL of same-width cards, each holding a 2x2 grid of products.
   Everything is compact: 8px gutters, 12px card padding, no dead space.
   ========================================================================== */

:root{
  --pc-gap:10px;             /* gutter between the six cubes */
  --hm-gap:8px;              /* gutter between cards */
  --hm-pad:12px;             /* padding inside a card */
  --hm-r:10px;               /* card radius — rounder than the Amazon 6px */
  --hm-red:#E0245E;          /* deal pink-red — HARDTRAC, not Amazon */
  --hm-min:300px;            /* minimum card width in the wall → 4 across on desktop */
}
#view{padding-bottom:12px}
.hm-sec{padding-top:var(--hm-gap)}
.hm-h2{font-size:19px;font-weight:700;color:var(--ink);margin:2px 0 6px;letter-spacing:-.01em}
.pill-red{display:inline-block;background:var(--hm-red);color:#fff;border-radius:3px;font-size:11px;font-weight:700;padding:2px 6px;line-height:1.3}

/* ==========================================================================
   1. HERO MOSAIC
   Four panels, two rows tall:

     +-----------+-----------+-----------------------+
     |           |  panel 2  |   [c] [c] [c]         |
     |  panel 1  +-----------+   [c] [c] [c]         |
     |  (tall)   |  panel 3  |   six turning cubes   |
     +-----------+-----------+-----------------------+

   The row has NO fixed height: it is as tall as the cube panel needs to be
   for the six boxes to be true squares, and the banner panels stretch to
   match. Each banner panel holds any number of uploads (Admin → Home
   Banners → Top banner, panel 1 / 2 / 3) and cross-fades between them.
   ========================================================================== */
.hm-hero-band{background:var(--canvas);padding-top:var(--hm-gap)}
.hm-hero{
  display:grid;gap:var(--hm-gap);
  /* tall | stacked pair | cube panel — the cube panel is widest because it
     holds a 3 x 2 grid of boxes. */
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.62fr);
  grid-template-rows:auto auto;
  align-items:stretch;
}
.hero-l    {grid-column:1;grid-row:1 / span 2}
.hero-m1   {grid-column:2;grid-row:1}
.hero-m2   {grid-column:2;grid-row:2}
.hero-cubes{grid-column:3;grid-row:1 / span 2}

.hcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  min-width:0;min-height:0;
  background:#fff;border-radius:var(--hm-r);text-decoration:none;color:var(--ink);
  border:1px solid transparent;cursor:pointer;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
  contain:layout style;
}
.hcard:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.hcard-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px var(--hm-pad) 5px;flex:0 0 auto;
}
.hcard-head b{font-size:15.5px;font-weight:700;line-height:1.25;color:var(--ink)}

/* ---- one banner layer inside a panel; the artwork IS the card ---- */
.hpanel{background:#eef1f3}
.hb{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;color:var(--ink);
  opacity:0;visibility:hidden;transform:scale(1.015);
  transition:opacity .5s ease,transform .9s cubic-bezier(.25,.6,.2,1),visibility .5s;
}
.hb.on{opacity:1;visibility:visible;transform:scale(1)}
.hcard-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1}
/* the same image again, blurred and cropped, filling whatever the contained
   poster leaves over — so there are never grey bars and never a cropped
   headline, on any screen shape */
.hb-blur{
  position:absolute;left:-8%;top:-8%;width:116%;height:116%;object-fit:cover;
  filter:blur(26px) saturate(1.25);opacity:.55;z-index:0;pointer-events:none;
}
.lite .hb-blur{filter:blur(12px);opacity:.42}
.hb video.hcard-art,.hpanel>video.hcard-art{background:#14121f}
.hcard-copy{position:relative;z-index:2;margin-top:auto;padding:14px 14px 18px;display:flex;flex-direction:column;gap:3px}
.hb.has-art .hcard-copy{
  color:#fff;
  background:linear-gradient(0deg,rgba(10,14,20,.84) 0%,rgba(10,14,20,.44) 62%,transparent 100%);
}
.hcard-copy b{font-size:19px;font-weight:800;line-height:1.15;letter-spacing:-.015em}
.hero-m1 .hcard-copy b,.hero-m2 .hcard-copy b{font-size:16px}
.hcard-copy span{font-size:12.5px;line-height:1.35;opacity:.94}
.hcard-badge{align-self:flex-start;margin-top:5px;font-style:normal;background:var(--ht-gold,#FFC53D);color:#3A2600;border-radius:100px;font-size:11.5px;font-weight:700;padding:4px 10px}
/* ---- slideshow INSIDE one banner: several images, one animation ---- */
.hb-slides{position:absolute;inset:0;display:block;overflow:hidden}
.hb-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden}
.hb-slide .hcard-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hb-slide.on{opacity:1;visibility:visible;z-index:2}

/* fade — the safe default */
.anim-fade .hb-slide{transition:opacity .7s ease,visibility .7s}

/* slide — the outgoing image leaves left, the new one comes in from the right */
.anim-slide .hb-slide{transform:translate3d(40%,0,0);transition:opacity .62s ease,transform .62s cubic-bezier(.3,.7,.2,1),visibility .62s}
.anim-slide .hb-slide.on{transform:translate3d(0,0,0)}
.anim-slide .hb-slide.out{transform:translate3d(-40%,0,0);opacity:0}

/* up — the same, vertically */
.anim-up .hb-slide{transform:translate3d(0,35%,0);transition:opacity .62s ease,transform .62s cubic-bezier(.3,.7,.2,1),visibility .62s}
.anim-up .hb-slide.on{transform:translate3d(0,0,0)}
.anim-up .hb-slide.out{transform:translate3d(0,-35%,0);opacity:0}

/* zoom — a push in, which reads as depth rather than movement */
.anim-zoom .hb-slide{transform:scale(1.14);transition:opacity .7s ease,transform .9s cubic-bezier(.25,.7,.2,1),visibility .7s}
.anim-zoom .hb-slide.on{transform:scale(1)}
.anim-zoom .hb-slide.out{transform:scale(.94);opacity:0}

/* ken burns — a slow drift across the artwork while it is up */
.anim-kenburns .hb-slide{transition:opacity .8s ease,visibility .8s}
.anim-kenburns .hb-slide.on .hcard-art{animation:kb 9s ease-in-out infinite alternate}
@keyframes kb{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to  {transform:scale(1.14) translate3d(-1.5%,-1.5%,0)}
}

/* slide counter bars, bottom-left so they never collide with the panel dots */
.hb-bars{position:absolute;left:12px;bottom:10px;z-index:5;display:flex;gap:4px}
.hb-bar{
  width:16px;height:3px;border-radius:99px;background:rgba(255,255,255,.5);
  box-shadow:0 0 0 1px rgba(12,16,22,.22);cursor:pointer;transition:width .25s,background .25s;
}
.hb-bar.on{width:26px;background:var(--amz-search,#febd69)}
.hpanel-multi .hb-bars{bottom:24px}
.lite .anim-kenburns .hb-slide.on .hcard-art{animation:none}

/* the file behind this layer 404'd — keep the copy readable, drop the gap */
.hb.art-bad{background:linear-gradient(155deg,#2B2658 0%,#3B3474 60%,#1E1B3A 100%);color:#fff}
.hb.art-bad .hcard-art{display:none}
.hb.art-bad .hcard-copy{color:#fff;background:none}

/* a banner row with a heading but no artwork: house colours, never a hole */
.hb.no-art{background:linear-gradient(155deg,#2B2658 0%,#3B3474 60%,#1E1B3A 100%);color:#fff;justify-content:space-between}
.hb.no-art .hcard-copy{color:#fff;background:none;margin-top:auto;padding-bottom:16px}
.hcard-ph{flex:1;display:grid;place-items:center;min-height:0;font-size:56px;font-weight:800;color:rgba(255,255,255,.13);letter-spacing:-.04em}

/* ---- dots, only when a panel holds more than one banner ---- */
.hp-dots{
  position:absolute;left:0;right:0;bottom:9px;z-index:6;
  display:flex;gap:6px;justify-content:center;pointer-events:auto;
}
.hp-dot{
  width:7px;height:7px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(12,16,22,.3);
  transition:width .22s ease,background .22s ease;
}
.hp-dot:hover{background:#fff}
.hp-dot.on{width:20px;background:var(--amz-search,#febd69)}

/* ---- empty image slot: the panel waiting for an upload ---- */
.hcard.slot-ph{
  background:
    linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 60%),
    #ced5de;
  border:1.5px dashed #a7b1bd;cursor:default;
  align-items:center;justify-content:center;min-height:130px;
}
.hcard.slot-ph:hover{box-shadow:none;border-color:#8e9aa8;transform:none}
.slot-ph .ph-in{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  text-align:center;padding:14px;max-width:94%;color:#33414f;
}
.ph-ico{width:34px;height:34px;color:#7a8694;flex:0 0 auto}
.slot-ph b{font-size:14px;font-weight:700;line-height:1.2}
.slot-ph span{font-size:11.5px;line-height:1.45;color:#44515f}
.slot-ph span i{font-style:normal;font-weight:700}
.slot-ph em{font-style:normal;font-size:10.5px;color:#65707d;line-height:1.4}
.hero-m1.slot-ph .ph-ico,.hero-m2.slot-ph .ph-ico{width:26px;height:26px}
.hero-m1.slot-ph em,.hero-m2.slot-ph em{display:none}

/* ==========================================================================
   1b. THE SIX CUBES — one box per product, six filled faces, each box on its
   own clock, turning on a random axis in a random direction.

   perspective lives on .pc-scene, rotation on .pcube, and each face is
   pushed out by half the box width (--pc, measured in home.js). The box is
   forced square (aspect-ratio) so width = height = depth: a real cube, which
   is what makes rotation on BOTH axes land flush.
   ========================================================================== */
.hero-cubes{background:#fff;border:1px solid var(--line-2)}
.hero-cubes:hover{box-shadow:none;border-color:var(--line-2);transform:none}
.cube-sub{
  font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:52%;text-align:right;
}
.pc-grid{
  flex:1;min-height:0;display:grid;gap:var(--pc-gap);
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,auto);
  padding:2px var(--hm-pad) 4px;
}
.pc-scene{
  position:relative;display:flex;flex-direction:column;gap:5px;
  min-width:0;text-decoration:none;color:var(--ink);
  perspective:720px;
  transition:transform .22s cubic-bezier(.2,.7,.2,1);
}
.pcube{
  position:relative;width:100%;aspect-ratio:1 / 1;
  transform-style:preserve-3d;
  transform:translateZ(calc(var(--pc,120px) / -2));
  /* a long, soft curve: fast out of the corner, slow into the next face */
  transition:transform 1.05s cubic-bezier(.42,.015,.14,1);
}
html:not(.lite) .pcube{will-change:transform}
.pc-face{
  position:absolute;inset:0;background:#fff;overflow:hidden;
  border:1px solid var(--line-2);border-radius:9px;
  display:flex;flex-direction:column;
  box-shadow:0 6px 16px rgba(15,17,17,.13);
  /* Both spellings — Safari still needs the prefixed one, or the face behind
     shows through mirrored. */
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.pc-f1{transform:rotateY(   0deg) translateZ(calc(var(--pc,120px) / 2))}
.pc-f2{transform:rotateY(  90deg) translateZ(calc(var(--pc,120px) / 2))}
.pc-f3{transform:rotateY( 180deg) translateZ(calc(var(--pc,120px) / 2))}
.pc-f4{transform:rotateY( -90deg) translateZ(calc(var(--pc,120px) / 2))}
.pc-f5{transform:rotateX(  90deg) translateZ(calc(var(--pc,120px) / 2))}
.pc-f6{transform:rotateX( -90deg) translateZ(calc(var(--pc,120px) / 2))}

.pc-pic{flex:1;display:grid;place-items:center;min-height:0;padding:8px;background:#fff}
.pc-img{max-width:100%;max-height:100%;object-fit:contain}
.pc-glyph{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px}
.pc-off{
  position:absolute;top:6px;left:6px;z-index:2;font-style:normal;
  background:var(--hm-red);color:#fff;border-radius:3px;
  font-size:10px;font-weight:700;padding:1px 5px;
}
.pc-txt{
  justify-content:center;align-items:flex-start;gap:3px;padding:9px 10px;
  background:linear-gradient(158deg,#fff 0%,#f4f7f8 100%);
}
.pc-txt b{font-size:15px;font-weight:800;color:var(--ink);line-height:1.15}
.pc-txt s{font-size:11px;color:var(--ink-2)}
.pc-txt em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--hm-red);line-height:1.25}
.pc-txt small{font-size:9.5px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.pc-nm{
  font-size:11.5px !important;font-weight:600 !important;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pc-rt{color:#c47500 !important}
/* the "offer" face — the one that should catch the eye mid-turn */
.pc-hi{background:linear-gradient(152deg,#F5F1FF 0%,#E2D9FF 100%);justify-content:center;gap:2px}
.pc-hi b{font-size:22px;letter-spacing:-.02em}
.pc-hi em{color:#B12704}
.pc-cap{
  flex:0 0 auto;font-size:10.5px;color:var(--ink-2);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.pc-cap b{color:var(--ink);font-weight:700}

/* A slow idle drift on pointer devices — 6 boxes breathing, not marching. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html:not(.lite) .pc-scene{animation:pcFloat 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * .8s)}
  @keyframes pcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  .pc-scene:hover{animation:none;transform:translateY(-4px) scale(1.035)}
}
.pc-scene:hover .pc-cap,.pc-scene:hover .pc-cap b{color:var(--brand)}
.pc-scene:hover .pc-face{border-color:#a9b0b0;box-shadow:0 10px 24px rgba(15,17,17,.2)}
.reduce .pcube,.reduce .hb{transition:none}

/* ==========================================================================
   2. MINI RAIL — small cards under the hero, horizontal scroll
   ========================================================================== */
.hm-mini-wrap{padding-top:var(--hm-gap)}
.hm-mini{
  display:flex;gap:var(--hm-gap);overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-bottom:2px;
}
.hm-mini::-webkit-scrollbar{display:none}
.mcard{
  position:relative;flex:0 0 150px;height:190px;scroll-snap-align:start;
  background:#fff;border-radius:var(--hm-r);padding:10px 10px 8px;
  display:flex;flex-direction:column;text-decoration:none;color:var(--ink);cursor:pointer;
  border:1px solid transparent;transition:border-color .12s,box-shadow .12s;
}
.mcard:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.mcard b{font-size:13.5px;font-weight:700;line-height:1.2;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard small{font-size:11px;color:var(--ink-2);line-height:1.25;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard-pic{flex:1;display:grid;place-items:center;min-height:0;margin-top:6px}
.mcard-img{max-width:100%;max-height:100%;object-fit:contain}
.mcard-glyph{width:60px;height:60px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px}
.mcard-off{position:absolute;left:10px;bottom:8px}

/* ==========================================================================
   3. FESTIVAL STRIPS
   ========================================================================== */
.hm-strips{display:flex;flex-direction:column;gap:var(--hm-gap);padding-top:var(--hm-gap)}
.hm-strip{position:relative;display:block;border-radius:var(--hm-r);overflow:hidden;background:#fff;border:1px solid var(--line-2);min-height:70px;text-decoration:none}
.hm-strip img,.hm-strip video{display:block;width:100%;height:auto;max-height:260px;object-fit:cover}
.hm-strip-copy{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;color:#fff;background:linear-gradient(transparent,rgba(10,14,20,.80));display:flex;flex-direction:column;gap:2px}
.hm-strip-copy b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.hm-strip-copy span{font-size:13px;opacity:.93}
.hm-strip:not(:has(img)):not(:has(video)) .hm-strip-copy{position:static;background:var(--amz-sub,#232f3e);padding:18px 16px}

/* ==========================================================================
   4. THE WALL — one card shape everywhere
   ========================================================================== */
.hm-wall{
  display:grid;gap:var(--hm-gap);
  grid-template-columns:repeat(auto-fill,minmax(min(var(--hm-min),100%),1fr));
  align-items:stretch;
}
.hm-wall-3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.deck{
  background:#fff;border-radius:var(--hm-r);padding:var(--hm-pad) var(--hm-pad) 10px;cursor:pointer;
  display:flex;flex-direction:column;min-width:0;
  border:1px solid transparent;transition:border-color .12s,box-shadow .12s;
}
.deck:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.deck h3{
  position:relative;margin:0 0 8px;padding-right:20px;
  font-size:16px;font-weight:700;line-height:1.25;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.deck-sub{color:var(--ink-2);font-weight:400}
.deck-chev{position:absolute;right:0;top:0;font-size:20px;line-height:1;color:var(--ink-2);transition:transform .12s}
.deck:hover .deck-chev{transform:translateX(3px);color:var(--ink)}
.deck-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 6px;flex:1;align-content:start}
.deck-more{display:inline-block;margin-top:8px;color:var(--brand);font-size:12.5px;text-decoration:none}
.deck:hover .deck-more{color:var(--brand-ink,#c7511f);text-decoration:underline}

/* ---- one product cell ---- */
.cell{display:flex;flex-direction:column;gap:4px;text-decoration:none;min-width:0;color:var(--ink)}
.cell-pic{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;background:#fff;border-radius:3px}
.cell-img{width:100%;height:100%;object-fit:contain;padding:4px}
.cell-glyph{width:100%;height:100%;display:grid;place-items:center;font-weight:800;font-size:20px;color:#fff}
.cell-flag{position:absolute;left:0;top:0;background:var(--hm-red);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:0 0 3px 0}
.cell-meta{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.25}
.c-off{font-size:11.5px;font-weight:700;color:var(--ink-2)}
.c-tag{font-size:11.5px;font-weight:700;color:var(--hm-red)}
.c-name{font-size:11.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-price{font-size:13px;font-weight:700;color:var(--ink)}
.c-was{font-style:normal;font-weight:400;font-size:11px;color:var(--ink-2);text-decoration:line-through;margin-left:4px}
.c-b{font-size:11.5px;color:var(--ink-2)}
.c-r{font-size:11.5px;color:var(--ink-2)}
.c-r i{font-style:normal;color:#de7921}
.c-r u{text-decoration:none;color:var(--brand)}
.cell:hover .c-tag,.cell:hover .c-price,.cell:hover .c-name{text-decoration:underline}

/* department card: pictures only, a little bigger */
.deck-dept .deck-grid{gap:6px}
.deck-dept .cell-img{padding:6px}
.deck-panel h3{font-size:15px}

/* ==========================================================================
   5. PROMO TILES
   ========================================================================== */
.hm-tiles{display:grid;gap:var(--hm-gap);padding-top:var(--hm-gap);grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr))}
.hm-tile{background:#fff;border-radius:var(--hm-r);overflow:hidden;text-decoration:none;border:1px solid transparent;display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s}
.hm-tile:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
.hm-tile-pic{position:relative;aspect-ratio:4/3;display:grid;place-items:center;background:#f7f8f8;overflow:hidden}
.hm-tile-pic img,.hm-tile-pic video{width:100%;height:100%;object-fit:cover}
.hm-tile-img{width:100%;height:100%;object-fit:contain;padding:10px}
.hm-tile-glyph{width:64px;height:64px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px}
.hm-tile-badge{position:absolute;top:6px;left:6px}
.hm-tile-txt{padding:9px 11px 11px;display:flex;flex-direction:column;gap:2px}
.hm-tile-txt b{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
.hm-tile-txt span{font-size:12px;color:var(--ink-2)}

/* ==========================================================================
   6. PICKS ROW — full product cards, scrolls sideways
   ========================================================================== */
.hm-picks{background:#fff;border-radius:var(--hm-r);padding:var(--hm-pad)}
.hm-picks-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.hm-picks-head h2{font-size:19px;font-weight:700;margin:0;color:var(--ink)}
.hm-picks-head span{font-size:11.5px;color:var(--ink-2)}
.hm-picks-row{display:flex;gap:var(--hm-gap);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin}
.hm-picks-row::-webkit-scrollbar{height:7px}
.hm-picks-row::-webkit-scrollbar-thumb{background:#d5d9d9;border-radius:99px}
.pk{flex:0 0 156px;scroll-snap-align:start;display:flex;flex-direction:column;gap:2px;font-size:11.5px;line-height:1.3;color:var(--ink)}
.pk-pic{display:grid;place-items:center;aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:#fff;margin-bottom:4px}
.pk-img{width:100%;height:100%;object-fit:contain;padding:4px}
.pk-glyph{width:64px;height:64px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px}
.pk-name{color:var(--brand);text-decoration:none;font-size:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pk-name:hover{color:var(--brand-ink,#c7511f);text-decoration:underline}
.pk-rate{display:flex;gap:4px;align-items:center;color:var(--brand)}
.pk-stars{color:#de7921;letter-spacing:-1px;font-size:12px}
.pk-b{color:var(--ink-2)}
.pk-price{display:flex;align-items:baseline;gap:5px;margin-top:2px}
.pk-off{color:var(--hm-red);font-size:15px}
.pk-now{font-size:17px;font-weight:600;color:var(--ink)}
.pk-now sup{font-size:10px;font-weight:400;margin-right:1px}
.pk-mrp{color:var(--ink-2);font-size:11px}
.pk-ltd{display:inline-block;align-self:flex-start;border:1px solid var(--line-2);color:var(--ink-2);font-size:10.5px;padding:1px 5px;border-radius:2px;margin:2px 0}
.pk-del b{font-weight:700}
.pk-free{color:var(--ink)}
.pk-low{color:var(--hm-red)}

/* ==========================================================================
   7. BROWSING HISTORY
   ========================================================================== */
.hist{background:#fff;border-radius:var(--hm-r);padding:var(--hm-pad)}
.hist h2{font-size:19px;font-weight:700;margin:0 0 8px;color:var(--ink);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hist-edit{font-size:12px;font-weight:400;color:var(--brand);text-decoration:none}
.hist-edit:hover{text-decoration:underline}
.hist-row{display:flex;gap:var(--hm-gap);overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.hist-row::-webkit-scrollbar{height:7px}
.hist-row::-webkit-scrollbar-thumb{background:#d5d9d9;border-radius:99px}
.hist-item{flex:0 0 96px;height:96px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:5px;background:#fff;padding:6px}
.hist-item:hover{border-color:#a9b0b0}
.hist-img{max-width:100%;max-height:100%;object-fit:contain}
.hist-glyph{width:50px;height:50px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800}

/* ==========================================================================
   8. SKELETON
   ========================================================================== */
.hm-skel{padding:var(--hm-gap) 0}
.hm-skel .skel{border-radius:var(--hm-r);aspect-ratio:auto}
/* Mirrors the mosaic so the page does not jump when the data lands. */
.hm-skel-hero{
  display:grid;gap:var(--hm-gap);margin-bottom:var(--hm-gap);
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.62fr);
  grid-template-rows:1fr 1fr;height:clamp(380px,48vh,520px);
}
.hm-skel-hero .skel:nth-child(1){grid-column:1;grid-row:1 / span 2}
.hm-skel-hero .skel:nth-child(2){grid-column:2;grid-row:1}
.hm-skel-hero .skel:nth-child(3){grid-column:2;grid-row:2}
.hm-skel-hero .skel:nth-child(4){grid-column:3;grid-row:1 / span 2}
.hm-skel-row{display:grid;gap:var(--hm-gap);margin-bottom:var(--hm-gap);grid-template-columns:repeat(auto-fill,minmax(min(var(--hm-min),100%),1fr))}
.hm-skel-row .skel{height:280px}

/* ==========================================================================
   9. LAPTOP / TABLET — the mosaic keeps its shape; the cube panel drops to
   its own full-width row first (it is the widest and most forgiving).
   ========================================================================== */
@media (max-width:1250px){
  :root{--pc-gap:9px}
}
@media (max-width:1050px){
  :root{--hm-min:250px}
  /* Three panels no longer fit side by side: the two banners share the top,
     the six cubes take a full-width row underneath. */
  .hm-hero{
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    grid-template-rows:auto auto auto;
  }
  .hero-l    {grid-column:1;grid-row:1 / span 2;min-height:280px}
  .hero-m1   {grid-column:2;grid-row:1;min-height:136px}
  .hero-m2   {grid-column:2;grid-row:2;min-height:136px}
  .hero-cubes{grid-column:1 / span 2;grid-row:3}
  /* Six squares across a full-width panel would be huge — cap the panel and
     centre it, so the cubes stay a comfortable size. */
  .pc-grid{max-width:760px;margin:0 auto;padding-bottom:8px}
  .hm-wall-3{grid-template-columns:1fr 1fr}
  .hm-wall-3 .deck-panel:last-child:nth-child(odd){grid-column:1/-1}
  .hm-wall-3 .deck-panel:last-child:nth-child(odd) .deck-grid{grid-template-columns:repeat(4,1fr)}
  .hm-skel-hero{grid-template-columns:1.3fr 1fr}
}

/* ==========================================================================
   10. PHONE — the Amazon read: banner across the top, the two short banners
   side by side, then the six cubes 3 x 2. Nothing the shopper has to find by
   scrolling sideways, and every box still a true square.
   ========================================================================== */
@media (max-width:700px){
  :root{--hm-gap:6px;--hm-pad:10px;--hm-min:160px;--pc-gap:7px}
  .hm-h2{font-size:16px;margin:2px 0 5px}

  .hm-hero{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
  }
  /* min-height is only the floor before the image has loaded — fitHeroPanels()
     then gives each panel the artwork's own shape, so nothing is cropped. */
  .hero-l    {grid-column:1 / span 2;grid-row:1;min-height:48vw}
  .hero-l.hpanel,.hero-m1.hpanel,.hero-m2.hpanel{max-height:none}
  .hero-m1   {grid-column:1;grid-row:2;min-height:40vw}
  .hero-m2   {grid-column:2;grid-row:2;min-height:40vw}
  .hero-cubes{grid-column:1 / span 2;grid-row:3}

  .hcard-head b{font-size:14px}
  .hcard-copy{padding:12px 12px 16px}
  .hcard-copy b{font-size:16px}
  .hero-m1 .hcard-copy b,.hero-m2 .hcard-copy b{font-size:13.5px}
  .hcard-copy span{font-size:11.5px}
  .hp-dots{bottom:7px}
  .hb-bars{left:9px;bottom:8px}
  .hb-bar{width:13px}
  .hb-bar.on{width:20px}
  .hpanel-multi .hb-bars{bottom:20px}
  .hp-dot{width:6px;height:6px}
  .hp-dot.on{width:16px}
  .slot-ph .ph-in{gap:4px;padding:10px}
  .slot-ph b{font-size:12.5px}
  .slot-ph span{font-size:10.5px}
  .slot-ph em{display:none}
  .hero-l.slot-ph .ph-ico{width:30px;height:30px}

  .cube-sub{max-width:46%;font-size:10.5px}
  .pc-grid{max-width:none;padding:2px 10px 6px}
  .pc-face{border-radius:8px;box-shadow:0 4px 11px rgba(15,17,17,.12)}
  .pc-pic{padding:6px}
  .pc-txt{padding:7px 8px;gap:2px}
  .pc-txt b{font-size:12.5px}
  .pc-txt s,.pc-txt em{font-size:9.5px}
  .pc-txt small{font-size:8.5px}
  .pc-hi b{font-size:17px}
  .pc-nm{font-size:10px !important}
  .pc-glyph{width:38px;height:38px;font-size:14px}
  .pc-cap{font-size:9.5px}
  .hcard-more{font-size:11.5px;padding:2px var(--hm-pad) 9px}

  .hm-mini{margin:0 -12px;padding:0 12px 2px;scroll-snap-type:x mandatory}
  .mcard{flex:0 0 132px;height:170px}
  .hm-wall{gap:var(--hm-gap)}
  .deck{padding:var(--hm-pad) var(--hm-pad) 8px}
  .deck h3{font-size:13.5px;margin-bottom:6px;padding-right:16px}
  .deck-chev{font-size:17px}
  .deck-grid{gap:6px 5px}
  .c-off,.c-tag,.c-b,.c-r,.c-name{font-size:10.5px}
  .c-price{font-size:12px}
  .deck-more{font-size:11.5px;margin-top:6px}
  .hm-picks-head h2,.hist h2{font-size:16px}
  .pk{flex:0 0 140px}
  .hist-item{flex:0 0 80px;height:80px}
  .hm-skel-hero{grid-template-columns:1fr 1fr;height:auto}
  .hm-skel-hero .skel:first-child{grid-column:1 / span 2;height:46vw}
  .hm-skel-hero .skel{height:150px}
  .hm-skel-hero .skel:last-child{grid-column:1 / span 2;height:250px}
  .hm-skel-row{grid-template-columns:1fr 1fr}
  .hm-skel-row .skel{height:220px}
}

/* Small phones: three boxes in a row get cramped, so it becomes 2 x 3. */
@media (max-width:430px){
  :root{--hm-min:140px}
  .hero-m1,.hero-m2{min-height:42vw}
  .pc-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto)}
  .pc-txt b{font-size:14px}
  .pc-hi b{font-size:20px}
  .pc-nm{font-size:11px !important}
  .pc-cap{font-size:10px}
}

/* ==========================================================================
   11. SPEED — the home page is a very long document. Off-screen sections are
   skipped entirely until they scroll close, which is the single biggest
   scroll win here, and the intrinsic size keeps the scrollbar honest.
   ========================================================================== */
.hm-sec,.hm-tiles,.hm-strips{content-visibility:auto;contain-intrinsic-size:auto 460px}
.hm-hero-band,.hm-mini-wrap{content-visibility:visible}   /* never skip the top */
.deck,.mcard,.hm-tile,.pk{contain:layout style}
.deck,.mcard,.hm-tile{transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
@media (hover:hover){
  html:not(.lite) .deck:hover,html:not(.lite) .mcard:hover,html:not(.lite) .hm-tile:hover{transform:translateY(-2px)}
}
.cell-img,.mcard-img,.hist-img,.pk-img,.hm-tile-img{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  html:not(.lite) .cell:hover .cell-img,
  html:not(.lite) .hm-tile:hover .hm-tile-img{transform:scale(1.05)}
}
.hm-mini,.hm-picks-row,.hist-row{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

/* ==========================================================================
   12. LITE / REDUCED MOTION — no shadows, no drift, no transitions on weak
   devices; the cubes still turn, because that is the content.
   ========================================================================== */
.lite .deck,.lite .hcard,.lite .mcard,.lite .hm-tile{transition:none}
.lite .deck:hover,.lite .hcard:hover,.lite .mcard:hover{box-shadow:none;transform:none}
.lite .pc-face{box-shadow:0 3px 9px rgba(15,17,17,.10)}
.lite .cell-img,.lite .mcard-img,.lite .pk-img{transition:none}
@media (prefers-reduced-motion:reduce){
  .pcube,.hb,.hb-slide,.pc-scene,.deck,.mcard,.hm-tile{transition:none !important;animation:none !important}
  .anim-slide .hb-slide,.anim-up .hb-slide,.anim-zoom .hb-slide{transform:none !important}
  .anim-kenburns .hb-slide.on .hcard-art{animation:none !important}
}