/* ==========================================================================
   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;

  /* 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;
}

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

/* 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 ends up ~900px wide, centred,
   with white gaps either side, and the search bar wraps inside it.

   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,
body > .footermenu {
  width: 100%;
}

/* Sticky matters for more than the stick: responsive.css parks the collapsed
   menu at `position:absolute; top:100%`, and this is the positioned ancestor it
   measures that 100% against. Without it the dropdown resolves against the page
   and opens a screen and a half further down. */
.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 8px 26px rgba(0, 20, 48, 0.12);
}

/* 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. */
.custom-sticky-top::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--ck-plum) 0%, var(--ck-plum-soft) 45%, var(--ck-yellow) 100%);
}

/* --- utility strip -------------------------------------------------------- */

/* Deep plum, not the mid-tone. At full strength across the top the bar shouted
   louder than the logo; dark it reads as a frame and lets row 2 lead. */
.top_header {
  width: 100%;
  background: linear-gradient(180deg, var(--ck-plum-deep) 0%, var(--ck-plum-dark) 100%);
  overflow: hidden;
  /* An explicit resting max-height, not `none` — the collapse below animates to
     0, and there is nothing to animate from if the start value is `none`. */
  max-height: 70px;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.ck-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 26px;
  min-height: 38px;
  padding: 5px 0;
}

.ck-topbar__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 24px;
}

/* `a.` on purpose, not a bare `.ck-topbar__item`. index.css carries a global
   `a:link, a:visited { color: #adacb1 }` which outranks a single class, so every
   link in this strip — the address, the phone, Help — came out grey while the
   one plain <span> beside them stayed white. That mismatch is the grey. */
.ck-topbar__item,
a.ck-topbar__item,
a.ck-topbar__item:link,
a.ck-topbar__item:visited {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s;
}

/* Icons in the house yellow. The soft pink they had sat too close to the plum
   behind them and muddied into the same grey the text did. */
.ck-topbar__item i {
  font-size: 14px;
  color: var(--ck-yellow);
  transition: transform 0.2s;
}

a.ck-topbar__item:hover { color: #fff; text-decoration: underline; }
a.ck-topbar__item:hover i { transform: scale(1.15); }

/* Scrolled away, the strip folds up and gives the sticky header its height back
   — the logo, search and menu are what you need down the page, not an address. */
.custom-sticky-top.is-sticky .top_header {
  max-height: 0;
  opacity: 0;
  padding: 0;
}

/* --- logo / search / actions --------------------------------------------- */

.header {
  background: #fff;
  padding: 14px 0;
  transition: padding 0.3s ease;
}

.custom-sticky-top.is-sticky .header { padding: 8px 0; }

.header-main {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Equal flex basis on the two outer groups is what actually centres the search
   field. Left to size themselves the logo and the action row differ by ~90px,
   and `margin: 0 auto` then centres the field in the leftover space rather than
   in the page — close enough to centred to look like a mistake. */
.header-main .logo,
.header-main .header-actions {
  flex: 1 1 0;
  min-width: 0;
}

.header-main .header-actions { justify-content: flex-end; }

.header-main .logo img {
  height: 120px;
  width: auto;
  display: block;
  transition: height 0.3s ease;
}

/* Scrolled, it gives back most of that height. Kept at 68 rather than dropping
   further — from 120px anything smaller lands as a jolt rather than a shrink. */
.custom-sticky-top.is-sticky .header-main .logo img { height: 68px; }

/* Capped and centred. Left to grow it ate the whole row — a 1200px search field
   reads as a page-wide input box, not as a control. */
.header-search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 560px;
  margin: 0 auto;
}

.header-search {
  display: flex;
  /* style.css carries a global `form { display:flex; flex-direction:column }`.
     Setting display alone is not enough — without this the input and the button
     stack on top of each other inside the pill on every page that loads it. */
  flex-direction: row;
  align-items: center;
  height: 50px;
  padding: 0 6px 0 0;
  border: 2px solid var(--ck-plum-line);
  border-radius: 999px;
  background: #fffafc;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.header-search:focus-within {
  background: #fff;
  border-color: var(--ck-plum);
  box-shadow: 0 0 0 4px rgba(171, 45, 114, 0.16);
}

.header-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 20px;
  border: 0;
  outline: 0;
  background: none;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ck-ink);
}

.header-search input::placeholder { color: #a6adb9; }

.header-search button {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--ck-plum);
  color: #fff;
  font-size: 15px;
  display: grid;
  place-items: center;
  transition: 0.2s;
}

.header-search button:hover { background: var(--ck-plum-dark); color: #fff; }

/* --- account / favourites / cart ----------------------------------------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-actions > li { list-style: none; }

.header-actions a {
  display: block;
  padding: 6px 10px;
  border-radius: 14px;
  text-decoration: none;
}

/* Each icon rides in its own tinted disc. Bare glyphs floating on white looked
   like three stray characters rather than three controls, and gave the hover
   nothing to fill. */
.header-actions .compare h6 {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--ck-plum-tint);
  font-size: 18px;
  line-height: 1;
  color: var(--ck-plum);
  transition: background 0.24s, color 0.24s, transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 0.24s;
}

.header-actions .compare h6 i { color: inherit; }

.header-actions a:hover .compare h6 {
  background: var(--ck-plum);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(171, 45, 114, 0.32);
}

/* Count bubble. The white ring is what keeps it legible where it overlaps the
   disc edge. */
.header-actions .compare h6 sup {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ck-plum);
  border: 2px solid #fff;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  transition: background 0.24s, border-color 0.24s;
}

/* Once the disc itself is plum the badge would vanish into it. */
.header-actions a:hover .compare h6 sup {
  background: var(--ck-yellow);
  border-color: var(--ck-plum);
  color: #4a3800;
}

.header-actions .compare p {
  margin: 7px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ck-ink);
  white-space: nowrap;
  transition: color 0.2s;
}

.header-actions a:hover .compare p { color: var(--ck-plum); }

/* The hamburger only exists below the desktop breakpoint. */
.header-actions__toggle { display: none; }

.header-actions__toggle .navbar-toggler {
  border: 0;
  border-radius: 12px;
  padding: 8px 11px;
  background: var(--ck-plum-tint);
}

/* The dark ring around the button was the browser's own focus outline — the
   button keeps focus after you tap it, so it sat there the whole time the menu
   was open. Replaced rather than removed: keyboard users still need to see it. */
.header-actions__toggle .navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.header-actions__toggle .navbar-toggler:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(171, 45, 114, 0.28);
}

/* Bootstrap ships this as a black-at-50% SVG. Beside three plum action discs a
   black burger was the one piece of default chrome left in the header. */
.header-actions__toggle .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23ab2d72' stroke-width='2.4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Login / Favourite / Cart repeated inside the collapsed menu. Hidden on
   desktop, where the same three sit in the header row itself. */
.header-menu-actions { display: none; list-style: none; margin: 0; padding: 0; }
.header-menu-actions a { text-decoration: none; }

/* Same disc as the desktop row, a size down — these are the same three controls
   and should not look like a different set of buttons. */
.header-menu-actions .compare h6 {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--ck-plum-tint);
  font-size: 16px;
  line-height: 1;
  color: var(--ck-plum);
}

.header-menu-actions .compare h6 i { color: inherit; }

.header-menu-actions .compare h6 sup {
  position: absolute;
  top: -2px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ck-plum);
  border: 2px solid #fff;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}

.header-menu-actions .compare p { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--ck-ink); }

/* --- primary nav ---------------------------------------------------------- */

/* White, not the pink wash it was. Three coloured bands stacked on top of each
   other gave the page no quiet edge to start from; the menu now belongs to the
   white row above it and the plum lives in the link states. */
.header-nav {
  background: #fff;
  border-top: 1px solid #f2eef0;
}

.header-nav .navbar { padding: 0; }
.header-nav .navbar-collapse { justify-content: center; }

.header-nav .menuNav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav .menuNav .nav-link {
  position: relative;
  display: block;
  padding: 15px 20px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ck-ink);
  text-decoration: none;
  transition: color 0.22s;
}

/* Underline grows from the centre. A filled pill on every hover made the menu
   flicker between five different shapes as the pointer crossed it. */
.header-nav .menuNav .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 0;
  height: 3px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--ck-plum), var(--ck-plum-soft));
  transition: width 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.header-nav .menuNav .nav-link:hover,
.header-nav .menuNav .nav-link:focus,
.header-nav .menuNav .nav-link.active {
  color: var(--ck-plum);
  text-decoration: none;
}

.header-nav .menuNav .nav-link:hover::after,
.header-nav .menuNav .nav-link:focus::after,
.header-nav .menuNav .nav-link.active::after {
  width: calc(100% - 40px);
}

/* --- search suggestions --------------------------------------------------- */

.search-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1200;
  max-height: 380px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid var(--ck-line);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 20, 48, 0.14);
}

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

.search-suggestions .s-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  transition: background 0.15s;
}

.search-suggestions .s-item + .s-item { border-top: 1px solid #f4f5f8; }
.search-suggestions .s-item:hover { background: var(--ck-plum-tint); }

.search-suggestions .s-item img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--ck-line);
}

.search-suggestions .s-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ck-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggestions .s-price { font-size: 14px; font-weight: 800; color: var(--ck-plum); }
.search-suggestions .s-empty { padding: 16px; font-size: 14px; color: var(--ck-muted); }

/* ==========================================================================
   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: "Baloo 2", sans-serif;
  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.html 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;
    left: 3%;
    width: 94%;
    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;
    line-height: 17px;
    text-align: center;
  }
}

/* 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
   ========================================================================== */

/* Tablet and below: the hamburger takes over and the three account actions move
   inside the collapsed menu, so the header row stays on one line. */
@media (max-width: 1199.98px) {
  .header-main { flex-wrap: wrap; gap: 16px; }
  .header-main .logo img,
  .custom-sticky-top.is-sticky .header-main .logo img { height: 54px; }

  /* The equal-basis trick is a desktop-only concern — here the row wraps and the
     search takes its own line, so the outer groups size to content again. */
  .header-main .logo,
  .header-main .header-actions { flex: 0 0 auto; }

  .header-search-wrap { margin: 0; max-width: none; }

  .header-actions { margin-left: auto; gap: 4px; }
  .header-actions__item { display: none; }
  .header-actions__toggle { display: flex; align-items: center; }

  /* No border while the menu is collapsed — it would just be a stray line. */
  .header-nav { border-top: 0; }
  .header-nav .navbar { padding: 0; }
  .header-nav .navbar-collapse { justify-content: flex-start; }

  .header-nav .menuNav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px 0 12px;
  }

  /* Stacked in a dropdown the centred underline reads as a stray dash, so the
     open menu goes back to a filled row.

     The negative margin is what lines the menu up. With plain `padding: 11px
     14px` the highlight sat flush against the container edge but the label was
     pushed 14px in from it — so the menu text alone was indented from the logo
     and the search bar above it. Pulling the row out by the same 14px puts the
     text on the container edge and lets the highlight bleed past it instead. */
  .header-nav .menuNav .nav-link {
    display: block;
    width: auto;
    margin: 0 -14px;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 12px;
  }

  .header-nav .menuNav .nav-item { width: 100%; }

  .header-nav .menuNav .nav-link::after { display: none; }

  .header-nav .menuNav .nav-link:hover,
  .header-nav .menuNav .nav-link:focus,
  .header-nav .menuNav .nav-link.active {
    background: var(--ck-plum-tint);
    color: var(--ck-plum);
  }

  .header-menu-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 26px;
    width: 100%;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--ck-line);
  }

  .header-menu-actions .compare { margin: 0; text-align: center; }
}

/* Below the desktop width the strip holds two items comfortably and four not at
   all — the delivery line and Help wrapped it onto a second row. The whole
   right-hand group goes, leaving the two things worth having in a contact strip:
   the address to write to and the number to call. Help is a nav item anyway; it
   is in the menu and in the footer. */
@media (max-width: 991.98px) {
  .ck-topbar__group--end { display: none; }
  .ck-topbar { justify-content: center; }
}

@media (max-width: 767.98px) {
  .ck-topbar {
    justify-content: center;
    gap: 2px 18px;
    min-height: 34px;
  }

  /* Both items stay — with Help and the delivery line gone above, the email and
     the number fit on one line even on a small phone. */
  .ck-topbar__group { gap: 2px 16px; justify-content: center; }
  .ck-topbar__item { font-size: 12px; gap: 6px; }
  .ck-topbar__item i { font-size: 12px; }

  .header-main .logo { order: 1; }
  .header-actions { order: 2; }
  .header-search-wrap { order: 3; flex: 1 0 100%; }

  .header-search { height: 46px; }
  .header-search input { padding: 0 16px; font-size: 14px; }
  .header-search button { width: 34px; height: 34px; }

  /* Footer responsive rules all live here now. They used to be split between
     this file and responsive.css, which is how the column heading rule ended up
     with a `top` from one file and a `bottom` from the other. */
  .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;
  }
}

/* The fixed bottom dock already offers Login / Favourite / Cart down here, so the
   in-menu copy would be the same three links twice. */
@media (max-width: 480px) {
  .header-menu-actions { display: none; }
}

/* ==========================================================================
   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. */
.header-actions .compare h6 sup.is-bumped,
.header-menu-actions .compare h6 sup.is-bumped { animation: ckBump 0.45s cubic-bezier(0.2, 0.8, 0.3, 1); }

@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; }
  .header-actions .compare h6 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 / Shop Toys / Toys by Age / Brands / About Us / Contact */
  .header-nav .menuNav .nav-link { font-size: 16px; }

  /* The account name, Favorite and My Cart labels under their icon discs. */
  .header-actions .compare p { font-size: 16px; }

  /* 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; }
}