:root {
  --text-font-family: var(--primary-font);
  --text-base: clamp(14px, calc(14px + (16 - 14) * ((100vw - 360px) / 1440)), 16px);
  --zoom-transition: cubic-bezier(.16,1,.3,1);
}

* {
  -webkit-font-smoothing: antialiased;
}

body.smart-cart--enabled {
  #cart-drawer {
    display: none !important;
  }
}

/* Buttons */
.button-primary,
.button-secondary,
.button-tertiary {
  --border-color: #E8E6E6;
  --button-color: var(--primary-color);
  --button-background: var(--white);
  --button-border-color: var(--primary-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 56px 1px;
  border: 1px solid var(--button-border-color);
  background-color: var(--button-background);
  border-radius: 100px;

  &,
  & * {
    color: var(--button-color);
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 13px;
    line-height: 13px;
    transition: none;
  }

  .button__content {
    padding: 0;
  }

  &[disabled],
  &.disabled {
    --button-color: var(--light-text-color);
    --button-background: var(--border-color);
    --button-border-color: var(--border-color);
    pointer-events: none;
  }

  @media (hover: hover) {
    &,
    & * {
      transition: .2s;
    }

    &:hover {
      --button-color: var(--white);
      --button-background: var(--primary-color);
      --button-border-color: var(--primary-color);
    }
  }

  &:active {
    --button-color: var(--white);
    --button-background: var(--primary-color);
    --button-border-color: var(--primary-color);
  }
}

@media (max-width: 999px) {
  .button-primary,
  .button-secondary,
  .button-tertiary {
    padding: 0 38px 1px;
  }
}

.button-secondary {
  --button-color: var(--white);
  --button-background: var(--primary-color);
  --button-border-color: var(--primary-color);

  @media (hover: hover) {
    &:hover {
      --button-color: var(--primary-color);
      --button-background: var(--light-text-color);
      --button-border-color: var(--light-text-color);
    }
  }

  &:active {
    --button-color: var(--primary-color);
    --button-background: var(--light-text-color);
    --button-border-color: var(--light-text-color);
  }
}

.button-tertiary {
  --button-color: var(--white);
  --button-background: transparent;
  --button-border-color: var(--white);

  @media (hover: hover) {
    &:hover {
      --button-color: var(--primary-color);
      --button-background: var(--white);
      --button-border-color: var(--white);
    }
  }

  &:active {
    --button-color: var(--primary-color);
    --button-background: var(--white);
    --button-border-color: var(--white);
  }
}

/* Announcement bar */
body:has([data-template="index"]) {
  .shopify-section--countdown-condensed {
    position: sticky;
    top: 0;
  }

  .shopify-section--header {
    top: var(--countdown-condensed-height) !important;
  }
}

.shopify-section--countdown-condensed {
  .countdown-condensed__content-wrapper {
    p.subheading {
      font-family: var(--primary-font);
      font-weight: 400;
      font-size: 13px;
      line-height: 13px;
    }
  }

  .countdown-condensed__timer {
    .subheading {
      font-family: var(--primary-font);
      font-weight: 400;
      font-size: 13px;
      line-height: 13px;

      &.bold {
        font-weight: 700;
      }
    }
  }

  .link.subheading {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 13px;
    line-height: 13px;
  }

  @media (max-width: 999px) {
    .countdown-condensed--center {
      justify-content: center;
      text-align: center;
    }

    .countdown-condensed__content-with-timer {
      display: flex;
      justify-content: center;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.5rem 2rem;
    }
  }

  @media (min-width: 1000px) {
    .countdown-condensed {
      padding: 0;
      height: 40px;
    }
  }
}

/* Header */
.header {
  padding-block: 0;
  height: 60px;

  @media (hover: hover) {
    .tap-area {
      transition: 0.2s;
      
      &:hover {
        color: var(--light-text-color);
      }
    }
  }

  .tap-area:active {
    color: var(--light-text-color);
  }
}

.header__primary-nav {
  a.subheading {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 15px;
    line-height: 15px;
    text-transform: none;
  }

  [aria-controls="menu-drawer"] {
    &[aria-expanded="false"],
    &:not([aria-expanded]) {
      .header__hamburger-close {
        display: none;
      }
    }

    &[aria-expanded="true"] {
      .header__hamburger {
        display: none;
      }

      .header__hamburger-close {
        display: block;
      }
    }
  }
}

.header__primary-nav,
.header__secondary-nav {
  @media (max-width: 834px) {
    gap: 4px;
  }
}

.header__logo-image {
  @media (max-width: 359px) {
    width: 130px;
  }
}

/* Megamenu */
.menu-promo--with-spacing .menu-promo__item {
  flex-shrink: 0;
  width: 262px;

  .overflow-hidden {
    aspect-ratio: 262 / 342;
    width: 100%;
    border-radius: 3px;
  }

  .zoom-image {
    width: 100%;
    height: 100%;
  }

  &:not(:last-child) {
    margin-right: 12px;
  }


  .price-list {
    gap: 6px;

    .text-sm {
      font-size: 16px;
      line-height: 22px;
    }
  }

  .product-unavailable {
    .h6 {
      color: var(--light-text-color);
    }

    sale-price {
      &.text-subdued {
        color: var(--light-text-color);
      }
  
      &.text-on-sale {
        color: var(--light-text-color);
      }
    }
  }
}

.mega-menu__navigation {
  a.subheading {
    font-family: var(--secondary-font);
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    color: var(--light-text-color);
  }
}

/* Product card */
.product-card {
  .product-card__media,
  .product-card__image {
    border-radius: 4px;
  }

  .product-card__info {
    padding: 10px 0 0;
  }

  .product-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-box: none;
  }

  .price-list {
    gap: 6px;

    .text-sm {
      font-size: 16px;
      line-height: 22px;
    }
  }

  .rating-badge {
    .subheading {
      font-family: var(--primary-font);
      font-weight: 300;
      font-size: 13px;
      line-height: 16px;
      color: #040404;
      text-transform: none;
    }
  }

  .revie-star-content {
    display: inline-flex;
    gap: 6px;
  }

  .revie-rating__star-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  .revie-rating__count {
    font-weight: 300;
    font-size: 13px;
    line-height: 16px;
    color: var(--primary-color);
  }

  .product-card__floating-size-selector {
    --product-card-inner-padding: 20px 12px;
  }

  .floating-size-selector__button {
    border: 0;
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 13px;
    line-height: 13px;
    height: 34px;
    transition: 0s;

    &.is-disabled {
      color: var(--light-text-color);
      text-decoration-color: var(--light-text-color);
    }

    .button__content {
      padding: 0;
    }

    @media (hover: hover) {
      transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out;

      &:not(.is-disabled):hover {
        background: var(--primary-color);
        color: var(--white);
      }
    }

    &:active {
      background: var(--primary-color);
      color: var(--white);
    }
  }

  .badge-list {
    --product-card-inner-padding: 14px;
    gap: 3px;

    .badge:not(:nth-child(1), :nth-child(2)) {
      display: none;
    }
  }

  &.product-unavailable {
    .product-title {
      color: var(--light-text-color);
    }

    sale-price {
      &.text-subdued {
        color: var(--light-text-color);
      }
  
      &.text-on-sale {
        color: var(--light-text-color);
      }
    }
  }
}

.sizes-mobile-button {
  display: none;
}

@media (max-width: 999px) {
  .product-card {
    &:not(:has(.product-card__floating-size-selector)) {
      .sizes-mobile-button {
        display: none;
      }
    }

    .product-card__figure:hover .product-card__floating-size-selector {
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
    }

    &:has(.sizes-mobile-button input[type="checkbox"]:checked) {
      .product-card__floating-size-selector {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
    }
  }

  .product-card__info-container {
    width: 100%;
  }

  .product-card__heading-container {
    position: relative;
    width: 100%;
  }

  .product-card__title-container {
    max-width: calc(100% - 32px);
  }

  .sizes-mobile-button {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 20px;
    height: 20px;

    input[type="checkbox"] {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      visibility: hidden;

      &:checked + svg {
        transform: rotateZ(45deg);
      }
    }

    svg {
      width: 100%;
      height: 100%;
      transform: rotateZ(0deg);
      transition: transform 0.2s;
    }
  }
}

/* Price */
sale-price {
  &.text-subdued {
    color: var(--primary-color);
  }

  &.text-on-sale {
    color: var(--on-sale-color);
  }
}

compare-at-price {
  &.text-subdued {
    text-decoration-color: var(--light-text-color);
    color: var(--light-text-color);
  }
}

/* Badges */
.badge {
  display: flex;
  align-items: center;
  padding: 3px 8px 5px;
  font-weight: 600;
  border-radius: 100px;
  font-family: var(--primary-font);
  font-size: 12px;
  line-height: 12px;
  text-transform: uppercase;
}

.badge--sold-out {
  --border-color: #E8E6E6;
  background-color: var(--border-color);
  color: var(--light-text-color);
}

.badge--on-sale {
  background-color: var(--on-sale-color);
  color: var(--white);
}

.badge--new {
  background-color: var(--primary-color);
  color: var(--white);
}

/* Carousel arrows */
.floating-controls__control,
.testimonials__nav {
  .circle-button {
    &::before {
      content: none;
    }

    &[disabled] {
      scale: 1;
      background-color: transparent;
      color: var(--light-text-color);
    }
  }

  @media (hover: hover) {
    .circle-button:not([disabled]):hover {
      color: var(--white);
      background-color: var(--primary-color);
    }
  }

  @media (min-width: 1000px) {
    &:last-child {
      .circle-button {
        left: auto;
        right: 16px;
      }
    }

    &:first-child {
      .circle-button {
        left: 16px;
      }
    }

    .circle-button {
      color: var(--primary-color);
      background-color: transparent;
      transition-property: scale, translate, opacity, visibility, color, background-color;

      &:active:not([disabled]) {
        color: var(--white);
        background-color: var(--primary-color);
      }
    }
  }

  @media (max-width: 999px) {
    &:last-child {
      .circle-button {
        left: auto;
        right: 12px;
      }
    }

    &:first-child {
      .circle-button {
        left: 12px;
      }
    }

    .circle-button {
      opacity: 1;
      translate: 0;

      &:active:not([disabled]) {
        color: var(--white);
        background-color: var(--primary-color);
      }

      &[disabled] {
        opacity: 1;
        visibility: visible;
        translate: 0;
      }
    }
  }
}

.floating-controls-container {
  @media (hover: hover) and (min-width: 1000px) {
    &:has(.is-scrollable) {
      .circle-button[disabled] {
        translate: 0 1.5rem;
      }
    }

    &:has(.is-scrollable):hover {
      .circle-button[disabled] {
        opacity: 1;
        visibility: visible;
        translate: 0;
      }
    }
  }
}

@media (max-width: 999px) {
  .featured-collections-products,
  .shopify-section--featured-product-list,
  .shopify-section--related-products,
  .shopify-section--blog-posts {
    .floating-controls__control .circle-button {
      display: none;
    }
  }
}

/* Featured collections section */
.shopify-section--featured-collections {
  .product-list.full-bleed {
    --product-list-column-gap: 6px;
  }

  @media (min-width: 1000px) {
    .product-list.full-bleed {
      margin-inline-start: 0;
      margin-inline-end: 0;
    }
  }

  @media (max-width: 999px) {
    .product-list.full-bleed {
      padding-left: var(--distance-to-bleed);
      padding-right: var(--distance-to-bleed);
    }
  }
}

/* Related products section */
.shopify-section--related-products {
  @media (max-width: 999px) {
    .product-list {
      margin-inline-start: calc(-1 * var(--distance-to-bleed));
      margin-inline-end: calc(-1 * var(--distance-to-bleed));
      padding-left: var(--distance-to-bleed);
      padding-right: var(--distance-to-bleed);
    }
  }
}

/* Media blocks section */
.shopify-section--media-blocks {
  .content-box__background-media {
    border-radius: 4px;
    overflow: hidden;
  }
}

.shopify-section--media-blocks:has(.media-blocks--rebased) {
  &:has(.media-blocks-swiper:not(.swiper-initialized)) {
    .media-blocks-navigation {
      display: none;
    }
  }

  .media-blocks {
    --media-blocks-gap: 0;
  }

  .media-blocks__heading-container {
    display: flex;
    gap: 50px;
  }

  .media-blocks-navigation {
    display: flex;
    margin-left: auto;
    gap: 8px;
    z-index: 1;
  }

  .media-blocks-swiper:not(.swiper-initialized) {
    opacity: 1;
  }

  .swiper-button-prev,
  .swiper-button-next {
    position: static;
    width: 48px;
    height: 48px;
    color: var(--primary-color);
    margin-top: 0;
    border-radius: 50%;

    &.swiper-button-disabled {
      color: var(--light-text-color);
      opacity: 1;
    }

    &::after {
      content: none;
    }

    @media (hover: hover) {
      transition: .2s ease-in-out;

      &:not(.swiper-button-disabled) {
        &:hover {
          color: var(--white);
          background-color: var(--primary-color);
        }
      }
    }

    &:not(.swiper-button-disabled):active {
      color: var(--white);
      background-color: var(--primary-color);
    }
  }

  .media-blocks__item {
    .h2 {
      font-size: clamp(24px, calc(24px + (58 - 24) * ((100vw - 360px) / 1440)), 58px);
      line-height: clamp(30px, calc(30px + (70 - 30) * ((100vw - 360px) / 1440)), 70px);
    }
  }

  @media (hover: hover) {
    a.media-blocks__item {
      img {
        transform-origin: center;
        transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      }

      &:hover {
        img {
          transform: scale(1.1);
        }
      }
    }
  }

  @media (min-width: 1000px) {
    .media-blocks__inner {
      .media-blocks-swiper {
        padding-top: 32px;
      }
    }

    .scroll-area {
      overflow: visible;
    }

    .media-blocks-swiper:not(.swiper-initialized) {
      .media-blocks {
        --media-blocks-gap: 6px;
        display: grid;
      }
  
      .media-block-slide {
        width: auto;
      }
    }
  
    .media-blocks-swiper-wrapper {
      align-items: stretch;
    }
  
    .media-block-slide {
      aspect-ratio: 441 / 620;
      width: calc(441 / 1440 * 100%);
      height: auto;
    }
  }

  @media (max-width: 999px) {
    .media-blocks-swiper {
      margin-inline: var(--container-gutter);

      &:not(.swiper-initialized) {
        opacity: 1;
      }
    }

    .media-blocks__inner {
      row-gap: var(--section-stack-row-gap);
      grid-template-columns: minmax(0, 1fr);
      display: grid;
    }

    .media-blocks-swiper-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .swiper-button-prev,
    .swiper-button-next {
      display: none;
    }

    .media-blocks {
      transform: none !important;
    }

    .media-blocks__item {
      position: relative;

      .h2 {
        position: absolute;
        bottom: 10px;
        left: 10px;
        width: calc(100% - 20px);
      }
    }

    .media-block-slide {
      height: var(--slide-height);
      width: 100%;
      pointer-events: none;
      margin-right: 0 !important;

      .media-blocks__item {
        /* aspect-ratio: 157 / 107; */
        max-width: calc(50% - 3px);
        width: calc(50% - 3px);
        height: inherit;
        pointer-events: auto;
      }

      &:nth-child(3n + 2),
      &:nth-child(3n + 3) {
        margin-top: calc(var(--slide-height) * -1);
      }

      &:nth-child(3n + 4) {
        margin-top: 6px;
      }

      &:nth-child(6n + 1) .media-blocks__item,
      &:nth-child(6n + 6) .media-blocks__item {
        /* aspect-ratio: 158 / 220; */
      }

      &:not(:nth-child(6n + 1), :nth-child(6n + 6)) .media-blocks__item {
        height: calc(calc(var(--slide-height) / 2) - 3px);
      }

      &:nth-child(6n + 6) .media-blocks__item {
        position: absolute;
        right: 0;
      }

      &:nth-child(6n + 2) .media-blocks__item {
        position: absolute;
        top: 0;
        right: 0;
      }

      &:nth-child(6n + 3) .media-blocks__item {
        position: absolute;
        bottom: 0;
        right: 0;
      }

      &:nth-child(6n + 4):last-child  {
        aspect-ratio: 314 / 107;
      }

      &:nth-child(6n + 4) .media-blocks__item {
        position: absolute;
        top: 0;
        left: 0;
      }

      &:nth-child(6n + 5) .media-blocks__item {
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
  }
}

/* Specifications section */
.shopify-section--specifications {
  .specification-table {
    .specification-table__row {
      display: flex;
      align-items: center;
    }
  }
}

/* Featured product list section */
.shopify-section--featured-product-list {
  .content-box__background-media {
    border-radius: 4px;
    overflow: hidden;
  }

  @media (min-width: 1000px) {
    &:not(:has(.product-list--carousel)) {
      .floating-controls__control {
        display: none;
      }
    }
  }

  @media (max-width: 999px) {
    .floating-controls__control:first-child .circle-button,
    .floating-controls__control:last-child .circle-button {
      --floating-control-offset: 0;
    }
  }
}

/* Testimonials section */
.shopify-section--testimonials {
  .testimonials__content {
    p.h5 {
      font-weight: 500;
    }
  }

  .testimonials__product {
    border-radius: 4px;
    padding: 16px;

    .testimonials__product-image {
      display: flex;
      justify-content: center;
      width: 64px;
      flex-shrink: 0;
    }

    img {
      max-width: 100%;
      width: auto;
      max-height: 100%;
      height: auto;
      border-radius: 4px;
      margin-top: auto;
    }

    .testimonials__product-info > p {
      font-size: 14px;
      line-height: 20px;
      margin-bottom: 6px;
    }

    .price-list .text-sm {
      font-size: 16px;
      line-height: 22px;
    }

    .price-list {
      gap: 0 5px;
    }

    .testimonials__product-info.product-unavailable {
      > p {
        color: var(--light-text-color);
      }
  
      sale-price {
        &.text-subdued {
          color: var(--light-text-color);
        }
    
        &.text-on-sale {
          color: var(--light-text-color);
        }
      }
    }
  }

  .content-box__background-media,
  .content-box__background-media img {
    border-radius: 4px;
    overflow: hidden;
  }

  @media (max-width: 999px) {
    .content-box__background-media {
      height: auto;
    }

    .testimonials__info-list-item {
      display: flex;
      flex-direction: column;
      gap: 12px 0;

      .content-box__background-media {
        padding: 0 51px;
      }
    }

    .testimonials__product {
      --border-color: #E8E6E6;
      border: 1px solid var(--border-color);
      place-self: center;
      gap: 0 12px;
      margin: 0 8px;

      .testimonials__product-image {
        width: 66px;
      }
    }
  }

  @media (max-width: 699px) {
    .testimonials__info-list-item {
      .content-box__background-media {
        padding: 0 63px;
      }
    }

    .testimonials__product {
      margin: 0 20px;
    }
  }
}

/* Instafeed section */
.shopify-section--apps:has(#insta-feed) {
  h2 {
    font-size: var(--text-h3);
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-style: var(--heading-font-style);
    letter-spacing: var(--heading-letter-spacing);
    text-transform: var(--heading-text-transform);
    line-height: var(--heading-line-height);
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
    display: block;
  }

  .instafeed-new-layout-item {
    border-radius: 4px;
    overflow: hidden;

    > a > img,
    .instafeed-hover-layer {
      max-width: calc(100% - 4px);
      border-radius: 4px !important;
    }
  }


  .instafeed-new-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    width: 48px;
    height: 48px;
    background-color: transparent !important;
    color: var(--primary-color);
    border: 0 !important;
    opacity: 1;
    background-size: 12px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-image: url('icon-arrow-right.svg') !important;
    transition: none !important;

    &:hover {
      background-color: transparent !important;
    }

    &:active {
      background-color: var(--primary-color) !important;
      background-image: url('icon-arrow-right-white.svg') !important;
    }

    @media (max-width: 999px) {
      width: 30px;
      height: 30px;
      background-size: 8px !important;
    }
  }

  @media (hover: hover) {
    .instafeed-new-arrow {
      transition: 0.2s !important;

      &:hover {
        background-color: var(--primary-color) !important;
        background-image: url('icon-arrow-right-white.svg') !important;
      }
    }
  }
}

/* Text with icons section */
.shopify-section--text-with-icons {
  .text-with-icons__item {
    .text-subdued {
      color: var(--primary-color);
    }
  }
}

/* Trust icons section */
.shopify-section--trust-icons {
  .trust-icons__item {
    .text-subdued {
      font-size: 14px;
      line-height: 20px;
    }
  }
}

/* Collection */
body:has(.drawer--facets[open]) {
  #wa-chat-btn-root {
    display: none;
  }
}

.collection__inner {
  @media (min-width: 1000px) {    
    &.container {
      --container-gutter: 36px;
    }
  }
}

.collection__toolbar {
  @media (max-width: 699px) {
    justify-content: center;

    .vertically-separated-list {
      display: none;
    }
  }
}

.drawer--facets {
  [slot="footer"] {
    .button-group {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .button {
        width: 100%;
      }
    }
  }
}

.removable-facet {
  border-radius: 100px;
}

/* Collection promos */
.product-list__promo {
  .content-box__background-media {
    border-radius: 4px;
    overflow: hidden;
  }

  .prose,
  .metafield-rich_text_field {
    --list-margin-left: 28px;

    li {
      padding-left: 0;
    }

    a {
      &:hover {
        color: rgb(var(--text-color));
      }
    }
  }

  @media (max-width: 699px) {
    &:not(:last-child) {
      margin-bottom: 0;
    }
  }
}

/* Search */
.predictive-search__collections {
  .overflow-hidden {
    border-radius: 4px;
  }
}

.shopify-section--main-search {
  .search-form {
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 4px;
  }
}

/* Pagination */
.pagination {
  --pagination-button-size: 50px;
  --pagination-button-size-mobile: 40px;
  --pagination-button-gap: 30px;
  --pagination-button-gap-mobile: 20px;
  --pagination-button-background: var(--white);
  --pagination-button-background-hover: var(--primary-color);
  --pagination-button-border: none;
  --pagination-button-color: var(--primary-color);
  --pagination-button-color-hover: var(--white);
  --pagination-button-color-active: var(--white);
}

.pagination-list {
  display: flex;
  justify-content: center;
  gap: 0 var(--pagination-button-gap);
  list-style: none;
  padding: 0;
  margin: 0;

  @media (max-width: 699px) {
    gap: 0 var(--pagination-button-gap-mobile);
  }
}

.pagination-page {
  @media (max-width: 699px) {
    &.hide-mobile {
      display: none;
    }
  }
}

.pagination-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pagination-button-size);
  height: var(--pagination-button-size);
  font-family: var(--secondary-font);
  font-weight: 600;
  font-size: clamp( 14px, calc( 14px + (15 - 14) * ( (100vw - 360px) / (1440 - 360) ) ), 15px );
  line-height: clamp( 14px, calc( 14px + (18 - 14) * ( (100vw - 360px) / (1440 - 360) ) ), 18px );
  color: var(--pagination-button-color);
  text-decoration: none;
  background-color: var(--pagination-button-background);
  border-radius: 50%;

  &.current {
    background-color: var(--pagination-button-background-hover);
    color: var(--pagination-button-color-hover);
  }

  @media (max-width: 859px) {
    width: var(--pagination-button-size-mobile);
    height: var(--pagination-button-size-mobile);
  }
}

a.pagination-link {
  @media (hover: hover) {
    &:hover {
      text-decoration: underline;
    }
  }

  &:active {
    text-decoration: underline;
  }
}

.pagination-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pagination-button-size);
  height: var(--pagination-button-size);
  background-color: var(--primary-background-color);
  border-radius: 50%;
  border: var(--pagination-button-border);
  color: var(--pagination-button-color);

  @media (max-width: 859px) {
    width: var(--pagination-button-size-mobile);
    height: var(--pagination-button-size-mobile);

    svg {
      width: 10px;
    }
  }

  &.disabled {
    color: var(--light-text-color);

    .pagination-button-icon {
      color: var(--light-text-color);
    }
  }

  &:not(.disabled) {
    @media (hover: hover) {
      transition: 0.2s ease;

      &:hover {
        background-color: var(--pagination-button-background-hover);
        color: var(--pagination-button-color-hover);
      }
    }

    &:active  {
      background-color: var(--pagination-button-background-hover);
      color: var(--pagination-button-color-active);
    }
  }
}

/* Press section */
.shopify-section--press {
  .section-spacing {
    padding: 88px 0;
  }

  @media (max-width: 999px) {
    .section-spacing {
      padding: 50px 0;
    }
  }
}

/* Blog posts section */
.shopify-section--blog-posts {
  .blog-post-card__image-container {
    border-radius: 3px;
    overflow: hidden;

    img {
      border-radius: 3px;
    }
  }
}

/* Video section */
.shopify-section--video {
  .placement-grid {
    .button {
      pointer-events: auto;
    }
  }
}

/* Contact section */
.shopify-section--contact {
  .klaviyo-form {
    --border-color: #E8E6E6;

    form {
      max-width: none !important;
      padding: 0 !important;
      border-radius: 0 !important;

      > div {
        min-height: 0 !important;
      }
    }

    [data-testid="form-component"] {
      padding: 0 !important;
    }

    [data-testid="form-row"] {
      gap: 16px !important;

      &:first-child {
        margin-bottom: 16px !important;
      }

      &:has(button) {
        margin-top: 24px !important;
      }

      &:empty {
        display: none !important;
      }

      @media (max-width: 430px) {
        display: block !important;

        [data-testid="form-component"] {
          &:not(:last-child) {
            margin-bottom: 16px !important;
          }
        }
      }
    }

    input[type="email"],
    input[type="text"] {
      height: 48px !important;
      padding: 0 20px !important;
      border: 1px solid var(--border-color) !important;
      border-radius: 3px !important;
      background-color: var(--white) !important;
      font-family: var(--primary-font) !important;
      font-weight: 400 !important;
      font-size: 16px !important;
      line-height: 22px !important;
      color: var(--primary-color) !important;

      &::placeholder {
        font-family: var(--primary-font) !important;
        font-weight: 400 !important;
        font-size: 16px !important;
        line-height: 22px !important;
        color: var(--light-text-color) !important;
      }

      &:hover {
        border-color: var(--border-color) !important;
      }

      &:focus,
      &:focus-visible {
        outline: none !important;
        border-color: var(--border-color) !important;
      }

      &:-internal-autofill-selected,
      &:-webkit-autofill,
      &:-webkit-autofill:hover, 
      &:-webkit-autofill:focus, 
      &:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px var(--white) inset;
       -webkit-text-fill-color: var(--primary-color) !important;
      }

      &:-webkit-autofill::first-line {
        font-family: var(--primary-font);
        font-size: 16px;
        line-height: 22px;
        color: var(--primary-color);
      }
    }

    button[type="button"] {
      --border-color: #E8E6E6;
      --button-color: var(--white);
      --button-background: var(--primary-color);
      --button-border-color: var(--primary-color);
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: auto !important;
      height: 36px !important;
      padding: 0 56px 2px !important;
      border: 0 !important;
      background-color: var(--button-background) !important;
      border-radius: 100px !important;
      margin: 0 auto !important;
      color: var(--button-color) !important;
      font-family: var(--primary-font) !important;
      font-weight: 600 !important;
      font-size: 13px !important;
      line-height: 13px !important;
      transition: none !important;

      &[disabled],
      &.disabled {
        --button-color: var(--light-text-color);
        --button-background: var(--border-color);
        --button-border-color: var(--border-color);
        pointer-events: none !important;
      }

      @media (hover: hover) {
        &,
        & * {
          transition: .2s !important;
        }

        &:hover {
          --button-color: var(--primary-color);
          --button-background: var(--light-text-color);
          --button-border-color: var(--light-text-color);
          background-color: var(--button-background) !important;
          color: var(--button-color) !important;
        }
      }

      &:active {
        --button-color: var(--primary-color);
        --button-background: var(--light-text-color);
        --button-border-color: var(--light-text-color);
        background-color: var(--button-background) !important;
        color: var(--button-color) !important;
      }


      @media (max-width: 999px) {
        padding: 0 38px 2px !important;
      }
    }
  }
}

/* Size chart drawer */
.drawer {
  .prose {
    h1,
    h2 {
      font-size: var(--text-h3);
    }
  }
}

/* Sticky ATC */
.product-sticky-add-to-cart {
  --border-color: #E8E6E6;
  width: 100%;

  &:has(.button[disabled]) {
    sale-price.text-subdued,
    sale-price.text-on-sale {
      color: var(--light-text-color);
    }
  }

  @media (min-width: 700px) {
    right: 50px;
    bottom: 50px;
    gap: 44px;
    width: 576px;
    padding: 16px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    box-shadow: none;
  }

  .sticky-atc__info-container {
    gap: 26px;
  }

  .sticky-atc__image-wrapper {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    width: 70px;
    overflow: hidden;

    img {
      max-width: 100%;
      width: auto;
      max-height: 100%;
      height: auto;
      border-radius: 3px;
      margin-top: auto;
    }
  }

  .sticky-atc__title {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .sticky-atc__variant {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--light-text-color);
  }

  .price-list {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 5px;

    .text-sm {
      font-size: 16px;
      line-height: 22px;
    }
  }
}

/* Reviews */
.shopify-section--reviews {
  &:has(#revieDataIA:empty):has(#revieList:empty), &:has(.shopify-app-block:empty) {
    display: none;
  }

  #cont-rl-w {
    [data-stre] {
      font-size: 12px;
      line-height: 12px;
    }

    h2 {
      display: none;
    }

    hr {
      background-color: var(--border-color);
      height: 1px;
      border: 0;
      margin: 34px 0;
    }

    .review-revie {
      display: none;
    }

    #revieList {
      padding: 0;
    }

    #revieDataIA,
    #revieList {
      max-width: none;
    }

    .summary {
      display: none;
    }
  }

  #revieDataIA {
    padding: 0;
    margin: 0;

    > .content-flex:first-child {
      margin-bottom: 16px;

      @media (max-width: 700px) {
        justify-content: center;
      }
    }

    > .content-flex {
      justify-content: center;
    }

    .star-list {
      max-width: 206px;
      padding: 0;
      margin: 0;
    }

    .slider {
      display: none;
    }

    .info-dt-r,
    .op-text {
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
    }

    .op-text {
      margin-left: 8px;
    }

    .info-dt-r + div[title] {
      display: flex;
    }

    .ng-label {
      justify-content: flex-end;
      flex-shrink: 0;
      font-weight: 400;
      font-size: 16px;
      line-height: 16px;
      color: var(--primary-color);
      width: 30px;

      .ng-star {
        font-size: 12px;
        line-height: 12px;
      }
    }

    .ng-star-content {
      &:has(.ng-row-bar-foreground[style*="width: 0%"]) {
        .ng-ratingBreakdownGraph {
          color: var(--light-text-color);
        }
      }
    }

    .c-ratingBreakdownGraph-row-bar {
      top: 3px;
    }

    .ng-bar-background,
    .ng-row-bar-foreground {
      height: 8px;
    }

    .ng-bar-background {
      background-color: var(--border-color);
    }

    .ng-row-bar-foreground {
      background-color: var(--primary-color);
    }

    .ng-ratingBreakdownGraph {
      font-weight: 400;
      font-size: 16px;
      line-height: 22px;
      color: var(--primary-color);
      flex-shrink: 0;
      width: 30px;

      @media (max-width: 700px) {
        width: 15px;
      }
    }

    /* .content-start {
      .slide {
        flex-shrink: 0;
        max-width: 150px;
        width: 100%;
        height: auto;
        margin: 0 5px;

        img {
          aspect-ratio: 150 / 196;
          object-fit: cover;
          border-radius: 8px;
          max-width: 100%;
          max-height: 100%;
        }

        @media (max-width: 700px) {
          max-width: 82px;
          margin: 0 4px;

          img {
            aspect-ratio: 82 / 107;
            border-radius: 8px;
          }
        }
      }
    }

    .slide-track {
      justify-content: flex-start;
    } */
  }

  #revieList {
    [data-stre] {
      font-size: 14px;
      line-height: 14px;
    }

    .detail-star {
      label {
        margin: 2px 0 0;
        font-size: 14px !important;
        line-height: 20px !important;
        color: var(--light-text-color);
        font-weight: 400 !important;
      }

      b {
        margin-right: 4px;
        font-family: var(--secondary-font);
        font-weight: 600;
        font-size: 15px;
        line-height: 18px;
        color: var(--black);
        text-transform: uppercase;
      }

      svg {
        width: 15px;
        height: 15px;

        circle {
          fill: #28A216 !important;
        }
      }
    }

    .content-name-revie {
      margin-top: 10px;
    }

    .commentRevie {
      margin-top: 10px;
      font-weight: 400;
      font-size: 16px;
      line-height: 22px;
      color: var(--primary-color);
    }

    .detail-star > div {
      .imgn-rv {
        img,
        video {
          aspect-ratio: 108 / 140;
          width: 108px;
          border-radius: 3px;
  
          @media (max-width: 700px) {
            aspect-ratio: 82 / 104;
            width: 82px;
            border-radius: 3px;
          }
        }
      }
    }

    .content-media-revie {
      &:has(audio):has(.content-convert) {
        flex-direction: column;
        align-items: flex-end !important;

        .content-convert {
          position: static;
          margin: 0;
        }

        @media (max-width: 700px) {
          align-items: flex-start !important;
        }
      }
    }
  }

  .paginationRevie {
    gap: 30px;
    align-items: center;
    padding-top: 20px;

    @media (max-width: 700px) {
      padding-top: 0;
    }

    a {
      width: 48px;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      font-size: 15px;
      line-height: 18px;
      text-decoration: none;
      color: var(--primary-color);
      border: 0;
      background-color: transparent;
      padding: 0;

      @media (hover: hover) {
        &:hover:not(.active) {
          background-color: transparent;
          text-decoration: underline;
        }

        &:active {
          background-color: transparent;
          text-decoration: underline;
        }
      }

      &[onclick] {
        background-color: transparent;
        font-size: 0;
        background-image: url('icon-arrow-right.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 12px;
        border: 0;
        border-radius: 50%;

        @media (hover: hover) {
          &:hover {
            background-image: url('icon-arrow-right-white.svg');
            background-color: var(--primary-color);
          }
        }

        &:active {
          background-image: url('icon-arrow-right-white.svg');
          background-color: var(--primary-color);
        }

        &:first-child {
          transform: rotateZ(180deg);
        }

        &.disabled {
          background-image: url('icon-arrow-right-gray.svg');
          background-color: transparent;
          pointer-events: none;
        }
      }
    }

    @media (max-width: 700px) {
      gap: 20px;

      a {
        width: 40px;
        height: 40px;
        font-size: 14px;
        line-height: 14px;
      }
    }
  }
}

/* Cart drawer */
.drawer--cart {
  .line-item__media {
    border-radius: 3px;
    overflow: hidden;
  }
}

/* Footer */
.footer {
  .social-media {
    gap: 4px;

    .social-media__item:has(~.social-media__item:hover) {
      opacity: 1;
    }

    .social-media__item:hover~* {
      opacity: 1;
    }
  }

  @media (hover: hover) {
    .social-media__item:hover {
      transition: .2s;
      color: var(--light-text-color);
    }
  }

  .social-media__item:active {
    color: var(--light-text-color);
  }
}

.footer__block--newsletter .klaviyo-form {
  --border-color: #E8E6E6;
  --input-border-radius: 100px;
  --input-height: 38px;
  --input-padding: 0 20px;
  --input-font-size: 13px;
  --input-font-family: var(--primary-font);
  --input-color: var(--white);
  --input-placeholder-color: var(--white);
  --input-background: var(--primary-color);
  --input-border: 1px solid var(--white);
  --input-border-color-hover: var(--white);
  --button-background: var(--white);
  --button-background-hover: var(--border-color);
  --button-disabled-background: var(--white);
  --button-background-image: url('icon-arrow-right.svg');
  --button-background-image-width: 10px;
  --button-background-image-height: 10px;
  --button-color: var(--white);
  --button-color-hover: var(--white);
  --button-border-radius: 50%;
  --button-width: 38px;
  --button-height: 100%;
  --button-padding: 0;
  --button-font-family: var(--primary-font);
  --button-font-size: 0;
  --button-font-weight: 400;
  --button-separation: 4px;
  --success-font-family: var(--primary-font);
  --success-color: var(--white);
  --success-font-weight: 700;
  --success-font-size: var(--text-base);
  --success-line-height: normal;
  padding: 0 !important;

  > .needsclick {
    min-height: 0 !important;
  }

  [data-testid="form-row"] {
    position: relative !important;
  }

  [data-testid="form-component"] {
    padding: 0 !important;

    &:last-child {
      &:has(button[type="button"]) {
        margin-left: var(--button-separation) !important;
      }

      &:not(:has(button[type="button"])) * {
        font-family: var(--success-font-family) !important;
        font-weight: var(--success-font-weight) !important;
        font-size: var(--success-font-size) !important;
        line-height: var(--success-line-height) !important;
        color: var(--success-color) !important;
        text-align: left !important;
      }
    }

    button[type="button"] {
      -webkit-tap-highlight-color: transparent;
      font-family: var(--button-font-family) !important;
      font-size: var(--button-font-size) !important;
      font-weight: var(--button-font-weight) !important;
      width: var(--button-width) !important;
      height: var(--button-height) !important;
      background-color: var(--button-background) !important;
      border-radius: var(--button-border-radius) !important;
      padding: 0 !important;
      transition: 0.15s !important;

      @media (hover: hover) {
        &:hover {
          background-color: var(--button-background-hover) !important;
        }
      }

      &:active {
        background-color: var(--button-background-hover) !important;
      }

      &:not(.klaviyo-spinner)::after,
      &.klaviyo-spinner::after {
        content: '';
        width: var(--button-background-image-width);
        height: var(--button-background-image-height);
        background-image: var(--button-background-image);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
        cursor: pointer !important;
        filter: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-sizing: initial !important;
        margin: 0 !important;
      }

      &.klaviyo-spinner {
        font-size: var(--button-font-size) !important;

        /* &::after {
          content: none !important;
        } */
      }

      &[disabled] {
        background-color: var(--button-background) !important;
      }
    }
  }

  input[type="email"] {
    -webkit-tap-highlight-color: transparent;
    height: var(--input-height) !important;
    background-color: var(--input-background) !important;
    border-radius: var(--input-border-radius) !important;
    font-family: var(--input-font-family) !important;
    font-size: var(--input-font-size) !important;
    color: var(--input-color) !important;
    padding: var(--input-padding) !important;
    border: var(--input-border) !important;

    &.needsclick:hover {
      border-color: var(--input-border-color-hover) !important;
    }

    &:focus,
    &:focus-visible {
      outline: none !important;
    }

    &::placeholder {
      font-family: var(--input-font-family) !important;
      font-size: var(--input-font-size) !important;
      color: var(--input-placeholder-color) !important;
    }

    &:-internal-autofill-selected,
    &:-webkit-autofill,
    &:-webkit-autofill:hover, 
    &:-webkit-autofill:focus, 
    &:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 50px var(--input-background) inset;
      -webkit-text-fill-color: var(--input-color) !important;
    }
  }
}

.footer__block {
  .subheading {
    font-weight: 600;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 0;
  }

  .accordion__content ul {
    margin-left: 12px;
  }
}

.footer-aside {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;

  @media (max-width: 999px) {
    flex-direction: column;
    text-align: center;
  }
}

.footer-legals {
  .unstyled-list {
    display: flex;

    li {
      &:not(:first-child) {
        &::before {
          content: '•';
          margin-inline: 6px;
        }
      }
    }
  }

  @media (max-width: 999px) {
    .unstyled-list {
      justify-content: center;
    }
  }
}

/* Page text */
.page-text {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: normal;
    letter-spacing: 0px;
    margin-top: 0;
  }
}

.page-text h1 {
  font-size: 2em;
}

.page-text h2 {
  font-size: 1.5em;
}

.page-text h3 {
  font-size: 1.17em;
}

.page-text h4 {
  font-size: 1em;
}

.page-text h5 {
  font-size: 0.83em;
}

.page-text h6 {
  font-size: 0.6em;
}

.page-text p {
  margin: 0;

  &:not(:last-child) {
    margin-bottom: 1em;
  }
}

.page-text {
  --lists-offset: 10px;

  &,
  & * {
    font-family: var(--page-text-font);
    font-size: var(--page-text-font-size);
    line-height: var(--page-text-line-height);
    color: var(--page-text-color);
  }

  & *:last-child {
    margin-bottom: 0;
  }

  &:empty {
    margin: 0;
  }

  p:empty,
  p:has(> *:only-child:empty) {
    display: block;
    height: 1px;
  }

  p + ul,
  p + ol {
    margin-top: -1em;
  }

  & ul,
  & ol {
    padding-left: 0;
    margin-left: calc(var(--lists-offset) + 18px);
    margin-top: 0;
    list-style-position: outside;
    margin-bottom: 1em;

    /* stylelint-disable-next-line selector-max-compound-selectors */
    & li::marker {
      font-size: var(--page-text-font-size);
    }
  }

  /* stylelint-disable-next-line selector-max-compound-selectors */
  & :is(h1, h2, h3, h4, h5, h6),
  & :is(h1, h2, h3, h4, h5, h6) * {
    font-family: var(--page-heading-font);
    font-weight: 700;
  }

  /* stylelint-disable-next-line selector-no-qualifying-type */
  & :is(iframe[src*="youtube"]),
  & :is(iframe[src*="youtu.be"]),
  & :is(iframe[src*="vimeo"]) {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  img {
    max-width: 100%;
    max-height: 100%;
  }

  blockquote {
    font-style: italic;
    padding-left: 1rem;
    border-left: 2px solid var(--primary-color);
    margin: 0;

    &:not(:last-child) {
      margin-bottom: 1rem;
    }
  }

  table {
    border-collapse: collapse;
    max-width: 100%;
    height: auto;
    overflow: auto;
    white-space: nowrap;
    box-shadow: 0 1px 4px #8080801c;

    td {
      padding: .75rem 1rem;
    }

    th,
    td {
      border: 1px solid rgba(128,128,128,.16);
    }
  }
}