@charset "UTF-8";

@font-face {
  font-family: IRANSans;
  font-display: swap;
  font-style: normal;
  font-weight: 200;
  src:
    url('../fonts/IRANSans/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'),
    url('../fonts/IRANSans/IRANSansWeb(FaNum)_UltraLight.woff') format('woff');
}

@font-face {
  font-family: IRANSans;
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src:
    url('../fonts/IRANSans/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),
    url('../fonts/IRANSans/IRANSansWeb(FaNum)_Light.woff') format('woff');
}

@font-face {
  font-family: IRANSans;
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src:
    url('../fonts/IRANSans/IRANSansWeb(FaNum).woff2') format('woff2'),
    url('../fonts/IRANSans/IRANSansWeb(FaNum).woff') format('woff');
}

@font-face {
  font-family: IRANSans;
  font-display: swap;
  font-style: normal;
  font-weight: 500;
  src:
    url('../fonts/IRANSans/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'),
    url('../fonts/IRANSans/IRANSansWeb(FaNum)_Medium.woff') format('woff');
}

@font-face {
  font-family: IRANSans;
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src:
    url('../fonts/IRANSans/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'),
    url('../fonts/IRANSans/IRANSansWeb(FaNum)_Bold.woff') format('woff');
}

@font-face {
  font-family: IRANSans;
  font-display: swap;
  font-style: normal;
  font-weight: 900;
  src:
    url('../fonts/IRANSans/IRANSansWeb(FaNum)_Black.woff2') format('woff2'),
    url('../fonts/IRANSans/IRANSansWeb(FaNum)_Black.woff') format('woff');
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :root {
    interpolate-size: allow-keywords;
  }

  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scrollbar-gutter: stable;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

  :target {
    scroll-margin: 20vb;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
    padding: 0;
  }

  ul,
  ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  fieldset {
    margin: 0;
    padding: 0;
    border: 0;
  }

  dialog {
    margin: 0;
    padding: 0;
    border: 0;
    max-width: none;
    max-height: none;
  }

  body {
    min-block-size: 100svh;
    line-height: 1.6;
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
  }

  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
    line-height: 1.3;
  }

  p,
  li {
    text-wrap: pretty;
  }

  img,
  picture {
    max-inline-size: 100%;
    display: block;
  }

  input,
  button,
  textarea,
  select,
  option {
    font: inherit;
  }

  button,
  select {
    font-weight: 500;
  }

  button {
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
  }
}

@layer base {
  :root {
    --clr-white: hsl(0, 0%, 100%);
    --clr-black: hsl(0, 0%, 0%);
    --clr-gray-100: hsl(0, 0%, 98%);
    --clr-gray-200: hsl(210, 6%, 93%);
    --clr-gray-300: hsl(210, 4%, 89%);
    --clr-gray-400: hsl(210, 4%, 78%);
    --clr-gray-500: hsl(210, 2%, 59%);
    --clr-gray-800: hsl(228, 5%, 19%);
    --clr-gray-900: hsl(0, 0%, 12%);
    --clr-brand-500: hsl(212, 70%, 40%);
    --clr-brand-600: hsl(211, 70%, 40%);
    --clr-accent-400: hsl(322, 79%, 53%);
    --clr-accent-500: hsl(319, 80%, 43%);
    --clr-accent-600: hsl(322, 71%, 45%);
    --clr-purple-500: hsl(272, 44%, 49%);
    --clr-orange-400: hsl(27, 74%, 53%);
    --clr-orange-500: hsl(23, 83%, 49%);
    --clr-yellow-400: hsl(51, 100%, 50%);
    --clr-yellow-500: hsl(46, 98%, 53%);
    --clr-yellow-600: hsl(44, 100%, 52%);
    --clr-green-500: hsl(151, 39%, 52%);
    --clr-red-500: hsl(0, 70%, 50%);
    --clr-red-600: hsl(0, 68%, 50%);
    --clr-pink-500: hsl(343, 97%, 54%);

    --ff-body: IRANSans, Tahoma, sans-serif;

    --fs-100: 0.625rem;
    --fs-200: 0.75rem;
    --fs-300: 0.875rem;
    --fs-400: 1rem;
    --fs-500: 1.125rem;
    --fs-600: 1.25rem;
    --fs-700: 1.5rem;
    --fs-800: 1.875rem;
    --fs-900: 2.25rem;
  }

  :root {
    --text-main: var(--clr-gray-800);
    --text-heading: var(--clr-black);
    --text-high-contrast: var(--clr-white);
    --text-brand-primary: var(--clr-brand-500);
    --text-brand-secondary: var(--clr-accent-500);
    --text-muted: var(--clr-gray-500);

    --background-page: var(--clr-white);
    --background-soft: var(--clr-gray-100);
    --background-muted: var(--clr-gray-200);
    --background-button: var(--clr-gray-300);
    --background-surface: var(--clr-white);
    --background-inverse: var(--clr-gray-800);

    --background-brand-primary: var(--clr-brand-500);
    --background-brand-secondary: var(--clr-accent-500);
    --background-success: var(--clr-green-500);
    --background-danger: var(--clr-red-500);
    --background-warning: var(--clr-yellow-500);
    --background-discount: var(--clr-pink-500);

    --border-default: var(--clr-gray-300);

    --gradient-brand-vertical: linear-gradient(-180deg, #7f45b3, #e62aa1);
    --gradient-brand-alt: linear-gradient(to right, #c22186, #1f63ae);
    --gradient-brand-alt-soft: linear-gradient(to right, hsl(322 71% 45% / 0.05), hsl(212 70% 40% / 0.05));
    --gradient-brand-horizontal: linear-gradient(to left, #7f45b3, #e62aa1);

    --font-size-2xs: var(--fs-100);
    --font-size-xs: var(--fs-200);
    --font-size-sm: var(--fs-300);
    --font-size-md: var(--fs-400);
    --font-size-lg: var(--fs-500);
    --font-size-xl: var(--fs-600);
    --font-size-2xl: var(--fs-700);
    --font-size-3xl: var(--fs-800);
    --font-size-4xl: var(--fs-900);

    --font-size-text: var(--font-size-xs);

    --border-radius-1: 0.125rem;
    --border-radius-2: 0.25rem;
    --border-radius-3: 0.5rem;
    --border-radius-4: 5px;
    --border-radius-5: 10px;

    --box-shadow-1: 0 1px 3px hsla(0, 0%, 0%, 25%);
    --box-shadow-2: 0 4px 10px rgba(0, 0, 0, 0.1);
    --box-shadow-3: 0 2px 8px hsla(0, 0%, 0%, 12%), 0 8px 24px rgba(0, 0, 0, 0.12), 0 16px 40px rgba(0, 0, 0, 0.16);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);

    --selection-bg: #ffec8f;
    --selection-text: var(--clr-black);
  }

  @media (min-width: 48rem) {
    :root {
      --font-size-48-2xs: var(--fs-100);
      --font-size-48-xs: var(--fs-200);
      --font-size-48-sm: var(--fs-300);
      --font-size-48-md: var(--fs-400);
      --font-size-48-lg: var(--fs-500);
      --font-size-48-xl: var(--fs-600);
      --font-size-48-2xl: var(--fs-700);
      --font-size-48-3xl: var(--fs-800);
      --font-size-48-4xl: var(--fs-900);

      --font-size-text: var(--font-size-sm);
    }
  }

  @media (min-width: 75rem) {
    :root {
      --font-size-68-2xs: var(--fs-100);
      --font-size-68-xs: var(--fs-200);
      --font-size-68-sm: var(--fs-300);
      --font-size-68-md: var(--fs-400);
      --font-size-68-lg: var(--fs-500);
      --font-size-68-xl: var(--fs-600);
      --font-size-68-2xl: var(--fs-700);
      --font-size-68-3xl: var(--fs-800);
      --font-size-68-4xl: var(--fs-900);
    }
  }

  html {
    font-family: var(--ff-body);
    line-height: 1.6;
  }

  body {
    background-color: var(--background-page);
    font-size: var(--font-size-text);
    font-weight: 400;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--text-heading);
    font-weight: 700;
  }

  a {
    color: var(--text-main);
    text-decoration: none;
  }

  a:hover,
  a:focus-visible {
    color: var(--text-brand-primary);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
  }

  ::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
  }

  ::-moz-selection {
    background: var(--selection-bg);
    color: var(--selection-text);
  }

  dialog {
    --dialog-shift: -100%;
    opacity: 0;
    transform: translateY(var(--dialog-shift));
    transition:
      opacity 0.3s var(--ease-out-cubic),
      transform 0.3s var(--ease-out-cubic),
      display 0.3s,
      overlay 0.3s;
    transition-behavior: allow-discrete;
  }

  dialog[open] {
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    dialog[open] {
      opacity: 0;
      transform: translateY(var(--dialog-shift));
    }
  }

  dialog::backdrop {
    opacity: 0;
    transition:
      opacity 0.3s var(--ease-out-cubic),
      display 0.3s,
      overlay 0.3s;
    transition-behavior: allow-discrete;
  }

  dialog[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    dialog[open]::backdrop {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    dialog,
    dialog::backdrop {
      transition: none;
    }

    dialog {
      transform: none;
    }
  }
}

@layer layout {
  html.scroll-locked {
    overflow: hidden;
  }

  .base-header {
    position: relative;
    background-color: var(--background-page);
    box-shadow: var(--box-shadow-1);
    padding-block: 0.75rem;
  }

  @media (min-width: 48rem) {
    .base-header {
      padding-block: 1.25rem;
    }
  }

  @media (min-width: 75rem) {
    .base-header {
      padding-block: 1.5rem;
    }
  }

  .base-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .base-header__inner .header-back {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  @media (min-width: 75rem) {
    .base-header__inner .header-back {
      display: none;
    }
  }

  .base-header__inner .logo-link {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .auth-main {
    padding-inline: 1.25rem;
    padding-block: 2rem;
  }

  @media (min-width: 48rem) {
    .auth-main {
      padding: 2.5rem;
    }
  }

  .base-canvas {
    background-color: var(--background-soft);
    flex-grow: 1;
    background-image: url('../img/symbolMobile.svg');
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: auto 3rem;
    padding-block-start: 1.5rem;
    padding-block-end: 1.5rem;
  }

  @media (min-width: 48rem) {
    .base-canvas {
      background-image: url('../img/symbolMobile.svg');
      padding-block-start: 2.5rem;
    }
  }

  @media (min-width: 75rem) {
    .base-canvas {
      background-image: url('../img/symbolDesktop.svg');
      background-repeat: no-repeat;
      background-position: left 2rem;
      background-size: 10rem 100%;
      padding-block-start: 3.75rem;
      padding-block-end: 1.5rem;
    }
  }

  .login-breadcrumb-slot {
    display: none;
    margin-block-end: 2rem;
    margin-inline-start: 1.25rem;
  }

  @media (min-width: 75rem) {
    .login-breadcrumb-slot {
      display: block;
    }
  }

  .site-header {
    background-color: var(--background-muted);
  }

  .site-header__nav-bar {
    position: relative;
    background-color: var(--background-page);
    padding-block: 1rem;
    box-shadow: var(--box-shadow-1);
    z-index: 60;
  }

  .site-header__nav-bar.is-stuck {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
  }

  @media (min-width: 75rem) {
    .site-header__nav-bar {
      background-color: transparent;
      box-shadow: none;
      padding-block: 0;
      z-index: 10;
    }
  }

  .site-header__primary {
    position: relative;
    background-color: var(--background-page);
    padding-block: 0.5rem;
  }

  .site-header__primary.is-stuck {
    position: fixed;
    inset-block-start: var(--site-header-stuck-offset, 0px);
    inset-inline: 0;
    z-index: 50;
  }

  @media (min-width: 75rem) {
    .site-header__primary {
      padding-block: 1rem;
      box-shadow: var(--box-shadow-1);
    }
  }

  @media (max-width: 74.99rem) {
    .html-plp-layout .site-header__nav-bar,
    .html-plp-layout .site-header__primary,
    .html-pdp-layout .site-header__nav-bar,
    .html-pdp-layout .site-header__primary,
    .html-cart-layout .site-header,
    .html-checkout-layout .base-header {
      display: none;
    }
  }

  .html-cart-layout body,
  .html-checkout-layout body,
  .html-profile-layout body {
    background-color: hsl(210 6% 93% / 33%);
  }

  .cart {
    padding-block: 0.5rem;
  }

  @media (min-width: 48rem) {
    .cart {
      padding-block: 1.25rem;
    }
  }

  @media (min-width: 75rem) {
    .cart {
      padding-block: 0;
    }

    .cart__empty {
      margin-block-start: 2rem;
    }
  }

  @media (max-width: 74.99rem) {
    .cart__title {
      display: none;
    }
  }

  .cart__grid {
    display: grid;
    gap: 1rem;
  }

  @media (min-width: 48rem) {
    .cart__grid {
      gap: 2rem;
      grid-template-columns: 1fr minmax(20rem, 22rem);
      align-items: start;
    }

    .cart__tabs--mobile {
      grid-column: 1 / -1;
      grid-row: 1;
    }

    .cart__items {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .cart__boxes {
      grid-column: 1;
      grid-row: 3;
    }

    .cart__summary {
      grid-column: 2;
      grid-row: 3;
    }
  }

  @media (min-width: 75rem) {
    .cart__grid {
      gap: 1.5rem;
      grid-template-columns: 1fr minmax(20rem, 22rem);
    }

    .cart__items {
      grid-column: 1;
    }

    .cart__items,
    .cart__boxes {
      grid-row: auto;
    }

    .cart__summary {
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: start;
      position: sticky;
      inset-block-start: calc(var(--site-header-stuck-height, 0px) + 1rem);
      will-change: transform;
    }
  }

  @media (min-width: 48rem) and (max-width: 74.99rem) {
    .html-checkout-layout .cart__grid {
      grid-template-columns: 1fr;
    }

    .html-checkout-layout .cart__items,
    .html-checkout-layout .cart__summary {
      grid-column: auto;
      grid-row: auto;
    }

    .html-checkout-layout .cart__summary {
      max-inline-size: 22rem;
    }
  }

  @media (min-width: 75rem) {
    .cart__tabs--mobile {
      display: none;
    }
  }

  .cart__items {
    box-shadow: var(--box-shadow-2);
  }

  .cart__items--header {
    display: none;
    border-block-end: 1px solid var(--clr-gray-400);
  }

  .cart__items--header > * {
    flex: 1;
  }

  @media (min-width: 75rem) {
    .cart__items--header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-inline: 2rem;
    }
  }

  .html-checkout-layout .cart__items--header {
    display: block;
    padding: 1.25rem;
  }

  @media (min-width: 48rem) {
    .html-checkout-layout .cart__items--header {
      padding: 2rem;
    }
  }

  .cart__items-panel[hidden] {
    display: none;
  }

  .cart__items--body {
    padding: 1.25rem;
  }

  @media (min-width: 48rem) {
    .cart__items--body {
      padding: 2rem;
    }
  }

  @media (min-width: 75rem) {
    .cart__items--body {
      padding-block-end: 2.5rem;
    }
  }

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

  .cart__list-item {
    display: grid;
    gap: 1rem;
    padding-block-end: 2rem;
    border-block-end: 1px solid var(--clr-gray-200);
  }

  .cart__list-item:not(:first-child) {
    padding-block-start: 1.25rem;
  }

  .cart__list-item--unavailable {
    padding: 1.25rem;
    background-image: linear-gradient(to left, hsl(0 70% 50% / 10%), hsl(0 0% 100% / 10%));
  }

  .cart__list-item--unavailable .cart__list-item-image {
    opacity: 0.7;
  }

  .cart__list-item-cautions {
    display: grid;
    gap: 0.25rem;
  }

  .cart__list-item-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .cart__list-item-remove img {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .cart__list-item.is-loading .cart__list-item-remove {
    pointer-events: none;
  }

  .cart__list-item:last-child {
    padding-block-end: 0;
    border-block-end: none;
  }

  @media (min-width: 48rem) {
    .cart__list {
      gap: 2rem;
    }

    .cart__list-item {
      gap: 2rem;
      padding: 2rem;
      border: 1px solid var(--clr-gray-400);
    }

    .cart__list-item:not(:first-child) {
      padding-block-start: 2rem;
    }

    .cart__list-item:last-child {
      padding-block-end: 2rem;
      border-block-end: 1px solid var(--clr-gray-400);
    }
  }

  .cart__list-item-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  @media (min-width: 48rem) {
    .cart__list-item-main {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding-block-end: 2rem;
      border-block-end: 1px solid var(--clr-gray-200);
    }
  }

  .error-layout {
    display: grid;
    align-content: center;
    padding-block: 2.5rem;
  }
}

.cart__list-item-product {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .cart__list-item-product {
    align-items: center;
  }
}

.cart__list-item-image {
  inline-size: 70px;
  block-size: 70px;
  object-fit: cover;
}

@media (min-width: 48rem) {
  .cart__list-item-image {
    inline-size: 100px;
    block-size: 100px;
  }
}

.cart__list-item-info {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .cart__list-item-info {
    gap: 1.25rem;
  }
}

.cart__list-item-name {
  text-wrap: pretty;
}

.cart__list-item-buy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}

@media (min-width: 48rem) {
  .cart__list-item-buy {
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-grow: 1;
  }
}

.cart__list-item-price {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

@media (min-width: 48rem) {
  .cart__list-item-price {
    align-items: flex-end;
    inline-size: 100%;
  }
}

.cart__list-item-qty {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 4px;
  min-inline-size: 7.5rem;
  max-inline-size: 7.5rem;
  background-color: var(--clr-gray-200);
  border-radius: 45px;
}

.cart__list-item-qty-value {
  text-align: center;
}

.cart__list-item-qty-increase,
.cart__list-item-qty-decrease {
  display: grid;
  place-items: center;
  padding: 0.375rem;
  background-color: var(--background-surface);
  border-radius: 50%;
}

.cart__list-item-qty-increase svg,
.cart__list-item-qty-decrease svg {
  inline-size: 18px;
  block-size: 18px;
}

.cart__list-item-qty-decrease-minus {
  display: none;
}

.cart__list-item-qty-decrease--minus .cart__list-item-qty-decrease-trash {
  display: none;
}

.cart__list-item-qty-decrease--minus .cart__list-item-qty-decrease-minus {
  display: block;
}

.cart__list-item-qty-spinner {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 20px;
  block-size: 20px;
  translate: 50% -50%;
  border: 2px solid hsl(212 70% 40% / 20%);
  border-block-start-color: var(--clr-brand-500);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  animation: cart-quantity-spinner 0.3s linear infinite;
}

.cart__list-item.is-loading .cart__list-item-qty > :not(.cart__list-item-qty-spinner) {
  opacity: 0.25;
}

.cart__list-item.is-loading .cart__list-item-qty,
.cart__list-item.is-loading .cart__list-item-qty-increase,
.cart__list-item.is-loading .cart__list-item-qty-decrease {
  cursor: not-allowed;
}

.cart__list-item.is-loading .cart__list-item-qty-spinner {
  opacity: 1;
}

@keyframes cart-quantity-spinner {
  to {
    transform: rotate(360deg);
  }
}

.cart__list-item-next {
  justify-self: end;
  text-decoration: underline;
}

@media (min-width: 48rem) {
  .cart__list-item-qty {
    padding-block: 4px;
    padding-inline: 8px;
    inline-size: 100%;
    min-inline-size: 10.75rem;
    max-inline-size: 10.75rem;
  }

  .cart__list-item-qty-increase svg,
  .cart__list-item-qty-decrease svg {
    inline-size: 24px;
    block-size: 24px;
  }
}

.cart__list-item-attrs {
  display: grid;
  gap: 0.125rem;
}

.cart__list-item-attr {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.cart__list-item-attr dt {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.cart__boxes {
  display: grid;
  gap: 1rem;
}

.cart__sticky-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.75rem;
  padding-inline: 0.75rem;
  background-color: var(--clr-white);
  border-block-start: 1px solid var(--clr-gray-400);
}

@media (min-width: 75rem) {
  .cart__sticky-bar {
    display: none;
  }
}

.cart__suggested {
  margin-block-start: 1.25rem;
}

@media (min-width: 48rem) {
  .cart__suggested {
    margin-block-start: 3.75rem;
  }
}

.cart__suggested-head {
  display: grid;
  gap: 1.25rem;
}

.cart__suggested-items {
  --track-auto-columns: 10rem;
  --track-gap: 0;
  position: relative;
  z-index: 20;
  min-inline-size: 0;
  inline-size: 100%;
}

.cart__suggested-items:focus-visible {
  outline: 1px solid var(--text-brand-primary);
  outline-offset: 2px;
}

.cart__suggested-items.is-dragging,
.cart__suggested-items.is-dragging * {
  user-select: none;
}

.cart__suggested-items > :last-child {
  margin-inline-end: 0.75rem;
}

.cart__suggested-item {
  position: relative;
  display: grid;
  inline-size: var(--track-auto-columns);
  max-inline-size: var(--track-auto-columns);
}

.cart__suggested-item a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
}

@media (min-width: 48rem) {
  .cart__suggested-items {
    --track-auto-columns: 11.25rem;
    --track-gap: 0.75rem;
  }

  .cart__suggested-items > :last-child {
    margin-inline-end: 1.25rem;
  }
}

@media (min-width: 75rem) {
  .cart__suggested-items {
    padding-block-end: 0.75rem;
  }

  .cart__suggested-items > :last-child {
    margin-inline-end: 0;
  }
}

.cart__suggested-progress {
  margin-block-start: 0.625rem;
}

@media (min-width: 48rem) {
  .cart__suggested-progress {
    margin-block-start: 1.25rem;
  }
}

.cart__suggested-nav-inner {
  display: flex;
  justify-content: flex-end;
  gap: 1.25rem;
  margin-block-start: 1.25rem;
}

.cart__summary-body {
  background-color: var(--background-surface);
}

.cart__summary-head {
  padding-block: 2rem;
  padding-inline-start: 1.25rem;
}

.cart__summary-content {
  margin-inline: 1.25rem;
  padding-block-end: 1.25rem;
}

@media (min-width: 48rem) {
  .cart__summary-content {
    margin-inline: 2rem;
    padding-block-end: 2rem;
  }
}

.cart__summary-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding-block-end: 1.25rem;
}

.cart__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

@media (min-width: 48rem) {
  .cart__summary-list {
    gap: 1.25rem;
    padding-block-end: 2rem;
  }
}

.cart__summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--clr-gray-300);
}

@media (min-width: 48rem) {
  .cart__summary-total {
    padding-block-start: 2rem;
  }
}

.cart__summary-submit {
  display: none;
  padding-block-start: 1.25rem;
}

@media (min-width: 75rem) {
  .cart__summary-submit {
    display: block;
    padding-block-start: 2rem;
  }
}

.cart__empty {
  display: grid;
  gap: 3rem;
}

.cart__empty-card {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 3rem 2rem;
  text-align: center;
  background-color: var(--background-surface);
  border-radius: var(--border-radius-2);
  box-shadow: var(--box-shadow-2);
}

.cart__empty-media {
  inline-size: min(100%, 20rem);
}

.cart__empty-image {
  inline-size: 100%;
  block-size: auto;
}

.cart__empty-content {
  display: grid;
  gap: 1rem;
}

.cart__empty-title {
  font-size: var(--fs-500);
  font-weight: 700;
  color: var(--text-main);
}

.cart__panel-empty {
  display: grid;
  place-items: center;
  padding-block: 3rem;
  text-align: center;
}

#cart-panel-next:has(.cart__list) > .cart__panel-empty {
  display: none;
}

.cart__sticky-bar--empty {
  justify-content: center;
}

.cart__summary-currency {
  margin-inline-start: 0.25rem;
}

.cart__summary-empty {
  display: none;
}

.cart__summary--empty .cart__summary-list,
.cart__summary--empty .cart__summary-total,
.cart__summary--empty .cart__summary-submit {
  display: none;
}

.cart__summary--empty .cart__summary-empty {
  display: block;
  padding-block: 2rem;
  padding-inline: 1.25rem;
  text-align: center;
}

[data-next-order] .cart__list-item-main {
  padding-block-end: 0;
  border-block-end: 0;
}

[data-next-order] .cart__next-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-end;
}

@media (min-width: 48rem) {
  [data-next-order] .cart__list-item-buy {
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
  }
}

.cart__list-item-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cart__list-item-add,
.cart__list-item-remove {
  cursor: pointer;
  text-decoration: underline;
}

.cart__next-remove {
  display: grid;
  place-items: center;
  padding: 0.25rem;
  border: 1px solid var(--clr-red-500);
  border-radius: 50%;
  background: transparent;
  color: var(--clr-red-500);
  cursor: pointer;
}

.cart__next-remove:hover {
  border-color: var(--clr-red-500);
  color: var(--clr-red-500);
}

.cart__next-remove-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  fill: currentColor;
}

.cart-clear-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  justify-self: end;
  text-decoration: none;
  white-space: nowrap;
}

.cart-clear-link[hidden] {
  display: none;
}

.cart-clear-link:hover,
.cart-clear-link:focus-visible {
  text-decoration: underline;
}

.cart-clear-link.is-loading {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.cart__tabs {
  display: flex;
  gap: 0;
}

.cart__tabs-item {
  display: flex;
  flex: 1;
}

.cart__tabs-link {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-block: 0.75rem;
  padding-inline: 1.25rem;
  text-decoration: none;
}

.cart__tabs-link::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1px;
  background-color: var(--clr-gray-400);
}

.cart__tabs-link[aria-selected='true']::after {
  block-size: 3px;
  background-image: linear-gradient(to right, #9866c4, #eb57b5);
}

@media (min-width: 48rem) {
  .cart__tabs {
    max-width: 20rem;
    margin-inline: auto;
  }

  .cart__tabs-link {
    padding-block: 1.25rem;
  }
}

@media (min-width: 75rem) {
  .cart__tabs {
    margin-inline: 0;
  }

  .cart__tabs-link {
    padding-block: 2rem;
  }

  .cart__tabs-link:not([aria-selected='true'])::after {
    display: none;
  }
}

.address {
  display: grid;
  gap: 1rem;
}

.address__list {
  display: grid;
  gap: 1.5rem;
}

.address > .address__add-button {
  justify-self: end;
}

.address__list[hidden],
.address__empty[hidden],
.address__add-button[hidden] {
  display: none;
}

.address__add-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--gradient-brand-alt-soft);
  border-radius: var(--border-radius-4);
  transition: background-color 0.2s ease;
}

.address__add-button:hover,
.address__add-button:focus-visible {
  background: linear-gradient(to right, hsl(322 71% 45% / 0.1), hsl(212 70% 40% / 0.1), hsl(322 71% 45% / 0.1));
}

.address__add-button:focus-visible {
  outline: 2px solid var(--clr-brand-500);
  outline-offset: 2px;
}

.address__add-button-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.address__empty {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

.address__empty-media {
  inline-size: min(100%, 20rem);
}

.address__empty-image {
  inline-size: 100%;
  block-size: auto;
}

.address__empty .address__add-button::after {
  position: absolute;
  content: '';
  inset: 0;
}

.address__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--clr-gray-400);
  background-color: var(--background-surface);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.address__item.js-address-item--selected {
  border-color: var(--clr-brand-500);
  background: var(--gradient-brand-alt-soft);
}

.address__item[data-is-valid='false'] {
  border-color: hsl(0 72% 88%);
  background: linear-gradient(135deg, hsl(0 100% 98%) 0%, hsl(330 100% 97%) 100%);
}

.address__item[data-is-valid='false'] .address__item-warning {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.375rem;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border-radius: 0.375rem;
  background: linear-gradient(90deg, hsl(0 100% 94% / 0.9) 0%, hsl(330 100% 94% / 0.9) 100%);
}

.address__item-warning-icon {
  flex-shrink: 0;
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.address__item-content {
  display: grid;
  gap: 1rem;
}

.address__item-content > .address__item-address,
.address__item-content > .address__item-warning,
.address__item-content > .address__item-meta,
.address__item-content > .address-item-map {
  z-index: 2;
}

.address__item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.address__item-head-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.address__item-heading {
  flex: 1;
}

.address__item-badge {
  display: none;
  flex-shrink: 0;
}

.address__item.js-address-item--selected .address__item-badge {
  display: block;
}

.address__item-title {
  display: block;
}

.address__item.js-address-item--selected .address__item-title {
  color: var(--clr-brand-500);
}

.address__item-title::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.address__item-title:focus-visible {
  outline: 2px solid var(--clr-brand-500);
  outline-offset: 2px;
}

.address__item-actions {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.address__item-action {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.address__item-action:hover,
.address__item-action:focus-visible {
  text-decoration: underline;
}

.address__item-action-icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.address__item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.address__item-meta-item {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.address__item-meta-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

@media (min-width: 48rem) {
  .address__item {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.shipping-method__list {
  display: grid;
  gap: 1.5rem;
}

.shipping-method__item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--clr-gray-400);
  background-color: var(--background-surface);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.shipping-method__item--selected {
  border-color: var(--clr-brand-500);
  background: var(--gradient-brand-alt-soft);
}

.shipping-method__item--upcoming {
  cursor: default;
  opacity: 0.55;
}

.shipping-method__item-inner {
  display: grid;
  gap: 1rem;
}

.shipping-method__item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.shipping-method__item-row--upcoming {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.shipping-method__item-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.shipping-method__radio-wrap {
  display: grid;
  place-items: center;
  padding: 3px;
  border: 1px solid var(--clr-gray-400);
  border-radius: 50%;
}

.shipping-method__radio {
  appearance: none;
  margin: 0;
  width: 1.125rem;
  height: 1.125rem;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
}

.shipping-method__radio:checked {
  background-color: var(--clr-brand-500);
}

.shipping-method__radio:focus-visible {
  outline: 2px solid var(--clr-brand-500);
  outline-offset: 2px;
}

.shipping-method__divider {
  flex-shrink: 0;
  width: 1px;
  height: 4.5rem;
  background-color: var(--clr-gray-400);
}

.shipping-method__label {
  cursor: pointer;
}

.shipping-method__item--selected .shipping-method__label {
  color: var(--clr-brand-500);
}

.shipping-method__icon {
  flex-shrink: 0;
}

.shipping-method__icon svg {
  display: block;
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.shipping-method__upcoming-main {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  flex: 1 1 100%;
}

.shipping-method__soon-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 50px;
  background-color: hsl(319 80% 43% / 0.12);
  color: hsl(319 80% 43%);
  line-height: 1.4;
  white-space: nowrap;
}

.shipping-method__upcoming-action {
  flex: 1 1 100%;
  line-height: 1.4;
  white-space: nowrap;
}

.shipping-method__delivery-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: center;
  border: 1px solid var(--clr-gray-400);
  border-radius: 0.5rem;
  background: var(--gradient-brand-alt-soft);
}

.shipping-method__delivery-note-text {
  color: hsl(151 39% 52%);
  line-height: 1.5;
}

.shipping-method__warnings {
  margin-block-start: 1rem;
}

.shipping-method__warnings-list {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid hsl(0 70% 50%);
  border-radius: 0.5rem;
  background-color: hsl(0 70% 50% / 0.08);
}

@media (min-width: 48rem) {
  .shipping-method__item-controls {
    gap: 1.25rem;
  }

  .shipping-method__upcoming-main {
    flex: 1 1 auto;
  }

  .shipping-method__upcoming-action {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  .shipping-method__icon svg {
    inline-size: 2rem;
    block-size: 2rem;
  }
}

.payment-method__list {
  display: grid;
  gap: 1.5rem;
}

.payment-method__list[hidden] {
  display: none;
}

.payment-method__item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--clr-gray-400);
  background-color: var(--background-surface);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.payment-method__item--selected {
  border-color: var(--clr-brand-500);
  background: var(--gradient-brand-alt-soft);
}

.payment-method__item-inner {
  display: grid;
  gap: 1rem;
}

.payment-method__item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.payment-method__item-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.payment-method__radio-wrap {
  display: grid;
  place-items: center;
  padding: 3px;
  border: 1px solid var(--clr-gray-400);
  border-radius: 50%;
}

.payment-method__radio {
  appearance: none;
  margin: 0;
  width: 1.125rem;
  height: 1.125rem;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
}

.payment-method__radio:checked {
  background-color: var(--clr-brand-500);
}

.payment-method__radio:focus-visible {
  outline: 2px solid var(--clr-brand-500);
  outline-offset: 2px;
}

.payment-method__divider {
  flex-shrink: 0;
  width: 1px;
  height: 4.5rem;
  background-color: var(--clr-gray-400);
}

.payment-method__label {
  display: grid;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.payment-method__item--selected .payment-method__label-title {
  color: var(--clr-brand-500);
}

.payment-method__item--selected .payment-method__label-subtitle {
  color: var(--clr-brand-500);
  opacity: 0.85;
}

.payment-method__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}

.payment-method__icon--logo {
  object-fit: contain;
}

.payment-method__reward-points {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-block-end: 1.5rem;
}

.payment-method__reward-points-input {
  flex-shrink: 0;
  margin-block-start: 0.2rem;
}

.payment-method__reward-points-label {
  line-height: 1.5;
  cursor: pointer;
}

.payment-method__empty {
  margin-block-start: 1rem;
  padding: 1.25rem 1.5rem;
  text-align: center;
  border: 1px solid hsl(0 70% 50%);
  border-radius: 0.5rem;
  background-color: hsl(0 70% 50% / 0.08);
}

.payment-method__empty-text {
  line-height: 1.5;
}

.payment-method__discount-will-remove {
  display: none;
}

@media (min-width: 48rem) {
  .payment-method__item-controls {
    gap: 1.25rem;
  }
}

.payment-method__popup {
  --payment-method-popup-shift: -100%;
  inset-block-start: 0;
  inset-block-end: auto;
  inline-size: 100%;
  max-block-size: calc(100vh - 3.75rem);
  max-block-size: calc(100svh - 3.75rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--background-surface);
  border-end-start-radius: var(--border-radius-4);
  border-end-end-radius: var(--border-radius-4);
  box-shadow: var(--box-shadow-3);
  color: inherit;
}

.payment-method__popup::backdrop {
  background-color: hsla(228, 5%, 19%, 32%);
}

.payment-method__popup[open] {
  animation: payment-method-popup-enter 0.3s var(--ease-out-cubic);
}

.payment-method__popup[open]::backdrop {
  animation: overlay-fade-in 0.3s var(--ease-out-cubic);
}

@keyframes payment-method-popup-enter {
  from {
    transform: translateY(var(--payment-method-popup-shift));
  }

  to {
    transform: translateY(0);
  }
}

html:has(.payment-method__popup[open]) {
  overflow: hidden;
}

.payment-method__popup-dialog {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem 1rem 1rem;
}

.payment-method__popup-close {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
}

.payment-method__popup-header {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
}

.payment-method__popup-brand-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.payment-method__popup-brand {
  inline-size: auto;
  max-block-size: 2.625rem;
}

.payment-method__popup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.payment-method__popup-actions > .btn-cut {
  flex: 1;
}

@media (min-width: 48rem) {
  .payment-method__popup {
    inset-block-start: 3rem;
    inset-block-end: auto;
    inline-size: min(calc(100% - 2rem), 34rem);
    margin-inline: auto;
    border-radius: var(--border-radius-4);
  }

  .payment-method__popup-dialog {
    gap: 1.5rem;
    padding: 2rem;
  }

  .payment-method__popup-actions {
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .payment-method__popup[open],
  .payment-method__popup[open]::backdrop {
    animation: none;
  }
}

dialog:not([open]) {
  display: none;
}

.address-dialog {
  inset-block-start: 0;
  inset-block-end: auto;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-block-size: min(45rem, calc(100vh - 2rem));
  max-block-size: min(45rem, calc(100svh - 2rem));
  overflow: hidden;
  padding-block-start: 1.25rem;
  padding-block-end: 2rem;
  background-color: var(--background-surface);
  border-end-start-radius: var(--border-radius-4);
  border-end-end-radius: var(--border-radius-4);
  box-shadow: var(--box-shadow-3);
}

.address-dialog [hidden] {
  display: none;
}

@media (min-width: 48rem) {
  .address-dialog {
    inset-block-start: 3.75rem;
    max-block-size: min(45rem, calc(100vh - 3.75rem - 2rem));
    max-block-size: min(45rem, calc(100svh - 3.75rem - 2rem));
    inline-size: min(calc(100% - 2rem), 44.25rem);
    margin-inline: auto;
    border-radius: var(--border-radius-4);
  }
}

.address-dialog::backdrop {
  background-color: hsl(228 5% 19% / 33%);
}

.address-dialog__step:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.address-dialog__step--map,
.address-dialog__step--details,
.address-dialog__step--choose,
.address-dialog__step--city {
  flex: 1 1 auto;
  overflow-x: hidden;
}

.address-dialog__step--map,
.address-dialog__step--choose,
.address-dialog__step--city {
  overflow: visible;
}

.address-dialog__step--details {
  flex: 1 1 auto;
  overflow-y: hidden;
}

.address-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  padding-block-end: 0.75rem;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--clr-gray-400);
}

.address-dialog__content {
  min-height: 0;
}

.address-dialog__step--choose .address-dialog__content,
.address-dialog__step--city .address-dialog__content {
  flex: 1 1 auto;
  overflow-y: auto;
}

.address-dialog__cities-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
}

.address-dialog__auto-locate {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.address-dialog__auto-locate svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.address-dialog__cities-search {
  position: relative;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  border-block-start: 1px solid var(--clr-gray-400);
}

.address-dialog__cities-search-icon {
  position: absolute;
  inset-block-start: calc(50% - 0.0625rem);
  inset-inline-start: 0.75rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.address-dialog__cities-search-input {
  inline-size: 100%;
  padding-block-end: 0.125rem;
  padding-inline-start: 2rem;
  border: none;
  border-block-end: 1px solid transparent;
}

.address-dialog__cities-search-input:focus-visible {
  outline: none;
  border-block-end: 1px solid var(--clr-gray-400);
}

.address-dialog__step--city .address-dialog__cities-search {
  border-block-start: 0;
}

.address-dialog__provinces-list,
.address-dialog__cities-list {
  display: grid;
}

.address-dialog__provinces-empty,
.address-dialog__cities-empty {
  padding-block: 1rem;
  border-block-start: 1px solid var(--clr-gray-400);
  text-align: center;
}

.address-dialog__province,
.address-dialog__city {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  border-block-start: 1px solid var(--clr-gray-400);
  cursor: pointer;
}

.address-dialog__province-icon,
.address-dialog__city-icon {
  display: flex;
}

.address-dialog__province:has(.address-dialog__province-radio:checked),
.address-dialog__city:has(.address-dialog__city-radio:checked) {
  background-color: hsl(210 6% 93% / 50%);
}

@media (min-width: 48rem) {
  .address-dialog__header {
    padding-block-end: 1.25rem;
  }

  .address-dialog__cities-header {
    padding-block: 1.25rem;
    padding-inline: 1.25rem;
  }

  .address-dialog__cities-search {
    padding-block: 1.25rem;
    padding-inline: 1.25rem;
  }

  .address-dialog__cities-search-icon {
    inset-inline-start: 1.25rem;
  }

  .address-dialog__province,
  .address-dialog__city {
    padding-inline: 1.25rem;
  }
}

.address-dialog__step--map .address-dialog__content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  block-size: 530px;
}

.address-dialog__step--map .address-dialog__content:has(.address-dialog__map[hidden]) {
  block-size: auto;
}

.address-dialog__map {
  inline-size: 100%;
  block-size: 100%;
  max-block-size: 530px;
  background-color: var(--background-soft);
}

.address-dialog__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-block: 1.5rem;
  text-align: center;
}

.address-dialog__spinner {
  flex-shrink: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border: 2px solid var(--clr-gray-300);
  border-block-start-color: var(--text-brand-primary);
  border-radius: 999px;
  animation: address-dialog-spin 0.6s linear infinite;
}

@keyframes address-dialog-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .address-dialog__spinner {
    animation: none;
  }
}

.address-dialog__map-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--background-soft);
}

.address-dialog__map-loading .address-dialog__spinner {
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

.address-dialog__reverse-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
}

.address-dialog__reverse-loading .address-dialog__spinner {
  inline-size: 1rem;
  block-size: 1rem;
}

.address-dialog__api-fallback {
  display: grid;
  place-items: center;
  margin-block: 1.25rem;
  padding-block: 1rem;
  padding-inline: 0.75rem;
  border: 1px dashed var(--clr-gray-400);
  background-color: var(--background-soft);
  text-align: center;
}

.address-dialog__footer {
  padding-block-start: 1.25rem;
  padding-inline: 1rem;
  border-block-start: 1px solid var(--clr-gray-400);
}

.address-dialog__details-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.address-dialog__details-form .address-dialog__content {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.address-dialog__details-form .address-dialog__footer {
  flex: 0 0 auto;
  background-color: var(--background-surface);
}

.address-dialog__step--choose .address-dialog__footer-actions,
.address-dialog__step--city .address-dialog__footer-actions,
.address-dialog__step--map .address-dialog__footer-actions {
  position: relative;
}

.address-dialog__map-error,
.address-dialog__step-error {
  position: absolute;
  inset-block-end: -1.5rem;
  inset-inline-start: 0;
  margin-block-start: 0;
}

.address-dialog__location-actions {
  margin-inline-start: auto;
  inline-size: fit-content;
  padding-inline: 1rem;
  padding-block-start: 0.5rem;
}

.address-dialog__map-preview {
  flex-shrink: 0;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.address-dialog__map-preview-image {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.address-dialog__edit-location {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-4);
  transition:
    background-color 200ms ease,
    opacity 200ms ease;
}

@media (min-width: 48rem) {
  .address-dialog__auto-locate svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  .address-dialog__map-preview,
  .address-dialog__map-preview-image {
    height: 120px;
  }

  .address-dialog__location-actions {
    padding-inline: 1.25rem;
    padding-block-start: 0.75rem;
  }
}

.address-dialog__footer-button {
  --btn-padding-inline: 2.5rem;
  --btn-cut-x: 15%;
  --btn-cut-y: 40%;
}

.address-dialog__step--choose .address-dialog__footer-button,
.address-dialog__step--city .address-dialog__footer-button {
  --btn-cut-x: 24%;
  --btn-cut-y: 40%;
}

.address-dialog__step--map .address-dialog__footer-button {
  --btn-cut-x: 10%;
  --btn-cut-y: 40%;
}

.address-dialog__step--details .address-dialog__footer-button {
  --btn-cut-x: 20%;
  --btn-cut-y: 40%;
}

.address-dialog__footer-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.address-dialog__edit-location:focus-visible,
.address-dialog__footer-button:focus-visible {
  outline: 2px solid var(--clr-brand-500);
  outline-offset: 2px;
}

.address-dialog__edit-location:active {
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .address-dialog__edit-location:hover {
    background-color: hsl(210 80% 50% / 6%);
  }
}

.address-dialog__details-body {
  padding: 1rem 1.25rem;
}

.address-dialog__form {
  display: grid;
  gap: 1rem;
  align-items: start;
}

.address-dialog__form--location {
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--clr-gray-400);
}

.address-dialog__form--receiver {
  padding-block-start: 1.25rem;
}

.address-dialog__field-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.address-dialog__field-row > .address-dialog__field {
  flex-grow: 1;
}

.address-dialog__field--myinfo {
  grid-column: 1 / -1;
}

.address-dialog__field--myinfo .checkbox-label {
  justify-content: start;
}

.address-dialog__label--required {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.address-dialog__required-icon {
  flex-shrink: 0;
  color: var(--clr-red-500);
}

.address-dialog__field.is-invalid .text-input {
  border-color: var(--clr-red-500);
}

.address-dialog__control--textarea {
  resize: none;
}

.address-dialog__control--profile {
  color: var(--text-muted);
  background-color: var(--background-soft);
  border-color: var(--clr-gray-400);
  cursor: not-allowed;
  pointer-events: none;
}

.address-dialog .text-input {
  padding-block: 0.5rem;
}

@media (min-width: 48rem) {
  .address-dialog .text-input {
    padding-block: 0.75rem;
  }
}

.address-dialog__error-list {
  padding-inline-start: 0.25rem;
  list-style: disc;
}

.address-dialog__error-list li + li {
  margin-block-start: 0.25rem;
}

@media (min-width: 48rem) {
  .address-dialog__form {
    grid-template-columns: 1fr 1fr;
  }

  .address-dialog__field--postal {
    grid-column: 1 / -1;
  }

  .address-dialog__form--receiver .address-dialog__field-row--name {
    grid-column: 1;
  }

  .address-dialog__form--receiver .address-dialog__field--nationalcode {
    grid-column: 2;
  }

  .address-dialog__form--receiver .address-dialog__field-row--phone {
    grid-column: 1;
  }

  .address-dialog__form--receiver .address-dialog__field--title {
    grid-column: 2;
  }
}

.checkout-header {
  padding-block: 0.5rem;
  background-image: var(--gradient-brand-alt-soft);
}

@media (min-width: 48rem) {
  .checkout-header {
    padding-block: 1.25rem;
  }
}

.checkout-footer {
  padding-block: 2rem;
  padding-block-end: 6rem;
  padding-inline: 0.75rem;
}

@media (min-width: 48rem) {
  .checkout-footer {
    padding-block-end: 7rem;
    padding-inline: 1.25rem;
  }
}

@media (min-width: 75rem) {
  .checkout-footer {
    padding-block-end: 2rem;
  }
}

.error-layout ~ .checkout-footer {
  padding-block-end: 1rem;
}

@media (min-width: 48rem) {
  .error-layout ~ .checkout-footer {
    padding-block-end: 2rem;
  }
}

.checkout-progress-section {
  padding-block: 2rem;
}

.checkout-progress-section .wrapper {
  --wrapper-max-width: 64rem;
}

@media (max-width: 74.99rem) {
  .checkout-progress-section {
    display: none;
  }
}

.checkout-progress--mobile {
  display: none;
}

.checkout-progress--desktop {
  display: block;
}

.checkout-progress__list {
  --marker-size: 2rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.checkout-progress__list::after {
  position: absolute;
  content: '';
  block-size: 1px;
  background-color: var(--border-default);
  inset-block-start: calc(var(--marker-size) / 2);
  inset-inline: calc(100% / 12);
  z-index: -1;
}

.checkout-progress__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.checkout-progress__marker {
  display: grid;
  place-items: center;
  padding: 0.25rem;
  aspect-ratio: 1 / 1;
  max-block-size: var(--marker-size);
  font-size: var(--fs-400);
  font-weight: 500;
  border-radius: 999px;
}

.checkout-progress__label {
  font-size: var(--fs-200);
  font-weight: 500;
}

.checkout-progress__step--current .checkout-progress__marker,
.checkout-progress__step--completed .checkout-progress__marker {
  background-color: var(--background-brand-primary);
  color: var(--clr-white);
}

.checkout-progress__step--upcoming .checkout-progress__marker {
  background-color: var(--clr-white);
  color: var(--text-muted);
}

.checkout-progress__step--current .checkout-progress__label {
  color: var(--text-brand-primary);
}

.checkout-progress__step--upcoming .checkout-progress__label {
  color: var(--text-muted);
}

@media (min-width: 75rem) {
  .checkout-header {
    display: none;
  }
}

.pdp-header-mobile {
  position: relative;
  z-index: 10;
  padding-block: 1.25rem;
  background-color: var(--background-page);
  box-shadow: var(--box-shadow-1);
}

@media (min-width: 75rem) {
  .pdp-header-mobile {
    display: none;
  }
}

.pdp-header-mobile__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pdp-header-mobile__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.pdp-action {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 48rem) {
  .pdp-action svg {
    inline-size: 2rem;
    block-size: 2rem;
  }
}

.pdp-action__heart[hidden] {
  display: none;
}

.pdp-action:has(.pdp-action__compare--active) {
  color: var(--text-brand-primary);
}

.pdp-action:has(.pdp-action__heart--active:not([hidden])) {
  color: #ff0000;
}

html:has(.pdp-share-modal[open]) .pdp-action[data-pdp-share-open] {
  color: var(--text-brand-primary);
}

.site-header__row {
  --cluster-justify: space-between;
  --cluster-gap: 0;
}

@media (min-width: 75rem) {
  .site-header__row {
    --cluster-gap: 1rem;
  }
}

.site-header__start {
  --cluster-justify: flex-start;
  --cluster-gap: 2rem;
  flex-grow: 1;
}

.site-header__find {
  --cluster-justify: flex-start;
  --cluster-gap: 1.5rem;
  flex-grow: 1;
}

.header-search {
  width: 100%;
}

@media (min-width: 75rem) {
  .header-search {
    position: relative;
  }
}
@media (min-width: 75rem) {
  .header-search.is-open {
    z-index: 100;
  }
}
@media (min-width: 75rem) {
  .header-search.is-open .header-search__form {
    position: relative;
    z-index: 100;
    background-color: var(--background-page);
  }
}

.header-search__backdrop:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: hsla(228, 5%, 19%, 32%);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out-cubic);
}

.header-search.is-open .header-search__backdrop:not([hidden]) {
  opacity: 1;
}

.header-search__form {
  max-width: 44rem;
  margin-inline: auto;
}

@media (min-width: 75rem) {
  .header-search__form {
    margin-inline: 0;
  }
}

@keyframes overlay-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes overlay-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes modal-pop-in {
  from {
    opacity: 0;
    transform: translateY(0.625rem) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-pop-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(0.625rem) scale(0.97);
  }
}

.full-page-dialog {
  width: 100%;
  height: 100%;
  padding-block: 0.75rem;
  overflow-y: auto;
  transform-origin: right center;
}

@media (min-width: 48rem) {
  .full-page-dialog {
    padding-block: 1.25rem;
  }
}

.full-page-dialog::backdrop {
  background-color: transparent;
}

.full-page-dialog[open] {
  animation: full-page-dialog-enter 0.3s var(--ease-out-cubic);
}

@keyframes full-page-dialog-enter {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .full-page-dialog[open] {
    animation: none;
  }
}

.full-page-dialog__inner {
  max-width: 44rem;
  margin-inline: auto;
  box-sizing: content-box;
  padding-inline: 0.75rem;
}

@media (min-width: 48rem) {
  .full-page-dialog__inner {
    padding-inline: 1.25rem;
  }
}

.full-page-dialog__close {
  width: fit-content;
  margin-block-end: 1rem;
}

.full-page-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 1rem;
}

.full-page-dialog__head .full-page-dialog__close {
  margin-block-end: 0;
}

.pack-modal .product-terms-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  inline-size: 7.125rem;
  block-size: 2rem;
  margin-inline-start: auto;
  border-radius: 0.25rem;
  background-color: #e5f6fd;
}

.dialog-terms {
  margin-block: 1.125rem 1.5rem;
  padding-block: 0 0.4375rem;
  padding-inline: 2rem 1.4375rem;
  border: 0 solid transparent;
  border-width: 1.25rem 0 0.8125rem 0.5625rem;
  background-color: var(--background-surface);
  box-shadow: 0 0 0.25rem 0 rgb(0 0 0 / 25%);
  overflow: auto;
  text-align: justify;
}

.dialog-terms:empty {
  display: none;
}

.dialog-terms ul {
  list-style: disc;
  padding-inline-start: 1.25rem;
}

.header-address-dialog {
  --dialog-duration: 0.3s;
  --dialog-close-animation: modal-pop-out;
  width: 100%;
  max-width: 44.25rem;
  margin-block-start: 3.75rem;
  margin-block-end: 1rem;
  margin-inline: auto;
  background-color: var(--clr-white);
  border-radius: var(--border-radius-4);
  box-shadow: 0 4px 4px rgb(0 0 0 / 25%);
  transform-origin: center center;
}

.header-address-dialog::backdrop {
  background-color: hsla(228, 5%, 19%, 32%);
}

.header-address-dialog[open]:not(.is-closing) {
  animation: modal-pop-in var(--dialog-duration) var(--ease-out-cubic);
}

.header-address-dialog[open]:not(.is-closing)::backdrop {
  animation: overlay-fade-in var(--dialog-duration) var(--ease-out-cubic);
}

.header-address-dialog.is-closing {
  animation: modal-pop-out var(--dialog-duration) var(--ease-out-cubic);
}

.header-address-dialog.is-closing::backdrop {
  animation: overlay-fade-out var(--dialog-duration) var(--ease-out-cubic);
}

@media (prefers-reduced-motion: reduce) {
  .header-address-dialog[open]:not(.is-closing),
  .header-address-dialog.is-closing,
  .header-address-dialog[open]:not(.is-closing)::backdrop,
  .header-address-dialog.is-closing::backdrop {
    animation: none;
  }
}

.header-address-dialog__inner {
  padding-block-start: 1.25rem;
  padding-block-end: 2.5rem;
}

.header-address-dialog__head {
  --cluster-justify: space-between;
  --cluster-wrap: nowrap;
  padding-inline: 2rem;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--clr-gray-200);
}

.header-address-dialog__body {
  padding-inline: 2rem;
  padding-block-start: 1.25rem;
  padding-block-end: 2rem;
}

.header-address-dialog__option {
  padding-block: 1.25rem;
  border-block-end: 1px solid var(--clr-gray-200);
}

.header-address-dialog__option:first-child {
  padding-block-start: 0;
}

.header-address-dialog__add {
  --cluster-gap: 0.5rem;
  --cluster-justify: flex-start;
  --cluster-wrap: nowrap;
  padding-inline: 2rem;
  padding-block-end: 2rem;
}

.header-address-dialog__add:focus-visible {
  outline: 1px solid var(--text-brand-primary);
}

.header-search__dialog-inner {
  --stack-gap: 0.25rem;
}

.header-search__results {
  max-width: 44rem;
  padding: 1rem;
  background-color: var(--background-page);
  border: 1px solid var(--clr-gray-300);
  border-radius: var(--border-radius-4);
  box-shadow: var(--box-shadow-2);
}

@media (min-width: 48rem) {
  .header-search__results {
    border-radius: var(--border-radius-5);
  }
}

@media (min-width: 75rem) {
  .header-search__results {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(100% + 0.5rem);
    z-index: 100;
    width: min(100%, 44rem);
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    padding: 1.25rem;
    opacity: 0;
    transform: scale(0.95) translateY(-0.25rem);
    transform-origin: top;
    transition:
      opacity 0.3s var(--ease-out-cubic),
      transform 0.3s var(--ease-out-cubic);
    will-change: opacity, transform;
    pointer-events: none;
  }
}
@media (min-width: 75rem) {
  .header-search.is-open .header-search__results:not([hidden]) {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-search__backdrop:not([hidden]),
  .header-search__results {
    transition: none;
    transform: none;
  }
}

.header-search__sections {
  --stack-gap: 1.25rem;
}

@media (min-width: 48rem) {
  .header-search__sections {
    --stack-gap: 2rem;
  }
}

.header-search__panel {
  --stack-gap: 1.25rem;
}

.header-search__panel--recent {
  padding-block-end: 1.25rem;
}

@media (min-width: 48rem) {
  .header-search__panel--recent {
    padding-block-end: 2rem;
  }
}

.header-search__panel:last-child:not([hidden]),
.header-search__panel:has(+ .header-search__panel[hidden]):not([hidden]) {
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--clr-gray-200);
}

@media (min-width: 48rem) {
  .header-search__panel:last-child:not([hidden]),
  .header-search__panel:has(+ .header-search__panel[hidden]):not([hidden]) {
    padding-block-end: 2rem;
  }
}

.header-search__section-head {
  --cluster-gap: 0.5rem;
}

.header-search__panel--recent .header-search__section-head {
  --cluster-justify: space-between;
}

.header-search__section-head-main {
  --cluster-gap: 0.5rem;
}

.header-search__section-icon {
  color: var(--text-brand-primary);
}

.header-search__section-icon-svg,
.header-search__recent-clear-icon-svg {
  width: 24px;
  height: 24px;
  display: block;
}

.header-search__recent-clear {
  padding: 0.25rem;
  border-radius: var(--border-radius-2, 6px);
  color: var(--text-main);
}

.header-search__recent-clear:focus-visible {
  outline: 1px solid var(--text-brand-primary);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .header-search__recent-clear:hover {
    background-color: var(--clr-gray-100);
  }
}

.header-search__recent-list {
  --cluster-gap: 0.5rem;
  --cluster-wrap: wrap;
}

.header-search__recent-item {
  padding-block: 0.25rem;
  padding-inline: 1.25rem;
  border-radius: 45px;
  background-color: var(--clr-gray-100);
  color: var(--text-main);
}

@media (hover: hover) and (pointer: fine) {
  .header-search__recent-item:has(.header-search__recent-link:hover) {
    background-color: hsla(217, 91%, 60%, 0.1);
    color: hsl(217, 91%, 60%);
  }
}

.header-search__recent-link:focus-visible,
.header-search__suggestion-link:focus-visible,
.header-search__category-link:focus-visible,
.header-search__product-link:focus-visible {
  outline: 1px solid var(--text-brand-primary);
  outline-offset: 2px;
}

.header-search__category-list {
  --stack-gap: 0.5rem;
}

.header-search__category-item {
  --cluster-justify: space-between;
  --cluster-wrap: wrap;
  --cluster-gap: 0.5rem;
  position: relative;
  padding-block: 0.5rem;
  border-block-end: 1px solid var(--clr-gray-200);
}

.header-search__category-item:first-child {
  padding-block-start: 0;
}

.header-search__category-copy {
  --stack-gap: 0.5rem;
}

.header-search__category-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.header-search__category-chevron {
  flex-shrink: 0;
  color: var(--text-main);
}

@media (hover: hover) and (pointer: fine) {
  .header-search__category-item:hover {
    color: var(--text-brand-primary);
  }
}

.header-search__category-item:has(.header-search__category-link:hover) .header-search__category-chevron {
  color: var(--text-brand-primary);
}

.header-search__suggestion-list {
  --cluster-gap: 0.5rem;
  --cluster-wrap: wrap;
}

.header-search__suggestion-item {
  padding-block: 0.25rem;
  padding-inline: 1.25rem;
  border-radius: 45px;
  background-color: hsla(217, 91%, 60%, 0.1);
  color: hsl(217, 91%, 60%);
}

.header-search__suggestion-item:has(:focus-visible) {
  outline: 1px solid var(--text-brand-primary);
  outline-offset: 2px;
}

.header-search__suggestion-link {
  color: inherit;
}

.header-search__view-all-wrap {
  padding-block-start: 1.25rem;
}

.header-search__view-all {
  --cluster-justify: center;
  --cluster-gap: 0.25rem;
  color: var(--text-main);
  text-decoration: none;
}

.header-search__view-all-icon {
  flex-shrink: 0;
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .header-search__view-all:hover {
    color: var(--text-brand-primary);
  }
}

.header-search__view-all:focus-visible {
  color: var(--text-brand-primary);
}

.header-search__hint,
.header-search__loading,
.header-search__empty {
  padding-block: 1.5rem;
}

.header-search__loading {
  --cluster-justify: center;
  --cluster-gap: 0.5rem;
}

.header-search__spinner {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  border: 2px solid var(--clr-gray-300);
  border-block-start-color: var(--text-brand-primary);
  border-radius: 999px;
  animation: header-search-spinner 0.6s linear infinite;
}

@keyframes header-search-spinner {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-search__spinner {
    animation: none;
  }
}

.header-search__carousel {
  --scroll-btn-inline-offset: -0.875rem;
  position: relative;
}

@media (min-width: 48rem) {
  .header-search__carousel {
    --scroll-btn-inline-offset: -1rem;
  }
}

.scroll-btn {
  --scroll-btn-svg-size: 14px;
  display: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--clr-gray-400);
  border-radius: 999px;
  background-color: var(--background-page);
  color: var(--text-main);
  cursor: pointer;
  transition: scale 150ms var(--ease-out-cubic);
}

@media (min-width: 48rem) {
  .scroll-btn {
    --scroll-btn-svg-size: 16px;
    width: 32px;
    height: 32px;
  }
}

.scroll-btn:active:not(:disabled) {
  scale: 0.97;
}

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

  .scroll-btn:active:not(:disabled) {
    scale: none;
  }
}

.scroll-btn__svg {
  display: block;
  width: var(--scroll-btn-svg-size);
  height: var(--scroll-btn-svg-size);
}

.scroll-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (min-width: 75rem) {
  .scroll-btn {
    display: grid;
  }
}

.header-search__scroll-btn,
.pdp-carousel__scroll-btn,
.pdp-carousel__lightbox-scroll-btn,
.cart__suggested-nav .scroll-btn,
.page-favorites__nav .scroll-btn {
  display: grid;
}

.product-strip__items:focus-visible,
.brands-strip__items:focus-visible,
.amazing-list:focus-visible {
  outline: 1px solid var(--text-brand-primary);
  outline-offset: 2px;
}

.product-strip__items.is-dragging,
.product-strip__items.is-dragging *,
.brands-strip__items.is-dragging,
.brands-strip__items.is-dragging *,
.amazing-list.is-dragging,
.amazing-list.is-dragging *,
.home-categories.is-dragging,
.home-categories.is-dragging *,
.home-subcategories.is-dragging,
.home-subcategories.is-dragging *,
.header-search__carousel-track.is-dragging,
.header-search__carousel-track.is-dragging * {
  user-select: none;
}

.scroll-btn:focus-visible:not(:disabled) {
  outline: 1px solid var(--text-brand-primary);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .scroll-btn:hover:not(:disabled) {
    border-color: var(--text-brand-primary);
    color: var(--text-brand-primary);
  }
}

.header-search__scroll-btn {
  position: absolute;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
}

.header-search__scroll-btn--prev {
  inset-inline-start: var(--scroll-btn-inline-offset);
}

.header-search__scroll-btn--next {
  inset-inline-end: var(--scroll-btn-inline-offset);
}

.header-search__carousel-track {
  --cluster-wrap: nowrap;
  --cluster-gap: 0;
  display: flex;
  margin-inline: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.header-search__carousel-track::-webkit-scrollbar {
  display: none;
}

.header-search__carousel-item {
  --cluster-gap: 0.5rem;
  --cluster-wrap: nowrap;
  align-items: flex-start;
  flex-shrink: 0;
  max-width: 14.6875rem;
  padding: 0.5rem;
  border: 1px solid var(--clr-gray-300);
  border-inline-end: 0;
  background-color: var(--background-page);
}

.header-search__carousel-item:last-child {
  border-inline-end: 1px solid var(--clr-gray-300);
}

.header-search__product-image {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.header-search__product-link {
  flex-grow: 1;
  min-width: 0;
  color: inherit;
}

.header-search__carousel-item .header-search__product-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

@media (hover: hover) and (pointer: fine) {
  .header-search__product-link:hover {
    color: var(--text-brand-primary);
  }
}

html:has(#header-address-dialog[open]),
html:has(.header-search.is-open),
html:has(#header-address-dialog[open]) body,
html:has(.header-search.is-open) body {
  overflow: hidden;
}

.site-header__logo {
  display: none;
}

.site-header__categories {
  display: none;
  padding-block: 1rem;
  padding-inline: 1.25rem;
  background-color: color-mix(in srgb, var(--clr-gray-400) 33%, transparent);
  border-radius: var(--border-radius-4);
  transition:
    background-color 200ms ease,
    color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .site-header__categories:hover {
    background-color: color-mix(in srgb, var(--clr-gray-400) 55%, transparent);
    color: var(--text-brand-primary);
  }
}

.site-header__categories-panel {
  display: none;
}

@media (min-width: 75rem) {
  .site-header__row,
  .site-header__start,
  .site-header__find {
    --cluster-wrap: nowrap;
  }

  .site-header__start {
    flex-grow: 1;
    flex-shrink: 2;
  }

  .site-header__logo {
    display: block;
    flex-shrink: 0;
  }

  .site-header__logo .logo-img {
    max-inline-size: none;
  }

  .site-header__find {
    flex-grow: 1;
  }

  .site-header__categories {
    --cluster-gap: 0.25rem;
    display: flex;
    align-items: center;
    gap: var(--cluster-gap);
    flex-shrink: 0;
  }

  .site-header__categories-panel:not([hidden]) {
    display: block;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 100;
    opacity: 0;
    transform: scale(0.95) translateY(-0.25rem);
    transform-origin: top;
    transition:
      opacity 0.3s var(--ease-out-cubic),
      transform 0.3s var(--ease-out-cubic);
    will-change: opacity, transform;
    pointer-events: none;
  }

  .site-header__categories-panel.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header__categories-panel:not([hidden]) {
      transition: none;
      transform: none;
    }
  }

  .site-header__categories-grid {
    display: grid;
    grid-template-columns: 18rem 1fr;
    grid-template-rows: minmax(0, 1fr);
    height: clamp(32rem, 70vh, 40rem);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--clr-gray-300);
    border-radius: var(--border-radius-4);
    box-shadow: var(--box-shadow-2);
  }

  .site-header__categories-roots {
    background-color: hsl(0, 0%, 97%);
    border-start-start-radius: var(--border-radius-4);
    border-end-start-radius: var(--border-radius-4);
  }

  .site-header__categories-roots .site-categories__item {
    position: relative;
    padding-inline: 1rem;
  }

  .site-header__categories-roots .site-categories__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .site-header__categories-roots .site-categories__picture {
    border-radius: 999px;
  }

  .site-header__categories-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1.25rem 1.5rem;
    background-color: var(--clr-white);
    border-start-end-radius: var(--border-radius-4);
    border-end-end-radius: var(--border-radius-4);
  }

  .site-header__categories-pane-item:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 1.5rem;
  }

  .site-header__categories-pane-head {
    --cluster-justify: space-between;
    --cluster-wrap: nowrap;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid var(--clr-gray-200);
  }

  .site-header__categories-roots .site-categories__item:hover,
  .site-header__categories-roots .site-categories__item.is-active {
    background-color: var(--clr-white);
  }

  .site-header__categories-roots .site-categories__link:hover,
  .site-header__categories-view-all:hover,
  .site-header__categories-group a:hover {
    color: var(--text-brand-primary);
  }

  .site-header__categories-roots .site-categories__link:focus-visible,
  .site-header__categories-view-all:focus-visible,
  .site-header__categories-group a:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .site-header__categories-columns {
    flex: 1;
    min-height: 0;
    column-count: 4;
    column-gap: 1.5rem;
    column-fill: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .site-header__categories-group {
    --stack-gap: 0.75rem;
    break-inside: avoid;
    margin-block-end: 1.75rem;
    padding: 1rem;
    background-color: hsl(0, 0%, 97%);
    border: 1px solid var(--clr-gray-300);
    border-radius: var(--border-radius-4);
  }

  .site-header__categories-group-title {
    --cluster-justify: space-between;
    --cluster-gap: 0.5rem;
    padding-block-end: 0.5rem;
    border-block-end: 1px solid var(--clr-gray-200);
  }

  .site-header__categories-group-title > .cluster {
    --cluster-gap: 0.5rem;
  }

  .site-header__categories-group-title a {
    color: var(--text-brand-primary);
    line-height: 1.5;
  }

  .site-header__categories-group .site-categories__open {
    padding: 0;
    color: var(--clr-gray-500);
  }

  .site-header__categories-group .site-categories__open svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .site-header__categories-group > ul {
    --stack-gap: 0.35rem;
  }

  .site-header__categories-group > ul > li > a {
    color: var(--text-main);
    line-height: 1.7;
  }

  .site-header__categories-group ul ul {
    margin-block-start: 0.25rem;
    padding-inline-start: 0.75rem;
  }

  .site-header__categories-group ul ul a {
    color: var(--clr-gray-500);
    line-height: 1.7;
  }

  .site-header__find .header-search {
    flex-grow: 1;
  }

  .site-header__tools {
    display: flex;
    --cluster-gap: 1rem;
    --cluster-wrap: nowrap;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

@media (min-width: 75rem) {
  .header-account,
  .header-cart {
    position: relative;
    flex-shrink: 0;
  }

  .header-account {
    --cluster-gap: 1rem;
    --cluster-wrap: nowrap;
  }

  .header-account__meta--city {
    --cluster-gap: 0.5rem;
  }

  .header-account__separator {
    display: block;
    width: 1px;
    height: 2.125rem;
    background-color: var(--clr-gray-400);
  }

  .header-account__trigger {
    --cluster-gap: 0.25rem;
    position: relative;
  }

  .header-account__icon {
    flex-shrink: 0;
  }

  .header-account__chevron {
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s var(--ease-out-cubic);
  }

  .header-account__trigger.is-open .header-account__chevron,
  .header-account__trigger[aria-expanded='true'] .header-account__chevron {
    transform: rotate(180deg);
  }

  .header-actions__dropdown {
    position: absolute;
    inset-block-start: calc(100% + 12px);
    inset-inline-end: 0;
    z-index: 200;
    opacity: 0;
    transform: scale(0.95) translateY(-0.25rem);
    transform-origin: top inline-end;
    transition:
      opacity 0.22s var(--ease-out-cubic),
      transform 0.22s var(--ease-out-cubic);
    will-change: opacity, transform;
    pointer-events: none;
  }

  .header-actions__dropdown.is-open {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
  }

  .header-cart__dropdown {
    inline-size: min(24rem, calc(100vw - 1.5rem));
  }

  .header-cart__panel {
    display: flex;
    flex-direction: column;
    white-space: normal;
    text-wrap: pretty;
    max-height: min(70vh, 32rem);
    overflow: hidden;
    background-color: var(--background-page);
    border: 1px solid hsl(210, 8%, 84%);
    border-radius: var(--border-radius-4);
    box-shadow: var(--box-shadow-3);
    color: var(--text-heading);
    font-size: var(--font-size-sm);
  }

  .header-account__menu {
    max-width: 18rem;
    min-width: 18rem;
    background-color: var(--background-page);
    border: 1px solid hsl(210, 8%, 84%);
    box-shadow: var(--box-shadow-3);
    color: var(--text-heading);
    border-radius: var(--border-radius-4);
  }
}

.header-account__item,
.header-account__item-main {
  --cluster-gap: 1rem;
  --cluster-justify: flex-start;
}

.header-account__item {
  position: relative;
  padding-block: 1rem;
  padding-inline-start: 1rem;
  padding-inline-end: 0.5rem;
}

.header-account__item-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  white-space: nowrap;
}

.header-account__item-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
}

.header-account__item-action {
  position: relative;
  margin-inline-start: auto;
  z-index: 100;
}

.header-account__item-action--charge {
  padding: 0.5rem;
  color: var(--text-brand-primary);
  background-color: var(--background-page);
  border-radius: var(--border-radius-4);
}

.header-account__item-meta {
  letter-spacing: 0.1em;
  color: var(--text-brand-primary);
}

.header-account__item--profile .header-account__item-meta {
  direction: ltr;
}

.header-account__item--wallet {
  background-color: var(--background-muted);
}

.header-account__menu
  > .header-account__item:not(.header-account__item--profile, .header-account__item--logout)
  .header-account__item-icon {
  color: var(--text-brand-primary);
}

.header-account__item--logout {
  color: var(--text-brand-secondary);
}

.header-account__item-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-inline-start: 0.5rem;
  padding-inline: 0.3125rem;
  border-radius: 999px;
  background-color: var(--background-brand-primary);
  color: var(--text-high-contrast);
  line-height: 1;
  vertical-align: middle;
}

.header-account-dialog .full-page-dialog__inner {
  --stack-gap: 0;
  max-width: none;
  padding-inline: 0;
}

.header-account-dialog .header-account__menu {
  background-color: var(--background-page);
  color: var(--text-heading);
  font-size: var(--font-size-sm);
}

.header-account-dialog .header-account__item-content {
  white-space: normal;
}

@media (min-width: 75rem) {
  .header-account-dialog {
    display: none;
  }

  .header-cart__trigger {
    place-items: center;
    position: relative;
    padding: 1rem 1.25rem;
    background-color: var(--background-brand-secondary);
    border-radius: var(--border-radius-4);
    color: var(--text-high-contrast);
    cursor: pointer;
  }

  .header-cart__trigger--link {
    display: none;
  }

  .header-cart__trigger--button {
    display: grid;
  }

  .header-cart--open-page .header-cart__trigger--link {
    display: grid;
  }

  .header-cart--open-page .header-cart__trigger--button,
  .header-cart--open-page .header-cart__dropdown {
    display: none;
  }

  .header-cart__icon {
    color: var(--text-high-contrast);
  }

  .header-cart__badge {
    display: grid;
    place-items: center;
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 34px;
    background-color: var(--background-page);
    color: var(--text-heading);
    padding-inline: 9px;
    border-radius: 50%;
    max-width: 1.5rem;
    white-space: nowrap;
  }

  .header-cart__summary {
    padding: 1.25rem 1.5rem;
    border-block-end: 1px solid var(--background-muted);
  }

  .header-cart__summary--empty {
    border-block-end: none;
  }

  .header-cart__summary-count {
    --cluster-gap: 0.5rem;
    --cluster-justify: flex-start;
    font-weight: 500;
  }

  .header-cart__summary-meta {
    --cluster-gap: 0.25rem;
    --cluster-justify: flex-start;
  }

  .header-cart__summary-title {
    color: var(--text-main);
  }

  .header-cart__summary-qty {
    font-weight: 700;
    color: var(--text-brand-secondary);
  }

  .header-cart__summary-label {
    color: var(--clr-gray-500);
  }

  .header-cart__empty {
    text-align: center;
    font-weight: 500;
    color: var(--clr-gray-500);
  }

  .header-cart__list {
    flex-grow: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .header-cart__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    align-items: start;
    padding: 1.25rem 1.5rem;
    border-block-start: 1px solid var(--background-muted);
  }

  .header-cart__item:first-child {
    border-block-start: none;
  }

  .header-cart__item--unavailable {
    background: linear-gradient(to left, hsl(0, 70%, 50%, 0.1), hsl(0, 0%, 100%, 0.1));
  }

  .header-cart__item.is-loading {
    opacity: 0.6;
    pointer-events: none;
  }

  .header-cart__item-aside {
    display: flex;
    align-items: center;
  }

  .header-cart__item-image-link {
    display: block;
    border-radius: var(--border-radius-4);
    overflow: hidden;
    background-color: var(--background-muted);
  }

  .header-cart__item--unavailable .header-cart__item-image-link {
    opacity: 0.7;
  }

  .header-cart__item-image {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
  }

  .header-cart__item-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .header-cart__item-footer {
    --cluster-gap: 1rem;
    margin-block-start: auto;
  }

  .header-cart__qty {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0.25rem;
    background-color: var(--background-muted);
    border-radius: 100vh;
    margin-inline-start: auto;
  }

  .header-cart__qty-button {
    justify-self: center;
    padding: 0.25rem;
    aspect-ratio: 1;
    background-color: var(--background-page);
    border-radius: 100vh;
  }

  .header-cart__qty-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .header-cart__qty-icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .header-cart__qty-value {
    min-width: 1.25rem;
    text-align: center;
    line-height: 1;
  }

  .header-cart__item-name {
    overflow-wrap: anywhere;
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-main);
  }

  .header-cart__item-color {
    --cluster-gap: 0.25rem;
    font-size: var(--font-size-2xs);
    font-weight: 500;
    color: var(--clr-gray-500);
  }

  .header-cart__item-color-swatch {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
  }

  .header-cart__item-price {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .header-cart__item-discount {
    --cluster-gap: 0.25rem;
    --cluster-wrap: nowrap;
  }

  .header-cart__item-discount-percent {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background-color: rgba(252, 22, 86, 0.05);
    color: var(--clr-pink-500);
    font-size: var(--font-size-2xs);
    font-weight: 500;
  }

  .header-cart__item-old-price {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--clr-gray-500);
    text-decoration: line-through;
  }

  .header-cart__item-amount {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-heading);
  }

  .header-cart__item-oos {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--clr-pink-500);
  }

  .header-cart__footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-block-start: 1px solid var(--background-muted);
    background-color: var(--background-page);
  }

  .header-cart__totals {
    --cluster-gap: 1rem;
    --cluster-justify: space-between;
  }

  .header-cart__totals-label {
    font-weight: 500;
    color: var(--clr-gray-500);
  }

  .header-cart__totals-value {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-heading);
  }

  .header-cart__totals-value--unavailable {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--clr-pink-500);
  }

  .header-cart__footer .btn-primary {
    --btn-bg: var(--background-brand-primary);
    --btn-bg-hover: var(--background-brand-primary);
    display: block;
  }

  .header-account__meta--city,
  .header-account__trigger,
  .header-account__item-action,
  .header-cart__trigger,
  .header-cart__item-name,
  .header-cart__item-image-link,
  .header-cart__qty-button {
    transition:
      color 200ms ease,
      background-color 200ms ease,
      opacity 200ms ease,
      border-color 200ms ease;
  }

  .header-account__item--profile:has(.header-account__item-link:focus-visible),
  .header-account__item--wallet:has(.header-account__item-link:focus-visible) {
    outline: 2px solid var(--text-brand-primary);
    outline-offset: -2px;
  }

  .header-account__item--profile .header-account__item-link:focus-visible,
  .header-account__item--wallet .header-account__item-link:focus-visible {
    outline: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .header-account__trigger:hover,
    .header-account__meta--city:hover,
    .header-account__item-link:hover,
    .header-account__item-action:hover,
    .header-cart__item-name:hover {
      color: var(--text-brand-primary);
    }

    .header-account__meta--city:hover .header-account__city,
    .header-account__item-link:hover,
    .header-cart__item-name:hover {
      text-decoration: underline;
    }

    .header-account__item-link--logout:hover {
      color: var(--text-brand-secondary);
    }

    .header-account__item-action--charge:hover {
      background-color: var(--clr-black);
      color: var(--text-high-contrast);
    }

    .header-cart__trigger:hover {
      opacity: 0.9;
    }

    .header-cart__qty-button:hover {
      opacity: 0.75;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .header-actions__dropdown,
    .header-account__chevron,
    .header-account__meta--city,
    .header-account__trigger,
    .header-account__item-action,
    .header-cart__trigger,
    .header-cart__item-name,
    .header-cart__item-image-link,
    .header-cart__qty-button {
      transition: none;
    }

    .header-actions__dropdown,
    .header-actions__dropdown.is-open {
      transform: none;
    }
  }
}

.site-dock {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 50;
  background-color: var(--clr-white);
  border-block-start: 1px solid var(--clr-gray-200);
}

.html-storefront-layout {
  --site-dock-height: 5.5rem;
}

@media (min-width: 48rem) {
  .html-storefront-layout {
    --site-dock-height: 5.9375rem;
  }
}

.site-dock__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.25rem;
}

.site-dock__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 1rem;
  padding-inline: 1.25rem;
  border-radius: var(--border-radius-5);
}

.site-dock__item a,
.site-dock__item button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: inherit;
  max-width: 100%;
}

.site-dock__item span {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.site-dock__icon {
  position: relative;
  display: grid;
  place-items: center;
}

.site-dock__item .site-dock__icon {
  max-width: none;
  overflow: visible;
}

.site-dock__badge {
  position: absolute;
  inset-block-start: -0.375rem;
  inset-inline-start: -0.5rem;
  z-index: 10;
  display: grid;
  place-items: center;
  block-size: 1.125rem;
  padding-inline: 0.375rem;
  border-radius: 999px;
  background-color: var(--clr-accent-600);
  color: var(--clr-white);
  font-size: var(--fs-100);
  line-height: 1;
}

.site-dock__item .site-dock__badge {
  min-inline-size: 1.125rem;
  max-width: none;
  overflow: visible;
}

.site-dock__badge[hidden] {
  display: none;
}

.site-dock__item a:hover,
.site-dock__item a:focus-visible,
.site-dock__item button:hover,
.site-dock__item button:focus-visible {
  color: var(--text-brand-secondary);
  text-decoration: none;
}

.site-dock__item:has([aria-current='page']),
.site-dock__item:has([aria-expanded='true']) {
  background-color: color-mix(in srgb, var(--clr-gray-200) 50%, transparent);
}

.site-dock__item:has([aria-current='page']) a,
.site-dock__item:has([aria-current='page']) button,
.site-dock__item:has([aria-expanded='true']) a,
.site-dock__item:has([aria-expanded='true']) button {
  color: var(--text-brand-secondary);
}

@media (min-width: 75rem) {
  .site-dock {
    display: none;
  }

  .html-storefront-layout main {
    padding-block-end: 2.5rem;
  }
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 75rem) {
  .site-header__brand {
    display: none;
  }
}

.site-header__nav {
  display: none;
}

@media (min-width: 75rem) {
  .site-header__nav {
    display: block;
  }
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  position: relative;
}

.site-header__nav-item > a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
}

.site-header__nav-item > a > img,
.site-header__nav-item > a > svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.site-header__nav-item > a > img {
  object-fit: contain;
}

.site-header__nav-item > a:hover,
.site-header__nav-item > a:focus-visible {
  text-decoration: none;
  box-shadow: inset 0 -0.125rem 0 var(--text-brand-primary);
}

.site-header__nav-item:not(.site-header__nav-item--end) + .site-header__nav-item--end,
.site-header__nav-list > .site-header__nav-item--end:first-child {
  margin-inline-start: auto;
}

@supports (anchor-name: --site-header-nav-item) {
  .site-header__nav-item > a:hover,
  .site-header__nav-item > a:focus-visible {
    box-shadow: none;
  }

  .site-header__nav-list::after {
    content: '';
    position: absolute;
    pointer-events: none;
    background-color: var(--text-brand-primary);
    position-anchor: --site-header-nav-item;
    top: auto;
    right: calc(anchor(right) + 1rem);
    bottom: anchor(bottom);
    left: calc(anchor(left) + 1rem);
    height: 2px;
    opacity: 0;
    transition:
      right 300ms cubic-bezier(0.215, 0.61, 0.355, 1),
      bottom 300ms cubic-bezier(0.215, 0.61, 0.355, 1),
      left 300ms cubic-bezier(0.215, 0.61, 0.355, 1),
      opacity 150ms ease;
  }

  .site-header__nav-list:has(:hover, :focus-within)::after {
    opacity: 1;
  }

  .site-header__nav-item:is(:hover, :focus-within) {
    anchor-name: --site-header-nav-item;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header__nav-list::after {
      transition: opacity 150ms ease;
    }
  }
}

.site-header__menu-toggle {
  display: flex;
}

.site-header__nav-head,
.site-header__nav-backdrop {
  display: none;
}

@media (max-width: 74.99rem) {
  .site-header__brand:has(.site-header__menu-toggle[aria-expanded='true']) + .site-header__nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 200;
    padding: 1.25rem;
    background-color: var(--background-page);
    transform-origin: top right;
    animation: site-header-nav-enter 0.3s var(--ease-out-cubic);
  }

  .site-header__brand:has(.site-header__menu-toggle[aria-expanded='true']) + .site-header__nav.is-closing {
    animation: site-header-nav-exit 0.3s var(--ease-out-cubic);
  }

  .site-header__nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--clr-gray-200);
  }

  .site-header__nav-list {
    flex-direction: column;
    align-items: center;
    max-width: 44rem;
    margin-inline: auto;
  }

  .site-header__nav-item {
    width: 100%;
    padding-block: 1rem;
    border-block-end: 1px solid var(--clr-gray-200);
  }

  .site-header__nav-item:last-child {
    margin-inline-start: 0;
    border-block-end: 0;
  }

  .site-header__nav-item:not(.site-header__nav-item--end) + .site-header__nav-item--end,
  .site-header__nav-list > .site-header__nav-item--end:first-child {
    margin-inline-start: 0;
  }

  .site-header__nav-item > a {
    justify-content: center;
    font-size: var(--font-size-lg);
  }

  .site-header__brand:has(.site-header__menu-toggle[aria-expanded='true']) ~ .site-header__nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: hsla(228, 5%, 19%, 32%);
    animation: overlay-fade-in 0.3s var(--ease-out-cubic);
  }

  .site-header__brand:has(.site-header__menu-toggle[aria-expanded='true']) ~ .site-header__nav-backdrop.is-closing {
    animation: overlay-fade-out 0.3s var(--ease-out-cubic);
  }

  @keyframes site-header-nav-enter {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes site-header-nav-exit {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-header__brand:has(.site-header__menu-toggle[aria-expanded='true']) + .site-header__nav,
    .site-header__nav.is-closing,
    .site-header__brand:has(.site-header__menu-toggle[aria-expanded='true']) ~ .site-header__nav-backdrop,
    .site-header__nav-backdrop.is-closing {
      animation: none;
    }
  }
}

.site-footer__inner {
  --stack-gap: 1.25rem;
  background-color: var(--background-muted);
  padding-block: 1.25rem 8rem;
  background-image: url('../img/symbolMobile.svg');
  background-position: center calc(100% - 24px);
  background-repeat: repeat-x;
}

@media (min-width: 48rem) {
  .site-footer__inner {
    padding-block-start: 2.5rem;
  }
}

@media (min-width: 75rem) {
  .site-footer__inner {
    --stack-gap: 2.5rem;
    padding-block-end: 6rem;
    background-position: center calc(100% - 6px);
  }
}

.site-footer__services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 48rem) {
  .site-footer__services {
    gap: 2rem;
  }
}

@media (min-width: 75rem) {
  .site-footer__services {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.site-footer__service {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 75rem) {
  .site-footer__service:not(:first-child)::before {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: -1rem;
    translate: 0 -50%;
    inline-size: 1px;
    block-size: 5.25rem;
    background-color: var(--clr-gray-400);
  }
}

.site-footer__service-icon {
  inline-size: 2rem;
  block-size: 2rem;
}

@media (min-width: 48rem) {
  .site-footer__service-icon {
    inline-size: 3.375rem;
    block-size: 3.375rem;
  }
}

@media (min-width: 75rem) {
  .site-footer__service-icon {
    inline-size: 4rem;
    block-size: 4rem;
  }
}

.site-footer__service-text {
  white-space: nowrap;
}

.site-footer__support {
  display: grid;
  gap: 2rem;
  padding: 1.25rem;
  background-color: var(--clr-white);
}

@media (min-width: 48rem) {
  .site-footer__support {
    gap: 2.5rem;
    padding: 2.5rem 1.25rem;
  }
}

@media (min-width: 75rem) {
  .site-footer__support {
    grid-template-columns: auto 1fr auto;
    column-gap: 1.25rem;
    align-items: start;
    padding: 2.5rem 1.5rem;
  }
}

.site-footer__contact {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 75rem) {
  .site-footer__contact {
    gap: 1rem;
  }
}

.site-footer__contact-call,
.site-footer__contact-email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer__contact-call-wrapper,
.site-footer__contact-email-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-footer__contact-call-number-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.site-footer__contact-call-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
}

.site-footer__important-links,
.site-footer__trust,
.site-footer__payment {
  display: grid;
  gap: 1rem;
}
@media (min-width: 75rem) {
  .site-footer__important-links {
    justify-self: center;
  }
}

.site-footer__important-links-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  cursor: pointer;
}

@media (min-width: 48rem) {
  .site-footer__important-links-button {
    cursor: revert;
  }
}

.site-footer__important-links-button-icon {
  transition: transform 0.2s ease;
}

@media (min-width: 48rem) {
  .site-footer__important-links-button-icon {
    display: none;
  }
}

.site-footer__important-links-button-icon--open {
  transform: rotate(180deg);
}

.site-footer__important-links-list {
  display: none;
}

@media (min-width: 48rem) {
  .site-footer__important-links-list {
    display: flex;
  }
}

.site-footer__important-links-list-active {
  display: flex;
}

.site-footer__important-links-list-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.site-footer__important-links-list-column {
  display: grid;
  flex-shrink: 0;
  gap: 0.5rem;
}

.site-footer__important-links-link--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}

.site-footer__payment-list {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  inline-size: fit-content;
  max-inline-size: 100%;
}

@media (min-width: 48rem) {
  .site-footer__payment-list {
    gap: 0.5rem;
  }
}

.site-footer__payment-item {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-block: 1rem;
  padding-inline: 0.625rem;
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-4);
  background-color: var(--clr-white);
}

@media (min-width: 48rem) {
  .site-footer__payment-item {
    padding-block: 1.25rem;
    padding-inline: 0.5rem;
  }
}

.site-footer__payment-logo {
  display: block;
  inline-size: 3.5rem;
  block-size: 1.75rem;
  object-fit: contain;
  color: var(--text-main);
}

@media (min-width: 48rem) {
  .site-footer__payment-logo {
    inline-size: 4rem;
    block-size: 2rem;
  }
}

.site-footer__payment-link {
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: var(--border-radius-4);
}

.site-footer__payment-item:has(.site-footer__payment-link:focus-visible) {
  background-color: var(--clr-white);
  border-color: var(--clr-accent-500);
  box-shadow: var(--box-shadow-2);
}

.site-footer__content {
  display: grid;
  gap: 2rem;
}

@media (min-width: 75rem) {
  .site-footer__content {
    grid-template-columns: 3fr 2fr;
    gap: 1.25rem;
  }
}

.site-footer__content-column {
  display: grid;
  gap: 1.25rem;
}

.site-footer__about-us {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 48rem) {
  .site-footer__about-us {
    gap: 1.25rem;
  }
}

.site-footer__about-us-text {
  max-inline-size: 45rem;
}

.site-footer__social-networks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

@media (min-width: 75rem) {
  .site-footer__social-networks {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1.25rem;
    grid-column: 1;
    grid-row: 2;
  }
}

.site-footer__social-networks-list {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-footer__newsletter {
  display: grid;
  gap: 0.625rem;
}

@media (min-width: 48rem) {
  .site-footer__newsletter {
    grid-template-columns: 2fr 4fr;
    gap: 2.5rem;
  }
}

@media (min-width: 75rem) {
  .site-footer__newsletter {
    grid-template-columns: 1fr;
    align-self: start;
    gap: 1.25rem;
  }
}

.site-footer__newsletter-content {
  display: grid;
  align-self: start;
  gap: 0.25rem;
}

.site-footer__newsletter-form {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.site-footer__newsletter-form-wrapper {
  display: grid;
  gap: 0.25rem;
}

.site-footer__newsletter-form-wrapper--disabled {
  opacity: 0.7;
}

.site-footer__newsletter-input {
  grid-column: 1;
  grid-row: 1;
  inline-size: 100%;
  padding: 1rem;
  padding-inline-start: 5rem;
  border: 1px solid transparent;
  border-radius: var(--border-radius-4);
  background-color: var(--clr-white);
  color: var(--text-main);
  direction: ltr;
  text-align: left;
}

@media (min-width: 48rem) {
  .site-footer__newsletter-input {
    padding: 1.25rem;
    padding-inline-start: 8rem;
  }
}

.site-footer__newsletter-input::placeholder {
  color: var(--clr-accent-500);
  text-align: right;
}

.site-footer__newsletter-button {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  inline-size: fit-content;
  padding: 0.75rem 1rem;
  margin-inline-end: 0.25rem;
  border-radius: var(--border-radius-4);
  background-color: var(--clr-accent-500);
  color: var(--clr-white);
}

@media (min-width: 48rem) {
  .site-footer__newsletter-button {
    padding: 1rem 1.75rem;
  }
}

.site-footer__newsletter-validation {
  font-size: var(--font-size-2xs);
  font-weight: 500;
  color: var(--text-muted);
}

@media (min-width: 48rem) {
  .site-footer__newsletter-validation {
    font-size: var(--font-size-xs);
  }
}

@media (min-width: 75rem) {
  .site-footer__newsletter-validation {
    font-size: var(--font-size-sm);
  }
}

.site-footer__newsletter-status {
  display: none;
  margin-block-start: 0.25rem;
}

.site-footer__newsletter-status--loading {
  color: var(--text-muted);
}

.site-footer__newsletter-status--success {
  color: var(--clr-green-500);
}

.site-footer__newsletter-status--error {
  color: var(--clr-red-500);
}

.site-footer__newsletter-validation-message {
  display: inline-block;
}

.site-footer__newsletter-input--error,
.site-footer__newsletter-input.input-validation-error {
  border-color: var(--clr-red-500);
}

.site-footer__newsletter-input:disabled {
  background-color: var(--clr-gray-100);
  color: var(--text-muted);
  cursor: not-allowed;
}

.site-footer__newsletter-button:disabled {
  background-color: var(--clr-gray-300);
  color: var(--clr-white);
  cursor: not-allowed;
}

.site-footer__trust-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-items: center;
  gap: 0.25rem;
}

@media (min-width: 48rem) {
  .site-footer__trust-list {
    grid-template-columns: repeat(5, minmax(0, 4.75rem));
    gap: 0.75rem;
  }
}

@media (min-width: 75rem) {
  .site-footer__trust-list {
    gap: 1rem;
  }
}

.site-footer__trust-list-link {
  display: block;
}

.site-footer__trust-list-media {
  display: grid;
  place-items: center;
  inline-size: 100%;
  max-inline-size: 4.75rem;
  aspect-ratio: 76 / 88;
  padding: 0.25rem;
  background-color: var(--clr-white);
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-4);
  box-shadow: var(--box-shadow-1);
}

@media (min-width: 48rem) {
  .site-footer__trust-list-media {
    inline-size: 4.75rem;
    block-size: 5.5rem;
    aspect-ratio: auto;
    padding: 0.5rem;
  }
}

.site-footer__trust-list-media > img {
  inline-size: 2.25rem;
  block-size: 2.75rem;
  object-fit: contain;
}

@media (min-width: 48rem) {
  .site-footer__trust-list-media > img {
    inline-size: 3rem;
    block-size: 3.75rem;
  }
}
@media (min-width: 75rem) {
  .site-footer__trust {
    grid-column: 2;
    justify-self: start;
    align-self: end;
    inline-size: 100%;
  }
}
@media (min-width: 75rem) {
  .site-footer__copyright {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

.site-footer__copyright-text {
  color: var(--text-muted);
}

.site-footer__copyright-symbol {
  vertical-align: sub;
}

.site-footer__copyright-time {
  display: inline-block;
  direction: ltr;
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__payment-item {
    transition:
      background-color 200ms ease,
      border-color 200ms ease,
      box-shadow 200ms ease,
      translate 200ms ease;
  }

  .site-footer__newsletter-input {
    transition:
      border-color 200ms ease,
      box-shadow 200ms ease;
  }

  .site-footer__newsletter-button {
    transition:
      background-color 200ms ease,
      box-shadow 200ms ease,
      translate 200ms ease;
  }

  .site-footer__social-networks-list-link {
    transition:
      opacity 200ms ease,
      translate 200ms ease;
  }

  .site-footer__newsletter-input:hover {
    border-color: var(--clr-accent-500);
  }

  .site-footer__newsletter-button:hover {
    background-color: hsl(319 80% 48%);
    box-shadow: var(--box-shadow-2);
    translate: 0 -1px;
  }

  .site-footer__newsletter-button:active {
    scale: 0.97;
  }

  .site-footer__social-networks-list-link:hover {
    opacity: 0.85;
    translate: 0 -1px;
  }

  .site-footer__payment-item:hover {
    background-color: var(--clr-white);
    border-color: var(--clr-accent-500);
    box-shadow: var(--box-shadow-2);
    translate: 0 -1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__payment-item,
  .site-footer__newsletter-input,
  .site-footer__newsletter-button,
  .site-footer__social-networks-list-link {
    transition: none;
    translate: none;
    scale: none;
  }
}

.home-slider {
  position: relative;
  overflow: visible;
  inline-size: 100%;
}

.home-slider__viewport {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
}

.home-slider__viewport:not(.slick-initialized):not(.slickless) .home-slider__slide:not(.first-slide) {
  display: none;
}

@keyframes home-slider-spinner {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.home-slider__viewport::before {
  content: '';
  position: absolute;
  z-index: 10;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin-block-start: -1.25rem;
  margin-inline-start: -1.25rem;
  border: 2px solid transparent;
  border-top-color: var(--text-brand-primary);
  border-radius: 999px;
  pointer-events: none;
  animation: home-slider-spinner 0.6s linear infinite;
}

.home-slider__viewport.slick-initialized::before,
.home-slider__viewport.slickless::before {
  content: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-slider__viewport::before {
    animation: none;
  }
}

.home-slider__viewport .slick-list {
  overflow: hidden;
  aspect-ratio: 1920 / 1344;
}

@media (min-width: 48rem) {
  .home-slider__viewport .slick-list {
    aspect-ratio: 1920 / 420;
  }
}

.home-slider__slide {
  block-size: 100%;
}

.home-slider__link {
  display: block;
  block-size: 100%;
}

.home-slider__picture {
  display: block;
  block-size: 100%;
}

.home-slider__image,
.home-slider__video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}
.home-slider__arrows .slick-arrow {
  position: relative;
  border-radius: 999px;
  background-color: var(--background-page);
  box-shadow: var(--box-shadow-1);
}

.home-slider__arrows .slick-arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 1rem;
  block-size: 1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem;
}

.home-slider__arrows .slick-next::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.75 19.5L8.25 12L15.75 4.5' stroke='%232E2F33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.home-slider__arrows .slick-prev::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8.25 19.5L15.75 12L8.25 4.5' stroke='%232E2F33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.home-slider__arrows .slick-arrow.slick-disabled {
  opacity: 0.45;
}

.section {
  margin-block-start: 2.75rem;
}

@media (min-width: 48rem) {
  .section {
    margin-block-start: 4rem;
  }
}

.pdp-section {
  padding-block: 0.5rem;
}

@media (min-width: 48rem) {
  .pdp-section {
    padding-block: 1rem;
  }
}

@media (min-width: 75rem) {
  .pdp-section {
    padding-block: 2rem;
  }
}

.pdp-product {
  display: grid;
  align-items: start;
  gap: 1.25rem;
  max-inline-size: 36.625rem;
  margin-inline: auto;
}

.pdp-product__media {
  display: grid;
  gap: 1.25rem;
}

.pdp-addtocart {
  display: none;
}

@media (min-width: 75rem) {
  .pdp-product {
    grid-template-columns: 4fr 3fr;
    gap: 1.5rem 1.25rem;
    justify-items: normal;
    max-inline-size: none;
    margin-inline: 0;
  }

  .pdp-product__media {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .pdp-product__info {
    grid-column: 2;
    grid-row: 1;
  }

  .pdp-addtocart {
    grid-column: 2;
    grid-row: 2;
    display: block;
  }
}

@media (min-width: 87rem) {
  .pdp-product {
    grid-template-columns: 3fr 2.5fr minmax(20rem, 22rem);
    grid-template-rows: auto 1fr;
    column-gap: 1.5rem;
  }

  .pdp-product__media {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .pdp-addtocart {
    grid-column: 3;
    grid-row: 1;
  }
}

.pdp-product__info {
  justify-self: stretch;
}

.pdp-product__info-head {
  --stack-gap: 0.5rem;
}

.pdp-product__info-benefits {
  --stack-gap: 0.5rem;
}

.pdp-product__info-stack {
  --stack-gap: 1rem;
}

.pdp-product__info-brand-sku {
  --cluster-justify: space-between;
}

.pdp-product__info-rating {
  --cluster-gap: 1.25rem;
}

.pdp-product__info-rating-links {
  --cluster-gap: 1.25rem;
}

@media (min-width: 48rem) {
  .pdp-product__info-head {
    --stack-gap: 1rem;
  }

  .pdp-product__info-benefits {
    --stack-gap: 1rem;
  }

  .pdp-product__info-stack {
    --stack-gap: 1.5rem;
  }
}

.wrapper {
  --wrapper-max-width: 90rem;
  --wrapper-padding: 0.75rem;
  --wrapper-cut: 5rem;
  box-sizing: content-box;
  inline-size: calc(100% - 2 * var(--wrapper-padding));
  max-inline-size: var(--wrapper-max-width);
  margin-inline: auto;
  padding-inline: var(--wrapper-padding);
}

.wrapper[data-width='narrow'] {
  --wrapper-max-width: 26rem;
}

.wrapper[data-width='medium'] {
  --wrapper-max-width: 30rem;
}

.wrapper[data-width='wide'] {
  --wrapper-max-width: 100rem;
}

.wrapper[data-width='content'] {
  --wrapper-max-width: 75rem;
}

.wrapper[data-padding-end='none'] {
  padding-inline-end: 0;
}

@media (min-width: 48rem) {
  .wrapper {
    --wrapper-padding: 1.5rem;
  }
}

@media (min-width: 75rem) {
  .wrapper {
    --wrapper-padding: 5rem;
  }

  .wrapper[data-width='wide'] {
    --wrapper-padding: 2.5rem;
  }

  .wrapper[data-padding-end='none'] {
    padding-inline-end: var(--wrapper-padding);
  }
}

.external-auth-errors {
  margin-block-end: 0.5rem;
  font-size: var(--font-size-sm);
}

.min-amount-warning,
.min-order-warning {
  color: var(--clr-red-500);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.terms-of-service {
  display: grid;
  gap: 0.375rem;
  text-align: start;
}

.terms-of-service label {
  font-size: var(--font-size-sm);
  line-height: 1.8;
}

.terms-of-service .read {
  color: var(--text-brand-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.checkout-box {
  padding-block: 1.5rem 3rem;
}

.checkout-box__surface {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
  background-color: var(--background-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-5);
}

.checkout-box__header {
  display: grid;
  gap: 0.5rem;
}

.checkout-box__body {
  display: grid;
  gap: 1rem;
  inline-size: 100%;
}

.checkout-box__actions {
  display: grid;
  gap: 0.5rem;
}

.checkout-box__surface--centered {
  justify-items: center;
  text-align: center;
}

.checkout-box__icon {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 999px;
  color: var(--text-high-contrast);
}

.checkout-box__icon--success {
  background-color: var(--background-success);
}

.checkout-box__icon--danger {
  background-color: var(--background-danger);
}

.checkout-box__icon svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.checkout-box__text {
  max-inline-size: 28rem;
}

.checkout-box__meta {
  display: grid;
  gap: 0.25rem;
}

@media (min-width: 48rem) {
  .checkout-box {
    padding-block: 2.5rem 5rem;
  }

  .checkout-box__surface {
    padding: 2.5rem 2rem;
  }
}

.plp-breadcrumb,
.plp-head {
  padding-block: 1.25rem;
}

.site-breadcrumb-shell {
  padding-block: 1.25rem;
}

@media (max-width: 74.99rem) {
  .site-breadcrumb-shell {
    padding-block: 0.5rem;
    background-color: var(--background-muted);
    overflow-x: auto;
  }

  .site-breadcrumb-shell .wrapper {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: none;
    margin-inline: 0;
    padding-inline-end: 0;
  }
}

@media (min-width: 75rem) {
  .site-breadcrumb-shell {
    border-block-end: 1px solid var(--clr-gray-400);
  }
}

.plp-head__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.plp-head__main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.plp-head__titles {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.plp-head__search svg {
  inline-size: 24px;
  block-size: 24px;
}

@media (min-width: 48rem) {
  .plp-head__row,
  .plp-head__main,
  .plp-head__titles {
    gap: 1rem;
  }

  .plp-head__search svg {
    inline-size: 32px;
    block-size: 32px;
  }
}

@media (max-width: 74.99rem) {
  .plp-breadcrumb {
    display: none;
  }
}

@media (min-width: 75rem) {
  .space-block-start {
    margin-block-start: 2rem;
  }

  .plp-head {
    padding-block: 0;
  }

  .plp-head__titles {
    gap: 1.25rem;
  }
}

.plp-divider__line {
  block-size: 1px;
  background-image: var(--plp-divider-background);
}

.plp-divider__line,
.plp-body__sorting,
.plp-body__products {
  scroll-margin-block-start: 2rem;
}

@media (max-width: 74.99rem) {
  .plp-divider {
    display: none;
  }
}

.plp-lead {
  display: flex;
  flex-direction: column;
}

.plp-lead .plp-head {
  order: 1;
}

.plp-lead:has(.plp-top-banner) .plp-head {
  margin-block-start: 0;
}

.plp-lead .plp-top-banner {
  order: 2;
  overflow: hidden;
}

.plp-top-banner .home-slider__image,
.plp-top-banner .home-slider__video {
  inline-size: 100%;
  block-size: auto;
  display: block;
  object-fit: cover;
}

@media (min-width: 75rem) {
  .plp-lead .plp-top-banner {
    order: 1;
    margin-block-end: 2rem;
  }

  .plp-lead .plp-head {
    order: 2;
  }
}

.plp-toolbar {
  --plp-toolbar-padding-inline: 1.25rem;
  --plp-toolbar-icon-size: 18px;
  padding-block: 0.5rem;
  background-image: var(--plp-toolbar-background);
}

.plp-toolbar__controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.5rem;
}

.plp-toolbar__filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.75rem;
  padding-inline: var(--plp-toolbar-padding-inline);
  border-radius: var(--border-radius-4);
  box-shadow: var(--box-shadow-1);
}

.plp-toolbar__filter svg {
  inline-size: var(--plp-toolbar-icon-size);
  block-size: var(--plp-toolbar-icon-size);
}

.sorting__select {
  --sorting-padding-inline: var(--plp-toolbar-padding-inline, 1.25rem);
  --sorting-icon-size: var(--plp-toolbar-icon-size, 18px);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-block: 0.75rem;
  padding-inline: var(--sorting-padding-inline);
  padding-inline-start: calc(var(--sorting-padding-inline) + var(--sorting-icon-size) + 0.5rem);
  border: 0;
  border-radius: var(--border-radius-4);
  background-color: transparent;
  background-image: url('../img/plp/sort.svg');
  background-repeat: no-repeat;
  background-position: right var(--sorting-padding-inline) center;
  background-size: var(--sorting-icon-size);
  box-shadow: var(--box-shadow-1);
  color: inherit;
}

@media (min-width: 48rem) {
  .plp-toolbar {
    --plp-toolbar-padding-inline: 2rem;
    --plp-toolbar-icon-size: 24px;
  }

  .plp-toolbar__filter,
  .plp-toolbar .sorting__select {
    padding-block: 1rem;
  }
}

@media (min-width: 75rem) {
  .plp-toolbar {
    display: none;
  }
}

.plp-body {
  margin-block-start: 1.25rem;
}

.plp-body__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.plp-body__main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-inline-size: 0;
  overflow-anchor: none;
}

.plp-body__main > :not(:has(*)) {
  display: none;
}

.plp-body__pagination:not(:has(.pager > *)) {
  display: none;
}

.plp-body__filters-bottom:not(:has(*)) {
  display: none;
}

@media (max-width: 74.99rem) {
  .plp-body__filters,
  .plp-body__sorting {
    display: none;
  }
}

@media (min-width: 75rem) {
  .plp-body {
    margin-block-start: 2rem;
  }

  .plp-body__grid {
    grid-template-columns: 18.125rem 1fr;
    align-items: start;
  }

  .plp-body__filters {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    grid-column: 1;
    grid-row: 1;
  }

  .plp-body__main {
    grid-column: 2;
    grid-row: 1;
  }
}

.plp-filters {
  padding-block: 1.25rem;
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--clr-accent-600) 5%, transparent),
    color-mix(in srgb, var(--clr-brand-500) 5%, transparent)
  );
  border-radius: var(--border-radius-4);
}

.plp-filters__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-inline: 1.25rem;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--border-default);
}

.plp-filters__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.plp-filters__clear {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.plp-filters__clear[hidden] {
  display: none;
}

.plp-filters__body {
  padding-inline: 1.25rem;
}

.wrapper__shadow {
  filter: drop-shadow(0 4px 10px hsla(0, 0%, 0%, 10%));
}

.wrapper__cut {
  border-radius: 5px;
  clip-path: polygon(var(--wrapper-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--wrapper-cut));
  background-color: var(--background-surface);
}

.home-categories {
  --track-auto-columns: 6.25rem;
  --track-gap: 0.5rem;
  --track-justify: space-evenly;
  overflow-x: scroll;
  scrollbar-width: none;
}

.home-categories::-webkit-scrollbar {
  display: none;
}

@media (min-width: 48rem) {
  .home-categories {
    --track-auto-columns: 8.125rem;
  }
}

@media (min-width: 75rem) {
  .home-categories {
    --track-gap: 1.25rem;
  }
}

.brands-strip {
  --brand-card-logo-inline-size: 6.875rem;
  --brand-card-logo-block-size: 4.0625rem;
  --brand-card-padding-inline: 0.5rem;
  --brand-card-padding-block: 0.25rem;
  position: relative;
  min-inline-size: 0;
}

@media (min-width: 48rem) {
  .brands-strip {
    --brand-card-padding-inline: 1rem;
    --brand-card-padding-block: 0.5rem;
  }
}

@media (min-width: 75rem) {
  .brands-strip {
    --brand-card-logo-inline-size: 10.8125rem;
    --brand-card-logo-block-size: 6.125rem;
  }
}

.brands-strip__items {
  --track-auto-columns: calc(var(--brand-card-logo-inline-size) + 2 * var(--brand-card-padding-inline));
  --track-gap: 0.5rem;
  position: relative;
  z-index: 20;
  inline-size: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.brands-strip__items::-webkit-scrollbar {
  display: none;
}

.brands-strip__items > :last-child {
  margin-inline-end: var(--wrapper-padding);
}

@media (min-width: 75rem) {
  .brands-strip__items {
    --track-gap: 1.25rem;
  }

  .brands-strip__items > :last-child {
    margin-inline-end: 0;
  }
}

.brands-strip__scroll-btn {
  position: absolute;
  inset-block-start: 50%;
  z-index: 30;
  translate: 0 -50%;
}

.brands-strip__scroll-btn--prev {
  inset-inline-start: -16px;
}

.brands-strip__scroll-btn--next {
  inset-inline-end: -16px;
}

.amazing-products {
  --stack-gap: 1.25rem;
  position: relative;
  inline-size: 100%;
  min-block-size: 340px;
  padding-block: 1.25rem;
  background: var(
      --amazing-bg-mobile,
      url('/Plugins/Widget.AmazingProducts/Themes/PacificNew/Content/img/bg-mobile.png')
    )
    top center / 100% 100% no-repeat;
}

@media (min-width: 48rem) {
  .amazing-products {
    min-block-size: 464px;
    padding-block: 2.5rem;
    background-image: var(
      --amazing-bg-tablet,
      url('/Plugins/Widget.AmazingProducts/Themes/PacificNew/Content/img/bg-tablet.png')
    );
    background-size: 100% 100%;
  }
}

@media (min-width: 75rem) {
  .amazing-products {
    padding-block-start: 1.25rem;
    padding-block-end: 4rem;
  }

  .amazing-products::after {
    content: '';
    position: absolute;
    inset-block-start: 84px;
    inset-inline-start: 16px;
    inline-size: 158px;
    block-size: 335px;
    background: var(
        --amazing-bg-symbol,
        url('/Plugins/Widget.AmazingProducts/Themes/PacificNew/Content/img/symbol-desktop.svg')
      )
      no-repeat;
    pointer-events: none;
  }
}

.amazing-list {
  --track-auto-columns: 10rem;
  position: relative;
  z-index: 20;
  min-inline-size: 0;
  inline-size: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

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

@media (min-width: 48rem) {
  .amazing-list {
    --track-auto-columns: 12rem;
    --track-gap: 0.25rem;
  }
}

@media (min-width: 75rem) {
  .amazing-list {
    padding-block-end: 0.75rem;
  }
}

.amazing-strip {
  position: relative;
  min-inline-size: 0;
}

.amazing-strip__scroll-btn {
  position: absolute;
  inset-block-start: 50%;
  z-index: 30;
  translate: 0 -50%;
}

.amazing-strip__scroll-btn--prev {
  inset-inline-start: -16px;
}

.amazing-strip__scroll-btn--next {
  inset-inline-end: -16px;
}

.promo-cards {
  --auto-grid-min: 24rem;
  --promo-card-overhang: 1.25rem;
  --promo-card-gap: 1rem;
  --auto-grid-column-gap: var(--promo-card-gap);
  --auto-grid-row-gap: calc(var(--promo-card-overhang) + var(--promo-card-gap));
}

@media (min-width: 48rem) {
  .promo-cards {
    --promo-card-gap: 1.5rem;
  }
}

.feature-cards {
  --auto-grid-min: 24rem;
}

@layer components {
  .message-error {
    margin-block-end: 0.5rem;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    background-color: hsl(0 70% 50% / 0.1);
    border-radius: var(--border-radius-4);
    font-size: var(--font-size-sm);
    text-align: center;
  }

  .confirm-review {
    display: grid;
    inline-size: 100%;
    text-align: start;
  }

  .confirm-review__section {
    display: grid;
    gap: 0.5rem;
    padding-block: 0.875rem;
  }

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

  .confirm-review__section:last-child {
    padding-block-end: 0;
  }

  .confirm-review__section + .confirm-review__section {
    border-block-start: 1px solid var(--border-default);
  }

  .confirm-review__list {
    display: grid;
    gap: 0.5rem;
  }

  .confirm-review__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .confirm-review__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .confirm-review__details {
    display: grid;
    gap: 0.25rem;
  }

  .icon-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .icon-heading svg {
    inline-size: 14px;
    block-size: 14px;
  }

  @media (min-width: 48rem) {
    .icon-heading svg {
      inline-size: 24px;
      block-size: 24px;
    }
  }

  .cart-payment-summary__code-box {
    display: grid;
    gap: 2rem;
    padding: 1.5rem 1.25rem;
    background-color: var(--background-surface);
    box-shadow: var(--box-shadow-2);
  }

  .cart-payment-summary__code-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
  }

  .cart-payment-summary__code-box-title {
    font-size: var(--fs-300);
    font-weight: 700;
    color: var(--clr-black);
  }

  .cart-payment-summary__code-toggle {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    font-size: var(--fs-200);
    font-weight: 500;
    color: var(--clr-brand-500);
  }

  .cart-payment-summary__code-toggle > svg {
    flex-shrink: 0;
  }

  .cart-payment-summary__code-toggle.is-expanded .cart-payment-summary__code-toggle-icon-vertical {
    display: none;
  }

  .cart-payment-summary__code-applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .cart-payment-summary__code-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: var(--fs-200);
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--text-main);
    background-color: hsl(0 0% 96%);
    border: 1px solid hsl(0 0% 90%);
    border-radius: var(--border-radius-4);
  }

  .cart-payment-summary__code-chip--active {
    background-color: hsl(212 70% 97%);
    border-color: var(--clr-brand-500);
  }

  .cart-payment-summary__code-chip-remove {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    padding: 0.25rem;
    color: var(--clr-accent-500);
    background-color: hsl(0 0% 92%);
    border-radius: 50%;
  }

  .cart-payment-summary__code-chip-remove:hover,
  .cart-payment-summary__code-chip-remove:active {
    color: var(--clr-brand-500);
    background-color: hsl(212 70% 94%);
  }

  .cart-payment-summary__code-chip-remove:focus-visible {
    outline: 2px solid var(--clr-brand-500);
    outline-offset: 2px;
  }

  .cart-payment-summary__code-form {
    display: grid;
    grid-template-columns: 3fr 1fr;
    justify-items: start;
    gap: 0.5rem;
    max-inline-size: 22rem;
  }

  .cart-payment-summary__code-form[hidden] {
    display: none;
  }

  .cart-payment-summary__code-form .text-field {
    inline-size: 100%;
  }

  .cart-payment-summary__code-form .cart-payment-summary__code-submit {
    --btn-bg: var(--clr-brand-500);
    --btn-bg-hover: hsl(212 70% 30%);
    --btn-padding-block: 0.75rem;
    --btn-padding-inline: 0.5rem;
    align-self: end;
    display: grid;
    place-items: center;
    grid-column: 2;
    border: 1px solid transparent;
    font-size: var(--font-size-md);
    font-weight: 500;
    white-space: nowrap;
  }

  @media (min-width: 48rem) {
    .cart-payment-summary__code-form .cart-payment-summary__code-submit {
      --btn-padding-block: 1rem;
    }
  }

  .cart-payment-summary__code-form .cart-payment-summary__code-submit:disabled {
    --btn-bg: var(--clr-gray-400);
    color: var(--background-surface);
    cursor: not-allowed;
    opacity: 0.7;
  }

  .cart-payment-summary__code-submit:focus-visible {
    outline: 2px solid var(--clr-brand-500);
    outline-offset: 2px;
  }

  .cart-payment-summary__code-message {
    display: flex;
    align-items: center;
    grid-column: 1 / -1;
    gap: 0.25rem;
    font-size: var(--fs-200);
    font-weight: 500;
  }

  .cart-payment-summary__code-message--success {
    color: var(--clr-green-500);
  }

  .cart-payment-summary__code-message--error {
    color: var(--clr-red-500);
  }

  .cart-payment-summary__code-message-icon {
    flex-shrink: 0;
  }

  .cart-payment-summary__code-current {
    display: flex;
    align-items: center;
    grid-column: 1 / -1;
    gap: 0.5rem;
    font-size: var(--fs-200);
    font-weight: 500;
    color: var(--text-main);
  }

  .cart-payment-summary__code-current-remove {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    font-size: var(--fs-500);
    line-height: 1;
    color: var(--clr-accent-500);
    background: transparent;
    border: 0;
  }

  @media (min-width: 48rem) {
    .cart-payment-summary__code-label,
    .cart-payment-summary__code-input {
      font-size: var(--fs-400);
    }

    .cart-payment-summary__code-submit {
      padding: 0.5rem 0.75rem;
    }
  }

  @media (min-width: 75rem) {
    .cart-payment-summary__code-form {
      max-inline-size: 36rem;
    }

    .cart-payment-summary__code-submit {
      min-inline-size: 6rem;
    }

    .cart-payment-summary__code-box-title,
    .cart-payment-summary__code-toggle {
      font-size: var(--fs-400);
    }
  }

  .home-categories__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  @media (min-width: 48rem) {
    .home-categories__item {
      gap: 1rem;
    }
  }

  .home-categories__media {
    position: relative;
    padding-inline: 0.5rem;
    padding-block: 0;
    background-color: hsl(210 6% 93% / 30%);
    border-radius: var(--border-radius-2);
    transition: background-color 0.2s ease;
  }

  @media (min-width: 75rem) {
    .home-categories__media {
      padding-inline: 1.25rem;
      padding-block: 0.25rem;
    }
  }

  .home-categories__icon {
    position: absolute;
    inset-block-start: 0.15rem;
    inset-inline-end: 0.15rem;
    display: grid;
    place-items: center;
  }

  .home-categories__chevron {
    color: var(--clr-white);
    inline-size: 18px;
    block-size: 18px;
    transition: color 0.2s ease;
  }

  .home-categories__link {
    white-space: nowrap;
    transition: color 0.2s ease;
  }

  .home-categories__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  @media (hover: hover) and (pointer: fine) {
    .home-categories__item:has(.home-categories__link:hover) .home-categories__media {
      background-color: var(--background-muted);
    }

    .home-categories__item:has(.home-categories__link:hover) .home-categories__chevron,
    .home-categories__link:hover {
      color: var(--text-brand-primary);
      text-decoration: none;
    }
  }

  .home-subcategories {
    --track-auto-columns: 106px;
    --track-gap: 0.5rem;
    --track-justify: space-evenly;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .home-subcategories::-webkit-scrollbar {
    display: none;
  }

  @media (min-width: 48rem) {
    .home-subcategories {
      --track-auto-columns: 128px;
      --track-gap: 0.75rem;
    }
  }

  @media (min-width: 75rem) {
    .home-subcategories {
      --track-gap: 1.25rem;
    }
  }

  .home-subcategories__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--border-radius-3);
    text-align: center;
    transition: background-color 0.2s ease;
  }

  .home-subcategories__icon {
    inline-size: 90px;
    block-size: 90px;
    object-fit: cover;
    border-radius: var(--border-radius-4);
    transition: scale 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  @media (min-width: 48rem) {
    .home-subcategories__icon {
      inline-size: 112px;
      block-size: 112px;
    }
  }

  .home-subcategories__link {
    color: var(--text-brand-primary);
    transition: color 0.2s ease;
  }

  .home-subcategories__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .home-subcategories__item:has(.home-subcategories__link:focus-visible) {
    background-color: var(--background-muted);
  }

  .home-subcategories__item:has(.home-subcategories__link:focus-visible) .home-subcategories__icon {
    scale: 1.05;
  }

  .home-subcategories__item:has(.home-subcategories__link:focus-visible) .home-subcategories__link {
    color: var(--text-brand-primary);
  }

  @media (hover: hover) and (pointer: fine) {
    .home-subcategories__item:hover {
      background-color: var(--background-muted);
    }

    .home-subcategories__item:hover .home-subcategories__icon {
      scale: 1.05;
    }

    .home-subcategories__item:hover .home-subcategories__link {
      color: var(--text-brand-primary);
      text-decoration: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .home-categories__media,
    .home-categories__link,
    .home-categories__chevron,
    .home-subcategories__item,
    .home-subcategories__icon,
    .home-subcategories__link {
      transition: none;
    }
  }

  .plp-subcategories {
    position: relative;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  .plp-subcategories__scroller {
    position: relative;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
  }

  .plp-subcategories--mobile {
    margin-block-end: 0.5rem;
  }

  .plp-subcategories--desktop {
    display: none;
  }

  @media (min-width: 48rem) {
    .plp-subcategories--mobile {
      margin-block-end: 0.75rem;
    }
  }

  @media (min-width: 75rem) {
    .plp-subcategories--desktop {
      display: block;
    }
  }

  .plp-subcategories__items {
    --track-auto-columns: 6.5rem;
    --track-gap: 0.5rem;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-x: auto;
    padding-block: 0.5rem;
    scrollbar-width: none;
  }

  .plp-subcategories__items::-webkit-scrollbar {
    display: none;
  }

  @media (min-width: 48rem) {
    .plp-subcategories__items {
      --track-auto-columns: 7.5rem;
      --track-gap: 0.75rem;
    }
  }

  @media (min-width: 75rem) {
    .plp-subcategories__items {
      --track-auto-columns: 8rem;
    }
  }

  .plp-subcategories__items:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .plp-subcategories__item {
    display: flex;
    min-inline-size: 0;
  }

  .plp-subcategories__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    inline-size: 100%;
    block-size: 100%;
    padding: 0.5rem;
    background-color: var(--background-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-4);
    text-align: center;
    text-decoration: none;
    transition: box-shadow 200ms ease;
  }

  .plp-subcategories__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .plp-subcategories__media {
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    overflow: hidden;
    background-color: var(--background-muted);
    border-radius: var(--border-radius-4);
  }

  @media (min-width: 48rem) {
    .plp-subcategories__media {
      inline-size: 4.5rem;
      block-size: 4.5rem;
    }
  }

  .plp-subcategories__image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .plp-subcategories__title {
    color: var(--text-main);
    line-height: 1.4;
    overflow-wrap: break-word;
  }

  .plp-subcategories__link:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .plp-subcategories__link:hover {
      box-shadow: var(--box-shadow-2);
    }
  }

  .plp-subcategories__scroll-btn {
    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    translate: 0 -50%;
  }

  .plp-subcategories__scroll-btn--prev {
    inset-inline-start: -0.75rem;
  }

  .plp-subcategories__scroll-btn--next {
    inset-inline-end: -0.75rem;
  }

  .plp-subcategories__scroll-btn:disabled {
    display: none;
  }

  .brand-card {
    display: grid;
    place-items: center;
    padding-inline: var(--brand-card-padding-inline);
    padding-block: var(--brand-card-padding-block);
    background-color: hsl(210 6% 93% / 30%);
    border-radius: var(--brand-card-radius, var(--border-radius-5));
  }

  .brand-card__logo {
    inline-size: var(--brand-card-logo-inline-size);
    block-size: var(--brand-card-logo-block-size);
    object-fit: contain;
    object-position: center;
  }

  .brand-card:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .brand-card:hover {
      background-color: var(--background-muted);
    }
  }

  .amazing-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    inline-size: 100%;
    color: var(--clr-white);
  }

  .amazing-header__title-row {
    --cluster-justify: flex-start;
    --cluster-gap: 0.25rem;
  }

  .amazing-header__timer {
    --cluster-gap: 0.5rem;
    flex-shrink: 0;
  }

  @media (min-width: 48rem) {
    .amazing-header__timer {
      --cluster-gap: 1.25rem;
    }
  }

  .amazing-header__countdown {
    --cluster-gap: 0.25rem;
    --cluster-wrap: nowrap;
  }

  .amazing-header__countdown-digit {
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    border-radius: 5px;
    background-color: var(--clr-white);
    color: var(--clr-black);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
  }

  @media (min-width: 48rem) {
    .amazing-header__countdown-digit {
      inline-size: 2rem;
      block-size: 2rem;
      border-radius: 10px;
      font-size: 1.125rem;
    }
  }

  .amazing-header__countdown-separator {
    font-size: 0.875rem;
    line-height: 1;
  }

  @media (min-width: 48rem) {
    .amazing-header__countdown-separator {
      font-size: 1.5rem;
    }
  }

  .amazing-icon {
    display: grid;
    place-items: center;
  }

  .amazing-icon > svg {
    inline-size: 24px;
    block-size: 24px;
  }

  @media (min-width: 48rem) {
    .amazing-icon > svg {
      inline-size: 32px;
      block-size: 32px;
    }
  }

  .amazing-title {
    --cluster-gap: 0.25rem;
    color: inherit;
  }

  .amazing-title__brand {
    --cluster-gap: 0;
  }

  .amazing-header__timer-label {
    --stack-gap: 0;
    font-size: 0.5rem;
    font-weight: 400;
  }

  @media (min-width: 48rem) {
    .amazing-header__timer-label {
      font-size: 0.75rem;
      font-weight: 700;
    }
  }

  .card-primary {
    --badge-discount-size: 2rem;
    display: grid;
    grid-template-rows: auto 1fr;
    background-color: var(--clr-white);
    border: 1px solid var(--border-default);
  }

  @media (min-width: 48rem) {
    .card-primary {
      --badge-discount-size: 2.25rem;
    }
  }

  .amazing-item {
    position: relative;
    display: grid;
  }

  .amazing-item a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 20;
  }

  .amazing-item--view-all .card-primary {
    grid-template-rows: 1fr;
    place-items: center;
  }

  .amazing-view-all {
    --cluster-justify: center;
    --cluster-gap: 0.5rem;
    inline-size: 100%;
    block-size: 100%;
    color: var(--text-brand-primary);
  }

  .amazing-view-all__icon {
    inline-size: 2.125rem;
    block-size: 2.125rem;
  }

  @media (hover: hover) and (pointer: fine) {
    .amazing-item:not(.amazing-item--view-all) .card-primary {
      transition: box-shadow 200ms ease;
    }

    .amazing-item:not(.amazing-item--view-all):has(.card-primary__link:hover) .card-primary {
      box-shadow: var(--box-shadow-2);
    }

    .amazing-item--view-all:has(.amazing-view-all:hover) .card-primary {
      background-color: var(--background-muted);
    }

    .amazing-view-all:hover {
      color: color-mix(in srgb, var(--text-brand-primary) 80%, var(--clr-black));
      text-decoration: none;
    }
  }

  .amazing-item:first-child .card-primary {
    border-inline-end-width: 0;
  }

  @media (min-width: 48rem) {
    .amazing-item:first-child .card-primary {
      border-inline-end-width: 1px;
    }
  }

  .card-primary__media {
    position: relative;
    display: grid;
    place-items: center;
    padding-block-start: 1rem;
  }

  .card-primary__media .picture {
    display: block;
  }

  .card-primary__media img {
    margin-inline: auto;
    object-fit: cover;
  }

  .card-primary__image {
    display: block;
    inline-size: 9.375rem;
    block-size: 9.375rem;
    object-fit: cover;
  }

  @media (min-width: 48rem) {
    .card-primary__image {
      inline-size: 11.5rem;
      block-size: 11.5rem;
    }
  }

  .card-primary__link {
    display: -webkit-box;
    overflow: hidden;
    min-inline-size: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    word-break: break-word;
  }

  .amazing-products__colors {
    position: absolute;
    z-index: 30;
    inset-block-start: 0.5rem;
    left: 0.5rem;
  }

  .amazing-products__color-item {
    flex-shrink: 0;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 999px;
  }

  .amazing-products__color-item--light {
    border: 1px solid var(--clr-gray-400);
  }

  .amazing-products__colors-more {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  .card-primary__body {
    padding-inline: 0.5rem;
    padding-block: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .card-primary__prices {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    column-gap: 0.5rem;
    min-block-size: var(--badge-discount-size);
  }

  .badge-discount {
    --badge-discount-size: 2rem;
    font-size: var(--fs-200);
    --badge-discount-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M12 0H35A5 5 0 0 1 40 5V35A5 5 0 0 1 35 40H5A5 5 0 0 1 0 35V12L12 0Z'/%3E%3C/svg%3E");
    display: grid;
    place-items: center;
    inline-size: var(--badge-discount-size);
    aspect-ratio: 1;
    padding: 0.25rem;
    line-height: 1.1;
    background-color: var(--background-discount);
    -webkit-mask-image: var(--badge-discount-mask);
    mask-image: var(--badge-discount-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  @media (min-width: 48rem) {
    .badge-discount {
      --badge-discount-size: 2.25rem;
    }
  }

  .card-primary__discount {
    grid-row: span 2;
    align-self: center;
  }

  .card-primary__price {
    grid-column: 2;
    justify-self: end;
    white-space: nowrap;
  }

  .card-primary__price--current {
    align-self: start;
    text-decoration: none;
  }

  .card-primary__price--old {
    text-decoration: line-through;
  }

  .back-button {
    display: grid;
    place-items: center;
    padding: 14px;
    aspect-ratio: 1;
    border-radius: 999px;
    background-color: var(--background-button);
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition:
      transform 100ms cubic-bezier(0.215, 0.61, 0.355, 1),
      color 200ms ease,
      background-color 200ms ease;
  }

  .back-button:hover,
  .back-button:focus-visible {
    text-decoration: none;
  }

  .back-button:active {
    transform: scale(0.95);
  }

  @media (hover: hover) and (pointer: fine) {
    .back-button:hover {
      color: var(--text-brand-primary);
      background-color: var(--clr-gray-400);
    }
  }

  /*
   * BACKEND TODO — admin-chosen text colour for promo / feature cards and the
   * credit banner.
   *
   * The rules below read --promo-card-text / --feature-card-text and fall back to
   * --text-high-contrast. The .text-high-contrast utility is already gone from
   * these cards; the colour now comes only from the custom property set in the
   * markup, which currently holds the placeholder var(--text-high-contrast):
   *   <div class="promo-card__content" style="--promo-card-text: var(--text-high-contrast)">
   *   <div class="feature-card__content" style="--feature-card-bg: @item.Background;
   *        --feature-card-border: @item.Border; --feature-card-text: var(--text-high-contrast)">
   *
   * 1.  Domains/HomeBlockItem.cs
   *     public string TextColor { get; set; }
   * 2.  Mapping/Builders/HomeBlockItemBuilder.cs
   *     .WithColumn(nameof(HomeBlockItem.TextColor)).AsString(50).Nullable()
   * 3.  Migrations/  (folder does not exist yet)
   *     [NopMigration("...", "Nop.Plugin.Widgets.HomeBlocks TextColor")]
   *     class AddTextColorToHomeBlockItem : AutoReversingMigration
   *       Up(): Alter.Table("HomeBlockItem").AddColumn("TextColor").AsString(50).Nullable();
   *     NopEntityBuilder only creates tables on install, so existing databases need
   *     this. Do not mark it [SkipMigrationOnUpdate]; bump plugin.json Version so
   *     the plugin update applies it.
   * 4.  Models/HomeBlockItemModel.cs
   *     TextColor + [NopResourceDisplayName("Plugins.Widgets.HomeBlocks.Fields.TextColor")]
   * 5.  Models/PublicHomeBlockModel.cs   TextColor on PublicHomeBlockItemModel
   * 6.  Components/HomeBlocksViewComponent.cs   TextColor = item.TextColor
   * 7.  Controllers/HomeBlocksController.cs
   *     trim + 50-char check in ValidateItemAsync, copy in ToItem / ToItemModel
   *     and in the add / edit item popup actions
   * 8.  HomeBlocksPlugin.cs   Fields.TextColor / .Hint / .TooLong resources
   * 9.  Views/_CreateOrUpdateHomeBlockItem.cshtml
   *     <nop-editor asp-for="TextColor" /> plus an example swatch like Background
   * 10. Views/PromoCards.cshtml and Views/FeatureCards.cshtml — replace the
   *     placeholder var(--text-high-contrast) in the two style attributes above
   *     with @item.TextColor (plugin default views; a PacificNew override would
   *     shadow them).
   * 11. Views/CreditBanner.cshtml — same swap, on the first item ("media"):
   *       style="--credit-banner-bg: @media.Background; --credit-banner-text: var(--text-main)"
   *     becomes --credit-banner-text: @media.TextColor. It falls back to
   *     --text-main, not --text-high-contrast.
   *
   * Note the feature-card title sits on a translucent white pill, so very light
   * colours wash out there.
   */
  .promo-card {
    --promo-card-padding: 1.25rem;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: var(--promo-card-padding);
    border-radius: var(--border-radius-4);
    background-color: var(--promo-card-bg);
  }

  @media (min-width: 75rem) {
    .promo-card {
      padding-block-end: 2rem;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .promo-card:hover {
      filter: brightness(1.05);
    }
  }

  .promo-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--promo-card-text, var(--text-high-contrast));
  }

  .promo-card__title {
    color: var(--promo-card-text, var(--text-high-contrast));
  }

  .promo-card__title::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-4);
  }

  .promo-card__title:hover,
  .promo-card__title:focus-visible {
    color: var(--promo-card-text, var(--text-high-contrast));
    text-decoration: none;
  }

  .promo-card__title:focus-visible::after {
    outline: 1px solid var(--clr-white);
    outline-offset: 2px;
  }

  .promo-card__media {
    margin-block-start: calc(-1 * (var(--promo-card-padding) + var(--promo-card-overhang)));
  }

  .promo-card__image {
    --promo-card-image-inline-size: 140px;
    --promo-card-image-block-size: 91px;
    inline-size: var(--promo-card-image-inline-size);
    block-size: var(--promo-card-image-block-size);
    object-fit: contain;
    padding: 0.25rem;
  }

  @media (min-width: 48rem) {
    .promo-card__image {
      --promo-card-image-inline-size: 184px;
      --promo-card-image-block-size: 120px;
    }
  }

  .promo-card__highlight {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 15px;
    border-end-start-radius: var(--border-radius-4);
    border-end-end-radius: var(--border-radius-4);
    background-color: var(--clr-white);
    opacity: 0.2;
    pointer-events: none;
  }

  .promo-card__cut {
    position: absolute;
    inset-block-start: -1px;
    inset-inline-end: -1px;
    inline-size: 42px;
    block-size: 42px;
    background-color: var(--clr-white);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    pointer-events: none;
  }

  .promo-card__corner {
    position: absolute;
    inset-block-start: -8px;
    inset-inline-end: -8px;
    color: var(--promo-card-bg);
    pointer-events: none;
  }

  .promo-card__chevron {
    display: block;
  }

  .scroll-progress {
    position: relative;
    block-size: 3px;
    border-radius: 999px;
    background-color: var(--clr-gray-200);
    overflow: hidden;
  }

  @media (min-width: 75rem) {
    .scroll-progress {
      display: none;
    }
  }

  .cart__suggested .scroll-progress {
    display: block;
  }

  @media (min-width: 75rem) {
    .wrapper:has(> .scroll-progress:only-child) {
      display: none;
    }
  }

  .scroll-progress__bar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0;
    border-radius: inherit;
    background-color: var(--clr-accent-500);
  }

  .product-strip__background {
    position: relative;
    background-image: var(--product-strip-background);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100% 144px;
  }

  @media (min-width: 75rem) {
    .product-strip__background {
      background-size: 100% 100%;
    }
  }

  .product-strip__cut {
    position: absolute;
    inset-block-start: 121px;
    inset-inline-start: -1px;
    inline-size: 25px;
    block-size: 25px;
    background-color: var(--clr-white);
    clip-path: polygon(100% 100%, 100% 0, 0 100%);
    pointer-events: none;
  }

  @media (min-width: 75rem) {
    .product-strip__cut {
      inset-block-start: auto;
      inset-block-end: -1px;
    }
  }

  .product-strip__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  @media (min-width: 48rem) {
    .product-strip__list {
      gap: 1.25rem;
    }
  }

  @media (min-width: 75rem) {
    .product-strip__list {
      flex-direction: row;
      gap: 3rem;
    }
  }

  .product-strip__category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-inline-start: 0.75rem;
    padding-block-start: 0.75rem;
  }

  @media (min-width: 48rem) {
    .product-strip__category {
      gap: 1.25rem;
      padding-inline-start: 1.25rem;
      padding-block-start: 1.25rem;
    }
  }

  @media (min-width: 75rem) {
    .product-strip__category {
      flex-direction: column;
      align-items: start;
      width: 100%;
      max-width: 7.75rem;
      padding-block-end: 1.25rem;
    }
  }

  .product-strip__category-icon {
    inline-size: 44px;
    block-size: 44px;
  }

  @media (min-width: 48rem) {
    .product-strip__category-icon {
      inline-size: 52px;
      block-size: 52px;
    }
  }

  .product-strip__category-title {
    color: var(--clr-white);
    font-size: var(--fs-200);
    font-weight: 700;
  }

  @media (min-width: 48rem) {
    .product-strip__category-title {
      font-size: var(--fs-400);
    }
  }

  .product-strip__scroller {
    position: relative;
    min-inline-size: 0;
  }

  .product-strip__items {
    --track-auto-columns: 10rem;
    --track-gap: 0;
    position: relative;
    z-index: 20;
    min-inline-size: 0;
    inline-size: 100%;
    overflow-x: auto;
    padding-inline-start: 0.75rem;
    scrollbar-width: none;
  }

  .product-strip__items::-webkit-scrollbar {
    display: none;
  }

  .product-strip__items > :last-child {
    margin-inline-end: 0.75rem;
  }

  @media (min-width: 48rem) {
    .product-strip__items {
      --track-auto-columns: 11.25rem;
      padding-inline-start: 1.25rem;
    }

    .product-strip__items > :last-child {
      margin-inline-end: 1.25rem;
    }
  }

  @media (min-width: 75rem) {
    .product-strip__items {
      padding-block-end: 0.75rem;
      padding-inline-start: 0;
    }

    .product-strip__items > :last-child {
      margin-inline-end: 0;
    }
  }

  .product-strip__scroll-btn {
    position: absolute;
    inset-block-start: 50%;
    z-index: 30;
    translate: 0 -50%;
  }

  .product-strip__scroll-btn--prev {
    inset-inline-start: -16px;
  }

  .product-strip__scroll-btn--next {
    inset-inline-end: -16px;
  }

  .product-strip__item {
    position: relative;
    display: grid;
  }

  .product-strip__item a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 20;
  }

  .product-strip__item:first-child .card-primary {
    border-inline-end-width: 0;
  }

  @media (min-width: 48rem) {
    .product-strip__item:first-child .card-primary {
      border-inline-end-width: 1px;
    }
  }

  .product-strip__item .card-primary__image {
    inline-size: 7.5rem;
    block-size: 7.5rem;
  }

  @media (min-width: 48rem) {
    .product-strip__item .card-primary__image {
      inline-size: 8.75rem;
      block-size: 7.5rem;
    }
  }

  .product-strip__item .card-primary__body {
    padding: 1rem;
  }

  .product-strip__item--view-all .card-primary {
    grid-template-rows: 1fr;
    place-items: center;
  }

  .product-strip__view-all {
    --cluster-justify: center;
    --cluster-gap: 0.5rem;
    inline-size: 100%;
    block-size: 100%;
    color: var(--text-brand-primary);
  }

  .product-strip__view-all-icon {
    inline-size: 2.125rem;
    block-size: 2.125rem;
  }

  .product-strip__colors {
    position: absolute;
    z-index: 30;
    inset-block-start: 0.5rem;
    left: 0.5rem;
  }

  .product-colors {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .product-strip__color-item {
    flex-shrink: 0;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 999px;
  }

  .product-strip__color-item--light {
    border: 1px solid var(--clr-gray-400);
  }

  .product-strip__colors-more {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  @media (hover: hover) and (pointer: fine) {
    .product-strip__item:not(.product-strip__item--view-all) .card-primary {
      transition: box-shadow 200ms ease;
    }

    .product-strip__item:not(.product-strip__item--view-all):has(.card-primary__link:hover) .card-primary {
      box-shadow: var(--box-shadow-2);
    }

    .product-strip__item--view-all:has(.product-strip__view-all:hover) .card-primary {
      background-color: var(--background-muted);
    }

    .product-strip__view-all:hover {
      color: color-mix(in srgb, var(--text-brand-primary) 80%, var(--clr-black));
      text-decoration: none;
    }
  }

  .newest-products__view-all-link {
    --cluster-gap: 0.25rem;
    color: var(--text-brand-primary);
  }

  .newest-products__view-all-chevron {
    flex-shrink: 0;
    inline-size: 1rem;
    block-size: 1rem;
  }

  .newest-products__scroller {
    position: relative;
    min-inline-size: 0;
  }

  .newest-products__items {
    --track-auto-columns: 10rem;
    --track-gap: 0.5rem;
    position: relative;
    z-index: 20;
    min-inline-size: 0;
    inline-size: 100%;
    overflow-x: auto;
    padding-inline-start: 0.75rem;
    scrollbar-width: none;
  }

  .newest-products__items::-webkit-scrollbar {
    display: none;
  }

  .newest-products__items > :last-child {
    margin-inline-end: 0.75rem;
  }

  @media (min-width: 48rem) {
    .newest-products__items {
      --track-auto-columns: 11.25rem;
      padding-inline-start: 1.25rem;
    }

    .newest-products__items > :last-child {
      margin-inline-end: 1.25rem;
    }
  }

  @media (min-width: 75rem) {
    .newest-products__items {
      --track-gap: 1rem;
      padding-block-end: 0.75rem;
      padding-inline-start: 0;
    }

    .newest-products__items > :last-child {
      margin-inline-end: 0;
    }
  }

  @media (max-width: 74.99rem) {
    .scroll-strip {
      overflow-x: scroll;
      gap: var(--track-gap, 0);
      padding-block-end: 0.75rem;
      scroll-snap-type: inline mandatory;
      scrollbar-width: thin;
      scrollbar-color: var(--clr-accent-500) var(--clr-gray-200);
    }

    .scroll-strip::-webkit-scrollbar {
      display: block;
      height: 6px;
    }

    .scroll-strip::-webkit-scrollbar-track {
      border-radius: 999px;
      background-color: var(--clr-gray-200);
    }

    .scroll-strip::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background-color: var(--clr-accent-500);
    }

    .scroll-strip > * {
      scroll-snap-align: center;
    }
  }

  .newest-products__items:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .newest-products__items.is-dragging,
  .newest-products__items.is-dragging * {
    user-select: none;
  }

  .newest-products__item {
    position: relative;
    display: grid;
  }

  .newest-products__item a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 20;
  }

  .newest-products__item .card-primary {
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--border-radius-5);
  }

  .newest-products__item .card-primary__image {
    inline-size: 7.5rem;
    block-size: 7.5rem;
  }

  @media (min-width: 48rem) {
    .newest-products__item .card-primary__image {
      inline-size: 8.75rem;
      block-size: 7.5rem;
    }
  }

  .newest-products__item .card-primary__body {
    padding: 1rem;
  }

  .newest-products__item--view-all .card-primary {
    grid-template-rows: 1fr;
    place-items: center;
  }

  .newest-products__view-all {
    --cluster-justify: center;
    --cluster-gap: 0.5rem;
    inline-size: 100%;
    block-size: 100%;
    color: var(--text-brand-primary);
  }

  .newest-products__view-all-icon {
    inline-size: 2.125rem;
    block-size: 2.125rem;
  }

  .newest-products__scroll-btn {
    position: absolute;
    inset-block-start: 50%;
    z-index: 30;
    translate: 0 -50%;
  }

  .newest-products__scroll-btn--prev {
    inset-inline-start: -16px;
  }

  .newest-products__scroll-btn--next {
    inset-inline-end: -16px;
  }

  .newest-products__colors {
    position: absolute;
    z-index: 30;
    inset-block-start: 0.5rem;
    left: 0.5rem;
  }

  .newest-products__color-item {
    flex-shrink: 0;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 999px;
  }

  .newest-products__color-item--light {
    border: 1px solid var(--clr-gray-400);
  }

  .newest-products__colors-more {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  @media (hover: hover) and (pointer: fine) {
    .newest-products__item:not(.newest-products__item--view-all) .card-primary {
      transition:
        border-color 150ms var(--ease-out-cubic),
        box-shadow 200ms ease;
    }

    .newest-products__item--view-all:has(.newest-products__view-all:hover) .card-primary {
      background-color: var(--background-muted);
    }

    .newest-products__item:not(.newest-products__item--view-all):has(.card-primary__link:hover) .card-primary {
      border-color: var(--clr-gray-400);
      box-shadow: var(--box-shadow-2);
    }

    .newest-products__view-all-link:hover,
    .newest-products__view-all:hover {
      color: color-mix(in srgb, var(--text-brand-primary) 80%, var(--clr-black));
      text-decoration: none;
    }
  }

  .magazine__panel {
    --magazine-gutter: 0.75rem;
    --magazine-padding-block: 1.25rem;
    --stack-gap: 1rem;
    inline-size: calc(100% - 2 * var(--magazine-gutter));
    max-inline-size: 90rem;
    margin-inline: auto;
    padding-block: var(--magazine-padding-block);
    border: 1px solid var(--clr-gray-900);
    border-radius: var(--border-radius-5);
    background-color: var(--background-soft);
    background-image: linear-gradient(
      -180deg,
      color-mix(in srgb, var(--clr-purple-500) 5%, var(--background-page)),
      color-mix(in srgb, var(--clr-accent-400) 5%, var(--background-page))
    );
  }
  .magazine__panel .wrapper {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: none;
    margin-inline: 0;
  }

  @media (min-width: 48rem) {
    .magazine__panel {
      --magazine-gutter: 1.5rem;
      --magazine-padding-block: 1.75rem;
      --stack-gap: 1.5rem;
    }
  }

  @media (min-width: 75rem) {
    .magazine__panel {
      --magazine-gutter: 5rem;
      --magazine-padding-block: 2.5rem;
      --stack-gap: 2rem;
    }
  }

  .magazine__header {
    inline-size: 100%;
  }

  .magazine__view-all {
    --cluster-gap: 0.25rem;
    color: var(--text-brand-primary);
  }

  .magazine__view-all-chevron {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .magazine__scroller {
    position: relative;
    min-inline-size: 0;
  }

  .magazine__items {
    --track-auto-columns: 10rem;
    --track-gap: 0.5rem;
    position: relative;
    z-index: 20;
    min-inline-size: 0;
    inline-size: 100%;
    overflow-x: auto;
    padding-block: 0.5rem;
    scrollbar-width: none;
  }

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

  @media (min-width: 48rem) {
    .magazine__items {
      --track-auto-columns: 12rem;
      --track-gap: 0.75rem;
    }
  }

  @media (min-width: 75rem) {
    .magazine__items {
      --track-auto-columns: 14rem;
      --track-gap: 1rem;
    }
  }

  .magazine__items:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .magazine__items.is-dragging,
  .magazine__items.is-dragging * {
    user-select: none;
  }

  .magazine__item {
    display: grid;
  }

  .magazine__item-link {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-3);
    background-color: var(--background-page);
    color: var(--text-heading);
    text-decoration: none;
  }

  .magazine__item-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background-color: var(--background-muted);
  }

  .magazine__item-image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .magazine__item-title {
    display: block;
    padding-block: 0.75rem;
    padding-inline: 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.6;
  }

  .magazine__scroll-btn {
    position: absolute;
    inset-block-start: 50%;
    z-index: 30;
    translate: 0 -50%;
  }

  .magazine__scroll-btn--prev {
    inset-inline-start: -16px;
  }

  .magazine__scroll-btn--next {
    inset-inline-end: -16px;
  }

  .magazine__progress {
    margin-block-start: 0.75rem;
  }

  @media (hover: hover) and (pointer: fine) {
    .magazine__item-link {
      transition:
        border-color 150ms var(--ease-out-cubic),
        box-shadow 150ms var(--ease-out-cubic),
        translate 150ms var(--ease-out-cubic);
    }

    .magazine__item-link:hover {
      border-color: var(--clr-gray-400);
      box-shadow: var(--box-shadow-2);
      translate: 0 -2px;
    }

    .magazine__item-image {
      transition: scale 300ms var(--ease-out-cubic);
    }

    .magazine__item-link:hover .magazine__item-image {
      scale: 1.04;
    }

    .magazine__view-all:hover {
      color: color-mix(in srgb, var(--text-brand-primary) 80%, var(--clr-black));
      text-decoration: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .magazine__item-link:hover {
      translate: none;
    }

    .magazine__item-link:hover .magazine__item-image {
      scale: none;
    }
  }

  .promo-banner {
    position: relative;
    display: grid;
  }

  .promo-banner > * {
    grid-area: 1 / 1;
  }

  .promo-banner__image {
    inline-size: 100%;
    max-block-size: 220px;
    object-fit: cover;
    object-position: var(--promo-banner-image-object-position, right);
    border-radius: var(--promo-banner-image-radius, var(--border-radius-4));
  }

  .promo-banner__chevron {
    place-self: start end;
    padding: 0.5rem;
  }

  @media (min-width: 48rem) {
    .promo-banner__chevron {
      padding: 1rem;
    }
  }

  .promo-banner__body {
    display: grid;
    align-self: end;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 0.5rem;
  }

  @media (min-width: 48rem) {
    .promo-banner__body {
      padding: 1rem;
    }
  }

  .promo-banner__body > * {
    grid-area: 1 / 1;
  }

  .promo-banner__decor picture {
    block-size: 100%;
  }

  .promo-banner__decor-image {
    block-size: 100%;
    max-block-size: 87px;
  }

  .promo-banner__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
  }

  @media (min-width: 48rem) {
    .promo-banner__content {
      gap: 0.5rem;
      padding-block: 1rem;
      padding-inline: 1rem;
    }
  }

  .promo-banner__title::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--promo-banner-image-radius, var(--border-radius-4));
  }

  @media (hover: hover) and (pointer: fine) {
    .promo-banner__title:hover {
      text-decoration: none;
      opacity: 0.8;
    }
  }

  .promo-banner__title:focus-visible {
    text-decoration: none;
  }

  .promo-banner__title:focus-visible::after {
    outline: 1px solid var(--clr-white);
    outline-offset: 2px;
  }

  .lend-tech__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-block-size: 48px;
    padding-inline: 0.5rem;
    color: var(--clr-white);
    background-image: url('../img/lend-tech/link-bg.svg?v=2');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  @media (min-width: 48rem) {
    .lend-tech__link {
      min-block-size: 60px;
      padding-inline: 1.5rem;
      background-image: url('../img/lend-tech/link-bg-desktop.svg?v=2');
    }
  }

  .lend-tech__link-text {
    font-size: var(--font-size-2xs);
    font-weight: 400;
    color: inherit;
    text-decoration: none;
  }

  @media (min-width: 48rem) {
    .lend-tech__link-text {
      font-size: var(--font-size-sm);
    }
  }

  .lend-tech__link-text::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .lend-tech__chevron {
    flex-shrink: 0;
    inline-size: 18px;
    block-size: 18px;
  }

  .lend-tech__media {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    justify-items: center;
    border: 1px solid var(--border-default);
    padding: 0.5rem;
  }

  @media (min-width: 48rem) {
    .lend-tech__media {
      grid-template-columns: repeat(4, 1fr);
      gap: 0.75rem;
      padding-block: 1.25rem;
      padding-inline: 0;
    }
  }

  @media (min-width: 75rem) {
    .lend-tech__media {
      gap: 0.5rem;
      padding-block: 1.25rem;
      padding-inline: 1.25rem;
    }
  }

  .lend-tech__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  @media (min-width: 48rem) {
    .lend-tech__item {
      gap: 0.75rem;
    }
  }

  @media (min-width: 75rem) {
    .lend-tech__item {
      flex-direction: row;
      gap: 0.5rem;
    }
  }

  .lend-tech__icon {
    display: grid;
    place-items: center;
    inline-size: 52px;
    block-size: 52px;
  }

  @media (min-width: 48rem) {
    .lend-tech__icon {
      inline-size: 72px;
      block-size: 72px;
    }
  }

  .lend-tech__icon img {
    inline-size: 100%;
    block-size: 100%;
  }

  .lend-tech__title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-main);
  }

  @media (min-width: 48rem) {
    .lend-tech__title {
      font-size: var(--font-size-sm);
    }
  }

  .feature-card {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr;
  }

  @media (hover: hover) and (pointer: fine) {
    .feature-card:hover {
      filter: brightness(1.05);
    }
  }

  .feature-card__content {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1.25rem;
    background-image: var(--feature-card-bg);
    border: var(--feature-card-border);
    border-radius: var(--border-radius-5);
    color: var(--feature-card-text, var(--text-high-contrast));
  }

  .feature-card__title {
    inline-size: fit-content;
    margin-block-end: auto;
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
    background-color: hsl(0 0% 100% / 20%);
    color: var(--feature-card-text, var(--text-high-contrast));
  }

  @media (min-width: 48rem) {
    .feature-card__title {
      padding-block: 0.5rem;
      padding-inline: 1.25rem;
    }
  }

  .feature-card__title::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-5);
  }

  .feature-card__title:hover,
  .feature-card__title:focus-visible {
    color: var(--feature-card-text, var(--text-high-contrast));
    text-decoration: none;
  }

  .feature-card__title:focus-visible::after {
    outline: 1px solid var(--clr-white);
    outline-offset: 2px;
  }

  .feature-card__media {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    pointer-events: none;
  }

  .feature-card__image {
    inline-size: 100px;
    block-size: 100px;
    object-fit: cover;
  }

  @media (min-width: 48rem) {
    .feature-card__image {
      inline-size: 120px;
      block-size: 120px;
    }
  }

  @media (min-width: 75rem) {
    .feature-card__image {
      inline-size: 150px;
      block-size: 150px;
    }
  }

  .credit-banner {
    --credit-banner-image-inline-size: 127px;
    position: relative;
    display: grid;
  }

  @media (min-width: 48rem) {
    .credit-banner {
      --credit-banner-image-inline-size: 225px;
    }
  }

  @media (min-width: 75rem) {
    .credit-banner {
      --credit-banner-image-inline-size: 300px;
    }
  }

  .credit-banner > * {
    grid-area: 1 / 1;
  }

  .credit-banner__media {
    align-self: start;
    justify-self: start;
    margin-block-start: -1rem;
    z-index: 30;
    pointer-events: none;
  }

  @media (min-width: 48rem) {
    .credit-banner__media {
      margin-block-start: -3.75rem;
    }
  }

  .credit-banner__image {
    inline-size: var(--credit-banner-image-inline-size);
    block-size: 71px;
    object-fit: cover;
  }

  @media (min-width: 48rem) {
    .credit-banner__image {
      block-size: 170px;
    }
  }

  @media (min-width: 75rem) {
    .credit-banner__image {
      block-size: 200px;
    }
  }

  .credit-banner__body {
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding-block: 1.25rem;
    padding-inline: 2rem;
    border-radius: var(--border-radius-5);
    background-image: var(--credit-banner-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--credit-banner-text, var(--text-main));
  }

  @media (min-width: 48rem) {
    .credit-banner__body {
      gap: 3rem;
    }
  }

  @media (min-width: 75rem) {
    .credit-banner__body {
      flex-direction: row;
      justify-content: space-between;
      gap: 1rem;
    }
  }

  .credit-banner__title {
    padding-inline-start: calc(var(--credit-banner-image-inline-size) / 2 + 1rem);
  }

  @media (min-width: 75rem) {
    .credit-banner__title {
      align-self: center;
    }
  }

  .credit-banner__title-link {
    padding-inline-start: 1rem;
    color: var(--credit-banner-text, var(--text-main));
    font-size: var(--font-size-lg);
    text-decoration: none;
  }

  @media (min-width: 48rem) {
    .credit-banner__title-link {
      font-size: var(--font-size-2xl);
    }
  }

  .credit-banner__title-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-5);
  }

  .credit-banner__title-link:focus-visible::after {
    outline: 1px solid var(--clr-white);
    outline-offset: 2px;
  }

  .credit-banner__title-link span {
    position: relative;
    font-weight: 700;
  }

  .credit-banner__title-link span::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: -0.125rem;
    block-size: 2px;
    background-color: currentColor;
  }

  .credit-banner__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    row-gap: 0.5rem;
    max-inline-size: 35rem;
    justify-content: center;
  }

  @media (min-width: 48rem) {
    .credit-banner__features {
      gap: 3rem;
      row-gap: 0.75rem;
      padding-inline-start: 1rem;
    }
  }

  @media (min-width: 75rem) {
    .credit-banner__features {
      gap: 1rem;
      padding-inline-start: 0;
      padding-inline-end: 3.75rem;
    }
  }

  .credit-banner__feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .credit-banner__icon {
    display: grid;
    place-items: center;
  }

  .credit-banner__text {
    font-size: var(--font-size-2xs);
    font-weight: 400;
    white-space: nowrap;
  }

  @media (min-width: 48rem) {
    .credit-banner__text {
      font-size: var(--font-size-md);
    }
  }

  .header-account-dialog .full-page-dialog__close {
    margin-inline: 0.75rem;
  }

  @media (min-width: 48rem) {
    .header-account-dialog .full-page-dialog__close {
      margin-inline: 1.25rem;
    }
  }

  .close-button {
    display: grid;
    place-items: center;
    padding: 0.5rem;
    aspect-ratio: 1;
    border-radius: 999px;
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--clr-accent-600) 5%, transparent),
      color-mix(in srgb, var(--clr-brand-500) 5%, transparent)
    );
  }

  .close-button:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .close-button:hover {
      color: var(--text-brand-primary);
      background: linear-gradient(
        to right,
        color-mix(in srgb, var(--clr-accent-600) 15%, transparent),
        color-mix(in srgb, var(--clr-brand-500) 15%, transparent)
      );
    }
  }

  .radio {
    display: grid;
    grid-template-columns: 1.25rem auto;
    align-items: center;
    gap: 0.5em;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
  }

  @media (min-width: 75rem) {
    .radio {
      font-size: var(--font-size-sm);
    }
  }

  .radio input[type='radio'] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    cursor: pointer;
    display: grid;
    place-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--clr-gray-400);
    border-radius: 50%;
    background-color: var(--clr-white);
    color: currentColor;
  }

  .radio input[type='radio']::before {
    content: '';
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    font-size: 0.875rem;
    box-shadow: inset 1em 1em var(--clr-brand-500);
  }

  .radio input[type='radio']:checked {
    padding: 0.1875rem;
    border-color: var(--clr-brand-500);
  }

  .radio input[type='radio']:checked::before {
    transform: scale(1);
  }

  .radio input[type='radio']:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .radio:hover input[type='radio'] {
      border-color: var(--clr-brand-500);
    }
  }

  .back-button__icon--mobile {
    display: block;
  }

  .back-button__icon--tablet {
    display: none;
  }

  @media (min-width: 48rem) {
    .back-button {
      padding: 10px;
    }

    .back-button__icon--mobile {
      display: none;
    }

    .back-button__icon--tablet {
      display: block;
    }
  }

  .category-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background-image: linear-gradient(90deg, #9866c4 50%, #eb57b5 100%);
  }

  .site-categories {
    --stack-gap: 0;
  }

  .site-categories__item {
    --cluster-justify: flex-start;
    --cluster-gap: 0.75rem;
    --cluster-wrap: nowrap;
    padding-block: 0.75rem;
    border-block-end: 1px solid var(--clr-gray-200);
  }

  .site-categories__item:last-child {
    border-block-end: 0;
  }

  .site-categories__item--2,
  .site-categories__item--3 {
    padding-block: 0.625rem;
  }

  .site-categories__item--packed .site-categories__open {
    margin-inline-start: 0;
  }

  .site-categories__picture {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
  }

  @media (min-width: 48rem) {
    .site-categories__picture {
      width: 3rem;
      height: 3rem;
    }
  }

  .site-categories__link {
    min-width: 0;
  }

  .site-categories__link:hover,
  .site-categories__link:focus-visible {
    text-decoration: none;
  }

  .site-categories__link--1 {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--text-brand-primary);
  }

  .site-categories__link--2 {
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--text-main);
  }

  .site-categories__link--3 {
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--text-heading);
  }

  .site-categories__link--3:hover,
  .site-categories__link--3:focus-visible {
    color: var(--text-heading);
  }

  .full-page-dialog .site-categories__link--2,
  .full-page-dialog .site-categories__link--3 {
    font-size: var(--font-size-sm);
  }

  .site-categories__link-chevron {
    display: inline-flex;
    margin-inline-start: 0.25rem;
    vertical-align: middle;
    color: var(--text-main);
  }

  .site-categories__link-chevron svg {
    display: block;
  }

  .site-categories__open {
    box-sizing: content-box;
    flex-shrink: 0;
    margin-inline-start: auto;
    padding: 0.25rem;
    color: var(--text-main);
  }

  .site-categories__open svg {
    display: block;
  }

  .site-categories__open:hover,
  .site-categories__open:focus-visible {
    color: var(--text-brand-primary);
  }

  .site-categories__open:focus-visible {
    outline: 2px solid var(--text-brand-primary);
    outline-offset: 0.125rem;
  }

  .logo-link {
    display: block;
    width: fit-content;
    color: inherit;
    text-decoration: none;
  }

  .logo-link:hover,
  .logo-link:focus-visible {
    color: inherit;
    text-decoration: none;
  }

  .logo-img {
    width: 120px;
    height: auto;
  }

  @media (min-width: 48rem) {
    .logo-img {
      width: 160px;
    }
  }

  @media (min-width: 78.8125rem) {
    .logo-img {
      width: 200px;
    }
  }

  .auth-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }

  @media (min-width: 48rem) {
    .auth-header .auth-icon {
      width: 42px;
      height: 42px;
    }
  }

  @media (min-width: 75rem) {
    .auth-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .auth-header .auth-icon {
      width: 64px;
      height: 64px;
    }
  }

  @media (min-width: 75rem) {
    .html-registration-result-page .auth-header,
    .html-account-activation-page .auth-header {
      justify-content: center;
      align-items: center;
    }

    .html-registration-result-page .auth-fields,
    .html-account-activation-page .auth-fields {
      text-align: center;
    }
  }

  .auth-description {
    font-size: var(--font-size-2xs);
    color: var(--text-main);
    margin-block: 0.25rem;
  }

  @media (min-width: 48rem) {
    .auth-description {
      margin-block: 0.5rem;
    }
  }

  .auth-result {
    --cluster-gap: 1rem;
    --cluster-wrap: nowrap;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block-start: 1rem;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    max-width: min(18.75rem, calc(100% - 7rem));
  }

  .auth-result .auth-result__icon {
    flex-shrink: 0;
  }

  .auth-error {
    display: none;
    color: var(--background-danger);
    font-size: var(--font-size-2xs);
    margin-block-start: 1rem;
  }

  .auth-error.validation-summary-errors {
    display: block;
  }

  .auth-disabled {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-block: 2rem;
    margin-block-start: 1rem;
  }

  @media (min-width: 48rem) {
    .auth-disabled {
      padding-block: 3rem;
    }
  }

  @media (min-width: 75rem) {
    .auth-disabled {
      padding-block: 4rem;
    }
  }

  .auth-disabled .auth-disabled__icon {
    margin-block-end: 1.5rem;
  }

  .auth-disabled .auth-disabled__text {
    font-size: var(--font-size-sm);
    color: var(--clr-gray-500);
    line-height: 1.6;
    margin-block-end: 2rem;
    max-width: 24rem;
  }

  @media (min-width: 48rem) {
    .auth-disabled .auth-disabled__text {
      font-size: var(--font-size-md);
    }
  }

  .auth-disabled .auth-disabled__actions {
    margin-block-start: 1rem;
    width: 100%;
    max-width: min(20rem, 100%);
  }

  .auth-fields {
    --stack-gap: 1rem;
    margin-block-start: 2.5rem;
  }

  @media (min-width: 48rem) {
    .auth-fields {
      --stack-gap: 1.5rem;
    }
  }

  .text-field {
    --stack-gap: 0.5rem;
  }

  .text-field .text-field-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-heading);
  }

  .text-field .text-field-box {
    position: relative;
  }

  :is(.text-field .text-field-box):has(.phone-prefix) .text-input {
    padding-inline-start: 5.5rem;
  }

  :is(.text-field .text-field-box):has(.password-toggle) .text-input {
    padding-inline-end: 2.75rem;
  }

  .text-field .text-input {
    width: 100%;
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-heading);
    background-color: var(--background-surface);
    border: 1px solid var(--clr-gray-500);
    border-radius: var(--border-radius-2);
    caret-color: var(--text-brand-primary);
    position: relative;
    z-index: 10;
    padding-block: 0.75rem;
    padding-inline: 0.625rem;
    transition:
      border-color 200ms ease,
      outline-color 200ms ease;
  }

  :is(.text-field .text-input)::placeholder {
    direction: rtl;
    text-align: right;
    color: var(--clr-gray-400);
  }

  :is(.text-field .text-input):hover {
    border-color: var(--text-brand-primary);
  }

  :is(.text-field .text-input):focus-visible {
    border-color: transparent;
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 0;
  }

  .is-invalid:is(.text-field .text-input),
  .login__input--invalid:is(.text-field .text-input),
  :is(.text-field .text-input):invalid:not(:focus-visible):not(:placeholder-shown),
  :is(.text-field .text-input):user-invalid:not(:focus-visible) {
    border-color: var(--background-danger);
  }

  .is-invalid:is(.text-field .text-input):focus-visible,
  .login__input--invalid:is(.text-field .text-input):focus-visible {
    border-color: transparent;
    outline-color: var(--background-danger);
  }

  .text-field .text-input-ltr {
    direction: ltr;
    text-align: left;
  }

  .text-field .phone-prefix {
    position: absolute;
    top: 2px;
    left: 2px;
    height: calc(100% - 4px);
    border-radius: 0.3125rem;
    background-color: var(--background-muted);
    width: fit-content;
    padding-inline: 0.625rem;
    z-index: 20;
    pointer-events: none;
  }

  .text-field .phone-prefix-code {
    color: var(--text-heading);
  }

  .text-field .field-hint {
    display: block;
    font-size: var(--font-size-text);
    color: var(--clr-gray-500);
    padding-inline-start: 0.625rem;
  }

  .text-field .field-error {
    display: none;
    color: var(--background-danger);
    font-size: var(--font-size-2xs);
    padding-inline-start: 0.625rem;
  }

  :is(.text-field .field-error):not(:empty) {
    display: block;
  }

  .text-field .text-input[type='password']::-ms-reveal,
  .text-field .text-input[type='password']::-ms-clear,
  .text-field .text-input::-ms-clear,
  .text-field .text-input::-ms-reveal {
    display: none;
  }

  .text-field .password-toggle {
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: var(--border-radius-1);
    color: var(--text-main);
    z-index: 20;
  }

  :is(.text-field .password-toggle):hover {
    opacity: 0.7;
  }

  :is(.text-field .password-toggle):focus-visible {
    outline: 2px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .text-field .password-toggle-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  .text-field .password-toggle [data-password-icon='visible'] {
    display: none;
  }

  .text-field .password-toggle.is-revealed [data-password-icon='visible'] {
    display: block;
  }

  .text-field .password-toggle.is-revealed [data-password-icon='hidden'] {
    display: none;
  }

  @media (min-width: 48rem) {
    .text-field .text-field-box:has(.phone-prefix) .text-input {
      padding-inline-start: 6.5rem;
    }

    .text-field .text-field-box:has(.password-toggle) .text-input {
      padding-inline-end: 3.5rem;
    }

    .text-field .text-input {
      padding-block: 1rem;
      padding-inline: 1rem;
    }

    .text-field .phone-prefix {
      top: 5px;
      left: 5px;
      bottom: 5px;
      height: auto;
      padding: 1rem;
    }

    .text-field .password-toggle {
      left: 1rem;
    }
  }

  @media (min-width: 75rem) {
    .text-field .text-field-label {
      font-size: var(--font-size-sm);
    }
  }
  .captcha-check .captcha-check__control {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: fit-content;
    cursor: pointer;
  }

  .captcha-check .captcha-check__input {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    border: 1px solid var(--clr-gray-500);
    border-radius: 0.1875rem;
    background-color: var(--background-surface);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  :is(.captcha-check .captcha-check__input):hover {
    border-color: var(--text-brand-primary);
  }

  :is(.captcha-check .captcha-check__input):checked {
    background-color: var(--text-brand-primary);
    border-color: var(--text-brand-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2L5 8.7L9.5 3.5' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0.75rem;
  }

  .is-invalid:is(.captcha-check .captcha-check__input),
  :is(.captcha-check .captcha-check__input):user-invalid {
    border-color: var(--background-danger);
  }

  :is(.captcha-check .captcha-check__input):focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 0;
  }

  .captcha-check .captcha-check__input {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.4;
  }

  .password-recovery__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-block-start: 2.5rem;
    padding: 0.25rem;
    border-radius: 0.3125rem;
    background-color: var(--background-muted);
  }

  .password-recovery__toggle-btn {
    flex-grow: 1;
    width: 100%;
    padding-block: 0.45rem;
    padding-inline: 0.7rem;
    border-radius: 0.3125rem;
    color: var(--text-brand-primary);
    font-weight: 700;
    transition:
      background-color 200ms ease,
      color 200ms ease;
  }

  .password-recovery__toggle-btn[aria-selected='true'],
  .password-recovery__toggle-btn.password-recovery__toggle-btn--active {
    color: var(--text-high-contrast);
    background: linear-gradient(90deg, var(--clr-accent-500), var(--clr-brand-500));
    box-shadow: 0 2px 6px hsla(0, 0%, 0%, 6%);
  }

  .password-recovery__toggle-btn:hover:not([aria-selected='true']) {
    text-decoration: underline;
  }

  .password-recovery__toggle-btn:focus-visible {
    outline: 2px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .password-recovery__panels {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .password-recovery__panel {
    width: 100%;
    margin-block-start: 1rem;
  }

  .password-recovery__panel form {
    width: 100%;
  }

  .password-recovery__panel .auth-fields {
    margin-block-start: 0;
  }

  .activation-code__mobile-info {
    --cluster-justify: space-between;
    --cluster-gap: 1rem;
    --cluster-wrap: nowrap;
    width: 100%;
  }

  .activation-code__mobile-label {
    color: var(--clr-gray-500);
  }

  .activation-code__mobile-number {
    font-weight: 700;
  }

  .activation-code__otp-container {
    --cluster-justify: center;
    --cluster-gap: 1rem;
    --cluster-wrap: nowrap;
    position: relative;
    width: 100%;
  }

  .activation-code__otp-input {
    width: 100%;
    flex-grow: 1;
    aspect-ratio: 1 / 1;
    max-width: 3.5rem;
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-heading);
    background-color: var(--background-surface);
    border: 2px solid var(--clr-gray-500);
    border-radius: var(--border-radius-3);
    transition: border-color 200ms ease;
  }

  .activation-code__otp-input:focus {
    outline: none;
  }

  .activation-code__otp-input:focus-visible {
    border-color: transparent;
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 0;
  }

  .activation-code__otp-input.login__input--invalid,
  .activation-code__otp-input.is-invalid {
    border-color: var(--background-danger);
    background-color: hsla(0, 70%, 95%, 0.5);
  }

  .activation-code__otp-input.login__input--invalid:focus-visible,
  .activation-code__otp-input.is-invalid:focus-visible {
    border-color: transparent;
    outline-color: var(--background-danger);
  }

  .activation-code__timer-wrapper {
    --cluster-justify: center;
    width: 100%;
  }

  .activation-code__resend-link--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .activation-code__validation-error {
    font-weight: 500;
    color: var(--background-danger);
  }

  .activation-code__validation-error:empty {
    display: none;
  }

  .auth-submit {
    position: relative;
    margin-block-start: 1rem;
  }

  @media (min-width: 48rem) {
    .auth-submit {
      margin-block-start: 2rem;
    }
  }

  .btn-cut {
    display: inline-block;
  }

  .btn-cut:has([data-width='full-width']) {
    display: block;
    width: 100%;
  }

  .btn-cut:has([data-width='fit-width']) {
    width: fit-content;
  }

  .btn-cut:has(.btn-primary:focus-visible),
  .btn-cut:has(.btn-secondary:focus-visible) {
    outline: 2px solid var(--text-brand-primary);
    outline-offset: 2px;
    border-radius: 0.3125rem;
  }

  .btn-cut .btn-primary:focus-visible,
  .btn-cut .btn-secondary:focus-visible {
    outline: none;
  }

  .btn-cut .cart__sticky-bar-submit {
    --btn-padding-block: 0.875rem;
    --btn-padding-inline: 2rem;
    --btn-cut-x: 15%;
    --btn-cut-y: 40%;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  @media (min-width: 48rem) {
    .btn-cut .cart__sticky-bar-submit {
      --btn-padding-block: 1.25rem;
      --btn-padding-inline: 2.5rem;
    }
  }

  .btn-cut .cart__summary-submit-btn {
    --btn-cut-x: 12%;
    --btn-cut-y: 40%;
  }

  .btn-primary {
    --btn-bg: linear-gradient(to right, var(--clr-accent-500), var(--clr-brand-500));
    --btn-bg-hover: linear-gradient(to left, var(--clr-accent-500), var(--clr-brand-500));
    isolation: isolate;
    position: relative;
    padding-block: var(--btn-padding-block, 1rem);
    padding-inline: var(--btn-padding-inline, 1rem);
    border-radius: 0.3125rem;
    overflow: hidden;
    background: var(--btn-bg);
    color: var(--text-high-contrast);
    font-size: var(--font-size-text);
    text-align: center;
    clip-path: polygon(var(--btn-cut-x, 7%) -3%, 100% 0%, 100% 100%, 0 100%, 0 var(--btn-cut-y, 37%));
    transition: transform 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -10;
    border-radius: inherit;
    background: var(--btn-bg-hover);
    opacity: 0;
    transition: opacity 300ms ease-in-out;
  }

  .btn-primary:hover,
  .btn-primary:focus-visible {
    color: var(--text-high-contrast);
    text-decoration: none;
  }

  .btn-primary:hover::before,
  .btn-primary:focus-visible::before {
    opacity: 1;
  }

  .btn-primary:focus-visible {
    outline: 2px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .btn-primary:active {
    transform: scale(0.97);
  }

  .btn-primary[data-width='full-width'],
  .btn-secondary[data-width='full-width'] {
    width: 100%;
  }

  .btn-primary[data-width='fit-width'],
  .btn-secondary[data-width='fit-width'] {
    width: fit-content;
  }

  .btn-primary[data-cut='false'],
  .btn-secondary[data-cut='false'] {
    clip-path: none;
  }

  @media (min-width: 48rem) {
    .btn-primary {
      --btn-padding-inline: 1.5rem;
      font-size: var(--font-size-md);
    }
  }

  a.btn-primary {
    display: inline-block;
    text-decoration: none;
  }

  .btn-secondary {
    padding-block: 1rem;
    padding-inline: 1rem;
    border: 1px solid var(--clr-gray-400);
    border-radius: 0.3125rem;
    background: var(--clr-white);
    color: var(--text-main);
    font-size: var(--font-size-text);
    text-align: center;
    cursor: pointer;
    clip-path: polygon(7% -3%, 100% 0%, 100% 100%, 0 100%, 0 37%);
    transition:
      color 200ms ease,
      border-color 200ms ease;
  }

  .btn-secondary:hover,
  .btn-secondary:focus-visible {
    border-color: var(--clr-brand-500);
    color: var(--text-brand-primary);
    text-decoration: none;
  }

  .btn-secondary:active {
    transform: scale(0.97);
  }

  .btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  a.btn-secondary {
    display: inline-block;
  }

  @media (min-width: 48rem) {
    .btn-secondary {
      padding-inline: 1.5rem;
      font-size: var(--font-size-md);
    }
  }

  .btn-primary-icon {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 20;
    transform: translateY(-60%);
    pointer-events: none;
  }

  .auth-links {
    --stack-gap: 0.25rem;
    align-items: center;
    margin-block-start: 1rem;
    text-align: center;
  }

  @media (min-width: 48rem) {
    .auth-links {
      margin-block-start: 2rem;
    }
  }

  .auth-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .text-link {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-link-color, var(--text-brand-primary));
    padding: 0.125rem 0.25rem;
  }

  .text-link[data-tone='muted'] {
    --text-link-color: var(--clr-gray-500);
  }

  .text-link:hover {
    text-decoration: underline;
  }

  .text-link:focus-visible {
    outline: 2px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .site-breadcrumb__list,
  .site-breadcrumb__item {
    --cluster-gap: 0.625rem;
  }

  .site-breadcrumb__link[aria-current='page'] {
    color: var(--clr-gray-500);
    pointer-events: none;
    cursor: default;
  }

  .site-breadcrumb__link[aria-current='page']:hover {
    text-decoration: none;
  }

  .site-breadcrumb__separator {
    display: flex;
  }

  .site-breadcrumb__link {
    font-size: var(--font-size-2xs);
    font-weight: 500;
  }

  @media (min-width: 48rem) {
    .site-breadcrumb__link {
      font-size: var(--font-size-sm);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .site-breadcrumb__link {
      transition: color 200ms var(--ease-out-cubic);
    }

    .site-breadcrumb__link:hover {
      color: var(--text-brand-primary);
      text-decoration: none;
    }
  }

  @media (max-width: 74.99rem) {
    .site-breadcrumb__list {
      --cluster-wrap: nowrap;
    }

    .site-breadcrumb__item {
      flex-shrink: 0;
    }

    .site-breadcrumb__item:last-child {
      padding-inline-end: var(--wrapper-padding);
    }

    .site-breadcrumb__link {
      padding-block: 0.5rem;
      padding-inline: 1.25rem;
      border-radius: var(--border-radius-4);
      background-color: var(--background-surface);
    }
  }

  @media (min-width: 48rem) and (max-width: 74.99rem) {
    .site-breadcrumb__link {
      padding-block: 0.75rem;
      border-radius: var(--border-radius-5);
    }
  }

  .search-field {
    position: relative;
  }

  .search-field__icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  .search-field__clear {
    position: absolute;
    left: 20px;
    top: 50%;
    z-index: 20;
    transform: translateY(-50%);
    display: none;
    place-items: center;
  }

  .search-field:has(.search-field__input:not(:placeholder-shown)) .search-field__clear {
    display: grid;
  }

  .search-field:has(.search-field__input:not(:placeholder-shown)) .search-field__input {
    padding-inline-end: 3rem;
  }

  .search-field__clear svg {
    width: 14px;
    height: 14px;
  }

  @media (min-width: 48rem) {
    .search-field__clear svg {
      width: 18px;
      height: 18px;
    }
  }

  .search-field__clear:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .search-field__icon svg {
    width: 18px;
    height: 18px;
  }

  @media (min-width: 48rem) {
    .search-field__icon svg {
      width: 24px;
      height: 24px;
    }
  }

  .search-field__input {
    width: 100%;
    padding-inline-start: 3rem;
    padding-inline-end: 1rem;
    padding-block: 0.75rem;
    border-radius: var(--border-radius-2);
    border: 0;
    background-color: var(--background-muted);
    color: var(--text-main);
    font-size: var(--font-size-xs);
    font-weight: 500;
  }

  @media (min-width: 48rem) {
    .search-field__input {
      padding-block: 1rem;
      font-size: var(--font-size-sm);
    }
  }

  @media (min-width: 75rem) {
    .search-field__input {
      border: 1px solid var(--background-muted);
      background-color: transparent;
    }
  }

  .search-field__input::-webkit-search-cancel-button,
  .search-field__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
  }

  .search-field__input:focus-visible {
    outline: 1px solid var(--text-brand-primary);
  }

  .site-header__categories:focus-visible {
    outline: 1px solid var(--text-brand-primary);
  }

  .site-pager {
    --site-pager-gradient: linear-gradient(to right, var(--clr-accent-600), var(--clr-brand-500));
    --site-pager-gradient-soft: linear-gradient(
      to right,
      color-mix(in srgb, var(--clr-accent-600) 5%, transparent),
      color-mix(in srgb, var(--clr-brand-500) 5%, transparent),
      color-mix(in srgb, var(--clr-accent-600) 5%, transparent)
    );
  }

  .site-pager__prev,
  .site-pager__next {
    display: grid;
    place-items: center;
    color: var(--text-main);
    border-radius: var(--border-radius-4);
    transition:
      color 0.2s ease-out,
      background-color 0.2s ease-out,
      opacity 0.2s ease-out;
  }

  .site-pager__prev:hover,
  .site-pager__next:hover {
    color: var(--text-brand-primary);
  }

  .site-pager__prev:focus-visible,
  .site-pager__next:focus-visible {
    outline: 2px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  a.site-pager__prev,
  a.site-pager__next,
  .site-pager__desktop-link {
    cursor: pointer;
  }

  .site-pager__prev--disabled,
  .site-pager__next--disabled {
    opacity: 0.45;
    pointer-events: none;
  }

  .site-pager__prev:active,
  .site-pager__next:active {
    opacity: 0.85;
  }

  .site-pager__mobile,
  .site-pager__desktop {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: center;
    gap: 0.5rem;
    background: var(--site-pager-gradient-soft);
    border-radius: var(--border-radius-4);
  }

  .site-pager__mobile {
    padding-block: 0.25rem;
    padding-inline: 1.25rem;
  }

  .site-pager__mobile-label {
    color: var(--text-high-contrast);
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    background: var(--site-pager-gradient);
    border-radius: var(--border-radius-4);
  }

  .site-pager__desktop {
    display: none;
  }

  @media (min-width: 78.8125rem) {
    .site-pager__mobile {
      display: none;
    }

    .site-pager__desktop {
      display: grid;
      padding-block: 0.5rem;
      padding-inline: 2rem;
    }

    .site-pager__desktop-list {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .site-pager__desktop-item,
    .site-pager__desktop-item--current {
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1;
      inline-size: 2rem;
    }

    .site-pager__desktop-item--ellipsis {
      pointer-events: none;
    }

    .site-pager__desktop-ellipsis {
      display: grid;
      place-items: center;
    }

    .site-pager__desktop-link,
    .site-pager__desktop-current {
      display: grid;
      place-items: center;
      font-size: var(--font-size-md);
      font-weight: 500;
      padding-block: 0.25rem;
      padding-inline: 0;
      border-radius: var(--border-radius-4);
      inline-size: 100%;
      block-size: 100%;
    }

    .site-pager__desktop-link {
      color: var(--text-main);
      background: transparent;
      transition:
        color 0.2s ease-out,
        background-color 0.2s ease-out,
        opacity 0.2s ease-out;
    }

    .site-pager__desktop-link:hover {
      color: var(--text-brand-primary);
      background: color-mix(in srgb, var(--text-brand-primary) 10%, transparent);
    }

    .site-pager__desktop-current {
      color: var(--text-high-contrast);
      background: var(--site-pager-gradient);
    }
  }

  .manufacturer-intro__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1rem;
  }

  .manufacturer-intro__logo {
    inline-size: 70px;
    block-size: 42px;
    object-fit: contain;
  }

  .manufacturer-featured {
    margin-block-start: 2rem;
  }

  .manufacturer-featured__title {
    margin-block-end: 1rem;
  }

  @media (min-width: 48rem) {
    .manufacturer-intro__logo {
      inline-size: 110px;
      block-size: 65px;
    }
  }

  @media (min-width: 75rem) {
    .manufacturer-intro__logo {
      inline-size: 173px;
      block-size: 98px;
    }
  }

  .description-more__content {
    max-block-size: 4.125rem;
    overflow: hidden;
  }

  .description-more__content :where(ul, ol, li, p, h1, h2, h3, h4, h5, h6, blockquote, dl, dt, dd, figure) {
    margin: revert;
    padding: revert;
    list-style: revert;
  }

  .description-more.is-expanded .description-more__content {
    max-block-size: none;
  }

  .description-more__actions {
    margin-block-start: 1.25rem;
  }

  .description-more__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .description-more__label--less {
    display: none;
  }

  .description-more.is-expanded .description-more__label--more {
    display: none;
  }

  .description-more.is-expanded .description-more__label--less {
    display: block;
  }

  .description-more__toggle[hidden] {
    display: none;
  }

  .description-more__toggle:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .description-more__icon {
    inline-size: 14px;
    block-size: 14px;
    transition: rotate 0.2s ease-out;
  }

  .description-more.is-expanded .description-more__icon {
    rotate: 180deg;
  }

  @media (min-width: 48rem) {
    .description-more__icon {
      inline-size: 18px;
      block-size: 18px;
    }
  }

  .plp-faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.3s var(--ease-out-cubic),
      content-visibility 0.3s var(--ease-out-cubic);
    transition-behavior: allow-discrete;
  }

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

  @media (prefers-reduced-motion: reduce) {
    .plp-faq details::details-content {
      transition: none;
    }
  }

  .plp-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
  }

  .plp-faq__answer {
    margin-block-start: 0.5rem;
    white-space: pre-line;
  }

  .plp-faq__icon {
    flex-shrink: 0;
    inline-size: 14px;
    block-size: 14px;
    transition: rotate 0.2s ease-out;
  }

  .plp-faq__item[open] .plp-faq__icon {
    rotate: 180deg;
  }

  @media (min-width: 48rem) {
    .plp-faq__icon {
      inline-size: 18px;
      block-size: 18px;
    }
  }

  .checkbox-label {
    font-size: var(--checkbox-label-font-size, var(--font-size-xs));
    font-weight: 500;
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.25rem;
    align-items: center;
    line-height: 1.1;
    cursor: pointer;
  }

  .checkbox-label > input[type='checkbox'] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--clr-white);
    color: currentColor;
    inline-size: 20px;
    block-size: 20px;
    border: 1px solid var(--clr-accent-500);
    border-radius: var(--border-radius-4);
    transform: translateY(-1px);
    display: grid;
    place-items: center;
  }

  .checkbox-label > input[type='checkbox']:not(:checked) {
    border-color: var(--clr-gray-400);
  }

  .checkbox-label > input[type='checkbox']:before {
    content: '';
    inline-size: 14px;
    block-size: 14px;
    transform: scale(0);
    transition: 120ms transform ease-out;
    background: linear-gradient(to right, var(--clr-accent-500), var(--clr-brand-500));
    border-radius: 2px;
    background-color: CanvasText;
  }

  .checkbox-label > input[type='checkbox']:checked::before {
    transform: scale(1);
  }

  .checkbox-label:hover {
    color: var(--text-brand-primary);
  }

  .checkbox-label > input[type='checkbox']:focus-visible {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
  }

  .checkbox-label > input[type='checkbox']:disabled {
    color: #959495;
    border-color: #959495;
    cursor: not-allowed;
  }

  .checkbox-label:has(input[type='checkbox']:disabled) {
    cursor: not-allowed;
  }

  .plp-filters .nopAjaxFilters7Spikes {
    background: none;
    padding-block: 0;
  }

  .plp-filters .filtersTitlePanel {
    display: none !important;
  }

  .plp-filters .inner-wrapper {
    max-block-size: none;
    overflow-y: visible;
  }

  .plp-filters .filter-block {
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--border-default);
  }

  .plp-filters .filter-block:last-child {
    border-block-end: 0;
  }

  .plp-filters .filter-block > .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .plp-filters .filter-block > .title .toggleControl {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    inline-size: 100%;
    color: var(--text-main);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
  }

  .plp-filters .filter-block > .title .toggleControl::after {
    content: '';
    flex-shrink: 0;
    margin-inline-start: auto;
    inline-size: 18px;
    block-size: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M3.375 6.1875L9 11.8125L14.625 6.1875' stroke='%23949698' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: rotate 0.2s ease-out;
  }

  .plp-filters .filter-block > .title .toggleControl:not(.closed)::after {
    rotate: 180deg;
  }

  @media (hover: hover) and (pointer: fine) {
    .plp-filters .filter-block > .title .toggleControl:hover {
      color: var(--text-brand-primary);
    }
  }

  .plp-filters .filter-block .filtersGroupPanel {
    padding-block-start: 1.25rem;
  }

  .plp-filters .checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-block-size: 11.875rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--background-brand-secondary) var(--background-surface);
  }

  .plp-filters .checkbox-item {
    padding-inline-end: 1.5rem;
  }

  .plp-filters .filter-show-more {
    padding-block: 0.5rem;
  }

  .plp-filters .filter-show-more ~ .checkbox-item {
    display: none;
  }

  .plp-filters input.manuf-search-input {
    inline-size: 100%;
    margin-block-end: 1.25rem;
    padding-block: 0.75rem;
    padding-inline-start: 3rem;
    padding-inline-end: 1rem;
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-4);
    background-color: var(--background-surface);
    background-image: url('/Plugins/SevenSpikes.Nop.Plugins.AjaxFilters/Themes/PacificNew/Content/images/search-input-icon.svg');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 18px 18px;
    color: var(--text-main);
    font-size: var(--font-size-xs);
    font-weight: 400;
  }

  .plp-filters .inStockFilterPanel7Spikes > .title {
    display: none;
  }

  .plp-filters .inStockFilterPanel7Spikes .filtersGroupPanel {
    display: block !important;
    padding-block-start: 0;
  }

  .plp-filters .inStockFilterPanel7Spikes .checkbox-list {
    display: block;
    max-block-size: none;
    overflow: visible;
  }

  .plp-filters .inStockFilterPanel7Spikes .checkbox-item {
    padding-inline-end: 0;
  }

  .toggle-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
  }

  .toggle-switch__input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  .toggle-switch__track {
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    inline-size: 50px;
    block-size: 24px;
    border: 1px solid var(--clr-gray-400);
    border-radius: 999px;
    background-color: var(--clr-gray-300);
    transform-origin: center;
    transition:
      transform 0.2s var(--ease-out-cubic),
      border-color 0.2s var(--ease-out-cubic),
      background-color 0.2s var(--ease-out-cubic);
  }

  .toggle-switch__thumb {
    position: absolute;
    inset-block-start: 1px;
    left: 2px;
    inline-size: 20px;
    block-size: 20px;
    border-radius: 50%;
    background-color: var(--clr-white);
    transition: transform 0.3s var(--ease-out-cubic);
    will-change: transform;
  }

  .toggle-switch__input:checked ~ .toggle-switch__track {
    border: none;
    background-image: var(--gradient-brand-alt);
  }

  .toggle-switch__input:checked ~ .toggle-switch__track .toggle-switch__thumb {
    transform: translateX(25px);
    inset-block-start: 2px;
  }

  .toggle-switch__input:focus-visible ~ .toggle-switch__track {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .toggle-switch:active .toggle-switch__track {
      transform: scale(0.97);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .toggle-switch__track,
    .toggle-switch__thumb {
      transition: none;
    }

    .toggle-switch:active .toggle-switch__track {
      transform: none;
    }
  }

  .plp-filters .filter-block > .title .toggleControl .title-desc {
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
  }

  .plp-filters .filter-price-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-block-end: 1rem;
    color: var(--text-heading);
    font-size: var(--font-size-sm);
    font-weight: 400;
  }

  .plp-filters .filter-price-wrap .currentMinPrice,
  .plp-filters .filter-price-wrap .currentMaxPrice {
    flex: 1;
    min-inline-size: 60px;
    color: var(--text-heading);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-align: center;
    text-decoration: underline;
  }

  .plp-filters .price-range-slider {
    position: relative;
    margin: 10px;
    block-size: 4px;
    border-radius: 5px;
  }

  .plp-filters .price-range-slider::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 4px;
    border-radius: 5px;
    background-color: var(--clr-white);
    z-index: 0;
  }

  .plp-filters .price-range-slider .ui-slider-range {
    position: absolute;
    inset-block-start: 0;
    block-size: 4px;
    border-radius: 5px;
    background-image: var(--gradient-brand-horizontal);
    z-index: 1;
  }

  .plp-filters .price-range-slider .ui-slider-handle {
    position: absolute;
    inset-block-start: -10px;
    z-index: 2;
    inline-size: 24px;
    block-size: 24px;
    margin-left: -12px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background-image:
      radial-gradient(
        circle at center,
        var(--clr-white) 6px,
        hsl(0 0% 100% / 90%) 7px,
        hsl(0 0% 100% / 40%) 7.5px,
        transparent 8px
      ),
      var(--gradient-brand-vertical);
    transition: transform 0.2s ease;
  }

  .plp-filters .price-range-slider .ui-slider-handle:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .plp-filters .priceRangeMinMaxPanel {
    display: flex;
    justify-content: space-between;
    margin-block-start: 1rem;
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
  }

  .plp-filters:has(.nopAjaxFilters7Spikes--empty) .plp-filters__header {
    display: none;
  }

  .plp-filters .nopAjaxFilters7Spikes__empty-message {
    font-size: var(--font-size-sm);
  }

  .page-toast {
    --toast-success: hsl(152 41% 38%);
    --toast-warning: hsl(51 100% 50%);
    --toast-danger: hsl(355 68% 45%);
    --toast-info: hsl(212 70% 40%);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    --page-toast-gap: 1rem;
    --page-toast-shift: -0.5rem;
    position: fixed;
    z-index: 200;
    inset-inline-end: var(--page-toast-gap);
    inset-block-start: var(--page-toast-gap);
    inline-size: min(22rem, calc(100% - 2rem));
  }

  @keyframes page-toast-enter {
    from {
      opacity: 0;
      transform: translate3d(0, var(--page-toast-shift), 0) scale(0.95);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  @keyframes page-toast-exit {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    to {
      opacity: 0;
      transform: translate3d(0, var(--page-toast-shift), 0) scale(0.95);
    }
  }

  @keyframes page-toast-enter-reduced {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes page-toast-exit-reduced {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  .page-toast__list {
    display: grid;
    gap: var(--page-toast-gap);
  }

  .page-toast-message {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-5);
    background-color: var(--background-surface);
    box-shadow: var(--box-shadow-2);
    transform-origin: top center;
    animation: page-toast-enter 0.25s var(--ease-out-quart) both;
    will-change: transform, opacity;
  }

  .page-toast-message--exit {
    animation: page-toast-exit 0.2s var(--ease-in-quart) both;
    pointer-events: none;
  }

  .page-toast-message--success {
    border-color: var(--toast-success);
  }

  .page-toast-message--warning {
    border-color: var(--toast-warning);
  }

  .page-toast-message--error {
    border-color: var(--toast-danger);
  }

  .page-toast-message--info {
    border-color: var(--toast-info);
  }

  .page-toast-message__icon {
    display: grid;
    place-items: center;
  }

  .page-toast-message__icon--success,
  .page-toast-message__icon--error,
  .page-toast-message__icon--info {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    padding-inline: 0.75rem;
  }

  .page-toast-message__icon--success {
    background-color: var(--toast-success);
  }

  .page-toast-message__icon--error {
    background-color: var(--toast-danger);
  }

  .page-toast-message__icon--info {
    background-color: var(--toast-info);
    padding-inline: 1.125rem;
  }

  .page-toast-message__icon--info svg {
    display: block;
    block-size: 1.125rem;
    inline-size: auto;
  }

  .page-toast-message__content {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-main);
  }

  .page-toast-message__content a {
    color: var(--text-brand-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.125rem;
    border-radius: 2px;
  }

  .page-toast-message__content a:focus-visible {
    outline: 2px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .page-toast-message__close {
    margin-inline-start: auto;
  }

  @media (hover: hover) and (pointer: fine) {
    .page-toast-message__content a {
      transition: color 200ms ease;
    }

    .page-toast-message__content a:hover {
      color: hsl(212 70% 32%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .page-toast-message {
      animation: page-toast-enter-reduced 0.2s ease both;
      will-change: auto;
    }

    .page-toast-message--exit {
      animation: page-toast-exit-reduced 0.15s ease both;
    }
  }

  @media (min-width: 48rem) {
    .page-toast-message__content {
      font-size: var(--font-size-sm);
    }
  }

  @media (min-width: 75rem) {
    .page-toast {
      --page-toast-shift: -0.5rem;
      inset-block-end: auto;
      inset-block-start: var(--page-toast-gap);
    }

    .page-toast-message {
      transform-origin: top center;
    }
  }

  .pdp-share-modal {
    --pdp-share-modal-shift: -100%;
    inset-block-start: 0;
    inset-block-end: auto;
    inline-size: 100%;
    max-block-size: calc(100vh - 3.75rem);
    max-block-size: calc(100svh - 3.75rem);
    background-color: var(--background-surface);
    border-end-start-radius: var(--border-radius-4);
    border-end-end-radius: var(--border-radius-4);
    box-shadow: var(--box-shadow-3);
    color: inherit;
  }

  .pdp-share-modal::backdrop {
    background-color: hsla(228, 5%, 19%, 32%);
  }

  .pdp-share-modal[open] {
    animation: pdp-share-modal-enter 0.3s var(--ease-out-cubic);
  }

  .pdp-share-modal[open]::backdrop {
    animation: overlay-fade-in 0.3s var(--ease-out-cubic);
  }

  @keyframes pdp-share-modal-enter {
    from {
      transform: translateY(var(--pdp-share-modal-shift));
    }

    to {
      transform: translateY(0);
    }
  }

  .pdp-share-modal__dialog {
    display: grid;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .pdp-share-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .pdp-share-modal__title {
    font-size: var(--font-size-lg);
  }

  .pdp-share-modal__text {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
  }

  .pdp-share-modal__close {
    flex-shrink: 0;
  }

  .pdp-share-modal__body {
    display: grid;
    gap: 1.25rem;
  }

  .pdp-share-modal__social-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .pdp-share-modal__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-2);
    background-color: var(--background-muted);
    color: var(--text-heading);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
  }

  .pdp-share-modal__social-link img {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .pdp-share-modal__copy.is-copied {
    color: var(--clr-green-500);
  }

  @media (hover: hover) and (pointer: fine) {
    .pdp-share-modal__social-link {
      transition: color 0.24s var(--ease-out-cubic);
    }

    .pdp-share-modal__social-link:hover {
      color: var(--text-brand-primary);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-share-modal[open],
    .pdp-share-modal[open]::backdrop {
      animation: none;
    }

    .pdp-share-modal__close,
    .pdp-share-modal__social-link {
      transition: none;
    }
  }

  @media (min-width: 48rem) {
    .pdp-share-modal {
      --pdp-share-modal-shift: -100%;
      inset-block-start: 3.75rem;
      inset-block-end: auto;
      inline-size: min(calc(100% - 2rem), 30rem);
      margin-inline: auto;
      border-radius: var(--border-radius-4);
    }

    .pdp-share-modal__dialog {
      padding: 2.5rem;
    }

    .pdp-share-modal__title {
      font-size: var(--font-size-xl);
    }

    .pdp-share-modal__text,
    .pdp-share-modal__social-link {
      font-size: var(--font-size-md);
    }
  }

  .pdp-rating-dropdown {
    position: relative;
  }

  .pdp-rating-dropdown__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-start: 0;
    z-index: 50;
    inline-size: 15rem;
    padding: 1rem 0.75rem;
    background-color: var(--background-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-4);
    box-shadow: var(--box-shadow-2);
  }

  .pdp-rating-dropdown__score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp-rating-dropdown__trigger {
    --cluster-gap: 0.25rem;
  }

  .pdp-rating-dropdown__stars {
    --cluster-gap: 0;
  }

  .pdp-rating-dropdown__value--empty {
    font-size: var(--font-size-sm);
  }

  .pdp-rating-dropdown__count {
    margin-block-start: 0.5rem;
    font-size: var(--font-size-xs);
  }

  .pdp-rating-dropdown__rows {
    display: grid;
    gap: 0.5rem;
    max-inline-size: 11rem;
    margin-block-start: 0.5rem;
  }

  .pdp-rating-dropdown__row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2rem;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp-rating-dropdown__row-label,
  .pdp-rating-dropdown__row-percent {
    font-size: var(--font-size-2xs);
    color: var(--text-brand-primary);
    white-space: nowrap;
  }

  .pdp-rating-dropdown__row-percent {
    text-align: end;
  }

  .pdp-rating-dropdown__progress {
    block-size: 5px;
    background-color: var(--background-muted);
    border-radius: 100svh;
    overflow: hidden;
  }

  .pdp-rating-dropdown__progress-fill {
    display: block;
    block-size: 100%;
    background-color: var(--clr-yellow-400);
    border-radius: inherit;
    transition: inline-size 200ms ease;
  }

  .pdp-rating-dropdown__chevron {
    transition: transform 0.24s var(--ease-out-cubic);
  }

  .pdp-rating-dropdown__trigger[aria-expanded='true'] .pdp-rating-dropdown__chevron {
    transform: rotate(180deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-rating-dropdown__chevron,
    .pdp-rating-dropdown__progress-fill {
      transition: none;
    }
  }

  .pdp-product__info-color-list {
    margin-block-start: 0.5rem;
  }

  .pdp-product__info-color-option {
    position: relative;
    cursor: pointer;
  }

  .pdp-product__info-color-option input[type='radio'] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
  }

  .pdp-product__info-color-swatch {
    --pdp-tick-color: var(--clr-white);
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 1px solid var(--border-default);
    border-radius: 50%;
    background-color: var(--pdp-color, transparent);
  }

  .pdp-product__info-color-tick {
    color: var(--pdp-tick-color);
    opacity: 0;
    transition: opacity 0.2s ease;
    filter: drop-shadow(0 0 1px rgb(0 0 0 / 0.35));
  }

  .pdp-product__info-color-option input[type='radio']:checked + .pdp-product__info-color-swatch {
    box-shadow: 0 0 0 2px var(--clr-brand-500);
  }

  .pdp-product__info-color-option
    input[type='radio']:checked
    + .pdp-product__info-color-swatch
    .pdp-product__info-color-tick {
    opacity: 1;
  }

  .pdp-product__info-color-option input[type='radio']:focus-visible + .pdp-product__info-color-swatch {
    outline: 2px solid var(--clr-brand-500);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-product__info-color-tick {
      transition: none;
    }
  }

  .pdp__form-specification {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-inline-size: 25rem;
  }

  .pdp__form-specification-title {
    color: var(--text-heading);
  }

  .pdp__form-specification-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 1rem;
  }

  .pdp__form-specification-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
  }

  .pdp__form-specification-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .pdp__form-specification-item-icon {
    display: none;
  }

  .pdp__form-specification-item-name {
    color: var(--text-muted);
  }

  .pdp__form-specification-item-value {
    color: var(--text-main);
  }

  .pdp__form-specification-all-specs {
    justify-self: start;
    align-self: center;
    color: var(--text-brand-primary);
    text-decoration: underline;
    transition: color 200ms ease;
  }

  @media (min-width: 48rem) {
    .pdp__form-specification-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pdp__form-specification-all-specs {
      justify-self: center;
    }

    .pdp__form-specification-item-icon {
      display: block;
      flex-shrink: 0;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .pdp__form-specification-all-specs:hover {
      color: hsl(212 70% 40%);
    }
  }

  .pdp-product__free-shipment {
    padding: 0.5rem;
    background: linear-gradient(to right, hsl(322 71% 45% / 0.05), hsl(212 70% 40% / 0.05));
  }

  .pdp-product__free-shipment-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp-product__free-shipment-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    background-color: var(--clr-white);
    border-radius: 100%;
  }

  .pdp-product__free-shipment-icon svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  .pdp-product__free-shipment-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .pdp-addtocart .pdp-product__free-shipment,
  .pdp-addtocart .pdp-product__guidance {
    display: none;
  }

  @media (min-width: 48rem) {
    .pdp-product__free-shipment {
      padding: 1.25rem;
    }

    .pdp-product__free-shipment-inner {
      gap: 1.25rem;
    }
  }

  @media (min-width: 75rem) {
    .pdp-product > .pdp-product__free-shipment,
    .pdp-product > .pdp-product__guidance {
      display: none;
    }

    .pdp-addtocart .pdp-product__free-shipment,
    .pdp-addtocart .pdp-product__guidance {
      display: block;
    }
  }

  .pdp-product__free-shipment[hidden] {
    display: none;
  }

  .pdp-product__guidance-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    max-inline-size: 22rem;
    padding-inline-start: 1rem;
    list-style: circle;
  }

  @media (min-width: 75rem) {
    .pdp-addtocart .pdp-product__guidance-list {
      margin-inline: auto;
    }
  }

  .pdp-product__credit {
    display: grid;
    align-self: end;
    align-content: start;
    gap: 0.5rem;
  }

  .pdp-product__credit-list {
    display: grid;
  }

  .pdp-product__credit-item {
    --pdp-credit-media-col: 3.5rem;
    position: relative;
    display: grid;
    grid-template-columns: var(--pdp-credit-media-col) 1fr auto;
    grid-template-rows: 1fr auto;
    gap: 0.625rem 1.25rem;
    padding: 0.5rem 0.25rem 0.25rem;
    border-block-end: 1px solid var(--clr-gray-400);
    border-inline: 1px solid var(--clr-gray-400);
    transition: background-color 200ms ease;
  }

  .pdp-product__credit-item:first-child {
    border-block-start: 1px solid var(--clr-gray-400);
  }

  .pdp-product__credit-item > img {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding-inline-start: 0.5rem;
  }

  .pdp-product__credit-item-general {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    grid-column: 2;
    grid-row: 1;
  }

  .pdp-product__credit-item-details {
    display: grid;
    grid-template-columns: var(--pdp-credit-media-col) 1fr auto;
    align-items: center;
    gap: 0.25rem;
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0.25rem 1rem;
    background: linear-gradient(to right, hsl(322 71% 45% / 0.05), hsl(212 70% 40% / 0.05), hsl(322 71% 45% / 0.05));
  }

  .pdp-product__credit-item-details > *:not(a) {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    grid-column: 2;
  }

  .pdp-product__credit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 3;
    grid-row: 1;
    justify-self: center;
    align-self: center;
  }

  .pdp-product__credit-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 10;
  }

  @media (min-width: 48rem) {
    .pdp-product__credit-item {
      padding: 1rem 0.5rem 0.5rem;
      gap: 0.5rem 1rem;
    }
  }

  @media (min-width: 75rem) {
    .pdp-product__credit {
      grid-column: 1 / -1;
      grid-row: 3;
    }

    .pdp-product__credit-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-flow: row;
    }

    .pdp-product__credit-item:nth-child(even) {
      border-inline-start: 0;
    }

    .pdp-product__credit-item:nth-child(-n + 2) {
      border-block-start: 1px solid var(--clr-gray-400);
    }
  }

  @media (min-width: 87rem) {
    .pdp-product__credit {
      grid-column: 2 / 4;
      grid-row: 2;
      align-self: end;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .pdp-product__credit-item:hover {
      background-color: var(--clr-gray-200);
    }
  }

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

  dialog.pdp__payment-popup {
    --pdp-payment-popup-shift: -100%;
    inset-block-start: 0;
    inset-block-end: auto;
    inline-size: 100%;
    max-block-size: calc(100vh - 3.75rem);
    max-block-size: calc(100svh - 3.75rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--background-surface);
    border-end-start-radius: var(--border-radius-4);
    border-end-end-radius: var(--border-radius-4);
    box-shadow: var(--box-shadow-3);
    color: inherit;
  }

  dialog.pdp__payment-popup::backdrop {
    background-color: hsla(228, 5%, 19%, 32%);
  }

  dialog.pdp__payment-popup[open] {
    animation: pdp-payment-popup-enter 0.3s var(--ease-out-cubic);
  }

  dialog.pdp__payment-popup[open]::backdrop {
    animation: overlay-fade-in 0.3s var(--ease-out-cubic);
  }

  @keyframes pdp-payment-popup-enter {
    from {
      transform: translateY(var(--pdp-payment-popup-shift));
    }

    to {
      transform: translateY(0);
    }
  }

  html:has(dialog.pdp__payment-popup[open]) {
    overflow: hidden;
  }

  .pdp__payment-popup-dialog {
    position: relative;
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem 1rem 1rem;
  }

  .pdp__payment-popup-close {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
  }

  .pdp__payment-popup-header {
    display: grid;
    justify-items: start;
    gap: 0.5rem;
  }

  .pdp__payment-popup-brand-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp__payment-popup-brand {
    inline-size: auto;
    max-block-size: 2.625rem;
  }

  .pdp__payment-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pdp__payment-popup-actions > .btn-cut {
    flex: 1;
  }

  @media (min-width: 48rem) {
    dialog.pdp__payment-popup {
      --pdp-payment-popup-shift: -100%;
      inset-block-start: 3rem;
      inset-block-end: auto;
      inline-size: min(calc(100% - 2rem), 34rem);
      margin-inline: auto;
      border-radius: var(--border-radius-4);
    }

    .pdp__payment-popup-dialog {
      gap: 1.5rem;
      padding: 2rem;
    }

    .pdp__payment-popup-actions {
      gap: 1rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    dialog.pdp__payment-popup[open],
    dialog.pdp__payment-popup[open]::backdrop {
      animation: none;
    }
  }

  dialog.pdp-addtocart-modal,
  dialog.pdp-back-in-stock-dialog {
    --pdp-addtocart-dialog-shift: -100%;
    inset-block-start: 0;
    inset-block-end: auto;
    inline-size: 100%;
    max-block-size: calc(100vh - 3.75rem);
    max-block-size: calc(100svh - 3.75rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--background-surface);
    border-end-start-radius: var(--border-radius-4);
    border-end-end-radius: var(--border-radius-4);
    box-shadow: var(--box-shadow-3);
    color: inherit;
  }

  dialog.pdp-addtocart-modal::backdrop,
  dialog.pdp-back-in-stock-dialog::backdrop {
    background-color: hsla(228, 5%, 19%, 32%);
  }

  dialog.pdp-addtocart-modal,
  dialog.pdp-back-in-stock-dialog {
    opacity: 0;
    transform: translateY(var(--pdp-addtocart-dialog-shift));
    transition:
      opacity 0.3s var(--ease-out-cubic),
      transform 0.3s var(--ease-out-cubic),
      display 0.3s,
      overlay 0.3s;
    transition-behavior: allow-discrete;
  }

  dialog.pdp-addtocart-modal[open],
  dialog.pdp-back-in-stock-dialog[open] {
    opacity: 1;
    transform: translateY(0);
  }

  @starting-style {
    dialog.pdp-addtocart-modal[open],
    dialog.pdp-back-in-stock-dialog[open] {
      opacity: 0;
      transform: translateY(var(--pdp-addtocart-dialog-shift));
    }
  }

  dialog.pdp-addtocart-modal::backdrop,
  dialog.pdp-back-in-stock-dialog::backdrop {
    opacity: 0;
    transition:
      opacity 0.3s var(--ease-out-cubic),
      display 0.3s,
      overlay 0.3s;
    transition-behavior: allow-discrete;
  }

  dialog.pdp-addtocart-modal[open]::backdrop,
  dialog.pdp-back-in-stock-dialog[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    dialog.pdp-addtocart-modal[open]::backdrop,
    dialog.pdp-back-in-stock-dialog[open]::backdrop {
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    dialog.pdp-addtocart-modal,
    dialog.pdp-back-in-stock-dialog,
    dialog.pdp-addtocart-modal::backdrop,
    dialog.pdp-back-in-stock-dialog::backdrop {
      transition: none;
    }

    dialog.pdp-addtocart-modal,
    dialog.pdp-back-in-stock-dialog {
      transform: none;
    }
  }

  html:has(dialog.pdp-addtocart-modal[open]),
  html:has(dialog.pdp-back-in-stock-dialog[open]) {
    overflow: hidden;
  }

  .pdp-addtocart-modal__panel,
  .pdp-back-in-stock-dialog__panel {
    position: relative;
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem 1rem 1rem;
  }

  .pdp-addtocart-modal__panel {
    gap: 1.5rem;
    padding: 1.25rem 0 2rem;
  }

  .pdp-back-in-stock-dialog__close {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
  }

  .pdp-addtocart-modal__close {
    flex-shrink: 0;
  }

  .pdp-addtocart-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-inline: 1rem;
  }

  .pdp-addtocart-modal__success {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.75rem;
  }

  .pdp-addtocart-modal__success svg {
    inline-size: 2rem;
    block-size: 2rem;
    flex-shrink: 0;
  }

  .pdp-addtocart-modal__message,
  .pdp-addtocart-modal__attribute,
  .pdp-back-in-stock-modal__title,
  .pdp-back-in-stock-modal__message {
    margin: 0;
  }

  .pdp-addtocart-modal__product {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-block: 1.25rem;
    padding-inline: 1rem;
    border-block: 1px solid var(--clr-gray-400);
  }

  .pdp-addtocart-modal__image {
    inline-size: 3.5rem;
    block-size: 3.5rem;
    object-fit: cover;
    border-radius: 0.3125rem;
    border: 1px solid var(--clr-gray-400);
    flex-shrink: 0;
  }

  .pdp-addtocart-modal__details {
    display: grid;
    gap: 0.5rem;
    min-inline-size: 0;
  }

  .pdp-addtocart-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-inline: 1rem;
  }

  .pdp-addtocart-modal__actions > .btn-cut {
    flex: 0 0 auto;
  }

  .pdp-addtocart-modal__actions > .btn-cut > * {
    display: grid;
    place-items: center;
    block-size: 100%;
    padding-block: 0.625rem;
  }

  .pdp-addtocart-modal__suggestions {
    display: grid;
    gap: 0.75rem;
    padding-inline: 1rem;
  }

  .pdp-addtocart-modal__suggestions-title {
    margin: 0;
  }

  .pdp-addtocart-modal__suggestions-viewport {
    overflow: auto;
    max-block-size: 16rem;
    padding-inline-end: 0.5rem;
  }

  .pdp-addtocart-modal__suggestions-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--clr-gray-400);
    border-radius: 0.3125rem;
  }

  .pdp-addtocart-modal__suggestion + .pdp-addtocart-modal__suggestion {
    border-block-start: 1px solid var(--clr-gray-400);
  }

  .pdp-addtocart-modal__suggestion {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  .pdp-addtocart-modal__suggestion-link {
    display: grid;
    place-items: center;
  }

  .pdp-addtocart-modal__suggestion-link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .pdp-addtocart-modal__suggestion-media {
    display: block;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    overflow: hidden;
    border: 1px solid var(--clr-gray-400);
    border-radius: 0.3125rem;
    background: var(--clr-gray-100);
  }

  .pdp-addtocart-modal__suggestion-image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .pdp-addtocart-modal__suggestion-body {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
  }

  .pdp-addtocart-modal__suggestion-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  .pdp-addtocart-modal__suggestion-prices {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp-addtocart-modal__suggestion-price-stack {
    display: grid;
  }

  .pdp-addtocart-modal__suggestion-price {
    text-decoration: none;
  }

  .pdp-addtocart-modal__suggestion-price--old {
    text-decoration: line-through;
  }

  .pdp-addtocart-modal__suggestion-chevron {
    inline-size: 1rem;
    block-size: 1rem;
    flex-shrink: 0;
  }

  @media (min-width: 48rem) {
    .pdp-addtocart-modal__suggestion {
      gap: 1rem;
      padding: 1rem 1.25rem;
    }

    .pdp-addtocart-modal__suggestion-media {
      inline-size: 4rem;
      block-size: 4rem;
    }
  }

  .pdp-back-in-stock-dialog__content .pdp-back-in-stock-modal {
    display: grid;
    gap: 1rem;
  }

  .pdp-back-in-stock-modal__body,
  .pdp-back-in-stock-modal__content {
    display: grid;
    gap: 1rem;
  }

  .pdp-back-in-stock-modal__message {
    color: var(--text-muted);
  }

  .pdp-back-in-stock-modal__button {
    padding-block: 1rem;
    padding-inline: 1rem;
    border: 0;
    border-radius: var(--border-radius-5);
    background: linear-gradient(to right, var(--clr-accent-500), var(--clr-brand-500));
    color: var(--text-high-contrast);
    text-align: center;
    cursor: pointer;
  }

  @media (min-width: 48rem) {
    dialog.pdp-addtocart-modal,
    dialog.pdp-back-in-stock-dialog {
      inset-block-start: 3rem;
      margin-inline: auto;
      border-radius: var(--border-radius-4);
    }

    dialog.pdp-back-in-stock-dialog {
      inline-size: min(calc(100% - 2rem), 34rem);
    }

    dialog.pdp-addtocart-modal {
      inline-size: min(calc(100% - 2rem), 44rem);
    }

    .pdp-back-in-stock-dialog__panel {
      gap: 1.5rem;
      padding: 2rem;
    }

    .pdp-addtocart-modal__panel {
      gap: 2rem;
      padding: 1.5rem 0 2.5rem;
    }

    .pdp-addtocart-modal__header {
      gap: 1.25rem;
      padding-inline: 1.5rem;
    }

    .pdp-addtocart-modal__success {
      gap: 1.25rem;
    }

    .pdp-addtocart-modal__success svg {
      inline-size: 2.5rem;
      block-size: 2.5rem;
    }

    .pdp-addtocart-modal__product {
      gap: 1.25rem;
      padding-block: 1.5rem;
      padding-inline: 1.5rem;
    }

    .pdp-addtocart-modal__details {
      gap: 0.75rem;
    }

    .pdp-addtocart-modal__actions {
      gap: 0.75rem;
      padding-inline: 1.5rem;
    }

    .pdp-addtocart-modal__image {
      inline-size: 4rem;
      block-size: 4rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    dialog.pdp-addtocart-modal[open],
    dialog.pdp-back-in-stock-dialog[open] {
      animation: none;
    }
  }

  .pdp-addtocart__stack {
    --stack-gap: 1.25rem;
  }

  .pdp-addtocart__desktop {
    padding-block: 1.25rem;
    border: 1px solid var(--clr-gray-400);
  }

  .pdp-addtocart__desktop-prices {
    padding-inline: 1.25rem;
  }

  .pdp-addtocart__desktop-prices-nodiscount {
    text-align: end;
  }

  .pdp-addtocart__desktop-prices-discount {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .pdp-addtocart__desktop-prices-discount-values {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 0.25rem;
  }

  .pdp-addtocart__desktop-prices-discount-new {
    text-decoration: none;
  }

  .pdp-addtocart__desktop-prices-discount-badge {
    padding: 0.5rem;
    border-radius: 5px;
    color: var(--clr-pink-500);
    background-color: color-mix(in srgb, var(--clr-pink-500) 5%, transparent);
  }

  .pdp-addtocart__desktop [hidden] {
    display: none;
  }

  .pdp-addtocart__mobile.is-loading .pdp-addtocart__mobile-row,
  .pdp-addtocart.is-loading .pdp-addtocart__stack {
    opacity: 0.6;
    transition: opacity 150ms ease;
  }

  .pdp-addtocart__mobile [disabled],
  .pdp-addtocart [disabled] {
    cursor: not-allowed;
  }

  .pdp-addtocart__desktop-actions {
    margin-block-start: 2rem;
    padding-inline: 1.25rem;
  }

  .pdp-addtocart__desktop-actions-addtocart-btn {
    --pdp-addtocart-cut-x: 10%;
    --pdp-addtocart-cut-y: 45%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-block: 0.875rem;
    padding-inline: 1.5rem;
    clip-path: polygon(var(--pdp-addtocart-cut-x) -3%, 100% 0%, 100% 100%, 0 100%, 0 var(--pdp-addtocart-cut-y));
  }

  .pdp-addtocart__desktop-actions-addtocart-btn svg {
    inline-size: 24px;
    block-size: 24px;
  }

  .pdp-addtocart__desktop-actions-unavailable-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding-block: 0.75rem;
    padding-inline: 2rem;
    clip-path: none;
  }

  .pdp-addtocart__desktop-actions-incart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    inline-size: fit-content;
    min-inline-size: 19rem;
  }

  @media (min-width: 87rem) {
    .pdp-addtocart__desktop-actions-incart {
      inline-size: 100%;
    }
  }

  .pdp-addtocart__desktop-actions-incart-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  .pdp-addtocart__desktop-actions-incart-link {
    --btn-padding-block: 0.875rem;
  }

  .pdp-addtocart__desktop-actions-incart-frame {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    pointer-events: none;
  }

  .pdp-addtocart__desktop-actions-incart-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .pdp-addtocart__mobile-incart-link {
    --btn-padding-block: 0.75rem;
    --btn-padding-inline: 1rem;
  }

  .pdp-addtocart__desktop-actions-incart-badge {
    --pdp-addtocart-cut-x: 45%;
    --pdp-addtocart-cut-y: 50%;
    display: grid;
    place-items: center;
    inline-size: 3.375rem;
    block-size: 3.375rem;
    padding: 0.5rem;
    border-radius: 0.3125rem;
    background: linear-gradient(to right, var(--clr-accent-500), var(--clr-brand-500));
    clip-path: polygon(var(--pdp-addtocart-cut-x) -3%, 100% 0%, 100% 100%, 0 100%, 0 var(--pdp-addtocart-cut-y));
  }

  .pdp-addtocart__desktop-actions-incart-badge svg {
    inline-size: 32px;
    block-size: 32px;
  }

  .pdp-addtocart__desktop-actions-incart-qty {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
  }

  .pdp-addtocart__desktop-actions-incart-qty-increment,
  .pdp-addtocart__desktop-actions-incart-qty-decrement {
    display: grid;
    place-items: center;
    padding: 0.5rem;
    border-radius: 50%;
    background-color: var(--clr-gray-200);
  }

  .pdp-addtocart__desktop-actions-incart-qty-decrement-minus {
    display: none;
  }

  .pdp-addtocart__desktop-actions-incart-qty-decrement--minus
    .pdp-addtocart__desktop-actions-incart-qty-decrement-trash {
    display: none;
  }

  .pdp-addtocart__desktop-actions-incart-qty-decrement--minus
    .pdp-addtocart__desktop-actions-incart-qty-decrement-minus {
    display: block;
  }

  .pdp-addtocart__desktop-actions-incart-qty-value {
    text-align: center;
  }

  .pdp-addtocart__desktop-points {
    margin-block-start: 1.25rem;
    padding-inline: 1.25rem;
  }

  .pdp-addtocart__desktop-points .pdp__form-points-of-product {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
  }

  .pdp-addtocart__desktop-points .pdp__form-points-icon {
    inline-size: 2rem;
    block-size: 1.375rem;
  }

  .pdp-addtocart__desktop-guarantee {
    margin-block-start: 1.25rem;
  }

  .pdp-addtocart__desktop-guarantee-box {
    padding-block-start: 1.25rem;
    padding-inline: 1.25rem;
    border-block-start: 1px solid var(--clr-gray-400);
  }

  .pdp-addtocart__desktop-guarantee .pdp__form-guarantee {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
  }

  .pdp-addtocart__desktop-points,
  .pdp-addtocart__desktop-guarantee {
    display: none;
  }

  @media (min-width: 75rem) {
    .pdp-addtocart__desktop-points,
    .pdp-addtocart__desktop-guarantee {
      display: block;
    }
  }

  .pdp-addtocart__mobile {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 50;
  }

  .pdp-addtocart__mobile-inner {
    padding-block: 0.75rem;
    padding-inline: 0.75rem;
    background-color: var(--clr-white);
    border-block-start: 1px solid var(--clr-gray-400);
  }

  .pdp-addtocart__mobile-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .pdp-addtocart__mobile-addtocart-btn {
    --pdp-addtocart-cut-x: 15%;
    --pdp-addtocart-cut-y: 55%;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.75rem;
    padding-inline: 1.5rem;
    clip-path: polygon(var(--pdp-addtocart-cut-x) -3%, 100% 0%, 100% 100%, 0 100%, 0 var(--pdp-addtocart-cut-y));
  }

  .pdp-addtocart__mobile-incart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .pdp-addtocart__mobile-incart-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp-addtocart__mobile-incart-badge {
    --pdp-addtocart-cut-x: 45%;
    --pdp-addtocart-cut-y: 50%;
    display: grid;
    place-items: center;
    inline-size: 2.8125rem;
    block-size: 2.8125rem;
    padding: 0.5rem;
    border-radius: 0.3125rem;
    background: linear-gradient(to right, var(--clr-accent-500), var(--clr-brand-500));
    clip-path: polygon(var(--pdp-addtocart-cut-x) -3%, 100% 0%, 100% 100%, 0 100%, 0 var(--pdp-addtocart-cut-y));
  }

  .pdp-addtocart__mobile-incart-qty {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.75rem;
  }

  .pdp-addtocart__mobile-incart-qty-increment,
  .pdp-addtocart__mobile-incart-qty-decrement {
    display: grid;
    place-items: center;
    padding: 0.375rem;
    border-radius: 50%;
    background-color: var(--clr-gray-200);
  }

  .pdp-addtocart__mobile-incart-qty-decrement-minus {
    display: none;
  }

  .pdp-addtocart__mobile-incart-qty-decrement--minus .pdp-addtocart__mobile-incart-qty-decrement-trash {
    display: none;
  }

  .pdp-addtocart__mobile-incart-qty-decrement--minus .pdp-addtocart__mobile-incart-qty-decrement-minus {
    display: block;
  }

  .pdp-addtocart__mobile-incart-qty-value {
    text-align: center;
  }

  .pdp-addtocart__mobile-unavailable-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    clip-path: none;
  }

  .pdp-addtocart__mobile-prices-nodiscount,
  .pdp-addtocart__mobile-prices-unavailable {
    display: flex;
    justify-content: flex-end;
  }

  .pdp-addtocart__mobile-prices-discount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
  }

  .pdp-addtocart__mobile-prices-discount-new {
    text-decoration: none;
  }

  .pdp-addtocart__mobile-prices-discount-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp-addtocart__mobile [hidden] {
    display: none;
  }

  @media (min-width: 48rem) {
    .pdp-addtocart__mobile-inner {
      padding-inline: 1.25rem;
    }

    .pdp-addtocart__mobile-row {
      gap: 0.75rem;
    }

    .pdp-addtocart__mobile-addtocart-btn,
    .pdp-addtocart__mobile-unavailable-btn {
      padding-block: 1.25rem;
      padding-inline: 2rem;
    }

    .pdp-addtocart__mobile-incart {
      flex-direction: row;
    }

    .pdp-addtocart__mobile-incart-qty {
      gap: 1rem;
    }

    .pdp-addtocart__mobile-incart-qty-increment,
    .pdp-addtocart__mobile-incart-qty-decrement {
      padding: 0.5rem;
    }

    .pdp-addtocart__mobile-incart-badge {
      inline-size: 3.5rem;
      block-size: 3.5rem;
    }
  }

  @media (min-width: 75rem) {
    .pdp-addtocart__mobile {
      display: none;
    }
  }

  .pdp-product__info-title {
    line-height: 1.2;
  }

  .pdp__form-points-of-product {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp__form-points-of-product span {
    margin-block-start: 2px;
  }

  .pdp__form-guarantee {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  @media (min-width: 48rem) {
    .pdp__form-points-of-product,
    .pdp__form-guarantee {
      gap: 1.25rem;
    }
  }

  @media (min-width: 75rem) {
    .pdp__form-points-of-product,
    .pdp__form-guarantee--text {
      display: none;
    }
  }

  .pdp__form-guarantee[hidden] {
    display: none;
  }

  .pdp__form-points-icon,
  .pdp__form-guarantee-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }

  .pdp__form-points-icon {
    inline-size: 2rem;
    block-size: 1.375rem;
  }

  .pdp__form-guarantee-icon {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .pdp__form-points-icon svg,
  .pdp__form-guarantee-icon svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  @media (min-width: 48rem) {
    .pdp__form-points-icon {
      inline-size: 2.625rem;
      block-size: 1.8125rem;
    }

    .pdp__form-guarantee-icon {
      inline-size: 2.625rem;
      block-size: 2.625rem;
    }
  }

  .pdp__form-guarantee-select-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .pdp__form-guarantee-select {
    inline-size: 100%;
    min-inline-size: 10rem;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    background: var(--clr-white);
    color: var(--text-main);
    font-size: var(--font-size-xs);
    transition:
      border-color 0.2s ease,
      background-color 0.2s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .pdp__form-guarantee-select:hover {
      background-image: none;
      border-color: var(--text-brand-primary);
    }
  }

  .pdp__form-guarantee-select:focus-visible {
    outline: 2px solid var(--text-brand-primary);
    outline-offset: 2px;
    border-color: var(--text-brand-primary);
  }

  .pdp__form-pack {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp__form-pack-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 2rem;
    block-size: 2rem;
  }

  .pdp__form-pack-icon svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .pdp__form-pack-select-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp__form-pack-select {
    inline-size: 100%;
    min-inline-size: 10rem;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    background: var(--clr-white);
    color: var(--text-main);
    font-size: var(--font-size-xs);
    transition:
      border-color 0.2s ease,
      background-color 0.2s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .pdp__form-pack-select:hover {
      background-image: none;
      border-color: var(--text-brand-primary);
    }
  }

  .pdp__form-pack-select:focus-visible {
    outline: 2px solid var(--text-brand-primary);
    outline-offset: 2px;
    border-color: var(--text-brand-primary);
  }

  @media (min-width: 48rem) {
    .pdp__form-pack {
      gap: 1.25rem;
    }

    .pdp__form-pack-icon {
      inline-size: 2.625rem;
      block-size: 2.625rem;
    }
  }

  .pdp__form-payment-type {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp__form-payment-type-select-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .pdp__form-payment-type-select {
    inline-size: 100%;
    min-inline-size: 10rem;
    padding-block: 0.75rem;
    padding-inline: 1rem;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    background: var(--clr-white);
    color: var(--text-main);
    font-size: var(--font-size-xs);
    transition:
      border-color 0.2s ease,
      background-color 0.2s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .pdp__form-payment-type-select:hover {
      background-image: none;
      border-color: var(--text-brand-primary);
    }
  }

  .pdp__form-payment-type-select:focus-visible {
    outline: 2px solid var(--text-brand-primary);
    outline-offset: 2px;
    border-color: var(--text-brand-primary);
  }

  @media (min-width: 48rem) {
    .pdp__form-payment-type {
      gap: 1.25rem;
    }
  }

  .pdp__form-extra-attributes-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .pdp__form-addon {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-block: 0.5rem;
    color: var(--text-heading);
    --checkbox-label-font-size: var(--font-size-2xs);
  }

  @media (min-width: 87rem) {
    .pdp__form-addon {
      padding-block: 0;
    }
  }

  .pdp__form-addon-title,
  .pdp__form-extra-attribute-title {
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--text-heading);
  }

  .pdp__form-addon-description,
  .pdp__form-extra-attribute-description {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
  }

  .pdp__form-addon-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .pdp__form-addon-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .pdp__form-addon-item > span {
    color: var(--text-muted);
  }

  @media (min-width: 48rem) {
    .pdp__form-addon-list {
      gap: 0.5rem;
      --checkbox-label-font-size: var(--font-size-sm);
    }
  }

  .pdp__form-extra-attribute-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .pdp-product__gallery {
    position: relative;
  }

  .pdp-gallery {
    inline-size: 100%;
  }

  .pdp-gallery__countdown {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 4;
    display: flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    background-color: hsla(0, 0%, 0%, 0.55);
    color: var(--clr-white);
    font-size: var(--font-size-2xs);
    font-weight: 700;
  }

  .pdp-gallery__countdown .amazing-header__countdown {
    --cluster-gap: 0.25rem;
  }

  .pdp-gallery__countdown .amazing-header__countdown-digit {
    inline-size: 2ch;
    block-size: auto;
    border-radius: 0;
    background-color: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
  }

  .pdp-gallery__countdown .amazing-header__countdown-separator {
    font-size: inherit;
  }

  .pdp-carousel__main {
    position: relative;
  }

  .pdp-carousel__main .picture-wrapper,
  .pdp-carousel__main .picture {
    position: relative;
  }

  .pdp-carousel__image {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: cover;
    cursor: crosshair;
    border: 1px solid var(--border-default);
    background-color: var(--background-soft);
  }

  .pdp-carousel__scroll-btn {
    position: absolute;
    inset-block-start: 50%;
    z-index: 3;
    transform: translateY(-50%);
  }

  .pdp-carousel__scroll-btn--prev {
    inset-inline-start: 0.5rem;
  }

  .pdp-carousel__scroll-btn--next {
    inset-inline-end: 0.5rem;
  }

  .pdp-carousel__thumbnails-wrapper {
    display: none;
    align-items: center;
    gap: 2rem;
    padding: 1rem;
    border: 1px solid var(--border-default);
    border-block-start: 0;
    background-color: var(--background-surface);
  }

  .pdp-carousel__thumbnails {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-inline-size: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pdp-carousel__thumbnails::-webkit-scrollbar {
    display: none;
  }

  .pdp-carousel__thumbnail {
    flex: 0 0 auto;
  }

  .pdp-carousel__thumbnail-link {
    position: relative;
    display: block;
    border: 1px solid var(--border-default);
    background-color: var(--background-soft);
  }

  .pdp-carousel__thumbnail-link.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: hsla(0, 0%, 0%, 0.33);
  }

  .pdp-carousel__thumbnail-link.is-active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    background: url('/Themes/PacificNew/Content/img/pdp-gallery/play-icon.svg') center no-repeat;
  }

  .pdp-carousel__thumbnail-image {
    position: relative;
    z-index: 0;
    display: block;
    inline-size: 5.3125rem;
    block-size: 5.3125rem;
    object-fit: cover;
  }

  .pdp-carousel__more {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 9999px;
    background-color: var(--background-muted);
  }

  .pdp-gallery__progress {
    block-size: 0.1875rem;
    inline-size: 100%;
    margin-block-start: 0.625rem;
    border-radius: 9999px;
    background-color: var(--background-muted);
  }

  .pdp-gallery__progress-fill {
    block-size: 100%;
    inline-size: 0;
    border-radius: 9999px;
    background-color: var(--background-brand-secondary);
    transition: inline-size 0.25s var(--ease-out-cubic);
  }

  /* Cloud Zoom's zoom window. The stock sheet positions it with `!important` (unlayered), so these
     need `!important` too — a layered important beats an unlayered one. */
  .pdp-gallery .cloudzoom-zoom {
    inline-size: 56vw !important;
    block-size: 32.5rem !important;
    /* Never let the zoom box leave the page. It hangs off the image's inline-end, so cap it to
       that side's free space: the viewport, minus the image, minus the wrapper's padding, minus
       the wrapper's centring gutters once it hits its max-width, minus the plugin's own offset
       (plus a little slack for `100vw` counting the scrollbar gutter). */
    max-inline-size: min(
      64.375rem,
      calc(100vw - 36.625rem - var(--wrapper-padding) - max(0rem, (100vw - var(--wrapper-max-width)) / 2) - 2rem)
    );
    background-color: var(--clr-white);
    box-shadow: var(--box-shadow-1);
    pointer-events: none;
  }

  .pdp-gallery:not(:hover) .cloudzoom-zoom {
    opacity: 0 !important;
  }

  /* No white flash while a thumbnail swap loads the picture — the plugin paints its ajax-loader
     (white, 70% opacity, spinner) over the image. Only that one is suppressed: `.cloudzoom-blank`
     must stay visible, it is the box the zoomed image is rendered into inside the zoom window. */
  .pdp-gallery .cloudzoom-ajax-loader {
    display: none;
  }

  .pdp-carousel__lightbox {
    inline-size: 100%;
    block-size: 100%;
    padding: 1rem;
    background-color: transparent;
    color: var(--clr-white);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .pdp-carousel__lightbox::backdrop {
    background-color: var(--clr-black);
  }

  .pdp-carousel__lightbox-content {
    display: flex;
    flex-direction: column;
    block-size: auto;
    min-block-size: 100%;
    max-inline-size: 36.625rem;
    margin-inline: auto;
    overflow: hidden;
  }

  .pdp-carousel__lightbox-image-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
    min-block-size: 0;
    padding-block-start: 3rem;
  }

  .pdp-carousel__lightbox-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: auto;
  }

  .pdp-carousel__lightbox-image {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: cover;
    max-inline-size: min(36.625rem, calc(100vh - 13rem));
  }

  .pdp-carousel__lightbox-close {
    display: grid;
    place-items: center;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 10;
    padding: 0.5rem;
    border-radius: 9999px;
    background-color: var(--clr-white);
    color: var(--text-main);
  }

  .pdp-carousel__lightbox-scroll-btn {
    position: absolute;
    inset-block-start: 50%;
    z-index: 11;
    transform: translateY(-50%);
  }

  .pdp-carousel__lightbox-scroll-btn--prev {
    inset-inline-start: 0.5rem;
  }

  .pdp-carousel__lightbox-scroll-btn--next {
    inset-inline-end: 0.5rem;
  }

  .pdp-carousel__lightbox-thumbnails {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-block: 1rem 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .pdp-carousel__lightbox-thumbnail {
    flex: 0 0 auto;
  }

  .pdp-carousel__lightbox-thumbnail-link {
    position: relative;
    display: block;
  }

  .pdp-carousel__lightbox-thumbnail-link.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: hsla(0, 0%, 0%, 0.33);
  }

  .pdp-carousel__lightbox-thumbnail-link.is-active::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    background: url('/Themes/PacificNew/Content/img/pdp-gallery/play-icon.svg') center no-repeat;
  }

  .pdp-carousel__lightbox-thumbnail-image {
    position: relative;
    z-index: 0;
    display: block;
    inline-size: 5.3125rem;
    block-size: 5.3125rem;
    object-fit: cover;
  }

  @media (min-width: 48rem) {
    .pdp-carousel__thumbnails-wrapper {
      display: flex;
    }

    .pdp-gallery__progress {
      display: none;
    }

    .pdp-gallery__countdown {
      padding: 0.25rem 0.625rem;
      font-size: var(--font-size-xs);
    }

    .pdp-gallery__countdown .amazing-header__countdown {
      --cluster-gap: 0.375rem;
    }
  }

  @media (min-width: 75rem) {
    .pdp-gallery__countdown {
      font-size: var(--font-size-sm);
    }

    .pdp-gallery__countdown .amazing-header__countdown {
      --cluster-gap: 0.5rem;
    }
  }

  .pdp-product__actions {
    display: none;
  }

  .pdp-action__label {
    display: none;
  }

  @media (min-width: 75rem) {
    .pdp-product__actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .pdp-product__actions > li {
      flex: 1;
    }

    .pdp-product__actions .pdp-action {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      inline-size: 100%;
      padding-block: 0.5rem;
      padding-inline: 2.5rem;
      background: linear-gradient(to right, hsl(322 71% 45% / 0.05), hsl(212 70% 40% / 0.05));
      border-radius: 5px;
      font-size: var(--font-size-sm);
      font-weight: 400;
      color: var(--text-main);
    }

    .pdp-product__actions .pdp-action svg {
      inline-size: 1.5rem;
      block-size: 1.5rem;
    }

    .pdp-product__actions .pdp-action__label {
      display: block;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .pdp-product__actions .pdp-action:hover {
      background: linear-gradient(to right, hsl(322 71% 45% / 0.1), hsl(212 70% 40% / 0.1));
    }
  }

  .pdp-tabs__list-gutter {
    padding-block-end: 0.5rem;
    overflow-x: scroll;
    position: relative;
  }

  @media (min-width: 75rem) {
    .pdp-tabs__list-gutter {
      overflow: visible;
      padding-block-end: 0;
    }
  }

  .pdp-tabs__list-container {
    inline-size: max-content;
    min-inline-size: 100%;
    border-radius: var(--border-radius-4);
    background: linear-gradient(to left, hsl(272 44% 49% / 0.05), hsl(322 79% 53% / 0.05));
  }

  @media (min-width: 48rem) {
    .pdp-tabs__list-container {
      padding-block: 0.625rem;
    }
  }

  .pdp-tabs__icon {
    flex-shrink: 0;
    display: none;
  }

  .pdp-tabs__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 5rem;
    padding-inline: 0.75rem;
    inline-size: max-content;
  }

  @media (min-width: 48rem) {
    .pdp-tabs__list {
      grid-auto-columns: 6.875rem;
      padding-inline: 1.25rem;
    }

    .pdp-tabs__icon {
      display: block;
      inline-size: 18px;
      block-size: 18px;
    }
  }

  @media (min-width: 75rem) {
    .pdp-tabs__list {
      grid-auto-columns: 7.375rem;
    }
  }

  .pdp-tabs__item {
    position: relative;
  }

  .pdp-tabs__item:hover:not(.is-active) .pdp-tabs__link {
    color: var(--text-brand-primary);
  }

  .pdp-tabs__item.is-active .pdp-tabs__link {
    background-image: var(--gradient-brand-alt);
    color: var(--text-high-contrast);
  }

  .pdp-tabs__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--border-radius-4);
    color: var(--text-heading);
    white-space: nowrap;
    text-decoration: none;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }

  @media (min-width: 75rem) {
    .pdp-tabs__link {
      padding-block: 0.5rem;
    }
  }

  .pdp-tabs__link::after {
    position: absolute;
    content: '';
    inset: 0;
  }

  .pdp-tabs__layout-sidebar {
    display: none;
  }

  @media (min-width: 75rem) {
    .pdp-tabs__layout {
      display: grid;
      grid-template-columns: 3fr 1fr;
      column-gap: 1.5rem;
      align-items: start;
    }

    .pdp-tabs__layout-main,
    .pdp-tabs__layout-main > .pdp-tabs,
    .pdp-tabs__layout-main > .pdp-tabs > .bleed {
      display: contents;
    }

    .pdp-tabs__layout-main .pdp-tabs__list-gutter {
      grid-column: 1 / -1;
    }

    .pdp-tabs__layout-main .pdp-tabs__body {
      grid-column: 1;
      min-inline-size: 0;
    }

    .pdp-tabs__layout-sidebar {
      display: block;
      grid-column: 2;
      grid-row: 2;
      margin-block-start: 2.5rem;
      align-self: start;
      position: sticky;
      inset-block-start: calc(var(--site-header-stuck-height, 0px) + 1rem);
    }
  }

  .pdp-tabs__body {
    margin-block-start: 2rem;
  }

  .pdp-tabs__panel[hidden] {
    display: none;
  }

  .pdp-tabs__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-heading);
    font-size: var(--font-size-sm);
    font-weight: 700;
  }

  .pdp-tabs__title svg {
    flex-shrink: 0;
    inline-size: 18px;
    block-size: 18px;
  }

  .pdp-tabs__specifications-list {
    display: grid;
    margin-block-start: 2rem;
  }

  .pdp-tabs__specifications-item {
    display: grid;
    grid-template-columns: 2fr 3fr;
    align-items: center;
    gap: 0.5rem;
    max-inline-size: 32rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
  }

  .pdp-tabs__specifications-item[hidden] {
    display: none;
  }

  .pdp-tabs__specifications-name {
    color: var(--text-muted);
  }

  .pdp-tabs__specifications-value {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding-block: 0.625rem;
    padding-inline: 1.25rem;
    background: linear-gradient(to right, hsl(322 71% 45% / 0.05), hsl(212 70% 40% / 0.05));
    color: var(--text-main);
  }

  .pdp-tabs__specifications-color {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .pdp-tabs__specifications-color-swatch {
    display: inline-block;
    inline-size: 1rem;
    block-size: 1rem;
    border: 1px solid var(--border-default);
    border-radius: 50%;
  }

  .pdp-tabs__specifications-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 1rem;
    margin-inline: auto;
    color: var(--text-brand-primary);
    font-size: var(--font-size-sm);
    font-weight: 400;
    cursor: pointer;
  }

  .pdp-tabs__specifications-toggle:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  .pdp-tabs__specifications-toggle.is-expanded svg {
    transform: rotate(180deg);
  }

  @media (min-width: 48rem) {
    .pdp-tabs__body {
      margin-block-start: 2.5rem;
    }

    .pdp-tabs__title {
      font-size: var(--font-size-2xl);
    }

    .pdp-tabs__title svg {
      inline-size: 24px;
      block-size: 24px;
    }

    .pdp-tabs__specifications-list {
      padding: 2rem;
      border: 1px solid var(--border-default);
      border-radius: var(--border-radius-4);
    }
  }

  @media (min-width: 75rem) {
    .pdp-tabs__specifications-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 1.25rem;
    }
  }

  .pdp-tabs__description-body,
  .pdp-tabs__faq-body {
    margin-block-start: 2rem;
  }

  .pdp-tabs__description-body :where(ul, ol, li, p, h1, h2, h3, h4, h5, h6, blockquote, dl, dt, dd, figure) {
    margin: revert;
    padding: revert;
    list-style: revert;
  }

  @media (min-width: 48rem) {
    .pdp-tabs__description-body,
    .pdp-tabs__faq-body {
      padding: 2rem;
      border: 1px solid var(--border-default);
      border-radius: var(--border-radius-4);
    }
  }

  .pdp-tabs__empty {
    margin-block-start: 2rem;
    color: var(--text-muted);
    text-align: center;
  }

  .pdp-tabs__faq-body > .pdp-tabs__empty {
    margin-block-start: 0;
  }

  .pdp-tabs__reviews,
  .pdp-tabs__reviews-dialog {
    --pdp-reviews-soft: linear-gradient(to right, hsl(322 71% 45% / 0.05), hsl(212 70% 40% / 0.05));
  }

  .pdp-tabs__reviews-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .pdp-tabs__reviews-count {
    color: var(--text-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: 400;
  }

  .pdp-tabs__reviews-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-block-start: 2rem;
    padding: 2rem;
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-4);
  }

  .pdp-tabs__reviews-rating {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .pdp-tabs__reviews-rating-text {
    color: var(--clr-black);
    text-align: center;
  }

  .pdp-tabs__reviews-rating-value {
    font-size: var(--font-size-sm);
    font-weight: 700;
  }

  .pdp-tabs__reviews-rating-label {
    font-size: var(--font-size-xs);
    font-weight: 400;
  }

  .pdp-tabs__reviews-stars,
  .pdp-tabs__reviews-card-stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .pdp-tabs__reviews-actions {
    position: relative;
    display: grid;
    place-items: center;
    color: var(--text-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: 500;
  }

  .pdp-tabs__reviews-actions > svg {
    grid-column: 1;
    grid-row: 1;
    pointer-events: none;
    transition:
      transform 200ms ease,
      filter 200ms ease;
  }

  .pdp-tabs__reviews-add-frame-wide {
    display: none;
  }

  .pdp-tabs__reviews-add-frame-narrow {
    display: block;
  }

  .pdp-tabs__reviews-add {
    grid-column: 1;
    grid-row: 1;
    border-radius: var(--border-radius-4);
    transition: color 200ms ease;
  }

  .pdp-tabs__reviews-add::after {
    position: absolute;
    content: '';
    inset: 0;
  }

  .pdp-tabs__reviews-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .pdp-tabs__reviews-add:focus-visible {
    outline: 1px solid var(--clr-brand-500);
    outline-offset: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .pdp-tabs__reviews-actions:hover > svg {
      transform: scale(1.02);
      filter: brightness(0.98);
    }

    .pdp-tabs__reviews-actions:hover .pdp-tabs__reviews-add {
      color: var(--clr-accent-500);
    }
  }

  .pdp-tabs__reviews-actions:focus-within > svg {
    transform: scale(1.02);
    filter: brightness(0.98);
  }

  @media (min-width: 48rem) {
    .pdp-tabs__reviews-actions {
      font-size: var(--font-size-md);
    }

    .pdp-tabs__reviews-add-frame-wide {
      display: block;
    }

    .pdp-tabs__reviews-add-frame-narrow {
      display: none;
    }
  }

  .pdp-tabs__reviews-sort {
    padding-block-start: 2rem;
    padding-block-end: 1.25rem;
    border-block-end: 1px solid var(--border-default);
  }

  .pdp-tabs__reviews-card {
    padding-block: 2.5rem;
    border-block-end: 1px solid var(--border-default);
  }

  .pdp-tabs__reviews-card[hidden] {
    display: none;
  }

  .pdp-tabs__reviews-card-head {
    display: grid;
    gap: 0.5rem;
  }

  .pdp-tabs__reviews-card-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp-tabs__reviews-card-avatar {
    display: grid;
    place-items: center;
    padding: 0.5rem;
    border-radius: 100dvh;
    background-color: var(--clr-gray-300);
  }

  .pdp-tabs__reviews-card-avatar-icon {
    inline-size: 24px;
    block-size: 24px;
  }

  .pdp-tabs__reviews-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
  }

  .pdp-tabs__reviews-card-name {
    color: var(--text-main);
  }

  .pdp-tabs__reviews-card-date {
    color: var(--text-muted);
  }

  .pdp-tabs__reviews-card-text {
    margin-block-start: 1.25rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
  }

  .pdp-tabs__reviews-card-helpfulness {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    margin-block-start: 2rem;
  }

  .pdp-tabs__reviews-card-vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-5);
    color: var(--text-muted);
  }

  .pdp-tabs__reviews-card-vote:hover {
    color: var(--text-brand-primary);
  }

  .pdp-tabs__reviews-card-vote[data-review-vote='dislike']:hover {
    color: var(--clr-red-500);
  }

  .pdp-tabs__reviews-card-vote.is-liked {
    color: var(--text-brand-primary);
  }

  .pdp-tabs__reviews-card-vote.is-disliked {
    color: var(--clr-red-500);
  }

  .pdp-tabs__reviews-card-vote-icon {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .pdp-tabs__reviews-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    margin-inline: auto;
    color: var(--text-brand-primary);
  }

  .pdp-tabs__reviews-toggle.is-expanded svg {
    transform: rotate(180deg);
  }

  @media (min-width: 48rem) {
    .pdp-tabs__reviews-count {
      font-size: var(--font-size-md);
    }

    .pdp-tabs__reviews-summary {
      flex-direction: row;
      justify-content: space-between;
      padding-inline-start: 6.875rem;
    }

    .pdp-tabs__reviews-rating-value {
      font-size: var(--font-size-2xl);
    }

    .pdp-tabs__reviews-rating-label {
      font-size: var(--font-size-md);
      font-weight: 700;
    }

    .pdp-tabs__reviews-card-name,
    .pdp-tabs__reviews-card-text,
    .pdp-tabs__reviews-toggle {
      font-size: var(--font-size-md);
    }

    .pdp-tabs__reviews-toggle {
      margin-inline: initial;
    }
  }

  dialog.pdp-tabs__reviews-dialog {
    --pdp-tabs-reviews-shift: -100%;
    inset-block-start: 0;
    inset-block-end: auto;
    inset-inline: 0;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    max-block-size: calc(100vh - 3.75rem);
    max-block-size: calc(100svh - 3.75rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--background-surface);
    border-end-start-radius: var(--border-radius-4);
    border-end-end-radius: var(--border-radius-4);
    box-shadow: var(--box-shadow-3);
    color: inherit;
  }

  dialog.pdp-tabs__reviews-dialog::backdrop {
    background-color: hsla(228, 5%, 19%, 32%);
  }

  dialog.pdp-tabs__reviews-dialog[open] {
    animation: pdp-tabs-reviews-dialog-enter 0.3s var(--ease-out-cubic);
  }

  dialog.pdp-tabs__reviews-dialog[open]::backdrop {
    animation: overlay-fade-in 0.3s var(--ease-out-cubic);
  }

  @keyframes pdp-tabs-reviews-dialog-enter {
    from {
      transform: translateY(var(--pdp-tabs-reviews-shift));
    }

    to {
      transform: translateY(0);
    }
  }

  html:has(dialog.pdp-tabs__reviews-dialog[open]) {
    overflow: hidden;
  }

  .pdp-tabs__reviews-dialog-header,
  .pdp-tabs__reviews-dialog-footer {
    padding: 1.25rem;
  }

  .pdp-tabs__reviews-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    border-block-end: 2px solid var(--border-default);
  }

  .pdp-tabs__reviews-dialog-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--text-main);
  }

  .pdp-tabs__reviews-dialog-body {
    display: grid;
    padding: 1.25rem 1rem;
    gap: 1.25rem;
  }

  .pdp-tabs__reviews-dialog.is-success .pdp-tabs__reviews-dialog-body {
    display: none;
  }

  .pdp-tabs__reviews-dialog-success {
    display: none;
    justify-items: center;
    text-align: center;
    gap: 2rem;
    padding: 1.25rem 2rem;
  }

  .pdp-tabs__reviews-dialog.is-success .pdp-tabs__reviews-dialog-success {
    display: grid;
  }

  .pdp-tabs__reviews-dialog-success-icon {
    display: grid;
    place-items: center;
    padding: 1.25rem;
    border-radius: 999px;
    background-color: var(--clr-brand-500);
  }

  .pdp-tabs__reviews-dialog-success-content {
    display: grid;
  }

  .pdp-tabs__reviews-dialog-success-title {
    color: var(--text-main);
    font-size: var(--font-size-lg);
    font-weight: 700;
  }

  .pdp-tabs__reviews-dialog-success-text {
    margin-block-start: 0.5rem;
    color: var(--text-main);
    font-size: var(--font-size-sm);
    font-weight: 500;
  }

  .pdp-tabs__reviews-dialog-product {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--border-default);
  }

  .pdp-tabs__reviews-dialog-product-image {
    inline-size: 60px;
    block-size: 60px;
    object-fit: cover;
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-4);
  }

  .pdp-tabs__reviews-dialog-product-details {
    display: grid;
    gap: 0.5rem;
  }

  .pdp-tabs__reviews-dialog-product-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-main);
  }

  .pdp-tabs__reviews-dialog-product-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .pdp-tabs__reviews-dialog-product-attr,
  .pdp-tabs__reviews-dialog-product-date {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: var(--font-size-2xs);
    font-weight: 500;
    color: var(--text-muted);
  }

  .pdp-tabs__reviews-dialog-product-attr[hidden] {
    display: none;
  }

  .pdp-tabs__reviews-dialog-product-meta dd {
    color: var(--text-main);
  }

  .pdp-tabs__reviews-dialog-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-block-end: 1rem;
    border-block-end: 1px solid var(--border-default);
  }

  .pdp-tabs__reviews-dialog-rating-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .pdp-tabs__reviews-dialog-rating-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-main);
  }

  .pdp-tabs__reviews-dialog-rating-hint {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
  }

  .pdp-tabs__reviews-dialog-stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.5rem;
    direction: ltr;
  }

  .page-content__review-rating,
  .pdp-rating-dropdown__stars {
    direction: ltr;
  }

  .pdp-tabs__reviews-dialog-star-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .pdp-tabs__reviews-dialog-star-input-reset {
    display: none;
  }

  .pdp-tabs__reviews-dialog-star-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: var(--clr-gray-400);
    cursor: pointer;
    transition:
      color 0.2s ease,
      transform 0.2s ease;
  }

  .pdp-tabs__reviews-dialog-star-label svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  .pdp-tabs__reviews-dialog-star-num {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: 1;
  }

  .pdp-tabs__reviews-dialog-star-label:hover,
  .pdp-tabs__reviews-dialog-star-label:hover ~ .pdp-tabs__reviews-dialog-star-label,
  .pdp-tabs__reviews-dialog-star-input:checked ~ .pdp-tabs__reviews-dialog-star-label {
    color: hsl(45, 100%, 51%);
  }

  .pdp-tabs__reviews-dialog-form {
    display: grid;
    gap: 1.25rem;
  }

  .pdp-tabs__reviews-dialog-field {
    display: grid;
    gap: 0.5rem;
  }

  .pdp-tabs__reviews-dialog .text-field-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-main);
  }

  .pdp-tabs__reviews-dialog .text-input {
    padding: 1rem;
    border-color: var(--border-default);
    border-radius: var(--border-radius-4);
    color: var(--text-main);
    font-size: var(--font-size-sm);
  }

  .pdp-tabs__reviews-dialog-textarea {
    min-block-size: 8rem;
    resize: none;
  }

  .pdp-tabs__reviews-dialog .text-input:focus-visible {
    outline: none;
    border-color: var(--clr-brand-500);
    box-shadow: 0 0 0 3px rgba(31, 98, 174, 0.12);
  }

  .pdp-tabs__reviews-dialog-privacy {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .pdp-tabs__reviews-dialog-privacy-label {
    font-size: var(--font-size-sm);
    color: var(--text-main);
  }

  .pdp-tabs__reviews-dialog-terms,
  .pdp-tabs__reviews-dialog-hint {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
  }

  .pdp-tabs__reviews-dialog-terms a {
    color: var(--text-brand-primary);
  }

  .pdp-tabs__reviews-dialog-footer {
    border-block-start: 1px solid var(--border-default);
  }

  .pdp-tabs__reviews-dialog-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pdp-tabs__reviews-dialog-footer-success {
    display: none;
    inline-size: 100%;
    text-align: center;
  }

  .pdp-tabs__reviews-dialog.is-success .pdp-tabs__reviews-dialog-footer-form,
  .pdp-tabs__reviews-dialog.is-success .pdp-tabs__reviews-dialog-hint {
    display: none;
  }

  .pdp-tabs__reviews-dialog.is-success .pdp-tabs__reviews-dialog-footer-success {
    display: block;
  }

  .pdp-tabs__reviews-dialog-footer-success .btn-primary {
    box-sizing: border-box;
    min-inline-size: 7rem;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-xs);
  }

  .pdp-tabs__reviews-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .pdp-tabs__reviews-dialog-actions .btn-primary,
  .pdp-tabs__reviews-dialog-actions .btn-secondary {
    box-sizing: border-box;
    min-inline-size: 7rem;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-xs);
  }

  .pdp-tabs__reviews-dialog-actions .btn-primary:disabled,
  .pdp-tabs__reviews-dialog-actions .btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .pdp-tabs__reviews-dialog-native-submit {
    display: none;
  }

  .pdp-tabs__reviews-dialog-error {
    display: none;
    font-size: var(--font-size-2xs);
    font-weight: 500;
    color: var(--clr-red-500);
  }

  .pdp-tabs__reviews-dialog-error.is-visible {
    display: block;
  }

  @media (min-width: 48rem) {
    dialog.pdp-tabs__reviews-dialog {
      inset-block-start: 3rem;
      margin-inline: auto;
      inline-size: min(calc(100% - 2rem), 44rem);
      border-radius: var(--border-radius-4);
    }

    .pdp-tabs__reviews-dialog-stars {
      margin-inline-start: auto;
    }

    .pdp-tabs__reviews-dialog-header,
    .pdp-tabs__reviews-dialog-footer {
      padding-inline: 2rem;
    }

    .pdp-tabs__reviews-dialog-body {
      padding: 2rem;
    }

    .pdp-tabs__reviews-dialog-actions .btn-primary,
    .pdp-tabs__reviews-dialog-actions .btn-secondary,
    .pdp-tabs__reviews-dialog-footer-success .btn-primary {
      padding: 0.75rem 1.25rem;
      font-size: var(--font-size-sm);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    dialog.pdp-tabs__reviews-dialog[open] {
      animation: none;
    }

    .pdp-tabs__reviews-dialog-star-label {
      transition: none;
    }
  }

  .pdp-tabs__questions-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .pdp-tabs__questions-intro {
    margin-block-start: 0.5rem;
    font-size: var(--font-size-2xs);
    font-weight: 400;
    color: var(--text-muted);
  }

  .pdp-tabs__questions-actions {
    position: relative;
    display: grid;
    place-items: center;
    margin-block-start: 0.5rem;
    inline-size: fit-content;
    color: var(--text-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: 500;
  }

  .pdp-tabs__questions-actions > svg {
    grid-column: 1;
    grid-row: 1;
    pointer-events: none;
    transition:
      transform 200ms ease,
      filter 200ms ease;
  }

  .pdp-tabs__questions-add-frame-wide {
    display: none;
  }

  .pdp-tabs__questions-add-frame-narrow {
    display: block;
  }

  .pdp-tabs__questions-add {
    grid-column: 1;
    grid-row: 1;
    border-radius: var(--border-radius-4);
    color: inherit;
    transition: color 200ms ease;
  }

  .pdp-tabs__questions-add::after {
    position: absolute;
    content: '';
    inset: 0;
  }

  .pdp-tabs__questions-add:focus-visible {
    outline: 1px solid var(--clr-brand-500);
    outline-offset: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .pdp-tabs__questions-actions:hover > svg {
      transform: scale(1.02);
      filter: brightness(0.98);
    }

    .pdp-tabs__questions-actions:hover .pdp-tabs__questions-add {
      color: var(--clr-accent-500);
    }
  }

  .pdp-tabs__questions-actions:focus-within > svg {
    transform: scale(1.02);
    filter: brightness(0.98);
  }

  @media (min-width: 48rem) {
    .pdp-tabs__questions-add-frame-wide {
      display: block;
    }

    .pdp-tabs__questions-add-frame-narrow {
      display: none;
    }
  }

  .pdp-tabs__questions-sort {
    padding-block-start: 2rem;
    padding-block-end: 1.25rem;
    border-block-end: 1px solid var(--border-default);
  }

  .pdp-tabs__questions-card {
    padding-block: 2.5rem;
    border-block-end: 1px solid var(--border-default);
  }

  .pdp-tabs__questions-card[hidden] {
    display: none;
  }

  .pdp-tabs__questions-question {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 1rem 0.5rem;
  }

  .pdp-tabs__questions-avatar {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    place-items: center;
    padding: 0.5rem;
    border-radius: 100dvh;
  }

  .pdp-tabs__questions-avatar-question {
    background-color: var(--clr-gray-300);
  }

  .pdp-tabs__questions-avatar-answer {
    border: 1px solid var(--border-default);
    background-color: var(--clr-white);
  }

  .pdp-tabs__questions-avatar-icon {
    inline-size: 24px;
    block-size: 24px;
  }

  .pdp-tabs__questions-question-text {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
    color: var(--text-main);
    font-size: var(--font-size-sm);
    font-weight: 500;
  }

  .pdp-tabs__questions-answer-action {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    color: var(--text-brand-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  .pdp-tabs__questions-answer-action:hover {
    color: var(--clr-accent-500);
  }

  .pdp-tabs__questions-answers {
    display: grid;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
  }

  .pdp-tabs__questions-answer {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.75rem 0.5rem;
  }

  .pdp-tabs__questions-answer-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    grid-column: 2;
    grid-row: 1;
  }

  .pdp-tabs__questions-answer-name {
    color: var(--text-main);
    font-size: var(--font-size-sm);
    font-weight: 500;
  }

  .pdp-tabs__questions-answer-text {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
  }

  .pdp-tabs__questions-answer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    grid-column: 2;
    grid-row: 2;
  }

  .pdp-tabs__questions-votes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .pdp-tabs__questions-vote {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border-default);
    border-radius: var(--border-radius-5);
    color: var(--text-muted);
  }

  .pdp-tabs__questions-vote:hover {
    color: var(--text-brand-primary);
  }

  .pdp-tabs__questions-vote[data-question-vote='dislike']:hover {
    color: var(--clr-red-500);
  }

  .pdp-tabs__questions-vote.is-liked {
    color: var(--text-brand-primary);
  }

  .pdp-tabs__questions-vote.is-disliked {
    color: var(--clr-red-500);
  }

  .pdp-tabs__questions-vote-icon {
    inline-size: 2rem;
    block-size: 2rem;
  }

  .pdp-tabs__questions-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    margin-inline: auto;
    color: var(--text-brand-primary);
  }

  .pdp-tabs__questions-toggle.is-expanded svg {
    transform: rotate(180deg);
  }

  @media (min-width: 48rem) {
    .pdp-tabs__questions-intro {
      font-size: var(--font-size-sm);
    }

    .pdp-tabs__questions-actions {
      font-size: var(--font-size-md);
    }

    .pdp-tabs__questions-card {
      padding-block: 3rem;
    }

    .pdp-tabs__questions-avatar-icon {
      inline-size: 32px;
      block-size: 32px;
    }

    .pdp-tabs__questions-question-text,
    .pdp-tabs__questions-answer-text,
    .pdp-tabs__questions-answer-name,
    .pdp-tabs__questions-answer-action,
    .pdp-tabs__questions-toggle {
      font-size: var(--font-size-md);
    }

    .pdp-tabs__questions-toggle {
      margin-inline: initial;
    }
  }

  .error-page {
    --error-image-size: 7.5rem;

    display: grid;
    gap: 2rem;
    justify-items: center;
  }

  .error-page__image {
    inline-size: var(--error-image-size);
    block-size: auto;
  }

  .error-page__body {
    display: grid;
    gap: 2rem;
    justify-items: center;
  }

  .error-page__copy {
    display: grid;
    gap: 0.5rem;
    text-align: center;
  }

  .error-page__title {
    color: var(--clr-purple-500);
  }

  .error-page__description {
    color: var(--clr-accent-400);
  }

  .error-page__debug {
    padding: 0.5rem;
    border-radius: var(--border-radius-2);
    background-color: var(--background-soft);
    color: var(--text-main);
    font-family: monospace;
    line-height: 1.5;
    overflow-wrap: anywhere;
    text-align: start;
  }

  .error-page__actions {
    display: grid;
    gap: 0.5rem;
    justify-items: center;
    inline-size: 100%;
    max-inline-size: 18rem;
  }

  .error-page__code {
    color: hsl(272 34% 58%);
    font-size: var(--font-size-2xl);
  }

  @media (min-width: 48rem) {
    .error-page {
      --error-image-size: 13rem;
      gap: 3rem;
    }

    .error-page__body {
      gap: 3rem;
    }

    .error-page__copy {
      gap: 1rem;
    }

    .error-page__actions {
      gap: 0.75rem;
      max-inline-size: 20rem;
    }

    .error-page__code {
      font-size: 6rem;
    }
  }

  @media (min-width: 75rem) {
    .error-page {
      --error-image-size: 18rem;
    }
  }
}

@layer utilities {
  @media (min-width: 75rem) {
    .plp-head .back-button,
    .plp-head__search {
      display: none;
    }
  }

  .plp-suggestion .product-strip__items,
  .pdp-section .product-strip__items {
    --track-auto-columns: 10.625rem;
  }

  .plp-suggestion .product-strip__category-icon,
  .pdp-section .product-strip__category-icon {
    inline-size: 42px;
    block-size: 42px;
  }

  .plp-suggestion .product-strip__category-icon-image,
  .pdp-section .product-strip__category-icon-image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  @media (min-width: 48rem) {
    .plp-suggestion .product-strip__items,
    .pdp-section .product-strip__items {
      --track-auto-columns: 12rem;
    }

    .plp-suggestion .product-strip__category-icon,
    .pdp-section .product-strip__category-icon {
      inline-size: 64px;
      block-size: 64px;
    }
  }

  @media (min-width: 75rem) {
    .plp-suggestion .product-strip__category,
    .pdp-section .product-strip__category {
      align-items: center;
    }

    .plp-suggestion .product-strip__category-title,
    .pdp-section .product-strip__category-title {
      writing-mode: vertical-rl;
      rotate: 180deg;
    }

    .plp-suggestion .product-strip__items,
    .pdp-section .product-strip__items {
      --track-gap: 0.5rem;
    }
  }

  .plp-filters .checkbox-label {
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
  }

  .plp-filters .checkbox-item .filter-item-name {
    font-weight: 500;
  }

  .plp-filters .checkbox-label:has(input[type='checkbox']:checked) {
    color: var(--text-brand-secondary);
  }

  .plp-filters a.toggleControl:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .plp-skeleton-list {
    --auto-grid-min: 13rem;
    --auto-grid-gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--auto-grid-min, 13rem), 100%), 1fr));
  }

  .plp-skeleton {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-block: 1rem;
    border-block-end: 1px solid var(--border-default);
  }

  @media (max-width: 27.49rem) {
    .plp-skeleton:first-child {
      padding-block-start: 0;
    }
  }

  .plp-skeleton__media {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 170px;
    block-size: 170px;
    border-radius: var(--border-radius-4);
    background-color: var(--background-muted);
  }

  .plp-skeleton__lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    inline-size: 100%;
    block-size: 170px;
    padding-inline: 0.5rem;
  }

  .plp-skeleton__line {
    flex-shrink: 0;
    block-size: 20px;
    border-radius: 10px;
    background-color: var(--background-muted);
  }

  .plp-skeleton__line--name {
    inline-size: 80px;
  }

  .plp-skeleton__line--price {
    inline-size: 113px;
    margin-block-start: auto;
  }

  .plp-skeleton__media,
  .plp-skeleton__line {
    position: relative;
    overflow: hidden;
  }

  .plp-skeleton__media::after,
  .plp-skeleton__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      to right,
      transparent,
      color-mix(in srgb, var(--clr-white) 70%, transparent),
      transparent
    );
    transform: translateX(100%);
    animation: plp-skeleton-shimmer 1s linear infinite;
    will-change: transform;
  }

  @keyframes plp-skeleton-shimmer {
    to {
      transform: translateX(-100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .plp-skeleton__media::after,
    .plp-skeleton__line::after {
      animation: none;
    }
  }

  @media (min-width: 27.5rem) {
    .plp-skeleton {
      flex-direction: column;
      inline-size: calc(100% + 1px);
      block-size: calc(100% + 1px);
      padding: 1rem;
      border: 1px solid var(--border-default);
      background-color: var(--clr-white);
    }

    .plp-skeleton__media {
      inline-size: 100%;
    }

    .plp-skeleton__lines {
      block-size: auto;
      padding-inline: 0;
      padding-block: 0;
    }
  }

  .plp-body__products .infinite-scroll-loader {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .sorting {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .sorting__label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .sorting__label svg {
    flex-shrink: 0;
  }

  .sorting__list {
    display: flex;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border-radius: var(--border-radius-4);
    background-image: linear-gradient(
      to right,
      color-mix(in srgb, var(--clr-accent-600) 5%, transparent),
      color-mix(in srgb, var(--clr-brand-500) 5%, transparent)
    );
  }

  .sorting__item {
    display: flex;
  }

  .sorting__option {
    padding-block: 0.25rem;
    padding-inline: 0.75rem;
    border-radius: var(--border-radius-4);
  }

  .sorting__option.is-active {
    color: var(--text-high-contrast);
    background-image: var(--gradient-brand-alt);
  }

  @media (hover: hover) and (pointer: fine) {
    .sorting__option:hover:not(.is-active) {
      color: var(--text-brand-primary);
    }
  }

  .sorting__option:focus-visible {
    outline: 1px solid var(--text-brand-primary);
    outline-offset: 2px;
  }

  .pdp-tabs__reviews-sort .sorting__select {
    inline-size: fit-content;
    max-inline-size: 100%;
    background-image: url('../img/plp/sort.svg'), var(--pdp-reviews-soft);
    background-repeat: no-repeat, no-repeat;
    background-position:
      right var(--sorting-padding-inline) center,
      center;
    background-size: var(--sorting-icon-size), auto;
  }

  @media (max-width: 47.99rem) {
    .pdp-tabs__reviews-sort .sorting__label,
    .pdp-tabs__reviews-sort .sorting__list {
      display: none;
    }
  }

  @media (min-width: 48rem) {
    .pdp-tabs__reviews-sort .sorting__select {
      display: none;
    }
  }

  .pdp-tabs__questions-sort .sorting__select {
    inline-size: fit-content;
    max-inline-size: 100%;
    background-image:
      url('../img/plp/sort.svg'), linear-gradient(to right, hsl(322 71% 45% / 0.05), hsl(212 70% 40% / 0.05));
    background-repeat: no-repeat, no-repeat;
    background-position:
      right var(--sorting-padding-inline) center,
      center;
    background-size: var(--sorting-icon-size), auto;
  }

  @media (max-width: 47.99rem) {
    .pdp-tabs__questions-sort .sorting__label,
    .pdp-tabs__questions-sort .sorting__list {
      display: none;
    }
  }

  @media (min-width: 48rem) {
    .pdp-tabs__questions-sort .sorting__select {
      display: none;
    }
  }

  .plp-no-products {
    padding-block: 2rem;
    text-align: center;
  }

  .plp-body__products-list {
    --auto-grid-min: 13rem;
    --auto-grid-gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--auto-grid-min, 13rem), 100%), 1fr));
  }

  .plp-body__products-item {
    --plp-products-image-size: 10.625rem;
    position: relative;
    display: grid;
  }

  .plp-body__products-item a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 20;
  }

  .plp-body__products-item .card-primary {
    inline-size: 100%;
    block-size: 100%;
  }

  .plp-body__colors {
    position: absolute;
    z-index: 30;
    inset-block-start: 0.5rem;
    left: 0.5rem;
  }

  .plp-body__color-item {
    flex-shrink: 0;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 999px;
  }

  .plp-body__color-item--light {
    border: 1px solid var(--clr-gray-400);
  }

  .plp-body__colors-more {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  @media (min-width: 27.5rem) {
    .plp-body__products-item .card-primary {
      inline-size: calc(100% + 1px);
      block-size: calc(100% + 1px);
    }
  }

  @media (max-width: 27.49rem) {
    .plp-body__products-item {
      padding-block: 1rem;
      border-block-end: 1px solid var(--border-default);
    }

    .plp-body__products-item:first-child {
      padding-block-start: 0;
    }

    .plp-body__products-item .card-primary {
      grid-template-columns: var(--plp-products-image-size) 1fr;
      grid-template-rows: 1fr;
      gap: 1rem;
      border: 0;
      background-color: transparent;
    }

    .plp-body__products-item .card-primary__media {
      padding-block-start: 0;
    }

    .plp-body__products-item .card-primary__image {
      inline-size: var(--plp-products-image-size);
      block-size: var(--plp-products-image-size);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .plp-body__products-item .card-primary {
      transition: box-shadow 200ms ease;
    }

    .plp-body__products-item:has(.card-primary__link:hover) .card-primary {
      box-shadow: var(--box-shadow-2);
    }
  }

  .amazing-item .card-primary__link:hover,
  .product-strip__item .card-primary__link:hover,
  .newest-products__item .card-primary__link:hover,
  .plp-body__products-item .card-primary__link:hover {
    text-decoration: none;
  }

  .text-center {
    text-align: center;
  }

  .text-main {
    color: var(--text-main);
  }

  .text-heading {
    color: var(--text-heading);
  }

  .text-high-contrast {
    color: var(--text-high-contrast);
  }

  .text-brand-primary {
    color: var(--text-brand-primary);
  }

  .text-brand-secondary {
    color: var(--text-brand-secondary);
  }

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

  .cart__tabs-link[aria-selected='true'] {
    color: var(--text-brand-primary);
  }

  .cart__tabs-link:hover {
    color: var(--text-brand-primary);
  }

  .text-danger {
    color: var(--clr-red-500);
  }

  .text-gradient {
    background-image: var(--text-gradient, var(--gradient-brand-vertical));
    background-clip: text;
    color: transparent;
  }

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

  .background-soft {
    background-color: var(--background-soft);
  }

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

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

  .background-inverse {
    background-color: var(--background-inverse);
  }

  .background-brand-primary {
    background-color: var(--background-brand-primary);
  }

  .background-brand-secondary {
    background-color: var(--background-brand-secondary);
  }

  .background-success {
    background-color: var(--background-success);
  }

  .background-danger {
    background-color: var(--background-danger);
  }

  .background-warning {
    background-color: var(--background-warning);
  }

  .background-discount {
    background-color: var(--background-discount);
  }

  .opacity-60 {
    opacity: 0.6;
  }

  .font-size-2xs {
    font-size: var(--font-size-2xs);
  }

  .font-size-xs {
    font-size: var(--font-size-xs);
  }

  .font-size-sm {
    font-size: var(--font-size-sm);
  }

  .font-size-md {
    font-size: var(--font-size-md);
  }

  .font-size-lg {
    font-size: var(--font-size-lg);
  }

  .font-size-xl {
    font-size: var(--font-size-xl);
  }

  .font-size-2xl {
    font-size: var(--font-size-2xl);
  }

  .font-size-3xl {
    font-size: var(--font-size-3xl);
  }

  .font-size-4xl {
    font-size: var(--font-size-4xl);
  }

  .font-size-text {
    font-size: var(--font-size-text);
  }

  .border-radius-1 {
    border-radius: var(--border-radius-1);
  }

  .border-radius-2 {
    border-radius: var(--border-radius-2);
  }

  .border-radius-3 {
    border-radius: var(--border-radius-3);
  }

  .border-radius-4 {
    border-radius: var(--border-radius-4);
  }

  .border-radius-5 {
    border-radius: var(--border-radius-5);
  }

  .box-shadow-1 {
    box-shadow: var(--box-shadow-1);
  }

  .font-weight-400 {
    font-weight: 400;
  }

  .font-weight-500 {
    font-weight: 500;
  }

  .font-weight-700 {
    font-weight: 700;
  }

  .font-weight-900 {
    font-weight: 900;
  }

  .cover-hit {
    position: relative;
  }

  .cover-hit::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  @media (min-width: 48rem) {
    .font-size-48-2xs {
      font-size: var(--font-size-48-2xs);
    }

    .font-size-48-xs {
      font-size: var(--font-size-48-xs);
    }

    .font-size-48-sm {
      font-size: var(--font-size-48-sm);
    }

    .font-size-48-md {
      font-size: var(--font-size-48-md);
    }

    .font-size-48-lg {
      font-size: var(--font-size-48-lg);
    }

    .font-size-48-xl {
      font-size: var(--font-size-48-xl);
    }

    .font-size-48-2xl {
      font-size: var(--font-size-48-2xl);
    }

    .font-size-48-3xl {
      font-size: var(--font-size-48-3xl);
    }

    .font-size-48-4xl {
      font-size: var(--font-size-48-4xl);
    }
  }

  @media (min-width: 75rem) {
    .font-size-68-2xs {
      font-size: var(--font-size-68-2xs);
    }

    .font-size-68-xs {
      font-size: var(--font-size-68-xs);
    }

    .font-size-68-sm {
      font-size: var(--font-size-68-sm);
    }

    .font-size-68-md {
      font-size: var(--font-size-68-md);
    }

    .font-size-68-lg {
      font-size: var(--font-size-68-lg);
    }

    .font-size-68-xl {
      font-size: var(--font-size-68-xl);
    }

    .font-size-68-2xl {
      font-size: var(--font-size-68-2xl);
    }

    .font-size-68-3xl {
      font-size: var(--font-size-68-3xl);
    }

    .font-size-68-4xl {
      font-size: var(--font-size-68-4xl);
    }
  }

  .bleed {
    --bleed-padding: 0px;
    box-sizing: content-box;
    inline-size: calc(100% - 2 * var(--bleed-padding));
    max-inline-size: 90rem;
    margin-inline: auto;
    padding-inline: var(--bleed-padding);
  }

  @media (min-width: 75rem) {
    .bleed {
      --bleed-padding: 5rem;
    }
  }

  .cart__suggested .bleed {
    --bleed-padding: 0;
  }

  .scroll-strip[data-bar='none'] {
    overflow-x: auto;
    scrollbar-width: none;
    padding-inline-end: 0;
  }

  .scroll-strip[data-bar='none']::-webkit-scrollbar {
    display: none;
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, 1.25rem);
  }

  :where(.track) {
    display: grid;
    grid-auto-flow: var(--track-flow, column);
    grid-auto-columns: var(--track-auto-columns);
    align-items: var(--track-align, stretch);
    justify-content: var(--track-justify, start);
    gap: var(--track-gap, 0);
  }

  :where(.cluster) {
    display: flex;
    flex-wrap: var(--cluster-wrap, wrap);
    align-items: center;
    justify-content: var(--cluster-justify, flex-start);
    gap: var(--cluster-gap, 0.5rem);
  }

  :where(.cluster-inline) {
    display: inline-flex;
    flex-wrap: var(--cluster-wrap, wrap);
    align-items: center;
    justify-content: var(--cluster-justify, flex-start);
    gap: var(--cluster-gap, 0.5rem);
  }

  :where(.auto-grid) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--auto-grid-min, 20rem), 100%), 1fr));
    column-gap: var(--auto-grid-column-gap, var(--auto-grid-gap, 1rem));
    row-gap: var(--auto-grid-row-gap, var(--auto-grid-gap, 1rem));
  }

  :where(.equal-columns) {
    display: grid;
    align-items: var(--equal-columns-align, stretch);
    gap: var(--equal-columns-gap, 1rem);
  }

  @media (min-width: 48rem) {
    :where(.equal-columns) {
      grid-template-columns: repeat(var(--equal-columns-count, 2), 1fr);
    }
  }
  @media (min-width: 75rem) {
    .site-header__tools {
      display: flex;
    }
  }

  .site-header__tools > :not(.header-account-dialog) {
    display: none;
  }

  @media (min-width: 75rem) {
    .site-header__tools > .header-account,
    .site-header__tools > .header-cart,
    .site-header__tools > .header-account__trigger--guest {
      display: flex;
    }
  }

  .site-header__categories-panel[hidden] {
    display: none;
  }

  @media (min-width: 75rem) {
    .site-header__categories-panel:not([hidden]) {
      display: block;
    }
  }

  .place-center {
    display: grid;
    place-items: center;
  }

  :where(.center-row) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 0.25rem;
    row-gap: 0.75rem;
  }

  @media (min-width: 48rem) {
    :where(.center-row) {
      row-gap: 1rem;
    }
  }

  :where(.center-row) > :first-child {
    justify-self: start;
  }

  :where(.center-row) > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  :where(.center-row) > :nth-child(3):not(.grid-column-full) {
    grid-column: 3;
    justify-self: end;
  }

  .grid-column-full {
    grid-column: 1 / -1;
  }

  .stack[hidden],
  .track[hidden],
  .cluster[hidden],
  .cluster-inline[hidden],
  .auto-grid[hidden],
  .equal-columns[hidden],
  .place-center[hidden],
  .center-row[hidden] {
    display: none;
  }

  .html-plp-layout div.k-widget.k-window,
  .html-plp-layout div.k-overlay {
    display: none !important;
  }

  .header-search__scroll-btn:disabled {
    display: none;
  }

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .visually-hidden-contained {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    inset-inline-start: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  @media (hover: hover) and (pointer: fine) {
    .hover-text-brand:hover {
      color: var(--text-brand-primary);
    }
  }
}

.site-header__admin .admin-header-links {
  position: absolute;
  z-index: 70;
  top: 0;
  right: 0;
  width: fit-content;
  display: flex;
  gap: 0.5rem;
  float: none;
  margin: 0 !important;
  padding: 0.25rem 0.5rem;
  background-color: var(--clr-white);
  color: var(--clr-black);
}

.site-header__admin .admin-header-links a,
.site-header__admin .admin-header-links .impersonate,
.site-header__admin .admin-header-links .impersonate span {
  display: inline;
  margin: 0 !important;
  padding: 0;
  border: 0;
  color: var(--clr-black);
  font-size: var(--font-size-xs);
  line-height: 1.25rem;
}

@media (hover: hover) and (pointer: fine) {
  .site-header__admin .admin-header-links a:hover {
    color: var(--text-brand-primary);
  }
}

.site-header__admin .admin-header-links a:focus-visible {
  outline: 1px solid var(--text-brand-primary);
}

.home-slider__viewport .slick-list {
  inline-size: 100%;
  aspect-ratio: 1920 / 1344;
}

@media (min-width: 48rem) {
  .home-slider__viewport .slick-list {
    aspect-ratio: 1920 / 420;
  }
}

.home-slider__viewport .slick-track,
.home-slider__viewport .slick-slide,
.home-slider__viewport .home-slider__slide,
.home-slider__viewport .home-slider__link,
.home-slider__viewport .home-slider__picture,
.home-slider__viewport .home-slider__image,
.home-slider__viewport .home-slider__video {
  block-size: 100%;
}

.home-slider__viewport .home-slider__image,
.home-slider__viewport .home-slider__video {
  inline-size: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 73.75rem) {
  .home-slider__viewport .slick-list {
    aspect-ratio: auto;
    block-size: auto;
  }

  .home-slider__viewport .slick-track,
  .home-slider__viewport .slick-slide,
  .home-slider__viewport .home-slider__slide,
  .home-slider__viewport .home-slider__link,
  .home-slider__viewport .home-slider__picture,
  .home-slider__viewport .home-slider__image,
  .home-slider__viewport .home-slider__video {
    block-size: auto;
  }

  .home-slider__viewport .home-slider__image,
  .home-slider__viewport .home-slider__video {
    inline-size: 100%;
    object-fit: contain;
  }
}

.home-slider__arrows {
  display: flex;
  align-items: center;
  margin-block-start: 0.75rem;
  pointer-events: none;
}

.home-slider__arrows .slick-arrow {
  visibility: hidden;
  position: absolute;
  overflow: hidden;
  inline-size: 0;
  block-size: 0;
  pointer-events: none;
}

.home-slider__dots {
  flex: 1;
  min-inline-size: 0;
  pointer-events: auto;
}

.home-slider .slick-dots {
  display: flex;
  margin-inline: 0.75rem;
  overflow: hidden;
  border-radius: 999px;
  background-color: var(--clr-gray-200);
}

.home-slider .slick-dots li {
  flex: 1 1 0;
  min-inline-size: 0;
}

.home-slider .slick-dots button {
  display: block;
  inline-size: 100%;
  block-size: 3px;
  overflow: hidden;
  background-color: transparent;
  color: transparent;
  white-space: nowrap;
  text-indent: 8px;
  pointer-events: auto;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out-cubic);
}

.home-slider .slick-dots .slick-active button {
  background-color: var(--clr-accent-500);
}

@media (min-width: 75rem) {
  .home-slider__arrows {
    position: absolute;
    inset-block-end: 1.5rem;
    left: 50%;
    translate: -50% 0;
    z-index: 30;
    gap: 0.75rem;
    margin-block-start: 0;
    inline-size: max-content;
  }

  .home-slider__arrows .slick-arrow {
    display: grid;
    place-items: center;
    visibility: visible;
    position: relative;
    overflow: visible;
    inline-size: 32px;
    block-size: 32px;
    pointer-events: auto;
  }

  .home-slider__dots {
    flex: none;
  }

  .home-slider .slick-dots {
    align-items: center;
    margin-inline: 0;
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
    overflow: visible;
    inline-size: max-content;
    background-color: var(--background-muted);
  }

  .home-slider .slick-dots li {
    flex: none;
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
  }

  .home-slider .slick-dots button {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 999px;
    background-color: var(--clr-gray-500);
    transition:
      inline-size 200ms var(--ease-out-cubic),
      background-color 200ms var(--ease-out-cubic);
  }

  .home-slider .slick-dots .slick-active button {
    inline-size: 1.5rem;
    background-color: var(--clr-accent-600);
  }
}

.card-primary__media .ribbon-wrapper {
  display: block;
}

.card-primary__media .ribbon-position {
  position: absolute;
  z-index: 40;
  inset-block: 0 auto;
  inset-inline: 0 auto;
}

.dynamic-form__upload-hint {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  margin-block-end: 0.25rem;
}

.dynamic-form__upload-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px dashed var(--clr-gray-400);
  border-radius: var(--border-radius-4);
  background-color: var(--background-soft);
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  transition:
    border-color 0.2s ease-out,
    background-color 0.2s ease-out;
}

.dynamic-form__upload-button:hover {
  border-color: var(--text-brand-primary);
  background-color: hsl(212 70% 40% / 0.06);
}

.dynamic-form__upload-button:has(input:focus-visible) {
  outline: 2px solid var(--text-brand-primary);
  outline-offset: 2px;
}

.dynamic-form__upload-icon path {
  fill: var(--text-brand-primary);
}

.dynamic-form__upload-button-text {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-main);
}

.dynamic-form__upload-dropzone,
.dynamic-form__upload-processing {
  display: none !important;
}

.dynamic-form__upload-list {
  margin-block-start: 0.375rem;
  display: grid;
  gap: 0.25rem;
}

.dynamic-form__upload-list > li,
.dynamic-form__upload-item {
  line-height: inherit;
  font-size: inherit;
  background-color: transparent !important;
  color: var(--text-main) !important;
}

.dynamic-form__upload-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: var(--border-radius-4);
  background-color: var(--clr-white);
}

.dynamic-form__upload-list > li.qq-upload-success .dynamic-form__upload-file-row {
  border-color: hsl(151 39% 52% / 0.35);
  background-color: hsl(151 39% 52% / 0.1);
}

.dynamic-form__upload-list > li.qq-upload-fail .dynamic-form__upload-file-row {
  border-color: hsl(0 70% 50% / 0.35);
  background-color: hsl(0 70% 50% / 0.1);
}

.dynamic-form__upload-list > li.qq-upload-fail .dynamic-form__upload-file {
  color: var(--background-danger);
}

.dynamic-form__upload-file {
  flex: 1;
  min-inline-size: 0;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynamic-form__upload-spinner {
  flex-shrink: 0;
}

.dynamic-form__upload-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--border-radius-4);
  color: var(--text-muted);
}

.dynamic-form__upload-remove:hover {
  color: var(--background-danger);
  background-color: rgb(220 53 69 / 0.08);
}

.dynamic-form__upload-remove:focus-visible {
  outline: 2px solid var(--text-brand-primary);
  outline-offset: 2px;
}

.dynamic-form__upload-progress {
  overflow: hidden;
  border-radius: var(--border-radius-4);
  background-color: var(--background-soft);
  margin-block-start: 0.25rem;
}

.dynamic-form__upload-item.qq-upload-success .dynamic-form__upload-progress,
.dynamic-form__upload-item.qq-upload-fail .dynamic-form__upload-progress {
  display: none;
}

.dynamic-form__upload-list .qq-progress-bar-selector.qq-progress-bar {
  background: var(--gradient-brand-alt) !important;
  block-size: 4px;
  border-radius: var(--border-radius-4);
  margin-block-end: 0;
}

.dynamic-form__upload-item .qq-edit-filename,
.dynamic-form__upload-item .qq-edit-filename-icon,
.dynamic-form__upload-item .qq-upload-size,
.dynamic-form__upload-item .qq-upload-cancel {
  display: none !important;
}

.dynamic-form__upload-retry {
  color: var(--text-brand-primary);
}

.dynamic-form__upload-retry:hover {
  text-decoration: underline;
}

.dynamic-form__upload-retry:focus-visible {
  outline: 2px solid var(--text-brand-primary);
  outline-offset: 2px;
}

.dynamic-form__upload-status {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.dynamic-form__upload-error {
  display: block;
  margin-block-start: 0.25rem;
  color: var(--background-danger);
  font-size: var(--font-size-xs);
}

.dynamic-form__upload-error:empty {
  display: none;
}

.dynamic-form__form {
  display: grid;
  gap: 1.5rem;
}

.dynamic-form__body {
  display: grid;
  align-items: start;
  gap: 1.5rem;
}

.dynamic-form__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-black);
}

.dynamic-form__fields {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1rem;
}

.dynamic-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dynamic-form__field--full {
  grid-column: 1 / -1;
}

.dynamic-form__field .profile-content__input-label {
  font-size: 0.875rem;
}

.dynamic-form__fields .profile-content__input--select {
  cursor: pointer;
}

.dynamic-form__field .profile-content__input:focus-visible,
.dynamic-form__field .profile-content__input--select:focus-visible,
.dynamic-form__field .profile-content__input--textarea:focus-visible {
  transform: none;
}

.dynamic-form__field--textarea .profile-content__input--textarea {
  resize: none;
}

.dynamic-form__field .profile-content__validation {
  color: var(--background-danger);
  font-size: 0.75rem;
  font-weight: 500;
}

.dynamic-form__option-list {
  display: grid;
  gap: 0.5rem;
}

.dynamic-form__option-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-main);
}

.dynamic-form__option-item input:focus-visible {
  outline: 2px solid var(--text-brand-primary);
  outline-offset: 2px;
}

.dynamic-form__uploads {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 1rem;
  margin-block-start: 1rem;
}

.dynamic-form__uploads .dynamic-form__field {
  block-size: 100%;
}

.dynamic-form__field .profile-content__input-label-row {
  min-block-size: 1.5rem;
}

.dynamic-form__upload,
.dynamic-form__upload > div,
.dynamic-form__uploader {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dynamic-form__upload-button {
  flex: 1;
}

.dynamic-form__field--captcha {
  margin-block-start: 0.5rem;
}

.dynamic-form__actions {
  margin-block-start: 1rem;
}

.dynamic-form__submit {
  min-inline-size: 9.4375rem;
}

.dynamic-form__result {
  padding-block: 1rem;
  padding-inline: 2rem;
  border: 1px solid hsl(151 39% 52% / 0.25);
  border-radius: 5px;
  background-color: hsl(151 39% 52% / 0.1);
  color: hsl(151 39% 52%);
}

.dynamic-form__message:empty {
  display: none;
}

.dynamic-form__message--success {
  color: hsl(151 39% 52%);
  font-size: 0.875rem;
  font-weight: 500;
}

.dynamic-form__message--success:not(:empty) {
  margin-block-end: 1rem;
}

.dynamic-form__message--error {
  color: var(--background-danger);
  font-size: 0.875rem;
  font-weight: 500;
}

.dynamic-form__message--error:not(:empty) {
  margin-block-end: 1rem;
}

.dynamic-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.dynamic-form__success-icon {
  display: grid;
  place-items: center;
}

.dynamic-form__success-content {
  display: grid;
  place-items: center;
  gap: 0.5rem;
}

@media (min-width: 48rem) {
  .dynamic-form__fields {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .dynamic-form__uploads {
    grid-template-columns: repeat(2, 1fr);
  }

  .dynamic-form__actions {
    margin-block-start: 1.5rem;
  }
}