/* ==========================================================================
   Silacart — Kids category page
   Custom styles. Loaded AFTER Bootstrap 5.3.
   All custom classes are prefixed `sc-`. No !important, no element overrides.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Palette sampled from the live silacart.qa stylesheet.
   -------------------------------------------------------------------------- */
:root {
  --sc-teal: #009dab;
  --sc-teal-dark: #007a85;
  --sc-teal-soft: #e6f5f7;
  --sc-navy: #0e1b2a;
  --sc-navy-2: #16304a;
  --sc-cream: #f0e5ce; /* trust strip */
  --sc-red: #e0393e;
  --sc-green: #17a957;
  --sc-amber: #e5b352;
  --sc-gold: #e5b352; /* hero eyebrow */
  --sc-body: #1f2937;
  --sc-muted: #6b7280;
  --sc-line: #e5e7eb;
  --sc-bg: #ffffff;
  --sc-bg-soft: #f7f8fa;
  --sc-radius: 12px;
  --sc-radius-sm: 8px;
  --sc-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sc-shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12);

  /* Home page additions — pastel tile tints, brand-tile ground and the
     summer-sale gradient stops. */
  --sc-tint-pink: #ffecea;
  --sc-tint-blue: #c5dcf1;
  --sc-tint-mint: #c7ffcd;
  --sc-tint-peach: #faefe6;
  --sc-tint-lilac: #f2daff;
  --sc-delivery-bg: #e4fdff;
  --sc-area-1-bg: #b8faff;
  --sc-area-1-ink: #2faeb8;
  --sc-area-2-bg: #fff6e5;
  --sc-area-2-ink: #a73025;
  --sc-area-3-bg: #f7e2e0;
  --sc-area-3-ink: #a73025;
  --sc-area-4-bg: #ccf1ff;
  --sc-area-4-ink: #1ba9b8;
  --sc-area-5-bg: #fff9e2;
  --sc-area-5-ink: #c9a725;
  --sc-area-6-bg: #d7ff8c;
  --sc-area-6-ink: #77a81b;
  --sc-fav-bg: #fbe9e9;
  --sc-why-bg: #0e93a2;
  --sc-summer-badge: #f5901e;
  --sc-summer-ink: #a81d1d;
  --sc-brand-ground: #101a26;
  --sc-summer-from: #fbe8c8;
  --sc-summer-to: #f2b978;
}
body, p{font-size: 14px}
/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
.sc-page {
  font-family:
    "Be Vietnam Pro",
    "Poppins",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-size: 14px;
}

.sc-link {
  color: var(--sc-body);
  text-decoration: none;
  transition: color 0.15s ease;
}

.sc-link:hover,
.sc-link:focus-visible {
  color: var(--sc-teal);
}

.sc-muted {
  color: var(--sc-muted);
}

.sc-section {
  /*padding-block: 34px;*/
  padding: 0 0 1.5rem  0;
}

.sc-section-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin-bottom: 18px;
}

/* Global focus ring — every interactive element is keyboard reachable. */
.sc-page a:focus-visible,
.sc-page button:focus-visible,
.sc-page input:focus-visible,
.sc-page select:focus-visible,
.sc-page summary:focus-visible,
.sc-page [tabindex]:focus-visible {
  /*outline: 2px solid var(--sc-teal);*/
  outline-offset: 0px;
  outline: none;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.sc-btn-teal {
  background-color: var(--sc-teal);
  border: 1px solid var(--sc-teal);
  color: #fff;
  border-radius: var(--sc-radius-sm);
  font-weight: 500;
  font-size: 13px;
  padding: 9px 16px;
  line-height: 1.2;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.sc-btn-teal:hover,
.sc-btn-teal:focus-visible {
  background-color: var(--sc-teal-dark);
  border-color: var(--sc-teal-dark);
  color: #fff;
}

.sc-btn-white {
  background-color: #fff;
  border: 1px solid #fff;
  color: #000;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 26px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.sc-btn-white:hover,
.sc-btn-white:focus-visible {
  background-color: var(--sc-navy);
  border-color: var(--sc-navy);
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Utility bar
   -------------------------------------------------------------------------- */
.sc-utility {
  background: #006671;
  color: #fff;
  font-size: 12px;
  padding-block: 8px;
}

.sc-utility a {
  color: #fff;
  text-decoration: none;
}

.sc-utility a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.sc-header {
  background-color: var(--sc-bg);
  /*border-bottom: 1px solid var(--sc-line);
  padding-block: 25px;*/
  padding: 20px 0 12px;
}

.sc-header-sticky {
  position: sticky;
  top: 0;
  z-index: 1030;
  /*box-shadow: var(--sc-shadow);*/
}

/* Search — one rounded pill holding the category select, the input and the
   teal magnifier button, per the mockup. */
.sc-search {
  align-items: center;
    width: 100%;
    max-width: 768px;
    padding: 5px;
    overflow: visible;
    border-radius: 12px;
  margin: 0;
    background: #f5f3f3;
    box-shadow: 0 0 0 1px rgba(188, 201, 203, 0.20);
}

.sc-search-cat {
  background: transparent;
    border: 0;
    border-right: 1px solid rgba(188, 201, 203, 0.30);
    padding: 5px 25px 5px 7px;
    white-space: nowrap;
    flex: 0 0 auto;
    color: #3D494B;
  width: 150px;
    font-family: "Be Vietnam Pro";
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.6px;
  background-size: 9px;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6' fill='none'%3E%3Cpath d='M4.5 5.55L0 1.05L1.05 0L4.5 3.45L7.95 0L9 1.05L4.5 5.55Z' fill='%233D494B'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.sc-search-cat::after {
  margin-left: 10px;
  vertical-align: middle;
}

.sc-search-input {
  flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 8px 14px;
    color: rgba(0, 0, 0, 0.8);
    font-family: "Be Vietnam Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.sc-search-input::placeholder {
  color: #9ca3af;
}

.sc-search-input:focus {
  outline-offset: -4px;
}

/* Rounded square, not a circle — as drawn in the mockup. */
.sc-search-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background-color: var(--sc-teal);
  color: #fff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
  border-radius: 10px;
  background: #006671;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sc-search-btn:hover,
.sc-search-btn:focus-visible {
  background-color: var(--sc-teal-dark);
}

.sc-icon-btn {
  position: relative;
  background: transparent;
  border: 0;
  color: var(--sc-body);
  font-size: 20px;
  line-height: 1;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}

.sc-icon-btn:hover,
.sc-icon-btn:focus-visible {
  color: var(--sc-teal);
}

.sc-badge-count {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: #006671;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
      aspect-ratio: 1 / 1;
    border: 0;
}

.sc-account {
  /*font-size: 12px;*/
  /*font-weight: 600;*/
  /*letter-spacing: 0.3px;*/
  /*color: var(--sc-body);*/
  /*text-decoration: none;*/
  white-space: nowrap;

  color: #3D494B;
text-align: center;
font-family: "Be Vietnam Pro";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 12px; /* 75% */
letter-spacing: 0.6px;
text-transform: uppercase;
}

.sc-account:hover,
.sc-account:focus-visible {
  color: var(--sc-teal);
}

/* --------------------------------------------------------------------------
   6. Main nav
   -------------------------------------------------------------------------- */
/* No background band — the nav sits on the page, dark links on white.
   Sticky: sits directly under .sc-header-sticky (which pins at top:0,
   z-index:1030). Top offset matches the header height at this padding. */
.sc-mainnav {
      border-top: 1px solid rgba(188, 201, 203, 0.10);
    border-bottom: 1px solid rgba(188, 201, 203, 0.30);
    background: #FFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding-bottom: 10px;
    padding-top: 4px;
    position: sticky;
    top: 80px;
    z-index: 1029;
}

.sc-mainnav-link {
  text-decoration: none;
    text-transform: uppercase;
    padding: 13px 20px;
    display: inline-block;
    transition: color 0.15s ease, border-color 0.15s ease;
    color: #3D494B;
    font-family: "Be Vietnam Pro";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 12px;
    letter-spacing: 1.2px;
}

.sc-mainnav-link:hover,
.sc-mainnav-link:focus-visible {
  color: var(--sc-teal);
}

.sc-mainnav-link.sc-is-active {
  color: var(--sc-teal);
  border-bottom-color: var(--sc-teal);
}

/* Desktop mega-dropdown — categories with children.
   The dropdown-toggle keeps sc-mainnav-link styling; only the caret from
   Bootstrap's .dropdown-toggle::after is added. The panel is a wide grid
   of sub-category links, with a "Shop all X" header link at the top. */
.sc-mainnav-item {
  position: relative;
}

.sc-mainnav-toggle::after {
  vertical-align: 0.15em;
  border-top-color: currentColor;
  margin-left: 6px;
}

.sc-mainnav-mega {
  min-width: 520px;
  max-width: 90vw;
  padding: 18px 22px 20px;
  border: 1px solid var(--sc-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  margin-top: 0;
}

.sc-mainnav-mega-head {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sc-teal);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sc-line);
  margin-bottom: 12px;
  width: 100%;
}

.sc-mainnav-mega-head:hover,
.sc-mainnav-mega-head:focus-visible {
  color: var(--sc-teal-dark, #007a85);
}

.sc-mainnav-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 24px;
}

.sc-mainnav-sublink {
  display: block;
  padding: 8px 0;
  color: var(--sc-body);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}

.sc-mainnav-sublink:hover,
.sc-mainnav-sublink:focus-visible {
  color: var(--sc-teal);
}

/* Between the desktop breakpoint (992px) and 1200px, the mega panel drops
   to two columns so a nav item near the right edge doesn't clip. */
@media (max-width: 1199.98px) {
  .sc-mainnav-mega {
    min-width: 420px;
  }
  .sc-mainnav-mega-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile menu links */
.sc-offcanvas-link {
  display: block;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--sc-body);
  text-decoration: none;
  border-bottom: 1px solid var(--sc-line);
}

.sc-offcanvas-link:hover,
.sc-offcanvas-link.sc-is-active {
  color: var(--sc-teal);
}

/* Mobile offcanvas accordion — parent categories with children.
   Layout: [parent link takes remaining width] [chevron toggle button].
   Tap parent → navigate. Tap chevron → toggle in-place child list. */
.sc-offcanvas-item {
  border-bottom: 1px solid var(--sc-line);
}

.sc-offcanvas-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
}

.sc-offcanvas-link--parent {
  flex: 1 1 auto;
  border-bottom: none;
}

.sc-offcanvas-toggle {
  flex: 0 0 44px;
  background: transparent;
  border: 0;
  padding: 0 12px;
  color: var(--sc-body);
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.sc-offcanvas-toggle:not(.collapsed) {
  transform: rotate(180deg);
  color: var(--sc-teal);
}

.sc-offcanvas-children {
  padding: 4px 0 10px 14px;
}

.sc-offcanvas-sublink {
  display: block;
  padding: 8px 0;
  color: var(--sc-body);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: none;
}

.sc-offcanvas-sublink:hover,
.sc-offcanvas-sublink:focus-visible {
  color: var(--sc-teal);
}

/* --------------------------------------------------------------------------
   7. Logo
   Used by the header, the mobile menu and the footer.
   -------------------------------------------------------------------------- */
.sc-logo {
  font-size: 26px;
  font-weight: 700;
  color: var(--sc-teal);
  letter-spacing: -0.6px;
  text-decoration: none;
  line-height: 1;
}

.sc-logo:hover {
  color: var(--sc-teal-dark);
}
.sc-logo svg {
  height: auto;
  width: 100px;
}
.sc-logo-dot {
  color: var(--sc-amber);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.sc-hero {
  position: relative;
  overflow: hidden;
  /* Square bottom — the cream trust strip butts directly onto the hero. */
  border-radius: 24px 24px 0 0;
  background: linear-gradient(
    105deg,
    var(--sc-navy) 0%,
    var(--sc-navy-2) 52%,
    #0b2740 100%
  );
  color: #fff;
  min-height: 300px;
  display: flex;
  align-items: center;
}

.sc-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 45%;
  padding: 42px 0 42px 44px;
}

.sc-hero-eyebrow {
  color: var(--sc-gold);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.sc-hero-title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.6px;
  margin-bottom: 12px;
  /* .sc-hero-panel sets color:#fff, but Bootstrap's .text-reset on the
     wrapping <a> forces `color:inherit !important` and wins. Set the
     title colour explicitly so the left heading matches .sc-hero-alt-title
     on the right panel. */
  color: #fff;
}

.sc-hero-text {
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 0;
  max-width: 45ch;
}

.sc-hero-media {
  position: absolute;
  inset-block: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 1;
}

.sc-hero-media img {
  width: 100%;
  height: 100%;
}

.sc-hero-glow {
  position: absolute;
  right: 12%;
  top: 50%;
  width: 340px;
  height: 340px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 157, 171, 0.42) 0%,
    rgba(0, 157, 171, 0) 68%
  );
  z-index: 0;
}

/* --------------------------------------------------------------------------
   9. Trust strip
   -------------------------------------------------------------------------- */
.sc-trust {
  background-color: var(--sc-cream);
  border-radius: 0 0 24px 24px;
  padding: 22px;
}

/* Five equal columns. The divider sits on the column, not the item — each item
   is the first child of its own .col, so :first-child would match all five. */
/* Narrower than the page shell so the five columns — and therefore the dividers
   between them — sit closer together instead of spanning the full width. */
.sc-trust-col-row {
  width: 1290px;
  max-width: 100%;
  margin: 0 auto;
}
.sc-trust-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.sc-trust-col + .sc-trust-col {
  border-left: 1px solid #e6b75b;
}

.sc-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding-inline: 0;
  min-height: 52px;
  padding: 0 20px;
}

/* Desktop items use inline SVGs that carry no class — stop them shrinking. */
.sc-trust-item svg {
  flex: 0 0 auto;
}

.sc-trust-icon {
  color: var(--sc-navy);
  font-size: 19px;
  line-height: 1;
  flex: 0 0 auto;
}

.sc-trust-title {
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.3;
  font-size: 16px;
}

.sc-trust-sub {
  margin-bottom: 0;
  font-size: 14px;
}

/* Carousel variant (below md): no dividers, and the item fills the slide */
.sc-trust-carousel .sc-trust-item {
  padding-inline: 0;
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   10. Category tiles
   -------------------------------------------------------------------------- */
.sc-cat {
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--sc-body);
}

.sc-cat-thumb {
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.sc-cat-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.sc-cat-label {
  color: #1b1c1c;
  font-weight: 700;
  line-height: 1.35;
  display: block;
}

/* Desktop layout: 2 rows of 10 tiles. Bootstrap's row-cols stops at 6. */
.sc-cat-grid {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 25px;
}

/* Six rotating pastel tints */
.sc-tint-1 {
  border: 1px solid rgba(188, 201, 203, 0.2);
  background: #ede7f4;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.sc-tint-2 {
  border: 1px solid rgba(188, 201, 203, 0.2);
  background: #e9f4eb;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.sc-tint-3 {
  border: 1px solid rgba(188, 201, 203, 0.2);
  background: #e5f3f1;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.sc-tint-4 {
  border: 1px solid rgba(188, 201, 203, 0.2);
  background: #fbefe7;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.sc-tint-5 {
  border: 1px solid rgba(188, 201, 203, 0.2);
  background: #ecf3fb;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* --------------------------------------------------------------------------
   11. Product card
   -------------------------------------------------------------------------- */
.sc-card {
  position: relative;
  background-color: var(--sc-bg);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.sc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sc-shadow-lg);
}

.sc-card-media {
  position: relative;
  background-color: #f4f5f7;
  aspect-ratio: 1 / 0.92;
  overflow: hidden;
}

.sc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform 0.3s ease;
  mix-blend-mode: multiply;
}

.sc-card:hover .sc-card-media img {
  transform: scale(1.04);
}

.sc-ribbon {
  position: absolute;
  top: 10px;
  left: 0;
  background-color: var(--sc-red);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.8px;
  padding: 4px 9px 4px 8px;
  border-radius: 0 4px 4px 0;
  z-index: 2;
}

.sc-wish {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--sc-line);
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--sc-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 2;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.sc-wish:hover,
.sc-wish:focus-visible {
  color: var(--sc-red);
  border-color: var(--sc-red);
}

.sc-card-body {
  padding: 10px 11px 12px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 7px;
}

.sc-pill-delivery {
  background-color: var(--sc-teal-soft);
  color: var(--sc-teal-dark);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.sc-rating {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #3d494b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.sc-rating .bi {
  color: var(--sc-amber);
  font-size: 10px;
}

.sc-card-title {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sc-card-title a {
  color: inherit;
  text-decoration: none;
}

.sc-card-title a:hover {
  color: var(--sc-teal);
}

.sc-price-now {
  font-size: 14px;
  font-weight: 700;
  color: var(--sc-body);
}

.sc-price-was {
  font-size: 11px;
  color: var(--sc-muted);
  text-decoration: line-through;
}

.sc-price-off {
  font-size: 10px;
  font-weight: 600;
  color: var(--sc-green);
  background-color: #e9f8ef;
  padding: 2px 6px;
  border-radius: 4px;
}

.sc-compare {
  font-size: 10.5px;
  color: var(--sc-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.sc-compare input {
  width: 13px;
  height: 13px;
  accent-color: var(--sc-teal);
  cursor: pointer;
}

.sc-card-cta {
  margin-top: auto;
  width: 100%;
}

/* --------------------------------------------------------------------------
   12. New Arrival / Top Picks carousels
   -------------------------------------------------------------------------- */
.sc-pick-panel {
  border-radius: 12px;
  background: #f5f3f3;
  padding: 20px 30px;
  position: relative;
  height: 100%;
}

.sc-pick-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
}

/* Owl nav arrows: circular, vertically centred, just outside the track */
.sc-pick-panel .owl-nav button.owl-prev,
.sc-pick-panel .owl-nav button.owl-next {
  position: absolute;
    top: 56%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
}

.sc-pick-panel .owl-nav button.owl-prev {
  left: -14px;
}
.sc-pick-panel .owl-nav button.owl-next {
  right: -14px;
}

.sc-pick-panel .owl-nav button.owl-prev:hover,
.sc-pick-panel .owl-nav button.owl-next:hover,
.sc-pick-panel .owl-nav button.owl-prev:focus-visible,
.sc-pick-panel .owl-nav button.owl-next:focus-visible {
  background-color: var(--sc-teal);
  border-color: var(--sc-teal);
  color: #fff;
}

.sc-pick-panel .owl-nav button.owl-prev.disabled,
.sc-pick-panel .owl-nav button.owl-next.disabled {
  opacity: 0.4;
}

/* Owl dots for the mobile-only carousels */
.sc-owl-dots .owl-dots {
  text-align: center;
  margin-top: 14px;
}

.sc-owl-dots .owl-dots button.owl-dot span {
  width: 7px;
  height: 7px;
  margin: 0 3px;
  border-radius: 999px;
  background-color: #cbd5e1;
  display: block;
  transition:
    width 0.2s ease,
    background-color 0.2s ease;
}

.sc-owl-dots .owl-dots button.owl-dot.active span {
  width: 18px;
  background-color: var(--sc-teal);
}

/* --------------------------------------------------------------------------
   13. Shop by age
   -------------------------------------------------------------------------- */
/* Icon pinned to the left edge, chevron pinned to the right edge, text taking
   whatever is left in between — rather than the three sitting bunched together. */
.sc-age {
  text-decoration: none;
  height: 100%;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  border-radius: 24px;

  display: flex;
  height: 81px;
  padding: 10px 15px;
  align-items: center;
  gap: 15px;
  flex: 1 0 0;
}

.sc-age-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Subtitle and chevron share one line, chevron pushed to the far right. */
.sc-age-subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sc-age-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--sc-navy);
  flex: 0 0 auto;
  align-self: center;
}

/* Drop-in slot for the design's own icon artwork (as in the trust strip). */
.sc-age-icon svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.sc-age-title {
  color: #1b1c1c;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.24px;
  margin-bottom: 9px;
}

.sc-age-sub {
  color: rgba(61, 73, 75, 0.7);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.sc-age-chev {
  flex: 0 0 auto;
  line-height: 1;
}
.sc-tint-3 .sc-age-chev svg path {
  fill: #006671;
}
.sc-tint-2 .sc-age-chev svg path {
  fill: #548235;
}
.sc-tint-5 .sc-age-chev svg path {
  fill: #1a569d;
}
.sc-tint-4 .sc-age-chev svg path {
  fill: #e67e22;
}
.sc-tint-1 .sc-age-chev svg path {
  fill: #8e24aa;
}
/* --------------------------------------------------------------------------
   14. Listing — sidebar
   -------------------------------------------------------------------------- */
.sc-sidebar {
  flex: 0 0 250px;
  max-width: 250px;
}

/* Lets the grid column shrink inside the flex row instead of overflowing */
.sc-min-w-0 {
  min-width: 0;
}

.sc-filter-card {
  padding: 14px;

  border-radius: 12px;
border: 1px solid rgba(250, 204, 21, 0.48);
background: #F8F8F8;
}

.sc-filter-heading {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 0;
}

.sc-reset {
  font-size: 12px;
  color: var(--sc-teal);
  text-decoration: none;
  font-weight: 500;
      border: 0;
    background: none;
    padding: 0;
}

.sc-reset:hover {
  text-decoration: underline;
}

.sc-filter-search {
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-sm);
  font-size: 12px;
  padding: 7px 10px 7px 30px;
  width: 100%;
  background-color: #ffffff;
  color: var(--sc-body);
}

.sc-filter-search-wrap {
  position: relative;
}

.sc-filter-search-wrap .bi {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--sc-muted);
  pointer-events: none;
}

/* Bootstrap accordion, restyled via sc- wrapper */
.sc-accordion .accordion-item {
  border: 0;
  border-top: 1px solid var(--sc-line);
  background-color: transparent;
}

.sc-accordion .accordion-button {
  padding: 11px 2px;
  background-color: transparent;
  box-shadow: none;
  color: #1B1C1C;
  font-family: "Be Vietnam Pro";
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.sc-accordion .accordion-button::after {
  width: 12px;
  height: 12px;
  background-size: 12px;
}

.sc-accordion .accordion-button:not(.collapsed) {
  color: var(--sc-body);
  background-color: transparent;
}

.sc-accordion .accordion-button:focus {
  box-shadow: none;
}

.sc-accordion .accordion-body {
  padding: 0 2px 12px;
}

.sc-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--sc-body);
  padding-block: 6px;
  cursor: pointer;
}

.sc-check input {
  width: 14px;
  height: 14px;
  accent-color: var(--sc-teal);
  flex: 0 0 auto;
  cursor: pointer;
}

.sc-check-count {
  margin-left: auto;
  font-size: 14px;
  color: var(--sc-muted);
}

.sc-price-inputs input {
  border: 1px solid var(--sc-line);
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 8px;
  width: 100%;
  min-width: 0;
  color: var(--sc-body);
}

.sc-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sc-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--sc-line);
  padding: 0;
  background-color: #fff;
  transition: transform 0.15s ease;
}

.sc-swatch:hover,
.sc-swatch:focus-visible {
  transform: scale(1.14);
}

.sc-swatch-on {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--sc-teal);
}

/* Colour swatches — the live store's Kids colour facet */
.sc-sw-black {
  background-color: #111827;
}
.sc-sw-white {
  background-color: #ffffff;
}
.sc-sw-red {
  background-color: #dc2626;
}
.sc-sw-blue {
  background-color: #2563eb;
}
.sc-sw-skyblue {
  background-color: #7dd3fc;
}
.sc-sw-green {
  background-color: #16a34a;
}
.sc-sw-yellow {
  background-color: #facc15;
}
.sc-sw-orange {
  background-color: #f97316;
}
.sc-sw-pink {
  background-color: #f472b6;
}
.sc-sw-purple {
  background-color: #8b5cf6;
}
.sc-sw-brown {
  background-color: #92400e;
}
.sc-sw-grey {
  background-color: #9ca3af;
}
.sc-sw-beige {
  background-color: #e7dcc5;
}
.sc-sw-gold {
  background-color: #d4af37;
}
.sc-sw-silver {
  background-color: #c0c5ce;
}
.sc-sw-multi {
  background-image: conic-gradient(
    #dc2626,
    #facc15,
    #16a34a,
    #2563eb,
    #8b5cf6,
    #dc2626
  );
}

/* --------------------------------------------------------------------------
   15. Listing — grid header
   -------------------------------------------------------------------------- */
.sc-breadcrumb {
  font-size: 14px;
  color: #1B1C1C;
  font-weight: 400;
  margin-bottom: 4px;
}

.sc-breadcrumb a {
  color: #3D494B;
  text-decoration: none;
}

.sc-breadcrumb a:hover {
  color: var(--sc-teal);
}

.sc-listing-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 0;
  line-height: 1.2;
}

.sc-count {
  font-size: 14px;
  color: var(--sc-muted);
}

.sc-sort {
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-sm);
  font-size: 14px;
  padding: 7px 30px 7px 10px;
  background-color: #fff;
  color: #1b1c1c
}

.sc-sort-label {
  font-size: 14px;
  color: #3D494B;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   16. Pagination
   -------------------------------------------------------------------------- */
.sc-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}

.sc-page-link {
  min-width: 32px;
  height: 32px;
  border-radius: var(--sc-radius-sm);
  border: 1px solid var(--sc-line);
  background-color: #fff;
  color: var(--sc-body);
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding-inline: 8px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.sc-page-link:hover,
.sc-page-link:focus-visible {
  border-color: var(--sc-teal);
  color: var(--sc-teal);
}

.sc-page-link.sc-is-active {
  background-color: var(--sc-teal);
  border-color: var(--sc-teal);
  color: #fff;
}

.sc-page-dots {
  color: var(--sc-muted);
  padding-inline: 4px;
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   17. Feedback banner
   -------------------------------------------------------------------------- */
.sc-feedback {
  background-color: var(--sc-teal);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.sc-feedback-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-height: 190px;
}

.sc-feedback-photo {
  max-height: 210px;
  width: auto;
  flex: 0 0 auto;
  align-self: flex-end;
}

.sc-feedback-copy {
  text-align: center;
  padding-block: 34px;
  flex: 1 1 auto;
  align-self: center;
}

.sc-feedback-title {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   18. FAQ
   -------------------------------------------------------------------------- */

.sc-faq-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}

.sc-faq-sub {
  margin-bottom: 26px;
}

/* Bootstrap's default open-state chevron is its primary blue. Override both
   states through Bootstrap's own custom properties so the marker stays on
   palette — no !important, no element-selector override needed. */
.sc-faq {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23009dab'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  --bs-accordion-btn-icon-width: 14px;
}

/* Rows read as separate white cards sitting on the tinted section panel. */
.sc-faq .accordion-item {
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius);
  margin-bottom: 14px;
  background-color: var(--sc-bg);
  overflow: hidden;
}

.sc-faq .accordion-item:last-child {
  margin-bottom: 0;
}

.sc-faq .accordion-button {
  font-size: 14px;
  font-weight: 500;
  color: var(--sc-body);
  background-color: #fff;
  padding: 18px 22px;
  box-shadow: none;
  gap: 12px;
}

/* Open row stays white — the rotated chevron and the revealed body are the
   only state cues, as in the design. */
.sc-faq .accordion-button:not(.collapsed) {
  color: var(--sc-body);
  background-color: #fff;
  box-shadow: none;
}

.sc-faq .accordion-button:focus {
  box-shadow: none;
}

/* Circular tinted badge behind each row icon. */
.sc-faq-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--sc-teal-soft);
  color: var(--sc-teal);
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* Body indents to sit under the question text, clear of the icon column
   (22px padding + 34px badge + 12px gap). */
.sc-faq .accordion-body {
  font-size: 13px;
  line-height: 1.8;
  color: var(--sc-muted);
  padding: 0 22px 20px 68px;
}

.sc-faq-foot {
  text-align: center;
  font-size: 13px;
  color: var(--sc-muted);
  margin: 26px 0 0;
  flex-wrap: wrap;
}

.sc-faq-foot a {
  color: #006671;
  font-weight: 700;
  text-decoration: none;
}

.sc-faq-foot a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   19. Newsletter
   -------------------------------------------------------------------------- */
.sc-newsletter {
  background: var(--sc-teal);
  color: #fff;
  padding-block: 40px;
}

.sc-newsletter-title {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}

.sc-newsletter-sub {
  font-size: 13px;
  color: #fff;
  margin-bottom: 0;
}

.sc-newsletter-form {
  display: flex;
  gap: 10px;
  max-width: 460px;
  width: 100%;
}

.sc-newsletter-input {
  flex: 1 1 auto;
  border: 0;
  border-radius: var(--sc-radius-sm);
  padding: 11px 14px;
  font-size: 13px;
  min-width: 0;
  color: var(--sc-body);
}

/* Subscribe is a rounded rectangle matching the input beside it, not the full
   pill .sc-btn-white gives by default. Scoped to this section so the feedback
   banner's "Give us your feedback" pill — which shares the class — is untouched. */
.sc-newsletter .sc-btn-white {
  border-radius: var(--sc-radius-sm);
  font-size: 13px;
  padding: 11px 24px;
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.sc-features {
  background-color: var(--sc-bg);
  border-top: 1px solid var(--sc-line);
  padding-block: 26px;
}

.sc-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sc-feature-icon {
  font-size: 24px;
  color: var(--sc-navy);
  line-height: 1;
  flex: 0 0 auto;
}

.sc-feature-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.sc-feature-sub {
  font-size: 11.5px;
  color: var(--sc-muted);
  margin-bottom: 0;
}

.sc-footer {
  padding: 0 0 38px;
}

.sc-footer-tag {
  font-size: 12px;
  color: var(--sc-muted);
  margin: 10px 0 18px;
}

.sc-footer-label {
  color: rgba(61, 73, 75, 0.50);
    font-size: 10px;
    font-weight: 800;
    line-height: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sc-footer-contact {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}

.sc-footer-contact .bi {
  color: var(--sc-teal);
  font-size: 14px;
  margin-top: 1px;
}

.sc-footer-value {
  text-decoration: none;
  line-height: 1.5;
  display: block;
  color: #1b1c1c;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.sc-footer-value:hover {
  color: var(--sc-teal);
}

.sc-footer-heading {
  margin-bottom: 25px;
  color: #1b1c1c;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 25.6px;
}
.sc-footer-heading::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  background-color: #006671;
  margin-top: 6px;
}
.sc-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sc-footer-list li + li {
  margin-top: 9px;
}

.sc-footer-list a {
  color: rgba(61, 73, 75, 0.8);
  font-weight: 400;
  line-height: 1.6;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.sc-footer-list a:hover,
.sc-footer-list a:focus-visible {
  color: var(--sc-teal);
}

.sc-social {
  display: flex;
  gap: 12px;
}
.sc-footer-list svg {
  width: 16px;
  height: auto;
  max-height: 16px;
}
/* Category filter_icon rendered next to a Top Categories row. Sized to
   the bi-tag glyph it replaces so rows with an image and rows falling
   back to the glyph share the same vertical rhythm. `flex: 0 0 auto`
   keeps the tile square even when the label wraps. */
.sc-footer-list .sc-footer-cat-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}
.menu_list_footer li a {
  display: flex;
}
.menu_list_footer li a::after {
  content: "";
  display: block;
  width: 5.55px;
  height: 9px;
  margin-left: auto;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="9" viewBox="0 0 6 9" fill="none"><path d="M3.45 4.5L0 1.05L1.05 0L5.55 4.5L1.05 9L0 7.95L3.45 4.5Z" fill="%233D494B" fill-opacity="0.8"/></svg>');
}
.sc-social a {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
border: 1px solid rgba(188, 201, 203, 0.30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-muted);
  font-size: 13px;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.sc-social a:hover,
.sc-social a:focus-visible {
  background-color: var(--sc-teal);
  border-color: var(--sc-teal);
  color: #fff;
}

.sc-app-card {
  border: 1px solid var(--sc-line);
  text-align: center;
  border-radius: 32px;
  background: #f5f3f3;
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  max-width: 304px;
}
.sc-social svg {
  max-height: 14px;
  max-width: 14px;
}
.sc-social a:hover img, .sc-social a:hover svg {
  filter: brightness(0) invert(1);
}
.sc-app-icon {
  width: 96px;
  height: 96px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  margin-bottom: 10px;
}
p.sc-app-title {
  color: #006671;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.24px;
}
.sc-app-sub {
  margin-bottom: 14px;
  line-height: 1.5;
}

/* Real App Store / Google Play badge artwork, served from silacart.qa. The
   badges carry their own wordmarks, so the link is just a sized wrapper. */
.sc-store-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sc-store-badge {
  display: block;
  max-width: 100%;
  border-radius: var(--sc-radius-sm);
  overflow: hidden;
  transition: opacity 0.15s ease;
}

.sc-store-badge img {
  display: block;
  width: 100%;
  height: auto;
}

.sc-store-badge:hover,
.sc-store-badge:focus-visible {
  opacity: 0.84;
}

/* --------------------------------------------------------------------------
   21. Bottom bar
   -------------------------------------------------------------------------- */
.sc-bottom {
  background-color: #ededed;
  border-top: 1px solid rgba(188, 201, 203, 0.1);
  padding-block: 30px;
}

.sc-bottom-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sc-bottom-item .bi {
  color: var(--sc-teal);
  font-size: 19px;
}

.sc-bottom-title {
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 0;
}

.sc-bottom-sub {
  font-size: 11px;
  color: var(--sc-muted);
  margin-bottom: 0;
  line-height: 1.3;
}

/* Sits in the centre column of the bottom bar, between the secure-payment
   note and the buy-with-confidence note. Hosts the THEQA trust-mark badge. */
.sc-paycards {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.sc-paycards img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* THEQA guideline 1.1: clear space around the badge must equal the height
   of the "TH" letters in the logo (~10px at the 55px badge height we use).
   Also enforces no shadow/filter/gradient/outline per usage restrictions. */
.sc-theqa {
  display: inline-block;
  padding: 10px;
  box-shadow: none;
  filter: none;
  background: transparent;
  border: 0;
}

.sc-theqa img {
  filter: none;
}

/* Its own band below .sc-bottom — the separating hairline and the vertical
   padding live on the bar, not on the row inside it. */
.sc-copyright-bar {
  background-color: var(--sc-bg-soft);
  border-top: 1px solid var(--sc-line);
  padding-block: 24px;
}

.sc-copyright, .sc-copyright a  {
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(61, 73, 75, 0.60);
font-family: "Be Vietnam Pro";
font-size: 12px;
  text-decoration: none;
}

.sc-copyright a:hover {
  color: var(--sc-teal);
}

/* "Powered by" uses the real SEEROO logo, not a text link. */
.sc-powered {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(27, 28, 28, 0.5);
font-family: "Be Vietnam Pro";
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 1.5
}

.sc-powered img {
  height: 22px;
  width: auto;
  display: block;
}

.sc-powered a {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.15s ease;
  color: #006671;
  font-weight: 700;
  font-style: italic;
}

.sc-powered a:hover,
.sc-powered a:focus-visible {
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   22. Mobile filters offcanvas
   -------------------------------------------------------------------------- */
.sc-filter-toggle {
  border: 1px solid var(--sc-line);
  background-color: #fff;
  border-radius: var(--sc-radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  color: var(--sc-body);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sc-filter-toggle:hover,
.sc-filter-toggle:focus-visible {
  border-color: var(--sc-teal);
  color: var(--sc-teal);
}

/* thumbnails */
span.corner-ribbon {
  border-radius: 0 0 12px 0;
  background: #006671;
  font-size: 12px;
  padding: 4px 12px;
  color: #e6b75b;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: absolute;
  left: 0;
  top: 0;
  /* .deal_div (below in this file) is position:relative and follows the
     ribbon in DOM order, so without a z-index the ribbon paints below the
     image and reads as "missing". Listing page's rule already had z-index:4
     for the same reason — matching it keeps every surface consistent. */
  z-index: 4;
}
.deal_delivery li > span {
  color: #006671;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 5px;
  background: #e6b75b;
  display: flex;
  padding: 5px;
  align-items: flex-start;
  gap: 4px;
  font-style: normal;
  width: fit-content;
}
span.discount-badge {
  color: #e6b75b;
  text-align: center;
  font-weight: 600;
  border-radius: 4px;
  background: #006671;
  display: flex;
  padding: 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}
span.discount-badge span.percent {
  color: inherit;
  font-size: inherit;
  font-weight: 600;
}
span.discount-badge span.off {
  color: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: 1;
}
.deal-card .new_price,
.order_items .new_price,
.deal-card .price-old {
  font-family: inherit;
}
button.wishlist_btn.btn,
a.wishlist_btn.btn {
  border-radius: 9999px;
  background: rgba(243, 243, 243, 0.8);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(2px);
  display: inline-flex;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0);
  position: absolute;
  top: 10px;
  right: 10px;
  height: 32px;
  width: 32px;

  text-decoration: none;
  /* The heart is `position: absolute` but sits BEFORE the product link in
     the card markup, and `.deal_div` inside that link is `position: relative`.
     Two positioned boxes with `z-index: auto` paint — and hit-test — in DOM
     order, so the image box won: a tap on the heart landed on the link
     underneath it and navigated to the product page instead of toggling the
     wishlist. (`.wishlist_btn`'s own handler does preventDefault, but it never
     ran — the click never reached the button.) The shared listing card has
     always carried `z-index: 5` on its `.wishlist-overlay` variant for exactly
     this reason; this is the same number on the plain `.wishlist_btn` the
     home/trending/favourites cards use. */
  z-index: 5;
}
/* Default heart state = outline only. The old rule set fill: #1b1c1c
   which overrode the template's inline `fill="none"` (CSS beats SVG
   presentation attributes) and made every not-yet-wishlisted heart look
   solid dark — indistinguishable from the wishlisted state. Shoppers
   read a "filled" heart as saved, tried to click to unsave, and the
   ADD endpoint answered "Product already in wishlist" because the row
   really was already there. `fill: none` lines up the CSS with the
   template's intent: outline heart when not wishlisted, gold heart when
   `.in-wishlist` is on the button. */
.wishlist_btn svg path {
  fill: none;
}
.wishlist_btn.in-wishlist svg path {
  fill: #F5A623;
  stroke: #F5A623;
}
.add_to_cart.btn-outline-secondary::before {
  width: 14px;
  /*filter: brightness(1) invert(1);*/
}
.add_to_cart.btn-outline-secondary {
      border-radius: 8px;
    border: 2px solid var(--primary-color);
    background: var(--primary-color);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    gap: 8px;
}

.deal-card {
  border-radius: 12px;
  /* Neutral hairline — kept in sync with the same rule in category_v2.css.
     Loaded AFTER category_v2 (see core_v2.xml), so this file's copy wins
     the cascade — both must stay in step or the listing cards revert to
     the old gold-tint border on any page that pulls this file. */
  border: 1px solid #BCC9CB;
  background: #F6F6F6;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
  padding-bottom: 80px;
}
.sc-pick-panel  .data_section_product_listing .deal-card{
  border-radius: 12px;
  border: 1px solid rgba(250, 204, 21, 0.48);
  background: #FFF;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.faq_new_sec {
  background-color: #f9f9f9;
  background-image: url(../images/faq_bg.svg);
  background-repeat: no-repeat;
  background-position: top 30px right 30px;
  padding: 50px 0;
  background-size: 120px;margin-top: -34px;
    padding-top: 44px !important;
}
.sc-faq .accordion-body {
  position: relative;
}
.sc-faq .accordion-body::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 27px;
  left: 35px;
  width: 2px;
  background-color: rgba(0, 102, 113, 0.3);
  z-index: 1;
}
section.footer_top {
  background: #ffffff;
}
hr {
  border-top-color: #f4f4f4;
  opacity: 1;
}
/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .sc-hero-title {
    font-size: 30px;
  }
  .sc-hero {
    min-height: 268px;
  }
}

@media (max-width: 1199.98px) {
  .sc-hero-copy {
    max-width: 52%;
    padding-left: 32px;
  }
  .sc-hero-title {
    font-size: 26px;
  }
  .sc-hero-media {
    width: 52%;
  }
  .sc-sidebar {
    flex: 0 0 230px;
    max-width: 230px;
  }
}

@media (max-width: 991.98px) {
  .sc-hero {
    min-height: 240px;
  }
  .sc-hero-copy {
    max-width: 62%;
    padding: 30px 0 30px 26px;
  }
  .sc-hero-title {
    font-size: 23px;
  }
  .sc-hero-media {
    width: 46%;
    opacity: 0.92;
  }
  .sc-pick-panel {
    padding-inline: 30px;
  }
  .sc-section {
    padding-block: 26px;
  }
}

@media (max-width: 767.98px) {
  .sc-hero {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
  }
  .sc-hero-copy {
    max-width: 100%;
    padding: 26px 22px 6px;
    text-align: center;
  }
  .sc-hero-text {
    margin-inline: auto;
  }
  .sc-hero-media {
    position: static;
    width: 100%;
    justify-content: center;
    padding-bottom: 14px;
  }
  .sc-hero-media img {
    max-height: 190px;
    transform: none;
  }
  .sc-hero-glow {
    display: none;
  }
  .sc-feedback-inner {
    min-height: auto;
  }
  .sc-feedback-photo {
    max-height: 130px;
  }
  .sc-feedback-title {
    font-size: 20px;
  }
  .sc-faq-title {
    font-size: 21px;
  }
  .sc-faq .accordion-button {
    padding: 15px 16px;
  }
  .sc-faq .accordion-body {
    padding: 0 16px 16px;
  }
  .sc-listing-title {
    font-size: 19px;
  }
}

@media (max-width: 575.98px) {
  .sc-feedback-photo {
    display: none;
  }
  .sc-hero-title, .sc-hero-alt-title {
    font-size: 18px !important;
  }
  .sc-hero-trust {
    font-size: 11px;}
  .sc-hero-eyebrow{letter-spacing: 0px; font-size: 10px;}
  .sc-newsletter-form {
    max-width: 100%;
  }
  .sc-pick-panel {
    padding-inline: 14px;
  }
  .sc-pick-panel .owl-nav button.owl-prev {
    left: -4px;
  }
  .sc-pick-panel .owl-nav button.owl-next {
    right: -4px;
  }
  .sc-hero-eyebrow-gold {
    letter-spacing: 0 !important;
    padding: 5px 14px;
    font-size: 9px !important;
  }
  .sc-hero-alt .sc-hero-panel-copy{max-width: 72% !important;}
  .box_reset_section .container-fluid{padding-left: 0; padding-right: 0;}
  .box_reset_section .container-fluid > .row{margin-left: 0; margin-right: 0}
  .box_reset_section .container-fluid > .row .col-12{padding-left: 0; padding-right: 0}
  .bg-box_deal, .sc-trending-band, .sc-fav-band, .sc-pick-panel, .offers-page .off-cat-panel{border-radius: 0 !important;}
  .sc-topdeals-carousel .owl-nav button.owl-prev, .sc-trending-carousel .owl-nav button.owl-prev, .sc-favorites-carousel .owl-nav button.owl-prev {
    left: -12px;
  }
  .sc-topdeals-carousel .owl-nav button.owl-next, .sc-trending-carousel .owl-nav button.owl-next, .sc-favorites-carousel .owl-nav button.owl-next {
    right: -12px;
  }

}

/* --------------------------------------------------------------------------
   24. Small-screen product cards
   Two thumbnails sit side by side from 320px up, so every element inside the
   card has to scale with it — at 375px a column is only ~165px wide. Applied
   to the grid and to both carousels, since they share the card markup.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .deal-card {
    border-radius: 10px;
    padding: 10px 10px 60px 10px;
  }
  .button_block {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  /* Delivery pill and rating stop fighting for one line. */
  .sc-deal-meta {
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-bottom: 8px;
  }

  .deal_delivery li span {
            font-size: 10px;
        padding: 4px 5px;
        gap: 3px;
        line-height: 1 !important;
        align-items: center;
  }

  .deal_delivery li span svg {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
  }

  .sc-rating {
    font-size: 9px;
  }

  .sc-rating .bi {
    font-size: 9px;
  }

  span.corner-ribbon {
    font-size: 9px;
    padding: 3px 8px;
    letter-spacing: 0.3px;
    line-height: 1.2;
  }

  /* Mobile touch target enlarged from ~23×23 → 40×40 to meet the ~44px
     Apple guideline. The old size caused WA-reported taps to land on the
     card link underneath the heart and navigate to PDP instead of toggling
     wishlist. Padding + svg size both grow so the icon still reads as a
     heart, not a pinhead, on a 2532×1170 iPhone 13 screen. z-index: 20
     keeps the button on top of the card's inner <a> wrapper. */
  button.wishlist_btn.btn,
  a.wishlist_btn.btn {
    padding: 9px;
    top: 8px;
    right: 8px;
    height: 40px;
    width: 40px;
    z-index: 20;
    display: inline-flex;
  }

  button.wishlist_btn.btn svg,
  a.wishlist_btn.btn svg {
    width: 18px;
    height: 18px;
  }

  /* Title clamps to two lines so cards in a row stay the same height. */
  .deal-card h6 {
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .deal-card .new_price {
    font-size: 13px;
  }

  .deal-card .price-old {
    font-size: 10px;
  }

  span.discount-badge {
    font-size: 9px;
    padding: 3px 5px;
    gap: 3px;
  }
  .deal-card .form-check{padding-left: 15px;}
  .deal-card .form-check label {
    font-size: 12px;
  }
  .form-check .form-check-input[type="checkbox"]{height: 12px;
    width: 12px;}

  .deal-card .button_block .btn, .deal-card .button_block .btn-outline-secondary.btn-blue_second {
    font-size: 11px;
    padding: 8px 6px;
  }
  .comparison-item h6{font-size: 14px;}
  body, p {font-size: 12px;}
  .comparison-header .btn-blue_second {
    padding: 6.5px 10px !important;
    font-size: 12px;
}
}

/* Tightest phones — 320-400px. Two columns still fit, with less air. */
@media (max-width: 400px) {
  .deal-card h6 {
    font-size: 13px;
  }

  .deal-card .new_price {
    font-size: 12px;
  }

  .deal-card .button_block .btn, .deal-card .button_block .btn-outline-secondary.btn-blue_second {
    font-size: 10px;
    padding: 7px 4px;
    height: 34px;
  }

  .deal_delivery li span {
    font-size: 7.5px;
    padding: 3px 4px;
  }

  .sc-rating,
  .sc-rating .bi {
    font-size: 8.5px;
  }
}

/* --------------------------------------------------------------------------
   25. Remaining small-screen section fixes
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Bottom bar stacks into one column — align all three blocks the same way
     instead of leaving the payment logos centred against left-aligned text. */
  .sc-paycards {
    justify-content: flex-start;
    margin: 20px 0;
  }
}

@media (max-width: 767.98px) {
  /* Decorative corner artwork is anchored 30px from the right edge and would
     sit under the copy once the panel narrows. */
  .faq_new_sec {
    background-image: none;
    padding: 32px 0;
  }

  /* Copyright and "Powered by" stack instead of splitting to the edges. */
  .sc-copyright {
    justify-content: flex-start;
    row-gap: 8px;
  }

  /* The glow is 340px wide — wider than a 320px viewport. */
  .sc-hero-glow {
    display: none;
  }
}

/* ==========================================================================
   ===== HOME PAGE =====
   Home-page only. Header, nav, product card, footer and the responsive ladder
   above are shared with category.html and untouched.
   New tokens live in :root (--sc-tint-*, --sc-brand-ground, --sc-summer-*).
   ========================================================================== */

/* "View all" link beside a section heading. */
.sc-viewall {
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-teal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.sc-viewall:hover,
.sc-viewall:focus-visible {
  color: var(--sc-teal-dark);
}

/* Hero split — 40 / 60. Bootstrap's 12-column grid cannot express this
   exactly (it would be 4.8 / 7.2), so the two columns take explicit widths
   from lg up and stack full width below. */
@media (min-width: 992px) {
  .sc-hero-col-a {
    flex: 0 0 auto;
    width: 45%;
  }

  .sc-hero-col-b {
    flex: 0 0 auto;
    width: 55%;
  }
}

/* ---- Hero split ----------------------------------------------------------- */
.sc-hero-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: var(--sc-radius);
  overflow: hidden;
  color: #fff;
}

/* .sc-hero-main {
  background: url(../images/ban2_le.png) no-repeat center center;
}

.sc-hero-alt {
  background: url(../images/ban1_ri.png) no-repeat center center;
} */

.sc-hero-panel-copy {
  position: relative;
  z-index: 4;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 40px;
  max-width: 50%;
}

.sc-hero-panel-img {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  max-width: 46%;
  height: auto;
  align-self: flex-end;
}

.sc-hero-eyebrow-gold {
  background: var(--sc-gold);
  display: block;
  padding: 5px 16px;
  border-radius: 25px;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.8px;
  width: fit-content;
  margin: 0 0 14px 0;
}

.sc-hero-alt-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
}

.sc-hero-trust {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sc-hero-stars {
  color: var(--sc-gold);
  font-size: 11px;
  letter-spacing: 1px;
}

/* Right hero panel: artwork fills the card and the copy overlays it, rather
   than sitting beside it as in the left panel. */
.sc-hero-alt {
  padding: 0;
}

.sc-hero_img2 {
  height: 100%;
  object-fit: cover;
  display: block;
}

.sc-hero-alt .sc-hero-panel-copy {
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 40px 0 40px 40px;
  z-index: 2;
}

/* This is the wider of the two panels now, so the title carries more weight. */
.sc-hero-alt-title {
  color: #fff;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.72px;
  font-size: 42px;
  margin: 0;
}

/* Hero CTAs render as SHOP NOW, matching the left panel eyebrow treatment. */
.sc-hero-panel .sc-btn-teal {
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  padding: 10px 32px;
  align-self: flex-start;
  border-radius: 30px;
  display: block;
}

/* ---- Delivery strip ------------------------------------------------------- */
.fast_delivery_section .sc-delivery {
  border-radius: 24px;
  border-left: 8px solid var(--sc-teal);
  background: var(--sc-delivery-bg);
}
.fast_delivery_section .sc-delivery .fast_text_container {
  padding: 2rem 3rem;
}
.sc-delivery-lead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
}

.sc-delivery-icon {
  font-size: 26px;
  color: var(--sc-teal);
  line-height: 1;
}

.sc-delivery-title {
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.3;
  color: #1b1c1c;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.72px;
}
.sc-delivery-title span {
  color: #009dab;
}
.sc-delivery-sub {
  color: rgba(61, 73, 75, 0.8);
  margin: 0;
  font-weight: 500;
  line-height: 1.3;
}

/* Three steps joined by a connector line running behind the dots. */
.sc-delivery-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  position: relative;
}

/* Van illustration sits in its own column and centres against the copy. */
.fast_delivery_section .sc-delivery .row {
  align-items: end;
}

.sc-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  position: relative;
  z-index: 1;
  gap: 15px;
  align-items: center;
}
.sc-step-dot {
  display: block;
  border-radius: 50%;
  background-color: var(--sc-teal);
  display: flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
}

.sc-step-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.sc-step-sub {
  display: block;
  font-size: 11.5px;
  color: var(--sc-muted);
  line-height: 1.4;
}

/* ---- Today's picks mosaic -------------------------------------------------- */
/* Mosaic split — 6.5 / 3.5. Bootstrap cannot express this on a 12-column
   grid (it would be 7.8 / 4.2), so the columns take explicit widths from md
   up and stack full width below. */
@media (min-width: 768px) {
  .sc-picks-col-a {
    flex: 0 0 auto;
    width: 65%;
  }

  .sc-picks-col-b {
    flex: 0 0 auto;
    width: 35%;
  }
}

.sc-pick {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--sc-radius);
  overflow: hidden;
  padding: 0;
  text-decoration: none;
  color: var(--sc-body);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.sc-pick-lg {
  height: auto;
  aspect-ratio: 1008 / 343;
}

/* Right column: two tiles splitting the row height evenly against the big
   tile beside them. */
.sc-picks-stack {
  --bs-gutter-y: 0;
  height: 100%;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
}

.sc-picks-stack > .col-12 {
  flex: 1 1 0;
  min-height: 0;
  margin-top: 0;
}

.sc-pick img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* Tile tints — from the new :root tokens. */
.sc-tint-pink {
  background-color: var(--sc-tint-pink);
}

.sc-tint-blue {
  background-color: var(--sc-tint-blue);
}

.sc-tint-mint {
  background-color: var(--sc-tint-mint);
}

.sc-tint-peach {
  background-color: var(--sc-tint-peach);
}

.sc-tint-lilac {
  background-color: var(--sc-tint-lilac);
}

/* ---- Shop by category ------------------------------------------------------ */
.sc-shopcat-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.sc-shopcat {
  display: block;
  border-radius: var(--sc-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--sc-body);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.sc-shopcat img {
  width: 100%;
  height: auto;
  display: block;
}

.sc-shopcat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid #fff;
}

.sc-shopcat-label {
  font-size: 14px;
  font-weight: 600;
}

.sc-shopcat-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex: 0 0 auto;
}

/* ---- Brand spotlight ------------------------------------------------------- */
/* Hide the "View all brands" CTA in the Brand Spotlight header. Scoped to the
   section (via aria-labelledby) so other .btn-primary buttons are unaffected. */
section[aria-labelledby="scBrandHeadingV2"] > .container-fluid > .d-flex > .btn.btn-primary {
  display: none;
}

.sc-brand-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

/* Scoped under .sc-brand-grid to beat the category_v2.css `.sc-brand-tile`
   rule, which also loads on this page (see core_v2.xml) and would
   otherwise apply its card-style border + padding + white background.
   Home Brand Spotlight tiles are edge-to-edge cover images, so we
   explicitly zero out those properties. */
.sc-brand-grid .sc-brand-tile {
  position: relative;
  display: block;
  border: 0;
  border-radius: var(--sc-radius);
  padding: 0;
  overflow: hidden;
  aspect-ratio: 29 / 32;
  background: transparent;
}

.sc-brand-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.sc-brand-tile:hover img,
.sc-brand-tile:focus-visible img {
  transform: scale(1.06);
}

.sc-brand-name {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(
    180deg,
    rgba(16, 26, 38, 0) 0%,
    rgba(16, 26, 38, 0.85) 100%
  );
}

/* ---- App promo band -------------------------------------------------------- */
/* Trending now sits on a tinted full-bleed band so it separates from the
   white Top-deals rail above it. */
.sc-trending-band {
  background-color: #fff6e5;
  border-radius: 12px;
  display: flex;
  padding: 15px;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  align-self: stretch;
}

/* ---- App promo band -------------------------------------------------------
   Built from the supplied design: teal ground with a large italic Silacart
   watermark bottom-left, gold outlined eyebrow pill, gold-marked heading,
   6 stacked-icon chips, white store cards, and a left-aligned assurance row.
   -------------------------------------------------------------------------- */
.sc-app-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #009dab 0%, #006671 100%);
  color: #fff;
  padding-block: 56px;
}

/* Oversized script watermark bleeding off the bottom-left corner. */
.sc-app-watermark {
  position: absolute;
  left: 0%;
  bottom: 0%;
  right: 0;
  user-select: none;
}

.sc-app-inner {
  position: relative;
  z-index: 1;
}

/* Eyebrow is an outlined gold pill, not plain text. */
/* Outlined gold pill. Sized from the design: ~234x31px for the 20-character
   label, so 13px bold with generous side padding and a hairline border. */
.sc-app-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  background-color: transparent;
  border: 1px solid #facc15;
  border-radius: 999px;
  padding: 8px 22px;
  margin-bottom: 26px;
}

.sc-app-title {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  color: #fff;
}

/* "SILACART" picks up the gold. */
.sc-app-title-mark {
  color: var(--sc-gold);
}

.sc-app-text {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  max-width: 62ch;
  margin-bottom: 26px;
}

.sc-app-text strong {
  font-weight: 700;
  color: #fff;
}

.sc-app-features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Icon sits above the label, not beside it. */
.sc-app-chip {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: rgba(2, 84, 96, 0.3);
  padding: 16px;
  align-items: flex-start;
  gap: 12px;
}

.sc-app-chip svg {
  height: 20px;
  max-width: 20px;
}

.sc-app-chip-title {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.sc-app-chip-sub {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
}

.sc-app-getit {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
}

/* White store cards carrying the platform mark plus two lines of label. */
.sc-app-store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: #fff;
  border-radius: var(--sc-radius);
  padding: 12px 22px;
  text-decoration: none;
  color: #000;
  transition: transform 0.15s ease;
}

.sc-qr-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  border-radius: var(--sc-radius);
  padding: 10px 20px 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #009dab;
}

.sc-qr-card .qr_app {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.sc-qr-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.sc-qr-sub {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.82);
}

/* Assurance row: hairline above, left aligned under the store cards. */
.sc-app-assure {
  list-style: none;
  margin: 34px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  font-size: 15px;
  font-weight: 500;
}

.sc-app-assure li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.sc-app-assure .bi {
  color: var(--sc-gold);
  font-size: 17px;
}

/* Two phones: the back one sits left and lower, the front one right and
   taller, overlapping it. */
.sc-app-phones {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 2rem;
}

.sc-app-phone {
  border-radius: 26px;
  border: 6px solid #1b1c1c;
  box-shadow: 0 18px 40px rgba(0, 40, 45, 0.34);
  height: auto;
  background-color: #fff;
}

.sc-app-phone-back {
  max-width: 44%;
  transform: translate(18%, -4%);
}

.sc-app-phone-front {
  max-width: 50%;
  position: relative;
  z-index: 2;
  transform: translate(-10%, -14%);
}

/* ---- Promo banner cards ----------------------------------------------------
   Aspect ratios are locked so admin-uploaded banners always render at a
   predictable size regardless of the source image dimensions.

   The ratios are chosen so all three cards in the must-haves / top-offers
   row end up the SAME height at their column widths: wide 2:1 at
   col-md-6 (50% width) and small 1:1 at col-md-3 (25% width) both give
   height = 25% of container width. This matches the reference design
   where all three tiles align top and bottom cleanly.
   -------------------------------------------------------------------------- */
.sc-promo-card {
  position: relative;
  display: block;
  /*aspect-ratio: 1 / 1;*/
  border-radius: var(--sc-radius);
  overflow: hidden;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/*.sc-promo-card-wide {*/
/*  aspect-ratio: 2 / 1;*/
/*}*/

.sc-promo-card img {
  width: 100%;
  height: 100%;
  /* `contain` (not `cover`) so admin-uploaded banners render in full,
     even when the source aspect ratio doesn't match the card's 1:1 /
     2:1 slot. Client reported the bottom of the beauty banners was
     being clipped — `cover` was cropping to fill. */
  object-fit: contain;
  display: block;
}

/* Top offers band — tighter than the generic sc-section so the heading
   sits close to the banner row and the section doesn't leave a large
   whitespace gap before "Why shop with Silacart". Matches the Figma
   spacing (design mockup #3). */
.sc-offers-band {
  padding-bottom: 18px;
}
.sc-offers-band .sc-section-title {
  margin-bottom: 10px;
}
/* Admin-uploaded top-offer banners are wide (~2:1 / 3:1). Force a
   square card + `object-fit: contain` (inherited from .sc-promo-card)
   was letterboxing them with a big empty band above/below. Release
   the aspect ratio here so each card is exactly as tall as its image
   at column width — three same-ratio uploads still align in a row. */
.sc-offers-band .sc-promo-card {
  aspect-ratio: auto;
}
.sc-offers-band .sc-promo-card img {
  height: auto;
}

/* Same treatment for the Beauty / stationery must-haves band: the row is
   flex-stretch (Bootstrap default), so if the wide left card's image is
   taller than the small right cards, the small cards stretch and their
   images get letterboxed by object-fit:contain. Letting the images use
   their natural height stops the extra whitespace above/below on desktop.
   Mobile already sets img height:auto in the @media (max-width: 767.98px)
   block, so this override is scoped to desktop-only behavior. */
[aria-labelledby="scMustHaveHeading"] .sc-promo-card img {
  height: auto;
}

/* ---- Find Your Favorite Products ------------------------------------------
   Blush panel holding the heading and the rail, with the nav arrows pinned to
   the panel edges and centred on the cards.
   -------------------------------------------------------------------------- */
.sc-fav-band {
  background-color: var(--sc-fav-bg);
  border-radius: 12px;
  display: flex;
  padding: 15px;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  align-self: stretch;
}

/* Arrows ride the panel edge, vertically centred on the card row. */
.sc-fav-band .sc-favorites-carousel .owl-nav button.owl-prev {
  left: -14px;
  top: 50%;
}

.sc-fav-band .sc-favorites-carousel .owl-nav button.owl-next {
  right: -14px;
  top: 50%;
}

/* Cards keep a white ground against the blush panel. */
.sc-fav-band .deal-card {
  background-color: #fff;
}

/* ---- Areas we cover -------------------------------------------------------- */

/* ---- Areas we cover --------------------------------------------------------
   From the design: cyan panel with a teal left accent, then six equal cards,
   each with its own pastel theme, a white circular landmark badge and a
   matching check mark.
   -------------------------------------------------------------------------- */
.sc-areas {
  background-color: var(--sc-delivery-bg);
  border-left: 8px solid var(--sc-teal);
  border-radius: 24px;
  padding: 30px 34px 34px;
}

.sc-areas-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}

.sc-areas-sub {
  font-size: 15px;
  color: var(--sc-muted);
  margin-bottom: 24px;
}

/* Six equal cards across; becomes an Owl carousel below lg (see main.js). */
.sc-areas-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px;
}

.sc-area-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--sc-body);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* White disc holding the landmark mark. */
.sc-area-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(0, 102, 113, 0.05);
}

.sc-area-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}

.sc-area-check {
  font-size: 18px;
  flex: 0 0 auto;
}

/* Per-card themes. */
.sc-area-1 {
  background-color: var(--sc-area-1-bg);
}
.sc-area-1 .sc-area-icon,
.sc-area-1 .sc-area-check {
  color: var(--sc-area-1-ink);
}

.sc-area-2 {
  background-color: var(--sc-area-2-bg);
}
.sc-area-2 .sc-area-icon,
.sc-area-2 .sc-area-check {
  color: var(--sc-area-2-ink);
}

.sc-area-3 {
  background-color: var(--sc-area-3-bg);
}
.sc-area-3 .sc-area-icon,
.sc-area-3 .sc-area-check {
  color: var(--sc-area-3-ink);
}

.sc-area-4 {
  background-color: var(--sc-area-4-bg);
}
.sc-area-4 .sc-area-icon,
.sc-area-4 .sc-area-check {
  color: var(--sc-area-4-ink);
}

.sc-area-5 {
  background-color: var(--sc-area-5-bg);
}
.sc-area-5 .sc-area-icon,
.sc-area-5 .sc-area-check {
  color: var(--sc-area-5-ink);
}

.sc-area-6 {
  background-color: var(--sc-area-6-bg);
}
.sc-area-6 .sc-area-icon,
.sc-area-6 .sc-area-check {
  color: var(--sc-area-6-ink);
}

/* ---- Why shop with Silacart ------------------------------------------------ */

/* ---- Why shop with Silacart ------------------------------------------------
   A contained rounded teal panel. Each item is an outlined circular icon beside
   its copy, with the reassurance line as a translucent pill.
   -------------------------------------------------------------------------- */
.sc-why {
  color: #fff;
  padding: 44px 52px 52px;
  border-radius: 32px;
  border: 1px solid rgba(188, 201, 203, 0.2);
  background: #009dab;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.sc-why-heading {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 10px;
}

.sc-why-sub {
  color: #fff;
  margin-bottom: 40px;
}

/* Wide column gutter, per the design — the two halves sit well apart rather
   than at Bootstrap's default g-4 spacing. Set through Bootstrap's own gutter
   variables so the row keeps its negative-margin maths intact. */
.sc-why-grid {
  --bs-gutter-x: 6rem;
  --bs-gutter-y: 3rem;
}

/* Icon sits beside the copy, not above it. */
.sc-why-item {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

/* Outlined disc, not a filled one. */
.sc-why-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background-color: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex: 0 0 auto;
}

.sc-why-body {
  flex: 1 1 auto;
  min-width: 0;
}

.sc-why-title {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 8px;
}

/* Reassurance line is a translucent pill. */
.sc-why-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  color: #fff;
  padding: 7px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  line-height: 1;
}

.sc-why-check .bi {
  font-size: 14px;
}

/* ---- Summer sale ----------------------------------------------------------- */

/* ---- Summer sale -----------------------------------------------------------
   summer_bg.png carries the whole scene, so it is a decorative background and
   every word on top is live text. Aspect ratio locked to the artwork so the
   copy always lands on the empty sand at the left.
   -------------------------------------------------------------------------- */
.sc-summer {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: var(--sc-radius);
  overflow: hidden;

  aspect-ratio: 1920 / 497;
}

.sc-summer-copy {
  position: relative;
  z-index: 1;
  max-width: 46%;
  padding-inline: 3.2%;
}

/* Filled orange pill. */
.sc-summer-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--sc-summer-badge);
  border-radius: 999px;
  padding: 7px 18px;
  margin-bottom: 18px;
}
.sc-summer-image {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--sc-radius);
  z-index: 0;
}
.sc-summer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--sc-radius);
}
.sc-summer-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--sc-summer-ink);
  margin-bottom: 12px;
}

.sc-summer-sub {
  font-size: 17px;
  line-height: 1.5;
  color: var(--sc-body);
  margin-bottom: 22px;
}

/* Teal pill CTA with a trailing arrow. */
.sc-summer-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--sc-teal);
  border-radius: 999px;
  padding: 11px 24px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.sc-summer-cta:hover,
.sc-summer-cta:focus-visible {
  background-color: var(--sc-teal-dark);
  color: #fff;
}

/* ---- Home page carousel arrows --------------------------------------------- */
.sc-topdeals-carousel .owl-nav button.owl-prev,
.sc-topdeals-carousel .owl-nav button.owl-next,
.sc-trending-carousel .owl-nav button.owl-prev,
.sc-trending-carousel .owl-nav button.owl-next,
.sc-favorites-carousel .owl-nav button.owl-prev,
.sc-favorites-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #fff !important;
  border: 1px solid var(--sc-line);
  color: var(--sc-body);
  box-shadow: var(--sc-shadow-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.sc-topdeals-carousel .owl-nav button.owl-prev,
.sc-trending-carousel .owl-nav button.owl-prev,
.sc-favorites-carousel .owl-nav button.owl-prev {
  left: -14px;
}
.sc-topdeals-carousel .owl-nav button.owl-next,
.sc-trending-carousel .owl-nav button.owl-next,
.sc-favorites-carousel .owl-nav button.owl-next {
  right: -14px;
}
.sc-topdeals-carousel .owl-nav button.owl-prev:hover,
.sc-topdeals-carousel .owl-nav button.owl-next:hover,
.sc-trending-carousel .owl-nav button.owl-prev:hover,
.sc-trending-carousel .owl-nav button.owl-next:hover,
.sc-favorites-carousel .owl-nav button.owl-prev:hover,
.sc-favorites-carousel .owl-nav button.owl-next:hover {
  background-color: var(--sc-teal);
  border-color: var(--sc-teal);
  color: #fff;
}

.bg-box_deal {
  border-radius: 12px;
  background: #e4fdff;
  display: flex;
  padding: 15px;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  align-self: stretch;
}
.sc-deal-meta {
  flex-wrap: wrap;
}
/* Card image slot: reserve a square box with a neutral background so the
   card doesn't look broken while the product image is still fetching.
   Once the <img> paints, it covers the placeholder. */
.deal_div {
  height: auto;
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: #f5f5f5;
  overflow: hidden;
}
.deal_div img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* ---- Home page responsive --------------------------------------------------- */
@media (max-width: 1199.98px) {
  .sc-summer-title {
    font-size: 32px;
  }
  .sc-summer-sub {
    font-size: 15px;
  }

  .sc-areas-row {
    gap: 16px;
  }
  .sc-area-name {
    font-size: 15px;
  }
  .sc-area-pill {
    padding: 14px;
    gap: 10px;
  }

  .sc-app-title {
    font-size: 38px;
  }

  .sc-brand-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .sc-summer-title {
    font-size: 26px;
  }
  .sc-summer-copy {
    max-width: 52%;
  }

  .sc-why-grid {
    --bs-gutter-x: 3rem;
    --bs-gutter-y: 2.5rem;
  }
  .sc-why {
    padding: 34px 30px 38px;
  }
  .sc-why-icon {
    width: 62px;
    height: 62px;
    font-size: 24px;
  }
  .sc-why-item {
    gap: 20px;
  }

  /* Chips drop to two columns; phones move below the copy and sit flat. */
  .sc-app-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sc-app-title {
    font-size: 32px;
  }
  .sc-app-phones {
    min-height: auto;
    margin-top: 26px;
  }
  .sc-app-phone-back,
  .sc-app-phone-front {
    transform: none;
  }
  .sc-app-phone-back {
    max-width: 38%;
  }
  .sc-app-phone-front {
    max-width: 44%;
    margin-left: -6%;
  }

  .sc-shopcat-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fast_delivery_section .sc-delivery .fast_text_container {
    padding: 1rem;
  }
}

@media (max-width: 767.98px) {
  .sc-summer {
    aspect-ratio: auto;
    min-height: 300px;
    background-position: 78% center;
    padding-block: 26px;
  }
  .sc-summer-copy {
    max-width: 74%;
    padding-inline: 22px;
  }
  .sc-summer-title {
    font-size: 21px;
  }
  .sc-summer-sub {
    font-size: 13px;
    margin-bottom: 16px;
  }
  .sc-summer-eyebrow {
    font-size: 11px;
    padding: 6px 14px;
    margin-bottom: 12px;
  }

  .sc-why-grid {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 2rem;
  }
  .sc-why {
    padding: 26px 20px 30px;
    border-radius: 20px;
  }
  .sc-why-sub {
    font-size: 14px;
    margin-bottom: 26px;
  }
  .sc-why-title {
    font-size: 18px;
  }
  .sc-why-text {
    font-size: 14px;
  }
  .sc-why-icon {
    width: 54px;
    height: 54px;
    font-size: 21px;
  }

  .sc-fav-band .sc-section-title {
    font-size: 19px;
    margin-bottom: 14px;
  }
  .sc-fav-band .sc-favorites-carousel .owl-nav button.owl-prev {
    left: -10px;
  }
  .sc-fav-band .sc-favorites-carousel .owl-nav button.owl-next {
    right: -10px;
  }

  .sc-areas {
    padding: 24px 20px 26px;
  }
  .sc-areas-title {
    font-size: 21px;
  }
  .sc-areas-sub {
    font-size: 13px;
  }

  .sc-app-title {
    font-size: 26px;
  }
  .sc-app-text {
    font-size: 14px;
  }
  .sc-app-chip-title {
    font-size: 15px;
  }
  .sc-app-assure {
    gap: 18px;
    font-size: 13px;
    margin-top: 26px;
    padding-top: 20px;
  }
  .sc-app-store-big {
    font-size: 16px;
  }
  .sc-app-store {
    padding: 10px 18px;
    max-width: 130px;
  }
  .sc-app-store img {
    max-width: 100%;
  }
  .sc-hero-panel {
    min-height: 230px;
  }
  .sc-hero-panel-copy {
    max-width: 70%;min-height: 180px;
    position: relative !important;
    padding: 30px;
  }
  .sc-hero_img1 {
    object-position: right center;
    object-fit: cover;
    position: absolute;
  }
  .sc-hero-panel-img {
    max-width: 70%;
    align-self: center;
  }
  .sc-hero-alt .sc-hero-panel-copy {
    position: static !important;
        max-width: 67%;
    padding: 22px;
  }
  .sc-hero-trust{margin-top: 10px}
  .sc-hero-eyebrow-gold{letter-spacing: 1px;    padding: 5px 14px;}
  .sc-hero-alt-title {
    font-size: 20px;
  }
  .sc-hero_img2 {
    height: 100%;
    object-position: right center;
    position: absolute;
  }
  .sc-brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  /* Timeline stacks — the connector line only reads horizontally. */
  .sc-delivery-steps {
    flex-direction: column;
    gap: 16px;
  }
  .sc-delivery-steps::before {
    display: none;
  }
  .sc-step {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .sc-step-dot {
    margin: 0;
  }
  /* Stacked single column — tiles size to their artwork. */
  .sc-picks-stack {
    height: auto;
    display: block;
  }
  .sc-picks-stack .col-12:first-child {
    margin-bottom: 16px;
  }
  /* One column — each tile shows its full artwork rather than cropping. */
  .sc-pick-lg {
    aspect-ratio: auto;
  }
  .sc-pick img {
    height: auto;
  }
  .sc-pick {
    height: auto;
  }
}

@media (max-width: 575.98px) {
  .sc-app-features {
    grid-template-columns: minmax(0, 1fr);
  }
  .sc-app-watermark {
    font-size: 34vw;
  }
  .sc-app-getit {
    gap: 10px;
  }
  .sc-hero-panel {
    min-height: 300px;
  }
  .sc-hero-panel-copy {
    padding: 20px;
  }
  .sc-hero_img1 {
    object-position: right center;
    object-fit: cover;
    position: absolute;
  }
  .fast_delivery_section .sc-delivery .fast_text_container {
    padding: 1rem 0;
  }
}

/* ==========================================================================
   ===== HOME PAGE — RESPONSIVE COMPLETION =====
   Fills the gaps found auditing every home section across
   1920 / 1600 / 1440 / 1200 / 992 / 768 / 576 / 400 / 375 / 320.
   Appended last so it settles anything the per-section blocks left open.
   ========================================================================== */

/* ---- below 1200: six area cards no longer fit in one row ------------------ */
@media (max-width: 1199.98px) {
  .sc-areas-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

/* ---- up to 1199 ----------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .sc-why-heading {
    font-size: 28px;
  }
  .sc-summer-copy {
    max-width: 50%;
  }

  .sc-collection-title {
    font-size: 26px;
  }
}

/* ---- up to 991: the summer banner can no longer hold its fixed ratio ------
   At 768-991 the locked 1920/497 gives roughly 194px of height while the copy
   needs about 215px, so it would clip. Switch to a min-height and slide the
   artwork right to keep the sand behind the text. */
@media (max-width: 991.98px) {
  .sc-summer {
    aspect-ratio: auto;
    min-height: 270px;
    background-position: 76% center;
    padding-block: 24px;
  }
  .sc-summer-copy {
    max-width: 58%;
  }
  .sc-brand-name {
    font-size: 12px;
    padding: 8px;
  }
  .sc-delivery {
    padding: 20px 22px;
  }
  .sc-viewall {
    font-size: 12px;
  }

  .sc-collection-caption {
    max-width: 70%;
    padding: 26px 24px;
  }
}

/* ---- up to 767 ------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .sc-areas-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  /* Stacked full width — let each banner keep its own proportions. */
  .sc-promo-card {
    min-height: 0;
    height: auto;
  }
  .sc-promo-card-wide {
    aspect-ratio: auto;
  }
  .sc-promo-card img {
    height: auto;
  }
  .sc-promo-card-title {
    font-size: 14px;
  }
  .sc-shopcat-label {
    font-size: 13px;
  }
  .sc-shopcat-foot {
    padding: 10px 12px;
  }
  .sc-delivery-title {
    font-size: 18px;
  }
  .sc-trending-band .sc-section {
    padding-block: 24px;
  }
}

/* ---- up to 575 ------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .sc-summer-copy {
    max-width: 82%;
    padding-inline: 18px;
  }
  .sc-summer-title {
    font-size: 19px;
  }
  .sc-why {
    padding: 22px 16px 26px;
  }
  .sc-why-heading {
    font-size: 19px;
  }
  .sc-why-item {
    gap: 14px;
  }
  .sc-why-icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
  .sc-why-check {
    font-size: 12px;
    padding: 6px 12px;
  }
  .sc-areas {
    padding: 20px 16px 22px;
  }
  .sc-areas-title {
    font-size: 19px;
  }
  .sc-brand-grid {
    gap: 8px;
  }
  .sc-brand-name {
    font-size: 10px;
    padding: 7px 4px;
  }
  .sc-collection-slide {
    min-height: 170px;
  }
  .sc-collection-title {
    font-size: 17px;
  }
  /* .sc-app-store {
    flex: 1 1 100%;
    justify-content: center;
  }
  .sc-qr-card {
    flex: 1 1 100%;
  } */
}

/* ---- 400 and under: smallest phones --------------------------------------- */
@media (max-width: 400px) {
  .sc-summer-title {
    font-size: 17px;
  }
  .sc-summer-sub {
    font-size: 12px;
  }
  .sc-summer-cta,
  .sc-summer-eyebrow {
    font-size: 10px;
    padding: 6px 12px;
  }
  .sc-why-title {
    font-size: 16px;
  }
  .sc-why-text {
    font-size: 13px;
  }
  .sc-app-title {
    font-size: 21px;
  }
  .sc-app-chip-title {
    font-size: 14px;
  }
  .sc-area-name {
    font-size: 12px;
  }
  .sc-area-icon {
            width: 22px;
        height: 22px;
    font-size: 15px;
  }
  .sc-area-icon img{max-width: 100%}
  .sc-section-title {
    font-size: 17px;
  }
  .sc-area-pill{gap: 5px}
}

/* ---- Overflow guard --------------------------------------------------------
   Long unbroken strings (product names, area labels) must wrap rather than
   push the page sideways on narrow screens. */
.sc-page h1,
.sc-page h2,
.sc-page h3,
.sc-page h6,
.sc-page p {
  overflow-wrap: break-word;
}

/* ==========================================================================
   Hero panels — sizing fixes (2026-08-17)
   The reference CSS relied on the two mock-up images being 480px tall with
   matching aspect ratios (829x480 left, 1010x480 right) so the panels lined
   up naturally. Real admin uploads are rarely those exact dimensions, so
   we lock the panel to an explicit height and force both images to
   object-fit:cover — panels stay uniform regardless of the upload.

   Uses `height`, not `min-height`, on purpose: percentage heights on
   descendants (the .w-100.h-100 img) only resolve against an ancestor
   with an explicit height. min-height would make the img fall back to
   its intrinsic height, which is exactly the bug we saw.

   Left the left-panel layout untouched — the template no longer wraps the
   img in an <a>, so it's back to being a direct flex child and the copy
   overlay works exactly like in the reference.
   ========================================================================== */
@media (min-width: 992px) {
  .sc-hero-panel {
    height: 340px;
  }
  .sc-hero_img1,
  .sc-hero_img2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}
@media (min-width: 1200px) {
  .sc-hero-panel {
    height: 400px;
  }
}

/* Copy overlay sits above the image (z-index) so the text stays legible.
   The outer element is the <a> now, so any click inside — image, text,
   or CTA — fires navigation; no pointer-events tricks required. */
.sc-hero-panel-copy {
  z-index: 5;
}

/* ==========================================================================
   Search autocomplete dropdown
   The desktop and mobile .sc-search forms are position:relative (via inline
   Bootstrap classes on the templates) so the results panel can hang
   absolutely below the pill without pushing surrounding UI around.
   ========================================================================== */
.sc-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 31, 45, 0.12);
  max-height: 420px;
  overflow-y: auto;
  z-index: 1050; /* above sticky header */
}
.sc-search-item {
  color: #1f2937;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}
.sc-search-item:last-child {
  border-bottom: 0;
}
.sc-search-item:hover,
.sc-search-item:focus-visible {
  background-color: #f9fafb;
  color: #009dab;
}
.sc-search-item img {
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 40px;
}
.sc-search-empty {
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Discount badge — home v2 carousels (Top Deals / Trending Now / Find
   Your Favorites). The three carousels all render through
   home_v2_deal_card, which emits `<span class="discount-badge">` inline
   inside the price row. The shared offer-badge.css pins that same class
   as a red ticket-cut overlay at the top-left of the image (kept for v1
   pages that still expect that treatment) — this override strips the
   overlay behaviour and re-styles the badge as a compact dark-teal +
   amber-gold pill sitting alongside the strikethrough price, matching
   the design mock. !important is required because offer-badge.css uses
   !important throughout.
   -------------------------------------------------------------------------- */
/*.sc-topdeals-carousel .deal-card span.discount-badge,*/
/*.sc-trending-carousel .deal-card span.discount-badge,*/
/*.sc-favorites-carousel .deal-card span.discount-badge {*/
/*  position: static !important;*/
/*  top: auto !important;*/
/*  left: auto !important;*/
/*  right: auto !important;*/
/*  bottom: auto !important;*/
/*  display: inline-flex !important;*/
/*  align-items: center !important;*/
/*  justify-content: center !important;*/
/*  gap: 3px !important;*/
/*  padding: 3px 6px !important;*/
/*  min-width: 0 !important;*/
/*  flex-shrink: 0 !important;*/
/*  background: #006671 !important;*/
/*  background-image: none !important;*/
/*  color: #e6b75b !important;*/
/*  border-radius: 4px !important;*/
/*  clip-path: none !important;*/
/*  filter: none !important;*/
/*  box-shadow: none !important;*/
/*  font-family: inherit !important;*/
/*  font-size: 10px !important;*/
/*  font-weight: 700 !important;*/
/*  font-style: normal !important;*/
/*  line-height: 1 !important;*/
/*  letter-spacing: 0.3px !important;*/
/*  text-align: center !important;*/
/*  text-transform: uppercase !important;*/
/*  pointer-events: auto !important;*/
/*  margin: 0 !important;*/
/*  white-space: nowrap !important;*/
/*}*/

/*.sc-topdeals-carousel .deal-card span.discount-badge .percent,*/
/*.sc-trending-carousel .deal-card span.discount-badge .percent,*/
/*.sc-favorites-carousel .deal-card span.discount-badge .percent {*/
/*  display: inline !important;*/
/*  color: inherit !important;*/
/*  font-size: inherit !important;*/
/*  font-weight: 600 !important;*/
/*  line-height: 1 !important;*/
/*  letter-spacing: normal !important;*/
/*  margin: 0 !important;*/
/*  padding: 0 !important;*/
/*  text-transform: none !important;*/
/*}*/

/*.sc-topdeals-carousel .deal-card span.discount-badge .off,*/
/*.sc-trending-carousel .deal-card span.discount-badge .off,*/
/*.sc-favorites-carousel .deal-card span.discount-badge .off {*/
/*  display: inline !important;*/
/*  color: inherit !important;*/
/*  font-size: inherit !important;*/
/*  font-weight: 500 !important;*/
/*  line-height: 1 !important;*/
/*  letter-spacing: normal !important;*/
/*  margin: 0 !important;*/
/*  padding: 0 !important;*/
/*  opacity: 1 !important;*/
/*  text-transform: uppercase !important;*/
/*}*/

@media (max-width: 767.98px) {
  .sc-topdeals-carousel .deal-card span.discount-badge,
  .sc-trending-carousel .deal-card span.discount-badge,
  .sc-favorites-carousel .deal-card span.discount-badge {
    font-size: 9px !important;
    padding: 3px 5px !important;
    gap: 3px !important;
  }
}


/* ---------------------------------------------------------------------------
   Cart / Checkout — per-line price change notice
   Rendered by profile_cart.xml + custom_checkout.xml when a line was
   auto-repriced by SaleOrder._sync_cart_prices because the product's
   current price/offer differed from what was in the cart. Cleared on
   the next qty change in cart_update_line.
--------------------------------------------------------------------------- */
.sr-price-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.35;
  border: 1px solid transparent;
}
.sr-price-notice.down {
  background: #E8F7EE;
  color: #0D7A3B;
  border-color: #B7E4C7;
}
.sr-price-notice.up {
  background: #FFF6E6;
  color: #8A5A00;
  border-color: #FFE1A8;
}
.sr-price-notice s {
  opacity: 0.75;
}
.sr-price-notice b {
  font-weight: 600;
}
.sr-price-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------------------
   Category listing (v2) — applied-filter chip row
   Rendered client-side by category_v2_filters.js (renderActiveFilters).
   Sits between the breadcrumb and the h2 title, one removable pill per
   active sidebar filter + a trailing "Clear all".
--------------------------------------------------------------------------- */
.sc-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px;
}
.sc-active-filters .sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border-radius: 999px;
  background: #EEF6FA;
  color: #08678F;
  border: 1px solid #CFE6EF;
  font-size: 12px;
  line-height: 1.2;
}
.sc-active-filters .sc-chip-label {
  white-space: nowrap;
}
.sc-active-filters .sc-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 103, 143, 0.12);
  color: #08678F;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.sc-active-filters .sc-chip-remove:hover,
.sc-active-filters .sc-chip-remove:focus-visible {
  background: rgba(8, 103, 143, 0.24);
  outline: none;
}
.sc-active-filters .sc-chip-clear-all {
  margin-left: 4px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: #08678F;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.sc-active-filters .sc-chip-clear-all:hover,
.sc-active-filters .sc-chip-clear-all:focus-visible {
  color: #054A67;
  outline: none;
}
.data_section_product_listing .row.common_section{display: none}
.sc-shopcat-carousel .owl-nav{display: none;}
@media screen and (min-width: 1200px) and (max-width: 1800px){
  body, .sc-search-cat, .sc-search-input, .sc-account, .sc-mainnav-link, .sc-mainnav-mega-head, p,
  .offers-page .off-hero-text, .offers-page .off-btn-gold, .offers-page .off-cat-label, .offers-page .off-select ,
  .offers-page .off-cat-viewall, .sc-accordion .accordion-button  {font-size: 12px}
  .sc-mainnav-link{padding: 9px 10px}
  .sc-search{width: 590px}
  .sc-filter-heading {    font-size: 15px;  }
  .sc-listing-title{font-size: 26px}
  .deal-card .button_block .btn-outline-secondary {height: 34px;}
  .deal-card .button_block .btn-outline-secondary.btn-blue_second{font-size: 14px}
  #scProductGridWrap .data_section_product_listing .corner-ribbon, #scProductGridWrap span.corner-ribbon{font-size: 11px}
}