body {
  font-size: 14px;
  line-height: 28px;
  overflow-x: hidden;
  font-family: var(--font);
}

:root {
  --primary_color: #fcc603;
  --secondary_color: #fcc603;
  --bg_soft: #e8e6e6;
  --black: #000;
  --text_color: #69778a;
  --white_color: #ffffff;
}

a {
  text-decoration: none;
}

a:link,
a:visited {
  /* color: var(--white_color); */
   color: #adacb1;
  font-size: 16px;
}

.container {
  width: 100%;
  max-width: 1500px;
  margin: auto;
  padding-left: 40px;
  padding-right: 40px;
}

/*--===============|| 02. HEADER ||===============--*/
/* `.header`, `.logo img` and the `.compare` block that used to live here are
   gone — assets/css/chrome.css is the single source for the header, and these
   were leftovers of the layout it replaced. They were not inert: `.header`'s
   border-bottom doubled the nav's own top border, and `.compare`'s margin-left
   spaced the account icons out past the gap chrome.css sets. */

.navbar-nav li a {
  font-family: var(--font);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  font-style: normal;
  color: #001430;
  transition: all 900ms ease-in-out;
}

.navbar-light .navbar-nav .nav-link {
  color: #001430;
}

.navbar-light .navbar-nav .nav-link i {
  font-size: 16px;
  color: var(--primary_color);
}

.dropdown-toggle::after {
  display: none;
}

.navbar-nav li a i {
  margin-right: 10px;
}

.dropdown-menu {
  top: 40px;
  border-radius: 0px;
  border: none;
}

.nav-item a {
  text-decoration: none;
}






/*--===============|| 03a. ANIMATED HERO (layered artwork) ||===============--*/
/* Only renders when all five layer PNGs are present — see index.php and
   assets/images/banner-layers/README.txt. Each layer stacks in register and
   carries its own motion, which is what gives it the Lottie-like feel without a
   .json export, a video, or any animation library.

   Every layer is a full-canvas export, so they all sit at inset:0 and the stack
   needs no per-layer positioning. `bg` is in the flow and sets the height; the
   rest are absolute on top of it.
   ------------------------------------------------------------------------- */

.hero-anim {
  position: relative;
  overflow: hidden;
  line-height: 0;          /* kills the inline-image baseline gap */
}

.hero-anim__layer {
  display: block;
  width: 100%;
  height: auto;
}

/* bg stays in the flow so the section keeps the artwork's own aspect ratio. */
.hero-anim__layer--bg {
  position: relative;
  z-index: 0;
  /* A very slow drift, so the picture is never quite static. */
  animation: heroBg 26s ease-in-out infinite;
  transform-origin: 55% 50%;
}

.hero-anim__layer--deco,
.hero-anim__layer--subject,
.hero-anim__layer--headline,
.hero-anim__layer--badge {
  position: absolute;
  inset: 0;
}

/* Gears and rings turn slowly. Scaled a touch so the rotation doesn't reveal
   the canvas corners. */
.hero-anim__layer--deco {
  z-index: 1;
  animation: heroDeco 34s linear infinite;
  transform-origin: 50% 50%;
}

/* The child and the toys settle in, then breathe. Two animations: one that runs
   once on load, one that loops. */
.hero-anim__layer--subject {
  z-index: 2;
  animation: heroSubjectIn 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) both,
             heroFloat 6s ease-in-out 1.1s infinite;
}

.hero-anim__layer--headline {
  z-index: 3;
  animation: heroHeadlineIn 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) 0.15s both;
}

/* The badge lands last with a bit of overshoot, then rocks. */
.hero-anim__layer--badge {
  z-index: 4;
  transform-origin: 62% 42%;   /* roughly the badge's own centre on the canvas */
  animation: heroBadgeIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both,
             heroBadgeRock 4.5s ease-in-out 1.45s infinite;
}

@keyframes heroBg {
  0%, 100% { transform: scale(1.03) translate3d(0, 0, 0); }
  50%      { transform: scale(1.06) translate3d(-10px, -6px, 0); }
}

@keyframes heroDeco {
  from { transform: rotate(0deg) scale(1.05); }
  to   { transform: rotate(360deg) scale(1.05); }
}

@keyframes heroSubjectIn {
  from { opacity: 0; transform: translate3d(34px, 14px, 0) scale(0.97); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes heroFloat {
  50% { transform: translate3d(0, -9px, 0); }
}

@keyframes heroHeadlineIn {
  from { opacity: 0; transform: translate3d(-30px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes heroBadgeIn {
  from { opacity: 0; transform: scale(0.4) rotate(-22deg); }
  to   { opacity: 1; transform: scale(1) rotate(-6deg); }
}

@keyframes heroBadgeRock {
  0%, 100% { transform: scale(1) rotate(-6deg); }
  50%      { transform: scale(1.04) rotate(5deg); }
}

/* Optional button, shown only when the banner row has button_text filled. */
.hero-anim__cta {
  position: absolute;
  z-index: 5;
  left: 6%;
  bottom: 12%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 999px;
  background: #ab2d72;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(171, 45, 114, 0.36);
  animation: heroCtaIn 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) 1.1s both;
  transition: background 0.22s, transform 0.22s;
}

/* index.css carries a global `a:link { color:#adacb1 }` at (0,1,1), which beats a
   bare class — so the label needs the link states named explicitly. */
.hero-anim__cta,
.hero-anim__cta:link,
.hero-anim__cta:visited { color: #fff; }

.hero-anim__cta:hover {
  background: #8a2159;
  color: #fff;
  transform: translateY(-2px);
}

.hero-anim__cta i { transition: transform 0.22s; }
.hero-anim__cta:hover i { transform: translateX(4px); }

@keyframes heroCtaIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 767.98px) {
  .hero-anim__cta { left: 5%; bottom: 8%; padding: 11px 22px; font-size: 13px; }
}

/* Motion is decoration here — the artwork reads perfectly well standing still. */
@media (prefers-reduced-motion: reduce) {
  .hero-anim__layer,
  .hero-anim__cta { animation: none !important; }
}

/*--===============|| 03. BANNER (flat fallback) ||===============--*/
#bannerCarousel {
  display: flex;
  align-items: center;
}

/* Full bleed, at the artwork's own 2:1. All six slides share that ratio — the
   five generated SVGs were built to match banner.png — so the carousel keeps
   one height as it advances. */
#bannerCarousel img {
  display: block;
  width: 100%;
}

/* These arrows were still on a green from the template this page started life
   as — rgba(97,175,66) and a hue-rotate that tinted the chevrons green too.
   Green appears nowhere else on the site. They now run on the chrome plum, the
   same colour as the header, footer and every banner they sit on top of. */
.carousel-control-prev,
.carousel-control-next {
  width: 52px;
  height: 52px;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.92);
  border: 1.5px solid rgba(171, 45, 114, 0.25);
  /* The slides run pale pink through near-black, so the arrow needs to lift off
     the artwork on its own rather than trusting the background behind it. */
  box-shadow: 0 6px 18px rgba(94, 16, 57, 0.22);
  border-radius: 50%;
  opacity: 1;
  transition: background-color 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease, transform 0.25s ease;
}

/* Tucked into the artwork's own margin. At 100px they sat on top of the
   headline once the banners were rebuilt short and wide. */
.carousel-control-prev { left: 24px; }
.carousel-control-next { right: 24px; }

/* Bootstrap ships the chevrons as white SVG data-URIs. A filter chain cannot
   hit an exact hex — invert/hue-rotate landed on orange — so the icon is
   redrawn in plum instead of tinted. */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 18px;
  height: 18px;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ab2d72' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ab2d72' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: #ab2d72;
  border-color: #ab2d72;
  box-shadow: 0 8px 22px rgba(94, 16, 57, 0.34);
  transform: translateY(-50%) scale(1.08);
}

/* Flip the chevrons back to white once the plate goes plum. */
.carousel-control-prev:hover .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.carousel-control-next:hover .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
  outline: 3px solid #fcc603;
  outline-offset: 3px;
}

.carousel-control-prev:active,
.carousel-control-next:active {
  transform: translateY(-50%) scale(0.95);
}

/*--===============|| 04. SHOP BY CATEGORY ||===============--*/
.bg_offer {
  margin-top: 80px;
}

.offer_heading h2 {
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
}

/*--===============|| 02b. SHOP BY CATEGORY ||===============--*/
/* Was eight identical grey discs with grey labels under them — the row read as
   a set of empty placeholders, and the labels were quieter than the background
   they sat on. Each tile now carries an accent from the same six the product
   cards cycle through, and the section gets the band treatment the rest of the
   home page uses. The slider is untouched. */

/* No top margin. This section shares `bg_offer` with Latest Product, which needs
   that 80px — but `catsec` is a full-bleed band with 54px of its own padding, so
   the margin only added an empty white gap above the colour. */
.catsec {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: 54px 0 46px;
  background:
    radial-gradient(110% 80% at 50% -10%, #fff7fb 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fffcf5 100%);
}

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

.catsec__blob--a {
  top: -110px;
  left: -90px;
  width: 320px;
  height: 320px;
  background: rgba(232, 62, 140, 0.14);
}

.catsec__blob--b {
  right: -150px;
  bottom: -170px;
  width: 360px;
  height: 360px;
  background: rgba(252, 198, 3, 0.1);
  animation-direction: reverse;
  animation-duration: 23s;
}

@keyframes catDrift {
  50% { transform: translate3d(26px, -20px, 0) scale(1.12); }
}

.catsec .container { position: relative; z-index: 1; }

/* --- heading -------------------------------------------------------------- */

.catsec__heading { text-align: center; }

.catsec__eyebrow {
  display: flex;
  width: fit-content;
  margin: 0 auto 14px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 15px;
  border-radius: 999px;
  background: #fdeef6;
  border: 1px solid #f4d5e6;
  color: #ab2d72;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.catsec__eyebrow i { font-size: 12px; }

/* No font-size here — the size comes from `.offer_heading h2` above (34px, and
   24px under 768px in responsive.css). */
.catsec .offer_heading h2 {
  position: relative;
  display: inline-block;
  font-weight: 800;
  color: #001430;
  margin-bottom: 0;
}

.catsec .offer_heading h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 74px;
  height: 5px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #ab2d72, #fcc603);
}

.catsec__heading p {
  font-size: 14.5px;
  margin: 18px 0 34px;
  line-height: 1.5;
  color: var(--text_color);
}

/* --- tile ----------------------------------------------------------------- */

.catcard {
  display: block;
  padding: 6px 4px 4px;
  text-align: center;
  text-decoration: none;
}

.catcard:hover,
.catcard:focus { text-decoration: none; }

.catcard__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #fff 0%, var(--cc-tint) 100%);
  box-shadow: 0 10px 24px rgba(0, 20, 48, 0.08);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.4s;
}

/* Accent ring drawn as a border on its own layer so it can scale and fade
   without moving the photo inside the disc. */
.catcard__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cc);
  opacity: 0.22;
  transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.catcard__disc img {
  width: 66% !important;
  height: 66%;
  object-fit: contain;
  /* Offset per tile so the row breathes instead of pulsing in lockstep. */
  animation: catFloat 5s ease-in-out infinite;
  animation-delay: var(--cc-delay, 0s);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes catFloat {
  50% { transform: translateY(-6px); }
}

.catcard:hover .catcard__disc {
  transform: translateY(-8px);
  box-shadow: 0 20px 34px rgba(0, 20, 48, 0.16);
}

.catcard:hover .catcard__ring { opacity: 1; transform: scale(1.06); }
.catcard:hover .catcard__disc img { transform: scale(1.1); }

/* Ink, not the #adacb1 the global link colour was giving them — the labels were
   fainter than the discs above them. */
.catcard .catcard__name {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: #001430;
  transition: color 0.22s;
}

.catcard:hover .catcard__name { color: var(--cc); }

/* --- scroll-in ------------------------------------------------------------ */

/* Visible by default; the class only ever adds motion, so a browser without the
   observer still shows the full row. */
.catsec.is-in .catcard { animation: catRise 0.65s cubic-bezier(0.2, 0.8, 0.3, 1) both; }

.catsec.is-in .owl-item:nth-child(1) .catcard { animation-delay: 0.04s; }
.catsec.is-in .owl-item:nth-child(2) .catcard { animation-delay: 0.1s; }
.catsec.is-in .owl-item:nth-child(3) .catcard { animation-delay: 0.16s; }
.catsec.is-in .owl-item:nth-child(4) .catcard { animation-delay: 0.22s; }
.catsec.is-in .owl-item:nth-child(5) .catcard { animation-delay: 0.28s; }
.catsec.is-in .owl-item:nth-child(6) .catcard { animation-delay: 0.34s; }
.catsec.is-in .owl-item:nth-child(7) .catcard { animation-delay: 0.4s; }
.catsec.is-in .owl-item:nth-child(8) .catcard { animation-delay: 0.46s; }

.catsec.is-in .catsec__heading > * {
  animation: catRise 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.catsec.is-in .catsec__heading h2 { animation-delay: 0.08s; }
.catsec.is-in .catsec__heading p { animation-delay: 0.16s; }

@keyframes catRise {
  from { opacity: 0; transform: translateY(24px); }
}

@media (prefers-reduced-motion: reduce) {
  .catsec__blob,
  .catcard__disc img,
  .catsec.is-in .catcard,
  .catsec.is-in .catsec__heading > * {
    animation: none !important;
  }
}

/* The tiles lift 8px and throw a wide shadow; the stage clips its overflow, so
   it needs the room or the hover gets sliced off at the top. */
#offerSlider .owl-stage-outer { padding: 12px 0 8px; }

/* Arrows move from a pair of small yellow discs under the row to the sides of
   the row itself, matching Shop by Age. Two tiny buttons floating below eight
   tiles read as leftovers rather than as the way to see more. */
#offerSlider { position: relative; }

#offerSlider .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  margin: 0 !important;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

#offerSlider .owl-nav button.owl-prev,
#offerSlider .owl-nav button.owl-next {
  position: absolute;
  width: 46px;
  height: 46px;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #f4d5e6;
  color: #ab2d72;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 20px rgba(0, 20, 48, 0.12);
  transition: 0.3s ease;
}

#offerSlider .owl-nav button.owl-prev { left: -26px; }
#offerSlider .owl-nav button.owl-next { right: -26px; }

#offerSlider .owl-nav button.owl-prev:hover,
#offerSlider .owl-nav button.owl-next:hover {
  background: #ab2d72;
  border-color: #ab2d72;
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 12px 26px rgba(171, 45, 114, 0.34);
}

#offerSlider .owl-nav button:focus { outline: none; }

.owl-nav {
  text-align: center;
  font-size: 16px;
  margin-top: 15px !important;
}

.owl-carousel .owl-nav button.owl-next {
  color: var(--primary_color);
  margin-left: 15px;
}

.owl-carousel .owl-nav button.owl-next:focus {
  outline: none;
}

.owl-carousel .owl-nav button.owl-prev {
  color: var(--primary_color);
}

.owl-carousel .owl-nav button.owl-prev:focus {
  outline: none;
}

.owl-dots {
  display: none;
}

/*--===============|| 05. PRODUCT ||===============--*/
.latest_product_heading h3 {
  font-size: 26px;
  font-weight: 600;
}


/* Every product card gets the same fixed image box, so a new upload can never
   stretch a card taller than its neighbours whatever its aspect ratio.
   `contain` is used rather than `cover` because the catalogue mixes 3:4 studio
   shots with 9:16 phone photos, and cover would crop a third off the tall ones.
   The tile is white (not grey) because the product PNGs carry a white
   background — on grey they'd show as a white rectangle floating in the tile.
   The border is what makes the rounded corners read. */

@media (max-width: 991px) {
}

@media (max-width: 575px) {
}










/*  */
/* .secend_card_arival { */
  /* width: 200px !important; */
  /* top: 140px !important; */
/* } */
/*  */





/* The `.header-menu-actions` block that used to sit here (two contradictory
   rules for the same selector, one `display:flex` then one `display:none`) is
   gone — chrome.css owns the in-menu account links. */

@keyframes iconMove {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  40% {
    transform: translateY(-12px);
    opacity: 0;
  }

  41% {
    transform: translateY(12px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.pro_wishlist {
  position: absolute;
  top: 20px;
  right: 15px;
  width: 34px;
  height: 34px;
  /* Flex-centre the heart: this is rendered as an <a>, so without it the icon
     sits on the text baseline and drifts off-centre inside the circle. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: 50%;
  background: var(--white_color);
  cursor: pointer;
  transition: all 900ms ease-in;
  z-index: 2;
}

.pro_wishlist i {
  color: var(--text_color);
  font-size: 15px;
  line-height: 1;
}

.pro_wishlist:hover {
  background: var(--primary_color);
  transform: scale(1.1);
}

.pro_wishlist:hover i {
  color: var(--white_color);
}

.pro_wishlist::after {
  content: attr(title);
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary_color);
  color: var(--white_color);
  font-size: 14px;
  padding: 5px 12px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  border-radius: 6px;
  visibility: hidden;
  transition: all 900ms ease-in;
}

.pro_wishlist:hover::after {
  opacity: 1;
  visibility: visible;
}
 */

/*--===============|| 06. NEW ARRIVAL ||===============--*/
.arival_bg {
  margin-top: 80px;
  margin-bottom: 80px;
}

/* --- New Arrival layout ---------------------------------------------------
   Replaces `row > col-12 col-md-6 col-lg-5 col-xl-3` + a nested row of
   `col-6 col-md-6 col-lg-4 col-xl-3`. Same proportions at every breakpoint,
   expressed once each instead of as four classes per element, and the gutters
   are a real `gap` rather than negative row margins cancelling column padding.
   -------------------------------------------------------------------------- */

.arrival_layout {
  display: grid;
  grid-template-columns: 3fr 9fr;   /* was col-xl-3 / col-xl-9 */
  gap: 20px;
  align-items: start;
}

.arrival_products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* The promo image carried a 30px top margin to clear the old bootstrap row
   gutter. The cards beside it only have their 10px shadow padding, so 30 pushed
   the banner a fifth of a card lower than the grid it sits in. */
.arrival_layout .arrival_new_banner img { margin-top: 10px; }

@media (max-width: 1199.98px) {
  .arrival_layout { grid-template-columns: 5fr 7fr; }   /* was col-lg-5 / col-lg-7 */
  .arrival_products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .arrival_layout { grid-template-columns: 1fr 1fr; }   /* was col-md-6 / col-md-6 */
  .arrival_products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  .arrival_layout { grid-template-columns: minmax(0, 1fr); }  /* was col-12 */
  .arrival_products { gap: 14px; }

  /* `.arrival_new_banner` is `position: sticky` so the promo panel stays with
     you while the tall column of cards scrolls beside it. Stacked into one
     column there is nothing beside it any more — it just pinned itself to the
     top and the cards scrolled straight over the image.

     `relative`, not `static`: the "See Collection" button inside is absolutely
     positioned against this element, so dropping it out of the positioning flow
     entirely sends the button off to the nearest positioned ancestor instead. */
  .arrival_layout .arrival_new_banner {
    position: relative;
    top: auto;
  }

  /* Stacked, there is no card row to line up with. */
  .arrival_layout .arrival_new_banner img { margin-top: 0; }
}

/* --- Process / trust row --------------------------------------------------
   Was `row > 4 x col-12 col-md-6 cl-lg-3 col-xl-3`. Note `cl-lg-3` — a typo for
   `col-lg-3` that never matched anything, so the row silently stayed 2-up from
   768px all the way to 1199px. Four explicit steps here instead.
   -------------------------------------------------------------------------- */

.process_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1199.98px) {
  .process_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .process_grid { grid-template-columns: minmax(0, 1fr); }
}

.new_arrival_heading {
  display: flex;
  justify-content: space-between;
}

.new_arrival_heading h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 0px;
}

.new_arrival_heading h3 i {
  color: var(--secondary_color);
  margin-right: 10px;
}

.new_arrival_heading a {
  font-size: 14px;
  margin-bottom: 0px;
  text-decoration: none;
  border-radius: 20px;
  padding: 5px 20px;
  color: var(--text_color);
  border: 1px solid var(--text_color);
}

.new_arrival_heading a i {
  margin-left: 10px;
  transition: all 900ms ease-in;
}

.new_arrival_heading a:hover i {
  color: var(--primary_color);
  transform: translateX(10px);
}

/* --- New Arrival promo panel ----------------------------------------------
   The artwork is back to unique-collection.png at the client's request, with the
   "See Collection" pill sitting over it.

   Sticky is kept: on desktop the panel rides alongside the tall column of
   product cards. The mobile override further down turns that off and switches it
   to `relative` — stacked there is nothing beside it, so pinned it just held its
   place while the cards scrolled over the image. `relative` rather than `static`
   because the pill below is positioned against this element.
   ------------------------------------------------------------------------- */

.arrival_new_banner {
  position: sticky;
  top: 0;
}

.arrival_new_banner img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 15px;
}

/* The pill sits near the bottom of the artwork, which is where the original
   inline `style="top: 90%"` put it — as a rule now rather than in the markup. */
.arrival_content {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.arrival_content a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  border-radius: 999px;
  background: #fff;
  color: #001430;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 20, 48, 0.18);
  transition: background 0.22s, color 0.22s, transform 0.22s;
}

.arrival_content a:link,
.arrival_content a:visited { color: #001430; }

/* index.css carries a global `a:link { color:#adacb1 }` at (0,1,1), which beats a
   bare class — hence the :link/:visited pair above. */
.arrival_content a:hover {
  background: #ab2d72;
  color: #fff;
  transform: translateY(-2px);
}

.arrival_content a i { transition: transform 0.22s; }
.arrival_content a:hover i { transform: translateX(4px); }

.arival_news img {
  width: 100%;
  height: 322px;
  object-fit: cover;
  margin-top: 30px;
  border-radius: 15px;
}


.rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1rem;
}


.rating small {
  color: var(--text_color);
  font-size: 14px;
}

.commision {
  position: absolute;
  top: 10px !important;
  left: 10px !important;
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  color: var(--white_color);
  border-radius: 10px 0px 15px 0px !important;
  border: 1px solid var(--bg_soft);
  background-color: var(--primary_color);
}


/*--===============|| 04. SHOP BY AGE ||===============--*/
/* Was four identical grey tiles with a white circle in each — the row read as
   one repeated placeholder rather than four doors into the shop. Every band now
   carries its own accent (set inline from $AGE_RANGES as --ac / --ac-tint /
   --ac-deep), sits on a soft branded band, and animates in on scroll. */

.hop_by {
  position: relative;
  margin-top: 80px;
  padding: 58px 0 66px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, #fff6fa 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #ffffff 0%, #fffaf1 100%);
}

/* Two blurred colour washes drifting behind the band. Pointer-events off so they
   never sit in front of the carousel's own click targets. */
.hop_by_blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: ageDrift 16s ease-in-out infinite;
}

/* Kept faint on purpose. At the strength these started out they read as a stain
   on the page rather than a wash behind it. */
.hop_by_blob--a {
  top: -90px;
  left: -110px;
  width: 340px;
  height: 340px;
  background: rgba(171, 45, 114, 0.14);
}

.hop_by_blob--b {
  right: -120px;
  bottom: -120px;
  width: 380px;
  height: 380px;
  background: rgba(252, 198, 3, 0.16);
  animation-direction: reverse;
  animation-duration: 20s;
}

@keyframes ageDrift {
  50% { transform: translate3d(28px, -22px, 0) scale(1.12); }
}

.hop_by .container { position: relative; z-index: 1; }

/* --- heading -------------------------------------------------------------- */

.hop_by_heading { text-align: center; }

/* Both the pill and the h1 below it are inline-level and centred by the parent's
   text-align, which put them side by side on one line — "PICK AN AGE Shop by
   Age" — and dragged the h1's underline into the middle of the title. The pill
   claims its own line by being a flex row that centres its own contents. */
.hop_by_eyebrow {
  display: flex;
  width: fit-content;
  margin: 0 auto 14px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 15px;
  border-radius: 999px;
  background: #fdeef6;
  border: 1px solid #f4d5e6;
  color: #ab2d72;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.hop_by_eyebrow i { font-size: 12px; }

.hop_by_heading h1 {
  position: relative;
  display: inline-block;
  font-size: 38px;
  font-weight: 800;
  color: #001430;
  text-align: center;
  margin-bottom: 0;
}

/* Brand swoosh under the title — plum into the house yellow. */
.hop_by_heading h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 74px;
  height: 5px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #ab2d72, #fcc603);
}

.hop_by_heading p {
  font-size: 14.5px;
  margin: 18px 0 30px;
  line-height: 1.5;
  color: var(--text_color);
  text-align: center;
}

/* --- age card ------------------------------------------------------------- */

.agecard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 16px 22px;
  border-radius: 26px;
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(180deg, #ffffff 0%, var(--ac-tint) 100%);
  border: 2px solid rgba(0, 20, 48, 0.05);
  box-shadow: 0 10px 26px rgba(0, 20, 48, 0.07);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.4s;
}

/* Accent cap across the top — the quickest read that these four are different. */
.agecard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: linear-gradient(90deg, var(--ac), var(--ac-deep));
}

/* bootstrap.min.css carries a bare `a:hover { text-decoration: underline }`,
   which outranks the `.agecard` rule above and struck a line through the whole
   card's text on hover — a decoration set on an ancestor cannot be dropped by
   its children, so it has to be cancelled here. */
.agecard:hover,
.agecard:focus,
.agecard:focus-visible {
  text-decoration: none;
}

/* No accent outline on hover — a hard 2px ring right around the card fought
   with the accent cap along the top and boxed the tile in. The lift and the
   deeper shadow carry the state on their own. */
.agecard:hover,
.agecard:focus-visible {
  transform: translateY(-10px);
  box-shadow: 0 22px 44px rgba(0, 20, 48, 0.16);
}

/* Light sweeping across the card on hover. */
.agecard__sheen {
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.agecard:hover .agecard__sheen { animation: ageSheen 0.85s ease-out; }

@keyframes ageSheen {
  to { left: 115%; }
}

/* --- portrait ring -------------------------------------------------------- */

.agecard__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 26px rgba(0, 20, 48, 0.12), inset 0 0 0 5px var(--ac-tint);
  transition: box-shadow 0.35s;
}

.agecard:hover .agecard__ring {
  box-shadow: 0 16px 32px rgba(0, 20, 48, 0.18), inset 0 0 0 5px #fff;
}

/* Dashed halo, always turning slowly; it speeds up and solidifies on hover. */
.agecard__orbit {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px dashed var(--ac);
  opacity: 0.3;
  animation: ageSpin 22s linear infinite;
  transition: opacity 0.3s;
}

.agecard:hover .agecard__orbit {
  opacity: 0.85;
  animation-duration: 6s;
}

@keyframes ageSpin {
  to { transform: rotate(360deg); }
}

/* The portrait bobs on its own, offset per card (--ac-delay) so the row never
   moves in lockstep. */
.agecard__ring img {
  width: 112px !important;
  height: 112px;
  display: block;
  object-fit: contain;
  animation: ageFloat 4.5s ease-in-out infinite;
  animation-delay: var(--ac-delay, 0s);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes ageFloat {
  50% { transform: translateY(-7px); }
}

.agecard:hover .agecard__ring img { transform: scale(1.07); }

/* --- label / count / cta -------------------------------------------------- */

.agecard__label {
  margin: 18px 0 0;
  font-size: 17px;
  font-weight: 800;
  color: #001430;
  text-align: center;
}

/* Reserved height, not natural height: a blurb that wraps to two lines on one
   card would otherwise push its label and CTA out of line with its neighbours. */
.agecard__blurb {
  margin-top: 4px;
  min-height: 1.4em;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #69778a;
  text-align: center;
}

/* Stock count rides in the corner rather than in the text stack — it is a
   footnote, not the second thing you read. */
.agecard__count {
  position: absolute;
  top: 15px;
  right: 13px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ac);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* A band with nothing in it yet says so, rather than showing a hollow "0". */
.agecard__count.is-empty {
  background: rgba(0, 20, 48, 0.07);
  color: #8794a5;
}

.agecard:hover .agecard__count { transform: scale(1.1); }

/* Folded away until hover — it keeps the resting card calm and gives the hover
   somewhere to go. Height, not display, so it can animate.

   The side padding is not decoration: `overflow: hidden` is what makes the fold
   work, and without the gutter it also clipped the arrow the moment it slid its
   4px to the right — all you saw was a sliver of the arrowhead. */
.agecard__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-height: 0;
  margin-top: 0;
  padding: 0 8px;
  opacity: 0;
  overflow: hidden;
  color: var(--ac-deep);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: max-height 0.35s, opacity 0.3s, margin-top 0.35s;
}

.agecard:hover .agecard__cta,
.agecard:focus-visible .agecard__cta {
  max-height: 26px;
  margin-top: 10px;
  opacity: 1;
}

.agecard__cta i { transition: transform 0.3s; }
.agecard:hover .agecard__cta i { transform: translateX(4px); }

/* --- scroll-in ------------------------------------------------------------ */

/* Default state is fully visible; the class only ever adds an animation, so if
   the observer never fires the cards are still there. */
.hop_by.is-in .agecard {
  animation: ageRise 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.hop_by.is-in .owl-item:nth-child(1) .agecard { animation-delay: 0.05s; }
.hop_by.is-in .owl-item:nth-child(2) .agecard { animation-delay: 0.14s; }
.hop_by.is-in .owl-item:nth-child(3) .agecard { animation-delay: 0.23s; }
.hop_by.is-in .owl-item:nth-child(4) .agecard { animation-delay: 0.32s; }
.hop_by.is-in .owl-item:nth-child(5) .agecard { animation-delay: 0.41s; }
.hop_by.is-in .owl-item:nth-child(6) .agecard { animation-delay: 0.5s; }

.hop_by.is-in .hop_by_heading > * {
  animation: ageRise 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.hop_by.is-in .hop_by_heading h1 { animation-delay: 0.08s; }
.hop_by.is-in .hop_by_heading p { animation-delay: 0.16s; }

@keyframes ageRise {
  from { opacity: 0; transform: translateY(26px); }
}

/* Anyone who has asked the OS to stop motion gets the layout with none of it. */
@media (prefers-reduced-motion: reduce) {
  .hop_by_blob,
  .agecard__orbit,
  .agecard__ring img,
  .hop_by.is-in .agecard,
  .hop_by.is-in .hop_by_heading > * {
    animation: none !important;
  }

  .agecard:hover .agecard__sheen { animation: none; }
}

#shopByAge {
  position: relative;
}

/* The cards lift 10px and throw a wide shadow; the stage clips its overflow, so
   it needs the room or the hover gets sliced off at the top. */
#shopByAge .owl-stage-outer { padding: 16px 0 30px; }

#shopByAge .owl-nav,
#latestproduct .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

#shopByAge .owl-nav button.owl-next,
#latestproduct .owl-nav button.owl-next,
#shopByAge .owl-nav button.owl-prev,
#latestproduct .owl-nav button.owl-prev {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary_color);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  transition: 0.3s ease;
  cursor: pointer;
  pointer-events: auto;
}

#shopByAge .owl-nav button.owl-prev,
#latestproduct .owl-nav button.owl-prev {
  position: absolute;
  left: -30px;
}

#shopByAge .owl-nav button.owl-next,
#latestproduct .owl-nav button.owl-next {
  position: absolute;
  right: -30px;
}

#shopByAge .owl-nav button.owl-next:hover,
#latestproduct .owl-nav button.owl-next:hover,
#shopByAge .owl-nav button.owl-prev:hover,
#latestproduct .owl-nav button.owl-prev:hover {
  background: var(--primary_color);
  color: #fff;
  transform: scale(1.05);
}

#shopByAge .owl-nav button:focus,
#latestproduct .owl-nav button:focus {
  outline: none;
}

/* The product cards throw a drop-shadow and lift 6px on hover, and owl clips its
   stage — so the shadow was being sliced off flat along the bottom of every card
   in this carousel. The other two carousels already carry this padding. */
#latestproduct .owl-stage-outer { padding: 14px 0 22px; }

/* Below the container's own padding the arrows at -30px stopped clearing the
   row and sat on top of the first and last card. */
@media (max-width: 991.98px) {
  #latestproduct .owl-nav button.owl-prev { left: -6px; }
  #latestproduct .owl-nav button.owl-next { right: -6px; }
}

/* --- carousel arrows on phones -------------------------------------------
   On a phone two cards fill the row edge to edge, so a side arrow has nowhere
   to sit but on top of a card — or half off the screen. Hiding them left the
   sliders with no visible control at all, so they move under the row instead:
   a centred pair, in the flow, clear of the cards.
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  #latestproduct .owl-nav,
  #shopByAge .owl-nav,
  #offerSlider .owl-nav {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: auto;
    margin: 6px 0 0 !important;
    transform: none;
    pointer-events: auto;
  }

  /* One look for all three, so the three sliders on the page don't offer three
     different-looking controls. #latestproduct still had the old small yellow
     pair from the shared rule further up. */
  #latestproduct .owl-nav button.owl-prev,
  #latestproduct .owl-nav button.owl-next,
  #shopByAge .owl-nav button.owl-prev,
  #shopByAge .owl-nav button.owl-next,
  #offerSlider .owl-nav button.owl-prev,
  #offerSlider .owl-nav button.owl-next {
    position: static;
    left: auto;
    right: auto;
    width: 40px;
    height: 40px;
    margin: 0;
    border: 2px solid #f4d5e6;
    background: #fff;
    color: #ab2d72;
    font-size: 15px;
    box-shadow: 0 6px 16px rgba(0, 20, 48, 0.1);
  }

  /* Dimmed, not hidden. The desktop rule removes a disabled arrow because up
     there both are disabled at once; on a phone only one is, and hiding it left
     a single arrow sitting off to one side of the row. */
  #shopByAge .owl-nav button.disabled,
  #latestproduct .owl-nav button.disabled,
  #offerSlider .owl-nav button.disabled {
    display: inline-flex;
    opacity: 0.3;
    pointer-events: none;
  }
}

/* Shop-by-age gets bigger, plum arrows — the shared pair above is sized for the
   product carousel and reads as a stray dot beside these taller cards. */
#shopByAge .owl-nav button.owl-prev,
#shopByAge .owl-nav button.owl-next {
  width: 52px;
  height: 52px;
  border: 2px solid #f4d5e6;
  color: #ab2d72;
  font-size: 19px;
  box-shadow: 0 8px 20px rgba(0, 20, 48, 0.12);
}

#shopByAge .owl-nav button.owl-prev:hover,
#shopByAge .owl-nav button.owl-next:hover {
  background: #ab2d72;
  border-color: #ab2d72;
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 12px 26px rgba(171, 45, 114, 0.34);
}

/* Autoplay progress isn't shown, so the dots are the only "there is more"
   signal on touch, where the arrows sit off-screen. */
#shopByAge .owl-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

#shopByAge .owl-dots .owl-dot span {
  width: 8px;
  height: 8px;
  margin: 0;
  background: rgba(171, 45, 114, 0.25);
  transition: 0.3s;
}

#shopByAge .owl-dots .owl-dot.active span {
  width: 26px;
  background: #ab2d72;
}

/* Once all four bands fit on screen there is nothing to page through, and owl
   leaves the greyed-out arrows and a single dot sitting there.

   Above the phone breakpoint only: on a phone two bands are visible, so exactly
   one arrow is disabled at a time — hiding it left a single arrow sitting off to
   one side under the row. The phone rules dim it instead. This block also has to
   stay out of that range because it sits later in the file and would otherwise
   win the tie on specificity. */
@media (min-width: 576px) {
  #shopByAge .owl-nav.disabled,
  #shopByAge .owl-nav button.disabled,
  #shopByAge .owl-dots.disabled,
  #shopByAge .owl-dots .owl-dot:only-child {
    display: none;
  }
}

/*--===============|| 08. PROCESS SYSTEM ||===============--*/
.bg_discount {
  margin-top: 80px;
}

.process_card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 30px 25px;
  border-radius: 15px;
  background: rgba(255, 165, 0, 0.12);
  overflow: hidden;
  transition: 0.3s ease;
}

.icon_box {
  position: relative;
  width: 60px;
  height: 60px;
  overflow: hidden;
}

.bg_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.svg_icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 0.5s ease;
}

.svg1 {
  opacity: 1;
}

.svg2 {
  top: 120%;
  opacity: 0;
}

.process_card:hover {
  background: rgba(255, 165, 0, 0.25);
  transform: translateY(-3px);
}

.process_card:hover .svg1 {
  top: -50%;
  opacity: 0;
}

.process_card:hover .svg2 {
  top: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.content_process h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 0px;
}

.content_process p {
  font-size: 15px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.card_process_sy {
  background-color: #e6eef9 !important;
}

.card_process_syt {
  background-color: #dff8f6 !important;
}

.card_process_syss {
  background-color: #ffeef0 !important;
}

/*--===============|| 09. POINT OF SALE ||===============--*/
.point_of_sale {
  margin-top: 80px;
  margin-bottom: 80px;
  border-radius: 15px;
}

/*--===============|| 07b. DISCOUNT CARD ||===============--*/
/* Back to the cta_03.png artwork at the client's request. The card sits behind
   the image at a smaller radius than the image itself, so its colour shows only
   as a sliver at the corners — that is the original look. */

.discont_card {
  position: relative;
  border-radius: 15px;
  background-color: var(--primary_color);
}

.discount_card_img img {
  width: 100%;
  display: block;
  border-radius: 30px;
}





/* ==========================================================================
   Desktop reading size — home page
   --------------------------------------------------------------------------
   Same 1200px breakpoint the header uses to leave the hamburger behind. Below
   it these keep their original sizes; responsive.css still has the last word
   on the small screens.
   ========================================================================== */
@media (min-width: 1200px) {

  /* Toys by Age cards: "3 - 5 Years", its blurb, and the Shop now nudge. */
  .agecard__label { font-size: 16px; }
  .agecard__blurb { font-size: 14px; }
  .agecard__cta   { font-size: 16px; }

  /* Shop By Category carousel: "Trending at Hamley", "Outdoor Toys", … */
  .catcard .catcard__name { font-size: 16px; }
}