/* ==========================================================================
   Kids Kart — /baby-gifts/  (v10.378 redesign)
   Scoped entirely under .kk so nothing leaks into the rest of the site.
   The one bold element is the occasion "gift tag"; everything else is quiet.
   Dark mode follows the site's own switch: html[data-theme="dark"].
   ========================================================================== */

.kk{
  --kk-ink:#1F1433;
  --kk-ink-2:#4A3F63;
  --kk-muted:#6E6685;
  --kk-line:rgba(31,20,51,.11);
  --kk-card:#FFFFFF;
  --kk-well:#FFFFFF;
  --kk-paper:#FBF8FC;
  --kk-rose:#E0006A;
  --kk-rose-ink:#B80057;
  --kk-amazon:#F59E0B;
  --kk-amazon-ink:#1A1206;
  --kk-focus:#6B21F4;

  /* occasion tints: soft, distinct, readable with dark text */
  --kk-peach:#FFE7DA;  --kk-peach-ink:#9A3B12;
  --kk-lilac:#ECE4FF;  --kk-lilac-ink:#5321B8;
  --kk-blush:#FFE2EE;  --kk-blush-ink:#A3164F;
  --kk-butter:#FFF1C7; --kk-butter-ink:#7A5600;
  --kk-sky:#DDEEFF;    --kk-sky-ink:#14548F;
  --kk-mint:#D9F4EA;   --kk-mint-ink:#0E6A4B;
  --kk-sand:#F2E8DA;   --kk-sand-ink:#6B4A1E;
  --kk-sage:#E4EFD9;   --kk-sage-ink:#3F6420;
  --kk-plain:#F1EEF6;  --kk-plain-ink:#3D3357;

  color:var(--kk-ink);
  font-family:'DM Sans','Noto Sans Devanagari','Helvetica Neue',Arial,sans-serif;
  padding:28px 0 72px;
}
html[data-theme="dark"] .kk{
  --kk-ink:#EFEAF9;
  --kk-ink-2:#CFC7E4;
  --kk-muted:#ABA2C6;
  --kk-line:rgba(255,255,255,.12);
  --kk-card:#1B1630;
  --kk-well:#FFFFFF;          /* product photos are shot on white; keep the well white */
  --kk-paper:#16112A;
  --kk-rose:#FF4F9A;
  --kk-rose-ink:#FF7DB4;
  --kk-focus:#B794FF;
  --kk-peach:rgba(255,150,110,.16);  --kk-peach-ink:#FFC2A6;
  --kk-lilac:rgba(160,120,255,.18);  --kk-lilac-ink:#CDB8FF;
  --kk-blush:rgba(255,110,170,.16);  --kk-blush-ink:#FFB3D2;
  --kk-butter:rgba(255,205,80,.15);  --kk-butter-ink:#FFDD85;
  --kk-sky:rgba(90,170,255,.16);     --kk-sky-ink:#A9D2FF;
  --kk-mint:rgba(60,210,160,.15);    --kk-mint-ink:#96E8C8;
  --kk-sand:rgba(220,180,130,.15);   --kk-sand-ink:#E8CDA5;
  --kk-sage:rgba(150,200,110,.15);   --kk-sage-ink:#C4E3A6;
  --kk-plain:rgba(255,255,255,.07);  --kk-plain-ink:#DCD5EE;
}

/* The site's global dark rules recolour every heading and link with
   !important. Inside Kids Kart the colours come from the tokens above, so the
   global rules are answered at the same strength. */
html[data-theme="dark"] .kk h1,
html[data-theme="dark"] .kk h3,.kk .kk-store-t{ color:var(--kk-ink) !important; -webkit-text-fill-color:var(--kk-ink) !important; }
/* Section titles keep the site's own rose heading colour, on purpose, so
   Kids Kart reads as part of TotsName. Product and idea names stay ink. */
.kk .kk-h2{ color:var(--kk-rose-ink) !important; -webkit-text-fill-color:var(--kk-rose-ink) !important; }
.kk h3,.kk .kk-store-t{ color:var(--kk-ink) !important; -webkit-text-fill-color:var(--kk-ink) !important; }

.kk *,.kk *::before,.kk *::after{ box-sizing:border-box; }
/* the site styles bare section/aside/h3 elements globally (padding, pink
   headings); zero those here first so the Kids Kart classes below decide. */
.kk :where(section,aside){ padding:0; margin:0; }
.kk a{ color:inherit; }
.kk :focus-visible{ outline:2px solid var(--kk-focus); outline-offset:3px; border-radius:8px; }
.kk ul,.kk ol{ margin:0; padding:0; }
.kk-crumb{ margin:0 0 18px; }

/* ---- shared type -------------------------------------------------------- */
.kk-h2{
  margin:0;
  font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;
  font-weight:600;
  font-size:clamp(22px,2.6vw,28px);
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--kk-ink);
}
.kk-sub{ margin:6px 0 0; font-size:14.5px; line-height:1.55; color:var(--kk-muted); max-width:64ch; }
.kk-sechead{ margin:0 0 18px; }
.kk-sechead--row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 28px; }
.kk-link{ color:var(--kk-rose-ink); font-weight:600; text-decoration:none; font-size:14px; white-space:nowrap; }
.kk-link:hover{ text-decoration:underline; text-underline-offset:3px; }
html[data-theme="dark"] .kk .kk-link{ color:var(--kk-rose-ink) !important; -webkit-text-fill-color:var(--kk-rose-ink) !important; }

/* ---- buttons ------------------------------------------------------------ */
.kk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:0 18px; border-radius:999px; border:1px solid transparent;
  font:600 14px/1 'DM Sans',sans-serif; text-decoration:none; cursor:pointer; white-space:nowrap;
}
.kk-btn-primary{ background:var(--kk-rose); color:#fff; }
.kk-btn-primary:hover{ background:var(--kk-rose-ink); }
.kk-btn-quiet{ background:transparent; color:var(--kk-ink); border-color:var(--kk-line); }
.kk-btn-quiet:hover{ border-color:var(--kk-ink-2); }
.kk-btn-ink{ background:var(--kk-ink); color:var(--kk-card); }
.kk-btn-amazon{ background:var(--kk-amazon); color:var(--kk-amazon-ink); }
.kk-btn-amazon:hover{ background:#E08B00; }
html[data-theme="dark"] .kk .kk-btn-amazon{ color:var(--kk-amazon-ink) !important; -webkit-text-fill-color:var(--kk-amazon-ink) !important; }
html[data-theme="dark"] .kk .kk-btn-ink{ color:#1B1630 !important; -webkit-text-fill-color:#1B1630 !important; }

/* tints */
.kk-tint-peach{ --t:var(--kk-peach);  --ti:var(--kk-peach-ink); }
.kk-tint-lilac{ --t:var(--kk-lilac);  --ti:var(--kk-lilac-ink); }
.kk-tint-blush{ --t:var(--kk-blush);  --ti:var(--kk-blush-ink); }
.kk-tint-butter{ --t:var(--kk-butter); --ti:var(--kk-butter-ink); }
.kk-tint-sky{ --t:var(--kk-sky);      --ti:var(--kk-sky-ink); }
.kk-tint-mint{ --t:var(--kk-mint);    --ti:var(--kk-mint-ink); }
.kk-tint-sand{ --t:var(--kk-sand);    --ti:var(--kk-sand-ink); }
.kk-tint-sage{ --t:var(--kk-sage);    --ti:var(--kk-sage-ink); }
.kk-tint-plain{ --t:var(--kk-plain);  --ti:var(--kk-plain-ink); }
.kk-ic{ width:22px; height:22px; display:block; }

/* ---- hero (existing artwork) -------------------------------------------- */
.kk-hero{ margin:0 0 36px; border-radius:22px; overflow:hidden; }
.kk-hero img{ display:block; width:100%; height:auto; }

/* ---- category page header ------------------------------------------------ */
.kk-cathead{
  display:flex; align-items:center; gap:18px;
  margin:0 0 30px; padding:26px 28px; border-radius:22px; background:var(--t);
}
.kk-cathead-ic{ flex:0 0 auto; display:grid; place-items:center; width:58px; height:58px;
  border-radius:16px; background:var(--kk-card); color:var(--ti); }
.kk-cathead-ic .kk-ic{ width:28px; height:28px; }
.kk-cathead-t{ margin:0; font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;
  font-weight:600; font-size:clamp(26px,3.4vw,38px); line-height:1.1; color:var(--kk-ink); }
.kk-cathead-s{ margin:6px 0 0; color:var(--kk-ink-2); font-size:15px; line-height:1.5; max-width:60ch; }

/* ==== OCCASION TAGS — the signature element ===============================
   Each tile is cut like a paper gift tag: the left edge is notched to a
   point and punched with a small hole. */
.kk .kk-occ{ margin:0 0 40px; }
.kk-occ .kk-h2{ margin-bottom:16px; }
.kk-occ-row{
  list-style:none; display:grid; gap:12px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.kk-tag{
  position:relative; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:12px; align-items:center;
  min-height:78px; padding:14px 16px 14px 34px;
  background:var(--t); color:var(--kk-ink); text-decoration:none;
  border-radius:6px 16px 16px 6px;
  clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%);
  transition:transform .18s ease;
}
.kk-tag::before{               /* the punched hole */
  content:""; position:absolute; left:14px; top:50%; width:9px; height:9px; margin-top:-4.5px;
  border-radius:50%; background:var(--kk-paper);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ti) 45%,transparent);
}
.kk-tag-ic{ grid-row:1 / span 2; display:grid; place-items:center; width:40px; height:40px;
  border-radius:12px; background:var(--kk-card); color:var(--ti); }
.kk-tag-name{ font-weight:700; font-size:15px; line-height:1.25; color:var(--kk-ink); }
.kk-tag-meta{ font-size:12.5px; color:var(--ti); font-weight:600; }
.kk-tag:hover{ transform:translateY(-2px); }
.kk-tag.is-on{ background:var(--ti); }
.kk-tag.is-on .kk-tag-name,.kk-tag.is-on .kk-tag-meta{ color:var(--kk-card); }
html[data-theme="dark"] .kk .kk-tag.is-on .kk-tag-name,
html[data-theme="dark"] .kk .kk-tag.is-on .kk-tag-meta{ color:#1B1630; }
.kk-tag:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px var(--kk-focus); } /* inset: the tag shape clips anything drawn outside it */

/* ---- own shop (sold & shipped by TotsName) ------------------------------- */
.kk .kk-own{ margin:0 0 44px; }
.kk-own-list{ list-style:none; display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr)); }
.kk-own-item{
  display:grid; grid-template-columns:minmax(150px,210px) 1fr; gap:22px;
  padding:18px; background:var(--kk-card); border:1px solid var(--kk-line); border-radius:20px;
}
.kk-own-media{ display:block; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:#fff; }
.kk-own-media img{ width:100%; height:100%; object-fit:contain; display:block; }
.kk-own-body{ display:flex; flex-direction:column; min-width:0; }
.kk-own-brand{ margin:0; font-size:12.5px; font-weight:700; color:var(--kk-rose-ink); }
.kk-own-name{ margin:4px 0 0; font-size:19px; line-height:1.3; font-weight:700; }
.kk-own-name a{ text-decoration:none; }
.kk-own-name a:hover{ text-decoration:underline; text-underline-offset:3px; }
.kk-own-tag{ margin:6px 0 0; font-size:14px; line-height:1.5; color:var(--kk-muted); }
.kk-own-price{ margin:12px 0 0; font-size:22px; color:var(--kk-ink); }
.kk-own-price s{ font-size:15px; color:var(--kk-muted); margin-left:6px; }
.kk-own-off{ display:inline-block; margin-left:8px; padding:3px 9px; border-radius:999px;
  background:#DFF6E8; color:#0E6A3B; font-size:12.5px; font-weight:700; vertical-align:middle; }
.kk-own-ship{ margin:2px 0 0; font-size:12.5px; color:var(--kk-muted); }
.kk-own-btns{ margin-top:auto; padding-top:14px; display:flex; flex-wrap:wrap; gap:8px; }

/* ---- picks: search bar --------------------------------------------------- */
.kk .kk-picks{ margin:0 0 24px; scroll-margin-top:96px; } /* clears the sticky header when jumped to */
.kk-find{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.kk-find-q{ position:relative; display:flex; align-items:center; }
.kk-find-q .kk-ic{ position:absolute; left:14px; width:18px; height:18px; color:var(--kk-muted); pointer-events:none; }
.kk-find-q input{
  width:min(260px,70vw); height:42px; padding:0 14px 0 40px;
  border:1px solid var(--kk-line); border-radius:999px; background:var(--kk-card); color:var(--kk-ink);
  font:15px 'DM Sans',sans-serif;
}
.kk-find-sel{
  height:42px; padding:0 34px 0 14px; border:1px solid var(--kk-line); border-radius:999px;
  background:var(--kk-card); color:var(--kk-ink); font:14px 'DM Sans',sans-serif;
}
.kk-find-clear{ font-size:14px; color:var(--kk-muted); padding:0 6px; }

/* ---- shelves (hub) ------------------------------------------------------- */
.kk-shelves{ display:block; }
.kk-shelf{ margin:0 0 34px; min-width:0; }
.kk-shelf-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 12px; }
.kk-shelf-t{ margin:0; display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700; color:var(--kk-ink); }
.kk-dot{ width:12px; height:12px; border-radius:4px; background:var(--ti); flex:0 0 auto; transform:rotate(45deg); }
/* a rail: cards keep a fixed, comfortable width, so one product never
   stretches across the page and many products scroll sideways on phones */
.kk-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,232px);
  gap:16px; overflow-x:auto; padding:2px 2px 12px; scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.kk-rail > *{ scroll-snap-align:start; }

/* ---- grid (category page) ------------------------------------------------ */
.kk-grid{ display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1024px){ .kk-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---- product card --------------------------------------------------------- */
.kk-card{
  display:flex; flex-direction:column; min-width:0;
  background:var(--kk-card); border:1px solid var(--kk-line); border-radius:18px; overflow:hidden;
}
.kk-card-link{ display:flex; flex-direction:column; flex:1 1 auto; text-decoration:none; color:inherit; }
.kk-card-media{ position:relative; aspect-ratio:1/1; background:var(--kk-well); display:grid; place-items:center; }
.kk-card-media img{ width:100%; height:100%; object-fit:contain; padding:16px; display:block; }
.kk-card-noimg{ color:#B9B2C9; }
.kk-card-noimg .kk-ic{ width:44px; height:44px; }
.kk-card-pick{
  position:absolute; top:10px; left:10px; padding:4px 10px; border-radius:999px;
  background:var(--kk-ink); color:#fff; font-size:11.5px; font-weight:700;
}
html[data-theme="dark"] .kk .kk-card-pick{ background:#1F1433; }
.kk-card-body{ padding:14px 16px 4px; border-top:1px solid var(--kk-line); }
.kk-card-brand{ margin:0; font-size:12.5px; font-weight:600; color:var(--kk-muted); }
.kk-card-name{
  margin:3px 0 0; font-size:15px; line-height:1.35; font-weight:700; color:var(--kk-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.kk-card-link:hover .kk-card-name{ text-decoration:underline; text-underline-offset:3px; }
.kk-card-age{ margin:8px 0 0; display:inline-block; padding:3px 9px; border-radius:999px;
  background:var(--kk-plain); color:var(--kk-ink-2); font-size:12px; font-weight:600; }
.kk-card-cta{
  margin:12px 16px 16px; display:flex; align-items:center; justify-content:center; min-height:40px;
  border-radius:999px; background:var(--kk-amazon); color:var(--kk-amazon-ink);
  font-weight:700; font-size:14px; text-decoration:none;
}
.kk-card-cta:hover{ background:#E08B00; }
html[data-theme="dark"] .kk .kk-card-cta{ color:var(--kk-amazon-ink) !important; -webkit-text-fill-color:var(--kk-amazon-ink) !important; }

/* "More … on Amazon" — the tile that closes each shelf */
.kk-more{
  display:flex; flex-direction:column; justify-content:center; gap:8px; min-height:100%;
  padding:22px 20px; border-radius:18px; text-decoration:none;
  background:var(--t); color:var(--kk-ink); border:1px dashed color-mix(in srgb,var(--ti) 40%,transparent);
}
.kk-more-ic{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--kk-card); color:var(--ti); }
.kk-more-t{ font-weight:700; font-size:16px; line-height:1.3; color:var(--kk-ink); text-decoration:none; }
.kk-more-t::after{ content:""; position:absolute; inset:0; border-radius:18px; } /* whole tile clicks through, except the idea links */
.kk-more{ position:relative; }
.kk-more-ideas{ position:relative; z-index:1; margin-top:14px; }
.kk-more-ideas-h{ margin:0 0 8px; font-size:13px; font-weight:600; color:var(--kk-ink-2); }
.kk-more-ideas ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.kk-more-ideas a{ display:inline-block; padding:7px 13px; border-radius:999px; background:var(--kk-card);
  color:var(--kk-ink); font-size:13.5px; font-weight:600; text-decoration:none; border:1px solid color-mix(in srgb,var(--ti) 25%,transparent); }
.kk-more-ideas a:hover{ border-color:var(--ti); }
html[data-theme="dark"] .kk .kk-more-t,html[data-theme="dark"] .kk .kk-more-ideas a{ color:var(--kk-ink) !important; -webkit-text-fill-color:var(--kk-ink) !important; }
.kk-more-s{ font-size:12.5px; color:var(--ti); font-weight:600; }
/* widened tile: reads as a banner, content set to the left at a readable width */
@media (min-width:1025px){
  .kk-more--wide{ padding:28px 32px; justify-content:center; }
  .kk-more--wide .kk-more-t{ font-size:20px; max-width:22ch; }
  .kk-more--wide .kk-more-ic{ width:52px; height:52px; }
}
.kk-more:hover > .kk-more-t{ text-decoration:underline; text-underline-offset:3px; }

.kk-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin:26px 0 0; }
.kk-pager-n{ font-size:14px; color:var(--kk-muted); }

.kk-empty{ padding:28px; border:1px dashed var(--kk-line); border-radius:18px; text-align:left; }
.kk .kk-empty--cat{ margin:0 0 40px; padding:28px; }
.kk-empty--cat{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.kk-empty-t{ margin:0; font-size:17px; font-weight:700; }

/* ---- Amazon store band ---------------------------------------------------- */
.kk-store{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px;
  padding:24px 28px; border-radius:20px;
  background:var(--kk-paper); border:1px solid var(--kk-line);
}
.kk .kk-store{ margin:8px 0 52px; padding:24px 28px; }
.kk-store-t{ margin:0; font-size:18px; font-weight:700; color:var(--kk-ink); }
.kk-store-s{ margin:4px 0 0; font-size:14.5px; color:var(--kk-muted); max-width:62ch; line-height:1.5; }

/* ---- gift ideas ----------------------------------------------------------- */
.kk .kk-ideas{ margin:0 0 52px; }
.kk-ideas-list{ list-style:none; display:grid; gap:12px 28px; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); }
.kk-idea{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--kk-line); }
.kk-idea-ic{ flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--t); color:var(--ti); }
.kk-idea-body{ min-width:0; }
.kk-idea-t{ margin:0; font-size:15.5px; font-weight:700; line-height:1.3; color:var(--kk-ink); }
.kk-idea-s{ margin:3px 0 0; font-size:14px; line-height:1.5; color:var(--kk-muted); }
.kk-idea-go{ display:inline-block; margin-top:6px; font-size:13.5px; font-weight:700; color:var(--kk-rose-ink); text-decoration:none; }
.kk-idea-go:hover{ text-decoration:underline; text-underline-offset:3px; }
html[data-theme="dark"] .kk .kk-idea-go{ color:var(--kk-rose-ink) !important; -webkit-text-fill-color:var(--kk-rose-ink) !important; }

/* ---- how it works --------------------------------------------------------- */
.kk .kk-how{ padding:30px 30px 26px; }
.kk-how{ border-radius:22px; background:var(--kk-paper); border:1px solid var(--kk-line); }
.kk-how-steps{ list-style:none; counter-reset:kk; display:grid; gap:18px 28px; margin:18px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
.kk-how-steps li{ counter-increment:kk; position:relative; padding-left:46px; font-size:14.5px; line-height:1.55; color:var(--kk-ink-2); }
.kk-how-steps li::before{
  content:counter(kk); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:var(--kk-card); border:1px solid var(--kk-line);
  font-weight:700; font-size:14px; color:var(--kk-rose-ink);
}
.kk-how-steps b{ display:block; color:var(--kk-ink); font-size:15.5px; margin-bottom:2px; }
.kk-how-note{ margin:22px 0 0; padding-top:16px; border-top:1px solid var(--kk-line); font-size:13px; line-height:1.6; color:var(--kk-muted); max-width:90ch; }

/* ---- responsive ----------------------------------------------------------- */
/* Wide screens: shelves pack side by side by size, so an occasion with one
   pick takes half a row instead of leaving three-quarters of it empty.
   --n = cells on the shelf (cards + the Amazon tile), capped at 4. */
@media (min-width:1025px){
  .kk-shelves{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:16px; }
  .kk-shelf{ grid-column:span var(--n,4); }
    .kk-shelf--fit .kk-rail{ grid-auto-flow:row; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); overflow:visible; }
  .kk-shelf--fit .kk-more{ grid-column:span var(--ts,1); }
  .kk-shelf--scroll .kk-rail{ grid-auto-columns:calc((100% - 3 * 16px) / 4); }
}
@media (min-width:641px) and (max-width:1024px){
  .kk-occ-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kk-shelves{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:16px; grid-auto-flow:row dense; }
  .kk-shelf{ grid-column:span var(--n2,2); }
  .kk-shelf .kk-rail{ grid-auto-columns:calc((100% - (var(--n2,2) - 1) * 16px) / var(--n2,2)); }
  .kk-more--wide{ grid-column:auto; }
}
@media (max-width:640px){
  .kk{ padding-top:16px; }
  .kk-hero{ border-radius:16px; margin-bottom:26px; }
  .kk-occ{ margin-bottom:34px; }
  .kk-occ-row{
    display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:78%;
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; margin:0 -5vw; padding-left:5vw; padding-right:5vw;
  }
  .kk-occ-row > li{ scroll-snap-align:start; }
  .kk-rail{ grid-auto-columns:64%; margin:0 -5vw; padding-left:5vw; padding-right:5vw; scroll-padding-left:5vw; }
  .kk-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .kk-card-media img{ padding:10px; }
  .kk-card-body{ padding:12px 12px 2px; }
  .kk-card-name{ font-size:14px; }
  .kk-card-cta{ margin:10px 12px 12px; font-size:13px; }
  .kk-own-item{ grid-template-columns:1fr; }
  .kk-own-media{ aspect-ratio:auto; max-width:none; }
  .kk-own-media img{ height:auto; }
  .kk-find{ width:100%; }
  .kk-find-q{ flex:1 1 100%; }
  .kk-find-q input{ width:100%; }
  .kk-cathead{ padding:20px; }
  .kk .kk-store,.kk .kk-how{ padding:22px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .kk-tag{ transition:none; }
  .kk-tag:hover{ transform:none; }
}

/* ==========================================================================
   v10.378 — illustrations (public/images/kids-kart/*.svg)
   One style across the page: soft tinted blob, rounded flat shapes. They
   replace places that were words only. All are decorative (alt="").
   ========================================================================== */
.kk img[src*="/kids-kart/"]{ display:block; height:auto; object-fit:contain; padding:0; }

/* page never stretches past a comfortable width, even when the browser is zoomed far out */
.kk > .container{ max-width:1240px; }

/* occasion tags: picture on the left, words on the right */
.kk-tag{ grid-template-columns:72px 1fr; column-gap:10px; padding:8px 14px 8px 30px; min-height:84px; }
.kk-tag-art{ grid-row:1 / span 2; width:72px; margin:-4px 0; }
.kk-tag::before{ left:12px; }

/* category header */
.kk-cathead{ justify-content:space-between; padding:18px 18px 18px 30px; }
.kk-cathead-copy{ min-width:0; }
.kk-cathead-art{ flex:0 0 auto; width:200px; margin:-6px 0; }

/* "More … on Amazon" tile */
.kk-more{ justify-content:flex-start; gap:6px; padding:16px 18px 20px; }
.kk-more-art{ width:100%; max-width:220px; margin:0 auto 6px; }
@media (min-width:1025px){
  .kk-more--wide{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,42%);
    grid-template-rows:auto auto 1fr; column-gap:24px; align-items:start;
    padding:30px 32px;
  }
  .kk-more--wide .kk-more-art{ grid-column:2; grid-row:1 / span 3; align-self:center; max-width:340px; margin:0; }
  .kk-more--wide .kk-more-t,.kk-more--wide .kk-more-s,.kk-more--wide .kk-more-ideas{ grid-column:1; }
  .kk-more--wide .kk-more-t{ margin-top:auto; }
}

/* store band */
.kk-store{ flex-wrap:nowrap; }
.kk-store-art{ flex:0 0 auto; width:150px; margin:-10px 0; }
.kk-store-copy{ flex:1 1 auto; min-width:0; }

/* how it works: a picture above each step */
.kk-how-steps li{ padding-left:0; padding-top:0; }
.kk-how-art{ width:100%; max-width:200px; margin:0 0 10px; }
.kk-how-steps li::before{ position:static; display:inline-grid; margin:0 8px 6px 0; vertical-align:middle; }
.kk-how-steps b{ display:inline; }
.kk-how-steps li > b::after{ content:""; display:block; margin-bottom:4px; }

/* empty states */
.kk-empty-art{ width:180px; margin:0 0 6px; }

@media (max-width:640px){
  .kk-tag{ grid-template-columns:60px 1fr; }
  .kk-tag-art{ width:60px; }
  .kk-cathead{ padding:16px 16px 16px 20px; }
  .kk-cathead-art{ width:110px; }
  .kk-store{ flex-wrap:wrap; }
  .kk-store-art{ width:120px; margin:0; }
  .kk-how-art{ max-width:160px; }
}
/* step number sits on the picture's corner, so the picture leads */
.kk-how-steps li{ position:relative; }
.kk-how-steps li::before{ position:absolute; left:0; top:4px; margin:0; z-index:1; }
.kk-how-steps b{ display:block; }
@media (min-width:1025px){
  .kk-more--wide{ grid-template-columns:minmax(0,1fr) minmax(220px,48%); }
}

/* gift ideas, grouped by occasion — one picture card per occasion */
.kk-ideas-grid{ list-style:none; display:grid; gap:16px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.kk-ideacard{ display:flex; flex-direction:column; border-radius:20px; background:var(--t); overflow:hidden; }
.kk-ideacard-art{ width:100%; max-width:220px; margin:10px auto -4px; }
.kk-ideacard-body{ flex:1 1 auto; margin:0 8px 8px; padding:14px 16px 12px; background:var(--kk-card); border-radius:14px; }
.kk-ideacard-t{ margin:0 0 6px; font-size:16.5px; font-weight:700; line-height:1.3; }
.kk-ideacard-t a{ text-decoration:none; }
.kk-ideacard-t a:hover{ text-decoration:underline; text-underline-offset:3px; }
.kk-ideacard-list{ list-style:none; }
.kk-ideacard-list li{ padding:8px 0; border-top:1px solid var(--kk-line); }
.kk-ideacard-list li:first-child{ border-top:0; padding-top:2px; }
.kk-ideacard-list a{ text-decoration:none; color:var(--kk-rose-ink); }
.kk-ideacard-list a:hover b{ text-decoration:underline; text-underline-offset:3px; }
.kk-ideacard-list b{ display:block; font-size:14.5px; line-height:1.35; }
.kk-ideacard-list span{ display:block; margin-top:2px; font-size:13px; line-height:1.45; color:var(--kk-muted); }
html[data-theme="dark"] .kk .kk-ideacard-list a{ color:var(--kk-rose-ink) !important; -webkit-text-fill-color:var(--kk-rose-ink) !important; }
/* category page: one occasion, laid out wide with the picture beside the list */
.kk-ideas-grid--one{ grid-template-columns:1fr; }
.kk-ideas-grid--one .kk-ideacard{ flex-direction:row; align-items:center; }
.kk-ideas-grid--one .kk-ideacard-art{ flex:0 0 240px; max-width:240px; margin:8px 8px 8px 16px; }
.kk-ideas-grid--one .kk-ideacard-body{ margin:8px; }
.kk-ideas-grid--one .kk-ideacard-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); column-gap:24px; }
.kk-ideas-grid--one .kk-ideacard-list li{ border-top:0; padding:4px 0; }
@media (max-width:1024px){ .kk-ideas-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .kk-ideas-grid{ grid-template-columns:1fr; }
  .kk-ideas-grid--one .kk-ideacard{ flex-direction:column; }
  .kk-ideas-grid--one .kk-ideacard-art{ flex:none; margin:10px auto -4px; max-width:200px; }
}

/* v10.413 Shop by occasion: tag words 40% bigger (15px → 21px), every tag the
   same size, words centred in their box and never spilling out of it. */
.kk-occ-row{ grid-auto-rows:1fr; align-items:stretch; }
.kk-occ-row > li{ display:flex; min-width:0; }
.kk-occ-row .kk-tag{ flex:1 1 auto; width:100%; min-width:0; min-height:104px; height:100%;
  grid-template-rows:1fr; align-content:center; }
.kk-occ-row .kk-tag-art{ grid-row:1; align-self:center; }
.kk-occ-row .kk-tag-name{ font-size:21px; line-height:1.2; letter-spacing:-.01em; min-width:0;
  overflow-wrap:break-word; hyphens:manual; text-wrap:balance; align-self:center; }
@media (max-width:640px){
  .kk-occ-row .kk-tag{ min-height:96px; }
  .kk-occ-row .kk-tag-name{ font-size:20px; }
}
/* v10.424 — credit / Gift Voucher discount note on own-shop products */
.kk-own-credit{ margin:6px 0 0; font-size:12.5px; line-height:1.45; color:#0B4F9C; }
html[data-theme="dark"] .kk-own-credit{ color:#8CC2FF; }
/* v10.424 dark mode: the primary button turned light pink on hover with white
   words on it (2.4:1). It now deepens instead of lightening. */
html[data-theme="dark"] .kk-btn-primary:hover{ background:#C2005A; color:#fff; }