.customer {
  max-width: 836px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {

  .customer .button-group>.button,
  .addresses .button-group>.button {
    min-height: 3.75rem;
  }
}

#Recover,
#Recover+div {
  display: none;
}

#Recover:target {
  display: grid;
}

#Recover:target+div {
  display: block;
}

#Recover:target~#Login,
#Recover:target~#Login+div {
  display: none;
}

.customer .field .select {
  padding-block: var(--sp-2);
  height: calc(var(--input-height) + var(--sp-2d5));
}

.customer__content {
  gap: var(--grid-gap);
}

.customer__sidebar {
  background-color: rgb(var(--color-foreground)/ 0.025);
  padding: var(--sp-7d5) var(--gap-padding);
  border-radius: var(--rounded-block);
}

.address .address__actions {
  margin-top: auto;
}

select#AddressCountryNew~.error-message {
  display: none;
  padding: 10px 0 0 10px;
  color: #f83737;
}

select#AddressCountryNew.no--valid~.error-message {
  display: block;
}

@media screen and (min-width: 768px) {
  .customer__sidebar {
    padding: var(--sp-10);
  }
}

@media screen and (min-width: 1024px) {
  .customer__sidebar {
    width: clamp(340px, 25vw, 430px);
    padding-inline: var(--sp-12);
  }
}

.addresses [aria-expanded=false]~div[id] {
  display: none;
}

.addresses [aria-expanded=true]~div[id] {
  display: block;
}

.address-grid {
  --address-grid-per-row: 1;
  --address-grid-template: auto-flow dense/repeat(var(--address-grid-per-row), minmax(0, 1fr));
  --address-grid-gap: var(--sp-3);
  grid: var(--address-grid-template);
  gap: var(--address-grid-gap);
}

@media screen and (min-width: 768px) {
  .address-grid {
    --address-grid-per-row: 2;
    --address-grid-gap: clamp(var(--sp-4), 1.263vw, var(--sp-6));
  }
}

@media screen and (min-width: 1024px) {
  .address-grid {
    --address-grid-per-row: 3;
    --address-grid-gap: clamp(var(--sp-4), 1.263vw, var(--sp-6));
  }
}

@media screen and (min-width: 1280px) {
  .address-grid {
    --address-grid-per-row: 4;
  }
}

.addresses .address {
  background-color: rgb(var(--color-foreground)/ 0.025);
  padding: clamp(var(--sp-6), 2.315vw, var(--sp-12)) var(--sp-5);
  border-radius: var(--rounded-block);
}

@media screen and (min-width: 1024px) {
  .addresses .address {
    padding-inline: var(--sp-12);
  }
}

.addresses .address>div:first-child {
  margin-block-end: auto;
}

.address__fields .field {
  flex-grow: 1;
  flex-shrink: 0;
  width: 100%;
}

@media screen and (min-width: 768px) {
  .address__fields .field {
    width: calc(50% - var(--sp-6) / 2);
  }

  .address__fields .field--full {
    width: 100%;
  }
}

.order-details .price__regular {
  font-size: var(--text-lg);
}

.order-details :is(.price__sale, .unit-price) {
  font-size: var(--text-sm);
}

@media screen and (max-width: 767px) {
  .customer__content :is(thead, th),
  .customer__content tfoot td:first-of-type {
    display: none
  }

  .customer__content tbody tr {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--sp-5);
  }

  .customer__content tbody tr:first-child {
    border-block-start: 0;
  }

  .customer__content td {
    padding: 0;
    display: grid;
    text-align: start;
    font-size: var(--text-base);
  }

  .customer__content td:first-of-type {
    display: block;
    grid-column: 1/-1;
    font-size: var(--text-lg);
  }

  .customer__content td::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    text-transform: uppercase;
    color: rgb(var(--color-foreground)/ 0.5);
  }

  .order-history td:first-of-type::before {
    font-size: inherit;
    font-weight: var(--font-medium);
    text-transform: none;
    color: rgb(var(--color-foreground));
  }

  .order-details td:first-of-type::before {
    content: none;
  }

  .order-details tfoot tr {
    display: block;
    padding: var(--sp-5);
  }

  .order-details tfoot tr+tr {
    padding-block-start: 0;
  }

  .order-details tfoot tr td {
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .order-details tfoot tr:last-child td {
    font-weight: var(--font-medium);
    font-size: var(--text-lg);
  }

  .order-details tfoot tr:last-child td::before {
    font-size: inherit;
    text-transform: none;
    color: rgb(var(--color-foreground));
  }

  .order-details .price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-0d5);
  }

  .order-details .price__regular {
    font-size: var(--text-base);
  }
}

.customer {
  & .form-heading {
    margin: var(--sp-16) 0 var(--sp-6) 0;
  }
}

.cf-button, .cf-edit-account-link {
  transition: all var(--animation-primary);
  transition-delay: .1s;

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

.customer__sidebar .address-box,
.addresses .address .address-box {
  word-break: break-word;
}

.template-customers-register {
  & h3 {
    font-size: 48px;
    letter-spacing: 0;
    color: #8FBDE3;
    margin-bottom: 48px;
  }
  & h5 {
    font-size: 20px;
    letter-spacing: 0;

    & strong {
      letter-spacing: 0.15px;
    }
  }
  & .title-wrapper {
    margin-bottom: 48px;
  }
}

.customer-icons-wrapper {
  background: #E793731A;
  border-radius: 16px;
  margin-bottom: 32px;

  & .customer-icons {
    grid-template-columns: 1.5fr 2fr;
    row-gap: 24px;
    padding: 48px 66px;
    color: #E79373;

    & p {
      font-size: 18px;
      letter-spacing: 0.15px;
      line-height: 100%;
    }

    & .customer-icons__item {
      text-align: left;
      gap: 10px;
    }
  }
}

.template-customers-account,
.template--redeem-points,
.template--your-points {
  &:has(.main-account-sidebar) .account-icon svg {
    color: #E79373;
  }

  & .breadcrumb {
    background-color: rgba(231, 147, 115, 0.15);
    color: #E79373;
    text-align: center;
    padding: 4px 0;

    & a, & span {
      font-size: 14px;
      letter-spacing: 0.25px;
      text-transform: uppercase;
    }

    & :is(ul, li) {
      gap: 2px;
    }

    & li:before {
      content: none;
    }
  }

  & .main-content {
    &:after {
      content: "";
      display: table;
      clear: both;
    }

    & div.shopify-section:not(.main-account-sidebar) {
      float: right;
      width: 74%;

      & .page-width {
        padding-left: 0;
      }
    }

    & div.shopify-section:has(.shopify-app-block) {
      float: none;
      width: 100%;

      & .page-width {
        padding-inline: var(--page-padding);
      }
    }
  }

  & .main-account-sidebar {
    float: left;
    width: 26%;

    & .page-width {
      padding-left: 50px;
      padding-right: 16px;
    }
  }

  & .custom-multicolumn-icon .title-wrapper {
    margin-bottom: 0;

    & h3 {
      font-size: var(--text-3xl);
    }
  }
}

.template--redeem-points {
  & .collage {
    & .media-card__content {
      justify-content: flex-end;

      & .reversed-link {
        background: none;
      }

      & p {
        font-size: 30px;
        margin-top: 10px;
      }
    }
  }
}

.personal-info {
  box-shadow: 0px 11px 78.3px 0px #7AA2C280;
  background-color: #FFFFFF;
  padding: 16px;
  border-radius: 16px;
  margin-bottom: 16px;

  & .personal-info__content {
    margin: 8px 0 10px 6px;
    gap: 8px;

    & p {
      font-size: 20px;
      font-weight: 400;
    }

    & span {
      font-size: 14px;
      letter-spacing: 0.25px;
    }
  }

  .icon-wrapper {
    padding: 10px;
    background: #8FBDE333;
    border-radius: 8px;
    display: inline-block;
    height: fit-content;
  }
}
.main-account-menu {
  width: 100%;

  & .logo-section {
    border: 1px solid #E79373;
    border-radius: 156px;
    margin-bottom: 24px;

    & .club-icon {
      padding-top: 10px;
    }

    & span {
      font-size: 20px;
      letter-spacing: 0.17px;
    }

    & .club-points {
      margin: 0 auto;
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 0.15px;
      color: #E79373;
    }
  }

  & .account-menu {
    & .account-menu__item {
      padding: 22px 16px;
      background-color: #8FBDE333;
      border-radius: 16px;

      & .icon {
        margin-left: auto;
      }

      & p {
        font-size: 20px;
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .template--redeem-points {
    .page-width.relative:has(.collage.with-grid.grid) {
      padding: 0;

      & .collage.with-grid {
        & .collage__item {
          border-radius: 0;
        }
      }
    }
  }
}

@media only screen and (max-width: 1023px) {
  .customer-icons-wrapper {
    & .customer-icons {
      grid-template-columns: repeat(2, 1fr);
      padding: 32px 30px;

      & img {
        width: 24px;
        height: 24px;
      }

      & p {
        font-size: 14px;
      }
    }
  }

  .template-customers-account,
  .template--redeem-points,
  .template--your-points {
    & .main-account-sidebar {
      float: none;
      width: 100%;
      max-width: none;

      & .page-width {
        padding: 0 16px;
      }
    }

    & .main-content {
      & div.shopify-section:not(.main-account-sidebar) {
        float: none;
        width: 100%;

        & .page-width {
          padding: 0 16px;
        }
      }
    }
  }

  .main-account-menu {
    margin-bottom: -32px;

    & .logo-section {
      margin-bottom: 16px;

      & .club-icon {
        padding: 14px 0 9px;
        margin-right: 8px;
      }

      & .club-points {
        font-weight: 700;
        font-size: 38px;
        letter-spacing: 0.31px;

        & sup {
          font-size: 20px;
          letter-spacing: 0.15px;
          vertical-align: super;
        }
      }
    }

    .show-more-button {
      font-size: 18px;
      letter-spacing: 0.15px;
      position: relative;
      background: rgba(255, 255, 255, 0.8);
      transition: transform 0.5s ease, padding 0.5s ease;

      &[aria-expanded="false"] {
        transform: translateY(-80px);
        padding-top: 50px;
      }

      &[aria-expanded="true"] {
        transform: translateY(0);
        height: 80px;
        padding-bottom: 10px;
      }
    }
  }

  .hidden.show {
    display: flex;
  }
}