/* ==========================================================================
   Site header and footer.

   These are injected at runtime by assets/js/include.js, so they used to be
   styled in three places at once — index.css, responsive.css and an inline
   <style> inside footer.html. This file is the single source; the duplicates
   have been removed.

   Palette is the site's own: brand yellow #fcc603, accent pink #e83e8c,
   ink #001430, muted #69778a.

   Header and footer run on the plum #ab2d72 instead of the yellow — the yellow
   is still the product-card / body accent, but the chrome that frames every
   page is one consistent brand colour.
   ========================================================================== */

:root {
  --ck-yellow: #fcc603;
  --ck-yellow-deep: #f0ae00;
  --ck-yellow-ink: #7a5c00;
  --ck-pink: #e83e8c;
  --ck-ink: #001430;
  --ck-muted: #69778a;
  --ck-line: #ececf1;
  --ck-cream: #fff8e4;

  /* ===== THE SITE'S ONE TYPEFACE ==========================================
     Noto Serif Ahom, and it is declared HERE rather than in style.css for a
     reason that cost a while to find: index.css says
     `body { font-family: var(--font) }`, but --font used to be defined only in
     style.css - and the HOMEPAGE does not load style.css. So on the single most
     important page of the shop the variable resolved to nothing, the rule was
     thrown away, and the body fell back to the browser's default grotesque.
     That was true long before this font was chosen.

     chrome.css is loaded by every customer page (the header and footer live in
     it), so a definition here reaches all of them. The two pages that load
     neither - forgot-password and reset-password - carry their own copy in
     auth-card.css, and that is the complete set.

     Everything that used to name "Baloo 2" now reads var(--font), so the whole
     site changes face from this one line. --ckh-font below is kept as a name
     the header's rules already use, pointing at the same value. */
  --font: "Noto Serif Ahom", serif;

  /* Chrome plum. `soft` is the on-dark variant — the base is too dark to read
     as a link colour against the footer, so hovers and rules use the soft one. */
  --ck-plum: #ab2d72;
  --ck-plum-deep: #8a2159;
  --ck-plum-dark: #5e1039;
  --ck-plum-soft: #f48fc0;
  --ck-plum-tint: #fdeef6;
  --ck-plum-line: #f4d5e6;

  /* Footer ground. Almost black but mixed with plum rather than grey, so the
     brand colours sit on top of it as accents instead of the whole panel being
     one flat pink field. */
  --ck-plum-ink: #2a0d1e;
  --ck-plum-night: #150610;
}

/* ==========================================================================
   Focus ring — site-wide

   This lives here rather than in style.css because index.php does not load
   style.css at all, and the ring has to be the same on every page.

   Two things are being fixed.

   Bootstrap 4 puts the browser's own indicator back with
   `button:focus { outline: -webkit-focus-ring-color auto 5px }`, and that is on
   plain :focus — so clicking Continue to Payment with a mouse drew a black box
   round it and left it there. Bootstrap loads before this file on every page,
   so clearing it here wins.

   With that gone the keyboard would have nothing, which is worse than a black
   box: it makes the site unusable without a mouse. So :focus-visible puts a
   ring back — brand yellow, the one colour that holds up on white, on pink and
   on the plum chrome — and :focus-visible never fires for a mouse click.

   Text fields are deliberately not in either list: their pages give them a
   border-and-glow of their own.

   Do not remove the second rule without replacing it with something visible.
   ========================================================================== */

button:focus,
summary:focus,
[role="button"]:focus,
a:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
select:focus {
  outline: none;
}

button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
a:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="file"]:focus-visible,
select:focus-visible {
  outline: 3px solid var(--ck-yellow);
  outline-offset: 2px;
}

/* The footer is plum and the header runs on it too — yellow on plum is legible
   but muddy, and white is the colour everything else up there already is. */
.ckh a:focus-visible,
.ckh button:focus-visible,
.footer_bg a:focus-visible,
.footer_bg button:focus-visible {
  outline-color: #ffffff;
}


/* ==========================================================================
   HEADER

   Three bands, and only the middle one is tall:

     1. .ckh-tick  — 34px of deep plum carrying the reason to keep shopping,
                     rotated so it is worth its height on the tenth visit too.
                     Folds away on scroll.
     2. .ckh-bar   — the logo, the search, and the shopper's own three.
     3. .ckh-rail  — chips of real category names, so the catalogue is *read*
                     on every page rather than hidden behind a button. The five
                     site pages sit at the far end; "All Toys" opens the tree.

   Below 1200px the page links move into a drawer that slides in from the left
   rather than a band that pushes the page down — on a phone the menu is
   somewhere you go and come back from, and the page should still be where you
   left it.

   -------------------------------------------------------------------------
   TWO THINGS THIS FILE HAS TO FIGHT

   1. index.css carries `a:link, a:visited { color: #adacb1; font-size: 16px }`
      for the homepage's own links. That is a (0,1,1) selector, so it beats
      every single-class rule — which is why the category chips and the account
      labels rendered in light grey at 16px whatever this file asked for, and
      why the whole band read as switched off. Every rule below that colours or
      sizes an anchor is therefore written `.ckh .ckh-thing`, which outranks it.

   2. style.css carries `form { display: flex; flex-direction: column }`, so
      .ckh-search has to claim its direction back by name.

   Class names assets/js/include.js and assets/js/custom.js reach for are kept
   verbatim: .custom-sticky-top / .is-sticky, .ckh-searchwrap, .ckh-acts,
   .ckh-menu .nav-link, .ckh-drawer-acts, .search-suggestions.
   ========================================================================== */

.ckh {
  /* The header's own type. Kept as a name because the header's rules already
     use it, but it is no longer a font of its own - it is the site's one face,
     from --font on :root above. */
  --ckh-font: var(--font);

  /* Warm near-black rather than the site's navy --ck-ink. On a header built
     out of plum and yellow the navy reads as a fourth, colder hue. */
  --ckh-ink: #2b1124;
  --ckh-ink-soft: #7a6270;

  /* One tint for the plum furniture, one step deeper for its hover. */
  --ckh-tint: #fdeef6;
  --ckh-tint-hi: #fbdeeb;
}

/* style.css carries a global `body { display:flex; flex-direction:column;
   align-items:center }`, so anything sitting directly in the body is a flex
   item and shrinks to its own content — the header would end up ~900px wide,
   centred, with white gaps either side.

   Two sets of selectors because the header and footer reach the page two ways:
   the .html pages still have the #header / #footer divs that include.js fills,
   while the .php pages `include` the markup so its own root elements land in
   the body directly. Either shape has to claim the full line. */
#header,
#footer,
body > .custom-sticky-top,
body > .footer_bg {
  width: 100%;
}

/* The dock is NOT in that list. It used to be, and `body > .footermenu`
   (specificity 0,1,1) beat the `.footermenu` rule in the media query below
   (0,1,0) — so the dock got width:100% on top of left:3%, and sat 3% off the
   right edge of every phone. It is a fixed, centred pill; it sizes itself. */

.custom-sticky-top {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 20, 48, 0.06);
  transition: box-shadow 0.3s ease;
}

.custom-sticky-top.is-sticky { box-shadow: 0 10px 30px -14px rgba(43, 17, 36, 0.3); }

/* The drawer and its scrim are children of this element, so they are sealed
   inside the stacking context its own z-index opens — a panel at z-index 1001
   in here still loses to the fixed bottom dock at 99999 out there, which is
   what left the dock sitting on top of an open menu. While the drawer is open
   the whole header goes above it; the rest of the time it stays at 999 so it
   does not outrank the dock on every other page. */
.custom-sticky-top.is-drawer { z-index: 100000; }

.ckh a { text-decoration: none; }
.ckh button { font: inherit; cursor: pointer; }

/* The list reset, written so it cannot outrank the rules that follow it.
   As a plain `.ckh ul` it was (0,1,1) — one class and one element — which beat
   every single-class rule in this file and silently zeroed five of them: the
   gap and the indent under a category in the catalogue panel, the rule and
   padding before the page links on the rail, and the space under the drawer's
   tiles, its category tree and its menu. Nothing errored; the spacing just
   never arrived, and putting it back in the component rule did nothing because
   the component rule was never winning.

   `:where()` contributes no specificity of its own, so this is (0,1,0): still
   enough to beat bootstrap's `dl, ol, ul { margin-bottom: 1rem }`, and it now
   ties with the component rules below — which win on order, being later. */
.ckh :where(ul) { list-style: none; margin: 0; padding: 0; }

/* Brand hairline closing the whole header off — the one place plum and the
   house yellow sit together, and it stops the white header dissolving into a
   white page on the sections that have no coloured band of their own. */
.ckh::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--ck-plum) 0%, var(--ck-plum-soft) 45%, var(--ck-yellow) 100%);
}

/* --- 1. the ticker --------------------------------------------------------
   A flat deep plum, not a gradient. Three stops across a 34px strip turned the
   one line of copy into a smear with no single background to read it against;
   flat, the white text and the yellow icon are the only things happening. */
.ckh-tick {
  background: #7c1c4c;
  color: #fff;
  max-height: 34px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.custom-sticky-top.is-sticky .ckh-tick { max-height: 0; opacity: 0; }

.ckh-tick__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 34px;
}

/* The messages are stacked on top of each other and cross-faded, so the band
   never changes height and the layout below it never moves. Height comes from
   the band, not from the messages, so an absent message cannot collapse it. */
.ckh-tick__rail {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  margin: 0;
}

.ckh .ckh-tick__msg {
  position: absolute;
  inset: 0;
  font-family: var(--ckh-font);
  line-height: 34px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}

.ckh .ckh-tick__msg.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ckh .ckh-tick__msg i { color: var(--ck-yellow); margin-right: 5px; }

.ckh-tick__links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 0 0 auto;
}

.ckh .ckh-tick__links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ckh-font);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.15s;
}

.ckh .ckh-tick__links a:hover { color: #fff; }
.ckh .ckh-tick__links i { font-size: 12px; color: var(--ck-plum-soft); }

/* --- 2. the bar ----------------------------------------------------------- */
.ckh-bar { background: #fff; }

.ckh-bar__in {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 0;
  transition: padding 0.25s ease;
}

.custom-sticky-top.is-sticky .ckh-bar__in { padding: 6px 0; }

.ckh-logo { flex: 0 0 auto; display: block; }

/* The shop's name and face, and the only thing on the bar that is the brand
   rather than a control — it had been sized as if it were one more icon in the
   row. The source is 1160px square, so there is nothing to lose by drawing it
   at a size that reads. The bar's own padding comes down to pay for it. */
.ckh-logo img {
  display: block;
  height: 72px;
  width: auto;
  transition: height 0.25s ease;
}

.custom-sticky-top.is-sticky .ckh-logo img { height: 54px; }

/* Below the desktop breakpoint only. First in the source rather than floated
   into place, so tabbing starts where the eye does. */
.ckh-burger {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: 14px;
  background: var(--ckh-tint);
}

.ckh-burger span {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ck-plum);
  transition: transform 0.25s ease, opacity 0.18s ease;
}

.ckh.is-drawer .ckh-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.ckh.is-drawer .ckh-burger span:nth-child(2) { opacity: 0; }
.ckh.is-drawer .ckh-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* --- the search ----------------------------------------------------------
   Capped and centred. Left to fill the row it ran to about 1050px on a wide
   screen — a search box wider than most of the pages it searches, with the
   placeholder marooned at one end and the button at the other. 520px is wide
   enough for a toy name and a brand, and the space it gives back is what lets
   the logo and the three tiles breathe. */
.ckh-searchwrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  /* Held at 520px on purpose. A wider box looked wrong - the placeholder
     marooned at one end and the Search button at the other - so the white space
     either side is closed by narrowing the header's own container instead, not
     by stretching this. See .ckh .container below. */
  max-width: 520px;
  /* Keeps the box centred between the logo and the tiles instead of pushed
     against one of them - the leftover width is split evenly. */
  margin-left: auto;
  margin-right: auto;
}

.ckh-search {
  display: flex;
  /* style.css carries a global `form { display:flex; flex-direction:column }`
     for the site's real forms. Saying `display:flex` here is not enough to
     undo it — the direction has to be claimed back by name, or the icon, the
     field and the button stack up on the pages that load style.css. */
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 5px 0 17px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid #f0dfe9;
  transition: border-color 0.18s, box-shadow 0.18s, height 0.25s ease;
}

.ckh-search:focus-within {
  border-color: var(--ck-plum);
  box-shadow: 0 0 0 4px rgba(171, 45, 114, 0.13);
}

.custom-sticky-top.is-sticky .ckh-search { height: 42px; }

.ckh .ckh-search__icon { flex: 0 0 auto; font-size: 15px; color: #c09cb2; transition: color 0.15s; }
.ckh-search:focus-within .ckh-search__icon { color: var(--ck-plum); }

.ckh .ckh-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--ckh-font);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ckh-ink);
}

.ckh .ckh-search input::placeholder { color: #b09aa6; font-weight: 400; }
.ckh-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ckh .ckh-search button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 19px;
  border: 0;
  border-radius: 999px;
  background: var(--ck-plum);
  font-family: var(--ckh-font);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 6px 14px -7px rgba(171, 45, 114, 0.9);
  transition: background 0.15s, height 0.25s ease;
}

.ckh .ckh-search button:hover { background: var(--ck-plum-deep); }
.ckh .ckh-search button:focus-visible { outline: 3px solid var(--ck-yellow); outline-offset: 2px; }
.custom-sticky-top.is-sticky .ckh-search button { height: 32px; }

/* The magnifier is the small-screen form of this button; the word is the wide
   one. Both are in the markup so neither needs JS to appear. */
.ckh .ckh-search button i { display: none; }

/* --- the live suggestions ------------------------------------------------
   include.js fills this as you type. It hangs off .ckh-searchwrap, which is
   the positioned ancestor, so it lines up with the box rather than the page. */
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--ck-plum-line);
  box-shadow: 0 22px 50px -20px rgba(43, 17, 36, 0.4);
  display: none;
}

.search-suggestions.show { display: block; }

.ckh .search-suggestions .s-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  font-family: var(--ckh-font);
  color: var(--ckh-ink);
  transition: background 0.13s;
}

.ckh .search-suggestions .s-item:hover { background: var(--ckh-tint); color: var(--ckh-ink); }

.search-suggestions .s-item img {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--ck-cream);
  padding: 3px;
}

.ckh .search-suggestions .s-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  /* Two lines, then stop. A long toy name would otherwise make one row four
     lines tall and push the rest of the results off the screen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ckh .search-suggestions .s-price {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--ck-plum);
  white-space: nowrap;
}

.ckh .search-suggestions .s-empty {
  padding: 18px 14px;
  text-align: center;
  font-family: var(--ckh-font);
  font-size: 13.5px;
  color: var(--ckh-ink-soft);
}

/* --- account / wishlist / cart -------------------------------------------
   A round tinted disc each, and the cart filled — three grey squares beside a
   grey search box was most of what made the right-hand end of the bar read as
   a toolbar rather than as the shopper's own corner. */
/* The Track your Order tile, to the right of the search box.
   There were two of these — a "Visit our store · Jalandhar" tile sat on the
   left as well, and the shop asked for it to go. The rule is kept generic
   (.ckh-side) rather than renamed, so putting a second one back is markup only.

   It borrows .ckh-act wholesale, so only three things differ:

   flex: 0 0 auto        they must not stretch; the search keeps the slack
   colour                quieter than the account tiles. These are useful, not
                         the reason anybody came, and a tile as loud as the
                         basket would fight it for attention
   display below 1200px  none, and that rule lives with the other
                         max-width: 1199.98px overrides further down — NOT here.
                         `.ckh .ckh-act { display: flex }` sits below this block
                         at equal specificity, so a `display: none` written up
                         here loses to it and the tiles stay visible on a
                         tablet. 1200px is where .ckh-act__text is already
                         hidden and the bar is down to icons; another tile
                         there would push the search into them. */
.ckh .ckh-side {
  flex: 0 0 auto;
  color: #6b5b63;
}

.ckh .ckh-side .ckh-act__box {
  background: #f6f1f3;
  color: #8d3363;
}

.ckh .ckh-side:hover .ckh-act__box {
  background: #f0e3ea;
}

.ckh .ckh-side .ckh-act__text small { opacity: 0.8; }

.ckh-acts {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.ckh .ckh-act {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  font-family: var(--ckh-font);
  color: var(--ckh-ink);
  transition: background 0.15s, color 0.15s;
}

.ckh .ckh-act:hover { background: var(--ckh-tint); color: var(--ck-plum-deep); }
.ckh .ckh-act:focus-visible { outline: 3px solid var(--ck-yellow); outline-offset: 2px; }

.ckh-act__box {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ckh-tint);
  color: var(--ck-plum);
  font-size: 18px;
  transition: background 0.15s, transform 0.15s;
}

.ckh-act:hover .ckh-act__box { background: var(--ckh-tint-hi); transform: translateY(-1px); }

/* The cart is the one of the three that finishes the visit, so it is the one
   that is filled rather than tinted. */
.ckh-act--cart .ckh-act__box {
  background: var(--ck-plum);
  color: #fff;
  box-shadow: 0 6px 14px -7px rgba(171, 45, 114, 0.9);
}

.ckh-act--cart:hover .ckh-act__box { background: var(--ck-plum-deep); }

/* Yellow on plum-ink rather than white on red: the count is a number to be
   read, and this is the only pairing on the header that passes at 11px. */
.ckh .ckh-act__box sup,
.ckh .ckh-face sup {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--ck-yellow);
  font-family: var(--ckh-font);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ck-yellow-ink);
  /* Centred by flex, not by line-height - see the note in style.css beside
     .cat-tree__n. `padding-top: .33em` is the ink nudge, in em so it scales
     with whatever font-size this badge is set at. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-top: .33em;

}

.ckh .ckh-act__box sup.is-zero,
.ckh .ckh-face sup.is-zero { display: none; }

.ckh-act__text { display: flex; flex-direction: column; line-height: 1.15; }
.ckh .ckh-act__text small { font-size: 11.5px; font-weight: 500; color: var(--ckh-ink-soft); }
.ckh .ckh-act__text b { font-size: 15px; font-weight: 700; white-space: nowrap; color: inherit; }
.ckh .ckh-act:hover .ckh-act__text small { color: inherit; opacity: 0.7; }

/* The customer's photo, or the letter standing in for it. Used inside the disc
   on the bar and on its own in the drawer, so it carries its own size and
   gives it up to the disc. */
.ckh .ckh-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: visible;
  background: var(--ckh-tint);
  font-family: var(--ckh-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--ck-plum);
}

.ckh .ckh-face.has-photo { overflow: hidden; }
.ckh-face img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

.ckh .ckh-act__box .ckh-face {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}

.ckh-act--me:hover .ckh-face.has-photo { box-shadow: 0 0 0 3px rgba(171, 45, 114, 0.18); }

/* --- 3. the rail ---------------------------------------------------------
   Positioned, because the catalogue panel hangs off it. */
.ckh-rail {
  position: relative;
  background: #fff;
  border-top: 1px solid #f5eaf1;
}

.ckh-rail__in { display: flex; align-items: center; gap: 14px; }

/* The chips and their two edges. Positioned, because the fades and the nudge
   buttons sit over the ends of the scroller. */
.ckh-chipwrap { position: relative; flex: 1 1 auto; min-width: 0; }

/* Cut off with no warning reads as a bug; faded reads as "there is more". Both
   edges are drawn but only shown when the scroll position says so. */
.ckh-chipwrap::before,
.ckh-chipwrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 56px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.ckh-chipwrap::before { left: 0;  background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)); }
.ckh-chipwrap::after  { right: 0; background: linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)); }
.ckh-chipwrap.can-l::before { opacity: 1; }
.ckh-chipwrap.can-r::after  { opacity: 1; }

/* Hidden from the tab order and from screen readers on purpose: they move the
   view, they do not go anywhere, and every chip they reveal is already in the
   tab order behind them. */
.ckh-nudge {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  padding: 0;
  border: 1px solid #f0dfe9;
  border-radius: 50%;
  background: #fff;
  color: var(--ck-plum);
  font-size: 16px;
  box-shadow: 0 4px 12px -4px rgba(43, 17, 36, 0.32);
  transition: background 0.15s, transform 0.15s;
}

.ckh-nudge:hover { background: var(--ckh-tint); transform: scale(1.06); }
.ckh-nudge--l { left: -2px; }
.ckh-nudge--r { right: -2px; }
.ckh-chipwrap.can-l .ckh-nudge--l,
.ckh-chipwrap.can-r .ckh-nudge--r { display: grid; }

/* On a touch screen the rail is swiped, and a button sitting over the first
   chip is one more thing between the shopper and the category. */
@media (hover: none) {
  .ckh-nudge { display: none !important; }
}

/* Sideways-scrolling rather than wrapping: a second row of chips would double
   the height of the band for the categories nobody scrolled to. */
.ckh-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ckh-chips::-webkit-scrollbar { display: none; }

/* Each chip painted in its own colour — a tint for the ground, the matching
   ink for the name. A rail of white pills with grey labels is what a disabled
   control looks like, which is a strange thing for a toy shop's catalogue to
   be. The colours come from header.php as --chip / --chip-bg / --chip-bg-hi so
   the same three follow the category into the mega panel and the drawer. */
.ckh .ckh-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px 0 5px;
  border: 0;
  border-radius: 999px;
  background: var(--chip-bg, var(--ckh-tint));
  font-family: var(--ckh-font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--chip, var(--ck-plum-deep));
  white-space: nowrap;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.ckh .ckh-chip:hover {
  background: var(--chip-bg-hi, var(--ckh-tint-hi));
  color: var(--chip, var(--ck-plum-deep));
  transform: translateY(-1px);
}

.ckh .ckh-chip:focus-visible { outline: 3px solid var(--ck-yellow); outline-offset: 2px; }

/* White, so a category photo shot on white still reads inside a tinted pill. */
.ckh-chip__disc {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  color: var(--chip, var(--ck-plum));
  font-size: 12.5px;
  font-weight: 700;
}

.ckh-chip__disc img { width: 100%; height: 100%; object-fit: contain; padding: 3px; display: block; }

/* The way into the whole tree. Solid, because it is the one chip on the rail
   that opens something rather than going somewhere. */
.ckh .ckh-chip--all {
  padding: 0 17px;
  background: var(--ck-plum);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 7px 16px -8px rgba(171, 45, 114, 0.95);
}

.ckh .ckh-chip--all:hover { background: var(--ck-plum-deep); color: #fff; }
.ckh-chip__caret { font-size: 14px; opacity: 0.9; transition: transform 0.2s; }
.ckh.is-mega .ckh-chip__caret { transform: rotate(180deg); }

/* The five site pages. Parked past a rule at the end of the rail so they read
   as a different kind of thing from the categories beside them. */
.ckh-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding-left: 14px;
  border-left: 1px solid #f0e4ec;
}

.ckh .ckh-menu .nav-link {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: var(--ckh-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--ckh-ink);
  transition: color 0.15s, background 0.15s;
}

.ckh .ckh-menu .nav-link:hover { color: var(--ck-plum-deep); background: var(--ckh-tint); }
.ckh .ckh-menu .nav-link.active { color: #fff; background: var(--ck-plum); }

/* --- the catalogue panel -------------------------------------------------
   Full width, because it is the whole catalogue rather than one branch of it
   and has no business being 240px wide. */
.ckh-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  padding: 24px 0 20px;
  background: #fff;
  border-top: 1px solid #f5eaf1;
  box-shadow: 0 28px 48px -24px rgba(43, 17, 36, 0.5);
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.ckh.is-mega .ckh-mega { opacity: 1; visibility: visible; transform: none; }

/* Columns that flow, not a grid.
   A grid puts every category in a row, and a row is as tall as the tallest
   thing in it — so "Soft Toys" with three sub-categories left "Skin Care" and
   "Premium Dolls" beside it sitting over a hole the same height, and the panel
   came out mostly gaps. Multi-column packs each category directly under the
   one above it in its column. Reading order becomes down-then-across, which is
   how a list of names in columns is read anyway. */
.ckh-mega__grid {
  columns: 232px;
  column-gap: 28px;
}

/* Without this a category can be split across a column break, leaving its name
   at the foot of one column and its sub-categories at the head of the next. */
.ckh-mega__col {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 18px;
}

.ckh .ckh-mega__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--chip-bg, var(--ckh-tint));
  font-family: var(--ckh-font);
  color: var(--chip, var(--ck-plum-deep));
  transition: background 0.15s;
}

.ckh .ckh-mega__head:hover { background: var(--chip-bg-hi, var(--ckh-tint-hi)); color: var(--chip, var(--ck-plum-deep)); }

.ckh-mega__disc {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  color: var(--chip, var(--ck-plum));
  font-size: 16px;
  font-weight: 700;
}

.ckh-mega__disc img { width: 100%; height: 100%; object-fit: contain; padding: 5px; display: block; }
.ckh .ckh-mega__name { font-size: 15.5px; font-weight: 700; line-height: 1.2; }

/* The sub-categories hang off the head on a spine in the category's own tint.
   Loose under it they read as three unrelated words that happened to land
   below a coloured card — the rule is what says "these belong to that", and it
   costs 2px. Indented to start under the middle of the head's disc. */
.ckh-mega__list {
  margin: 10px 0 0 22px;
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--chip-bg-hi, var(--ckh-tint-hi));
}

.ckh-mega__list > li + li { margin-top: 3px; }

/* A sub-category that carries tags of its own needs a little air under them
   before the next name, or the tag row reads as belonging to whichever line it
   ends up closest to. */
.ckh-mega__list > li:has(.ckh-mega__kids) + li { margin-top: 6px; }

/* A row rather than a bare link, so there is something to highlight on hover —
   a naked word with a colour change is a weaker target than it looks. */
.ckh .ckh-mega__list > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 9px;
  font-family: var(--ckh-font);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ckh-ink);
  transition: background 0.14s, color 0.14s;
}

.ckh .ckh-mega__list > li > a::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--chip, var(--ck-plum));
  opacity: 0.5;
  transition: opacity 0.14s, transform 0.14s;
}

.ckh .ckh-mega__list > li > a:hover {
  background: var(--chip-bg, var(--ckh-tint));
  color: var(--chip, var(--ck-plum));
}

.ckh .ckh-mega__list > li > a:hover::before { opacity: 1; transform: scale(1.3); }

/* The third level, as tags. Small, wrapping, and clearly a different kind of
   thing from the line above them — which a run of dot-separated grey words at
   the same indent never managed to be. */
.ckh .ckh-mega__kids {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 2px 22px;
  font-family: var(--ckh-font);
}

.ckh .ckh-mega__kids a {
  padding: 3px 10px;
  border-radius: 999px;
  background: #f7f3f6;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ckh-ink-soft);
  transition: background 0.14s, color 0.14s;
}

.ckh .ckh-mega__kids a:hover {
  background: var(--chip-bg-hi, var(--ckh-tint-hi));
  color: var(--chip, var(--ck-plum));
}

.ckh .ckh-mega__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--ck-plum);
  font-family: var(--ckh-font);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 8px 18px -9px rgba(171, 45, 114, 0.95);
  transition: background 0.15s, gap 0.15s;
}

.ckh .ckh-mega__all:hover { background: var(--ck-plum-deep); color: #fff; gap: 14px; }

/* --- the drawer ----------------------------------------------------------
   Slides in over the page instead of pushing it down. `hidden` on the scrim is
   the no-JS state — the header's own script clears it on wire-up and hands the
   showing and hiding to the class below, so the fade has something to animate
   from. */
.ckh-scrim {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(43, 17, 36, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}

.ckh.is-drawer .ckh-scrim { opacity: 1; visibility: visible; }

.ckh-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  width: min(330px, 86vw);
  background: #fff;
  box-shadow: 0 0 60px rgba(43, 17, 36, 0.35);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

.ckh.is-drawer .ckh-drawer { transform: none; visibility: visible; }

.ckh-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 13px 16px;
  border-bottom: 1px solid #f5eaf1;
}

.ckh-drawer__logo img { display: block; height: 44px; width: auto; }

.ckh-drawer__x {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--ckh-tint);
  color: var(--ck-plum);
  font-size: 17px;
  transition: background 0.15s;
}

.ckh-drawer__x:hover { background: var(--ckh-tint-hi); }

.ckh-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px 28px;
}

/* The shopper's own three first: on a phone they are the reason the menu was
   opened more often than any page link is. */
.ckh-drawer-acts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.ckh .ckh-drawer-acts a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 13px 6px;
  border-radius: 16px;
  background: var(--ckh-tint);
  font-family: var(--ckh-font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ckh-ink);
  text-align: center;
  transition: background 0.15s, color 0.15s;
}

.ckh .ckh-drawer-acts a:hover { background: var(--ckh-tint-hi); color: var(--ck-plum-deep); }
.ckh .ckh-drawer-acts .ckh-face { width: 38px; height: 38px; background: #fff; }
.ckh .ckh-drawer-acts .ckh-face sup { border-color: var(--ckh-tint); }

.ckh .ckh-drawer__cap {
  margin: 0 0 9px;
  font-family: var(--ckh-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ckh-ink-soft);
}

/* The category tree, one level deep behind a caret. Two levels in a 330px
   panel is a list of indents nobody can read the shape of. */
.ckh-tree {
  margin-bottom: 20px;
  border: 1px solid #f5eaf1;
  border-radius: 16px;
  overflow: hidden;
}

.ckh-tree > li + li { border-top: 1px solid #f5eaf1; }
.ckh-tree__row { display: flex; align-items: stretch; }

.ckh .ckh-tree__row > a {
  flex: 1 1 auto;
  padding: 13px 14px;
  border-left: 4px solid var(--chip, var(--ck-plum));
  font-family: var(--ckh-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--ckh-ink);
}

.ckh .ckh-tree__row > a:hover { background: var(--chip-bg, var(--ckh-tint)); color: var(--chip, var(--ck-plum)); }

.ckh-tree__more {
  flex: 0 0 auto;
  width: 46px;
  border: 0;
  background: transparent;
  color: var(--ckh-ink-soft);
  font-size: 16px;
}

.ckh-tree__more i { display: block; transition: transform 0.22s ease; }
.ckh-tree > li.is-open .ckh-tree__more i { transform: rotate(180deg); }

.ckh-tree__kids {
  max-height: 0;
  overflow: hidden;
  background: #fdf8fb;
  transition: max-height 0.28s ease;
}

.ckh-tree > li.is-open .ckh-tree__kids { max-height: 70vh; }

.ckh .ckh-tree__kids a {
  display: block;
  padding: 10px 14px 10px 26px;
  font-family: var(--ckh-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--ckh-ink-soft);
}

.ckh .ckh-tree__kids a:hover { color: var(--ck-plum); }

/* The same five links as the rail, stacked. A second .ckh-menu so include.js
   gives them the same remembered highlight. */
.ckh-menu--drawer {
  display: block;
  margin-bottom: 20px;
  padding-left: 0;
  border-left: 0;
}

.ckh .ckh-menu--drawer .nav-link { padding: 12px 14px; border-radius: 12px; font-size: 15px; }

.ckh-drawer__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid #f5eaf1;
}

.ckh .ckh-drawer__foot a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ckh-font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ckh-ink-soft);
  word-break: break-word;
}

.ckh .ckh-drawer__foot a:hover { color: var(--ck-plum); }
.ckh .ckh-drawer__foot i { color: var(--ck-plum); }

/* ==========================================================================
   Header responsive
   ========================================================================== */

/* Below the desktop breakpoint the five page links move into the drawer and
   the three discs lose their labels — the row cannot hold all of it, and the
   search is the thing that must not shrink. */
@media (max-width: 1199.98px) {
  .ckh-burger { display: flex; }
  .ckh-rail .ckh-menu { display: none; }
  .ckh-act__text { display: none; }
  .ckh .ckh-act { padding: 3px; gap: 0; }
  .ckh-logo img { height: 64px; }
  .custom-sticky-top.is-sticky .ckh-logo img { height: 50px; }
  /* Nothing on the right of it to balance against any more, so it takes the
     middle of what is left rather than sitting against the tiles. */
  .ckh-searchwrap { max-width: 560px; }
  /* The Track your Order tile steps aside: the account tiles have just lost
     their own labels, so there is no room for another. */
  .ckh .ckh-side { display: none; }
}

@media (max-width: 991.98px) {
  /* The email address is the first thing to go: it is the longest item on the
     strip and the least likely to be used from a phone. */
  .ckh-tick__mail { display: none; }
  .ckh-tick__links { gap: 16px; }
}

@media (max-width: 767.98px) {
  /* The bar cannot hold the search on the same line as the logo and the
     discs, so the search takes a line of its own — full width, which is what
     it wants anyway. */
  .ckh-tick__links { display: none; }
  .ckh-tick__in { justify-content: center; }
  .ckh .ckh-tick__msg { font-size: 12.5px; text-align: center; }

  .ckh-bar__in { flex-wrap: wrap; gap: 10px 12px; padding: 10px 0; }
  .custom-sticky-top.is-sticky .ckh-bar__in { padding: 8px 0; }

  .ckh-burger     { order: 1; }
  .ckh-logo       { order: 2; }
  .ckh-acts       { order: 3; margin-left: auto; }
  .ckh-searchwrap { order: 4; flex: 1 1 100%; max-width: none; margin: 0; }

  .ckh-logo img { height: 54px; }
  .custom-sticky-top.is-sticky .ckh-logo img { height: 44px; }

  .ckh-search { height: 46px; padding: 0 5px 0 15px; }
  .custom-sticky-top.is-sticky .ckh-search { height: 42px; }

  /* Icon rather than word: "Search" costs 60px on a 375px line, and the
     magnifier already sits at the other end saying the same thing. */
  .ckh .ckh-search button { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
  .custom-sticky-top.is-sticky .ckh-search button { width: 34px; height: 34px; }
  .ckh .ckh-search button span { display: none; }
  .ckh .ckh-search button i { display: block; font-size: 15px; }

  .ckh-act__box { width: 40px; height: 40px; font-size: 17px; }
  .ckh .ckh-face { width: 40px; height: 40px; }

  .ckh-mega { max-height: calc(100vh - 200px); padding: 18px 0 16px; }
  .ckh-mega__grid { gap: 14px 20px; }
}

@media (max-width: 400px) {
  .ckh-logo img { height: 46px; }
  .ckh-acts { gap: 2px; }
  .ckh .ckh-chip { height: 36px; font-size: 13.5px; }
  .ckh-chip__disc { width: 26px; height: 26px; }
}

/* ==========================================================================
   FOOTER

   A plum-black ground, not the mid-plum it was. At full brand strength the
   whole panel was one flat pink field: headings, links and accents all landed
   within a few steps of each other and nothing led. Dropped to near-black the
   same plum becomes the accent — chips, hovers and rules read instantly, and
   the type gets a proper contrast range to work in.

   The partner marks sit on a white plate — one of them (The Oberoi) is dark
   green on transparent and would disappear otherwise.
   ========================================================================== */

.footer_bg {
  position: relative;
  padding: 66px 0 0;
  /* Both washes stay in the plum/magenta family. A yellow one down here turned
     the bottom-right corner brown where it met the plum — warm, but dirty. The
     yellow earns its place in the hairline, the chips and the hovers instead. */
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(171, 45, 114, 0.32) 0%, rgba(171, 45, 114, 0) 60%),
    radial-gradient(70% 60% at 92% 100%, rgba(232, 62, 140, 0.16) 0%, rgba(232, 62, 140, 0) 65%),
    linear-gradient(180deg, var(--ck-plum-ink) 0%, var(--ck-plum-night) 100%);
  color: #b9a3b0;
  overflow: hidden;
}

/* The same plum-to-yellow hairline that closes the header, so the two ends of
   the page are stated the same way. */
.footer_bg::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ck-plum) 0%, var(--ck-plum-soft) 45%, var(--ck-yellow) 100%);
}

/* --- decoration ----------------------------------------------------------- */

.footer_bg .container { position: relative; z-index: 2; }

.footer_blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: ckFootDrift 20s ease-in-out infinite;
}

.footer_blob--a {
  top: -120px;
  left: 6%;
  width: 380px;
  height: 380px;
  background: rgba(232, 62, 140, 0.3);
}

.footer_blob--b {
  right: 4%;
  bottom: -170px;
  width: 420px;
  height: 420px;
  background: rgba(123, 82, 224, 0.22);
  animation-direction: reverse;
  animation-duration: 26s;
}

@keyframes ckFootDrift {
  50% { transform: translate3d(34px, -26px, 0) scale(1.14); }
}

/* A band of dots just under the top edge — the toy-shop equivalent of a rule.
   Pure CSS: one radial-gradient tile repeated across, fading out downwards. */
.footer_confetti {
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 1.6px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}

/* The old decoration pointed at ../img/png/footer-bottom-shape-3.png, which does
   not exist anywhere in the project — it 404'd on every page load. */

.logo-images {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

/* The three marks share the plate rather than sitting at fixed widths against
   its left edge — at fixed widths they came up ~70px short and left a bare
   white gap at the end of the plate. Each box grows to take a share of the
   width and `contain` keeps the artwork's own proportions inside it. */
.logo-images img {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 58px;
  object-fit: contain;
}

/* The Oberoi wordmark is wide and short — its wings eat most of the box width
   while the lettering stays small — so it needs a bigger share than the other
   two to read at the same weight. */
.logo-images img:last-child { flex-grow: 1.7; }

.footer_box p {
  font-size: 14px;
  line-height: 1.75;
  color: #b9a3b0;
  margin-bottom: 22px;
}

.footer_info ul { padding: 0; margin: 0; }

.footer_info ul li {
  display: flex;
  gap: 13px;
  margin-top: 14px;
  list-style: none;
  /* Centred, not top-aligned. The address runs to two lines, so pinning the
     chip to the first line left it sitting high against its own text while the
     single-line phone and email rows next to it looked centred. */
  align-items: center;
}

/* Solid plum chips on the dark ground. Against the old mid-plum panel these had
   to be white plates to show up at all, which made three bright squares the
   loudest thing in the footer. */
.footer_info ul li i {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--ck-plum);
  color: #fff;
  border: 0;
  font-size: 13px;
  transition: background 0.22s, color 0.22s;
}

/* Was the brand yellow, which is the body accent — in the footer it was the
   only warm colour on a plum ground and read as a highlight the row had not
   earned. The accent pink is the same family as the chip's own plum, so hover
   lights the chip up instead of swapping it for a different brand. */
.footer_info ul li:hover i {
  background: var(--ck-pink);
  color: #fff;
}

.footer_info ul li span,
.footer_info ul li a {
  font-size: 14px;
  line-height: 1.6;
  color: #c9b3c1;
  text-decoration: none;
  transition: color 0.2s;
}

.footer_info ul li a:hover { color: #fff; }

.footer_social ul {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer_social ul li a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  color: #c9b3c1;
  font-size: 14px;
  text-decoration: none;
  transition: 0.22s;
}

.footer_social ul li a:hover {
  background: var(--ck-plum);
  border-color: var(--ck-plum);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(171, 45, 114, 0.45);
}

/* --- link columns --------------------------------------------------------- */

/* Each column carries its own accent, set here and used by the chip, the rule
   and the link hover below. Three identical white headings in a row was the
   flattest part of the footer. */
.account_ft {
  --ft: #f48fc0;
  --ft-soft: rgba(244, 143, 192, 0.16);
  --ft-line: rgba(244, 143, 192, 0.34);
}

.account_ft--pink {
  --ft: #f06fb0;
  --ft-soft: rgba(240, 111, 176, 0.18);
  --ft-line: rgba(240, 111, 176, 0.36);
}

.account_ft--amber {
  --ft: #fcc603;
  --ft-soft: rgba(252, 198, 3, 0.16);
  --ft-line: rgba(252, 198, 3, 0.34);
}

.account_ft--sky {
  --ft: #6fb6f0;
  --ft-soft: rgba(111, 182, 240, 0.16);
  --ft-line: rgba(111, 182, 240, 0.34);
}

.account_ft h3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
  font-family: var(--font);
  font-size: 19px;
  font-weight: 800;
  color: #fff;
}

.account_ft__chip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--ft-soft);
  border: 1px solid var(--ft-line);
  color: var(--ft);
  font-size: 13px;
}

.account_ft h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 44px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ft), transparent);
}

.account_ft ul { padding: 0; margin: 0; }
.account_ft ul li { list-style: none; margin-top: 13px; }

/* The dot is the hover target's anchor: the link slides right into the space it
   opens instead of nudging on its own with nothing to move against. */
.account_ft ul li a {
  position: relative;
  display: inline-block;
  padding-left: 0;
  font-size: 14px;
  color: #b9a3b0;
  text-decoration: none;
  transition: color 0.22s, padding-left 0.22s;
}

.account_ft ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--ft);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.22s, transform 0.22s;
}

.account_ft ul li a:hover {
  color: #fff;
  padding-left: 15px;
  text-decoration: none;
}

.account_ft ul li a:hover::before { opacity: 1; transform: scale(1); }

/* The social row is commented out in footer.php until real profile URLs
   exist, which left the middle of the bottom bar empty and pushed the payment
   marks hard against the copyright line. These are the same policy links the
   support column carries, in the compact form a bottom bar wants. */
.footer_legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}

.footer_legal a {
  font-size: 13px;
  color: #9a8390;
  text-decoration: none;
  transition: color 0.2s;
}

.footer_legal a:hover {
  color: #fff;
}


/* --- bottom bar ----------------------------------------------------------- */

.copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-top: 40px;
  padding: 20px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.copyright p,
.copyright h6 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  font-size: 13px;
  color: #9a8390;
}

/* The card marks are dark-on-transparent in places, so they ride on a light
   plate rather than straight on the dark. */
.copyright .bg_img {
  max-width: 172px;
  padding: 5px 9px;
  border-radius: 8px;
  background: #fff;
}

/* --- back to top ---------------------------------------------------------- */

/* Same ghost treatment as the social buttons rather than a filled disc. Solid
   magenta made it the loudest thing in the footer, and a thin arrow rattling
   around inside a 46px circle only drew more attention to it. */
.footer_totop {
  position: absolute;
  z-index: 3;
  right: 32px;
  top: 34px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  color: #c9b3c1;
  font-size: 14px;
  text-decoration: none;
  transition: 0.22s;
}

.footer_totop:hover {
  background: var(--ck-plum);
  border-color: var(--ck-plum);
  color: #fff;
  transform: translateY(-3px);
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(171, 45, 114, 0.45);
}

/* Powers the back-to-top link, and every in-page anchor already in the site
   (the dashboard's #accountSection and friends) gets it for free. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .footer_blob { animation: none; }
}

/* --- mobile bottom dock --------------------------------------------------- */

.footermenu { display: none; }

/* Dark glass, not the cream bar it was. A pale pill floating over a page full
   of bright product photos had nothing to separate it from them, and its black
   glyphs were the last default-looking icons on the site. The ground is the
   footer's own plum-black, so the dock reads as part of the site's chrome. */
@media only screen and (max-width: 480px) {
  .footermenu {
    position: fixed;
    bottom: 16px;
    /* Pinned to both edges and centred by auto margins, rather than offset from
       the left by a percentage. A left-only offset has to be paired with an
       exactly matching width or the pill hangs off one side — which is what
       happened. This way it is centred whatever the screen does, and it stops
       growing on a wide phone instead of stretching to a letterbox. */
    left: 14px;
    right: 14px;
    width: auto;
    max-width: 420px;
    margin: 0 auto;
    padding: 9px 6px;
    display: block;
    z-index: 99999;
    border-radius: 22px;
    background: rgba(42, 13, 30, 0.93);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px rgba(21, 6, 16, 0.45);
  }

  .footermenu ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
  }

  .footermenu ul li { position: relative; margin-bottom: 0 !important; }

  .footermenu ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    color: #e7d3df;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
  }

  .footermenu ul li a:active,
  .footermenu ul li a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  .footermenu ul li a span { font-size: 11.5px; font-weight: 700; line-height: 1.3; }
  .footermenu ul li a span.fa { font-size: 18px; }

  /* The offer mark is a dark PNG drawn for the old cream dock. */
  .footermenu ul li a img { filter: brightness(0) invert(1); opacity: 0.9; }

  /* Yellow, not plum: on a plum-black bar a plum badge disappears into it. */
  .footermenu ul li a span.fa sup {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ck-yellow);
    color: #4a3800;
    font-size: 10px;
    font-weight: 800;
    /* Centred by flex, not by line-height - see the note in style.css beside
         .cat-tree__n. `padding-top: .33em` is the ink nudge, in em so it scales
         with whatever font-size this badge is set at. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-top: .33em;

  }
}

/* On a wide screen the brand column carries far more than the three link
   columns, so give it the extra width — it shortens that column and closes the
   gap the four equal columns used to leave underneath. */
@media (min-width: 1200px) {
  .footer_bg .row > div:first-child { flex: 0 0 34%; max-width: 34%; }
  .footer_bg .row > div:not(:first-child) { flex: 0 0 22%; max-width: 22%; }
  .footer_bg .row > div.col-12:only-child { flex: 0 0 100%; max-width: 100%; }
}

/* ==========================================================================
   Responsive — footer
   The header carries its own breakpoints beside its own rules now, up in the
   HEADER section. What is left here is the footer's.
   ========================================================================== */

@media (max-width: 767.98px) {
  .footer_bg { padding: 36px 0 78px; }   /* bottom clears the fixed dock */
  .footer_box p { margin-top: 15px; }
  .account_ft { margin-top: 26px; text-align: left; }

  /* Out of the corner and into the flow. Pinned at top-right it landed on top
     of the partner-logo plate, which is full width down here — and this button
     is a translucent white ghost, so white-on-white made it effectively
     invisible. Centred under the copyright it has the dark ground behind it,
     and it gets a 44px tap target while it is there. */
  .footer_totop {
    position: static;
    width: 44px;
    height: 44px;
    margin: 4px auto 6px;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 15px;
  }

  /* Stacked, so the three parts of the bar get their own centred lines rather
     than fighting over one. */
  .copyright {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 30px;
  }
}

/* ==========================================================================
   Add-to-cart toast

   Adding an item no longer navigates anywhere, so this is the only confirmation
   the customer gets — it has to be visible without being in the way. Raised
   above the fixed mobile nav bar on small screens.
   ========================================================================== */

.ck-toast {
  position: fixed;
  z-index: 9999;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 13px 18px;
  border-radius: 16px;
  background: var(--ck-ink);
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 16px 38px rgba(0, 20, 48, 0.32);
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.28s, transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.ck-toast.is-shown { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.ck-toast__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--ck-yellow);
  color: #3d2f00;
  font-size: 14px;
}

.ck-toast.is-bad .ck-toast__icon { background: var(--ck-pink); color: #fff; }

.ck-toast__text { flex: 1; min-width: 0; }
.ck-toast__text b { font-weight: 700; }

.ck-toast .ck-toast__link {
  flex: 0 0 auto;
  color: var(--ck-yellow);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.ck-toast .ck-toast__link:hover { text-decoration: underline; }

/* The basket count gives a quick bump so the change is noticed. */
.ckh-act__box sup.is-bumped,
.ckh-face sup.is-bumped,
.footermenu sup.is-bumped { animation: ckBump 0.45s cubic-bezier(0.2, 0.8, 0.3, 1); }

/* A count that just went from nothing to something has to appear before it can
   bump — is-zero would otherwise keep it hidden through the whole animation. */
.ckh-act__box sup.is-bumped.is-zero,
.ckh-face  sup.is-bumped.is-zero { display: block; }

@keyframes ckBump {
  40% { transform: scale(1.5); }
}

/* The button dims while its request is in flight. */
a.is-adding { opacity: 0.6; pointer-events: none; }

@media (max-width: 767px) {
  .ck-toast {
    right: 12px;
    left: 12px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    max-width: none;
    padding: 12px 14px;
    font-size: 13.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ck-toast { transition: opacity 0.2s; transform: none; }
  .ck-toast.is-shown { transform: none; }
  .ckh-act__box sup.is-bumped,
  .ckh-face sup.is-bumped { animation: none; }
}

/* ==========================================================================
   Desktop reading size
   --------------------------------------------------------------------------
   The chrome was drawn at 12.5–14.5px, which reads small once the viewport is
   wide enough that the nav is a single row. From xl up — the same 1200px
   breakpoint navbar-expand-xl uses to switch the menu out of the hamburger —
   the header and footer text goes to 16px.

   Left alone deliberately: .account_ft h3 stays at 19px. It is already larger
   than 16px, so it was never part of the problem, and dropping it to 16 would
   make the column headings the same size as the links under them.
   ========================================================================== */
@media (min-width: 1200px) {

  /* Home / Toys by Age / Brands / About Us / Contact. They share the rail
     with the category chips, so they stay a step under those rather than
     going to 16px — the catalogue is what the band is for. */
  .ckh-menu .nav-link { font-size: 14px; }

  /* The category chips, which are the thing on the rail meant to be read. */
  .ckh-chip { font-size: 14px; }

  /* The two-line labels beside the account, wishlist and cart tiles. */
  .ckh-act__text b { font-size: 15px; }
  .ckh-act__text small { font-size: 11.5px; }

  /* The search is the widest control on the bar; its text should not be the
     smallest thing on it. */
  .ckh-search input { font-size: 15px; }
  .ckh-search button { font-size: 14px; }

  /* The catalogue panel: category names, then their sub-categories. */
  .ckh-mega__name { font-size: 15px; }
  .ckh-mega__list > li > a { font-size: 14px; }
  .ckh-mega__kids { font-size: 12.5px; }

  /* Footer: brand blurb, then the address / phone / email rows. */
  .footer_box p,
  .footer_info ul li span,
  .footer_info ul li a { font-size: 16px; }

  /* Footer: the link lists under Account / Shop / Customer Support. */
  .account_ft ul li a { font-size: 16px; }
}