/* Chicco Nepal (first-smile-pvt-ltd) on the nextron theme.
   Matches the home page to the reference design
   (https://shpy-wix.b-cdn.net/chicco-nepal/index.html): header, section
   headings + "View all", categories, section spacing, fonts and colours.
   Loads after first-smile-pvt-ltd.css (the store's existing custom CSS), so
   rules here win by load order. The product card itself is the Mustache
   template CHICCO_CARD_TEMPLATE in
   components/common/cardTemplate/localCardTemplates.js. */

/* ---------- tokens + fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");

/* Chicco Nepal — generated Tier-B CSS (bloomix base).
   Uploaded to the store's dedicated generated-CSS file (site_settings.sx_css_location).
   Every rule is scoped under .sx / .sx-<section>; brand colour comes from --secondary-main. */

/* BEGIN shoopy-gen:base */
.sx {
  --sx-brand: var(--secondary-main, #013c8f);
  --sx-brand-dark: #002a6b;
  --sx-soft: #e6eefa;
  --sx-sky: #f3f7fd;
  --sx-dot: #ef0126;
  --sx-ink: #16233f;
  --sx-muted: #5c6780;
  --sx-line: #e4eaf3;
  --sx-wa: #25d366;
  --sx-head: "Poppins", system-ui, sans-serif;
  --sx-radius: 20px;
  box-sizing: border-box;
  width: 100%;
  color: var(--sx-ink);
  font-family: inherit;
}
.sx *,
.sx *::before,
.sx *::after {
  box-sizing: border-box;
}
.sx .sx-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px;
}
.sx .sx-kicker {
  display: inline-block;
  margin: 0 0 10px;
  color: var(--sx-brand);
  font-family: var(--sx-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sx .sx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 0;
  font-family: var(--sx-head);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--sx-brand);
  color: #fff;
  transition:
    background 0.15s,
    transform 0.15s;
}
.sx .sx-btn:hover {
  background: var(--sx-brand-dark);
  transform: translateY(-1px);
}
.sx .sx-btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.sx .sx-btn--light {
  background: #fff;
  color: var(--sx-brand-dark);
}
.sx .sx-btn--light:hover {
  background: var(--sx-soft);
}
.sx .sx-btn--wa {
  background: var(--sx-wa);
  color: #0b2a17;
}
.sx .sx-btn--wa:hover {
  background: #1fbe5a;
}
/* END shoopy-gen:base */

/* BEGIN shoopy-gen:usp-1 */
.sx-usp {
  background: var(--sx-sky);
  border-bottom: 1px solid var(--sx-line);
}
.sx-usp .sx-usp__list {
  list-style: none;
  margin: 0 auto;
  padding: 14px 16px;
  max-width: 1320px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}
.sx-usp .sx-usp__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sx-usp .sx-usp__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--sx-brand);
  box-shadow: 0 2px 8px rgba(22, 35, 63, 0.06);
}
.sx-usp .sx-usp__icon svg {
  width: 20px;
  height: 20px;
}
.sx-usp .sx-usp__title {
  margin: 0;
  font-family: var(--sx-head);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
.sx-usp .sx-usp__sub {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--sx-muted);
  line-height: 1.3;
}
@media (min-width: 1024px) {
  .sx-usp .sx-usp__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 20px 16px;
  }
  .sx-usp .sx-usp__item + .sx-usp__item {
    border-left: 1px solid var(--sx-line);
    padding-left: 22px;
  }
  .sx-usp .sx-usp__icon {
    width: 46px;
    height: 46px;
  }
  .sx-usp .sx-usp__title {
    font-size: 15px;
  }
  .sx-usp .sx-usp__sub {
    font-size: 13px;
  }
}
/* END shoopy-gen:usp-1 */

/* BEGIN shoopy-gen:story-1 */
.sx-story {
  margin: 44px 0 4px;
  padding: 40px 0;
  background: var(--sx-brand);
  color: #dfe8f8;
  position: relative;
  overflow: hidden;
}
.sx-story::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -140px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.sx-story .sx-story__grid {
  position: relative;
  display: grid;
  gap: 28px;
}
.sx-story .sx-kicker {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  padding: 5px 12px;
  border-radius: 999px;
}
.sx-story .sx-story__title {
  margin: 4px 0 14px;
  font-family: var(--sx-head);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: #fff;
}
.sx-story .sx-story__title span {
  display: block;
  font-size: 0.8em;
  font-weight: 600;
  color: #ffd34d;
  margin-bottom: 4px;
}
.sx-story .sx-story__text {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.65;
  max-width: 58ch;
}
.sx-story .sx-story__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.sx-story .sx-story__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.sx-story .sx-story__ico {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--sx-brand);
}
.sx-story .sx-story__ico svg {
  width: 21px;
  height: 21px;
}
.sx-story .sx-story__item b {
  display: block;
  font-family: var(--sx-head);
  font-size: 16px;
  color: #fff;
  margin-bottom: 2px;
}
.sx-story .sx-story__item span {
  font-size: 14px;
  line-height: 1.5;
}
@media (min-width: 1024px) {
  .sx-story {
    margin-top: 64px;
    padding: 64px 0;
  }
  .sx-story .sx-story__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .sx-story .sx-story__title {
    font-size: 38px;
  }
  .sx-story .sx-story__text {
    font-size: 16px;
  }
}
/* END shoopy-gen:story-1 */

/* BEGIN shoopy-gen:visit-1 */
.sx-visit {
  padding: 44px 0 8px;
}
.sx-visit .sx-visit__grid {
  display: grid;
  gap: 16px;
}
.sx-visit .sx-visit__card {
  padding: 26px 22px;
  border-radius: var(--sx-radius);
  background: var(--sx-sky);
  border: 1px solid var(--sx-line);
}
.sx-visit .sx-visit__card--help {
  background: #fff4ee;
  border-color: #fde3d6;
}
.sx-visit .sx-visit__title {
  margin: 0 0 10px;
  font-family: var(--sx-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.sx-visit .sx-visit__text {
  margin: 0 0 20px;
  color: var(--sx-muted);
  font-size: 15px;
  line-height: 1.6;
}
.sx-visit .sx-visit__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.sx-visit .sx-visit__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
}
.sx-visit .sx-visit__row b {
  display: block;
  font-family: var(--sx-head);
  font-weight: 600;
}
.sx-visit .sx-visit__row span {
  display: block;
  color: var(--sx-muted);
}
.sx-visit .sx-visit__row a {
  color: var(--sx-brand);
  font-weight: 600;
  text-decoration: none;
}
.sx-visit .sx-visit__row a:hover {
  text-decoration: underline;
}
.sx-visit .sx-visit__dot {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--sx-brand);
}
.sx-visit .sx-visit__dot svg {
  width: 18px;
  height: 18px;
}
@media (min-width: 900px) {
  .sx-visit {
    padding-top: 64px;
  }
  .sx-visit .sx-visit__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .sx-visit .sx-visit__card {
    padding: 36px 34px;
  }
  .sx-visit .sx-visit__title {
    font-size: 28px;
  }
}
/* END shoopy-gen:visit-1 */

/* Preview-only styling that mimics the bloomix theme chrome + native sections,
     re-skinned to Chicco blue. Published custom CSS lives in theme.css (Tier-B blocks only). */
:root {
  --secondary-main: #013c8f;
  --brand-dark: #002a6b;
  --brand-soft: #e6eefa;
  --sky-2: #f3f7fd;
  --dot: #ef0126;
  --sun: #ffd34d;
  --peach: #fff4ee;
  --ink: #16233f;
  --muted: #5c6780;
  --line: #e4eaf3;
  --wa: #25d366;
  --head: "Poppins", system-ui, sans-serif;
  --body: "Roboto", system-ui, sans-serif;
  --r: 16px;
  --r-lg: 24px;
  --shadow-sm: 0 4px 14px rgba(22, 35, 63, 0.06);
  --shadow: 0 12px 30px rgba(22, 35, 63, 0.1);
}
* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
button {
  font: inherit;
}
.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---- notice (Tier C) ---- */
.notice {
  background: linear-gradient(90deg, var(--brand-dark), var(--secondary-main));
  color: #fff;
  font-size: 12.5px;
}
.notice .wrap {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding-block: 8px;
  font-weight: 500;
}
.notice span + span {
  display: none;
}
.notice b {
  color: var(--sun);
  font-weight: 700;
}
@media (min-width: 900px) {
  .notice span + span {
    display: inline;
  }
  .notice span + span::before {
    content: "•";
    margin-right: 28px;
    opacity: 0.5;
  }
}

/* ---- header (Tier C) ---- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  box-shadow:
    0 1px 0 var(--line),
    0 6px 18px rgba(22, 35, 63, 0.07);
}
.hdr-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
}
.burger {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  margin-left: -8px;
}
.burger svg,
.hdr-ico svg {
  width: 24px;
  height: 24px;
}
.logo {
  display: flex;
  align-items: center;
  margin-left: 4px;
  text-decoration: none;
}
.logo img {
  height: 34px;
  width: auto;
}
.search {
  grid-column: 1 / -1;
  order: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.search svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--secondary-main);
}
.hdr-left {
  display: flex;
  align-items: center;
}
.hdr-acts {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: end;
}
.hdr-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ink);
  text-decoration: none;
}
.hdr-ico:hover {
  background: var(--sky-2);
}
.hdr-ico.wa {
  color: #128c4b;
}
.hdr-ico.acct {
  display: none;
}
.cart-n {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--secondary-main);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 4px;
}
.menu-band {
  background: var(--sky-2);
  border-top: 1px solid var(--line);
}
.menu {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 8px;
}
.menu::-webkit-scrollbar {
  display: none;
}
.menu a {
  flex: none;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--head);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
}
.menu a:hover {
  background: var(--secondary-main);
  border-color: var(--secondary-main);
  color: #fff;
}
.menu a.alt {
  color: var(--secondary-main);
  font-weight: 600;
}
@media (min-width: 1024px) {
  .hdr-top {
    grid-template-columns: auto minmax(320px, 600px) auto;
    gap: 40px;
    padding-block: 16px;
  }
  .burger {
    display: none;
  }
  .logo {
    margin-left: 0;
  }
  .logo img {
    height: 44px;
  }
  .search {
    grid-column: auto;
    order: 0;
    width: 100%;
    justify-self: center;
    height: 46px;
    background: var(--sky-2);
    border-color: transparent;
  }
  .hdr-ico.acct {
    display: grid;
  }
  .menu {
    justify-content: center;
    gap: 8px;
    padding-block: 6px;
  }
  .menu a {
    background: none;
    border-color: transparent;
    font-size: 14px;
    padding: 8px 16px;
  }
  .menu a:hover {
    background: #fff;
    border-color: var(--line);
    color: var(--secondary-main);
  }
}

/* ---- hero (StoreBanner, Tier A) ---- */
.hero {
  position: relative;
  background: var(--sky-2);
}
.hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.hero-track::-webkit-scrollbar {
  display: none;
}
.slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
}
.slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.slide-copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 36px 24px 0;
  color: var(--brand-dark);
}
.slide-title {
  margin: 0 0 18px;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(28px, 7.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 13ch;
}
.slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--secondary-main);
  color: #fff;
  font-family: var(--head);
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 8px 20px rgba(1, 60, 143, 0.22);
}
.slide-cta svg {
  width: 18px;
  height: 18px;
}
.hero-dots {
  display: flex;
  padding: 12px 0;
  justify-content: center;
  gap: 8px;
}
.hero-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 5px;
  border: 0;
  background: rgba(22, 35, 63, 0.25);
  cursor: pointer;
  transition: width 0.2s;
}
.hero-dots button.on {
  width: 26px;
  background: var(--secondary-main);
}
.hero-arr {
  display: none;
}
@media (min-width: 768px) {
  .slide img {
    aspect-ratio: 3 / 1;
  }
  .slide-copy {
    top: 50%;
    transform: translateY(-50%);
    padding: 0 0 0 max(84px, calc((100% - 1288px) / 2));
  }
  .slide-title {
    font-size: clamp(30px, 3.6vw, 52px);
    max-width: 14ch;
    margin-bottom: 26px;
  }
  .slide-cta {
    min-height: 52px;
    padding: 0 28px;
    font-size: 16px;
  }
  .hero-arr {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }
  .hero-arr svg {
    width: 22px;
    height: 22px;
  }
  .hero-arr.prev {
    left: 18px;
  }
  .hero-arr.next {
    right: 18px;
  }
}

/* ---- shared section chrome ---- */
.sec {
  padding: 36px 0 8px;
}
.sec-hd {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.sec-title {
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.sec-title::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--dot);
  vertical-align: baseline;
}
.sec-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.view-all {
  flex: none;
  font-family: var(--head);
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary-main);
  text-decoration: none;
  white-space: nowrap;
}
.view-all:hover {
  text-decoration: underline;
}
@media (min-width: 1024px) {
  .sec {
    padding: 56px 0 12px;
  }
  .sec-title {
    font-size: 30px;
  }
  .sec-sub {
    font-size: 15px;
  }
}

/* ---- categories (ProductCategoriesV2, Tier A) ---- */
.cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 10px;
}
.cats a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  text-align: center;
}
.cats img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.cats a:hover img {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.cats span {
  font-family: var(--head);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
}
@media (min-width: 768px) {
  .cats {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 20px;
  }
  .cats span {
    font-size: 14.5px;
  }
}

/* ---- product rows / grids (ProductGridCollection, Tier A) ---- */
/* Scoped under .sec: bare .row/.grid clash with Tailwind's .grid on the
     storefront (it collapsed every home row to 5 columns). */
.sec .row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-padding-inline: 16px;
  padding: 4px 16px 14px;
  margin: 0 -16px;
}
.sec .row::-webkit-scrollbar {
  display: none;
}
.sec .row > * {
  scroll-snap-align: start;
}
.sec .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px) {
  .sec .row {
    grid-auto-columns: 30%;
  }
}
@media (min-width: 768px) {
  .sec .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sec .grid .pc-title {
    font-size: 13px;
  }
  .sec .grid .pc-add {
    font-size: 12.5px;
  }
}
@media (min-width: 1024px) {
  .sec .row {
    grid-auto-columns: calc((100% - 4 * 20px) / 5);
    gap: 20px;
    margin: 0;
    padding: 4px 0 18px;
    scroll-padding-inline: 0;
  }
  .sec .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
  }
}

.pc {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.pc:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.pc-img {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: #fff;
}
.pc-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6%;
  transition: transform 0.3s;
}
.pc:hover .pc-img img {
  transform: scale(1.04);
}
.pc-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--secondary-main);
  font-family: var(--head);
  font-size: 11px;
  font-weight: 600;
}
.pc-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line);
}
.pc-brand {
  font-family: var(--head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary-main);
}
.pc-title {
  margin: 0;
  font-family: var(--head);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-var {
  font-size: 12.5px;
  color: var(--muted);
}
.pc-price {
  margin-top: 4px;
  font-family: var(--head);
  font-size: 16px;
  font-weight: 700;
}
.pc-add {
  margin-top: 10px;
  min-height: 40px;
  border-radius: 999px;
  border: 1.5px solid var(--secondary-main);
  background: #fff;
  color: var(--secondary-main);
  font-family: var(--head);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.pc-add:hover {
  background: var(--secondary-main);
  color: #fff;
}
@media (min-width: 1024px) {
  .pc-title {
    font-size: 15px;
  }
  .pc-price {
    font-size: 17px;
  }
  .pc-body {
    padding: 12px 14px 14px;
  }
}

/* ---- promo pair (BannerCollection ×2, Tier A) ---- */
.promos {
  display: grid;
  gap: 14px;
}
.promo {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
}
.promo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.4s;
}
.promo:hover img {
  transform: scale(1.03);
}
.promo-copy {
  position: absolute;
  top: 0;
  left: 0;
  padding: 28px 26px;
  color: var(--brand-dark);
}
.promo-title {
  margin: 0 0 16px;
  font-family: var(--head);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  max-width: 12ch;
}
.promo-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--secondary-main);
  color: #fff;
  font-family: var(--head);
  font-size: 14px;
  font-weight: 600;
}
@media (min-width: 768px) {
  .promos {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .promo img {
    aspect-ratio: 2 / 1;
  }
  .promo-copy {
    top: 50%;
    transform: translateY(-50%);
    padding: 0 0 0 5%;
  }
  .promo-title {
    font-size: clamp(22px, 2.4vw, 32px);
    max-width: 9ch;
  }
}

/* ---- footer (Tier C) ---- */
.ftr {
  margin-top: 48px;
  background: var(--brand-dark);
  color: #d9e3f5;
  font-size: 14px;
}
.ftr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 20px;
  padding-block: 40px 28px;
}
.ftr-brand {
  grid-column: 1 / -1;
}
.ftr-brand img {
  height: 46px;
  width: auto;
  margin-bottom: 14px;
}
.ftr-brand p {
  margin: 0 0 16px;
  max-width: 42ch;
}
.ftr h3 {
  margin: 0 0 12px;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.ftr ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ftr a {
  text-decoration: none;
}
.ftr a:hover {
  color: #fff;
  text-decoration: underline;
}
.ftr-contact {
  grid-column: 1 / -1;
}
.soc {
  display: flex;
  gap: 10px;
}
.soc a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.soc a:hover {
  background: rgba(255, 255, 255, 0.2);
}
.soc svg {
  width: 18px;
  height: 18px;
}
.ftr-base {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 16px 22px;
  font-size: 12.5px;
  color: #aebdd8;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (min-width: 768px) {
  .ftr-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  }
  .ftr-brand,
  .ftr-contact {
    grid-column: auto;
  }
  .ftr-base {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ---- mobile WhatsApp float ---- */
.wa-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.wa-float svg {
  width: 28px;
  height: 28px;
}
:root {
  --cn-brand: #013c8f;
  --cn-brand-dark: #002a6b;
  --cn-soft: #e6eefa;
  --cn-sky: #f3f7fd;
  --cn-dot: #ef0126;
  --cn-ink: #16233f;
  --cn-muted: #5c6780;
  --cn-line: #e4eaf3;
  --cn-head: "Poppins", system-ui, sans-serif;
  --cn-body: "Roboto", system-ui, sans-serif;
  --cn-shadow: 0 12px 30px rgba(22, 35, 63, 0.1);
  /* nextron builds body / MUI text off this var (base.css forces it on body
     with !important), so redefining it switches the whole theme to Roboto. */
  --typography-font-family: "Roboto", system-ui, sans-serif;
  --secondary-main: #013c8f;
  --section-heading-color: #16233f;
}

body.sh-body {
  color: var(--cn-ink);
  letter-spacing: normal;
}

/* Bare `img { display:block }` in the base file stacks inline icons (rating
   stars etc.) vertically; keep nextron's inline images inline. */
.sh-tc-rating img,
.product-rating-stars img {
  display: inline-block;
}

/* ---------- header ---------- */
.luxury-header {
  background: #fff;
  box-shadow:
    0 1px 0 var(--cn-line),
    0 6px 18px rgba(22, 35, 63, 0.07);
}

.luxury-header .notice {
  background: linear-gradient(90deg, var(--cn-brand-dark), var(--cn-brand));
  color: #fff;
  font-family: var(--cn-body);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 16px;
}

.header-desktop-wrapper.page-container {
  max-width: 1320px;
  padding-left: 16px;
  padding-right: 16px;
}

.luxury-header .sh-header-logo {
  height: 34px;
}

.luxury-header .mobile-menu-button,
.luxury-header .mobile-header-icons button,
.luxury-header .icon-button,
.luxury-header .icon-button-mobile {
  color: var(--cn-ink);
}

.luxury-header .badge-icon-count {
  background: var(--cn-brand);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}

@media (min-width: 1024px) {
  .main-header {
    flex: 0 0 auto;
    padding-block: 16px;
    height: auto;
  }

  .luxury-header .sh-header-logo {
    height: 44px;
  }

  /* Logo | search pill (centred, <=600px) | icons — like the reference's
     auto / minmax(320px, 600px) / auto header grid. */
  .luxury-header .utility-bar {
    flex: 1 1 auto;
    padding: 0;
  }

  .luxury-header .utility-bar-content {
    padding: 0 0 0 40px;
  }

  .luxury-header .utility-bar-content > .w-full:first-child {
    display: none;
  }

  .luxury-header .utility-icons {
    gap: 2px;
  }

  .luxury-header .utility-icons .search-container {
    flex: 1 1 auto;
    max-width: 600px;
    margin: 0 auto;
    height: 46px;
    padding: 0 16px;
    gap: 8px;
    border-radius: 999px;
    background: var(--cn-sky);
    cursor: text;
  }

  .luxury-header .utility-icons .search-container::before {
    display: none;
  }

  /* Always-open search (nextron only reveals it on hover). The inline
     display:none is beaten by !important. */
  .luxury-header .search-container .input-container {
    display: block !important;
    order: 2;
    flex: 1 1 auto;
    width: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .luxury-header .search-container .search-icon {
    order: 1;
    display: grid;
    place-items: center;
    color: var(--cn-brand);
  }

  .luxury-header .search-container .search-icon svg {
    width: 18px;
    height: 18px;
    color: var(--cn-brand);
  }

  .luxury-header .search-container .search-btn {
    display: none;
  }

  .luxury-header .search-container input,
  .luxury-header .search-container input::placeholder {
    font-family: var(--cn-body);
    font-size: 14px;
    color: var(--cn-muted);
    opacity: 1;
  }

  .luxury-header .utility-icons .icon-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background 0.15s;
  }

  .luxury-header .utility-icons .icon-button:hover {
    background: var(--cn-sky);
  }

  /* Search suggestions: nextron sizes the dropdown for its 280px hover
     search (400px wide, pinned 20px past the input's right edge), so under
     the 600px pill it hung off to the right. Anchor it to the whole pill
     instead: #search-box's inline position:relative is released so the
     dropdown positions against .search-container (position:relative). */
  .luxury-header .search-container #search-box {
    position: static !important;
  }

  .luxury-header .search-container .search-dropdown {
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: auto !important;
    padding: 0;
    background: transparent;
  }

  .luxury-header .search-container .search-dropdown-panel {
    overflow: hidden;
    border: 1px solid var(--cn-line);
    border-radius: 16px;
    box-shadow: var(--cn-shadow);
  }
}

/* Menu band: sky strip with pill links (the admin menu colour is inline, so
   the background needs !important). */
.luxury-header div:has(> .desktop-nav-wrapper) {
  background: var(--cn-sky) !important;
  border-top: 1px solid var(--cn-line);
}

.luxury-header .desktop-nav-wrapper.page-container {
  max-width: 1320px;
  padding-left: 16px;
  padding-right: 16px;
}

.luxury-header .desktop-nav {
  justify-content: center !important;
  padding-block: 6px;
}

.luxury-header .desktop-menu-container {
  justify-content: center;
  gap: 4px;
}

/* The pill sits on .nav-item so the dropdown chevron (a sibling of the
   link) is inside it. The admin menu colour is inline on the link. */
.luxury-header .nav-item {
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--cn-ink);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.luxury-header .nav-link {
  padding: 0;
  font-family: var(--cn-head);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: inherit !important;
}

.luxury-header .nav-item > svg {
  color: currentColor;
  opacity: 0.6;
}

.luxury-header .nav-item:hover {
  background: #fff;
  border-color: var(--cn-line);
  color: var(--cn-brand);
}

/* ---------- shared section chrome ---------- */
/* Reference `.sec`: 1320px wrap, 16px gutters, 36px/8px vertical rhythm
   (56px/12px on desktop). */
.LargeCategoriesCardV1-component > .page-container,
.ProductCategoriesV2-component > .page-container,
.ProductGridCollection-component > .page-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 36px 16px 8px;
}

@media (min-width: 1024px) {
  .LargeCategoriesCardV1-component > .page-container,
  .ProductCategoriesV2-component > .page-container,
  .ProductGridCollection-component > .page-container {
    padding: 56px 16px 12px;
  }
}

.heading-title,
.category-header {
  margin: 0;
  font-family: var(--cn-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cn-ink);
}

/* Red brand dot after every section title. */
.heading-title::after,
.category-header::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--cn-dot);
  vertical-align: baseline;
}

.heading-description {
  margin: 4px 0 0;
  font-family: var(--cn-body);
  font-size: 14px;
  color: var(--cn-muted);
}

@media (min-width: 1024px) {
  .heading-title,
  .category-header {
    font-size: 30px;
  }

  .heading-description {
    font-size: 15px;
  }
}

.collection-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

/* "Shop All" -> the reference's "View all" link. */
.shop-all-link {
  flex: none;
  font-family: var(--cn-head);
  font-size: 0;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--cn-brand);
  white-space: nowrap;
  text-decoration: none;
}

.shop-all-link::after {
  content: "View all";
  font-size: 14px;
}

.shop-all-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Collection subtitles from the reference (the collections have no
   description field). Keyed by the collection slug in the "View all" link,
   which is stable (positional section-N classes shift when rows move). The
   text sits on the .heading wrapper's ::after — that wrapper is the element
   nextron fades up, so the subtitle animates with its title, and the
   title's own ::after stays free for the red dot. */
.collection-header .heading::after {
  display: block;
  margin: 4px 0 0;
  font-family: var(--cn-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cn-muted);
}

@media (min-width: 1024px) {
  .collection-header .heading::after {
    font-size: 15px;
  }
}

.collection-header:has(.shop-all-link[href$="/most-loved-1"]) .heading::after {
  content: "Parents' favourites across gear, feeding and play";
}

.collection-header:has(.shop-all-link[href$="/feeding-1"]) .heading::after {
  content: "Bottles, sterilising, breast pumps and first tableware";
}

.collection-header:has(.shop-all-link[href$="/gear-1"]) .heading::after {
  content: "Strollers, car seats, highchairs and carriers";
}

.collection-header:has(.shop-all-link[href$="/toys-1"]) .heading::after {
  content: "Playgyms, rattles, ride-ons and bath-time friends";
}

.collection-header:has(.shop-all-link[href$="/care-1"]) .heading::after {
  content: "Baby Moments bath & skin care, diapers and daily hygiene";
}

/* ---------- USP strip (HTML collection "usp-1") ---------- */
/* The admin HTML wraps the strip in an inline-styled
   `.sx-import-wrap { max-width:1320px; padding:0 16px }`, which boxes the
   sky band. The reference runs the band full-bleed and centres only the
   list (.sx-usp__list already caps itself at 1320px). Inline styles need
   !important. */
.sx-import-wrap:has(> .sx-usp) {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Show the strip directly under the hero banner, like the reference (in the
   admin page it sits after the categories row). CSS-only reorder: the home
   <main> becomes a flex column (its rows all have zero margins, so nothing
   shifts) and the hero / USP row get the first two slots. Scoped to the
   page that has the hero, so other pages' <main> is untouched. */
main:has(> .hero-banner-root) {
  display: flex;
  flex-direction: column;
}

main:has(> .hero-banner-root) > * {
  order: 3;
}

main:has(> .hero-banner-root) > .hero-banner-root {
  order: 1;
}

main:has(> .hero-banner-root) > .section:has(.sx-usp) {
  order: 2;
}

/* ---------- showroom card (HTML collection "visit-1") ---------- */
/* The base file's `.sx-visit .sx-visit__row span { display:block; color:muted }`
   out-ranks `.sx-visit .sx-visit__dot` (the dot is a <span>), so the circle
   lost its grid centring (icon stuck top-left) and turned grey. Restore the
   reference's centred Chicco-blue icon with a more specific selector. */
.sx-visit .sx-visit__row .sx-visit__dot {
  display: grid;
  place-items: center;
  color: var(--cn-brand);
}

/* ---------- categories ---------- */
.cat-section {
  padding: 0;
  justify-content: flex-start;
}

/* Doubled-up selectors: the category critical CSS is injected inline later
   in <body>, so plain class selectors would lose to it. */
.cat-section .category-header {
  width: 100%;
  margin: 0 0 4px;
  font-size: 22px;
  text-align: left;
}

@media (min-width: 1024px) {
  .cat-section .category-header {
    font-size: 30px;
  }
}

/* Reference subtitle under "Shop by category" (the admin has no field for
   it). The heading's ::after is already the red dot, so the text goes on
   the grid wrapper that follows the heading. */
.cat-section > .category-header + .w-full::before {
  content: "Everything for the first years, in one place";
  display: block;
  margin: 0 0 18px;
  font-family: var(--cn-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--cn-muted);
  /* Rise in with the heading: nextron fades the heading up 30px until it
     scrolls into view (data-visible), so mirror that state and timing here
     or the heading would slide over the subtitle while it animates. */
  transition:
    opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.cat-section > .category-header[data-visible="false"] + .w-full::before {
  opacity: 0;
  transform: translateY(30px);
}

@media (min-width: 1024px) {
  .cat-section > .category-header + .w-full::before {
    font-size: 15px;
  }
}

.cat-section .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 10px;
}

@media (min-width: 768px) {
  .cat-section .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 20px;
  }
}

.cat-card .cat-card-img-container,
.cat-card .cat-card-img,
.cat-card .cat-card-letter-container {
  border-radius: 50%;
}

.cat-card .cat-card-img {
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.cat-card a:hover .cat-card-img {
  transform: translateY(-4px);
  box-shadow: var(--cn-shadow);
}

.cat-card .cat-card-title {
  margin: 8px 0 0;
  font-family: var(--cn-head);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cn-ink);
}

@media (min-width: 768px) {
  .cat-card .cat-card-title {
    font-size: 14.5px;
  }
}

/* ---------- product rows ---------- */
/* Card gutters: 12px on mobile, 20px on desktop (reference .row gap). On
   mobile ~2.2 cards show so the next one peeks in, like the reference's
   44%-wide scroll row. */
.product-collection .product-swiper {
  --gap-between-cards: 12px;
}

@media (max-width: 767px) {
  .product-collection .product-swiper-slide {
    --product-in-row: 2.25;
  }
}

@media (min-width: 1024px) {
  .product-collection .product-swiper {
    --gap-between-cards: 20px;
  }
}

.product-collection .swiper-pagination {
  display: none;
}

.product-collection .swiper-button-prev,
.product-collection .swiper-button-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(22, 35, 63, 0.12);
}

.product-collection .swiper-button-prev::after,
.product-collection .swiper-button-next::after {
  font-size: 15px;
  font-weight: 700;
  color: var(--cn-brand) !important;
}

.product-collection .swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

/* ---------- product page (Chicco PDP preset) ---------- */
/* nextron wraps the PDP in .page-container-s (max 1200px + 40px side
   padding = 1120px content). The reference PDP uses the same 1320px wrap as
   the home page (1288px content), and the preset (scoped inside the
   template) can't widen its own ancestor — so widen it here, only on pages
   rendering the Chicco preset. On mobile the container keeps its 16px gutter
   and the preset has none; from 768px the preset supplies the 16px. */
@media (min-width: 768px) {
  .page-container-s:has(> .pdp-preset-custom > .pdp-preset-chicco) {
    max-width: 1320px;
    padding-left: 0;
    padding-right: 0;
  }
}