/** Shopify CDN: Minification failed

Line 1803:4 "ackground-color" is not a known CSS property
Line 2973:2 Unexpected "{"
Line 2973:3 Expected identifier but found "%"
Line 2974:21 Expected identifier but found whitespace
Line 2974:23 Unexpected "{"
Line 2974:32 Expected ":"
Line 2975:2 Unexpected "{"
Line 2975:3 Expected identifier but found "%"
Line 2977:2 Unexpected "{"
Line 2977:3 Expected identifier but found "%"
... and 2 more hidden warnings

**/


/* CSS from section stylesheet tags */
.template-customers-account #shopify-section-footer-promotions {
    display: none;
  }
  
  .account-page-container {
    display: flex;
  }

  .account-sidebar {
    width: 25%;
    border-right: 1px solid #eaeaea;
    padding-right: 20px;
    background-color: white;
    padding: 30px;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: 100vh;
  }

  .account-profile {
    text-align: center;
    margin-bottom: 40px;
    align-items: center;
  }

  .account-profile .avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    flex-direction: column;
    gap: 10px;
  }

  .account-profile .avatar .loyalty-member-type {
    background-color: grey;
    color: white;
    border-radius: 10px;
    padding: 1px 10px;
    font-size: 10px;
    font-weight: bold;
  }

  .account-profile .account-greeting p {
    margin: 10px 0 0;
    font-size: 16px;
  }

  .account-profile .account-greeting h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
  }

  .toggle-nav {
    display: none;
  }

  .account-nav {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
  }

  .account-nav__link, .logout_link {
    padding: 15px 0;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    /*border-bottom: 1px solid #eaeaea;*/
    transition: background-color 0.3s;
    position: relative;
    gap: 25px;
    padding-left: 20px;
    border-left: 4px solid white;
  }

  .account-nav__link:hover, .logout_link:hover {
    color: #000;
    background-color: #f0f0f0;
  }

  .account-nav__link.active {
    font-weight: bold;
    color: #000;
    border-left: 4px solid #BCAD9D;
    background-color: #FAF8F5;
  }

  .account-nav__link:after {
    border-top: 1px solid #eee;
    content: "";
    left: 66px;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .tab-content {
    display: none;
  }

  .tab-content.active {
    display: block;
  }

  .account-content {
    width: 75%;
    padding: 40px;
    background-color: #eee;
  }

  .account-content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: bold;
  }

  #orders-tab, #addresses-tab {
    padding: 20px;
  }

  .order-item {
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .order-details h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }

  .order-date {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .progress-bar-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    height: 10px;
    margin: 10px 0;
  }

  .progress-bar {
    width: 100%; /* Adjust based on actual progress */
    height: 100%;
    background-color: #4caf50;
    transition: width 0.3s;
  }

  .divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 20px 0;
  }

  .order-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .order-images {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
  }
  
  .order-images .order-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px; /* Fixed width matching image width */
  }
  
  .product-image {
    width: 100%; /* Image fills the container width */
    height: auto;
    border-radius: 5px;
  }
  
  .order-item-title {
    font-size: 0.85em; /* Adjust font size as needed */
    text-align: center;
    margin-top: 5px;
    color: #555;
    word-wrap: break-word; /* Allows long words to wrap */
    overflow-wrap: break-word;
    hyphens: auto; /* Optional: adds hyphens when words are broken */
  }

  .product-image {
    width: 100px;
    height: 100px;
    border-radius: 10px;
  }

  .order-actions {
    text-align: right;
  }

  .order-actions button {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 10px;
  }

  .order-actions button:hover {
    background-color: #f0f0f0;
  }

  .order-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .order-meta {
    font-size: 14px;
    color: #555;
  }

  .progress-bar-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    height: 10px;
    margin: 10px 0;
  }

  /* Address Book Styles */
  .address-card {
    background-color: white;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .address-info {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
  }

  .address-info p {
    margin-bottom: 0;
  }

  .address-actions {
    text-align: right;
  }

  .address-actions .btn_small {
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
    background-color: white;
    border: 1px solid #eaeaea;
    padding: 10px;
    border-radius: 5px;
    margin: 5px 0;
    display: block;
  }

  .address-actions .btn_small:hover {
    background-color: #f0f0f0;
  }

  .address-actions .btn_secondary {
    color: #ff6f61;
    border-color: #ff6f61;
  }

  .address-actions .btn_secondary:hover {
    background-color: #ff6f61;
    color: white;
  }

  .address-button {
    display: block;
    text-align: center;
    font-weight: bold;
    margin-bottom: 30px;
    border-radius: 5px;
  }

  .address-form {
    width: 50%;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
  }

  @media (max-width: 768px) {
    .address-form {
      width: 100%;
    }
    .small--one-whole {
      width: 100%;
    }
  }

  .address-default {
    color: #999;
    font-style: italic;
  }

  .progress-bar {
    height: 100%;
    background-color: #4caf50;
    border-radius: 5px;
    transition: width 0.3s;
  }

  /* Referral Section */

  #referral-tab {
    text-align: center;
    padding: 40px;
  }

  .referral-subtext {
    font-size: 18px;
    color: #333;
    margin-bottom: 30px;
  }

  .referral-step {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    text-align: left;
  }

  .referral-step-icon {
    font-size: 40px;
    margin-right: 15px;
    color: #4caf50;
  }

  .referral-step-text p {
    font-size: 16px;
    color: #555;
  }

  .referral-container {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }

  .referral-link-box {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    padding: 10px;
    width: 100%;
    max-width: 500px;
  }

  #referral-link {
    border: none;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    background-color: transparent;
    color: #333;
    outline: none;
  }

  .copy-btn {
    background-color: #4caf50;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin-left: 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    gap: 10px;
  }

  .copy-btn:hover {
    background-color: #45a049;
  }

  .copy-message {
    font-size: 14px;
    color: #4caf50;
    margin-top: 10px;
  }

  .referral-benefits {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }

  .benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
  }

  .benefit-icon {
    font-size: 40px;
    color: #ff9800;
    margin-bottom: 10px;
  }

  .benefit-text {
    font-size: 16px;
    color: #333;
  }

  .share-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .share-btn {
    padding: 12px;
    font-size: 18px;
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
  }

  .whatsapp {
    background-color: #25D366;
  }

  .facebook {
    background-color: #3b5998;
  }

  .email {
    background-color: #db4437;
  }

  .messenger {
    background-color: #0084ff;
  }

  .instagram {
    background-color: #e4405f;
  }

  .share-btn:hover {
    opacity: 0.8;
  }

  /* Colors */
  :root {
    --Color_SoftAmber: #f8e1a1;
    --Color_DustyPink: #e5a8b9;
    --Color_PearlBush: #ded5c4;
    --Color_Nude: #e4c2b3;
    --Color_Brand: #2b2f2e;
    --Color_TranslucentCapeCod: rgba(43, 47, 46, 0.1);
  }

  /* General styles for the loyalty section */
  #loyaltylion {
    --lion-primary-color: #4d384b;
      --lion-secondary-color: #793592;
      --lion-primary-color-darker1: #473445;
      --lion-primary-color-darker2: #412f3f;
      --lion-primary-color-darker3: #362735;
      --lion-secondary-color-lighter1: #8c3da9;
      --lion-secondary-color-darker1: #6f3186;
      --lion-secondary-color-darker2: #662d7b;
      --lion-button-border-radius: 4px;
      --lion-button-padding: 7px 18px;
      --lion-button-font-size: 1em;
      --lion-button-primary-background-color: #4d384b;
      --lion-button-primary-text-color: #ffffff;
      --lion-button-primary-hover-background-color: #5e455c;
      --lion-button-primary-hover-text-color: #ffffff;
      --lion-button-primary-active-background-color: #5e455c;
      --lion-button-primary-active-text-color: #ffffff;
      --lion-button-primary-active-shadow-color: #453244;
      --lion-button-tile-background-color: transparent;
      --lion-button-tile-border-color: var(--lion-button-primary-background-color);
      --lion-button-tile-border-style: solid;
      --lion-button-tile-border-width: 1px;
      --lion-button-tile-text-color: #322431;
      --lion-button-tile-hover-background-color: var(--lion-button-primary-background-color);
      --lion-button-tile-hover-text-color: #ffffff;
      --lion-button-neutral-background-color: #757575;
      --lion-button-neutral-text-color: white;
      --lion-button-neutral-hover-background-color: gray;
      --lion-button-neutral-hover-text-color: white;
      --lion-button-neutral-active-background-color: gray;
      --lion-button-neutral-active-text-color: white;
      --lion-button-neutral-active-shadow-color: dimgray;
      --lion-icon-color: var(--lion-secondary-color);
      --lion-section-heading-text-color: #777;
      --lion-section-heading-font-size: 28px;
      --lion-section-heading-text-align: center;
      --lion-section-heading-font: inherit;
      --lion-section-heading-margin: 0 0 10px 0;
      --lion-section-heading-line-color: #e3e3e3;
      --lion-section-heading-line-size: 1px;
      --lion-section-grid-gap: 20px;
      --lion-section-grid-columns: 5;
      --lion-section-grid-min-width: 220px;
      --lion-section-list-gap: 20px;
      --lion-section-margin: 0 0 50px 0;
      --lion-section-border-radius: 6px;
      --lion-section-border-style: solid;
      --lion-section-border-width: 0;
      --lion-section-border-color: #e0e3e5;
      --lion-section-background-color: #fafafa;
      --lion-tile-border-color: #e0e3e5;
      --lion-tile-border-width: 0;
      --lion-tile-background-color: #ffffff;
      --lion-header-background-color: #fdfdfd;
      --lion-header-border-radius: 0;
      --lion-header-text-color: #555;
      --lion-header-nav-link-accent-color: #4d384b;
      --lion-header-nav-link-border-color: rgba(77, 56, 75, 0.1);
      --lion-header-nav-link-hover-background-color: rgba(77, 56, 75, 0.03);
      --lion-header-nav-link-hover-border-color: rgba(77, 56, 75, 0.3);
      --lion-header-nav-link-hover-icon-color: #4d384b;
      --lion-header-nav-link-hover-text-color: #362735;
      --lion-header-nav-link-icon-display: inline-block;
      --lion-rule-item-icon-color: var(--lion-icon-color);
      --lion-rules-grid-gap: var(--lion-section-grid-gap);
      --lion-rules-grid-columns: var(--lion-section-grid-columns);
      --lion-rules-grid-min-width: var(--lion-section-grid-min-width);
      --lion-rules-padding: var(--lion-rules-grid-gap);
      --lion-rules-margin: var(--lion-section-margin);
      --lion-rules-background-color: var(--lion-section-background-color);
      --lion-rules-border-radius: var(--lion-section-border-radius);
      --lion-rules-border-style: var(--lion-section-border-style);
      --lion-rules-border-width: var(--lion-section-border-width);
      --lion-rules-border-color: var(--lion-section-border-color);
      --lion-rules-tile-background-color: var(--lion-tile-background-color);
      --lion-rules-tile-border-color: var(--lion-tile-border-color);
      --lion-rules-tile-border-style: solid;
      --lion-rules-tile-border-width: var(--lion-tile-border-width);
      --lion-rules-tile-border-radius: 6px;
      --lion-reward-item-icon-color: var(--lion-icon-color);
      --lion-rewards-grid-gap: var(--lion-section-grid-gap);
      --lion-rewards-grid-columns: var(--lion-section-grid-columns);
      --lion-rewards-grid-min-width: var(--lion-section-grid-min-width);
      --lion-rewards-padding: var(--lion-rewards-grid-gap);
      --lion-rewards-margin: var(--lion-section-margin);
      --lion-rewards-background-color: var(--lion-section-background-color);
      --lion-rewards-border-radius: var(--lion-section-border-radius);
      --lion-rewards-border-style: var(--lion-section-border-style);
      --lion-rewards-border-width: var(--lion-section-border-width);
      --lion-rewards-border-color: var(--lion-section-border-color);
      --lion-rewards-tile-background-color: var(--lion-tile-background-color);
      --lion-rewards-tile-border-color: var(--lion-tile-border-color);
      --lion-rewards-tile-border-style: solid;
      --lion-rewards-tile-border-width: var(--lion-tile-border-width);
      --lion-rewards-tile-border-radius: 6px;
      --lion-claimed-reward-hover-shadow-color: rgba(121, 53, 146, 0.1);
      --lion-claimed-reward-hover-shadow: 0 0 1px 2px var(--lion-claimed-reward-hover-shadow-color);
      --lion-claimed-rewards-grid-gap: var(--lion-section-grid-gap);
      --lion-claimed-rewards-grid-columns: var(--lion-section-grid-columns);
      --lion-claimed-rewards-grid-min-width: var(--lion-section-grid-min-width);
      --lion-claimed-rewards-padding: var(--lion-claimed-rewards-grid-gap);
      --lion-claimed-rewards-margin: var(--lion-section-margin);
      --lion-claimed-rewards-background-color: var(--lion-section-background-color);
      --lion-claimed-rewards-border-radius: var(--lion-section-border-radius);
      --lion-claimed-rewards-border-style: var(--lion-section-border-style);
      --lion-claimed-rewards-border-width: var(--lion-section-border-width);
      --lion-claimed-rewards-border-color: var(--lion-section-border-color);
      --lion-claimed-rewards-tile-background-color: var(--lion-tile-background-color);
      --lion-claimed-rewards-tile-border-color: var(--lion-tile-border-color);
      --lion-claimed-rewards-tile-border-width: 0;
      --lion-claimed-rewards-tile-border-radius: var(--lion-tile-border-width);
      --lion-tier-accent-color: var(--lion-primary-color);
      --lion-tier-background-color: #ffffff;
      --lion-tier-header-background-color: var(--lion-tier-background-color);
      --lion-tier-purchase-points-background-color: rgba(77, 56, 75, 0.04);
      --lion-tier-purchase-points-border-color: rgba(77, 56, 75, 0.2);
      --lion-tier-current-tier-highlight-background-color: var(--lion-tier-accent-color);
      --lion-tier-current-tier-highlight-text-color: #ffffff;
      --lion-tier-current-box-shadow-color: rgba(77, 56, 75, 0.1);
      --lion-tier-current-box-shadow: 0 0 5px 4px var(--lion-tier-current-box-shadow-color);
      --lion-tier-hover-box-shadow-color: rgba(77, 56, 75, 0.15);
      --lion-tier-hover-box-shadow: 0 0 3px 2px var(--lion-tier-hover-box-shadow-color);
      --lion-tier-title-color: #555555;
      --lion-tier-progress-bar-background-color: #f0f0f0;
      --lion-tier-progress-bar-indicator-color: var(--lion-secondary-color);
      --lion-tier-progress-bar-height: 8px;
      --lion-faq-list-gap: var(--lion-section-list-gap);
      --lion-faq-background-color: var(--lion-section-background-color);
      --lion-faq-padding: var(--lion-section-list-gap);
      --lion-faq-border-radius: var(--lion-section-border-radius);
      --lion-faq-border-style: var(--lion-section-border-style);
      --lion-faq-border-width: var(--lion-section-border-width);
      --lion-faq-border-color: var(--lion-section-border-color);
      --lion-faq-margin: var(--lion-section-margin);
      --lion-faq-question-background-color: #ffffff;
      --lion-faq-question-vertical-padding: 20px;
      --lion-faq-question-horizontal-padding: 16px;
      --lion-faq-question-vertical-border-width: 0;
      --lion-faq-question-horizontal-border-width: 0;
      --lion-faq-question-border-color: var(--lion-section-border-color);
      --lion-faq-question-border-radius: 0;
      --lion-faq-question-header-font-weight: normal;
      --lion-faq-accordion-icon-size: 20px;
      --lion-tier-progress-padding: var(--lion-section-list-gap);
      --lion-tier-progress-text-primary-color: #555;
      --lion-tier-progress-text-secondary-color: #737373;
      --lion-tier-progress-text-tier-name-color: var(--lion-tier-progress-text-primary-color);
      --lion-tier-progress-text-tier-description-color: var(--lion-tier-progress-text-secondary-color);
      --lion-tier-progress-text-tier-bound-color: var(--lion-tier-progress-text-secondary-color);
      --lion-tier-progress-text-tier-value-color: var(--lion-tier-progress-text-primary-color);
      --lion-tier-progress-text-tier-cta-color: var(--lion-tier-progress-text-primary-color);
      --lion-tier-progress-text-tier-expiration-color: var(--lion-tier-progress-text-secondary-color);
      --lion-tier-progress-bar-vertical-padding: 60px;
      --lion-tier-progress-bar-horizontal-padding: 60px;
      --lion-tier-progress-bar-unfilled-color: #f0f0f0;
      --lion-tier-progress-bar-fill-color: var(--lion-secondary-color);
      --lion-tier-progress-bar-track-height: 8px;
      --lion-tier-progress-bar-track-radius: 8px;
      --lion-tier-progress-bar-fill-radius: var(--lion-tier-progress-bar-track-radius);
      --lion-tier-progress-bar-step-marker-height: 20px;
      --lion-tier-progress-bar-step-marker-width: 20px;
      --lion-tier-progress-bar-step-marker-radius: 50%;
      --lion-tier-progress-bar-step-marker-vertical-offset: 0px;
      --lion-tier-progress-bar-step-marker-horizontal-offset: 0px;
      --lion-tier-progress-bar-step-label-vertical-offset: 20px;
      --lion-tier-progress-bar-step-label-horizontal-offset: 0px;
      --lion-tier-progress-bar-step-label-max-width: 120px;
      --lion-tier-progress-bar-current-value-padding: 0px;
      --lion-tier-progress-bar-current-value-radius: 0px;
      --lion-tier-progress-bar-current-value-background-color: #00000000;
      --lion-tier-progress-bar-current-value-vertical-offset: 10px;
      --lion-tier-progress-bar-current-value-horizontal-offset: 0px;
      --lion-tier-progress-bar-current-status-marker-height: 12px;
      --lion-tier-progress-bar-current-status-marker-width: 2px;
      --lion-tier-progress-bar-current-status-marker-radius: 0px;
      --lion-tier-progress-bar-current-status-marker-vertical-offset: 0px;
      --lion-tier-progress-bar-current-status-marker-horizontal-offset: 0px;
    --Grid_Gutter: 30px;
    color: var(--lion-primary-color);
    padding: 20px;
    border-radius: 10px;
  }

  .lion-tier-overview {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding: var(--lion-section-grid-gap);
    border-radius: var(--lion-section-border-radius);
    background-color: var(--lion-section-background-color);
    border-style: var(--lion-section-border-style);
    border-width: var(--lion-section-border-width);
    border-color: var(--lion-section-border-color);
    position: relative;
    align-items: flex-end;
    display: flex;
    min-width: 100%;
    width: auto;
    padding: 0;
    background-color: transparent;
    gap: var(--Grid_Gutter);
  }

  .lion-tier-box {
    background-color: var(--lion-primary-color-darker1);
    position: relative;
    flex: 1;
    padding: 70px 30px 20px;
    border-radius: 250px 250px 0 0;
    box-shadow: none;
  }

  .lion-tier-box--0 {
    background-color: #ffffff;
  }

  .lion-tier-box--1 {
    background-color: #D0D0D0;
  }

  .lion-tier-box--2 {
    background-color: #BCAD9D;
  }

  .lion-tier-box--3 {
    background-color: #434343;
  }

  .lion-tier-box__header {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 40px 0;
    position: relative;
    border-radius: var(--lion-section-border-radius) var(--lion-section-border-radius) 0 0;
    padding-block-start: 0;
    padding-block-end: 30px;
    background-color: transparent;
  }

  .ll-TierOverview_TierIcon {
    display: block;
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }

  @media only screen and (min-width: 768px) {
    .ll-TierOverview_TierIcon {
        width: 55px;
        height: 55px;
    }
  }

  .lion-tier-box__position {
    display: none;
  }

  .lion-tier-box__title {
    flex-direction: column;
    display: flex;
    padding: 0;
    font-family: var(--Font_Family-tenor);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.44;
    text-align: center;
    text-transform: uppercase;
    color: #222222;
    margin-block-end: 20px;
    font-size: 26px;
    line-height: 1.38;
  }

  .lion-tier-box--3 .lion-tier-box__title {
    color: #ffffff;
  }

  .lion-tier-box__sub-title {
    font-size: 14px;
    color: #222222;
  }

  .lion-tier-box--3 .lion-tier-box__sub-title {
    color: #ffffff;
  }

  .lion-tier-box__purchase-rule {
    margin-top: 10px;
  }

  .lion-tier-box__purchase-rule-points .value {
    font-size: 24px;
    font-weight: bold;
  }

  .lion-tier-box__benefits-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
  }

  .lion-tier-benefits-list__item {
    margin-bottom: 10px;
  }

  .lion-tier-box__footer {
    text-align: center;
  }

  .lion-tier-box__value-to-next {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    gap: 10px;
  }

  .lion-tier-box__value-to-next img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }

  .lion-tier-box__value-to-next .discount-icon {
    border-radius: unset;
    width: 55px;
    height: 30px;
  }

  .lion-progress-bar__container {
    background-color: var(--Color_TranslucentCapeCod);
    border-radius: 5px;
    height: 10px;
    margin-top: 10px;
  }

  .lion-progress-bar__fill {
    background-color: var(--Color_SoftAmber);
    height: 100%;
    border-radius: 5px;
  }

  .loyalty-tier-overview {
    margin: 100px 0;
    display: inline-block;
    width: 100%;
  }

  @media (max-width: 768px) {
    .loyalty-tier-overview {
      margin-bottom: 0;
    }
  }
  
  .loyalty-tier-overview h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 2rem;
  }
  
  .loyalty-tier-overview p {
    font-size: 1rem;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
  }
  
  .UltamateRewardsPointsProgress {
    margin-top: 30px;
  }
  
  .UltamateRewardsPointsProgress__track {
    height: 0.125rem;
    background-color: #DDD5CE;
    border-radius: 10px;
    margin-top: -64px;
    position: relative;
  }
  
  @media (min-width: 768px) {
    .UltamateRewardsPointsProgress__track {
      height: 10px;
    }
  }

  @media (max-width: 768px) {
    .UltamateRewardsPointsProgress__track {
      height: 10px;
      margin-top: -46px;
    }
  }
  
  .UltamateRewardsPointsProgress__track__progress {
    background-color: #BCAD9D;
    border-radius: 10px;
    height: 10px;
    position: relative;
    transition: width 0.5s linear;
    width: 0%;
  }
  
  @media (min-width: 768px) {
    .UltamateRewardsPointsProgress__track__progress {
      height: 10px;
    }
  }
  
  .UltamateRewardsPointsProgress__track__label {
    position: absolute;
    right: -15px; /* Adjust to align the label */
    top: -25px; /* Adjust to place the label above the progress bar */
    background-color: #FFF;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    transform: translateX(50%);
  }
  
  @media (min-width: 768px) {
    .UltamateRewardsPointsProgress__track__label {
      font-size: 14px;
      top: -35px; /* Adjust for larger screens */
    }
  }

  @media (max-width: 768px) {
    .UltamateRewardsPointsProgress__track__label {
      top: -30px;
    }
  }
  
  .UltamateRewardsPointsProgress__steps {
    display: flex;
    margin: 0;
    padding: 0;
  }
  
  .UltamateRewardsPointsProgress__steps li {
    list-style: none;
  }
  
  .UltamateRewardsPointsProgress__steps__info {
    height: 2rem;
    margin-bottom: .25rem;
  }
  
  @media (min-width: 768px) {
    .UltamateRewardsPointsProgress__steps__info {
      margin-bottom: 1.375rem;
    }
  }
  
  .UltamateRewardsPointsProgress__steps li p {
    white-space: nowrap;
    font-size: 0.75rem;
    text-align: center;
  }
  
  .UltamateRewardsPointsProgress__steps__info__icon {
    margin: 0 auto 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .UltamateRewardsPointsProgress__steps__info__icon svg {
    z-index: 1;
  }
  
  @media (min-width: 768px) {
    .UltamateRewardsPointsProgress__steps__info__icon {
      margin-bottom: 0.375rem;
    }
  }

  .loyalty-discounts {
    margin-bottom: 40px;
  }

  .loyalty-discounts h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #3b2a2f;
    text-align: center;
  }

  .loyalty-discounts p {
    max-width: 780px;
    margin: 0 auto 40px;
    font-size: 1rem;
    color: #6d5c61;
    text-align: center;
  }

  .discount-list {
    display: flex;
    gap: 20px;
  }
  
  .loyalty-discount-item {
    border: 2px solid #e0e0e0;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    background-color: #f9f9f9;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    flex: 1;
  }
  
  .loyalty-discount-item.unlocked {
    border-color: #4CAF50; /* Highlight unlocked discounts */
  }
  
  .loyalty-discount-item.locked {
    background-color: #f0f0f0;
  }
  
  .discount-code {
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 6px;
    display: inline-block;
  }

  .discount-status {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
  }
  
  .locked-overlay, .unlocked-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    text-align: center;
  }
  
  .locked-overlay p, .unlocked-overlay p {
    font-weight: bold;
    color: #999;
  }
  
  .lock-icon {
    margin-top: 10px;
    fill: #999;
  }

  @media (max-width: 768px) {
    /* Adjust the title size for mobile */
    .loyalty-discounts {
      margin-top: 100px;
    }
    
    .loyalty-discounts h2 {
      font-size: 1.5rem;
    }
  
    /* Stack the discount items vertically on smaller screens */
    .discount-list {
      display: flex;
      flex-wrap: wrap;
    }
  
    .loyalty-discount-item {
      width: 100%;
      margin-bottom: 0;
    }
  
    .locked-overlay p, .unlocked-overlay p {
      font-size: 0.8rem;
      margin-bottom: 0;
    }
  
    /* Adjust padding and font size for mobile readability */
    .loyalty-discount-item {
      padding: 15px;
      padding-top: 45px;
    }
  
    .loyalty-discount-item h3 {
      font-size: 1.0rem;
    }

    .loyalty-rule-item-content .item-title {
      font-size: 16px;
    }
  
    .discount-code {
      font-size: 1rem;
      padding: 8px;
    }
  
    .locked-overlay, .unlocked-overlay {
      padding: 10px;
    }
  }

  .loyalty-ways-points {
    margin: 100px 0;
    text-align: center;
  }
  
  .loyalty-ways-points h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #3b2a2f;
  }
  
  .loyalty-ways-points p {
    max-width: 780px;
    margin: 0 auto 40px;
    font-size: 1rem;
    color: #6d5c61;
  }
  
  .loyalty-rules-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  
  .loyalty-rule-item {
    border: 1px solid rgba(0, 0, 0, 0.2);
    width: auto;
    flex: 1;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, .1);
    max-width: 200px; /* Limits the size of items on desktop */
  }

  .loyalty-rule-item-content .icon-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .loyalty-rule-item-content .icon-section .discount-icon {
    height: 30px !important;
    width: auto;
  }
  
  .loyalty-rule-item-content img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }

  #instagram-follow-card {
    cursor: pointer;
  }

  #instagram-follow-card .item-title {
    color: blue;
    text-decoration: underline;
  }
  
  .item-title {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.44;
    text-align: center;
    text-transform: uppercase;
    color: #222222;
    margin-bottom: 10px;
    margin-top: 15px;
  }
  
  .item-desc {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.71;
    color: #222222;
  }
  
  /* Media query for responsiveness */
  @media (max-width: 768px) {
    .loyalty-rules-list {
      flex-direction: row;
      justify-content: center;
      gap: 0;
    }
  
    .loyalty-rule-item {
      width: 45%; /* Adjust width for 2x2 grid */
      max-width: 100%; /* Ensure full width on mobile */
      margin: 5px;
      flex: 0 1 45%;
    }
  
    .loyalty-rule-item-content img {
      width: 40px; /* Make images smaller on mobile */
      height: 40px;
    }
  }

  /* ImageList Section */

  /*
  |--------------------------------------------------------------------------
  | Image List Overlay Section
  |--------------------------------------------------------------------------
  */
  
  .section-ImageListOverlay {
    background-color: #F7F0E9;
    color: #fff;
  }
  @media only screen and (min-width: 1201px) {
    .section-ImageListOverlay {
      background-color: #F7F0E9;
    }
  }
  
  .section-ImageListOverlay-darkText {
    color: var(--Color_Brand);
  }
  
  /*
  |--------------------------------------------------------------------------
  | Inner Container
  |--------------------------------------------------------------------------
  */
  
  .section-ImageListOverlay-inner {
    padding-block-start: var(--Padding);
    padding-block-end: 50px;
  
    background-color: var(--BackgroundColour);
    color: var(--TextColour);
  }
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-inner {
      --VerticalPadding: 100px;
  
      padding-block-start: var(--VerticalPadding);
      padding-block-end: var(--VerticalPadding);
    }
  }
  
  /*
  |--------------------------------------------------------------------------
  | Columns
  |--------------------------------------------------------------------------
  */
  
  .section-ImageListOverlay-columns {
    flex: 1 0 auto;
    flex-direction: column;
  
    display: flex;
    gap: 30px;
  }
  
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-columns {
      grid-column-gap: var(--Grid_Gutter);
      grid-template-columns: repeat(12, 1fr);
  
      display: grid;
    }
  }
  
  .section-ImageListOverlay-columns-mobileFirst .section-ImageListOverlay-column-media {
    order: -1;
  }
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-columns-mobileFirst .section-ImageListOverlay-column-media {
      order: unset;
    }
  }
  
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-column:first-of-type {
      grid-column: 1 / span 5;
    }
    .section-ImageListOverlay-column-media:first-of-type {
      grid-column: 1 / span 5;
    }
  
    .section-ImageListOverlay-column:last-of-type {
      grid-column: span 5 / -1;
    }
    .section-ImageListOverlay-column-media:last-of-type {
      grid-column: span 5 / -2;
    }
  }
  @media only screen and (min-width: 1201px) {
    .section-ImageListOverlay-column:first-of-type {
      grid-column: 2 / span 4;
    }
  
    .section-ImageListOverlay-column:last-of-type {
      grid-column: span 4 / -2;
    }
  }
  
  /*
  |--------------------------------------------------------------------------
  | Content Column
  |--------------------------------------------------------------------------
  */
  
  .section-ImageListOverlay-content {
    flex-direction: column;
    justify-content: center;
    order: 1;
  
    display: flex;
    height: 100%;
  }
  
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-content {
      order: unset;
    }
  }

  @media (max-width: 768px) {
    .section-ImageListOverlay-content {
      padding: 10px;
    }

    .section-ImageListOverlay-title {
      max-width: 100%;
    }
  }
  
  /*
  |--------------------------------------------------------------------------
  | Media Column
  |--------------------------------------------------------------------------
  */
  
  .section-ImageListOverlay-media {
    position: relative;
  
    order: 0;
  
    overflow: visible;
  }
  
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-media {
      position: sticky;
      top: var(--HeaderBanner_Height);
  
      order: unset;
  
      grid-column: var(--Media_Col_Start) / span 4;
    }
  }
  
  .section-ImageListOverlay-image-mobile {
    display: block;
  }
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-image-mobile {
      display: none;
    }
  }
  
  .section-ImageListOverlay-image-desktop {
    display: none;
  }
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-image-desktop {
      display: block;
    }
  }
  
  .section-ImageListOverlay-overlay-mobile {
    display: block;
  }
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-overlay-mobile {
      display: none;
    }
  }
  
  .section-ImageListOverlay-overlay-desktop {
    display: none;
  }
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-overlay-desktop {
      display: block;
    }
  }
  
  /*
  |--------------------------------------------------------------------------
  | Media Overlay
  |--------------------------------------------------------------------------
  */
  
  .section-ImageListOverlay-overlay {
    --Overlay_Size: 100px;
  
    position: absolute;
    right: 30px;
    bottom: calc(var(--Overlay_Size) * -0.5);
  
    width: var(--Overlay_Size);
  }
  
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-overlay {
      --Overlay_Size: var(--Overlay_Width-desktop);
  
      right: auto;
      bottom: auto;
    }
  
    .section-ImageListOverlay-overlay-bottom {
      bottom: 50px;
    }
  
    .section-ImageListOverlay-overlay-overhangBottom {
      bottom: -50px;
    }
  
    .section-ImageListOverlay-overlay-top {
      top: 50px;
    }
  
    .section-ImageListOverlay-overlay-overhangTop {
      top: -50px;
    }
  
    .section-ImageListOverlay-overlay-left {
      left: calc(var(--Overlay_Size) * -0.5);
    }
  
    .section-ImageListOverlay-overlay-right {
      right: calc(var(--Overlay_Size) * -0.5);
    }
  }
  
  /*
  |--------------------------------------------------------------------------
  | Content Styling
  |--------------------------------------------------------------------------
  */
  
  .section-ImageListOverlay-title {
    max-width: calc(100% - 100px);
    margin-block-end: 15px;
  }
  
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-title {
      max-width: 100%;
      margin-block-end: 20px;
    }
  }

  @media (max-width: 768px) {
    .section-ImageListOverlay-title {
      max-width: 100%;
      text-align: center;
    }
  }
  
  .section-ImageListOverlay-text {
    display: block;
    margin-block-end: 20px;
  }
  
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-text {
      margin-block-end: 30px;
    }
  }

  @media (max-width: 768px) {
    .section-ImageListOverlay-text {
      font-size: 1rem;
    }
  }
  
  .section-ImageListOverlay-list {
    display: grid;
    margin-block-end: 20px;
    padding-inline-start: 16px;
  
    gap: 30px;
  }
  
  .section-ImageListOverlay-item {
    padding-inline-start: 15px;
  }
  
  .section-ImageListOverlay-item::marker {
    font-family: var(--Font_Family-tenor);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.44;
    text-transform: uppercase;
  }
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-item::marker {
      font-size: 26px;
      line-height: 1.38;
    }
  }
  
  .section-ImageListOverlay-itemText {
    margin-block-start: 5px;
  }
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-itemText {
      margin-block-start: 10px;
    }
  }

  @media (max-width: 768px) {
    .section-ImageListOverlay-itemText {
      font-size: 1rem;
    }
  }
  
  @media only screen and (min-width: 901px) {
    .section-ImageListOverlay-button {
      display: none;
    }
  }
  
  /*
  |--------------------------------------------------------------------------
  | Responsive Image
  |--------------------------------------------------------------------------
  */
  
  .responsive-Image {
    --Image_AspectRatio: 100%;
    --Aspect_Ratio: 1 / 1;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
  }
  
  .responsive-Image-element {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Refer a Friend Section */
  .referral-section {
    background-color: #f7f0e9; /* Light background similar to the one in the screenshot */
    padding: 50px 20px;
    display: flex;
    justify-content: center;
  }
  
  .referral-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 50px;
  }
  
  .referral-image img {
    width: 100%;
    height: auto;
    max-width: 600px;
    object-fit: cover;
  }
  
  .referral-content {
    flex: 1;
    margin-left: 30px;
  }
  
  .referral-content h2 {
    font-size: 2rem;
    color: #333; /* Dark text color */
    margin-bottom: 20px;
  }
  
  .referral-content p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 30px;
  }
  
  .referral-button {
    display: inline-block;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    border: 1px solid #333;
    border-radius: 30px;
    padding: 10px 20px;
  }

  .referral-button:hover {
    background-color: #333;
    color: #ffffff;
  }
  
  @media (max-width: 768px) {
    .referral-section {
      padding: 0;
    }
    
    .referral-container {
      flex-direction: column;
      text-align: center;
    }
    .referral-content {
      margin-left: 0;
      margin-top: 20px;
      padding: 10px;
    }

    .referral-content ul {
      font-size: 1rem;
      text-align: left;
    }
    
    .referral-image img {
      max-width: 100%;
    }
  }

  .refer-a-friend-modal, .discount-modal {
    display: none;
    z-index: 28;
  }

  .copy-message {
    display: none;
    font-size: 14px;
    color: green;
    animation: flash 1s ease-out;
    position: absolute;
    bottom: 15px;
    right: 15px;
  }
  
  @keyframes flash {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
  }

  .referral-bg {
    background-color: #00000080;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .referral-modal {
    padding: 20px;
    background-color: #fff;
    color: #333;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    margin: auto;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  @media (max-width: 768px) {
    .referral-modal {
      max-width: 90%;
    }
  }
  
  .referral-modal__header {
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid #eee;
  }
  
  .referral-modal__close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    border: none;
    background: none;
  }
  
  .referral-widget {
    padding: 10px;
  }
  
  .referral-panels {
    display: flex;
    flex-direction: column;
  }
  
  .referral-panel {
    margin-bottom: 20px;
    text-align: center;
  }
  
  .referral-main__heading {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  
  .referral-main__intro {
    font-size: 14px;
    margin-bottom: 15px;
  }
  
  .referral-main__share-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 30px 0;
  }
  
  .referral-share-button {
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .referral-share-button:hover {
    border-color: #333;
    color: #fff;
  }
  
  .referral-main__share-link-text {
    margin-bottom: 5px;
  }
  
  .referral-main__share-link-container {
    display: flex;
    align-items: center;
  }
  
  .referral-main__share-link-url {
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    flex-grow: 1;
    font-size: 12px;
  }
  
  .copy-to-clipboard-button {
    ackground-color: #f5f5f5;
    border: none;
    cursor: pointer;
    height: 100%;
    display: inline-flex;
  }
  
  .referral-email-form__field {
    margin-bottom: 15px;
  }
  
  .referral-email-form__label {
    font-size: 12px;
    margin-bottom: 5px;
    display: block;
  }
  
  .referral-email-form__input,
  .referral-email-form__textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .referral-email-form__textarea {
    resize: vertical;
  }
  
  .referral-email-form__buttons {
    display: flex;
    gap: 10px;
  }
  
  .action-button {
    padding: 10px 15px;
    border: none;
    background-color: #333;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
  }
  
  .action-button:hover {
    background-color: #555;
  }
  
  .success-message {
    display: none;
    color: green;
    font-size: 12px;
    margin-top: 10px;
  }

  /* Mobile styles */
  @media (max-width: 768px) {
    /* Make the sidebar take full width on mobile */
    .account-page-container {
      flex-direction: column;
    }

    .account-nav {
      margin-top: 0;
    }
  
    /* When active, show the nav */
    .account-nav.open {
      display: flex;
      flex-direction: column;
      max-height: 500px;
      margin-top: 0;
    }
  
    .account-sidebar {
      width: 100%;
      padding: 15px;
      position: relative;
      border-right: none;
      border-bottom: 1px solid #eaeaea;
      height: auto;
    }
  
    /* Adjust profile and greeting styles */
    .account-profile {
      margin-bottom: 20px;
    }
  
    .account-profile .account-greeting p,
    .account-profile .account-greeting h3 {
      font-size: 14px;
    }
  
    .account-nav__link, .logout_link {
      padding: 10px;
      font-size: 14px;
      gap: 10px;
    }
  
    /* Main content to take full width */
    .account-content {
      width: 100%;
      padding: 0;
    }

    .lion-tier-overview {
      overflow-x: scroll; /* Always show horizontal scrollbar */
      white-space: nowrap; /* Ensure content doesn't wrap */
      scrollbar-width: thin; /* Firefox: Make the scrollbar thin */
      scrollbar-color: #888 #f1f1f1; /* Firefox: Thumb and track color */
    }
    
    /* Webkit-based browsers (Chrome, Safari, Edge) */
    .lion-tier-overview::-webkit-scrollbar {
      height: 12px; /* Adjust scrollbar height */
    }
    
    .lion-tier-overview::-webkit-scrollbar-track {
      background: #f1f1f1; /* Background of the track */
    }
    
    .lion-tier-overview::-webkit-scrollbar-thumb {
      background-color: #888; /* Color of the scrollbar thumb */
      border-radius: 10px; /* Round the corners */
      border: 2px solid #f1f1f1; /* Space between the thumb and edge */
    }
    
    .lion-tier-overview::-webkit-scrollbar-thumb:hover {
      background: #555; /* Color when hovered */
    }

    .lion-tier-box {
      flex: 1 0 260px
    }

    .ll-TierOverview_TierIcon svg {
      width: 35px;
      height: 35px;
    }
  }

  /* Split section styles */
  .split-section {
    width: 100%;
    padding: 40px 0;
  }

  .split-section h2 {
    font-size: 2rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: #3b2a2f;
    text-align: center;
  }
  
  .split-section__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .split-section__left {
    flex: 1;
  }
  
  .split-section__left img {
    width: 100%;
    height: auto;
  }
  
  .split-section__right {
    flex: 1;
    padding-left: 40px;
  }
  
  .split-section__title {
    font-size: 2rem;
    margin-bottom: 20px;
  }
  
  .split-section__text {
    font-size: 1.125rem;
    margin-bottom: 30px;
  }

  .small-info-text {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.6);
  }
  
  .split-section__button {
    display: inline-block;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    border: 1px solid #333;
    border-radius: 30px;
    padding: 10px 20px;
  }
  
  .split-section__button:hover {
    background-color: #333;
    color: #fff;
  }
  
  /* Responsive design for smaller screens */
  @media (max-width: 768px) {
    .split-section__container {
      flex-direction: column;
    }
  
    .split-section__right {
      padding-left: 0;
      margin-top: 30px;
    }
  
    .split-section__title {
      font-size: 1.75rem;
    }
  
    .split-section__text {
      font-size: 1rem;
    }
  }
.custom-featured-logos {
  text-align: center;
  padding: 40px 0;
}

.custom-featured-logos__title {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.custom-featured-logos__container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.custom-featured-logos__logo {
  margin: 0 20px;
}

@media screen and (max-width: 640px) {
  .custom-featured-logos__logo {
    margin: 10px;
    width: 100px;
  }
}
.custom-flexible-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px;
}
.custom-flexible-content .custom-flexible-content__headline {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 30px;
}
.custom-flexible-content .custom-flexible-content__container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  
  /* Vertical alignment options */
  &.vertical-top {
    align-items: flex-start;
  }
  
  &.vertical-center {
    align-items: center;
  }
  
  &.vertical-bottom {
    align-items: flex-end;
  }
}
.custom-flexible-content .custom-flexible-content__left,
.custom-flexible-content .custom-flexible-content__right {
  flex: 1 1 50%;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* Multi-Product Grid Styling */
.custom-flexible-content .custom-flexible-content__multi-product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-content: center;
}

.custom-flexible-content .custom-flexible-content__multi-product-grid-item {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-flexible-content .custom-flexible-content__multi-product-grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.custom-flexible-content .custom-flexible-content__multi-product-grid-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 10px;
}

.custom-flexible-content .custom-flexible-content__multi-product-grid-image {
  display: flex;
  flex-shrink: 0;
  margin-right: 10px;
}

.custom-flexible-content .custom-flexible-content__multi-product-grid-image img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #f0f0f0;
}

.custom-flexible-content .custom-flexible-content__multi-product-grid-details {
  flex-grow: 1;
}

.custom-flexible-content .custom-flexible-content__multi-product-grid-title {
  margin: 0 0 5px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 18px;
}

.custom-flexible-content .custom-flexible-content__multi-product-grid-price {
  margin: 0;
  font-size: 0.8rem;
  color: #666;
}

/* Responsive adjustments */
@media screen and (max-width: 640px) {
  .custom-flexible-content .custom-flexible-content__multi-product-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* Margin options for text and product list */
.custom-flexible-content .custom-flexible-content__multi-product-text {
  margin-top: 0;
  margin-bottom: 0;
}

.custom-flexible-content .custom-flexible-content__text {
  margin-top: 0;
  margin-bottom: 0;
}

/* Basic styling for text block or single product */
.custom-flexible-content .custom-flexible-content__single-product {
  margin-bottom: 20px;
  text-align: center;
}
.custom-flexible-content .custom-flexible-content__single-product img {
  max-width: 100%;
  height: auto;
}

/* Responsive */
@media screen and (max-width: 640px) {
  .custom-flexible-content .custom-flexible-content__left,
  .custom-flexible-content .custom-flexible-content__right {
    flex: 1 1 100%;
    padding: 0;
  }
  
  /* Mobile Order Control */
  .custom-flexible-content .custom-flexible-content__container {
    flex-direction: column;
  }
  
  .custom-flexible-content .custom-flexible-content__first {
    order: -1;
  }
  
  .custom-flexible-content .custom-flexible-content__second {
    order: 1;
  }
  
  .custom-flexible-content .custom-flexible-content__multi-product-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
  }
  
  .custom-flexible-content .custom-flexible-content__multi-product-list::-webkit-scrollbar {
    display: none; /* WebKit */
  }
  
  .custom-flexible-content .custom-flexible-content__multi-product-item {
    flex-shrink: 0;
    width: 75px; /* Reduced width for 4 products */
  }
  
  .custom-flexible-content .custom-flexible-content__multi-product-item img {
    height: 75px; /* Reduced image size */
  }
  
  .custom-flexible-content .custom-flexible-content__multi-product-item p {
    font-size: 0.7em; /* Slightly smaller font */
  }
}
.custom-mission-section {
  text-align: center;
  margin: 30px auto;
  max-width: 1250px;
}
.custom-mission-section__headline {
  margin: 80px 0;
}
.custom-mission-section__content {
  padding: 50px 30px;
  border-radius: 8px;
}
.custom-mission-section__item {
  margin-bottom: 20px;
}
.custom-mission-section__button {
  margin: 30px 0;
  padding: 10px 30px;
  border: 1px solid #000000;
  border-radius: 30px;
  text-decoration: none;
  color: #000000;
  font-size: 16px;
  display: inline-block;
}
.custom-mission-section__button:hover {
  background-color: #000000;
  color: #ffffff;
}
.custom-newsletter-section {
  text-align: center;
  background-color: #faf8f5;
  padding: 40px 20%;
  border: 1px solid #e3e3e3;
  margin: 0 auto;
  max-width: 1450px;
}
.custom-newsletter-section__subheading {
  font-size: 1.25rem;
  margin-bottom: 10px;
}
.custom-newsletter-section__title {
  font-size: 2.5rem;
  margin-bottom: 20px;
}
.custom-newsletter-section__description {
  font-size: 1rem;
  margin-bottom: 20px;
}
.custom-newsletter-section__form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 440px;
  margin: 0 auto;
}
.custom-newsletter-section__input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}
.custom-newsletter-section__input {
  padding: 10px;
  border: none;
  border-bottom: 1px solid #d0c6be;
  flex: 1;
  color: #383333;
  background: none;
}
.custom-newsletter-section__input:focus {
  border: none;
  border-bottom: 1px solid black;
}
.custom-newsletter-section__input::placeholder {
  color: rgba(56, 51, 51, 0.75);
}
.custom-newsletter-section__button {
  padding: 10px 30px;
  border: 1px solid #000000;
  border-radius: 30px;
  text-decoration: none;
  color: #000000;
  font-size: 16px;
  cursor: pointer;
}
.custom-newsletter-section__button:hover {
  background-color: #000000;
  color: #ffffff;
}
.custom-newsletter-section__legal {
  font-size: 0.875rem;
  color: #a5a5a5;
  margin-top: 20px;
}
@media screen and (max-width: 640px) {
  .custom-newsletter-section {
    padding: 30px 20px;
    margin: 0 12px;
  }
  .custom-newsletter-section__title {
    font-size: 1.5rem;
  }
}
.custom-signup-section {
  text-align: center;
  background-color: #faf8f5;
  padding: 40px 20%;
  border: 1px solid #e3e3e3;
  margin: 0 auto;
  max-width: 1450px;
}
.custom-signup-section__subheading {
  font-size: 1.25rem;
  margin-bottom: 10px;
}
.custom-signup-section__title {
  font-size: 2.5rem;
  margin-bottom: 20px;
}
.custom-signup-section__description {
  font-size: 1rem;
  margin-bottom: 20px;
}
.custom-signup-section__form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 500px;
  margin: 0 auto;
}
.custom-signup-section__input-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  width: 100%;
}
.custom-signup-section__input-group .input-field {
  width: 48%;
}
.custom-signup-section__input {
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 1px solid #d0c6be;
  color: #383333;
  background: none;
  font-size: 16px;
}
.custom-signup-section__input:focus {
  border: none;
  border-bottom: 1px solid black;
  outline: none;
}
.custom-signup-section__input::placeholder {
  color: rgba(56, 51, 51, 0.75);
}
.custom-signup-section__full-width-input {
  width: 100%;
  padding: 10px 0;
  border: none;
  color: #383333;
  background: none;
  font-size: 16px;
  margin-bottom: 20px;
}
.custom-signup-section__full-width-input:focus {
  border: none;
  border-bottom: 1px solid black;
  outline: none;
}
.custom-signup-section__button {
  padding: 10px 22px;
  border: 1px solid #000000;
  border-radius: 30px;
  text-decoration: none;
  color: #000000;
  font-size: 16px;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.3s, color 0.3s;
}
.custom-signup-section__button:hover {
  background-color: #000000;
  color: #ffffff;
}
.custom-signup-section__legal {
  font-size: 0.875rem;
  color: #a5a5a5;
  margin-top: 20px;
}
/* Label for input fields */
.custom-signup-section__input-label {
  display: block;
  font-size: 16px;
  margin-bottom: 5px;
  text-align: left;
}
@media screen and (max-width: 640px) {
  .custom-signup-section {
    padding: 30px 20px;
    margin: 0 12px;
  }
  .custom-signup-section__button {
    font-size: 13px;
    padding: 7px 18px;
    margin-top: 20px;
  }
  .custom-signup-section__title {
    font-size: 1.5rem;
  }
  .custom-signup-section__input-group {
    flex-direction: column;
    margin-bottom: 0;
  }
  .custom-signup-section__input-group .input-field {
    width: 100%;
    margin-bottom: 15px;
  }
  .custom-signup-section__full-width-input {
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }
}

/* --- Custom Date Input Placeholder Styles --- */
.custom-date-wrapper {
  position: relative;
}
.custom-date-placeholder {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: rgba(56, 51, 51, 0.75);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.custom-testimonial-section {
  text-align: center;
  background-color: #ebe0d6;
  padding: 50px 0;
}

.custom-testimonial-section__stars {
  margin-bottom: 20px;
}

.custom-testimonial-section__content {
  max-width: 600px;
  margin: 0 auto;
}

.custom-testimonial-section__nav {
  margin-top: 20px;
}

.custom-testimonial-section__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d0c6be;
  margin: 0 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.custom-testimonial-section__dot.is-active {
  background-color: #383333;
}

@media screen and (max-width: 640px) {
  .custom-testimonial-section {
    font-size: 16px;
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media screen and (min-width: 641px) {
  .custom-testimonial-section {
    font-size: 20px;
  }
}

/* Scoped Flickity styles */
.custom-testimonial-section .flickity-enabled {
  position: relative;
}

body:not(.is-tabbing) .custom-testimonial-section .flickity-enabled:focus {
  outline: none;
}

.custom-testimonial-section .flickity-viewport {
  overflow: hidden;
  position: relative;
  height: auto;
}

.custom-testimonial-section .flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Draggable */
.custom-testimonial-section .flickity-enabled {
  -webkit-tap-highlight-color: transparent;
}

.custom-testimonial-section .flickity-enabled.is-draggable {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.custom-testimonial-section .flickity-enabled.is-draggable .flickity-viewport {
  cursor: -webkit-grab;
  cursor: grab;
}

.custom-testimonial-section .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* Previous/Next buttons */
.custom-testimonial-section .flickity-prev-next-button {
  position: absolute;
}

.custom-testimonial-section .flickity-prev-next-button[disabled] {
  opacity: 0;
}

.custom-testimonial-section .flickity-prev-next-button svg {
  width: auto;
  height: 18px;
  stroke-width: 1.5px;
  stroke: currentColor;
}

/* Page dots */
.custom-testimonial-section .flickity-page-dots {
  width: 100%;
  padding: 0;
  margin: 22px 0 0 0;
  list-style: none;
  text-align: center;
}

.custom-testimonial-section .flickity-page-dots .dot {
  position: relative;
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 6px;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-color);
  transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.custom-testimonial-section .flickity-page-dots .dot::before {
  position: absolute;
  content: "";
  top: -6px;
  right: -6px;
  left: -6px;
  bottom: -6px;
}

.custom-testimonial-section .flickity-page-dots .dot.is-selected {
  background: currentColor;
  border-color: currentColor;
}

@media screen and (min-width: 641px) {
  .custom-testimonial-section .flickity-page-dots .dot {
    width: 10px;
    height: 10px;
    margin: 0 7px;
    border-width: 2px;
  }
}

/* Keyframes for animation */
@keyframes testimonialOpening {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes testimonialClosing {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Testimonial styles */
.custom-testimonial-section .Testimonial {
  text-align: center;
  font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 18px));
}

.custom-testimonial-section .Testimonial__Logo {
  margin-top: 54px;
}

.js .custom-testimonial-section .TestimonialList {
  opacity: 0;
  transition: opacity 0s linear 0.5s;
}

.js .custom-testimonial-section .TestimonialList.flickity-enabled {
  opacity: 1;
}

.js .custom-testimonial-section .TestimonialList .flickity-viewport {
  overflow: visible;
}

.js .custom-testimonial-section .TestimonialList .flickity-page-dots {
  position: relative;
  margin-top: 60px;
}

.js .custom-testimonial-section .TestimonialList .Testimonial {
  opacity: 0;
  pointer-events: none;
  animation: testimonialClosing 0.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

.js .custom-testimonial-section .TestimonialList .Testimonial.is-selected {
  opacity: 1;
  pointer-events: auto;
  animation: testimonialOpening 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@media screen and (max-width: 640px) {
  .custom-testimonial-section .Testimonial__Logo {
    max-width: 110px;
  }
}

@media screen and (min-width: 641px) {
  .custom-testimonial-section .Testimonial {
    font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 20px));
  }

  .custom-testimonial-section .Testimonial__Content {
    max-width: 550px;
    margin: 0 auto;
  }

  .custom-testimonial-section .Testimonial__Logo,
  .custom-testimonial-section .TestimonialNav__Item {
    max-width: 150px;
  }
}

@media screen and (min-width: 1008px) {
  .custom-testimonial-section .TestimonialList--withNav .flickity-page-dots {
    display: none;
  }

  .custom-testimonial-section .TestimonialNav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
  }

  .custom-testimonial-section .TestimonialNav__Item {
    margin: 0 25px;
    cursor: pointer;
    opacity: 0.25;
    transition: opacity 0.2s ease-in-out;
    will-change: opacity;
  }

  .custom-testimonial-section .TestimonialNav__Item.is-selected {
    opacity: 1;
  }
}

@media screen and (min-width: 1140px) {
  .custom-testimonial-section .TestimonialNav__Item {
    margin: 0 45px;
  }
}

/* Carousel styles */
.custom-testimonial-section .Carousel {
  position: relative;
}

.custom-testimonial-section .Carousel--fixed,
.custom-testimonial-section .Carousel--fixed .flickity-viewport,
.custom-testimonial-section .Carousel--fixed .Carousel__Cell {
  height: 100%;
}

/* Hide non-selected cells until slider is loaded */
.custom-testimonial-section .Carousel:not(.flickity-enabled) .Carousel__Cell:not(.is-selected) {
  display: none;
}

.custom-testimonial-section .Carousel__Cell {
  display: block;
  width: 100%;
}

.js .custom-testimonial-section .Carousel--fadeIn .flickity-slider {
  transform: none !important;
}

.js .custom-testimonial-section .Carousel--fadeIn .Carousel__Cell {
  left: 0 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.js .custom-testimonial-section .Carousel--fadeIn .Carousel__Cell.is-selected {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.custom-testimonial-section .Carousel--insideDots .flickity-page-dots {
  position: absolute;
  width: auto;
  margin: 0;
  bottom: 20px;
  left: 20px;
}

.custom-testimonial-section .Carousel--insideDots .flickity-page-dots .dot {
  border-color: currentColor;
}

.custom-testimonial-section .Carousel--insideDots .flickity-page-dots .dot.is-selected {
  background: currentColor;
}

.custom-testimonial-section .Carousel--insideDots .flickity-prev-next-button {
  bottom: -25px;
  z-index: 1;
}

.custom-testimonial-section .Carousel--insideDots .flickity-prev-next-button.next {
  right: 25px;
}

.custom-testimonial-section .Carousel--insideDots .flickity-prev-next-button.previous {
  right: 75px;
  margin-right: 15px;
}

@media screen and (min-width: 1008px) {
  .custom-testimonial-section .Carousel--insideDots .flickity-page-dots {
    bottom: 28px;
    right: 24px;
    left: auto;
  }
}
.my-video-section {
  text-align: center;
}

.my-video-section__heading {
  margin-bottom: 50px;
}

.my-video-section__description {
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.my-video-section__container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.my-video-section__container::-webkit-scrollbar {
  display: none;
}

.my-video-section__video-wrapper {
  flex-shrink: 0;
  scroll-snap-align: start;
  position: relative;
  width: calc(100% - 40px);
  max-width: 500px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #000;
}

/* Aspect Ratio Container */
.my-video-section__aspect-ratio {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Aspect Ratio Classes */
.aspect-ratio-16-9 { padding-top: 56.25%; } /* 16:9 */
.aspect-ratio-9-16 { padding-top: 177.78%; } /* 9:16 */
.aspect-ratio-4-3 { padding-top: 75%; } /* 4:3 */
.aspect-ratio-1-1 { padding-top: 100%; } /* 1:1 */

/* Mobile Sneak Peek */
@media only screen and (max-width: 640px) {
  .my-video-section__heading {
    margin-bottom: 30px;
  }
  
  .my-video-section__container {
    padding: 0 40px 0 40px; /* Equal padding on both sides */
    scroll-padding-left: 40px; /* Ensure scroll respects left padding */
  }

  .my-video-section__video-wrapper {
    width: calc(90% - 20px);
    margin-right: 20px;
  }

  .my-video-section__video-wrapper:last-child {
    margin-right: 0; /* Remove margin from last video */
  }
}

/* Desktop */
@media only screen and (min-width: 641px) {
  .my-video-section__container {
    justify-content: center;
    flex-wrap: wrap;
  }

  .my-video-section__video-wrapper {
    width: calc(25% - 20px);
    max-width: 300px;
  }
}

.my-video-section__aspect-ratio > *,
.my-video-section__video,
.my-video-section__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.my-video-section__video {
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
  object-fit: cover;
}

.my-video-section__video.active {
  opacity: 1;
}

.my-video-section__overlay {
  z-index: 2;
  transition: opacity 0.3s ease;
}

.my-video-section__overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.my-video-section__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.my-video-section__play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.6);
  border-radius: 50%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-video-section__play-button svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}
.index-section.hotspot-slider-section {
  margin-bottom: 60px;
  padding-bottom: 60px;
  position: relative;
  z-index: 1;
}

.hotspot-slider-section + .index-section {
  margin-top: 60px;
}

.hotspot-slider-section .hotspot-slideshow {
  position: relative;
  width: 100%;
  {% if section.settings.background_color != 'transparent' %}
    background-color: {{ section.settings.background_color }};
  {% else %}
    background: transparent;
  {% endif %}
}

/* Navigation arrows positioned in center of section */
.hotspot-slider-section .hotspot-slideshow .flickity-prev-next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  color: white;
}

.hotspot-slider-section .hotspot-slideshow .flickity-prev-next-button:hover {
  background: rgba(0, 0, 0, 0.9);
}

.hotspot-slider-section .hotspot-slideshow .flickity-prev-next-button[disabled] {
  opacity: 0.3;
  cursor: default;
}

.hotspot-slider-section .hotspot-slideshow .flickity-prev-next-button.previous {
  left: 20px;
}

.hotspot-slider-section .hotspot-slideshow .flickity-prev-next-button.next {
  right: 20px;
}

.hotspot-slider-section .hotspot-slideshow .flickity-button-icon {
  fill: white;
}

/* Navigation dots properly centered */
.hotspot-slider-section .hotspot-slideshow .flickity-page-dots {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 1;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hotspot-slider-section .hotspot-slideshow .flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background-color: #d0d0d0;
  border-radius: 50%;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 0.3s;
}

.hotspot-slider-section .hotspot-slideshow .flickity-page-dots .dot.is-selected {
  opacity: 1;
  background-color: #333;
}

@media only screen and (max-width: 768px) {
  .hotspot-slider-section .hotspot-slideshow .flickity-prev-next-button {
    width: 36px;
    height: 36px;
  }
  
  .hotspot-slider-section .hotspot-slideshow .flickity-prev-next-button.previous {
    left: 10px;
  }
  
  .hotspot-slider-section .hotspot-slideshow .flickity-prev-next-button.next {
    right: 10px;
  }
  
  .hotspot-slider-section .hotspot-slideshow .flickity-page-dots {
    bottom: 10px; /* Position dots inside the slider on mobile */
    background: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    border-radius: 20px;
  }
}

.hotspot-slider-section .slideshow__slide {
  width: 100%;
  position: relative;
  height: auto;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 1;
}

.hotspot-slider-section .slideshow__slide * {
  visibility: visible !important;
  opacity: 1 !important;
}

.hotspot-slider-section .slideshow__slide .hotspot-slide-inner {
  position: relative;
  width: 100%;
  height: auto;
}

.hotspot-slider-section .slideshow__slide .hotspots {
  position: relative;
  width: 100%;
  height: auto;
  display: block !important;
}

.hotspot-slider-section .slideshow__slide .hotspots-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  display: block !important;
}

.hotspot-slider-section .slideshow__slide .hotspots__image {
  position: relative;
  height: auto;
}

.hotspot-slider-section .slideshow__slide .hotspots__image .image-wrap {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
}

.hotspot-slider-section .hotspot-slide-image {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  object-fit: contain;
}

.hotspot-slider-section .slideshow__slide .hotspot-slide__title {
  text-align: center;
  margin-bottom: 20px;
}

/* Two-column layout with equal heights */
.hotspot-slider-section .hotspot-slide-layout {
  display: flex;
  align-items: stretch; /* Make both sides equal height */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  min-height: 500px; /* Ensure minimum height */
}

/* Left side: Image with hotspots */
.hotspot-slider-section .hotspot-slide-layout__image {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  box-sizing: border-box;
  position: relative;
}

.hotspot-slider-section .hotspot-slide-layout__image .hotspots-wrapper {
  width: 100%;
  height: auto;
}

.hotspot-slider-section .hotspot-slide-layout__image .hotspots {
  width: 100%;
  height: auto;
  position: relative;
}

.hotspot-slider-section .hotspot-slide-layout__image .hotspots__image {
  position: relative;
  width: 100%;
}

.hotspot-slider-section .hotspot-slide-layout__image .grid__image-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* Square aspect ratio */
  overflow: hidden;
}

.hotspot-slider-section .hotspot-slide-layout__image .grid__image-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right side: Product content */
.hotspot-slider-section .hotspot-slide-layout__products {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  box-sizing: border-box;
  padding-left: 30px; /* Gap between sections */
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Dynamic 2x2 product grid that matches image height */
.hotspot-slider-section .hotspot-slide-layout__products .hotspots__content {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
  padding: 10px !important;
  box-sizing: border-box;
}

/* Show all products in grid - scale to fit grid cells */
.hotspot-slider-section .hotspot-slide-layout__products .hotspots__content .hotspot-content__block {
  display: flex !important;
  flex-direction: column !important;
  height: 100%; /* Fill grid cell */
  overflow: hidden;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Override default hotspot hiding behavior */
  max-height: none !important;
  animation: none !important;
  position: relative !important;
  top: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 8px; /* Add some internal padding */
}

.hotspot-slider-section .hotspot-slide-layout__products .hotspots__content .hotspot-content__block:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Reset all theme product styling for clean grid */
.hotspot-slider-section .hotspot-slide-layout__products .hotspot-product-item {
  width: 100% !important;
  height: 100% !important; /* Fill parent container */
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
}

/* Override theme's horizontal layout for hotspot products */
.hotspot-slider-section .hotspot-slide-layout__products .grid-product__link,
.hotspot-slider-section .hotspot-slide-layout__products .grid-product__link--inline {
  height: 100% !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column;
}

.hotspot-slider-section .hotspot-content__block .grid-product__image-mask,
.hotspot-slider-section .hotspot-content__block .grid-product__image-wrap {
  height: 100% !important;
}

.hotspot-slider-section .template-product .show_more_colors {
  display: none !important;
}

.hotspot-slider-section .product-block {
  margin-bottom: 0 !important;
  display: flex;
  justify-content: center;
}

.hotspot-slider-section .hotspot-slide-layout__products .grid__item {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.hotspot-slider-section .hotspot-slide-layout__products .grid-product__content {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  justify-content: space-between !important;
  gap: 10px;
}

/* Image container with controlled size */
.hotspot-slider-section .hotspot-slide-layout__products .hotspot-content__block .grid-product__image-mask,
.hotspot-slider-section .hotspot-slide-layout__products .hotspot-content__block .grid-product__image-wrap {
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  display: block !important;
  float: none !important;
  flex: 1 1 auto !important; /* Let image grow to fill space */
}

/* Maintain proper aspect ratios for product images */
.hotspot-slider-section .hotspot-slide-layout__products .grid__image-ratio {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* Remove aspect ratio constraint to let image fill available space */
.hotspot-slider-section .hotspot-slide-layout__products .grid__image-ratio:before {
  display: none !important;
}

.hotspot-slider-section .hotspot-slide-layout__products .grid__image-ratio {
  border-radius: 8px;
  overflow: hidden !important;
  width: 100% !important;
  background-color: #f5f5f5; /* Light background for loading */
}

.hotspot-slider-section .hotspot-slide-layout__products .grid__image-ratio img,
.hotspot-slider-section .hotspot-slide-layout__products .grid-product__image img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Cover for better visual appearance */
  max-width: none !important;
}

/* Proportional text styling that scales with container */
.hotspot-slider-section .hotspot-slide-layout__products .grid-product__meta {
  padding: 5px 0 0 0 !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  position: relative !important;
  flex: 0 0 auto !important;
}

.hotspot-slider-section .hotspot-slide-layout__products .grid-product__title {
  margin: 0 0 3px 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  overflow: hidden;
  display: -webkit-box !important;
  -webkit-line-clamp: 2; /* Max 2 lines */
  -webkit-box-orient: vertical;
  font-weight: 400;
  text-align: center !important;
}

.hotspot-slider-section .hotspot-slide-layout__products .grid-product__price {
  margin: 0 0 3px 0 !important;
  font-size: 12px !important;
  font-weight: 500;
  display: block !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* Variant swatches styling - force display even with single variant */
.hotspot-slider-section .hotspot-slide-layout__products .grid-product__colors {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 3px !important;
  flex-wrap: wrap !important;
  visibility: visible !important;
  opacity: 1 !important;
  line-height: 1 !important;
}

/* Override theme's hiding of single color products */
.hotspot-slider-section .hotspot-slide-layout__products .grid-product__colors[class*="grid-product__colors--"] {
  display: flex !important;
}

.hotspot-slider-section .hotspot-slide-layout__products .grid-product__colors .color-swatch,
.hotspot-slider-section .hotspot-slide-layout__products .grid-product__colors .color-swatch--small,
.hotspot-slider-section .hotspot-slide-layout__products .grid-product__colors-item {
  width: 12px !important;
  height: 12px !important;
  display: inline-block !important;
  border-radius: 50% !important;
  position: relative !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Phones only - single column */
@media screen and (max-width: 480px) {
  .hotspot-slider-section .hotspot-slide-layout__products .hotspots__content {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

@media screen and (max-width: 768px) {
  /* Remove extra spacing on mobile */
  .index-section.hotspot-slider-section {
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
  }
  
  /* Mobile stacked layout with dynamic sizing */
  .hotspot-slider-section .hotspot-slide-layout {
    flex-direction: column;
    gap: 20px;
    padding: 0; /* Remove padding to align with viewport edges */
    min-height: auto;
    height: auto;
  }
  
  .hotspot-slider-section .hotspot-slide-layout__image {
    flex: none;
    width: 100%;
    max-width: 100%;
    order: 1;
    margin-bottom: 10px;
  }
  
  .hotspot-slider-section .hotspot-slide-layout__products {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    order: 2;
    /* Dynamic height based on content */
    min-height: auto;
    height: auto;
  }
  
  /* Ensure mobile images are visible */
  .hotspot-slider-section .hotspot-slide-layout__image .hotspots__image {
    height: auto;
    position: relative;
  }
  
  .hotspot-slider-section .hotspot-slide-layout__image .grid__image-ratio {
    padding-bottom: 100%; /* Maintain square aspect ratio on mobile */
  }
  
  .hotspot-slider-section .hotspot-slide-layout__image .grid__image-ratio img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .hotspot-slider-section .hotspot-slide-image {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  
  /* Adaptive slide height based on content */
  .hotspot-slider-section .slideshow__slide {
    min-height: auto;
    height: auto;
  }
  
  /* Mobile: Show 2x2 grid on tablets, single column on phones */
  .hotspot-slider-section .hotspot-slide-layout__products .hotspots__content {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 15px !important;
    padding: 0 !important; /* Remove padding to align with image edges */
    margin: 0;
  }
  
  /* Ensure product images have proper height on mobile */
  .hotspot-slider-section .hotspot-slide-layout__products .grid__image-ratio {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 100% !important; /* Square aspect ratio */
    overflow: hidden !important;
  }
  
  .hotspot-slider-section .hotspot-slide-layout__products .grid__image-ratio:before {
    content: "";
    display: block !important;
    padding-bottom: 100% !important;
  }
  
  .hotspot-slider-section .hotspot-slide-layout__products .grid__image-ratio img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* Override desktop flex settings for mobile */
  .hotspot-slider-section .hotspot-slide-layout__products .hotspot-content__block .grid-product__image-mask,
  .hotspot-slider-section .hotspot-slide-layout__products .hotspot-content__block .grid-product__image-wrap {
    flex: none !important;
    height: auto !important;
  }
  
  .hotspot-slider-section .hotspot-slide-layout__products .hotspot-product-item {
    width: 100%;
    max-width: none;
    height: auto !important;
  }
  
  /* Reset heights for mobile product cards */
  .hotspot-slider-section .hotspot-slide-layout__products .grid-product__content {
    height: auto !important;
    gap: 5px !important;
  }
  
  .hotspot-slider-section .hotspot-slide-layout__products .hotspot-content__block {
    height: auto !important;
  }
  
  .hotspot-slider-section .hotspot-slide-layout__products .grid-product__link,
  .hotspot-slider-section .hotspot-slide-layout__products .grid-product__link--inline {
    height: auto !important;
  }

  .hotspot-slider-section .grid:after {
    display: none;
  }
}
/* Key Facts Horizontal Section Styles */

  .Product__Benefits {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: #eee;
    padding: 15px 0;
  }

  .BenefitsCarousel {
    overflow: hidden;
    width: 100%;
  }

  .Benefits {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
  }

  .BenefitItem {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    min-width: 120px;
    padding: 0 20px;
  }

  .BenefitItem__Text {
    color: #171717b3;
    font-size: 14px;
    line-height: 1.2;
  }

  /* Hide scrollbar */
  .BenefitsCarousel::-webkit-scrollbar {
    display: none;
  }
  .BenefitsCarousel {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* Responsive Adjustments */
  @media screen and (min-width: 1008px) {
    .Benefits {
      transform: none !important;
      justify-content: center;
      gap: 50px;
    }

    .BenefitItem {
      flex-direction: row;
      align-items: center;
      min-width: unset;
    }

    .BenefitItem__Icon {
      margin-bottom: 0;
      margin-right: 8px;
      display: flex;
    }

    .BenefitItem__Text {
      font-size: 17px;
      text-align: left;
    }
  }
.newsletter-section p {
	line-height: 1.4;
	margin: 0;
}

.newsletter-section p.h3 {
font-size: 26px;
line-height: 1.4em;
letter-spacing: .035em;
font-weight: 600;
margin-bottom: 10px;
}
.theme-block .rte p,
  .theme-block .rte strong,
  .theme-block {
    margin: 0;
  }

  /* Text alignment classes */
  .text-left {
    text-align: left;
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .text-justify {
    text-align: justify;
  }

  /* Example styling for headings based on section text alignment */
  .text-{{ section.settings.align_text }} .theme-block h2 {
    margin-bottom: 7.5px;
  }
/* --- Discount Badge Styling --- */
.discount-badge {
  display: inline-block;
  background: #FDA3A7;
  color: #FFFFFF;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* --- START: Custom Full-Width Styling --- */

/* --- DESKTOP FIXES (screens wider than 768px) --- */
@media only screen and (min-width: 769px) {
  /* 1. Remove horizontal margins to make the row full-width */
  .feature-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 40px; /* Creates a clean gap between image and text */
  }

  /* 2. Remove old padding from the text block */
  .feature-row__text--left {
    padding-left: 0;
  }
  .feature-row__text--right {
    padding-right: 0;
  }

  /* 3. Compensate for the image overlap 'transform' to pull it to the edge */
  .feature-row__item--overlap-images:first-child {
    margin-left: -50px;
  }
  .feature-row__item--overlap-images:last-child {
    margin-right: -50px;
  }
}

/* 4. Remove centering margin from the image container on all screen sizes */
.feature-row__item {
  margin: 0;
}


/* --- MOBILE FIXES (screens 768px and smaller) --- */
@media only screen and (max-width: 768px) {
  /* 5. Add 10px padding to the image container */
  .feature-row__item {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box; /* IMPORTANT: This ensures padding is inside the 100% width */
  }

  /* 6. Reset desktop overlap styles that break mobile layout */
  .feature-row__item--overlap-images {
    margin: 0; /* Removes the negative left margin */
  }

  /* THIS IS THE UPDATED LINE */
  /* 7. Reset horizontal shift but keep vertical overlap */
  .feature-row__item--overlap-images > :first-child {
    transform: translate(0, 30px); /* Removes horizontal shift, keeps vertical */
  }
}

/* --- END: Custom Full-Width Styling --- */

.feature-row__item .subheading {
  letter-spacing: .035em;
}
@media only screen and (max-width: 768px) {
  /*div.feature-row__item {
    text-align: center !important;
  }*/
  .btn-box {
    text-align: center;
  }
}
.feature-row .subheading {
  margin-bottom: 7.5px;
}
.feature-row__item .h1 {
  margin: 0;
}

.feature-row__item.feature-row__text.aos-init.aos-animate p {
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .index-section .full-mobile {
    padding: 0 !important;
  }
  .feature-row__item .h1 {
    letter-spacing: .035em;
  }
  .feature-row__text {
    padding: 30px 10px 0 !important;
  }
}
/* --- START: Custom Full-Width Styling --- */

/* --- DESKTOP FIXES (screens wider than 768px) --- */
@media only screen and (min-width: 769px) {
  /* 1. Remove horizontal margins to make the row full-width */
  .feature-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 40px; /* Creates a clean gap between video and text */
  }

  /* 2. Remove old padding from the text block */
  .feature-row__text--left {
    padding-left: 0;
  }
  .feature-row__text--right {
    padding-right: 0;
  }

  /* 3. Compensate for the video overlap 'transform' to pull it to the edge */
  .feature-row__item--overlap-videos:first-child {
    margin-left: -50px;
  }
  .feature-row__item--overlap-videos:last-child {
    margin-right: -50px;
  }
}

/* 4. Remove centering margin from the video container on all screen sizes */
.feature-row__item {
  margin: 0;
}

/* Video specific styles */
.feature-row__video {
  width: 100%;
  height: auto;
}

.video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* 1:1 aspect ratio (square) */
  height: 0;
  overflow: hidden;
}

.video-wrap video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- MOBILE FIXES (screens 768px and smaller) --- */
@media only screen and (max-width: 768px) {
  /* 5. Remove custom padding - let page-width handle standard 17px padding */
  .feature-row__item {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  /* 6. Reset desktop overlap styles that break mobile layout */
  .feature-row__item--overlap-videos {
    margin: 0; /* Removes the negative left margin */
  }

  /* 7. Reset horizontal shift but keep vertical overlap */
  .feature-row__item--overlap-videos > :first-child {
    transform: translate(0, 30px); /* Removes horizontal shift, keeps vertical */
  }
}

/* --- END: Custom Full-Width Styling --- */

.feature-row__item .subheading {
  letter-spacing: .035em;
}
@media only screen and (max-width: 768px) {
  /*div.feature-row__item {
    text-align: center !important;
  }*/
  .btn-box {
    text-align: center;
  }
}
.feature-row .subheading {
  margin-bottom: 7.5px;
}
.feature-row__item .h1 {
  margin: 0;
}

.feature-row__item.feature-row__text.aos-init.aos-animate p {
  margin: 0;
}
@media only screen and (max-width: 768px) {
  .index-section .full-mobile {
    padding: 0 !important;
  }
  .feature-row__item .h1 {
    letter-spacing: .035em;
  }
  .feature-row__text {
    padding: 30px 0 0 !important;
  }
}
#shopify-section-footer-promotions {
    display: none;
  }
#arrow_trigger {
  width: 40px;
  background: lightgray;
  border-radius: 25px;
  margin: 100px 30px;
}
.tabbed_content-section_wrapper {
  display: flex;
  flex-direction: row;
}
.tabbed-image_wrapper {
  width: 40%;
  height: auto;
  display: flex;
  justify-content: center;
}
.tabbed-image {
  align-self: center;
  padding: 15px 0 15px;
}
.tabbed-content_wrapper {
  width: 60%;
  padding-right: 25px;
}
.tab {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid lightgrey;
  color: gray;
  padding-top: 15px;
}
.tab button {
  background-color: inherit;
  cursor: pointer;
  padding: 5px;
}
.tab button:hover {
  color: black;
}
.tab button.active {
  border-bottom: 2px solid black;
  color: black;
}
.tabcontent {
  display: none;
  padding-top: 25px;
  min-height: 450px;
}
.h3.tablinks {
  margin-bottom: 0;
}
.tabbed-content {
  width: 100%;
}
.tabcontent ul {
  list-style: disc;
  margin-left: 1rem;
}
.tabbed-content_wrapper-button {
  display: flex;
}
@media only screen and (max-width: 767px) {
  .tabbed_content-section_wrapper {
    flex-direction: column;
  }
  .tabbed-image_wrapper,
  .tabbed-content_wrapper {
    width: 100%;
    margin-top: 1rem;
  }
  #arrow_trigger {
    margin: 25px 0 25px 10px;
  }
  .tabbed-content_wrapper {
    padding-right: 0;
  }
  .tabcontent {
    min-height: auto;
  }
  .tabcontent h3 {
    font-size: 14px;
  }
  .tabcontent h2 {
    font-size: 18px;
  }
  #read_more,
  #read_more2,
  #read_more3 {
    min-height: 200px;
  }
}
#read_more,
#read_more2,
#read_more3,
.read_less {
  text-transform: uppercase;
  margin: 10px 0;
  font-weight: 600;
  cursor: pointer;
}
#tab1_content,
#tab2_content,
#tab3_content {
  background-image: linear-gradient(to bottom, black 75%, transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}