/** Shopify CDN: Minification failed

Line 7378:10 Expected identifier but found whitespace
Line 7378:18 Unexpected ";"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-bar (INDEX:0) */
.announcement__branches {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 700;
    color: #febd19 !important;
    text-decoration: none;
  }

  .announcement__branches .icon {
    width: 0.9rem;
    height: 0.9rem;
  }

  .announcement__branches:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .announcement {
    display: block;
    background: var(--color-bg);
    color: var(--color-fg);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .announcement__inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 1rem;
  }

  .announcement__track {
    position: relative;
    display: grid;
    min-height: 2.375rem;
    align-items: center;
    overflow: hidden;
  }

  .announcement__utility {
    display: none;
  }

  @media screen and (min-width: 990px) {
    .announcement__inner {
      grid-template-columns: 1fr auto 1fr;
    }

    .announcement__utility {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      font-size: 0.75rem;
      font-weight: 600;
      white-space: nowrap;
    }

    .announcement__utility a {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      text-decoration: none;
      opacity: 0.85;
    }

    .announcement__utility a:hover {
      opacity: 1;
    }

    .announcement__utility .icon {
      width: 0.9375rem;
      height: 0.9375rem;
    }

    .announcement__utility--start {
      justify-self: start;
      gap: 0.375rem;
      text-decoration: none;
    }

    .announcement__utility--end {
      justify-self: end;
    }

    .announcement__utility .localization__toggle {
      min-width: 0;
      height: auto;
      padding: 0;
      font-size: 0.8125rem;
      font-weight: 700;
      color: inherit;
    }

    .announcement__utility .localization__toggle:hover {
      background: none;
      text-decoration: underline;
    }
  }

  .announcement__message {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.45s;
  }

  .announcement__message.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  .announcement__message.is-leaving {
    transform: translateY(-100%);
  }

  .announcement__message .icon {
    width: 1rem;
    height: 1rem;
  }

  .announcement__message a {
    text-decoration: underline;
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:branch-locations (INDEX:1) */
#branches {
    scroll-margin-top: 6rem;
  }

  .branches__grid {
    display: grid;
    gap: 1rem;
    margin: 0;
  }

  @media screen and (min-width: 600px) {
    .branches__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 1100px) {
    .branches__grid {
      grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
      gap: 1.25rem;
    }
  }

  .branch-card,
  .branch-card > article {
    height: 100%;
  }

  .branch-card > article {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  }

  @media (hover: hover) {
    .branch-card > article:hover {
      border-color: rgba(var(--color-fg-rgb), 0.3);
      box-shadow: 0 18px 40px -26px rgba(var(--color-fg-rgb), 0.5);
      transform: translateY(-2px);
    }
  }

  .branch-card__media {
    aspect-ratio: 16 / 10;
    border-radius: 0;
  }

  .branch-card__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    padding: 1.25rem;
  }

  .branch-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .branch-card__pin {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-text);
  }

  .branch-card__pin .icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .branch-card__area {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
  }

  .branch-card__name {
    font-size: 1.25rem;
  }

  .branch-card__details {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
  }

  .branch-card__details > div {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
  }

  .branch-card__details dt .icon {
    width: 1.125rem;
    height: 1.125rem;
    margin-block-start: 0.15rem;
    color: var(--color-muted);
  }

  .branch-card__details dd {
    margin: 0;
  }

  [dir='rtl'] .branch-card__details dd[dir='ltr'] {
    text-align: end;
  }

  .branch-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-start: auto;
  }

  .branch-card__actions .icon {
    width: 1.0625rem;
    height: 1.0625rem;
  }

  .branch-card__wa:hover {
    --btn-bg: #25d366;
    --btn-fg: #fff;
    border-color: #25d366;
  }

  /* Photo cards, interactive map */
  .branch-card > article {
    border-radius: 1.5rem;
    border-color: rgba(var(--color-fg-rgb), 0.08);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease, border-color 0.45s ease;
  }

  @media (hover: hover) {
    .branch-card > article:hover {
      transform: translateY(-8px);
      border-color: rgba(254, 189, 25, 0.7);
      box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.5);
    }
  }

  .branch-card__media {
    position: relative;
    aspect-ratio: 4 / 3.4;
    overflow: hidden;
  }

  .branch-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
  }

  .branch-card__media img {
    transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .branch-card > article:hover .branch-card__media img {
    transform: scale(1.08);
  }

  .branch-card__index {
    position: absolute;
    z-index: 1;
    inset-block-end: 0.75rem;
    inset-inline-start: 1rem;
    font-family: var(--font-heading-family);
    font-weight: 800;
    font-size: 2.75rem;
    line-height: 1;
    color: #febd19;
  }

  .branch-card__tag {
    position: absolute;
    z-index: 1;
    inset-block-start: 0.875rem;
    inset-inline-end: 0.875rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: #fff;
    color: #0a0a0a;
    font-size: 0.75rem;
    font-weight: 700;
  }

  .branch-card__media--placeholder {
    display: grid;
    place-items: center;
    background: #febd19 repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255, 255, 255, 0.18) 22px 44px);
  }

  .branch-card__media--placeholder::after {
    background: none;
  }

  .branch-card__placeholder-name {
    font-family: var(--font-heading-family);
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: #0a0a0a;
    text-align: center;
    padding-inline: 1rem;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .branch-card > article:hover .branch-card__placeholder-name {
    transform: scale(1.08) rotate(-2deg);
  }

  .branch-card__media--placeholder .branch-card__index {
    color: #0a0a0a;
  }

  .branch-card__pin {
    background: #0a0a0a;
    color: #febd19;
  }

  .branches__map {
    display: grid;
    gap: 1rem;
    margin-block-start: 2.5rem;
  }

  .branches__map-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .branches__map-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.125rem;
    border-radius: 999px;
    border: 1.5px solid rgba(var(--color-fg-rgb), 0.15);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  }

  .branches__map-tab .icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .branches__map-tab:hover {
    transform: translateY(-2px);
    border-color: #febd19;
  }

  .branches__map-tab[aria-pressed='true'] {
    background: #febd19;
    border-color: #febd19;
    color: #0a0a0a;
  }

  .branches__map-frame {
    position: relative;
    width: 100%;
    height: clamp(20rem, 40vw, 30rem);
    border-radius: 1.5rem;
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 0 0 4px #febd19;
  }

  .branches__map-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    transition: opacity 0.3s ease;
  }

  .branches__map-frame iframe.is-loading {
    opacity: 0.4;
  }
/* END_SECTION:branch-locations */

/* START_SECTION:brand-logos (INDEX:2) */
.brand-logos__list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 34%;
    gap: 0.5rem;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  @media screen and (min-width: 750px) {
    .brand-logos__list {
      grid-auto-flow: row;
      grid-template-rows: none;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      overflow: visible;
      gap: 1rem;
    }
  }

  .brand-logos__item {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    color: var(--color-fg);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    text-decoration: none;
    transition: transform 0.25s ease, background-color 0.25s ease;
  }

  .brand-logos__item:hover {
    transform: translateY(-3px);
  }

  .brand-logos__list li {
    display: contents;
  }

  .brand-logos__item img {
    width: 100%;
    max-width: 9rem;
    height: 100%;
    max-height: 3rem;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .brand-logos__name {
    font-family: var(--font-heading-family);
    font-weight: 800;
    font-stretch: var(--heading-stretch);
    text-transform: uppercase;
    font-size: clamp(0.9375rem, 1.6vw, 1.25rem);
    letter-spacing: -0.02em;
    text-align: center;
    line-height: 1.1;
  }

  /* Text-only tiles invert on hover; logo tiles just lift, so dark logos stay visible. */
  .brand-logos__item--text:hover {
    background: var(--color-fg);
    color: var(--color-bg);
  }

  .brand-logos--marquee {
    overflow: hidden;
  }

  .brand-logos__viewport {
    margin-inline: calc(var(--page-gutter, 1rem) * -1);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }

  .brand-logos__track {
    display: flex;
    width: max-content;
    animation: brand-logos-scroll 45s linear infinite;
  }

  [dir='rtl'] .brand-logos__track {
    animation-name: brand-logos-scroll-rtl;
  }

  .brand-logos__viewport:hover .brand-logos__track {
    animation-play-state: paused;
  }

  .brand-logos--marquee .brand-logos__list {
    display: flex;
    gap: 1rem;
    padding-inline-end: 1rem;
    padding-block: 0.5rem;
    overflow: visible;
  }

  .brand-logos--marquee .brand-logos__item {
    width: 11rem;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  }

  .brand-logos--marquee .brand-logos__item:hover {
    filter: none;
    opacity: 1;
    transform: translateY(-4px) scale(1.04);
  }

  @keyframes brand-logos-scroll {
    to {
      transform: translateX(-50%);
    }
  }

  @keyframes brand-logos-scroll-rtl {
    to {
      transform: translateX(50%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .brand-logos__track {
      animation: none;
    }
  }
/* END_SECTION:brand-logos */

/* START_SECTION:cart-drawer (INDEX:3) */
.cart-drawer__body {
    display: grid;
    gap: 1.5rem;
    align-content: start;
  }

  .cart-drawer__line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9375rem;
  }

  .cart-drawer__line--discount {
    color: var(--color-sale);
  }

  .cart-drawer__total {
    font-weight: 800;
    font-size: 1.125rem;
  }

  .cart-drawer__note {
    font-size: 0.8125rem;
  }

  .cart-drawer__actions {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0.5rem;
  }

  .cart-drawer__empty {
    align-content: center;
  }

  .cart-drawer__empty > .icon {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--color-muted);
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:collection-list (INDEX:4) */
.collection-list__grid {
    margin: 0;
  }

  /* Trio: three equal, tall boxes (Men / Women / Kids), three in a row on every screen */
  .collection-list__grid.collection-list__grid--trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem;
  }

  .collection-list__grid--trio .collection-tile--cards .collection-tile__media {
    aspect-ratio: 4 / 5;
  }

  .collection-list__grid--trio .collection-tile--cards .collection-tile__title {
    font-size: clamp(0.9375rem, 0.8rem + 0.9vw, 1.5rem);
  }

  @media screen and (min-width: 750px) {
    .collection-list__grid.collection-list__grid--trio {
      gap: 1.25rem;
    }
  }

  /* Circles — "shop by sport" swiper: one row, 2 per view on phones, 6 on desktop */
  .collection-list__grid--circles {
    --per-view: 2;
    --circle-gap: 1rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--circle-gap)) / var(--per-view));
    gap: var(--circle-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Room for the hover ring (2px + 3px offset) so the scroller doesn't clip it */
    padding: 0.375rem;
    margin-inline: -0.375rem;
    scroll-padding-inline: 0.375rem;
  }

  @media screen and (min-width: 750px) {
    .collection-list__grid--circles {
      --per-view: 4;
      --circle-gap: 1.25rem;
    }
  }

  @media screen and (min-width: 1100px) {
    .collection-list__grid--circles {
      --per-view: 6;
    }
  }

  circle-slider {
    display: block;
  }

  .circle-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-block-start: 1rem;
    color: var(--color-muted);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
  }

  .circle-slider__nav[hidden] {
    display: none;
  }

  .circle-slider__btn {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .circle-slider__btn:hover {
    background: rgba(var(--color-fg-rgb), 0.07);
    color: var(--color-fg);
  }

  .circle-slider__btn[disabled] {
    opacity: 0.35;
    pointer-events: none;
  }

  .circle-slider__btn .icon {
    width: 1rem;
    height: 1rem;
  }

  [data-circle-prev] .icon {
    transform: scaleX(-1);
  }

  [dir='rtl'] [data-circle-prev] .icon {
    transform: none;
  }

  [dir='rtl'] [data-circle-next] .icon {
    transform: scaleX(-1);
  }

  .collection-list__grid--circles::-webkit-scrollbar {
    display: none;
  }

  .collection-tile--circles {
    scroll-snap-align: start;
    text-align: center;
  }

  .collection-tile--circles .collection-tile__media {
    aspect-ratio: 1;
    border-radius: 50%;
    outline: 2px solid transparent;
    outline-offset: 3px;
    transition: outline-color 0.2s ease;
  }

  /* Same yellow as babasaleh.com */
  .collection-tile--circles .collection-tile__link:hover .collection-tile__media,
  .collection-tile--circles .collection-tile__link:focus-visible .collection-tile__media {
    outline-color: #febd19;
  }

  .collection-tile--circles .collection-tile__title {
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
  }

  /* Bento — first tile large */
  .collection-tile--bento .collection-tile__media {
    aspect-ratio: 1;
    height: 100%;
  }

  .collection-tile--bento:first-child {
    grid-column: span 2;
  }

  .collection-tile--bento:first-child .collection-tile__media {
    aspect-ratio: 16 / 10;
  }

  @media screen and (min-width: 750px) {
    /* Fixed row height keeps the bento compact; tiles fill their cell. */
    .collection-list__grid--bento {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: clamp(10rem, 17vw, 15rem);
      gap: 1rem;
    }

    .collection-tile--bento:first-child {
      grid-column: span 2;
      grid-row: span 2;
    }

    .collection-tile--bento .collection-tile__media,
    .collection-tile--bento:first-child .collection-tile__media {
      aspect-ratio: auto;
      height: 100%;
    }
  }

  .collection-tile--circles .collection-tile__media {
    width: 100%;
    max-width: 9rem;
    margin-inline: auto;
  }
/* END_SECTION:collection-list */

/* START_SECTION:cta-banner (INDEX:5) */
.cta-banner__box {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
    border-radius: 2rem;
    background: #febd19;
    color: #0a0a0a;
  }

  .cta-banner__content {
    display: grid;
    justify-items: start;
    gap: 1.125rem;
    max-width: 44rem;
  }

  .cta-banner__eyebrow {
    color: inherit;
    opacity: 0.75;
  }

  .cta-banner__heading {
    font-size: clamp(2.25rem, 5.5vw, 4.25rem);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  [dir='rtl'] .cta-banner__heading {
    letter-spacing: 0;
    line-height: 1.25;
  }

  .cta-banner__text {
    font-size: 1.125rem;
    max-width: 34rem;
  }

  .cta-banner__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 0.5rem;
  }

  .cta-banner .cta-banner__button {
    --btn-bg: #0a0a0a;
    --btn-fg: #fff;
  }

  .cta-banner .cta-banner__button-2 {
    --btn-fg: #0a0a0a;
  }

  .cta-banner__button .icon {
    transition: transform 0.25s ease;
  }

  .cta-banner__button:hover .icon {
    transform: translateX(4px);
  }

  [dir='rtl'] .cta-banner__button:hover .icon {
    transform: scaleX(-1) translateX(4px);
  }

  .cta-banner__shape {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
  }

  .cta-banner__shape--ball {
    width: 16rem;
    height: 16rem;
    inset-block-end: -5rem;
    inset-inline-end: 6%;
    background: radial-gradient(circle at 30% 30%, #fff 0 8%, #0a0a0a 9% 100%);
    animation: cta-bounce 3.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }

  .cta-banner__shape--ring {
    width: 24rem;
    height: 24rem;
    inset-block-start: -10rem;
    inset-inline-end: -6rem;
    border: 3rem solid rgba(255, 255, 255, 0.35);
    animation: cta-spin 30s linear infinite;
  }

  .cta-banner__shape--dot {
    width: 3rem;
    height: 3rem;
    inset-block-start: 22%;
    inset-inline-end: 34%;
    background: #fff;
    animation: cta-float 6s ease-in-out infinite;
  }

  @keyframes cta-bounce {
    0%,
    100% {
      transform: translateY(0) scale(1.04, 0.96);
    }
    50% {
      transform: translateY(-3.5rem) scale(1);
    }
  }

  @keyframes cta-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes cta-float {
    50% {
      transform: translate(1.5rem, -1rem);
    }
  }

  @media screen and (max-width: 749px) {
    .cta-banner__shape--ball {
      width: 9rem;
      height: 9rem;
      inset-block-end: -3rem;
    }

    .cta-banner__shape--dot {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cta-banner__shape {
      animation: none !important;
    }
  }
/* END_SECTION:cta-banner */

/* START_SECTION:event-gallery (INDEX:6) */
.photo-gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .photo-gallery__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1rem;
    }
  }

  @media screen and (min-width: 1100px) {
    .photo-gallery__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .photo-gallery__grid {
      grid-auto-flow: dense;
    }

    .photo-gallery__item:first-child {
      grid-column: span 2;
      grid-row: span 2;
    }
  }

  .photo-gallery__link {
    position: relative;
    display: block;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 1.25rem;
    overflow: hidden;
    background: var(--color-surface);
    isolation: isolate;
  }

  .photo-gallery__link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .photo-gallery__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 0 #febd19;
    transition: box-shadow 0.3s ease;
  }

  .photo-gallery__link:hover img {
    transform: scale(1.06);
  }

  .photo-gallery__link:hover::after {
    box-shadow: inset 0 0 0 4px #febd19;
  }

  .photo-gallery__caption {
    position: absolute;
    inset-inline: 0.75rem;
    inset-block-end: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.75);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    width: fit-content;
  }

  .photo-gallery__dialog {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(10, 10, 10, 0.94);
    color: #fff;
  }

  .photo-gallery__dialog[open] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .photo-gallery__dialog::backdrop {
    background: transparent;
  }

  .photo-gallery__figure {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 4rem 0.5rem;
    height: 100vh;
    align-content: center;
  }

  .photo-gallery__figure img {
    max-width: 100%;
    max-height: calc(100vh - 9rem);
    object-fit: contain;
    border-radius: 1rem;
  }

  .photo-gallery__figure figcaption:empty {
    display: none;
  }

  .photo-gallery__close,
  .photo-gallery__nav {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .photo-gallery__close:hover,
  .photo-gallery__nav:hover {
    background: #febd19;
    color: #0a0a0a;
  }

  .photo-gallery__close {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    z-index: 1;
  }

  .photo-gallery__nav {
    margin-inline: 0.75rem;
  }

  .photo-gallery__nav--prev .icon {
    transform: rotate(90deg);
  }

  .photo-gallery__nav--next .icon {
    transform: rotate(-90deg);
  }

  [dir='rtl'] .photo-gallery__nav--prev .icon {
    transform: rotate(-90deg);
  }

  [dir='rtl'] .photo-gallery__nav--next .icon {
    transform: rotate(90deg);
  }
/* END_SECTION:event-gallery */

/* START_SECTION:faq-accordion (INDEX:7) */
faq-filter {
    display: block;
  }

  .faq__inner {
    display: grid;
    gap: 2rem;
  }

  .faq__intro {
    display: grid;
    gap: 0.875rem;
    align-content: start;
    justify-items: start;
  }

  .faq__search {
    margin-block-end: 0.5rem;
  }

  .faq__search .icon {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: 50%;
    translate: 0 -50%;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-muted);
    pointer-events: none;
  }

  .faq__search .field__input {
    padding-inline-start: 2.75rem;
    border-radius: 999px;
  }

  .faq__empty:empty {
    display: none;
  }

  .faq__empty {
    padding-block: 1rem;
  }

  .faq .faq__item {
    padding-inline: 1.25rem;
  }

  .faq .faq__item[open] {
    margin-block: 0.5rem;
    border-block-end-color: transparent;
  }

  .faq .faq__item .accordion__content {
    padding-block-end: 1.25rem;
  }

  .faq__item summary {
    border-radius: var(--radius-small);
  }

  .faq__item summary:hover .faq__question {
    color: var(--color-accent);
  }

  .faq__question {
    margin: 0;
    font-family: var(--font-body-family);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    transition: color 0.2s ease;
  }

  /* Smooth open/close where supported */
  @supports (interpolate-size: allow-keywords) {
    .faq__item {
      interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
    }

    .faq__item[open]::details-content {
      block-size: auto;
    }
  }

  @media screen and (min-width: 990px) {
    .faq__inner {
      grid-template-columns: 0.8fr 1.2fr;
      gap: 5rem;
    }

    .faq__intro {
      position: sticky;
      top: calc(var(--header-offset, 0px) + 2rem);
    }
  }

  @media print {
    .faq__item::details-content {
      block-size: auto;
      content-visibility: visible;
    }
  }
/* END_SECTION:faq-accordion */

/* START_SECTION:featured-collection (INDEX:8) */
.featured-collection .slider {
    --slide-gap: 0.75rem;
  }

  .featured-collection__footer {
    display: flex;
    justify-content: center;
    margin-block-start: 2rem;
  }
/* END_SECTION:featured-collection */

/* START_SECTION:flash-sale (INDEX:9) */
.flash-sale__grid {
    display: grid;
    gap: 1.25rem;
  }

  .flash-sale__panel {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 1rem;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-fg);
    overflow: hidden;
    position: relative;
    isolation: isolate;
  }

  .flash-sale__panel::after {
    content: '';
    position: absolute;
    inset-inline-end: -4rem;
    inset-block-start: -4rem;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    z-index: -1;
  }

  .flash-sale__timer {
    display: flex;
    gap: 0.75rem;
  }

  .flash-sale__unit {
    display: grid;
    justify-items: center;
    min-width: 3.5rem;
    padding: 0.5rem 0.375rem;
    border-radius: var(--radius-small);
    background: rgba(255, 255, 255, 0.14);
    font-family: var(--font-heading-family);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .flash-sale__unit small {
    margin-block-start: 0.375rem;
    font-family: var(--font-body-family);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
  }

  .flash-sale__text {
    opacity: 0.9;
    max-width: 28rem;
  }

  .flash-sale__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-block-start: 0.5rem;
  }

  .button--light {
    white-space: nowrap;
    --btn-bg: #fff;
    --btn-fg: #0a0a0a;
  }

  .button--light .icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .icon-button--glass {
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
  }

  .icon-button--glass:hover {
    background: rgba(255, 255, 255, 0.28);
  }

  .flash-sale .card__badges .badge--sale {
    font-size: 0.8125rem;
  }

  @media screen and (min-width: 990px) {
    .flash-sale__grid {
      grid-template-columns: minmax(20rem, 0.9fr) 2.4fr;
      align-items: stretch;
      gap: 1.5rem;
    }

    .flash-sale__panel {
      padding: 2.5rem;
    }
  }
/* END_SECTION:flash-sale */

/* START_SECTION:footer (INDEX:10) */
.footer {
    --section-pt: 4rem;
    --section-pb: 2rem;
  }

  .footer__top {
    display: grid;
    gap: 3rem;
    padding-block-end: 3rem;
    border-block-end: 1px solid var(--color-border);
  }

  .footer__brand {
    display: grid;
    gap: 2rem;
    align-content: start;
  }

  .footer__heading {
    max-width: 12ch;
  }

  .footer__newsletter {
    display: grid;
    gap: 0.75rem;
    max-width: 30rem;
  }

  .footer__newsletter-label {
    font-weight: 600;
  }

  .footer__newsletter-field {
    display: flex;
    gap: 0.5rem;
  }

  .footer__newsletter-field .field__input {
    border-radius: var(--radius-button);
    background: rgba(var(--color-fg-rgb), 0.06);
  }

  .footer__columns {
    display: grid;
    gap: 0;
  }

  .footer__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 1rem;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
  }

  .footer__title::-webkit-details-marker {
    display: none;
  }

  .footer__title .icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.25s ease;
  }

  .footer__details[open] .footer__title .icon {
    transform: rotate(180deg);
  }

  .footer__details {
    border-block-end: 1px solid var(--color-border);
  }

  .footer__links {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding-block-end: 1.25rem;
  }

  .footer__links a,
  .footer__text {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.9375rem;
  }

  .footer__links a:hover {
    color: var(--color-fg);
  }

  .footer__bottom {
    display: grid;
    gap: 1.5rem;
    padding-block-start: 2rem;
    font-size: 0.8125rem;
    color: var(--color-muted);
  }

  .footer__social,
  .footer__payments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
  }

  .footer__payment-icon {
    width: 2.5rem;
    height: auto;
  }

  .footer__copyright a {
    text-decoration: none;
  }

  .footer__localization {
    max-width: 22rem;
  }

  /* No social links configured: don't reserve a column or gap for the empty list. */
  .footer__social:empty {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .footer__top {
      grid-template-columns: 1.1fr 1.4fr;
      gap: 4rem;
    }

    .footer__columns {
      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
      gap: 2rem;
    }

    .footer__details {
      border: 0;
    }

    .footer__title {
      pointer-events: none;
      padding-block-start: 0;
    }

    .footer__title .icon {
      display: none;
    }

    .footer__bottom {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1.5rem 2rem;
    }

    .footer__localization {
      flex: 1 1 18rem;
    }

    .footer__copyright {
      flex-basis: 100%;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:11) */
.header-wrapper {
    position: relative;
    z-index: 30;
    background: rgba(var(--color-bg-rgb), 0.86);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-fg);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .shopify-section-header-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
  }

  /* The section box stays in place while the bar slides away; let taps through. */
  .shopify-section-header-hidden {
    pointer-events: none;
  }

  .shopify-section-header-hidden .header-wrapper {
    transform: translateY(-100%);
  }

  .header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: 'start logo end';
    align-items: center;
    gap: 0.5rem 1rem;
    min-height: 4rem;
  }

  .header__start {
    display: contents;
  }

  .header__menu-toggle {
    grid-area: start;
    justify-self: start;
  }

  .header__heading,
  .header__logo {
    grid-area: logo;
    margin: 0;
    font-size: inherit;
    line-height: 1;
  }

  .header__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .header__logo-image {
    display: block;
    width: var(--logo-width);
    max-width: 100%;
    height: auto;
  }

  .header__logo-image--mobile {
    display: none;
  }

  @media screen and (max-width: 989px) {
    .header__logo-image {
      width: var(--logo-width-mobile, var(--logo-width));
    }

    .header__logo-image--desktop {
      display: none;
    }

    .header__logo-image--mobile {
      display: block;
    }
  }

  .header__wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
  }

  .header__wordmark-main {
    font-family: var(--font-heading-family);
    font-weight: 800;
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    font-stretch: var(--heading-stretch);
    line-height: 1;
  }

  @media screen and (max-width: 399px) {
    .header {
      gap: 0.5rem 0.25rem;
    }

    .header__wordmark-tag {
      display: none;
    }
  }

  .header__wordmark-tag {
    padding: 0.25rem 0.4rem;
    border-radius: 0.375rem;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
  }

  .header__nav {
    display: none;
  }

  .header__end {
    grid-area: end;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.125rem;
  }

  .header__account {
    display: none;
  }

  .header__search {
    display: block;
    grid-column: 1 / -1;
    padding-block-end: 0.75rem;
  }

  .cart-count {
    position: absolute;
    inset-block-start: 0.125rem;
    inset-inline-end: 0.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1.125rem;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
  }

  .cart-count.is-empty {
    transform: scale(0);
  }

  .cart-count.is-bumped {
    animation: bump 0.45s ease;
  }

  @keyframes bump {
    40% { transform: scale(1.35); }
  }

  @media screen and (min-width: 990px) {
    .header {
      grid-template-columns: auto auto minmax(0, 1fr) auto;
      grid-template-areas: 'start logo search end';
      gap: 0 1.5rem;
      min-height: 4.5rem;
    }

    .header__search {
      grid-area: search;
      grid-column: auto;
      justify-self: center;
      width: 100%;
      max-width: 40rem;
      padding: 0;
    }

    .header__account {
      display: inline-grid;
    }

    .header__end .localization {
      display: none;
    }
  }

  /* Hover-capable desktops get the full navigation row; touch tablets keep the drawer. */
  @media screen and (min-width: 990px) and (hover: hover) {
    .header {
      grid-template-columns: auto minmax(0, 1fr) auto auto;
      grid-template-areas:
        'logo search info end'
        'nav nav nav nav';
    }

    .header .header__info {
      grid-area: info;
      display: block;
    }

    .header__menu-toggle {
      display: none;
    }

    .header__nav {
      grid-area: nav;
      display: block;
      min-width: 0;
      margin-inline: -0.75rem;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
    }

    .header__nav::-webkit-scrollbar {
      display: none;
    }

    .header__nav .nav {
      height: 3rem;
    }
  }

  /* Desktop navigation */
  .nav {
    display: flex;
    align-items: stretch;
    height: 100%;
    margin: 0;
    gap: 0.25rem;
  }

  .nav__item {
    display: flex;
  }

  .nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-inline: 0.75rem;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
  }

  .nav__link .icon {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.6;
    transition: transform 0.2s ease;
  }

  .nav__link::after {
    content: '';
    position: absolute;
    inset-inline: 0.75rem;
    inset-block-end: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--color-accent);
    transform: scaleX(0);
    transition: transform 0.25s ease;
  }

  .nav__item:hover .nav__link::after,
  .nav__link.is-active::after {
    transform: scaleX(1);
  }

  .nav__item:hover .nav__link .icon {
    transform: rotate(180deg);
  }

  .mega {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: var(--color-bg);
    color: var(--color-fg);
    border-block: 1px solid var(--color-border);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.25s ease, visibility 0.2s;
  }

  .nav__item--has-children:hover .mega,
  .nav__item--has-children:focus-within .mega {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .mega__inner {
    display: flex;
    gap: 3rem;
    padding-block: 2.5rem;
  }

  .mega__columns {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 2rem;
    margin: 0;
    align-content: start;
  }

  .mega__columns--flat {
    gap: 0.25rem 2rem;
  }

  .mega__heading {
    font-weight: 700;
    text-decoration: none;
  }

  .mega__columns--flat .mega__heading {
    font-weight: 500;
    padding-block: 0.375rem;
    display: block;
  }

  .mega__list {
    display: grid;
    gap: 0.5rem;
    margin-block-start: 0.875rem;
  }

  .mega__link {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.9375rem;
  }

  .mega__link:hover,
  .mega__heading:hover {
    color: var(--color-fg);
    text-decoration: underline;
  }

  .mega__promo {
    width: 15rem;
    display: grid;
    gap: 0.75rem;
    text-decoration: none;
    font-weight: 700;
  }

  .mega__promo img {
    transition: transform 0.6s ease;
  }

  .mega__promo:hover img {
    transform: scale(1.05);
  }

  /* ---- Mega menu look: warm panel, white column cards, page dimmed behind ---- */
  .mega {
    background: #f6f5f1;
    border-block: 0;
    border-radius: 0 0 1.75rem 1.75rem;
    /* dim the page under the open menu (only below the header) */
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.35), 0 0 0 100vmax rgba(10, 10, 10, 0.38);
    clip-path: inset(0 -100vmax -100vmax -100vmax);
  }

  .mega__inner {
    gap: 1.25rem;
    padding-block: 1.5rem 1.75rem;
  }

  .mega__columns {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
  }

  .mega__columns:not(.mega__columns--flat) .mega__column {
    padding: 1.25rem 1.25rem 1.375rem;
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.18);
  }

  .mega__columns:not(.mega__columns--flat) .mega__heading {
    display: inline-grid;
    gap: 0.5rem;
    font-size: 1rem;
    letter-spacing: -0.01em;
  }

  .mega__columns:not(.mega__columns--flat) .mega__heading::before {
    content: '';
    width: 1.5rem;
    height: 3px;
    border-radius: 3px;
    background: #febd19;
  }

  .mega__link {
    display: inline-block;
    color: #4b4b4b;
    transition: color 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mega__link:hover,
  .mega__heading:hover {
    text-decoration: none;
  }

  .mega__link:hover {
    color: var(--color-fg);
    font-weight: 600;
    transform: translateX(4px);
  }

  [dir='rtl'] .mega__link:hover {
    transform: translateX(-4px);
  }

  .mega__promo {
    align-content: start;
    padding: 0.75rem;
    border-radius: 1.25rem;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.18);
  }

  .mega__promo .media,
  .mega__promo img {
    border-radius: 0.875rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .mega__link {
      transition: none;
    }
  }

  /* Mobile drawer menu */
  .menu-drawer__list {
    display: grid;
    margin: 0;
  }

  .menu-drawer__link,
  .menu-drawer__sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.625rem;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
  }

  .menu-drawer__link {
    font-family: var(--font-body-family);
    font-weight: 600;
    font-size: 0.9375rem;
    text-transform: none;
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__link::-webkit-details-marker,
  .menu-drawer__sublink::-webkit-details-marker {
    display: none;
  }

  .menu-drawer__details > summary .icon {
    width: 1.125rem;
    height: 1.125rem;
    transition: transform 0.25s ease;
  }

  .menu-drawer__details[open] > summary .icon {
    transform: rotate(180deg);
  }

  .menu-drawer__sublist {
    padding-inline-start: 1rem;
    margin: 0;
    border-inline-start: 2px solid var(--color-border);
    margin-block: 0.5rem;
  }

  .menu-drawer__sublink {
    padding-block: 0.5rem;
    font-size: 0.875rem;
  }

  .menu-drawer__link--sale {
    justify-content: center;
    gap: 0.5rem;
    margin-block-start: 1rem;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0.75rem;
    background: #e5202e;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 10px 20px -12px rgba(229, 32, 46, 0.8);
  }

  .menu-drawer__link--sale .icon {
    width: 1.125rem;
    height: 1.125rem;
    color: #febd19;
  }

  .nav__link--sale {
    align-self: center;
    height: 2rem !important;
    margin-inline-start: 0.25rem;
    padding: 0 0.875rem;
    border-radius: 999px;
    background: #e5202e;
    color: #fff;
    font-weight: 700;
  }

  .nav__link--sale::after {
    display: none;
  }

  .nav__link--sale:hover {
    background: #c81825;
  }

  /* Keep every menu link on screen (the menu scrolls with a hidden scrollbar, so overflow hides the last links) */
  @media screen and (min-width: 990px) {
    .header__nav .nav { gap: 0; }
    .header__nav .nav__link { padding-inline: 0.625rem; }
    .header__nav .nav__link::after { inset-inline: 0.625rem; }
  }
  @media screen and (min-width: 990px) and (max-width: 1535px) {
    .header__nav .nav__link { padding-inline: 0.4375rem; font-size: 0.875rem; }
    .header__nav .nav__link::after { inset-inline: 0.4375rem; }
  }
  @media screen and (min-width: 990px) and (max-width: 1365px) {
    .header__nav .nav__link { padding-inline: 0.3125rem; font-size: 0.8125rem; }
    .header__nav .nav__link::after { inset-inline: 0.3125rem; }
    .header__nav .nav__link .icon { display: none; }
  }
  @media screen and (min-width: 990px) and (max-width: 1199px) {
    .header__nav .nav__link { padding-inline: 0.25rem; }
    .header__nav .nav__link::after { inset-inline: 0.25rem; }
  }

  [data-nov-link][hidden] {
    display: none !important;
  }

  /* عروض نوفمبر (design system: brand-yellow pill, on-yellow text, Cairo 700) */
  .nav__link--nov {
    align-self: center;
    gap: 8px;
    height: 2.125rem !important;
    margin-inline: 4px;
    padding: 0 16px;
    border-radius: 9999px;
    background: #febd19;
    color: #0a0a0a;
    font-family: 'Cairo', var(--font-heading-family);
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .nav__link--nov::after {
    display: none;
  }

  .nav__link--nov:hover,
  .nav__link--nov.is-active {
    background: #0a0a0a;
    color: #febd19;
  }

  .nav__nov-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: currentColor;
    animation: nov-dot 1.6s ease-out infinite;
  }

  @keyframes nov-dot {
    0% { box-shadow: 0 0 0 0 rgba(10, 10, 10, 0.45); }
    100% { box-shadow: 0 0 0 7px rgba(10, 10, 10, 0); }
  }

  /* عروض نوفمبر: brand-yellow card at the top of the mobile menu */
  .nov-drawer-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-block: 4px 16px;
    padding: 16px;
    border-radius: 12px;
    background: #febd19;
    color: #0a0a0a;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
  }

  .nov-drawer-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 210, 94, 0.9) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: nov-shine 3.2s ease-in-out infinite;
  }

  @keyframes nov-shine {
    60%, 100% { transform: translateX(100%); }
  }

  .nov-drawer-link__text {
    display: grid;
    flex: 1;
  }

  .nov-drawer-link__title {
    font-family: 'Cairo', var(--font-heading-family);
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
  }

  .nov-drawer-link__sub {
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
  }

  .nov-drawer-link__date {
    padding: 4px 12px;
    border-radius: 9999px;
    background: #0a0a0a;
    color: #ffffff;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    white-space: nowrap;
  }

  .nov-drawer-link .icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .nav__nov-dot,
    .nov-drawer-link::before {
      animation: none;
    }
  }

  .header__info {
    display: none;
  }

  .header__info-list {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
  }

  .header__info-link {
    display: inline-flex;
    flex-direction: column;
    font-size: 0.875rem;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    transition: text-decoration-color 0.2s ease;
  }

  /* Reserves the bold width so hovering doesn't shift the row. */
  .header__info-link::after {
    content: attr(data-text);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 700;
  }

  .header__info-link:hover,
  .header__info-link.is-active {
    font-weight: 700;
    text-decoration-color: #febd19;
  }

  .menu-drawer__info {
    display: grid;
    margin: 1.25rem 0 0;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--color-border);
  }

  .menu-drawer__info-link {
    display: block;
    padding-block: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-muted);
    text-decoration: none;
  }

  .menu-drawer__info-link:hover {
    color: var(--color-fg);
  }

  .menu-drawer__sublink--all {
    font-weight: 700;
  }

  .menu-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: #f4f4f5;
  }

  .menu-drawer__footer .localization {
    margin-inline-start: auto;
  }

  .menu-drawer__footer .localization__toggle--name {
    background: transparent;
  }

  .menu-drawer__utility {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
  }
/* END_SECTION:header */

/* START_SECTION:hero-slideshow (INDEX:12) */
.hero {
    --hero-height: 70svh;
    position: relative;
    display: block;
    overflow: hidden;
    color: #fff;
    background: var(--color-bg);
  }

  .hero--small { --hero-height: 52svh; }
  .hero--medium { --hero-height: 70svh; }
  .hero--large { --hero-height: 88svh; }

  .hero__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .hero__track::-webkit-scrollbar {
    display: none;
  }

  .hero__slide {
    position: relative;
    display: grid;
    min-height: max(var(--hero-height), 28rem);
    scroll-snap-align: start;
    isolation: isolate;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, calc(var(--overlay) + 0.25)) 0%, rgba(0, 0, 0, var(--overlay)) 45%, rgba(0, 0, 0, 0) 100%);
  }

  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero__image--mobile {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .hero__image--desktop {
      display: none;
    }

    .hero__image--mobile {
      display: block;
    }
  }

  .hero__content {
    display: flex;
    align-items: flex-end;
    padding-block: 3rem 4.5rem;
  }

  .hero__slide--center .hero__content {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .hero__slide--center .hero__text {
    justify-items: center;
  }

  .hero__text {
    display: grid;
    gap: 1rem;
    max-width: 44rem;
  }

  .hero__eyebrow {
    justify-self: start;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .hero__slide--center .hero__eyebrow {
    justify-self: center;
  }

  .hero__heading {
    color: #fff;
  }

  .hero__subheading {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    max-width: 36rem;
    opacity: 0.9;
  }

  .hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 0.5rem;
  }

  .button--glass {
    --btn-bg: rgba(255, 255, 255, 0.14);
    --btn-fg: #fff;
    border-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
  }

  .hero__slide .hero__text > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .hero__slide.is-active .hero__text > * {
    opacity: 1;
    transform: none;
  }

  .hero__slide.is-active .hero__text > :nth-child(2) { transition-delay: 0.08s; }
  .hero__slide.is-active .hero__text > :nth-child(3) { transition-delay: 0.16s; }
  .hero__slide.is-active .hero__text > :nth-child(4) { transition-delay: 0.24s; }

  /* The first slide's text is the largest thing on screen: show it immediately (no fade-in
     waiting for JavaScript), so the page paints as fast as possible. */
  .hero__slide--first .hero__text > *,
  .no-js .hero__slide .hero__text > * {
    opacity: 1;
    transform: none;
  }

  .hero__controls {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 1.5rem;
    display: flex;
    pointer-events: none;
  }

  .hero__slide--center ~ .hero__controls,
  .hero__controls {
    justify-content: flex-start;
  }

  /* Collage slide: brand-colour panel + floating product cards */
  .hero__slide--collage {
    background: var(--color-bg);
    color: var(--color-fg);
  }

  .hero__slide--collage .hero__media {
    display: none;
  }

  .hero__slide--collage .hero__heading {
    color: inherit;
  }

  .hero__slide--collage .hero__eyebrow {
    background: var(--color-highlight);
    color: var(--color-highlight-text);
    backdrop-filter: none;
  }

  .hero__slide--collage .button--glass {
    --btn-fg: var(--color-fg);
    border-color: currentColor;
    background: transparent;
  }

  .hero__slide--collage .hero__content {
    display: grid;
    align-content: center;
    gap: 2rem;
    padding-block: 2.5rem 4rem;
  }

  .hero__collage {
    position: relative;
    height: clamp(14rem, 52vw, 30rem);
  }

  .hero__collage-item {
    position: absolute;
    width: 46%;
    aspect-ratio: 1;
    padding: 6%;
    border-radius: calc(var(--radius) * 1.5);
    background: #fff;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.45);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .hero__collage-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .hero__collage-item--1 {
    inset-inline-start: 2%;
    top: 12%;
    transform: rotate(-6deg);
    z-index: 2;
  }

  .hero__collage-item--2 {
    inset-inline-start: 30%;
    top: 0;
    width: 52%;
    transform: rotate(3deg);
    z-index: 3;
  }

  .hero__collage-item--3 {
    inset-inline-end: 0;
    top: 26%;
    width: 40%;
    transform: rotate(8deg);
    z-index: 1;
  }

  .hero__slide--collage:not(.is-active) .hero__collage-item {
    transform: translateY(30px) rotate(0deg);
  }

  @media screen and (min-width: 990px) {
    .hero__slide--collage .hero__content {
      grid-template-columns: 1fr 1.1fr;
      align-items: center;
      gap: 4rem;
      padding-block: 4rem;
    }

    .hero__collage {
      height: min(34rem, 70svh);
      /* Rotated cards stay inside the content container. */
      margin-inline: 1.5rem;
    }
  }

  .hero:has(.hero__slide--collage.is-active) .hero__dot::before {
    background: rgba(var(--color-fg-rgb), 0.25);
  }

  .hero:has(.hero__slide--collage.is-active) .hero__dot-fill {
    background: var(--color-fg);
  }

  .hero__dots {
    display: flex;
    gap: 0.5rem;
    pointer-events: auto;
  }

  .hero__dot {
    position: relative;
    width: 2.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
  }

  .hero__dot::before,
  .hero__dot-fill {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    height: 3px;
    border-radius: 3px;
    translate: 0 -50%;
    background: rgba(255, 255, 255, 0.35);
  }

  .hero__dot-fill {
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
  }

  [dir='rtl'] .hero__dot-fill {
    transform-origin: right;
  }

  .hero__dot[aria-selected='true'] .hero__dot-fill {
    animation: hero-progress var(--hero-interval, 5000ms) linear forwards;
  }

  .hero.is-paused .hero__dot[aria-selected='true'] .hero__dot-fill {
    animation-play-state: paused;
  }

  @keyframes hero-progress {
    to {
      transform: scaleX(1);
    }
  }
/* END_SECTION:hero-slideshow */

/* START_SECTION:image-with-text (INDEX:13) */
.image-with-text__grid {
    display: grid;
    gap: 2rem;
    align-items: center;
  }

  .image-with-text__media {
    aspect-ratio: 4 / 5;
  }

  .image-with-text__content {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
  }

  @media screen and (min-width: 990px) {
    .image-with-text__grid {
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
    }

    .image-with-text__grid--reverse .image-with-text__media {
      order: 2;
    }
  }
/* END_SECTION:image-with-text */

/* START_SECTION:job-openings (INDEX:14) */
/* "See open positions" (#jobs) lands below the sticky header */
  #jobs {
    scroll-margin-top: 6rem;
  }

  job-board {
    display: block;
  }

  .jobs__filters {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-block-end: 1.25rem;
    padding-block: 0.125rem;
  }

  .jobs__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: transparent;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .jobs__chip .icon {
    width: 1rem;
    height: 1rem;
  }

  .jobs__chip:hover {
    border-color: var(--color-fg);
  }

  .jobs__chip[aria-pressed='true'] {
    background: var(--color-fg);
    color: var(--color-bg);
    border-color: var(--color-fg);
  }

  .jobs__grid {
    display: grid;
    gap: 1rem;
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .jobs__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 1100px) {
    .jobs__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.25rem;
    }
  }

  .job-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    transition: border-color 0.2s ease, box-shadow 0.25s ease, opacity 0.25s ease;
  }

  .job-card:hover {
    border-color: rgba(var(--color-fg-rgb), 0.35);
    box-shadow: 0 18px 40px -26px rgba(var(--color-fg-rgb), 0.5);
  }

  .job-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .job-card__tags .badge {
    gap: 0.25rem;
    font-weight: 600;
  }

  .job-card__tags .icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .job-card__title {
    font-size: 1.25rem;
  }

  .job-card__text {
    font-size: 0.9375rem;
    color: var(--color-muted);
  }

  .job-card__apply {
    margin-block-start: auto;
  }

  .job-card__apply .icon {
    width: 1rem;
    height: 1rem;
  }

  .jobs__apply {
    display: grid;
    gap: 2rem;
    margin-block-start: 4rem;
    scroll-margin-top: calc(var(--header-offset, 0px) + 1rem);
  }

  .jobs__apply:focus {
    outline: none;
  }

  .jobs__apply-intro {
    display: grid;
    gap: 1rem;
    align-content: start;
    justify-items: start;
  }

  .jobs__cv-note {
    display: flex;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-inline-start: 3px solid var(--color-accent);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    font-size: 0.9375rem;
  }

  .jobs__cv-note .icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

  .jobs__cv-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .jobs__cv-buttons .icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .jobs__apply .icon--whatsapp {
    width: 1.125rem;
    height: 1.125rem;
  }

  .jobs__form.is-highlighted {
    animation: jobs-pulse 1.2s ease;
  }

  @keyframes jobs-pulse {
    30% {
      box-shadow: 0 0 0 4px var(--color-accent);
    }
  }

  @media screen and (min-width: 990px) {
    .jobs__apply {
      grid-template-columns: 0.8fr 1.2fr;
      gap: 4rem;
    }

    .jobs__apply-intro {
      position: sticky;
      top: calc(var(--header-offset, 0px) + 2rem);
    }
  }
/* END_SECTION:job-openings */

/* START_SECTION:judgeme-reviews (INDEX:15) */
.judgeme-reviews {
    padding-block: 3rem;
  }

  .judgeme-reviews .jdgm-form__fieldset:has([name='review_title']),
  .judgeme-reviews .jdgm-form__fieldset:has(.jdgm-picture-fieldset),
  .judgeme-reviews .jdgm-picture-fieldset {
    display: none !important;
  }
/* END_SECTION:judgeme-reviews */

/* START_SECTION:main-404 (INDEX:16) */
.main-404__search {
    width: min(32rem, 100%);
  }
/* END_SECTION:main-404 */

/* START_SECTION:main-article (INDEX:17) */
.main-article__inner {
    display: grid;
    gap: 2rem;
    max-width: 56rem;
  }

  .main-article__header {
    display: grid;
    gap: 0.75rem;
  }

  .main-article .rte {
    font-size: 1.0625rem;
    line-height: 1.75;
  }
/* END_SECTION:main-article */

/* START_SECTION:main-blog (INDEX:18) */
.main-blog__title {
    margin-block-end: 2rem;
  }

  .main-blog__grid {
    display: grid;
    gap: 2.5rem 1.5rem;
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .main-blog__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 990px) {
    .main-blog__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .article-card {
    display: grid;
    gap: 0.75rem;
    text-decoration: none;
  }

  .article-card img {
    transition: transform 0.6s ease;
  }

  .article-card:hover img {
    transform: scale(1.04);
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:19) */
.cart-page__title {
    margin-block-end: 2rem;
  }

  .cart-page__grid {
    display: grid;
    gap: 2rem;
  }

  .cart-page__summary {
    display: grid;
    gap: 1rem;
    align-content: start;
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
  }

  .cart-page__totals {
    display: grid;
    gap: 1rem;
  }

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

  .cart-page__line--discount {
    color: var(--color-sale);
  }

  .cart-page__total {
    font-weight: 800;
    font-size: 1.25rem;
  }

  .cart-page__note {
    font-size: 0.8125rem;
  }

  @media screen and (min-width: 990px) {
    .cart-page__grid {
      grid-template-columns: 1.6fr 1fr;
      gap: 4rem;
      align-items: start;
    }

    .cart-page__summary {
      position: sticky;
      top: 6rem;
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:20) */
.collection__title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .collection__header {
    display: grid;
    gap: 0.5rem;
    margin-block-end: 1.25rem;
  }

  /* Slim banner: title on one side, the square category image on the other (never cropped). */
  .collection__header--image {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
  }

  .collection__banner {
    order: 2;
    width: 7.5rem;
    aspect-ratio: 1;
    border-radius: calc(var(--radius) * 0.75);
    background: #fff;
  }

  .collection__banner img {
    object-fit: contain;
  }

  .collection__header--image .h1 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
  }

  @media screen and (min-width: 750px) {
    .collection__header--image {
      padding: 1.5rem 2.5rem;
    }

    .collection__banner {
      width: 10rem;
    }
  }

  .collection__header-text {
    display: grid;
    gap: 0.75rem;
  }

  .collection__about {
    display: grid;
    gap: 0.75rem;
    max-width: 52rem;
    margin-block-start: 3rem;
    padding-block-start: 2rem;
    border-block-start: 1px solid var(--color-border);
  }

  .collection__about-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
  }

  .collection__description {
    font-size: 0.9375rem;
    opacity: 0.85;
  }
/* END_SECTION:main-collection */

/* START_SECTION:main-contact (INDEX:21) */
.contact__grid {
    display: grid;
    gap: 2.5rem;
  }

  .contact__side {
    display: grid;
    gap: 1.25rem;
    align-content: start;
  }

  .contact__cards {
    display: grid;
    gap: 0.75rem;
    margin: 0;
  }

  .contact-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }

  .contact-card:hover {
    border-color: rgba(var(--color-fg-rgb), 0.35);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -22px rgba(var(--color-fg-rgb), 0.6);
  }

  .contact-card > .icon--arrow {
    margin-inline-start: auto;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-muted);
    transition: translate 0.2s ease;
  }

  .contact-card:hover > .icon--arrow {
    translate: 3px 0;
  }

  [dir='rtl'] .contact-card:hover > .icon--arrow {
    translate: -3px 0;
  }

  .contact-card__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-surface);
  }

  .contact-card--whatsapp .contact-card__icon {
    background: #25d366;
    color: #fff;
  }

  .contact-card__text {
    display: grid;
    min-width: 0;
  }

  .contact-card__label {
    font-size: 0.8125rem;
    color: var(--color-muted);
  }

  .contact-card__value {
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  [dir='rtl'] .contact-card__value[dir='ltr'] {
    text-align: end;
  }

  .contact__hours {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9375rem;
  }

  .contact__hours .icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .contact__social {
    display: grid;
    gap: 0.75rem;
  }

  .contact__social-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
  }

  .contact__social-list .icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  @media screen and (min-width: 990px) {
    .contact__grid {
      grid-template-columns: 0.85fr 1.15fr;
      gap: 4rem;
    }
  }
/* END_SECTION:main-contact */

/* START_SECTION:main-list-collections (INDEX:22) */
.list-collections__title {
    margin-block-end: 2rem;
  }
/* END_SECTION:main-list-collections */

/* START_SECTION:main-page (INDEX:23) */
.main-page__inner {
    display: grid;
    gap: 2rem;
    max-width: 52rem;
  }
/* END_SECTION:main-page */

/* START_SECTION:main-password (INDEX:24) */
.main-password {
    min-height: 100vh;
    display: grid;
    align-items: center;
  }

  .main-password__inner {
    display: grid;
    gap: 2rem;
    justify-items: center;
    text-align: center;
    max-width: 40rem;
  }

  .main-password__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
  }

  .main-password__form .field__input {
    flex: 1 1 14rem;
  }

  .main-password__login summary {
    cursor: pointer;
    text-decoration: underline;
    margin-block-end: 1rem;
  }
/* END_SECTION:main-password */

/* START_SECTION:main-product (INDEX:25) */
.product__grid {
    display: grid;
    gap: 1.5rem;
  }

  @media screen and (min-width: 990px) {
    .product__grid {
      grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
      gap: 3rem;
      align-items: start;
    }
  }

  /* Gallery */
  .product__gallery {
    position: relative;
  }

  .product__media-list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -1rem;
    padding: 0 1rem;
    scroll-padding-inline: 1rem;
  }

  .product__media-list::-webkit-scrollbar {
    display: none;
  }

  .product__media-item {
    scroll-snap-align: start;
  }

  .product__media-list .media {
    border-radius: var(--radius);
  }

  .product__media img,
  .product__media video,
  .product__media iframe,
  .product__media model-viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product__media-counter {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline-end: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(var(--color-bg-rgb), 0.85);
    backdrop-filter: blur(8px);
    font-size: 0.8125rem;
    font-weight: 600;
  }

  /* Slider arrows (tablet and desktop; mobile swipes) */
  .product__media-nav {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .product__media-nav {
      position: absolute;
      top: 50%;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 3rem;
      height: 3rem;
      padding: 0;
      border: 1px solid var(--color-border);
      border-radius: 50%;
      background: rgba(var(--color-bg-rgb), 0.92);
      color: var(--color-fg);
      box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35);
      cursor: pointer;
      translate: 0 -50%;
      transition: opacity 0.2s ease, background-color 0.15s ease;
    }

    .product__media-nav:hover {
      background: var(--color-bg);
    }

    .product__media-nav:focus-visible {
      outline: 2px solid var(--color-fg);
      outline-offset: 2px;
    }

    .product__media-nav[disabled] {
      opacity: 0;
      pointer-events: none;
    }

    .product__media-nav--prev {
      inset-inline-start: 1rem;
    }

    .product__media-nav--next {
      inset-inline-end: 1rem;
    }

    .product__media-nav .icon {
      width: 1.25rem;
      height: 1.25rem;
    }

    .product__media-nav--prev .icon {
      rotate: 180deg;
    }
  }

  @media screen and (min-width: 990px) {
    .product__media-list {
      margin: 0;
      padding: 0;
      scroll-padding-inline: 0;
    }

    /* One image at a time, sized to fit the screen */
    .product__media-list .product__media {
      aspect-ratio: auto !important;
      height: min(calc(100vh - 12rem), 44rem);
    }

    .product__media-list .product__media img {
      object-fit: contain;
    }
  }

  /* Info */
  .product__info-inner {
    display: grid;
    gap: 1.25rem;
  }

  /* Desktop: the photos stay in view while the (longer) details column scrolls, so there is
     no empty space under the gallery. */
  @media screen and (min-width: 990px) {
    .product__gallery {
      position: sticky;
      top: 7.5rem;
    }
  }

  .product__vendor {
    text-decoration: none;
  }

  .product__title {
    margin-block-start: -0.5rem;
  }

  .product__price .price {
    font-size: 1.375rem;
  }

  .product__tax {
    font-size: 0.8125rem;
    margin-block-start: 0.25rem;
  }

  /* Options */
  .product__variants {
    display: grid;
    gap: 1.25rem;
  }

  .option {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.625rem;
  }

  .product__sold {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: -0.25rem 0 0;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    background: #fff6dd;
    color: #0a0a0a;
    font-size: 0.8125rem;
    font-weight: 600;
    justify-self: start;
  }

  .option__legend {
    padding: 0;
    margin-block-end: 0.625rem;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .option__selected {
    font-weight: 400;
    color: var(--color-muted);
    text-transform: capitalize;
  }

  .option__values--swatch {
    gap: 0.625rem;
  }

  .option__values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .option__label {
    display: inline-grid;
    place-items: center;
    min-width: 3.25rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  }

  .option__label:hover {
    border-color: var(--color-fg);
  }

  .option__input:checked + .option__label {
    background: var(--color-fg);
    color: var(--color-bg);
    border-color: var(--color-fg);
  }

  .option__input:focus-visible + .option__label {
    outline: 2px solid var(--color-fg);
    outline-offset: 2px;
  }

  .option__label.is-unavailable {
    color: var(--color-muted);
    background-image: linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--color-border) 50%, transparent calc(50% + 0.5px));
  }

  .option__dot {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-inline-end: 0.375rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    vertical-align: -0.125rem;
  }

  .option__label--swatch {
    min-width: 0;
    width: 2.5rem;
    height: 2.5rem;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    background: var(--swatch);
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  }

  .option__input:checked + .option__label--swatch {
    background: var(--swatch);
    background-size: cover;
    outline: 2px solid var(--color-fg);
    outline-offset: 3px;
  }

  .option__label--swatch.is-unavailable {
    opacity: 0.45;
  }

  /* Buy */
  .product__form {
    display: grid;
    gap: 0.75rem;
  }

  .product__buy-row {
    display: flex;
    gap: 0.75rem;
  }

  .quantity__button[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .product__add {
    flex: 1;
    min-height: 3.25rem;
    font-size: 1rem;
  }

  .shopify-payment-button__button {
    min-height: 3.25rem;
    border-radius: var(--radius-button) !important;
    overflow: hidden;
  }

  .product__stock {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #c2410c;
  }

  .product__stock-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 1.6s ease-in-out infinite;
  }

  @keyframes pulse {
    50% {
      opacity: 0.3;
    }
  }

  .product__perks {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 1.125rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.9375rem;
  }

  .product__perks li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .product__share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
  }

  .product__share .icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  /* Sticky bar */
  .product__sticky-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(var(--color-bg-rgb), 0.92);
    backdrop-filter: blur(14px);
    border-block-start: 1px solid var(--color-border);
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .product__sticky-bar.is-visible {
    transform: none;
  }

  .product__sticky-info {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
  }

  .product__sticky-title {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  @media screen and (min-width: 990px) {
    .product__sticky-bar {
      inset-inline: auto 1.5rem;
      inset-block-end: 1.5rem;
      width: 26rem;
      padding: 0.75rem 0.75rem 0.75rem 1.25rem;
      border: 1px solid var(--color-border);
      border-radius: 999px;
      box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.35);
      transform: translateY(calc(100% + 2rem));
    }
  }
/* END_SECTION:main-product */

/* START_SECTION:main-search (INDEX:26) */
.search__header {
    display: grid;
    gap: 1.5rem;
    justify-items: center;
    text-align: center;
    margin-block-end: 2rem;
  }

  .search__form {
    width: min(40rem, 100%);
  }

  .search__form .search-form__input {
    height: 3.5rem;
    font-size: 1.0625rem;
  }

  .search__article {
    display: grid;
    gap: 0.5rem;
    height: 100%;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    text-decoration: none;
  }
/* END_SECTION:main-search */

/* START_SECTION:marquee (INDEX:27) */
.marquee {
    display: block;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-fg);
    padding-block: 1rem;
  }

  .marquee__track {
    display: flex;
    width: max-content;
    animation: marquee var(--marquee-speed, 30s) linear infinite;
  }

  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }

  .marquee__group {
    display: flex;
    flex-shrink: 0;
    margin: 0;
  }

  .marquee__item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-inline-end: 1.5rem;
    font-family: var(--font-heading-family);
    font-weight: var(--heading-weight);
    font-stretch: var(--heading-stretch);
    text-transform: var(--heading-transform);
    font-size: clamp(1.25rem, 3vw, 2.25rem);
    line-height: 1.1;
    white-space: nowrap;
  }

  .marquee__sep .icon {
    width: 1.25em;
    height: 1.25em;
    color: var(--color-accent);
    fill: currentColor;
  }

  @keyframes marquee {
    to {
      transform: translateX(-50%);
    }
  }

  [dir='rtl'] .marquee__track {
    animation-name: marquee-rtl;
  }

  @keyframes marquee-rtl {
    to {
      transform: translateX(50%);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:newsletter (INDEX:28) */
.newsletter__card {
    display: grid;
    gap: 2rem;
    padding: 2.5rem 1.5rem;
    border-radius: calc(var(--radius) * 1.5);
    background: var(--color-surface);
  }

  .newsletter__text {
    display: grid;
    gap: 0.75rem;
  }

  .newsletter__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-self: center;
  }

  .newsletter__form .field__input {
    flex: 1 1 14rem;
    border-radius: var(--radius-button);
  }

  .newsletter__message {
    flex-basis: 100%;
  }

  @media screen and (min-width: 990px) {
    .newsletter__card {
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      padding: 4rem;
    }
  }
/* END_SECTION:newsletter */

/* START_SECTION:nov-home-banner (INDEX:29) */
.novh {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #febd19;
    color: #0a0a0a;
  }

  .novh[hidden] { display: none; }

  .novh__bars {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 16px;
    z-index: -1;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    height: 60%;
  }

  .novh__bars i {
    width: clamp(24px, 5vw, 72px);
    border-radius: 9999px 9999px 0 0;
    background: #ffd25e;
    transform-origin: bottom;
    animation: novh-bar 3.2s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate;
  }

  .novh__bars i:nth-child(1), .novh__bars i:nth-child(6) { height: 34%; }
  .novh__bars i:nth-child(2), .novh__bars i:nth-child(5) { height: 62%; animation-delay: -0.6s; }
  .novh__bars i:nth-child(3), .novh__bars i:nth-child(4) { height: 92%; animation-delay: -1.2s; }

  @keyframes novh-bar {
    from { transform: scaleY(0.75); }
    to { transform: scaleY(1); }
  }

  .novh__inner {
    display: grid;
    gap: 24px;
    padding-block: 32px 24px;
  }

  .novh__text { display: grid; justify-items: start; gap: 8px; }

  .novh__dates {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
    border-radius: 9999px;
    background: #0a0a0a;
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
  }

  .novh__dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #febd19;
    animation: novh-pulse 1.6s ease-out infinite;
  }

  @keyframes novh-pulse {
    0% { box-shadow: 0 0 0 0 rgba(254, 189, 25, 0.7); }
    100% { box-shadow: 0 0 0 10px rgba(254, 189, 25, 0); }
  }

  .novh__title { display: grid; margin: 0; }

  .novh__title-ar {
    justify-self: start;
    font-family: 'Cairo', var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(48px, 12vw, 112px);
    line-height: 1.29;
  }

  .novh__title-en {
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
  }

  .novh__offer {
    margin: 0;
    font-weight: 700;
    font-size: clamp(28px, 6vw, 40px);
    line-height: 1.2;
  }

  .novh__clock { display: grid; justify-items: start; gap: 12px; align-content: center; }

  .novh__clock-label { margin: 0; font-weight: 700; font-size: 16px; line-height: 24px; }

  /* The mega counter: one black pill, big yellow numbers */
  .novh__pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 9999px;
    background: #0a0a0a;
    color: #febd19;
  }

  .novh__unit { display: grid; justify-items: center; min-width: 3.25rem; }

  .novh__unit b {
    font-weight: 700;
    font-size: clamp(36px, 9vw, 72px);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }

  .novh__unit small { color: #ffffff; font-size: 13px; line-height: 18px; }

  .novh__sep { align-self: start; font-weight: 700; font-size: clamp(28px, 7vw, 56px); line-height: 1.1; opacity: 0.6; }

  .novh__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 32px;
    border-radius: 9999px;
    background: #0a0a0a;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
  }

  .novh__cta:hover { transform: translateY(-2px); }
  .novh__cta .icon { width: 20px; height: 20px; }

  .novh [data-when] { display: none; }
  .novh[data-state='before'] [data-when='before'],
  .novh[data-state='live'] [data-when='live'] { display: inline; }

  /* Row of white product cards on the yellow band */
  .novh__rail { padding-block-end: 32px; }

  .novh__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 46%;
    gap: 16px;
    margin: 0;
    padding: 0 0 8px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .novh__list > li {
    scroll-snap-align: start;
    padding: 8px 8px 16px;
    border-radius: 12px;
    background: #ffffff;
  }

  .novh .card,
  .novh .card__media { background: #ffffff; }

  .novh .card__info { padding-inline: 8px; }

  @media screen and (min-width: 750px) {
    .novh__list { grid-auto-columns: calc((100% - 64px) / 5); }
  }

  @media screen and (min-width: 990px) {
    .novh__inner {
      grid-template-columns: 1fr auto;
      align-items: center;
      padding-block: 48px 32px;
    }

    .novh__rail { padding-block-end: 48px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .novh__bars i, .novh__dot { animation: none; }
  }
/* END_SECTION:nov-home-banner */

/* START_SECTION:november-offers (INDEX:30) */
/* Baba Saleh design system tokens (tokens.json v2) */
  .nov {
    --bs-brand-yellow: #febd19;
    --bs-yellow-soft: #ffd25e;
    --bs-ink: #0a0a0a;
    --bs-on-yellow: #0a0a0a;
    --bs-white: #ffffff;
    --bs-space-1: 4px;
    --bs-space-2: 8px;
    --bs-space-4: 16px;
    --bs-space-6: 24px;
    --bs-space-8: 32px;
    --bs-space-12: 48px;
    --bs-radius-md: 12px;
    --bs-radius-pill: 9999px;
    --bs-font-sans: 'Century Gothic', 'CenturyGothic', 'Didact Gothic', 'Cairo', system-ui, sans-serif;
    --bs-font-arabic: 'Cairo', 'Century Gothic', 'Didact Gothic', system-ui, sans-serif;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 0;
    background: var(--bs-brand-yellow);
    color: var(--bs-on-yellow);
  }

  [dir='rtl'] .nov {
    --bs-font-sans: var(--bs-font-arabic);
  }

  /* Ticker: ink strip, brand-yellow words */
  .nov__ticker {
    overflow: hidden;
    background: var(--bs-ink);
    color: var(--bs-brand-yellow);
    font-family: var(--bs-font-sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
  }

  .nov__ticker-track {
    display: inline-flex;
    gap: var(--bs-space-6);
    padding-block: var(--bs-space-2);
    animation: nov-ticker 40s linear infinite;
  }

  .nov__ticker-track span {
    unicode-bidi: isolate;
    display: inline-flex;
    align-items: center;
    gap: var(--bs-space-6);
  }

  .nov__ticker-track i {
    font-style: normal;
  }

  .nov__ticker-track span[lang='ar'] {
    font-family: var(--bs-font-arabic);
  }

  .nov__ticker-track span::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--bs-radius-pill);
    background: currentColor;
  }

  [dir='rtl'] .nov__ticker-track {
    animation-name: nov-ticker-rtl;
  }

  @keyframes nov-ticker {
    to { transform: translateX(-50%); }
  }

  @keyframes nov-ticker-rtl {
    to { transform: translateX(50%); }
  }

  /* Bar pattern echoing the icon: pill bars rising to the centre, in yellow-soft */
  .nov__bars {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: var(--bs-space-4);
    z-index: -1;
    display: flex;
    align-items: flex-end;
    gap: var(--bs-space-4);
    height: 78%;
  }

  .nov__bars i {
    width: clamp(28px, 6vw, 84px);
    border-radius: var(--bs-radius-pill) var(--bs-radius-pill) 0 0;
    background: var(--bs-yellow-soft);
    transform-origin: bottom;
    animation: nov-bar 3.2s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate;
  }

  .nov__bars i:nth-child(1), .nov__bars i:nth-child(6) { height: 34%; }
  .nov__bars i:nth-child(2), .nov__bars i:nth-child(5) { height: 62%; animation-delay: -0.6s; }
  .nov__bars i:nth-child(3), .nov__bars i:nth-child(4) { height: 92%; animation-delay: -1.2s; }

  @keyframes nov-bar {
    from { transform: scaleY(0.75); }
    to { transform: scaleY(1); }
  }

  .nov__inner {
    position: relative;
    display: grid;
    justify-items: start;
    gap: var(--bs-space-6);
    padding-block: var(--bs-space-8);
  }

  .nov__dates {
    display: inline-flex;
    align-items: center;
    gap: var(--bs-space-2);
    margin: 0;
    padding: var(--bs-space-2) var(--bs-space-4);
    border-radius: var(--bs-radius-pill);
    background: var(--bs-ink);
    color: var(--bs-white);
    font-family: var(--bs-font-sans);
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
  }

  .nov__live-dot {
    width: var(--bs-space-2);
    height: var(--bs-space-2);
    border-radius: var(--bs-radius-pill);
    background: var(--bs-brand-yellow);
    box-shadow: 0 0 0 0 rgba(254, 189, 25, 0.7);
    animation: nov-pulse 1.6s ease-out infinite;
  }

  @keyframes nov-pulse {
    to { box-shadow: 0 0 0 10px rgba(254, 189, 25, 0); }
  }

  .nov__head {
    display: grid;
    justify-items: start;
    gap: var(--bs-space-2);
  }

  .nov__title {
    display: grid;
    margin: 0;
  }

  /* display-ar: Cairo 700, line height 72/56 */
  .nov__title-ar {
    justify-self: start;
    font-family: var(--bs-font-arabic);
    font-weight: 700;
    font-size: clamp(56px, 15vw, 144px);
    line-height: 1.29;
    animation: nov-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .nov__title-en {
    font-family: var(--bs-font-sans);
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
  }

  @keyframes nov-rise {
    from { opacity: 0; transform: translateY(0.3em); }
  }

  /* Offer line: h1 (40/44) in English, h1-ar (36/52) in Arabic */
  .nov__offer {
    margin: var(--bs-space-4) 0 0;
    font-family: var(--bs-font-sans);
    font-weight: 700;
    font-size: clamp(28px, 6vw, 40px);
    line-height: 1.1;
  }

  [dir='rtl'] .nov__offer {
    font-size: clamp(28px, 6vw, 36px);
    line-height: 1.45;
  }

  /* body / body-ar */
  .nov__text {
    max-width: 34rem;
    margin: 0;
    font-family: var(--bs-font-sans);
    font-size: 16px;
    line-height: 24px;
  }

  [dir='rtl'] .nov__text {
    line-height: 28px;
  }

  .nov__clock {
    display: grid;
    justify-items: start;
    gap: var(--bs-space-2);
  }

  .nov__clock-label {
    margin: 0;
    font-family: var(--bs-font-sans);
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
  }

  /* The black countdown pill on yellow */
  .nov__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--bs-space-2);
    padding: var(--bs-space-2) var(--bs-space-6);
    border-radius: var(--bs-radius-pill);
    background: var(--bs-ink);
    color: var(--bs-brand-yellow);
  }

  .nov__unit {
    display: grid;
    justify-items: center;
    min-width: 2.75rem;
  }

  .nov__unit b {
    font-family: var(--bs-font-sans);
    font-weight: 700;
    font-size: clamp(28px, 6vw, 40px);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .nov__unit small {
    color: var(--bs-white);
    font-family: var(--bs-font-sans);
    font-size: 13px;
    line-height: 18px;
  }

  .nov__sep {
    align-self: start;
    font-weight: 700;
    font-size: clamp(24px, 5vw, 32px);
    line-height: 1.3;
    opacity: 0.6;
  }

  .nov__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bs-space-2) var(--bs-space-6);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--bs-font-sans);
    font-size: 16px;
    line-height: 24px;
  }

  .nov__trust li {
    display: inline-flex;
    align-items: center;
    gap: var(--bs-space-2);
  }

  .nov__trust .icon {
    width: 20px;
    height: 20px;
  }

  .nov__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bs-space-4);
  }

  /* Primary pill button: ink fill, white label */
  .nov__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--bs-space-2);
    min-height: 52px;
    padding: 0 var(--bs-space-8);
    border-radius: var(--bs-radius-pill);
    background: var(--bs-ink);
    color: var(--bs-white);
    font-family: var(--bs-font-sans);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
  }

  .nov__cta:hover {
    transform: translateY(-2px);
  }

  .nov__cta .icon {
    width: 20px;
    height: 20px;
  }

  .nov__anchor {
    position: absolute;
    inset-block-end: 0;
  }

  /* Show only the parts that match the countdown state */
  .nov [data-when] { display: none; }
  .nov[data-state='before'] [data-when~='before'],
  .nov[data-state='live'] [data-when~='live'],
  .nov[data-state='ended'] [data-when~='ended'] { display: inline-flex; }
  .nov[data-state='ended'] .nov__pill,
  .nov[data-state='ended'] .nov__live-dot { display: none; }

  /* The product grid under the hero: no second title; white product cards framed by the yellow page */
  .shopify-section:has(.nov) + .shopify-section .collection__header { display: none; }

  .shopify-section:has(.nov) + .shopify-section .product-grid > li {
    padding: 8px 8px 16px;
    border-radius: 12px;
    background: #ffffff;
    color: #0a0a0a;
  }

  .shopify-section:has(.nov) + .shopify-section .card,
  .shopify-section:has(.nov) + .shopify-section .card__media {
    background: #ffffff;
  }

  .shopify-section:has(.nov) + .shopify-section .card__info {
    padding-inline: 8px;
  }

  @media screen and (min-width: 750px) {
    .nov__inner {
      padding-block: var(--bs-space-12);
    }

    .nov__pill {
      gap: var(--bs-space-4);
      padding-inline: var(--bs-space-8);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nov__ticker-track,
    .nov__bars i,
    .nov__live-dot,
    .nov__title-ar {
      animation: none;
    }
  }
/* END_SECTION:november-offers */

/* START_SECTION:page-content (INDEX:31) */
page-toc {
    display: block;
  }

  .page-content__grid {
    --progress: 0;
    display: grid;
    gap: 1.5rem;
  }

  .page-content__progress {
    position: fixed;
    z-index: 30;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--color-accent);
    transform: scaleX(var(--progress));
    transform-origin: left;
    pointer-events: none;
  }

  [dir='rtl'] .page-content__progress {
    transform-origin: right;
  }

  .no-js .page-content__progress {
    display: none;
  }

  .page-content__article {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
    max-width: 46rem;
  }

  .page-content:not(.page-content--toc) .page-content__article {
    margin-inline: auto;
  }

  .page-content__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    padding-block-end: 1.25rem;
    border-block-end: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-muted);
  }

  .page-content__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }

  .page-content__meta-item strong {
    color: var(--color-fg);
    font-weight: 600;
  }

  .page-content__meta .icon {
    width: 1rem;
    height: 1rem;
  }

  .page-content__print {
    margin-inline-start: auto;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: transparent;
    font-size: 0.8125rem;
  }

  .page-content__print:hover {
    background: var(--color-surface);
  }

  .no-js .page-content__print {
    display: none;
  }

  /* Readable long-form typography */
  .page-content__body {
    font-size: 1.0625rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
  }

  [dir='rtl'] .page-content__body {
    line-height: 1.9;
  }

  .page-content__body :is(h2, h3) {
    scroll-margin-top: calc(var(--header-offset, 0px) + 1.5rem);
    line-height: 1.25;
  }

  .page-content__body h2 {
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    margin-block-start: 2.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--color-border);
  }

  .page-content__body h2:first-child {
    margin-block-start: 0;
    padding-block-start: 0;
    border: 0;
  }

  .page-content__body h3 {
    font-size: 1.1875rem;
    margin-block-start: 1.75rem;
  }

  .page-content__body :is(ul, ol) {
    padding-inline-start: 1.25rem;
  }

  .page-content__body li + li {
    margin-block-start: 0.375rem;
  }

  .page-content__body li::marker {
    color: var(--color-accent);
  }

  .page-content__body blockquote,
  .page-content__body .callout {
    padding: 1rem 1.25rem;
    border-inline-start: 3px solid var(--color-accent);
    border-radius: var(--radius-small);
    background: var(--color-surface);
  }

  .page-content__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
  }

  .page-content__body :is(th, td) {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    text-align: start;
    vertical-align: top;
  }

  .page-content__body :target {
    animation: page-content-flash 1.6s ease;
  }

  @keyframes page-content-flash {
    20% {
      color: var(--color-accent);
    }
  }

  /* Table of contents */
  .page-toc {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
  }

  .page-toc__summary {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    list-style: none;
  }

  .page-toc__summary::-webkit-details-marker {
    display: none;
  }

  .page-toc__summary .icon {
    width: 1.125rem;
    height: 1.125rem;
  }

  .page-toc__summary .icon--chevron-down {
    margin-inline-start: auto;
    transition: transform 0.25s ease;
  }

  .page-toc[open] .icon--chevron-down {
    transform: rotate(180deg);
  }

  .page-toc__list {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0 0.5rem 0.75rem;
    position: relative;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .page-toc__link {
    display: block;
    padding: 0.4375rem 0.75rem;
    border-inline-start: 2px solid transparent;
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--color-muted);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  }

  [dir='rtl'] .page-toc__link {
    border-radius: var(--radius-small) 0 0 var(--radius-small);
  }

  .page-toc__link--sub {
    padding-inline-start: 1.5rem;
    font-size: 0.8125rem;
  }

  .page-toc__link:hover {
    color: var(--color-fg);
    background: var(--color-surface);
  }

  .page-toc__link[aria-current='true'] {
    color: var(--color-fg);
    font-weight: 600;
    border-inline-start-color: var(--color-accent);
    background: var(--color-surface);
  }

  @media screen and (max-width: 989px) {
    .page-content__aside {
      position: sticky;
      z-index: 4;
      top: calc(var(--header-offset, 0px) + 0.5rem);
    }

    .page-toc {
      box-shadow: 0 10px 30px -20px rgba(var(--color-fg-rgb), 0.5);
    }
  }

  @media screen and (min-width: 990px) {
    .page-content--toc .page-content__grid {
      grid-template-columns: 17rem minmax(0, 1fr);
      gap: 4rem;
      align-items: start;
    }

    .page-content__aside {
      position: sticky;
      top: calc(var(--header-offset, 0px) + 1.5rem);
    }

    .page-toc__summary {
      pointer-events: none;
    }

    .page-toc__summary .icon--chevron-down {
      display: none;
    }
  }

  @media print {
    body:has(.page-content) :is(.shopify-section-group-header-group, .shopify-section-group-footer-group, .whatsapp-fab, .toast),
    .page-content__aside,
    .page-content__progress,
    .page-content__print {
      display: none !important;
    }

    .page-content__body {
      font-size: 11pt;
      line-height: 1.5;
    }

    .page-content__body a[href^='http']::after {
      content: ' (' attr(href) ')';
      font-size: 0.85em;
    }
  }
/* END_SECTION:page-content */

/* START_SECTION:page-hero (INDEX:32) */
.page-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .page-hero--ribbon {
    padding-block-end: 0;
  }

  .page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .page-hero__grid-lines {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(var(--color-fg-rgb), 0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(var(--color-fg-rgb), 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 70%);
  }

  .page-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    background: #febd19;
    opacity: 0.35;
    animation: page-hero-orb 16s ease-in-out infinite alternate;
  }

  .page-hero__orb--1 {
    width: 28rem;
    height: 28rem;
    inset-block-start: -10rem;
    inset-inline-end: -6rem;
  }

  .page-hero__orb--2 {
    width: 18rem;
    height: 18rem;
    inset-block-end: -8rem;
    inset-inline-start: 20%;
    opacity: 0.18;
    animation-duration: 20s;
    animation-direction: alternate-reverse;
  }

  .page-hero__ring {
    position: absolute;
    width: 34rem;
    height: 34rem;
    inset-block-start: 50%;
    inset-inline-end: -12rem;
    margin-block-start: -17rem;
    border-radius: 50%;
    border: 2px dashed rgba(254, 189, 25, 0.45);
    animation: page-hero-spin 60s linear infinite;
  }

  @keyframes page-hero-orb {
    to {
      transform: translate(-3rem, 4rem) scale(1.15);
    }
  }

  @keyframes page-hero-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .page-hero--minimal .page-hero__ring,
  .page-hero--minimal .page-hero__orb--2 {
    display: none;
  }

  .page-hero--minimal .page-hero__orb--1 {
    opacity: 0.22;
  }

  .page-hero__grid {
    position: relative;
    display: grid;
    gap: 3rem;
    align-items: center;
  }

  .page-hero__content {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
    max-width: 50rem;
  }

  .page-hero--center .page-hero__content {
    justify-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .page-hero__breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
  }

  .page-hero__breadcrumb li + li::before {
    content: '/';
    margin-inline-end: 0.5rem;
    opacity: 0.6;
  }

  .page-hero__breadcrumb a {
    text-decoration: none;
  }

  .page-hero__breadcrumb a:hover {
    color: #febd19;
  }

  .page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(254, 189, 25, 0.5);
    background: rgba(254, 189, 25, 0.12);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  [dir='rtl'] .page-hero__eyebrow {
    letter-spacing: 0;
    font-size: 0.875rem;
  }

  .page-hero__pulse {
    position: relative;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #febd19;
  }

  .page-hero__pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: page-hero-pulse 1.8s ease-out infinite;
  }

  @keyframes page-hero-pulse {
    to {
      transform: scale(3);
      opacity: 0;
    }
  }

  .page-hero__title {
    font-size: clamp(2.5rem, 6.4vw, 5.25rem);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .page-hero__title.h2 {
    font-size: clamp(2rem, 4.4vw, 3.5rem);
  }

  [dir='rtl'] .page-hero__title {
    letter-spacing: 0;
    line-height: 1.25;
  }

  .page-hero__word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-block: 0.06em 0.12em;
    margin-block: -0.06em -0.12em;
  }

  .page-hero__word > span {
    display: inline-block;
  }

  .has-animations .page-hero__word > span {
    transform: translateY(110%);
    animation: page-hero-word 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: calc(var(--i) * 70ms + 120ms);
  }

  @keyframes page-hero-word {
    to {
      transform: none;
    }
  }

  .page-hero__word--mark > span {
    position: relative;
    color: #febd19;
  }

  .color-scheme-4 .page-hero__word--mark > span,
  .color-scheme-5 .page-hero__word--mark > span,
  .color-scheme-1 .page-hero__word--mark > span,
  .color-scheme-2 .page-hero__word--mark > span {
    color: inherit;
    background: linear-gradient(transparent 58%, #febd19 58%, #febd19 90%, transparent 90%);
  }

  .color-scheme-4 .page-hero__word--mark > span {
    background: linear-gradient(transparent 58%, #fff 58%, #fff 90%, transparent 90%);
  }

  .page-hero__subtitle {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    color: var(--color-muted);
    max-width: 38rem;
  }

  .page-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-start: 0.5rem;
  }

  .page-hero .page-hero__cta {
    --btn-bg: #febd19;
    --btn-fg: #0a0a0a;
  }

  .color-scheme-4 .page-hero__cta {
    --btn-bg: #0a0a0a;
    --btn-fg: #fff;
  }

  .page-hero__cta-arrow {
    display: inline-flex;
    transition: transform 0.25s ease;
  }

  .page-hero__cta:hover .page-hero__cta-arrow {
    transform: translateX(4px);
  }

  [dir='rtl'] .page-hero__cta:hover .page-hero__cta-arrow {
    transform: translateX(-4px);
  }

  .has-animations .page-hero__fade {
    opacity: 0;
    transform: translateY(18px);
    animation: page-hero-fade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: calc(var(--d, 0) * 160ms + 300ms);
  }

  @keyframes page-hero-fade {
    to {
      opacity: 1;
      transform: none;
    }
  }

  .page-hero__visual {
    position: relative;
    max-width: 34rem;
    width: 100%;
    margin-inline: auto;
  }

  .page-hero__block {
    position: absolute;
    inset: 1.5rem -1.25rem -1.25rem 1.5rem;
    border-radius: 2rem;
    background: #febd19;
    transform: rotate(-3deg);
  }

  [dir='rtl'] .page-hero__block {
    transform: rotate(3deg);
  }

  .page-hero__media {
    position: relative;
    aspect-ratio: 4 / 4.4;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.55);
  }

  .page-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .page-hero__visual:hover .page-hero__media img {
    transform: scale(1.05);
  }

  .page-hero__badge {
    position: absolute;
    inset-block-start: -2.25rem;
    inset-inline-start: -2.25rem;
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    background: #0a0a0a;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px rgba(254, 189, 25, 0.9);
  }

  .page-hero__badge-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: page-hero-spin 14s linear infinite;
  }

  .page-hero__badge-ring text {
    fill: currentColor;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .page-hero__badge-core {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #febd19;
    color: #0a0a0a;
  }

  .page-hero__chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.125rem;
    border-radius: 999px;
    background: #fff;
    color: #0a0a0a;
    font-weight: 700;
    font-size: 0.9375rem;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45);
    animation: page-hero-bob 5s ease-in-out infinite;
    white-space: nowrap;
  }

  .page-hero__chip .icon {
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.25rem;
    box-sizing: content-box;
    border-radius: 50%;
    background: #febd19;
  }

  .page-hero__chip--1 {
    inset-block-end: 12%;
    inset-inline-start: -1.5rem;
  }

  .page-hero__chip--2 {
    inset-block-start: 14%;
    inset-inline-end: -1.5rem;
    animation-delay: -2.5s;
  }

  @keyframes page-hero-bob {
    50% {
      transform: translateY(-10px);
    }
  }

  .page-hero__ribbon {
    position: relative;
    margin-block-start: clamp(3rem, 6vw, 5rem);
    padding-block: 1rem;
    background: #febd19;
    color: #0a0a0a;
    transform: rotate(-1.5deg) scale(1.05);
    overflow: hidden;
  }

  .color-scheme-4 .page-hero__ribbon {
    background: #0a0a0a;
    color: #febd19;
  }

  .page-hero__ribbon-track {
    display: flex;
    width: max-content;
    animation: page-hero-marquee 40s linear infinite;
  }

  [dir='rtl'] .page-hero__ribbon-track {
    animation-name: page-hero-marquee-rtl;
  }

  .page-hero__ribbon:hover .page-hero__ribbon-track {
    animation-play-state: paused;
  }

  .page-hero__ribbon-list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding-inline-end: 1.5rem;
    font-family: var(--font-heading-family);
    font-weight: var(--heading-weight);
    font-size: clamp(1.125rem, 2.2vw, 1.625rem);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .page-hero__ribbon-sep .icon {
    width: 1.25em;
    height: 1.25em;
  }

  @keyframes page-hero-marquee {
    to {
      transform: translateX(-50%);
    }
  }

  @keyframes page-hero-marquee-rtl {
    to {
      transform: translateX(50%);
    }
  }

  @media screen and (min-width: 990px) {
    .page-hero--image .page-hero__grid {
      grid-template-columns: 1.15fr 0.85fr;
      gap: 5rem;
    }

    .page-hero--image.page-hero--center .page-hero__grid {
      grid-template-columns: 1fr;
    }
  }

  @media screen and (max-width: 749px) {
    .page-hero__badge {
      width: 6.5rem;
      height: 6.5rem;
      inset-block-start: -1.5rem;
      inset-inline-start: -0.5rem;
    }

    .page-hero__chip {
      font-size: 0.8125rem;
      padding: 0.5rem 0.875rem;
    }

    .page-hero__chip--1 {
      inset-inline-start: -0.25rem;
    }

    .page-hero__chip--2 {
      inset-inline-end: -0.25rem;
    }

    .page-hero__block {
      inset-inline-end: -0.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .page-hero *,
    .page-hero *::after {
      animation: none !important;
    }

    .has-animations .page-hero__word > span,
    .has-animations .page-hero__fade {
      opacity: 1;
      transform: none;
    }
  }

  @media print {
    .page-hero__bg,
    .page-hero__buttons,
    .page-hero__breadcrumb,
    .page-hero__ribbon,
    .page-hero__badge,
    .page-hero__chip {
      display: none;
    }
  }
/* END_SECTION:page-hero */

/* START_SECTION:predictive-search (INDEX:33) */
.predictive {
    display: grid;
    gap: 0.75rem;
    padding: 0.5rem;
  }

  .predictive__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
  }

  .predictive__chip {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 0.875rem;
    text-decoration: none;
  }

  .predictive__chip mark {
    background: none;
    font-weight: 700;
    color: inherit;
  }

  .predictive__chip--collection {
    border: 1px solid var(--color-border);
    background: transparent;
  }

  .predictive__products {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .predictive__product {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 0.875rem;
    align-items: center;
    padding: 0.5rem;
    border-radius: var(--radius-small);
    text-decoration: none;
    font-size: 0.9375rem;
  }

  .predictive__product:hover,
  .predictive__product:focus {
    background: var(--color-surface);
  }

  .predictive__image {
    border-radius: var(--radius-small);
  }

  .predictive__title {
    font-weight: 500;
    line-height: 1.3;
  }

  .predictive__empty {
    padding: 1rem;
    color: var(--color-muted);
  }

  .predictive__all {
    padding: 0.5rem;
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-reviews (INDEX:34) */
.product-reviews,
  .review-form__form {
    scroll-margin-top: 5rem;
  }

  .product-reviews__grid {
    display: grid;
    gap: 2rem;
  }

  @media screen and (min-width: 990px) {
    .product-reviews__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
      gap: 4rem;
      align-items: start;
    }

    .product-reviews__aside {
      position: sticky;
      top: 6rem;
    }
  }

  .product-reviews__aside {
    display: grid;
    gap: 1.25rem;
    align-content: start;
  }

  .product-reviews__score {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .product-reviews__average {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
  }

  .product-reviews__based {
    margin-block-start: 0.25rem;
    font-size: 0.875rem;
  }

  .product-reviews__bars {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
  }

  .product-reviews__bar-row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 2rem;
    align-items: center;
    gap: 0.625rem;
  }

  .product-reviews__bar-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
  }

  .product-reviews__bar-label .icon {
    width: 0.875rem;
    height: 0.875rem;
    fill: var(--color-star);
    stroke: none;
  }

  .product-reviews__bar {
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(var(--color-fg-rgb), 0.1);
    overflow: hidden;
  }

  .product-reviews__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-star);
  }

  .product-reviews__bar-count {
    text-align: end;
  }

  .product-reviews__main {
    display: grid;
    gap: 1.5rem;
    justify-items: start;
  }

  .product-reviews__list {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .review {
    display: grid;
    gap: 0.5rem;
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--color-border);
  }

  .review:first-child {
    padding-block-start: 0;
  }

  .review:focus {
    outline: none;
  }

  .review__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
  }

  .review__verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-success);
  }

  .review__verified .icon {
    width: 1rem;
    height: 1rem;
  }

  .review__title {
    font-family: var(--font-body-family);
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
  }

  .review__body {
    overflow-wrap: anywhere;
  }

  .review__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.8125rem;
  }

  .review__author {
    font-weight: 600;
    color: var(--color-fg);
  }

  /* Write a review */
  .review-form__details > summary {
    list-style: none;
    width: fit-content;
  }

  .review-form__details > summary::-webkit-details-marker {
    display: none;
  }

  .review-form__details[open] > summary {
    display: none;
  }

  .review-form__fields,
  .review-form__form {
    display: grid;
    gap: 1rem;
  }

  .review-form__message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .review-form__message .icon {
    flex: none;
    color: var(--color-success);
  }

  .review-form__row {
    display: grid;
    gap: 1rem;
  }

  @media screen and (min-width: 750px) {
    .review-form__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }
  }

  .review-form__textarea {
    min-height: 7rem;
    resize: vertical;
  }

  .review-form__hint {
    font-size: 0.8125rem;
  }

  .review-form__submit {
    justify-self: start;
  }

  .review-form__hp {
    position: absolute;
    inset-inline-start: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* Star picker: native radios, so arrow keys, touch and screen readers just work */
  .star-picker {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .star-picker legend {
    padding: 0;
    margin-block-end: 0.375rem;
  }

  .star-picker__stars {
    display: flex;
    width: fit-content;
  }

  .star-picker__label {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    cursor: pointer;
    color: rgba(var(--color-fg-rgb), 0.25);
    transition: color 0.12s ease, transform 0.12s ease;
  }

  .star-picker__label .icon {
    width: 2rem;
    height: 2rem;
    fill: currentColor;
    stroke: none;
  }

  /* Fill every star up to the checked / hovered one, then clear the ones after it */
  .star-picker__stars:has(:checked) .star-picker__label,
  .star-picker__stars:hover .star-picker__label {
    color: var(--color-star);
  }

  .star-picker__stars:not(:hover) .star-picker__input:checked + .star-picker__label ~ .star-picker__label,
  .star-picker__stars:hover .star-picker__label:hover ~ .star-picker__label {
    color: rgba(var(--color-fg-rgb), 0.25);
  }

  .star-picker__input:focus-visible + .star-picker__label {
    outline: 2px solid var(--color-fg);
    outline-offset: -2px;
    border-radius: var(--radius-small);
  }

  .star-picker__label:active {
    transform: scale(0.9);
  }
/* END_SECTION:product-reviews */

/* START_SECTION:promo-grid (INDEX:35) */
.promo-grid__grid {
    display: grid;
    gap: 0.75rem;
  }

  @media screen and (min-width: 750px) {
    .promo-grid__grid {
      gap: 1.25rem;
    }

    .promo-grid__grid--2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .promo-grid__grid--3 {
      grid-template-columns: 1.4fr 1fr;
      grid-template-rows: repeat(2, minmax(15rem, auto));
    }

    .promo-grid__grid--3 .promo-tile {
      min-height: 0;
    }

    .promo-grid__grid--3 > :first-child {
      grid-row: span 2;
    }

    .promo-grid__grid--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .promo-tile {
    position: relative;
    display: grid;
    min-height: 22rem;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-bg);
    color: #fff;
    text-decoration: none;
    isolation: isolate;
  }

  .promo-tile__media {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .promo-tile__media img,
  .promo-tile__media svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .promo-tile:hover .promo-tile__media img {
    transform: scale(1.05);
  }

  .promo-tile__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0) 60%);
  }

  .promo-tile__content {
    align-self: end;
    display: grid;
    justify-items: start;
    gap: 0.625rem;
    padding: 1.5rem;
  }

  .promo-tile__heading {
    color: #fff;
  }

  .promo-tile__text {
    opacity: 0.88;
    max-width: 32rem;
  }

  .promo-tile .link-arrow .icon {
    transition: transform 0.25s ease;
  }

  .promo-tile:hover .link-arrow .icon {
    transform: translateX(4px);
  }

  [dir='rtl'] .promo-tile:hover .link-arrow .icon {
    transform: scaleX(-1) translateX(4px);
  }

  @media screen and (min-width: 990px) {
    .promo-tile {
      min-height: 24rem;
    }

    .promo-grid__grid--3 {
      grid-template-rows: repeat(2, minmax(17rem, auto));
    }

    .promo-tile__content {
      padding: 2.25rem;
    }
  }
/* END_SECTION:promo-grid */

/* START_SECTION:quick-links (INDEX:36) */
.quick-links__head {
    display: grid;
    gap: 0.25rem;
    margin-block-end: 1.25rem;
  }

  .quick-links__list {
    display: grid;
    grid-template-columns: repeat(var(--ql-count, 3), minmax(0, 1fr));
    gap: 0.625rem;
    margin: 0;
    padding: 0;
  }

  .quick-links--price .quick-links__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quick-links--price .quick-link {
    min-height: 6.5rem;
  }

  /* Phones: price tiles are small, the whole tile is the button, no arrow chip */
  @media screen and (max-width: 749px) {
    .quick-links--price .quick-link__arrow {
      display: none;
    }
  }

  .quick-link {
    --ql-bg: #febd19;
    --ql-fg: #0a0a0a;
    --ql-accent: #0a0a0a;
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: end;
    gap: 0.25rem;
    min-height: 7.5rem;
    padding: 1rem 1rem 1.125rem;
    border-radius: 1.375rem;
    background: var(--ql-bg);
    color: var(--ql-fg);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 10px 24px -18px rgba(0, 0, 0, 0.55);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
  }

  /* soft light sweep for depth */
  .quick-link::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto auto;
    z-index: -1;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.35), transparent);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .quick-link--black {
    --ql-bg: #0a0a0a;
    --ql-fg: #ffffff;
    --ql-accent: #febd19;
  }

  .quick-link--black::before {
    background: radial-gradient(closest-side, rgba(254, 189, 25, 0.28), transparent);
  }

  .quick-link--red {
    --ql-bg: #e5242b;
    --ql-fg: #ffffff;
    --ql-accent: #ffffff;
  }

  .quick-link--cream {
    --ql-bg: #fff4d6;
    --ql-fg: #0a0a0a;
    --ql-accent: #0a0a0a;
  }

  .quick-link--white {
    --ql-bg: #ffffff;
    --ql-fg: #0a0a0a;
    --ql-accent: #0a0a0a;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset, 0 10px 24px -18px rgba(0, 0, 0, 0.45);
  }

  .quick-link__label {
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(1.25rem, 0.95rem + 1.6vw, 2.25rem);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .quick-link__meta,
  .quick-link__pre,
  .quick-link__unit {
    font-size: 0.8125rem;
    font-weight: 600;
    opacity: 0.75;
  }

  .quick-link__big {
    font-family: var(--font-heading-family);
    font-weight: 800;
    font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
  }

  .quick-link__arrow {
    position: absolute;
    inset-block-start: 0.875rem;
    inset-inline-end: 0.875rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ql-fg) 12%, transparent);
    color: var(--ql-accent);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
  }

  .quick-link__arrow .icon {
    width: 1rem;
    height: 1rem;
  }

  [dir='rtl'] .quick-link__arrow .icon {
    transform: scaleX(-1);
  }

  .quick-link:active {
    transform: scale(0.97);
  }

  @media (hover: hover) {
    .quick-link:hover {
      transform: translateY(-4px);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 22px 40px -22px rgba(0, 0, 0, 0.6);
    }

    .quick-link:hover::before {
      transform: scale(1.25);
    }

    .quick-link:hover .quick-link__arrow {
      transform: translateX(3px);
      background: var(--ql-accent);
      color: var(--ql-bg);
    }

    [dir='rtl'] .quick-link:hover .quick-link__arrow {
      transform: translateX(-3px);
    }
  }

  .quick-link:focus-visible {
    outline: 3px solid #febd19;
    outline-offset: 3px;
  }

  @media screen and (min-width: 750px) {
    .quick-links__list {
      gap: 1rem;
    }

    .quick-link {
      min-height: 10rem;
      padding: 1.5rem;
      border-radius: 1.75rem;
    }

    .quick-links--price .quick-links__list {
      grid-template-columns: repeat(var(--ql-count, 4), minmax(0, 1fr));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-link,
    .quick-link::before,
    .quick-link__arrow {
      transition: none;
    }
  }
/* END_SECTION:quick-links */

/* START_SECTION:related-products (INDEX:37) */
/* Phones: the product section above already ends with enough space */
  @media screen and (max-width: 749px) {
    .related-products {
      --section-pt: 0px !important;
    }
  }
/* END_SECTION:related-products */

/* START_SECTION:rich-text (INDEX:38) */
.rich-text__inner {
    display: grid;
    gap: 1.25rem;
    max-width: 52rem;
  }

  .rich-text__inner--center {
    justify-items: center;
    text-align: center;
  }

  .rich-text__inner--start {
    justify-items: start;
    margin-inline-start: 0;
  }
/* END_SECTION:rich-text */

/* START_SECTION:seo-content (INDEX:39) */
/* FAQ on its own: one centred column (the two-column rule below must not apply) */
  .seo-content__grid.seo-content__grid--faq-only {
    display: block;
    max-width: 56rem;
    margin-inline: auto;
  }

  .seo-content__grid {
    display: grid;
    gap: 2.5rem;
  }

  .seo-content__about {
    display: grid;
    gap: 1rem;
    align-content: start;
  }

  .seo-content__text {
    color: var(--color-muted);
    line-height: 1.75;
  }

  .seo-content__text h3 {
    color: var(--color-fg);
    font-size: 1.0625rem;
    margin-block-start: 0.5rem;
  }

  .seo-content__faq {
    display: grid;
    gap: 0;
    align-content: start;
  }

  .seo-content__faq > h2 {
    margin-block-end: 0.75rem;
  }

  .seo-content__question {
    margin: 0;
    font-family: var(--font-body-family);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
  }

  @media screen and (min-width: 990px) {
    .seo-content__grid:not(.seo-content__grid--faq-only) {
      grid-template-columns: 1.1fr 1fr;
      gap: 5rem;
    }
  }
/* END_SECTION:seo-content */

/* START_SECTION:size-finder (INDEX:40) */
.size-finder__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin-block-start: -0.25rem;
  }

  .size-finder__tools .size-guide__open {
    margin: 0;
  }

  .size-finder__open {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-fg);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
  }

  .size-finder__open span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .size-finder__open strong {
    display: inline-grid;
    place-items: center;
    min-width: 1.75rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: #febd19;
    color: #0a0a0a;
    font-size: 0.8125rem;
    line-height: 1.5;
    text-decoration: none;
  }

  .size-finder__open u {
    font-weight: 500;
    color: var(--color-muted);
  }

  .size-finder__open:focus-visible {
    outline: 2px solid var(--color-fg);
    outline-offset: 3px;
  }

  .size-finder {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inset-inline-start: auto;
    width: min(28rem, 100vw);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--color-bg);
    color: var(--color-fg);
    box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.35);
  }

  .size-finder[open] {
    animation: size-finder-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes size-finder-in {
    from { transform: translateX(var(--sf-from, 100%)); }
    to { transform: none; }
  }

  [dir='rtl'] .size-finder {
    --sf-from: -100%;
  }

  .size-finder::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  .size-finder__panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.25rem 1.25rem 0;
  }

  .size-finder__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .size-finder__eyebrow,
  .size-finder__label,
  .size-finder__count {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  [dir='rtl'] .size-finder__eyebrow,
  [dir='rtl'] .size-finder__label {
    letter-spacing: 0;
    font-size: 0.8125rem;
  }

  .size-finder__close {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  .size-finder__close .icon {
    width: 1rem;
    height: 1rem;
  }

  .size-finder__product {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-block-start: 1rem;
    padding: 0.75rem;
    border-radius: 1rem;
    background: var(--color-surface);
  }

  .size-finder__product img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    border-radius: 0.625rem;
    background: #fff;
  }

  .size-finder__product p {
    margin: 0;
  }

  .size-finder__product-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .size-finder__product-price {
    font-size: 0.8125rem;
    color: var(--color-muted);
  }

  .size-finder__progress {
    height: 3px;
    margin-block-start: 1.25rem;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
  }

  .size-finder__progress span {
    display: block;
    height: 100%;
    background: #febd19;
    transition: width 0.35s ease;
  }

  .size-finder__count {
    margin-block-start: 0.625rem;
    font-variant-numeric: tabular-nums;
  }

  .size-finder__body {
    flex: 1;
    overflow-y: auto;
    padding-block: 0.5rem 1rem;
  }

  .size-finder__step {
    display: grid;
    gap: 1.25rem;
    animation: size-finder-step 0.3s ease;
  }

  @keyframes size-finder-step {
    from { opacity: 0; transform: translateY(6px); }
  }

  .size-finder__title {
    margin: 0.25rem 0 -0.75rem;
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  [dir='rtl'] .size-finder__title {
    text-transform: none;
    letter-spacing: 0;
  }

  .size-finder__lead,
  .size-finder__hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-muted);
  }

  .size-finder__hint {
    font-size: 0.8125rem;
  }

  .size-finder__center {
    text-align: center;
  }

  .size-finder__sex {
    display: grid;
    gap: 0.5rem;
  }

  .size-finder__segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0.25rem;
    border-radius: 999px;
    background: var(--color-surface);
  }

  .size-finder__segment button {
    padding: 0.75rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .size-finder__segment button.is-active {
    background: #0a0a0a;
    color: #fff;
  }

  .size-finder__measure {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
    align-items: center;
  }

  .size-finder__figure {
    width: 100%;
    height: 11rem;
    fill: #0a0a0a;
  }

  .size-finder__sliders {
    display: grid;
    gap: 1.25rem;
  }

  .size-finder__slider {
    display: grid;
    gap: 0.125rem;
  }

  .size-finder__value {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }

  .size-finder__value small {
    font-size: 0.875rem;
    color: var(--color-muted);
  }

  .size-finder__range {
    display: grid;
    grid-template-columns: 2.25rem 1fr 2.25rem;
    align-items: center;
    gap: 0.25rem;
  }

  .size-finder__range button {
    height: 2.75rem;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.25rem;
    cursor: pointer;
  }

  .size-finder__range input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2.75rem;
    margin: 0;
    background: transparent;
    outline: none;
    cursor: pointer;
    touch-action: pan-y;
  }

  .size-finder__range input::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to var(--sf-dir, right), #0a0a0a var(--fill, 50%), var(--color-border) var(--fill, 50%));
  }

  [dir='rtl'] .size-finder__range input {
    --sf-dir: left;
  }

  .size-finder__range input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: calc(-0.875rem + 1px);
    border: 1.5px solid #0a0a0a;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }

  .size-finder__range input::-moz-range-track {
    height: 2px;
    border-radius: 2px;
    background: var(--color-border);
  }

  .size-finder__range input::-moz-range-progress {
    height: 2px;
    background: #0a0a0a;
  }

  .size-finder__range input::-moz-range-thumb {
    width: 1.75rem;
    height: 1.75rem;
    border: 1.5px solid #0a0a0a;
    border-radius: 50%;
    background: #fff;
  }

  .size-finder__range input:focus-visible::-webkit-slider-thumb {
    outline: 3px solid #febd19;
  }

  .size-finder__estimate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.125rem;
    border-radius: 1rem;
    background: #0a0a0a;
    color: #fff;
  }

  .size-finder__estimate p {
    margin: 0;
  }

  .size-finder__estimate .size-finder__label,
  .size-finder__estimate .size-finder__hint {
    color: #a1a1aa;
  }

  .size-finder__estimate-size {
    font-size: 2.25rem;
    font-weight: 800;
    color: #febd19;
  }

  .size-finder__shape {
    display: grid;
    gap: 0.5rem;
  }

  .size-finder__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .size-finder__tile {
    display: grid;
    justify-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.25rem;
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  [dir='rtl'] .size-finder__tile {
    font-size: 0.8125rem;
    letter-spacing: 0;
  }

  .size-finder__tile svg {
    width: 2rem;
    height: 2.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .size-finder__tile.is-active {
    border-color: #0a0a0a;
    background: #fff6dd;
    box-shadow: inset 0 0 0 1px #0a0a0a;
  }

  .size-finder__result {
    justify-items: stretch;
  }

  .size-finder__ring {
    display: grid;
    place-items: center;
    width: 9.5rem;
    height: 9.5rem;
    margin: 0 auto;
    border: 2px solid #0a0a0a;
    border-radius: 50%;
    box-shadow: 0 0 0 8px #fff6dd;
  }

  .size-finder__ring span {
    font-size: 3.5rem;
    font-weight: 300;
    letter-spacing: -0.03em;
  }

  .size-finder__match {
    margin: 0;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .size-finder__sizes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-block-start: 0.5rem;
  }

  .size-finder__size {
    min-width: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
  }

  .size-finder__size.is-best {
    border-color: #febd19;
  }

  .size-finder__size.is-active {
    border-color: #0a0a0a;
    background: #0a0a0a;
    color: #fff;
  }

  .size-finder__size.is-out {
    opacity: 0.45;
    text-decoration: line-through;
  }

  .size-finder__fit {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
  }

  .size-finder__fit-head,
  .size-finder__fit-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr 4rem;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
  }

  .size-finder__fit-head {
    grid-template-columns: 4.5rem 1fr 1fr 1fr 4rem;
    color: var(--color-muted);
    text-align: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.625rem;
    font-weight: 600;
  }

  .size-finder__fit-head::after {
    content: '';
  }

  .size-finder__fit-row span {
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.6875rem;
  }

  [dir='rtl'] .size-finder__fit-row span,
  [dir='rtl'] .size-finder__fit-head {
    letter-spacing: 0;
    font-size: 0.75rem;
  }

  .size-finder__fit-row b {
    text-align: end;
    font-weight: 600;
  }

  .size-finder__track {
    position: relative;
    height: 2px;
    background: linear-gradient(to right, var(--color-border) 33%, #febd19 33% 67%, var(--color-border) 67%);
    border-radius: 2px;
  }

  .size-finder__track i {
    position: absolute;
    top: 50%;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #0a0a0a;
    transform: translate(-50%, -50%);
    transition: inset-inline-start 0.3s ease;
  }

  [dir='rtl'] .size-finder__track i {
    transform: translate(50%, -50%);
  }

  .size-finder__note {
    display: grid;
    gap: 0.375rem;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--color-surface);
  }

  .size-finder__note p:last-child {
    margin: 0;
    font-size: 0.875rem;
  }

  .size-finder__disclaimer {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-muted);
    text-align: center;
  }

  .size-finder__privacy {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding-block: 0.625rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    border-top: 1px solid var(--color-border);
  }

  .size-finder__actions {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: 0.5rem;
    padding-block: 0 max(1rem, env(safe-area-inset-bottom));
  }

  .size-finder__back,
  .size-finder__next {
    height: 3.25rem;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .size-finder__back {
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    background: none;
    color: inherit;
  }

  [dir='rtl'] .size-finder__back svg {
    transform: scaleX(-1);
  }

  .size-finder__next {
    border: 0;
    background: #0a0a0a;
    color: #febd19;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.875rem;
  }

  .size-finder__next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .size-finder button:focus-visible {
    outline: 3px solid #febd19;
    outline-offset: 2px;
  }

  html.size-finder-open {
    overflow: hidden;
  }

  .size-finder__body {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  @media screen and (max-width: 749px), screen and (max-height: 760px) {
    .size-finder__panel {
      padding: 0.75rem 1rem 0;
    }

    .size-finder__close {
      width: 2.25rem;
      height: 2.25rem;
    }

    .size-finder__product {
      margin-block-start: 0.5rem;
      padding: 0.5rem;
      gap: 0.625rem;
    }

    .size-finder__product img {
      width: 2.5rem;
      height: 2.5rem;
    }

    .size-finder__product-title {
      font-size: 0.8125rem;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .size-finder__progress {
      margin-block-start: 0.75rem;
    }

    .size-finder__count {
      margin-block-start: 0.375rem;
    }

    .size-finder__step {
      gap: 0.875rem;
    }

    .size-finder__title {
      margin-block-end: -0.5rem;
      font-size: 1.3125rem;
    }

    .size-finder__lead {
      font-size: 0.8125rem;
    }

    .size-finder__segment button {
      padding: 0.625rem;
    }

    .size-finder__measure {
      grid-template-columns: 3.25rem 1fr;
      gap: 0.75rem;
    }

    .size-finder__figure {
      height: 8.5rem;
    }

    .size-finder__sliders {
      gap: 0.5rem;
    }

    .size-finder__value {
      font-size: 1.875rem;
    }

    .size-finder__estimate {
      padding: 0.75rem 1rem;
    }

    .size-finder__estimate-size {
      font-size: 1.75rem;
    }

    .size-finder__tile {
      padding: 0.5rem 0.25rem;
    }

    .size-finder__tile svg {
      width: 1.75rem;
      height: 2rem;
    }

    .size-finder__ring {
      width: 7rem;
      height: 7rem;
      box-shadow: 0 0 0 6px #fff6dd;
    }

    .size-finder__ring span {
      font-size: 2.5rem;
    }

    .size-finder__fit {
      padding: 0.75rem;
    }

    .size-finder__fit-head {
      grid-template-columns: 3.75rem 1fr 1fr 1fr 3.25rem;
    }

    .size-finder__fit-row {
      grid-template-columns: 3.75rem 1fr 3.25rem;
    }

    .size-finder__privacy {
      padding-block: 0.5rem;
      font-size: 0.6875rem;
    }

    .size-finder__back,
    .size-finder__next {
      height: 3rem;
    }

    .size-finder__actions {
      grid-template-columns: 3rem 1fr;
    }
  }

  /* very short screens (iPhone SE): the product name is already on the page behind */
  @media screen and (max-height: 720px) {
    .size-finder__product {
      display: none;
    }
  }

  .size-finder__actions.is-first {
    grid-template-columns: 1fr;
  }

  .size-finder__actions.is-first .size-finder__back {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .size-finder[open],
    .size-finder__step,
    .size-finder__track i {
      animation: none;
      transition: none;
    }
  }
/* END_SECTION:size-finder */

/* START_SECTION:size-guide (INDEX:41) */
.size-guide__open {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-block-start: -0.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-fg);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .size-guide__open:focus-visible {
    outline: 2px solid var(--color-fg);
    outline-offset: 3px;
  }

  .size-guide {
    width: min(56rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-fg);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
  }

  .size-guide::backdrop {
    background: rgba(0, 0, 0, 0.55);
  }

  .size-guide__inner {
    display: grid;
    gap: 1.25rem;
    padding: 1.25rem;
  }

  .size-guide__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .size-guide__title {
    margin: 0;
  }

  .size-guide__close {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  .size-guide__close .icon {
    width: 1rem;
    height: 1rem;
  }

  .size-guide__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
  }

  .size-guide__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .size-guide__table th,
  .size-guide__table td {
    padding: 0.625rem 0.875rem;
    text-align: start;
    border-block-end: 1px solid var(--color-border);
  }

  .size-guide__table thead th {
    background: var(--color-surface);
    font-weight: 600;
  }

  .size-guide__table tbody tr:last-child th,
  .size-guide__table tbody tr:last-child td {
    border-block-end: 0;
  }

  .size-guide__table tbody th {
    position: sticky;
    inset-inline-start: 0;
    background: var(--color-bg);
    font-weight: 700;
  }

  .size-guide__table tr.is-selected th,
  .size-guide__table tr.is-selected td {
    background: var(--color-fg);
    color: var(--color-bg);
  }

  .size-guide__chart {
    overflow-x: auto;
  }

  .size-guide__chart img {
    display: block;
    width: 100%;
    min-width: 36rem;
    height: auto;
    border-radius: var(--radius-small);
  }

  .size-guide__subtitle {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .size-guide__measure ul {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding-inline-start: 1.125rem;
    font-size: 0.9375rem;
    color: var(--color-muted);
  }

  .size-guide__note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
  }
/* END_SECTION:size-guide */

/* START_SECTION:stats-counter (INDEX:42) */
.stats {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .stats__watermark {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    z-index: -1;
    transform: translateY(-50%);
    pointer-events: none;
    overflow: hidden;
  }

  .stats__watermark-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: stats-drift 50s linear infinite;
  }

  [dir='rtl'] .stats__watermark-track {
    animation-name: stats-drift-rtl;
  }

  .stats__watermark span {
    font-family: var(--font-heading-family);
    font-weight: 800;
    font-size: clamp(6rem, 16vw, 14rem);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 2px rgba(var(--color-fg-rgb), 0.08);
  }

  @keyframes stats-drift {
    to {
      transform: translateX(-50%);
    }
  }

  @keyframes stats-drift-rtl {
    to {
      transform: translateX(50%);
    }
  }

  .stats__inner {
    position: relative;
  }

  .stats__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
  }

  .stats__item {
    container-type: inline-size;
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 0.625rem;
    padding: 1.75rem 1rem;
    text-align: center;
    border-radius: 1.5rem;
    background: var(--color-surface);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
  }

  .stats__item:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.45);
  }

  .stats--bold .stats__item {
    background: rgba(var(--color-fg-rgb), 0.06);
    border: 1px solid rgba(var(--color-fg-rgb), 0.12);
    backdrop-filter: blur(6px);
  }

  .stats__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: #febd19;
    color: #0a0a0a;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .color-scheme-4 .stats__icon {
    background: #0a0a0a;
    color: #febd19;
  }

  .stats__item:hover .stats__icon {
    transform: rotate(-12deg) scale(1.1);
  }

  .stats__number {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.125rem;
    font-family: var(--font-heading-family);
    font-weight: 800;
    font-stretch: var(--heading-stretch);
    font-size: min(3.75rem, 17cqi);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    direction: ltr;
  }

  .stats__affix {
    font-size: 0.6em;
    color: #febd19;
  }

  .color-scheme-4 .stats__affix,
  .color-scheme-1 .stats__affix,
  .color-scheme-2 .stats__affix,
  .color-scheme-5 .stats__affix {
    color: inherit;
  }

  .stats__bar {
    width: 2.5rem;
    height: 4px;
    border-radius: 4px;
    background: #febd19;
    transform-origin: center;
  }

  .color-scheme-4 .stats__bar {
    background: #0a0a0a;
  }

  .has-animations .stats__bar {
    transform: scaleX(0);
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
  }

  .has-animations .is-revealed .stats__bar {
    transform: none;
  }

  .stats__label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
  }

  [dir='rtl'] .stats__label {
    letter-spacing: 0;
    font-size: 0.9375rem;
  }

  .stats__eyebrow {
    color: inherit;
    opacity: 0.8;
  }

  @media screen and (min-width: 750px) {
    .stats__list {
      grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
      gap: 1.25rem;
    }

    .stats__item {
      padding: 2.25rem 1.25rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .stats__watermark-track {
      animation: none;
    }
  }
/* END_SECTION:stats-counter */

/* START_SECTION:story-timeline (INDEX:43) */
scroll-progress {
    display: block;
  }

  .timeline {
    overflow: hidden;
  }

  .timeline__intro {
    margin-block-end: clamp(2.5rem, 5vw, 4rem);
  }

  .timeline__eyebrow {
    display: inline-flex;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background: #febd19;
    color: #0a0a0a;
  }

  .timeline__track {
    --progress: 1;
    --line-x: 1rem;
    position: relative;
    padding-inline-start: 3rem;
  }

  .js .timeline__track {
    --progress: 0;
  }

  .timeline__line {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--line-x);
    width: 4px;
    margin-inline-start: -2px;
    border-radius: 4px;
    background: rgba(var(--color-fg-rgb), 0.1);
  }

  .timeline__fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(#febd19, #f59e0b);
    transform-origin: top;
    transform: scaleY(var(--progress));
    box-shadow: 0 0 18px rgba(254, 189, 25, 0.6);
  }

  .timeline__list {
    display: grid;
    gap: 2rem;
    margin: 0;
  }

  .timeline__item {
    position: relative;
  }

  .timeline__dot {
    position: absolute;
    inset-inline-start: calc(var(--line-x) - 3rem);
    inset-block-start: 1.75rem;
    width: 1.5rem;
    height: 1.5rem;
    margin-inline-start: -0.75rem;
    border-radius: 50%;
    border: 4px solid var(--color-bg);
    background: rgba(var(--color-fg-rgb), 0.2);
    box-shadow: 0 0 0 2px rgba(var(--color-fg-rgb), 0.1);
    transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
  }

  .timeline__item.is-revealed .timeline__dot {
    background: #febd19;
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(254, 189, 25, 0.25);
  }

  .timeline__card {
    border-radius: 1.5rem;
    background: var(--color-surface);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
  }

  .timeline__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 50px -30px rgba(0, 0, 0, 0.5);
  }

  .timeline__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }

  .timeline__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .timeline__card:hover .timeline__media img {
    transform: scale(1.06);
  }

  .timeline__body {
    position: relative;
    display: grid;
    gap: 0.5rem;
    padding: 1.5rem 1.5rem 1.75rem;
  }

  .timeline__label {
    font-family: var(--font-heading-family);
    font-weight: 800;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-fg);
    transition: color 0.4s ease;
  }

  .timeline__card:hover .timeline__label {
    color: #febd19;
    -webkit-text-stroke-color: #febd19;
  }

  .timeline__title {
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  }

  @media screen and (min-width: 990px) {
    .timeline__track {
      --line-x: 50%;
      padding-inline-start: 0;
    }

    .timeline__list {
      gap: 0;
    }

    .timeline__item {
      width: 50%;
      padding-inline-end: 3.5rem;
    }

    .timeline__item + .timeline__item {
      margin-block-start: -4rem;
    }

    .timeline__item--alt {
      margin-inline-start: 50%;
      padding-inline: 3.5rem 0;
    }

    .timeline__dot {
      inset-inline-start: auto;
      inset-inline-end: 0;
      margin-inline: 0 -0.75rem;
    }

    .timeline__item--alt .timeline__dot {
      inset-inline: 0 auto;
      margin-inline: -0.75rem 0;
    }

    .has-animations .timeline__item[data-reveal] {
      transform: translateX(-40px);
    }

    .has-animations .timeline__item--alt[data-reveal] {
      transform: translateX(40px);
    }

    [dir='rtl'] .has-animations .timeline__item[data-reveal] {
      transform: translateX(40px);
    }

    [dir='rtl'] .has-animations .timeline__item--alt[data-reveal] {
      transform: translateX(-40px);
    }

    .has-animations .timeline__item[data-reveal].is-revealed {
      transform: none;
      transition-duration: 0.8s;
    }
  }
/* END_SECTION:story-timeline */

/* START_SECTION:testimonials (INDEX:44) */
.testimonials {
    overflow: hidden;
  }

  .testimonials__viewport {
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .testimonials__track {
    display: flex;
    width: max-content;
    animation: testimonials-scroll 55s linear infinite;
  }

  [dir='rtl'] .testimonials__track {
    animation-name: testimonials-scroll-rtl;
  }

  .testimonials__viewport:hover .testimonials__track {
    animation-play-state: paused;
  }

  @keyframes testimonials-scroll {
    to {
      transform: translateX(-50%);
    }
  }

  @keyframes testimonials-scroll-rtl {
    to {
      transform: translateX(50%);
    }
  }

  .testimonials__list {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding-block: 1.5rem;
    padding-inline-end: 1.25rem;
  }

  .testimonial {
    --mx: 50%;
    --my: 0%;
    position: relative;
    display: grid;
    align-content: start;
    gap: 1rem;
    width: min(24rem, 80vw);
    padding: 2rem 1.75rem;
    border-radius: 1.5rem;
    background: var(--color-surface);
    border: 1px solid rgba(var(--color-fg-rgb), 0.08);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease;
  }

  .testimonial::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(20rem circle at var(--mx) var(--my), rgba(254, 189, 25, 0.25), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .testimonial:hover {
    transform: translateY(-6px) rotate(-0.5deg);
    border-color: rgba(254, 189, 25, 0.6);
  }

  .testimonial:hover::before {
    opacity: 1;
  }

  .testimonial__quote-mark {
    position: absolute;
    inset-block-start: -1.5rem;
    inset-inline-end: 1rem;
    font-family: Georgia, serif;
    font-size: 8rem;
    line-height: 1;
    color: #febd19;
    opacity: 0.35;
  }

    color: #febd19;
    letter-spacing: 0.15em;
    font-size: 1.125rem;
  }

  .testimonial__text {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  .testimonial__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: auto;
    font-size: 0.9375rem;
  }

  .testimonial__avatar {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: #febd19;
    color: #0a0a0a;
    font-weight: 800;
    text-transform: uppercase;
  }

  @media (prefers-reduced-motion: reduce) {
    .testimonials__track {
      animation: none;
      width: auto;
      overflow-x: auto;
    }

    .testimonials__list[aria-hidden='true'] {
      display: none;
    }
  }
/* END_SECTION:testimonials */

/* START_SECTION:usp-bar (INDEX:45) */
.usp-bar__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 1rem;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .usp-bar__item {
    scroll-snap-align: start;
  }

  @media screen and (min-width: 990px) {
    .usp-bar__list {
      grid-auto-flow: row;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      overflow: visible;
      gap: 2rem;
    }
  }

  .usp-bar__item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
  }

  .usp-bar__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-text);
  }

  .usp-bar__icon .icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .usp-bar__title {
    font-weight: 700;
    font-size: 0.9375rem;
    line-height: 1.3;
  }

  .usp-bar__text {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin-block-start: 0.125rem;
  }
/* END_SECTION:usp-bar */

/* START_SECTION:value-cards (INDEX:46) */
.value-cards__grid {
    display: grid;
    gap: 1rem;
    margin: 0;
  }

  @media screen and (min-width: 600px) {
    .value-cards__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 990px) {
    .value-cards__grid {
      grid-template-columns: repeat(var(--vc-columns, 3), minmax(0, 1fr));
      gap: 1.25rem;
    }
  }

  .value-card {
    --mx: 50%;
    --my: 0%;
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.875rem;
    padding: 2rem 1.75rem;
    border-radius: 1.5rem;
    background: var(--color-surface);
    border: 1px solid rgba(var(--color-fg-rgb), 0.08);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  }

  .value-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(22rem circle at var(--mx) var(--my), rgba(254, 189, 25, 0.28), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .value-card::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 4px;
    background: #febd19;
    transform: scaleX(0);
    transform-origin: inline-start;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  @media (hover: hover) {
    .value-card:hover {
      transform: translateY(-8px);
      border-color: rgba(254, 189, 25, 0.6);
      box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.45);
    }

    .value-card:hover::before {
      opacity: 1;
    }

    .value-card:hover::after {
      transform: scaleX(1);
    }
  }

  .value-cards--outline .value-card {
    background: transparent;
  }

  .value-card__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.125rem;
    background: #0a0a0a;
    color: #febd19;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease, color 0.3s ease;
  }

  .color-scheme-3 .value-card__icon {
    background: #febd19;
    color: #0a0a0a;
  }

  .value-card:hover .value-card__icon {
    transform: rotate(-10deg) scale(1.1);
    background: #febd19;
    color: #0a0a0a;
  }

  .value-card__icon .icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .value-cards--steps .value-card__icon {
    width: auto;
    height: auto;
    background: none;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-fg);
    font-size: 3.5rem;
    line-height: 1;
    justify-items: start;
  }

  .value-cards--steps .value-card:hover .value-card__icon {
    background: none;
    color: #febd19;
    -webkit-text-stroke-color: #febd19;
    transform: none;
  }

  .value-card__number {
    font-family: var(--font-heading-family);
    font-weight: 800;
    font-size: 1.25rem;
  }

  .value-card__title {
    font-family: var(--font-heading-family);
    font-size: 1.25rem;
    line-height: 1.25;
  }

  .value-card__link {
    text-decoration: none;
  }

  .value-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .value-card__link:focus-visible {
    outline: none;
  }

  .value-card:has(.value-card__link:focus-visible) {
    outline: 2px solid var(--color-fg);
    outline-offset: 3px;
  }

  .value-card__media {
    margin: -2rem -1.75rem 0.25rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .value-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .value-card:hover .value-card__media img {
    transform: scale(1.06);
  }

  .value-card__text {
    font-size: 0.9375rem;
    color: var(--color-muted);
  }
/* END_SECTION:value-cards */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:bought-together (INDEX:47) */
.fbt {
    display: grid;
    gap: 0.875rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-bg);
  }

  .fbt__title {
    margin: 0;
    font-weight: 700;
    font-size: 0.9375rem;
  }

  .fbt__list {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
  }

  .fbt__item {
    display: grid;
    grid-template-columns: auto 3.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
  }

  .fbt__item.is-off .fbt__thumb,
  .fbt__item.is-off .fbt__text {
    opacity: 0.45;
  }

  .fbt__check {
    position: relative;
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    cursor: pointer;
  }

  .fbt__check input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .fbt__tick {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 1.5px solid var(--color-fg);
    border-radius: 0.375rem;
    color: transparent;
    transition: background-color 0.15s ease;
  }

  .fbt__tick .icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .fbt__check input:checked + .fbt__tick {
    background: #febd19;
    border-color: #febd19;
    color: #0a0a0a;
  }

  .fbt__check input:disabled + .fbt__tick {
    opacity: 0.7;
  }

  .fbt__check input:focus-visible + .fbt__tick {
    outline: 2px solid var(--color-fg);
    outline-offset: 2px;
  }

  .fbt__thumb {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.625rem;
    overflow: hidden;
    background: var(--color-surface);
  }

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

  .fbt__text {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
    font-size: 0.875rem;
  }

  .fbt__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
  }

  .fbt__item--main .fbt__name {
    font-weight: 600;
  }

  .fbt__price {
    font-weight: 700;
  }

  .fbt__select {
    justify-self: start;
    max-width: 100%;
    padding: 0.125rem 1.75rem 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background-color: var(--color-bg);
    color: inherit;
    font: inherit;
    font-size: 0.8125rem;
  }

  .fbt__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--color-border);
  }

  .fbt__total {
    display: grid;
    margin: 0;
    font-size: 0.8125rem;
  }

  .fbt__total strong {
    font-size: 1.0625rem;
  }

  .fbt__add {
    flex-shrink: 0;
    min-height: 2.75rem;
    padding-inline: 1.25rem;
  }
/* END_SNIPPET:bought-together */

/* START_SNIPPET:cart-items (INDEX:48) */
.cart-items {
    display: grid;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
  }

  .cart-item {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1rem;
    transition: opacity 0.2s ease;
  }

  .cart-item.is-loading {
    opacity: 0.45;
    pointer-events: none;
  }

  .cart-item__media {
    border-radius: var(--radius-small);
  }

  .cart-item__details {
    display: grid;
    gap: 0.25rem;
    align-content: start;
    font-size: 0.9375rem;
  }

  .cart-item__title {
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
  }

  .cart-item__variant,
  .cart-item__discount {
    font-size: 0.8125rem;
  }

  .cart-item__discount {
    color: var(--color-sale);
  }

  .cart-item__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-block-start: 0.5rem;
  }

  .cart-item__price {
    display: grid;
    justify-items: end;
    font-weight: 700;
  }

  .cart-item__price s {
    font-weight: 400;
    font-size: 0.8125rem;
  }

  .cart-item__remove {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.8125rem;
    color: var(--color-muted);
    text-decoration: underline;
  }

  @media screen and (min-width: 750px) {
    .cart-page .cart-item {
      grid-template-columns: 8rem 1fr;
      gap: 1.5rem;
    }
  }
/* END_SNIPPET:cart-items */

/* START_SNIPPET:facets-active (INDEX:52) */
.collection__active {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1.5rem;
  }

  .collection__active:empty {
    display: none;
  }

  .collection__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
  }

  .collection__chip .icon {
    width: 0.875rem;
    height: 0.875rem;
  }
/* END_SNIPPET:facets-active */

/* START_SNIPPET:facets (INDEX:53) */
.facets {
    padding-block-start: 0;
  }

  .facets__list {
    display: grid;
    gap: 0.25rem;
    margin: 0;
  }

  .facets__list--swatch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facets__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.375rem;
    color: var(--color-fg);
    cursor: pointer;
    font-size: 0.9375rem;
  }

  .facets__option.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .facets__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .facets__check {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 1.5px solid var(--color-border);
    border-radius: 0.375rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .facets__check .icon {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0;
    stroke-width: 3;
  }

  .facets__option input:checked + .facets__check {
    background: var(--color-fg);
    border-color: var(--color-fg);
    color: var(--color-bg);
  }

  .facets__option input:checked + .facets__check .icon {
    opacity: 1;
  }

  .facets__option input:focus-visible + span {
    outline: 2px solid var(--color-fg);
    outline-offset: 2px;
  }

  .facets__swatch {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-size: cover;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  }

  .facets__option input:checked + .facets__swatch {
    outline: 2px solid var(--color-fg);
    outline-offset: 2px;
  }

  .facets__label {
    flex: 1;
  }

  .facets__count {
    font-size: 0.8125rem;
    color: var(--color-muted);
  }

  .facets__price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .facets__footer {
    grid-template-columns: 1fr 1.4fr;
  }
/* END_SNIPPET:facets */

/* START_SNIPPET:judgeme-badge (INDEX:57) */
/* Gold stars everywhere Judge.me draws them (badges, reviews, form). */
  .jdgm-star,
  .jdgm-star.jdgm--on,
  .jdgm-star.jdgm--half,
  .jdgm-star.jdgm--off {
    color: #f5b301 !important;
  }

  .jdgm-preview-badge {
    font-size: 0.875rem;
  }

  /* Judge.me review widget (app block at the end of the product page): same side margins and
     width as the rest of the page, and a short form (no review title, no photo upload). */
  .shopify-app-block .jdgm-review-widget,
  .jdgm-widget.jdgm-review-widget {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto !important;
    padding-inline: 1rem !important;
    padding-block: 2rem 3rem;
  }

  @media screen and (min-width: 750px) {
    .shopify-app-block .jdgm-review-widget,
    .jdgm-widget.jdgm-review-widget {
      padding-inline: 2rem !important;
    }
  }

  .jdgm-rev-widg__title {
    text-align: start !important;
    font-family: var(--font-heading-family);
  }

  .jdgm-form__fieldset:has([name='review_title']),
  .jdgm-form__fieldset:has(.jdgm-picture-fieldset),
  .jdgm-picture-fieldset {
    display: none !important;
  }
/* END_SNIPPET:judgeme-badge */

/* START_SNIPPET:language-switcher (INDEX:58) */
.localization {
    display: grid;
    gap: 1rem;
  }

  .localization__toggle {
    display: inline-grid;
    place-items: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding-inline: 0.5rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-weight: 700;
    font-size: 0.875rem;
  }

  .localization .localization__toggle--name .flag {
    width: 1.25rem;
    height: 0.875rem;
  }

  .localization .flag {
    width: 1.5rem;
    height: 1rem;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  }

  .localization__toggle--name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: start;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0.375rem 0.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
  }

  .localization__toggle:hover {
    background: rgba(var(--color-fg-rgb), 0.07);
  }

  .localization__toggle--name:hover {
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .localization__group {
    display: grid;
    gap: 0.5rem;
  }

  .localization__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-muted);
  }

  .localization__label .icon {
    width: 1rem;
    height: 1rem;
  }

  .localization__pills {
    display: flex;
    gap: 0.5rem;
  }

  .localization__pill {
    flex: 1;
    padding: 0.625rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: transparent;
    font-weight: 600;
  }

  .localization__pill[aria-current='true'] {
    background: var(--color-fg);
    color: var(--color-bg);
    border-color: var(--color-fg);
  }
/* END_SNIPPET:language-switcher */

/* START_SNIPPET:product-card (INDEX:67) */
/* Hover photos only matter with a mouse: skip them on phones, and on desktop load them
     after the page has finished loading so they never compete with the first images. */
  .card__image--secondary {
    display: none;
  }

  @media (hover: hover) {
    .is-loaded .card__image--secondary {
      display: block;
    }
  }

  html:not(.is-loaded) .card:hover .card__media .card__image:not(.card__image--secondary) {
    opacity: 1;
  }

  /* The open panel fills the image area so it is never clipped by the card media. */
  .card__quick-add:has(.quick-add__panel:not([hidden])) {
    inset: 0.5rem;
    opacity: 1;
    translate: none;
  }

  .quick-add__panel {
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    align-content: end;
    padding: 0.75rem;
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-fg);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.35);
    display: grid;
    gap: 0.625rem;
    animation: pop-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: bottom center;
  }

  .quick-add__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
  }

  .quick-add__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  .quick-add__option {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .quick-add__option:hover {
    background: var(--color-fg);
    color: var(--color-bg);
  }

  @keyframes pop-in {
    from {
      opacity: 0;
      transform: scale(0.92);
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:search-form (INDEX:71) */
.search-form {
    position: relative;
    display: block;
  }

  .search-form__form {
    position: relative;
    display: flex;
    align-items: center;
  }

  .search-form__form > .icon {
    position: absolute;
    inset-inline-start: 1rem;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-muted);
    pointer-events: none;
  }

  .search-form__input {
    width: 100%;
    height: 2.75rem;
    padding-inline: 2.75rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--color-surface);
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .search-form__input:focus {
    outline: none;
    border-color: var(--color-fg);
    background: var(--color-bg);
  }

  .search-form__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  .search-form__results {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 0.5rem);
    z-index: 40;
    max-height: min(70vh, 34rem);
    overflow-y: auto;
    padding: 0.5rem;
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.3);
  }

  @media screen and (min-width: 990px) {
    .search-form__results {
      inset-inline: auto 0;
      width: min(34rem, 90vw);
    }
  }
/* END_SNIPPET:search-form */

/* START_SNIPPET:shipping-progress (INDEX:72) */
.shipping-progress {
    display: grid;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.875rem;
  }

  .shipping-progress__text {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .shipping-progress__text .icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-success);
  }

  .shipping-progress__bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(var(--color-fg-rgb), 0.1);
    overflow: hidden;
  }

  .shipping-progress__bar span {
    display: block;
    width: var(--progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-fg), var(--color-accent));
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .shipping-progress__note {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-muted);
  }
/* END_SNIPPET:shipping-progress */