.header-logo, .header-cart {
    width: 20%;
}

.header-cart {
    flex-grow: unset;
}

.search-header-bar {
    height: 100px;
}

.search-header-bar > * {
    height: 100%;
}

.search-input > div {
    width: 100%;
}

.search-input-icon {
    position: absolute;
    font-size: 22px;
    top: 8px;
    left: 4px;
}


.rtl .search-input-icon {
    left: unset;
    right: 4px;
    top: 9px;
}

.search-input-input {
    padding-left: 30px;
    min-height: 40px;
    max-height: 40px;
}

.rtl .search-input-input {
    padding-left: inherit;
    padding-right: 30px;
}


.icon-shopping_cart_black_36dp-1-1, .sm-search-icon > span {
    font-size: 32px;
}

.icon-shopping_cart_black_36dp-1-1 .path1:before {
    color: unset;
}

.icon-shopping_cart_black_36dp-1-1 .path2:before {
    color: unset;
}

.icon-language_black_24dp .path1:before {
    color: unset;
}

.cart-badge {
    position: absolute;
    right: 20px;
    top: -8px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    background-color: #AB0000;
}

.rtl .cart-badge {
    right: unset;
    left: 20px;
}

.top-main-menu-wrapper {
    margin-right: -22px;
    margin-left: -22px;
}

.ic.menu{
    text-align: left;
    position: relative;
    right: 4px;
}

.rtl .ic.menu{
    text-align: right;
    right: unset;
    left: 4px;
}

.ic.menu, .sm-search-icon {
    margin-right: 20px;
}

.icon-menu-top {
    margin-right: 10px !important;
}

.rtl .ic.menu, .sm-search-icon {
    margin-right: unset;
    margin-left: 20px;
}

.rtl .icon-menu-top {
    margin-right: unset !important;
    margin-left: 10px !important;
}

.icon-menu-top > span {
    font-size: 32px;
}

.icon-menu_open_black_24dp-1:before {
    color: unset;
}


.sm-search-div {
    display: none;
    visibility: hidden;
    position: absolute;
    left: 0;
    padding: 0px 15px 20px 15px;
    width: 100%;
    background-color: var(--header-primary-color, var(--primary-color));
    transform: translateY(-100%);
    transition: all .3s ease;
    z-index: 1;
}

.sm-search-div.show {
    visibility: visible;
    transform: translateY(0%);
    -webkit-transform:translate3d(0,0,0);
}

.footer .apps-social-icons:nth-child(2) {
    padding-left: 0px;
}

.rtl .footer .apps-social-icons:nth-child(2) {
    padding-right: 0px;
    padding-left: 15px;
}

.footer .google-app-stores {
    margin-left: -4px;
    margin-right: -4px;
}

.footer .icons-wrapper {
    padding: 0px;
}

.footer-about-us-links-div {

}


.footer-about-us-div {
    padding-right: 20%;
}

.rtl .footer-about-us-div {
    padding-right: unset;
    padding-left: 20%;
}

.slick-dotted.slick-slider {
    margin-bottom: 0px;
}

.main-slider .slick-dots {
    bottom: 12px;
}

.main-slider .slick-dots li button:before {
    font-size: 14px;
}

.features-section-img {
    max-height: 90px;
    max-width: 90px;
}

.slick-next.slick-arrow > span, .slick-prev.slick-arrow > span {
    color: var( --primary-color);
    font-size: 3.3rem;
}

.category-item a, .category-item img, .card-item a, .card-item img {
    display: block;
    text-align: center;
    width: 100%;
}

.category-item img, .card-item img {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.category-item h3, .card-item h3 {
    margin-top: 15px;
    font-size: 1.6rem;
    font-weight: 400;
    text-align: center;
    color: var( --primary-color);
    white-space: break-spaces;
}

.category-page-slider .category-item h3 {
    font-size: 1.2rem;
}

.categories-slider .category-item,
.cards-slider .card-item {
    width: 100%;
    max-width: 200px;
}

.slider-container {
    padding-left: 15px;
    padding-right: 15px;
}
.main-slider .slider-item {

}

.section-title {
    padding-left: 0px;
    padding-right: 0px;
}

.products-slider .prod-col, .categories-slider .cat-col, .cards-slider .card-col {
    padding-left: 15px;
    padding-right: 15px;
    display: block;
    width: auto;
}

.category-page-slider .categories-slider.s-slider {
    margin-right: -15px;
    margin-left: -15px;
}

.category-page-slider .home-categories-section .section-title {
    margin-right: -15px;
    margin-left: -15px;
}

.category-page-slider .products-slider .prod-col, .categories-slider .cat-col, .cards-slider .card-col {
    padding-left: 15px;
    padding-right: 15px;
}

.categories-slider-wrapper, .products-slider-wrapper, .cards-slider-wrapper, .testimonials-slider-wrapper, .partners-slider-wrapper  {
    margin-right: -15px;
    margin-left: -15px;
}

.products-list .prod-col, .bundle-offer-products .prod-col{
    width: 20%;
    padding: 15px;
}

.products-list .prod-col-attr{
    width: 25%;
}

/* Propagate Bootstrap row's stretch height so all action buttons align */
.products-list .prod-col,
.bundle-offer-products .prod-col {
    display: flex;
    flex-direction: column;
}

.products-list .prod-col .product-item,
.bundle-offer-products .prod-col .product-item {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.products-list .prod-col .product-item > a,
.bundle-offer-products .prod-col .product-item > a {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.products-list .product-card-footer,
.bundle-offer-products .product-card-footer {
    margin-top: auto;
}

.sort-block-width {
    margin-left: 30px;
}

.rtl .sort-block-width {
    margin-left: 0px;
    margin-right: 30px;
}

.select-dropdown .dropdown-item {
    padding-bottom: 7.5px;
    padding-top: 7.5px;
}

#products-list-filter-form-close {
    width: 44px;
    height: 44px;
    position: absolute;
    right: 0;
    top:0;
}

.rtl #products-list-filter-form-close {
    right: unset;
    left: 0;
}

.products-pagination {
    margin-bottom: 24px;
    padding: 0 15px;
}

.products-pagination ul  {
    padding: 0px;
}

.products-pagination .page-link {
    color: var( --primary-color);
    font-size: 1.2rem;
}

.products-pagination .page-link.active {
    color: #ffffff;
    background-color: var( --primary-color);
}

.rtl .products-pagination .page-item:first-child .page-link {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


.rtl .products-pagination .page-item:last-child .page-link {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.products-container .products-list {
    margin-bottom: 24px;
}

.cart-header-total {
    margin-right: 10px;
    font-size: 1.6rem;
    color: var(--header-text-color-primary-bg, var(--text-color-primary-bg));
}

.rtl .cart-header-total {
    margin-right: unset;
    margin-left: 10px;
}

.form-control {
    border-radius: 3px;
}


.box-1-1 {
    position: relative;
    width:    100%;
}

.box-1-1:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.box-1-1 .content {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.box-1-1.ratio2_1:before{
    padding-top: 50%;
}
.box-1-1.ratio1_2:before{
    padding-top: 200%;
}
.box-1-1.ratio4_3:before{
    padding-top: 75%;
}
.box-1-1.ratio16_9:before{
    padding-top: 56.25%;
}

.box-1-1.ratio21_9:before{
    padding-top: 42.85%;
}

.product-item-out-of-stock {
    filter: grayscale(1);
}


.sm-search-div .autocomplete-items, .lg-search-div .autocomplete-items{
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.sm-search-div .autocomplete-items div, .lg-search-div .autocomplete-items div {
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.sm-search-div .autocomplete-items div:hover, .lg-search-div .autocomplete-items div:hover {
    background-color: #e9e9e9;
}

.sm-search-div .autocomplete-items div a, .lg-search-div .autocomplete-items div a {
    padding: 10px;
    cursor: pointer;
    color: inherit;
    display: block;
}

.product-crd-spec {
    min-height: 81px;
}

.gallery-section + .gallery-section {
    padding-top: 0px;
}

.ic-menu-back {
    font-size: 22px;
    margin-right: 16px;
    font-weight: bold;
}

.rtl .ic-menu-back {
    margin-right: unset;
    margin-left: 16px;
}

@media (max-width: 768px) {
    .header-cart {
        flex-grow: 1;
        width: 30%;
    }

    .header-logo {
        width: 70%;
    }

    .search-header-bar {
        height: 64px;
    }


    .footer .apps-social-icons:nth-child(2) {
        padding-left: 15px;
    }

    .rtl .footer .apps-social-icons:nth-child(2) {
        padding-right: 15px;
        padding-left: 15px;
    }

    .footer .icons-wrapper {
        padding-bottom: 10px;
        padding-top: 10px;
    }

    .footer-about-us-div {
        padding-right: 0;
    }

    .rtl .footer-about-us-div {
        padding-right: unset;
        padding-left: 0;
    }

    .category-page-slider .categories-slider {
        height: 225px;
    }

    .categories-slider .category-item, .cards-slider .card-item {
        width: 190px;
    }

    .category-page-slider .categories-slider .category-item {
        width: 165px;
    }

    .category-page-slider .categories-slider.s-slider {
        margin-right: -7.5px;
        margin-left: -7.5px;
    }

    .category-page-slider .products-slider .prod-col, .categories-slider .cat-col, .cards-slider .card-col {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }

    .products-slider .prod-col, .categories-slider .cat-col, .cards-slider .card-col, .testimonials-slider .testimonials-customer-card , .partners-slider .partners-item {
        display: inline-block;
        vertical-align: top;
    }

    .partners-slider .partners-item {
        vertical-align: middle;
    }

    .categories-slider, .products-slider, .cards-slider, .testimonials-slider , .partners-slider {
        overflow-y: hidden;
        overflow-x: scroll;
        white-space: nowrap;
    }
    .product-crd-spec small {
        white-space: break-spaces;
    }

    .testimonials-slider::-webkit-scrollbar { width: 0 !important }


    .categories-slider-wrapper, .products-slider-wrapper, .cards-slider-wrapper, .testimonials-slider-wrapper, .partners-slider-wrapper  {
        overflow-x: hidden;
        margin-right: 0px;
        margin-left: 0px;
    }

    .slider-container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .main-slider, .main-slider .slider-item {

    }

    .main-slider .slick-dots li button:before {
        font-size: 10px;
    }


    .main-slider .slick-dots {
        bottom: 4px;
    }

    .section-title {
        padding-right: 15px;
        padding-left: 15px;
    }

    .products-list .prod-col, .bundle-offer-products .prod-col {
        margin: 0 auto;
        width: auto;
    }

    .products-list .prod-col, .products-list .prod-col-attr{
        width: 50%;
    }

    .product-item {
        width: 135px;
    }

    .products-list .prod-col .product-item {
        width: 100%;
    }

    .sm-search-div {
        display: block;
    }

    .icon-shopping_cart_black_36dp-1-1, .sm-search-icon > span {
        font-size: 28px;
    }

    .icon-menu-top {
        width: 32px;
    }

}


.btn:focus,.btn:active, .page-link:focus, .page-link:active {
    outline: none !important;
    box-shadow: none;
}

.gift-popover-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 115px;
    height: 140px;
    max-width: 100%;
}
.popover {
    top: 40px;
}
.popover .arrow {
    top: -0.5rem;
    left: 5px;
}
.popover .arrow::before {
    top: 0;
    border-width: 0 0.5rem 0.5rem;
    border-bottom-color: #fff;
}
.popover .arrow ::after {
    top: 1px;
    border-width: 0 0.5rem 0.5rem;
    border-bottom-color: #fff;
}

.btn-product-card-out-of-stock {
  width: max-content;
}

.preorder-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 20px;
  font-weight: 300;
  line-height: 1.4;
  background-color: var(--primary-color);
  color: var(--text-color-primary-bg, #ffffff);
  white-space: nowrap;
  margin-bottom: 8px;
}

.preorder-badge.preorder-badge--product-card {
  border-radius: 10px;
  margin-bottom: 0;
}

.add-to-wishlist {
  position: absolute;
  right: 0;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  width: 40px;
  height: 35px;
  cursor: pointer;
  border-radius: 5px;
  background-color: white;
}

.rtl .add-to-wishlist {
  right: unset;
  left: 0;
}

.icon-heart-mask {
  display: inline-block;
  width: 25px;
  height: 20px;
  mask-size: 100%;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-image: var(--heart-outlined-icon);
  background-color: var(--secondary, #A1A0A9);
}

.icon-heart-mask.filled {
  mask-image: var(--heart-filled-icon);
  background-color: var(--primary_color, #D86F6F);
}


/* start_drag_css */

/* =========================================================
   Source: assets/product-card.css
   ========================================================= */

/* Oatra Product Card — Figma specs */

.oatra-product-card.product-item {
  width: 100%;
  max-width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 18px;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.oatra-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.oatra-product-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.oatra-product-card__link:hover {
  color: inherit;
  text-decoration: none;
}

.oatra-product-card__wishlist {
  top: 12px;
  right: auto;
  left: 12px;
  margin: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.rtl .oatra-product-card__wishlist {
  left: auto;
  right: 12px;
}

.oatra-product-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 28px 24px 20px;
  box-sizing: border-box;
}

.oatra-product-card__media .product-card-bundle-offer {
  top: 16px;
  left: 16px;
  right: auto;
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  background-color: #fdf2b3;
  color: #000000;
}

.rtl .oatra-product-card__media .product-card-bundle-offer {
  left: auto;
  right: 16px;
}

.oatra-product-card__media > [class*="badge"],
.oatra-product-card__media .badge {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  z-index: 2;
  margin: 0;
  padding: 6px 14px;
  border-radius: 9999px;
  background-color: #F8E8AD33 !important;
  color: #000000 !important;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  border: none;
  box-shadow: none;
}

.rtl .oatra-product-card__media > [class*="badge"],
.rtl .oatra-product-card__media .badge {
  right: auto;
  left: 16px;
}

.oatra-product-card__image {
  display: block;
  width: 100%;
  max-width: 200px;
  max-height: 180px;
  margin: 0 auto;
  object-fit: contain;
}

.oatra-product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 20px 20px;
}

.oatra-product-card__preorder {
  margin-bottom: 8px;
}

.oatra-product-card__preorder .preorder-badge--product-card {
  border-radius: 9999px;
  margin-bottom: 0;
}

.oatra-product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.oatra-product-card__info {
  flex: 1;
  min-width: 0;
  text-align: start;
}

.oatra-product-card__title {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: auto;
}

.oatra-product-card__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.oatra-product-card__price {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #6b6b6b;
}

.oatra-product-card__price-old {
  font-size: 14px;
  color: #a8a8a8;
  text-decoration: line-through;
}

.oatra-product-card__rating {
  display: none;
  height: auto;
  margin-top: 4px;
}

.oatra-product-card__cart-btn {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #F8E8AD33;
  color: #000000;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.oatra-product-card__cart-btn:hover,
.oatra-product-card__cart-btn:focus-visible {
  background-color: #f5e89a;
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  outline: none;
}

.oatra-product-card__cart-btn--notify {
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
}

.oatra-product-card__cart-btn--notify:hover,
.oatra-product-card__cart-btn--notify:focus-visible {
  background-color: #fdf2b3;
  border-color: #fdf2b3;
}

.oatra-product-card__cart-icon {
  display: block;
  width: 17px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}

.oatra-product-card__cart-loader {
  position: absolute;
  inset: 0;
  margin: auto;
}

.oatra-product-card__action {
  position: relative;
  flex-shrink: 0;
}

.oatra-product-card__meta {
  margin-top: 10px;
  text-align: start;
}

.oatra-product-card__meta small {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: #8b8b8b;
}

.oatra-product-card__discount {
  color: #ec5550 !important;
}

.oatra-product-card.product-item-out-of-stock {
  opacity: 0.85;
}

.oatra-product-card.product-item-out-of-stock .oatra-product-card__image {
  filter: grayscale(0.15);
}

/* Override legacy product-item rules inside Oatra card */
.oatra-product-card .product-title,
.oatra-product-card .product-crd-spec,
.oatra-product-card .product-card-footer,
.oatra-product-card .box-1-1 {
  display: none;
}

.products-list .prod-col .oatra-product-card,
.bundle-offer-products .prod-col .oatra-product-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.products-list .prod-col .oatra-product-card > .oatra-product-card__link,
.bundle-offer-products .prod-col .oatra-product-card > .oatra-product-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* =========================================================
   Source: assets/oatra-products-listing.css
   ========================================================= */

/* Products listing — category + all-products pages
   Full-width shell, 50px padding, 4 cards per row (desktop)
*/

.oatra-products-listing {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 50px 100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.oatra-products-listing .products-container {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0;
}

.oatra-products-listing .products-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-left: -12px;
  margin-right: -12px;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.oatra-products-listing .products-list .prod-col,
.oatra-products-listing .products-list .prod-col-attr,
.oatra-products-listing .products-list .prod-col-tb {
  width: 25%;
  flex: 0 0 25%;
  max-width: 25%;
  padding: 12px;
  box-sizing: border-box;
}

.oatra-products-listing .products-list .prod-col .product-item,
.oatra-products-listing .products-list .prod-col .oatra-product-card {
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   Source: assets/header-oatra.css
   ========================================================= */

/* Oatra Header — Figma Desktop & Mobile */

:root {
  --oatra-header-height: 72px;
  --oatra-header-height-mobile: 56px;
  --oatra-header-pad-x: 48px;
  --oatra-header-pad-x-mobile: 20px;
}

/* ── Home + Category with banner + overlay pages (Ingredients): header floats over hero/banner ── */
body[data-template="home"] .header,
body[data-template="category"]:has(.oatra-header-wrap--category) .header,
body[data-template="products"]:has(.oatra-header-wrap--overlay) .header,
.header:has(.oatra-header-wrap--home),
.header:has(.oatra-header-wrap--category),
.header:has(.oatra-header-wrap--overlay),
.home .header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
}

body[data-template="home"] .oatra-header-wrap,
body[data-template="category"]:has(.oatra-header-wrap--category) .oatra-header-wrap,
body[data-template="products"]:has(.oatra-header-wrap--overlay) .oatra-header-wrap,
.oatra-header-wrap--home,
.oatra-header-wrap--category,
.oatra-header-wrap--overlay,
.home .oatra-header-wrap {
  background: transparent !important;
}

/* ── Base bar ── */
.oatra-header.search-header {
  padding: 0;
  background: transparent;
  border: none;
}

.oatra-header .search-header-bar {
  height: auto;
  min-height: var(--oatra-header-height);
}

.oatra-header.oatra-header--overlay,
.oatra-header.oatra-header--overlay.header-theme-bg-primary {
  background: transparent !important;
  border-bottom: none !important;
}

.oatra-header:not(.oatra-header--overlay) {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.oatra-header__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 50px;
  box-sizing: border-box;
}

.oatra-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: var(--oatra-header-height);
  /* Figma: cart always left, nav always right (even in RTL stores) */
  direction: ltr;
}

/* ── Start (cart desktop / hamburger mobile) ── */
.oatra-header__start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}

/* ── Logo center ── */
.oatra-header__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.oatra-header__brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  text-decoration: none;
}

.oatra-header__logo {
  display: block;
  width: auto;
  max-height: 52px;
  height: auto;
  object-fit: contain;
}

/* White logo is invisible on solid white headers — invert on any page
   without an overlay/hero header (products, cart, PDP, categories without banner, etc.) */
.oatra-header.search-header:not(.oatra-header--overlay) .image-logo {
  padding: 0px;
  width: auto;
  max-height: 100%;
  position: relative;
  z-index: 1;
  filter: invert(1);
}

/* ── End (nav desktop / cart mobile) ── */
.oatra-header__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

/* ── Nav links (Figma) ── */
.oatra-header__nav-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.oatra-header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oatra-header__nav-item {
  margin: 0;
  padding: 0;
}

.oatra-header__nav-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.rtl .oatra-header__nav {
  direction: rtl;
}

.oatra-header__nav-link:hover,
.oatra-header__nav-link:focus-visible {
  opacity: 0.75;
  color: #ffffff;
  text-decoration: none;
}

.oatra-header:not(.oatra-header--overlay) .oatra-header__nav-link {
  color: #000000;
}

.oatra-header:not(.oatra-header--overlay) .oatra-header__nav-link:hover,
.oatra-header:not(.oatra-header--overlay) .oatra-header__nav-link:focus-visible {
  color: #000000;
  opacity: 0.65;
}

/* ── Cart (Figma) ── */
.oatra-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.oatra-header__cart,
.oatra-header__icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.oatra-header__cart:hover,
.oatra-header__cart:focus,
.oatra-header__cart:focus-visible,
.oatra-header__cart:active,
.oatra-header__icon-btn:hover,
.oatra-header__icon-btn:focus,
.oatra-header__icon-btn:focus-visible,
.oatra-header__icon-btn:active {
  text-decoration: none;
  opacity: 0.85;
  outline: none;
  box-shadow: none;
  border: none;
}

.oatra-header__cart-icon,
.oatra-header__action-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* White icons on overlay — invert only on solid white headers */
.oatra-header--overlay .oatra-header__cart-icon,
.oatra-header--overlay .oatra-header__action-icon {
  filter: none;
}

.oatra-header:not(.oatra-header--overlay) .oatra-header__cart-icon,
.oatra-header:not(.oatra-header--overlay) .oatra-header__action-icon {
  filter: brightness(0);
}

.oatra-header__cart .cart-badge {
  position: absolute;
  top: 4px;
  inset-inline-end: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #ec5550;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.oatra-header__cart .cart-badge.d-none {
  display: none !important;
}

/* ── Mobile menu button (Figma) ── */
.oatra-header__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.oatra-header__menu-icon {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 1px;
  position: relative;
}

.oatra-header__menu-icon::before,
.oatra-header__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 1px;
}

.oatra-header__menu-icon::before {
  top: -7px;
}

.oatra-header__menu-icon::after {
  top: 7px;
}

.oatra-header:not(.oatra-header--overlay) .oatra-header__menu-icon,
.oatra-header:not(.oatra-header--overlay) .oatra-header__menu-icon::before,
.oatra-header:not(.oatra-header--overlay) .oatra-header__menu-icon::after {
  background: #000000;
}

/* ── Override legacy Zid header chrome ── */
.oatra-header-wrap .search-header {
  background-color: transparent !important;
}

.oatra-header-wrap:not(.oatra-header-wrap--home):not(.oatra-header-wrap--category):not(.oatra-header-wrap--overlay) .oatra-header.search-header {
  background-color: #ffffff !important;
}

.oatra-header-wrap .header-logo,
.oatra-header-wrap .header-cart {
  width: auto;
  flex-grow: unset;
}

.oatra-header.oatra-header--overlay .header-theme-icon-primary {
  color: #ffffff !important;
}

.oatra-header.oatra-header--overlay .header-theme-icon-primary {
  color: #ffffff !important;
}

/* ── Mobile sliding menu (Figma minimal) ── */
.oatra-header ~ #sidenav-overlay + #sliding-menu,
#sliding-menu.oatra-slide-menu {
  background: #ffffff;
}

#sliding-menu.oatra-slide-menu .slide-menu-ul-li > a {
  font-family: var(--font-body);
  font-size: 16px;
  color: #000000;
}

/* ── Mobile ── */

/* =========================================================
   Source: assets/hero-section.css
   ========================================================= */

/* Hero Section — Oatra Figma "Guarding Goodness" layout */

.home > .hero-section:first-child {
  margin-top: 0;
}

.hero-section {
  --hero-height: 820px;
  --hero-height-md: 680px;
  --hero-height-sm: 560px;
  --hero-padding-inline: 100px;
  --hero-title-size: 60px;
  --hero-title-mb: 8px;
  --hero-subtitle-size: 20px;
  --hero-card-max-w: 580px;
  --hero-card-pad-y: 44px;
  --hero-card-pad-x: 56px;
  --hero-card-radius: 14px;
  --hero-card-overlap: 120px;
  --hero-desc-size: 18px;
  --hero-desc-lh: 1.7;
  --hero-sun-size: 45px;
  --hero-sun-gap: 28px;
  --hero-headings-card-gap: 50px;
  --hero-anim-duration: 0.8s;
  --hero-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hero-title-color: #fdf2b3;
  --hero-subtitle-color: #ffffff;
  --hero-desc-color: #ffffff;
  --hero-overlay: rgba(0, 0, 0, 0.18);

  position: relative;
  z-index: 2;
  width: 100%;
  overflow: visible;
}

.hero-section__inner {
  position: relative;
  width: 100%;
  min-height: var(--hero-height);
}

.hero-section__media {
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-section__image {
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 100%;
  object-fit: cover;
}

.hero-section__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  pointer-events: none;
}

.hero-section__fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(
    180deg,
    rgba(250, 248, 244, 0) 0%,
    rgba(250, 248, 244, 0.45) 55%,
    var(--hero-fade-color) 100%
  );
  pointer-events: none;
}

/* Figma: headings + card anchored bottom, fixed gap between them */
.hero-section__container {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--hero-headings-card-gap);
  padding: 0 var(--hero-padding-inline);
  pointer-events: none;
}

.hero-section__headings {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 900px;
  margin: 0;
  text-align: center;
  pointer-events: auto;
}

.hero-section__title {
  margin: 0 0 var(--hero-title-mb);
  color: var(--hero-title-color);
  font-family: var(--font-heading);
  font-size: var(--hero-title-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--hero-anim-duration) var(--hero-anim-ease),
    transform var(--hero-anim-duration) var(--hero-anim-ease);
}

.hero-section__subtitle {
  margin: 0;
  color: var(--hero-subtitle-color);
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 500;
  line-height: 150%;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--hero-anim-duration) var(--hero-anim-ease) 0.08s,
    transform var(--hero-anim-duration) var(--hero-anim-ease) 0.08s;
}

.hero-section__card-wrap {
  display: flex;
  justify-content: center;
  transform: translateY(20%);
  pointer-events: auto;
}

.hero-section__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--hero-card-max-w);
  padding: 10px;
  border-radius: var(--hero-card-radius);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--hero-anim-duration) var(--hero-anim-ease) 0.16s,
    transform var(--hero-anim-duration) var(--hero-anim-ease) 0.16s;
}

.hero-section__sun {
  display: block;
  width: var(--hero-sun-size);
  height: auto;
  margin-bottom: var(--hero-sun-gap);
  object-fit: contain;
}

.hero-section__sun--bottom {
  margin-bottom: 0;
  margin-top: var(--hero-sun-gap);
}

.hero-section__description {
  margin: 0;
  max-width: 460px;
  color: var(--hero-desc-color);
  font-family: var(--font-body);
  font-size: var(--hero-desc-size);
  font-weight: 400;
  line-height: var(--hero-desc-lh);
  text-align: center;
}

.hero-section--visible .hero-section__title,
.hero-section--visible .hero-section__subtitle,
.hero-section--visible .hero-section__card {
  opacity: 1;
  transform: translateY(0);
}

/* Next section: leave room for overlapping card */
.home > .hero-section:first-child + .brand-story-section .brand-story-section__container {
  padding-top: calc(50px + var(--hero-card-overlap, 120px));
}

.home > .hero-section:first-child + section:not(.brand-story-section) {
  padding-top: var(--hero-card-overlap, 120px);
}

/* Tablet */


/* Mobile */




/* Reduced motion */

/* =========================================================
   Source: assets/finest-ingredients-section.css
   ========================================================= */

/* Finest Ingredients — Oatra Desktop + Phone Figma */

.finest-ingredients-section {
  --fi-title-size: 48px;
  --fi-title-mb: 56px;
  --fi-feature-title-size: 20px;
  --fi-feature-desc-size: 16px;
  --fi-feature-desc-lh: 1.55;
  --fi-feature-gap: 44px;
  --fi-arrow-w: 96px;
  --fi-arrow-gap: 18px;
  /* Gap between image edge and 1st / 3rd arrows */
  --fi-image-arrow-gap: 15px;
  /* Extra inset for 2nd arrow → 15 + 35 = 50px from image */
  --fi-feature-2-inset: 35px;
  --fi-container-pad-y: 50px;
  --fi-container-pad-end: 100px;
  --fi-media-min-h: 560px;
  --fi-anim-duration: 0.75s;
  --fi-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fi-bg: #fbf7f0;
  --fi-title-color: #000000;
  --fi-feature-title-color: #000000;
  --fi-feature-desc-color: #000000;

  background-color: var(--fi-bg);
  width: 100%;
  overflow: hidden;
}

/* Desktop: NO left padding — image glued to viewport left edge */
.finest-ingredients-section__container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--fi-container-pad-y) var(--fi-container-pad-end) var(--fi-container-pad-y) 0;
  box-sizing: border-box;
}

/* Image LEFT flush · copy RIGHT — LTR like Figma EN */
.finest-ingredients-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: var(--fi-image-arrow-gap);
  direction: ltr;
}

.finest-ingredients-section__inner--no-image {
  grid-template-columns: 1fr;
  justify-items: center;
  padding-inline-start: var(--fi-container-pad-end);
}

.finest-ingredients-section__media {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: var(--fi-media-min-h);
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--fi-anim-duration) var(--fi-anim-ease),
    transform var(--fi-anim-duration) var(--fi-anim-ease);
}

.finest-ingredients-section__image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  object-fit: contain;
  object-position: left bottom;
}

.finest-ingredients-section__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  direction: ltr;
}

.finest-ingredients-section__inner--no-image .finest-ingredients-section__content {
  margin-inline: auto;
  max-width: 640px;
}

/* Title above features — extreme right (Figma) */
.finest-ingredients-section__title {
  display: block;
  width: 100%;
  margin: 0 0 var(--fi-title-mb);
  color: var(--fi-title-color);
  font-family: var(--font-heading);
  font-size: var(--fi-title-size);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: right;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--fi-anim-duration) var(--fi-anim-ease) 0.08s,
    transform var(--fi-anim-duration) var(--fi-anim-ease) 0.08s;
}

.finest-ingredients-section__features {
  display: flex;
  flex-direction: column;
  gap: var(--fi-feature-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.finest-ingredients-section__feature {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--fi-arrow-gap);
  margin-inline-start: 0;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--fi-anim-duration) var(--fi-anim-ease),
    transform var(--fi-anim-duration) var(--fi-anim-ease);
}

/* 1st & 3rd: 15px from image (via grid gap). 2nd: 50px from image */
.finest-ingredients-section__feature:nth-child(1),
.finest-ingredients-section__feature:nth-child(3) {
  margin-inline-start: 0;
}

.finest-ingredients-section__feature:nth-child(2) {
  margin-inline-start: var(--fi-feature-2-inset);
}

.finest-ingredients-section__feature:nth-child(1) {
  transition-delay: 0.12s;
}

.finest-ingredients-section__feature:nth-child(2) {
  transition-delay: 0.2s;
}

.finest-ingredients-section__feature:nth-child(3) {
  transition-delay: 0.28s;
}

.finest-ingredients-section__feature:nth-child(4) {
  transition-delay: 0.36s;
}

.finest-ingredients-section__arrow {
  flex-shrink: 0;
  display: block;
  width: var(--fi-arrow-w);
  height: auto;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.finest-ingredients-section__feature-copy {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.finest-ingredients-section__feature-title {
  margin: 0 0 6px;
  color: var(--fi-feature-title-color);
  font-family: var(--font-heading);
  font-size: var(--fi-feature-title-size);
  font-weight: 700;
  line-height: 1.25;
}

.finest-ingredients-section__feature-desc {
  margin: 0;
  color: var(--fi-feature-desc-color);
  font-family: var(--font-body);
  font-size: var(--fi-feature-desc-size);
  font-weight: 400;
  line-height: var(--fi-feature-desc-lh);
}

.finest-ingredients-section--visible .finest-ingredients-section__media,
.finest-ingredients-section--visible .finest-ingredients-section__title,
.finest-ingredients-section--visible .finest-ingredients-section__feature {
  opacity: 1;
  transform: translateY(0);
}

/* Tablet / Mobile responsive rules live under start_responsive_css */

/* =========================================================
   Source: assets/why-oatra-section.css
   ========================================================= */

/* Why Oatra Section — Figma Home dark lifestyle strip */

.why-oatra-section {
  --wo-min-h: 560px;
  --wo-pad-y: 120px;
  --wo-pad-x: 100px;
  --wo-content-max: 760px;
  --wo-title-size: 56px;
  --wo-title-mb: 40px;
  --wo-desc-size: 18px;
  --wo-desc-lh: 1.7;
  --wo-desc-mb: 40px;
  --wo-btn-py: 14px;
  --wo-btn-px: 48px;
  --wo-btn-font-size: 16px;
  --wo-btn-font-weight: 500;
  --wo-btn-radius: 9999px;
  --wo-anim-duration: 0.75s;
  --wo-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wo-fallback-bg: #1a1a1a;
  --wo-overlay: rgba(0, 0, 0, 0.48);
  --wo-title-color: #ffffff;
  --wo-highlight-color: #fdf2b3;
  --wo-desc-color: #ffffff;
  --wo-btn-bg: #fdf2b3;
  --wo-btn-bg-hover: #f5e89a;
  --wo-btn-color: #000000;

  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--wo-fallback-bg);
}

.why-oatra-section__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 800px;  
}

.why-oatra-section__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.why-oatra-section__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

.why-oatra-section__overlay {
  position: absolute;
  inset: 0;
  background: var(--wo-overlay);
  pointer-events: none;
}

.why-oatra-section__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--wo-pad-y) var(--wo-pad-x);
  box-sizing: border-box;
}

.why-oatra-section__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--wo-content-max);
  margin: 0 auto;
  text-align: center;
}

.why-oatra-section__title {
  margin: 0 0 var(--wo-title-mb);
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--wo-title-size);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--wo-title-color);
  text-align: center;
  /* Keep Figma EN order: … diffrent ?  (not RTL-flipped ? …) */
  direction: ltr;
  unicode-bidi: isolate;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--wo-anim-duration) var(--wo-anim-ease),
    transform var(--wo-anim-duration) var(--wo-anim-ease);
}

.why-oatra-section__title-prefix {
  color: var(--wo-title-color);
}

/* Figma: "?" after highlight uses the same cream color as "diffrent" */
.why-oatra-section__title-suffix {
  color: var(--wo-highlight-color);
}

.why-oatra-section__title-highlight {
  color: var(--wo-highlight-color);
  font-style: italic;
  font-weight: 400;
}


.why-oatra-section__description {
  margin: 0 0 var(--wo-desc-mb);
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--wo-desc-size);
  font-weight: 400;
  line-height: var(--wo-desc-lh);
  color: var(--wo-desc-color);
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--wo-anim-duration) var(--wo-anim-ease) 0.1s,
    transform var(--wo-anim-duration) var(--wo-anim-ease) 0.1s;
}

.why-oatra-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:6px 25px;
  border-radius: var(--wo-btn-radius);
  border: 1px solid transparent;
  background-color: var(--wo-btn-bg);
  color: var(--wo-btn-color);
  font-family: var(--font-body);
  font-size: var(--wo-btn-font-size);
  font-weight: var(--wo-btn-font-weight);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--wo-anim-duration) var(--wo-anim-ease) 0.2s,
    transform var(--wo-anim-duration) var(--wo-anim-ease) 0.2s,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.why-oatra-section__btn:hover,
.why-oatra-section__btn:focus-visible {
  background-color: var(--wo-btn-bg-hover);
  color: var(--wo-btn-color);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.why-oatra-section__btn:focus-visible {
  outline: 2px solid var(--wo-btn-bg);
  outline-offset: 3px;
}

.why-oatra-section--visible .why-oatra-section__title,
.why-oatra-section--visible .why-oatra-section__description,
.why-oatra-section--visible .why-oatra-section__btn {
  opacity: 1;
  transform: translateY(0);
}

.why-oatra-section--visible .why-oatra-section__btn:hover,
.why-oatra-section--visible .why-oatra-section__btn:focus-visible {
  transform: scale(1.04);
}

/* Tablet */


/* Mobile — Oatra-Phone */

/* =========================================================
   Source: assets/oatra-products-section.css
   ========================================================= */

/* Oatra Products Section — Outra Large slider */

.oatra-products-section {
  background-color: #ffffff;
  width: 100%;
}

.oatra-products-section.section-padding-space {
  padding-top: 0;
  padding-bottom: 0;
}

.oatra-products-section__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 50px;
  box-sizing: border-box;
}

.oatra-products-section__title {
  margin: 0 0 32px;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: #000000;
  text-align: start;
}

.oatra-products-section .products-slider-wrapper {
  position: relative;
  margin: 0;
  padding: 15px 0;
}

.oatra-products-section .products-slider {
  height: auto;
  margin: 0 -12px;
}

.oatra-products-section .products-slider .prod-col {
  padding: 15px 12px;
  display: block;
  width: auto;
  box-sizing: border-box;
}

.oatra-products-section .products-slider.slick-initialized {
  display: block;
  height: auto;
}

.oatra-products-section .slick-list {
  overflow: hidden;
}

.oatra-products-section .slick-track {
  display: flex;
  align-items: stretch;
}

.oatra-products-section .slick-slide {
  height: auto;
}

.oatra-products-section .slick-slide > div,
.oatra-products-section .prod-col {
  height: 100%;
}

.oatra-products-section .oatra-product-card {
  height: 100%;
}

/* Figma: no visible slider arrows */
.oatra-products-section .slick-arrow {
  display: none !important;
}

.oatra-products-section .category-products-display-more-section {
  margin-top: 32px;
}

.oatra-products-section .more-button {
  border-radius: 9999px;
  padding: 12px 32px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
}

/* =========================================================
   Source: assets/the-collection-section.css
   ========================================================= */

/* The Collection Section — Figma Home category showcase + slider */

.the-collection-section {
  --tc-pad-y: 50px;
  --tc-pad-x: 100px;
  --tc-title-size: 36px;
  --tc-title-mb: 20px;
  --tc-flag-size: 56px;
  --tc-flag-mb: 20px;
  --tc-subtitle-size: 22px;
  --tc-subtitle-mb: 48px;
  --tc-slide-gap: 12px;
  --tc-card-ratio: 4 / 5;
  --tc-btn-py: 12px;
  --tc-btn-px: 28px;
  --tc-btn-font-size: 15px;
  --tc-btn-font-weight: 500;
  --tc-btn-radius: 9999px;
  --tc-anim-duration: 0.7s;
  --tc-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tc-bg: #ffffff;
  --tc-title-color: #000000;
  --tc-subtitle-color: #000000;
  --tc-card-radius: 16px;
  --tc-btn-bg: rgba(255, 255, 255, 0.55);
  --tc-btn-border: rgba(255, 255, 255, 0.7);
  --tc-btn-color: #000000;

  background-color: var(--tc-bg);
  width: 100%;
}

.the-collection-section__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 50px;
  box-sizing: border-box;
}

.the-collection-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--tc-subtitle-mb);
}

.the-collection-section__title {
  margin: 0 0 var(--tc-title-mb);
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--tc-title-size);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tc-title-color);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--tc-anim-duration) var(--tc-anim-ease),
    transform var(--tc-anim-duration) var(--tc-anim-ease);
}

.the-collection-section__flag {
  display: block;
  width: var(--tc-flag-size);
  height: var(--tc-flag-size);
  margin: 0 0 var(--tc-flag-mb);
  object-fit: contain;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--tc-anim-duration) var(--tc-anim-ease) 0.06s,
    transform var(--tc-anim-duration) var(--tc-anim-ease) 0.06s;
}

.the-collection-section__subtitle {
  margin: 0;
  padding: 0;
  max-width: 640px;
  font-family: var(--font-body);
  font-size: var(--tc-subtitle-size);
  font-weight: 400;
  line-height: 1.45;
  color: var(--tc-subtitle-color);
  /* Keep Figma EN order: … lovingly made.  (period on the right, not RTL-flipped) */
  direction: ltr;
  unicode-bidi: isolate;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--tc-anim-duration) var(--tc-anim-ease) 0.12s,
    transform var(--tc-anim-duration) var(--tc-anim-ease) 0.12s;
}

.the-collection-section__subtitle-prefix {
  color: var(--tc-subtitle-color);
}

.the-collection-section__subtitle-highlight {
  color: var(--tc-subtitle-color);
  font-weight: 700;
  font-style: italic;
}

.the-collection-section__subtitle-prefix + .the-collection-section__subtitle-highlight::before {
  content: "\00a0";
}

/* Slider */
.the-collection-section__slider-wrap {
  position: relative;
  width: 100%;
}

.the-collection-section__slider {
  margin: 0 calc(var(--tc-slide-gap) / -2);
}

.the-collection-section__slider.slick-initialized {
  display: block;
}

.the-collection-section__slider .slick-list {
  overflow: hidden;
  margin: 0;
}

.the-collection-section__slider .slick-track {
  display: flex;
  align-items: stretch;
}

.the-collection-section__slide {
  padding: 0 calc(var(--tc-slide-gap) / 2);
  box-sizing: border-box;
  height: auto;
}

.the-collection-section__slider .slick-slide {
  height: auto;
}

.the-collection-section__slider .slick-slide > div {
  height: 100%;
}

.the-collection-section__card {
  margin: 0;
  height: 100%;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.65s var(--tc-anim-ease),
    transform 0.65s var(--tc-anim-ease);
}

.the-collection-section__slider .slick-slide:nth-child(1) .the-collection-section__card { transition-delay: 0.08s; }
.the-collection-section__slider .slick-slide:nth-child(2) .the-collection-section__card { transition-delay: 0.14s; }
.the-collection-section__slider .slick-slide:nth-child(3) .the-collection-section__card { transition-delay: 0.2s; }
.the-collection-section__slider .slick-slide:nth-child(4) .the-collection-section__card { transition-delay: 0.26s; }
.the-collection-section__slider .slick-slide:nth-child(5) .the-collection-section__card { transition-delay: 0.32s; }
.the-collection-section__slider .slick-slide:nth-child(6) .the-collection-section__card { transition-delay: 0.38s; }

.the-collection-section__card-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: var(--tc-card-ratio);
  border-radius: var(--tc-card-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.the-collection-section__card-image,
.the-collection-section__card-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.the-collection-section__card-placeholder {
  background: linear-gradient(145deg, #f5f0e8 0%, #e8e2d8 100%);
  min-height: 240px;
}

.the-collection-section__card-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 30px;
  border-radius: var(--tc-btn-radius);
  border: 1px solid #F8E8AD33;
  background: #F8E8AD33;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  color: var(--tc-btn-color);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--tc-btn-font-weight);
  line-height: 1.25;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.the-collection-section__card-link:hover .the-collection-section__card-btn,
.the-collection-section__card-link:focus-visible .the-collection-section__card-btn {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  transform: translate(-50%, -50%) scale(1.04);
}

.the-collection-section__card-link:focus-visible {
  outline: 2px solid var(--tc-title-color);
  outline-offset: 3px;
}

/* Figma: no visible slider arrows — swipe / drag only */
.the-collection-section .slick-arrow {
  display: none !important;
}

.the-collection-section--visible .the-collection-section__title,
.the-collection-section--visible .the-collection-section__flag,
.the-collection-section--visible .the-collection-section__subtitle,
.the-collection-section--visible .the-collection-section__card {
  opacity: 1;
  transform: translateY(0);
}

.the-collection-section--visible .the-collection-section__card-link:hover .the-collection-section__card-btn,
.the-collection-section--visible .the-collection-section__card-link:focus-visible .the-collection-section__card-btn {
  transform: translate(-50%, -50%) scale(1.04);
}

/* Tablet */


/* Mobile / small tablet — padding + typography; slidesToShow via JS */

/* =========================================================
   Source: assets/banners-section.css
   ========================================================= */

/* Banners Section — Figma lifestyle banner / slider */

.banners-section {
  --bn-pad-y: 40px;
  --bn-pad-x: 100px;
  --bn-arrows-mb: 16px;
  --bn-arrow-size: 40px;
  --bn-caption-size: 22px;
  --bn-caption-inset: 28px;
  --bn-sun-size: 48px;
  --bn-sun-inset: 24px;
  --bn-min-h: 420px;
  --bn-bg: #ffffff;
  --bn-radius: 24px;
  --bn-text-color: #000000;

  background-color: var(--bn-bg);
  width: 100%;
}

.banners-section__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 50px;
  box-sizing: border-box;
}

/* Arrows row — above banner (Figma) */
.banners-section__arrows {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: var(--bn-arrows-mb);
}

.banners-section__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bn-arrow-size);
  height: var(--bn-arrow-size);
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.banners-section__arrow--prev {
  background-color: #e8e4dc;
  color: #1a1a1a;
}

.banners-section__arrow--next {
  background-color: transparent;
  color: #c4a24e;
}

.banners-section__arrow:hover:not(.is-disabled),
.banners-section__arrow:focus-visible:not(.is-disabled) {
  transform: scale(1.06);
}

.banners-section__arrow--prev:hover:not(.is-disabled),
.banners-section__arrow--prev:focus-visible:not(.is-disabled) {
  background-color: #ddd8ce;
}

.banners-section__arrow--next:hover:not(.is-disabled),
.banners-section__arrow--next:focus-visible:not(.is-disabled) {
  color: #a8862e;
}

.banners-section__arrow:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

.banners-section__arrow.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.banners-section__chevron {
  display: block;
  width: 10px;
  height: 10px;
  border-style: solid;
  border-width: 0 2px 2px 0;
}

.banners-section__arrow--prev .banners-section__chevron {
  margin-inline-start: 3px;
  transform: rotate(135deg);
}

.banners-section__arrow--next .banners-section__chevron {
  margin-inline-end: 3px;
  border-color: currentColor;
  transform: rotate(-45deg);
}

.banners-section__arrow--prev .banners-section__chevron {
  border-color: currentColor;
}

/* Track / slider */
.banners-section__track {
  width: 100%;
}

.banners-section__track--slick.slick-initialized {
  display: block;
}

.banners-section__track--slick .slick-list {
  overflow: hidden;
  border-radius: var(--bn-radius);
}

.banners-section__track--slick .slick-track {
  display: flex;
  align-items: stretch;
}

.banners-section__slide {
  height: auto;
}

.banners-section__track--slick .slick-slide {
  height: auto;
}

.banners-section__track--slick .slick-slide > div {
  height: 100%;
}

/* Banner card */
.banners-section__banner {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--bn-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}


.banners-section__image {
  display: block;
  width: 100%;
  height: 571px;
  object-fit: cover;
  object-position: center;
}

.banners-section__caption {
  position: absolute;
  z-index: 1;
  left: var(--bn-caption-inset);
  bottom: var(--bn-caption-inset);
  margin: 0;
  max-width: min(420px, 70%);
  font-family: var(--font-body);
  font-size: var(--bn-caption-size);
  font-weight: 400;
  line-height: 1.35;
  color: var(--bn-text-color);
  pointer-events: none;
}

.rtl .banners-section__caption {
  left: auto;
  right: var(--bn-caption-inset);
  text-align: right;
}

.banners-section__caption-prefix {
  display: block;
}

.banners-section__caption-highlight {
  display: block;
  font-weight: 700;
  font-style: italic;
}

.banners-section__sun {
  position: absolute;
  z-index: 1;
  right: var(--bn-sun-inset);
  bottom: var(--bn-sun-inset);
  width: var(--bn-sun-size);
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.rtl .banners-section__sun {
  right: auto;
  left: var(--bn-sun-inset);
}

.banners-section__banner:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 3px;
}

/* Tablet */


/* Mobile */

/* =========================================================
   Source: assets/most-wanted-section.css
   ========================================================= */

/* Most Wanted Section — Figma Home image slider */

.most-wanted-section {
  --mw-pad-y: 50px;
  --mw-pad-x: 100px;
  --mw-title-size: 48px;
  --mw-title-mb: 20px;
  --mw-flag-size: 56px;
  --mw-flag-mb: 40px;
  --mw-slide-gap: 12px;
  --mw-anim-duration: 0.7s;
  --mw-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mw-bg: #ffffff;
  --mw-title-color: #000000;
  --mw-radius: 0px;

  background-color: var(--mw-bg);
  width: 100%;
}

.most-wanted-section__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 50px;
  box-sizing: border-box;
}

.most-wanted-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.most-wanted-section__title {
  margin: 0 0 var(--mw-title-mb);
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--mw-title-size);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  color: var(--mw-title-color);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--mw-anim-duration) var(--mw-anim-ease),
    transform var(--mw-anim-duration) var(--mw-anim-ease);
}

.most-wanted-section__flag {
  display: block;
  width: var(--mw-flag-size);
  height: var(--mw-flag-size);
  margin: 0 0 var(--mw-flag-mb);
  object-fit: contain;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--mw-anim-duration) var(--mw-anim-ease) 0.06s,
    transform var(--mw-anim-duration) var(--mw-anim-ease) 0.06s;
}

/* Slider */
.most-wanted-section__slider-wrap {
  position: relative;
  width: 100%;
}

.most-wanted-section__slider {
  margin: 0 calc(var(--mw-slide-gap) / -2);
}

.most-wanted-section__slider.slick-initialized {
  display: block;
}

.most-wanted-section__slider .slick-list {
  overflow: hidden;
  margin: 0;
}

.most-wanted-section__slider .slick-track {
  display: flex;
  align-items: stretch;
}

.most-wanted-section__slide {
  padding: 0 calc(var(--mw-slide-gap) / 2);
  box-sizing: border-box;
  height: auto;
}

.most-wanted-section__slider .slick-slide {
  height: auto;
}

.most-wanted-section__slider .slick-slide > div {
  height: 100%;
}

.most-wanted-section .slick-arrow {
  display: none !important;
}

.most-wanted-section__item {
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.65s var(--mw-anim-ease),
    transform 0.65s var(--mw-anim-ease);
}

.most-wanted-section__slider .slick-slide:nth-child(1) .most-wanted-section__item { transition-delay: 0.08s; }
.most-wanted-section__slider .slick-slide:nth-child(2) .most-wanted-section__item { transition-delay: 0.14s; }
.most-wanted-section__slider .slick-slide:nth-child(3) .most-wanted-section__item { transition-delay: 0.2s; }
.most-wanted-section__slider .slick-slide:nth-child(4) .most-wanted-section__item { transition-delay: 0.26s; }
.most-wanted-section__slider .slick-slide:nth-child(5) .most-wanted-section__item { transition-delay: 0.32s; }
.most-wanted-section__slider .slick-slide:nth-child(6) .most-wanted-section__item { transition-delay: 0.38s; }
.most-wanted-section__slider .slick-slide:nth-child(7) .most-wanted-section__item { transition-delay: 0.44s; }
.most-wanted-section__slider .slick-slide:nth-child(8) .most-wanted-section__item { transition-delay: 0.5s; }

.most-wanted-section__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.most-wanted-section__link[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

.most-wanted-section__link:focus-visible {
  outline: 2px solid var(--mw-title-color);
  outline-offset: 3px;
}

.most-wanted-section__image {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: var(--mw-radius);
  transition: transform 0.4s var(--mw-anim-ease);
}

.most-wanted-section__link:hover .most-wanted-section__image,
.most-wanted-section__link:focus-visible .most-wanted-section__image {
  transform: scale(1.02);
}

.most-wanted-section--visible .most-wanted-section__title,
.most-wanted-section--visible .most-wanted-section__flag,
.most-wanted-section--visible .most-wanted-section__item {
  opacity: 1;
  transform: translateY(0);
}

/* Tablet */


/* Mobile — slidesToShow via JS */

/* =========================================================
   Source: assets/gifts-section.css
   ========================================================= */

/* Gifts Section — Figma layout
   shell = most-wanted padding (white gaps L/R)
   container = sage bg only
   person image: head + top box sit on / slightly above top edge of sage
*/

.gifts-section {
  --gf-arrows-mb: 16px;
  --gf-arrow-size: 40px;
  --gf-card-min-h: 380px;
  --gf-card-overflow-top: 48px;
  --gf-title-size: 40px;
  --gf-title-mb: 16px;
  --gf-desc-size: 15px;
  --gf-desc-mb: 24px;
  --gf-desc-max-w: 360px;
  --gf-btn-py: 11px;
  --gf-btn-px: 36px;
  --gf-btn-font-size: 15px;
  --gf-sun-size: 36px;
  --gf-sun-inset: 20px;
  --gf-image-max-w: 400px;
  --gf-anim-duration: 0.75s;
  --gf-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gf-container-bg: #e1e6d3;
  --gf-radius: 28px;
  --gf-title-color: #000000;
  --gf-desc-color: #000000;
  --gf-btn-bg: #f5f0e4;
  --gf-btn-bg-hover: #ede6d6;
  --gf-btn-color: #000000;

  width: 100%;
  /* Always white gaps — never reuse card/sage color here (hides inset) */
  background-color: #ffffff;
  overflow: visible;
}

/* Exact same pattern as .most-wanted-section__container */
.gifts-section__shell {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /* Top pad must clear person overflow above the sage box */
  padding: calc(50px + var(--gf-card-overflow-top)) 50px 50px;
  box-sizing: border-box;
  overflow: visible;
}

/* Sage banner ONLY — inset by shell padding → gaps L/R */
.gifts-section__container {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: var(--gf-radius);
  background-color: var(--gf-container-bg);
  overflow: visible;
  min-height: var(--gf-card-min-h);
}

.gifts-section__arrows {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: var(--gf-arrows-mb);
}

.gifts-section__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gf-arrow-size);
  height: var(--gf-arrow-size);
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.gifts-section__arrow--prev {
  background-color: #e8e4dc;
  color: #1a1a1a;
}

.gifts-section__arrow--next {
  background-color: transparent;
  color: #c4a24e;
}

.gifts-section__arrow:hover:not(.is-disabled),
.gifts-section__arrow:focus-visible:not(.is-disabled) {
  transform: scale(1.06);
}

.gifts-section__arrow--prev:hover:not(.is-disabled) {
  background-color: #ddd8ce;
}

.gifts-section__arrow--next:hover:not(.is-disabled) {
  color: #a8862e;
}

.gifts-section__arrow:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

.gifts-section__arrow.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.gifts-section__chevron {
  display: block;
  width: 10px;
  height: 10px;
  border-style: solid;
  border-width: 0 2px 2px 0;
  border-color: currentColor;
}

.gifts-section__arrow--prev .gifts-section__chevron {
  margin-inline-start: 3px;
  transform: rotate(135deg);
}

.gifts-section__arrow--next .gifts-section__chevron {
  margin-inline-end: 3px;
  transform: rotate(-45deg);
}

.gifts-section__track {
  width: 100%;
  height: 100%;
}

.gifts-section__track--slick.slick-initialized {
  display: block;
}

.gifts-section__track--slick .slick-list {
  overflow: visible;
}

.gifts-section__track--slick .slick-track {
  display: flex;
  align-items: stretch;
}

.gifts-section__slide {
  height: auto;
  box-sizing: border-box;
}

.gifts-section__track--slick .slick-slide {
  height: auto;
}

.gifts-section__track--slick .slick-slide > div {
  height: 100%;
}

.gifts-section__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--gf-card-min-h);
  background: transparent;
  overflow: visible;
}

/* Sun — top-right of sage container */
.gifts-section__sun {
  position: absolute;
  top: var(--gf-sun-inset);
  right: var(--gf-sun-inset);
  left: auto;
  z-index: 3;
  width: var(--gf-sun-size);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--gf-anim-duration) var(--gf-anim-ease) 0.2s;
}

.gifts-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--gf-card-min-h);
}

.gifts-section__inner--no-image .gifts-section__media {
  display: none;
}

/*
  Person image — Figma:
  left of sage; head + top carton sit on / slightly above top edge
*/
.gifts-section__media {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: min(40%, var(--gf-image-max-w));
  height: calc(100% + var(--gf-card-overflow-top));
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--gf-anim-duration) var(--gf-anim-ease);
}

.gifts-section__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
}

.gifts-section__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--gf-anim-duration) var(--gf-anim-ease) 0.1s,
    transform var(--gf-anim-duration) var(--gf-anim-ease) 0.1s;
}

.gifts-section__title {
  margin: 0 0 var(--gf-title-mb);
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--gf-title-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gf-title-color);
}

.gifts-section__description {
  margin: 0 0 var(--gf-desc-mb);
  max-width: var(--gf-desc-max-w);
  font-family: var(--font-body);
  font-size: var(--gf-desc-size);
  font-weight: 300;
  line-height: 200%;
  color: var(--gf-desc-color);
}

.gifts-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 40px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color:#F8E8AD33;
  color: var(--gf-btn-color);
  font-family: var(--font-body);
  font-size: var(--gf-btn-font-size);
  font-weight: 500;
  line-height: 150%;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.gifts-section__btn:hover,
.gifts-section__btn:focus-visible {
  background-color: var(--gf-btn-bg-hover);
  color: var(--gf-btn-color);
  text-decoration: none;
  transform: scale(1.04);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.gifts-section__btn:focus-visible {
  outline: 2px solid var(--gf-btn-color);
  outline-offset: 3px;
}

.gifts-section--visible .gifts-section__sun,
.gifts-section--visible .gifts-section__media {
  opacity: 1;
}

.gifts-section--visible .gifts-section__content {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Source: assets/brand-story-section.css
   ========================================================= */

/* Brand Story Section — Guarding Goodness */

.brand-story-section {
  --bs-content-py: 0;
  --bs-content-px: 0;
  --bs-title-size: 48px;
  --bs-title-mb: 8px;
  --bs-subtitle-size: 20px;
  --bs-subtitle-mb: 40px;
  --bs-illustration-w: 160px;
  --bs-illustration-mb: 40px;
  --bs-desc-size: 18px;
  --bs-desc-lh: 1.65;
  --bs-desc-max-w: 420px;
  --bs-desc-mb: 40px;
  --bs-btn-py: 14px;
  --bs-btn-px: 40px;
  --bs-btn-gap: 16px;
  --bs-btn-radius: 9999px;
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 500;
  --bs-min-height: 640px;
  --bs-anim-duration: 0.75s;
  --bs-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bs-bg: #ffffff;
  --bs-title-color: #000000;
  --bs-subtitle-color: #6b6b6b;
  --bs-desc-color: #000000;
  --bs-btn-bg: #fdf2b3;
  --bs-btn-bg-hover: #f5e89a;
  --bs-btn-border: #000000;
  --bs-btn-color: #000000;

  background-color: var(--bs-bg);
  width: 100%;
  overflow: hidden;
}

.brand-story-section__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 100px;
  box-sizing: border-box;
}

.brand-story-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: var(--bs-min-height);
}

.brand-story-section__grid--single {
  grid-template-columns: 1fr;
}

.brand-story-section__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.brand-story-section__title {
  margin: 0 0 var(--bs-title-mb);
  color: var(--bs-title-color);
  font-family: var(--font-heading);
  font-size: var(--bs-title-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--bs-anim-duration) var(--bs-anim-ease),
    transform var(--bs-anim-duration) var(--bs-anim-ease);
}

.brand-story-section__subtitle {
  margin: 0 0 var(--bs-subtitle-mb);
  color: var(--bs-subtitle-color);
  font-family: var(--font-body);
  font-size: var(--bs-subtitle-size);
  font-weight: 400;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--bs-anim-duration) var(--bs-anim-ease) 0.08s,
    transform var(--bs-anim-duration) var(--bs-anim-ease) 0.08s;
}

.brand-story-section__illustration {
  display: block;
  width: var(--bs-illustration-w);
  height: auto;
  margin: 0 0 var(--bs-illustration-mb);
  object-fit: contain;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition:
    opacity var(--bs-anim-duration) var(--bs-anim-ease) 0.16s,
    transform var(--bs-anim-duration) var(--bs-anim-ease) 0.16s;
}

.brand-story-section__description {
  margin: 0 0 var(--bs-desc-mb);
  max-width: var(--bs-desc-max-w);
  color: var(--bs-desc-color);
  font-family: var(--font-body);
  font-size: var(--bs-desc-size);
  font-weight: 400;
  line-height: var(--bs-desc-lh);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--bs-anim-duration) var(--bs-anim-ease) 0.24s,
    transform var(--bs-anim-duration) var(--bs-anim-ease) 0.24s;
}

.brand-story-section__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bs-btn-gap);
  width: 100%;
  max-width: var(--bs-desc-max-w);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--bs-anim-duration) var(--bs-anim-ease) 0.32s,
    transform var(--bs-anim-duration) var(--bs-anim-ease) 0.32s;
}

.brand-story-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  padding: var(--bs-btn-py) var(--bs-btn-px);
  border-radius: var(--bs-btn-radius);
  font-family: var(--font-body);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.brand-story-section__btn--primary {
  background-color: var(--bs-btn-bg);
  color: var(--bs-btn-color);
  border: 1px solid transparent;
}

.brand-story-section__btn--primary:hover,
.brand-story-section__btn--primary:focus-visible {
  background-color: var(--bs-btn-bg-hover);
  color: var(--bs-btn-color);
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

.brand-story-section__btn--secondary {
  background-color: transparent;
  color: var(--bs-btn-color);
  border: 1px solid var(--bs-btn-border);
}

.brand-story-section__btn--secondary:hover,
.brand-story-section__btn--secondary:focus-visible {
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-bg);
  color: var(--bs-btn-color);
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}

.brand-story-section__btn:focus-visible {
  outline: 2px solid var(--bs-btn-color);
  outline-offset: 3px;
}

.brand-story-section__media {
  position: relative;
  min-height: 320px;
  height: 100%;
  overflow: hidden;
}

.brand-story-section__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 1s var(--bs-anim-ease) 0.1s,
    transform 1.2s var(--bs-anim-ease) 0.1s;
}

.brand-story-section--visible .brand-story-section__title,
.brand-story-section--visible .brand-story-section__subtitle,
.brand-story-section--visible .brand-story-section__illustration,
.brand-story-section--visible .brand-story-section__description,
.brand-story-section--visible .brand-story-section__actions {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.brand-story-section--visible .brand-story-section__image {
  opacity: 1;
  transform: scale(1);
}

.brand-story-section--visible .brand-story-section__btn--primary:hover,
.brand-story-section--visible .brand-story-section__btn--primary:focus-visible,
.brand-story-section--visible .brand-story-section__btn--secondary:hover,
.brand-story-section--visible .brand-story-section__btn--secondary:focus-visible {
  transform: scale(1.05);
}

/* Tablet */


/* Mobile */

/* =========================================================
   Source: assets/ingredients-section.css
   ========================================================= */

/* Ingredients Section — Oatra Figma */

.ingredients-section {
  --ing-title-size: 48px;
  --ing-title-mb: 32px;
  --ing-label-size: 14px;
  --ing-dot-size: 6px;
  --ing-line-width: 1;
  --ing-anim-duration: 0.7s;
  --ing-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);

  background-color: var(--ing-bg, #ffffff);
  width: 100%;
}

.ingredients-section__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 100px;
  box-sizing: border-box;
}

.ingredients-section__title {
  margin: 0 0 var(--ing-title-mb);
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--ing-title-size);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ing-title-color, #000000);
  text-align: start;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--ing-anim-duration) var(--ing-anim-ease),
    transform var(--ing-anim-duration) var(--ing-anim-ease);
}

.ingredients-section__media {
  position: relative;
  width: 100%;
  border-radius: var(--ing-image-radius, 16px);
  overflow: hidden;
  line-height: 0;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 1s var(--ing-anim-ease) 0.08s,
    transform 1.1s var(--ing-anim-ease) 0.08s;
}

.ingredients-section__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--ing-image-radius, 16px);
}

.ingredients-section__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.ingredients-section__lines line {
  stroke: var(--ing-label-color, #ffffff);
  stroke-width: var(--ing-line-width);
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 0.5s var(--ing-anim-ease);
}

.ingredients-section__hotspots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.ingredients-section__dot {
  position: absolute;
  width: var(--ing-dot-size);
  height: var(--ing-dot-size);
  margin-top: calc(var(--ing-dot-size) / -2);
  margin-left: calc(var(--ing-dot-size) / -2);
  border-radius: 50%;
  background-color: var(--ing-label-color, #ffffff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.45s var(--ing-anim-ease),
    transform 0.45s var(--ing-anim-ease);
}

.ingredients-section__label {
  position: absolute;
  font-family: var(--font-body);
  font-size: var(--ing-label-size);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ing-label-color, #ffffff);
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition:
    opacity 0.5s var(--ing-anim-ease),
    transform 0.5s var(--ing-anim-ease);
}

/* Staggered hotspot reveal */
.ingredients-section--visible .ingredients-section__title {
  opacity: 1;
  transform: translateY(0);
}

.ingredients-section--visible .ingredients-section__media {
  opacity: 1;
  transform: scale(1);
}

.ingredients-section--visible .ingredients-section__lines line {
  opacity: 1;
}

.ingredients-section--visible .ingredients-section__dot {
  opacity: 1;
  transform: scale(1);
}

.ingredients-section--visible .ingredients-section__label {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.ingredients-section--visible .ingredients-section__dot:nth-child(1),
.ingredients-section--visible .ingredients-section__label:nth-child(2) {
  transition-delay: 0.35s;
}

.ingredients-section--visible .ingredients-section__dot:nth-child(3),
.ingredients-section--visible .ingredients-section__label:nth-child(4) {
  transition-delay: 0.42s;
}

.ingredients-section--visible .ingredients-section__dot:nth-child(5),
.ingredients-section--visible .ingredients-section__label:nth-child(6) {
  transition-delay: 0.49s;
}

.ingredients-section--visible .ingredients-section__dot:nth-child(7),
.ingredients-section--visible .ingredients-section__label:nth-child(8) {
  transition-delay: 0.56s;
}

.ingredients-section--visible .ingredients-section__dot:nth-child(9),
.ingredients-section--visible .ingredients-section__label:nth-child(10) {
  transition-delay: 0.63s;
}

.ingredients-section--visible .ingredients-section__dot:nth-child(11),
.ingredients-section--visible .ingredients-section__label:nth-child(12) {
  transition-delay: 0.7s;
}

.ingredients-section--visible .ingredients-section__dot:nth-child(13),
.ingredients-section--visible .ingredients-section__label:nth-child(14) {
  transition-delay: 0.77s;
}

.ingredients-section--visible .ingredients-section__lines line:nth-child(1) { transition-delay: 0.35s; }
.ingredients-section--visible .ingredients-section__lines line:nth-child(2) { transition-delay: 0.42s; }
.ingredients-section--visible .ingredients-section__lines line:nth-child(3) { transition-delay: 0.49s; }
.ingredients-section--visible .ingredients-section__lines line:nth-child(4) { transition-delay: 0.56s; }
.ingredients-section--visible .ingredients-section__lines line:nth-child(5) { transition-delay: 0.63s; }
.ingredients-section--visible .ingredients-section__lines line:nth-child(6) { transition-delay: 0.7s; }
.ingredients-section--visible .ingredients-section__lines line:nth-child(7) { transition-delay: 0.77s; }

/* =========================================================
   Source: assets/our-story-section.css
   ========================================================= */

/* Our Story Section — Oatra Figma */

.our-story-section {
  --os-title-size: 48px;
  --os-title-mb: 40px;
  --os-subtitle-size: 28px;
  --os-subtitle-mb: 28px;
  --os-text-size: 18px;
  --os-text-lh: 1.65;
  --os-paragraph-gap: 20px;
  --os-grid-gap: 56px;
  --os-media-width: 42%;
  --os-anim-duration: 0.75s;
  --os-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);

  background-color: var(--os-bg, #ffffff);
  width: 100%;
}

.our-story-section__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 100px;
  box-sizing: border-box;
}

.our-story-section__title {
  margin: 0 0 var(--os-title-mb);
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--os-title-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--os-title-color, #000000);
  text-align: start;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--os-anim-duration) var(--os-anim-ease),
    transform var(--os-anim-duration) var(--os-anim-ease);
}

.our-story-section__grid {
  display: flex;
  align-items: center;
  gap: var(--os-grid-gap);
}

.our-story-section__media {
  flex: 0 0 var(--os-media-width);
  max-width: var(--os-media-width);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(-24px);
  transition:
    opacity 0.9s var(--os-anim-ease) 0.1s,
    transform 0.9s var(--os-anim-ease) 0.1s;
}

.rtl .our-story-section__media {
  transform: translateX(24px);
}

.our-story-section__illustration {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.our-story-section__content {
  flex: 1;
  min-width: 0;
  text-align: start;
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.9s var(--os-anim-ease) 0.18s,
    transform 0.9s var(--os-anim-ease) 0.18s;
}

.rtl .our-story-section__content {
  transform: translateX(-24px);
}

.our-story-section__subtitle {
  margin: 0 0 var(--os-subtitle-mb);
  font-family: var(--font-heading);
  font-size: var(--os-subtitle-size);
  font-weight: 700;
  line-height: 1.25;
  color: var(--os-subtitle-color, #000000);
}

.our-story-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--os-paragraph-gap);
}

.our-story-section__paragraph {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--os-text-size);
  font-weight: 400;
  line-height: var(--os-text-lh);
  color: var(--os-text-color, #000000);
}

/* RTL column flip */
.rtl .our-story-section__grid {
  flex-direction: row-reverse;
}

/* Visible state */
.our-story-section--visible .our-story-section__title,
.our-story-section--visible .our-story-section__media,
.our-story-section--visible .our-story-section__content {
  opacity: 1;
  transform: translate(0, 0);
}

.our-story-section__illustration--empty {
  width: 100%;
  max-width: 420px;
  min-height: 360px;
  background: linear-gradient(180deg, rgba(247, 244, 255, 0.6) 0%, rgba(255, 252, 240, 0.4) 100%);
  border-radius: 12px;
}

/* =========================================================
   Source: assets/nature-essentials-section.css
   ========================================================= */

/* Nature Essentials Section — Inspired by Nature's Essentials */

.nature-essentials-section {
  --ne-title-size: 48px;
  --ne-title-mb: 56px;
  --ne-circle-size: 168px;
  --ne-circle-pad: 28px;
  --ne-circle-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --ne-label-size: 16px;
  --ne-label-mt: 16px;
  --ne-label-max-w: 168px;
  --ne-grid-gap: 24px;
  --ne-anim-duration: 0.7s;
  --ne-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);

  background-color: var(--ne-bg, #fdf2b3);
  width: 100%;
}

.nature-essentials-section__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px 100px;
  box-sizing: border-box;
}

.nature-essentials-section__title {
  margin: 0 0 var(--ne-title-mb);
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--ne-title-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ne-title-color, #000000);
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--ne-anim-duration) var(--ne-anim-ease),
    transform var(--ne-anim-duration) var(--ne-anim-ease);
}

.nature-essentials-section__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ne-grid-gap);
  align-items: start;
  justify-items: center;
}

.nature-essentials-section__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 200px;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.65s var(--ne-anim-ease),
    transform 0.65s var(--ne-anim-ease);
}

.nature-essentials-section__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ne-circle-size);
  height: var(--ne-circle-size);
  padding: var(--ne-circle-pad);
  border-radius: 50%;
  background-color: var(--ne-circle-color, #ffffff);
  box-shadow: var(--ne-circle-shadow);
  box-sizing: border-box;
  transition:
    transform 0.35s var(--ne-anim-ease),
    box-shadow 0.35s var(--ne-anim-ease);
}

.nature-essentials-section__item:hover .nature-essentials-section__circle {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.09);
}

.nature-essentials-section__icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 112px;
  max-height: 112px;
  object-fit: contain;
  object-position: center;
}

.nature-essentials-section__label {
  margin: var(--ne-label-mt) 0 0;
  padding: 0;
  max-width: var(--ne-label-max-w);
  font-family: var(--font-body);
  font-size: var(--ne-label-size);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ne-label-color, #000000);
  text-align: center;
}

/* Visible + stagger */
.nature-essentials-section--visible .nature-essentials-section__title {
  opacity: 1;
  transform: translateY(0);
}

.nature-essentials-section--visible .nature-essentials-section__item {
  opacity: 1;
  transform: translateY(0);
}

.nature-essentials-section--visible .nature-essentials-section__item:nth-child(1) { transition-delay: 0.1s; }
.nature-essentials-section--visible .nature-essentials-section__item:nth-child(2) { transition-delay: 0.18s; }
.nature-essentials-section--visible .nature-essentials-section__item:nth-child(3) { transition-delay: 0.26s; }
.nature-essentials-section--visible .nature-essentials-section__item:nth-child(4) { transition-delay: 0.34s; }

/* =========================================================
   Source: assets/category-banner-section.css
   ========================================================= */

/* Category Banner — Figma glass overlay on full-bleed hero
   Desktop: image edge-to-edge + centered frosted glass title card
   Mobile: shorter hero, same glass card scaled down
*/

.category-banner-section {
  --cb-title-size: 48px;
  --cb-title-mb: 10px;
  --cb-subtitle-size: 18px;
  --cb-glass-pad-y: 28px;
  --cb-glass-pad-x: 56px;
  --cb-glass-radius: 14px;
  --cb-glass-max-w: 560px;
  --cb-min-h: 520px;
  --cb-max-h: 720px;
  --cb-anim-duration: 0.75s;
  --cb-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cb-title-color: #ffffff;
  --cb-subtitle-color: #ffffff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  background-color: #1a1a1a;
  /* Figma: landscape full-bleed (~1600×720), not 100vh — avoids “eaten” crop */
  height: clamp(var(--cb-min-h), calc(100vw * 720 / 1600), var(--cb-max-h));
}

.category-banner-section--no-image {
  background-color: #2c2c2c;
}

.category-banner-section__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.category-banner-section__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.category-banner-section__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 48px 24px;
  box-sizing: border-box;
}

.category-banner-section__glass {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--cb-glass-max-w);
  padding: var(--cb-glass-pad-y) var(--cb-glass-pad-x);
  border-radius: var(--cb-glass-radius);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--cb-anim-duration) var(--cb-anim-ease),
    transform var(--cb-anim-duration) var(--cb-anim-ease);
}

.category-banner-section__title {
  margin: 0 0 var(--cb-title-mb);
  padding: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--cb-title-size);
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.02em;
}

.category-banner-section__subtitle {
  margin: 0;
  padding: 0;
  max-width: 420px;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--cb-subtitle-size);
  font-weight: 400;
  line-height: 150%;
}

.category-banner-section--visible .category-banner-section__glass {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Source: assets/ingredients-hero-section.css
   ========================================================= */

/* Ingredients page hero — Figma Oatra Desktop 32:941 "Meet The Ingredients" */

/* Header overlay handled by header.jinja → oatra-header-wrap--overlay + oatra-header--overlay
   (same classes/styling path as home) — see header-oatra.css.
   The rules below are a CSS safety net: whenever this hero exists on the page,
   force the exact home header look even if the Jinja flags don't kick in. */

body:has(.ing-hero) .header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
}

body:has(.ing-hero) .oatra-header-wrap {
  background: transparent !important;
}

body:has(.ing-hero) .oatra-header-wrap .oatra-header.search-header.search-header {
  background-color: transparent !important;
  border-bottom: none !important;
}

body:has(.ing-hero) .oatra-header .oatra-header__nav-link {
  color: #ffffff;
}

body:has(.ing-hero) .oatra-header .oatra-header__nav-link:hover,
body:has(.ing-hero) .oatra-header .oatra-header__nav-link:focus-visible {
  color: #ffffff;
  opacity: 0.75;
}

body:has(.ing-hero) .oatra-header .oatra-header__cart-icon,
body:has(.ing-hero) .oatra-header .oatra-header__action-icon {
  filter: none;
}

body:has(.ing-hero) .oatra-header .oatra-header__menu-icon,
body:has(.ing-hero) .oatra-header .oatra-header__menu-icon::before,
body:has(.ing-hero) .oatra-header .oatra-header__menu-icon::after {
  background: #ffffff;
}

/* Neutralize the sticky header on this page — same as home */
body:has(.ing-hero) .oatra-header-wrap__main--sticky,
body:has(.ing-hero) #fixed-header,
body:has(.ing-hero) #fixed-header.sticky {
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Page body content under the hero (rendered from store page editor) */
.ingredients-page-body {
  padding: 0 0 50px;
}

.ing-hero {
  --ing-hero-height: 820px;
  --ing-hero-height-md: 680px;
  --ing-hero-height-sm: 560px;
  --ing-hero-padding-inline: 100px;
  --ing-hero-title-size: 64px;
  --ing-hero-title-mb: 10px;
  --ing-hero-subtitle-size: 24px;
  --ing-hero-card-max-w: 460px;
  --ing-hero-card-radius: 8px;
  --ing-hero-card-overlap: 120px;
  --ing-hero-desc-size: 17px;
  --ing-hero-desc-lh: 1.7;
  --ing-hero-tagline-size: 17px;
  --ing-hero-sun-size: 42px;
  --ing-hero-sun-gap: 24px;
  --ing-hero-headings-card-gap: 56px;
  --ing-hero-anim-duration: 0.8s;
  --ing-hero-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ing-hero-title-color: #fdf2b3;
  --ing-hero-subtitle-color: #ffffff;
  --ing-hero-desc-color: #ffffff;
  --ing-hero-tagline-color: #a79bd5;
  --ing-hero-overlay: rgba(0, 0, 0, 0.22);

  position: relative;
  z-index: 2;
  width: 100%;
  overflow: visible;
  margin-bottom: var(--ing-hero-card-overlap);
}

.ing-hero__inner {
  position: relative;
  width: 100%;
  min-height: var(--ing-hero-height);
}

.ing-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.ing-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

.ing-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--ing-hero-overlay);
  pointer-events: none;
}

/* Figma: headline centered mid-frame, glass card hangs off the bottom edge */
.ing-hero__container {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ing-hero-headings-card-gap);
  padding: 0 var(--ing-hero-padding-inline);
  pointer-events: none;
}

.ing-hero__headings {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 900px;
  margin: 0;
  text-align: center;
  pointer-events: auto;
}

.ing-hero__title {
  margin: 0 0 var(--ing-hero-title-mb);
  color: var(--ing-hero-title-color);
  font-family: var(--font-heading);
  font-size: var(--ing-hero-title-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--ing-hero-anim-duration) var(--ing-hero-anim-ease),
    transform var(--ing-hero-anim-duration) var(--ing-hero-anim-ease);
}

.ing-hero__subtitle {
  margin: 0;
  color: var(--ing-hero-subtitle-color);
  font-family: var(--font-body);
  font-size: var(--ing-hero-subtitle-size);
  font-weight: 500;
  line-height: 150%;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--ing-hero-anim-duration) var(--ing-hero-anim-ease) 0.08s,
    transform var(--ing-hero-anim-duration) var(--ing-hero-anim-ease) 0.08s;
}

.ing-hero__card-wrap {
  display: flex;
  justify-content: center;
  transform: translateY(30%);
  pointer-events: auto;
}

.ing-hero__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(var(--ing-hero-card-max-w), 100%);
  padding: 32px 36px 20px;
  border-radius: var(--ing-hero-card-radius);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--ing-hero-anim-duration) var(--ing-hero-anim-ease) 0.16s,
    transform var(--ing-hero-anim-duration) var(--ing-hero-anim-ease) 0.16s;
}

.ing-hero__sun {
  display: block;
  width: var(--ing-hero-sun-size);
  height: auto;
  margin-bottom: var(--ing-hero-sun-gap);
  object-fit: contain;
}

.ing-hero__description {
  margin: 0;
  max-width: 380px;
  color: var(--ing-hero-desc-color);
  font-family: var(--font-body);
  font-size: var(--ing-hero-desc-size);
  font-weight: 400;
  line-height: var(--ing-hero-desc-lh);
  text-align: center;
}

.ing-hero__tagline {
  margin: 22px 0 0;
  color: var(--ing-hero-tagline-color);
  font-family: var(--font-body);
  font-size: var(--ing-hero-tagline-size);
  font-style: italic;
  font-weight: 500;
  line-height: 150%;
  text-align: center;
}

.ing-hero__art {
  display: block;
  width: 70px;
  height: auto;
  margin-top: 14px;
  object-fit: contain;
}

.ing-hero--visible .ing-hero__title,
.ing-hero--visible .ing-hero__subtitle,
.ing-hero--visible .ing-hero__card {
  opacity: 1;
  transform: translateY(0);
}

/* Tablet */


/* Mobile — match Oatra-Phone scaling */




/* Reduced motion */

/* =========================================================
   Source: sections/ingredients-banner-section.jinja
   ========================================================= */

.ingredients-page-banner {
  --ingredients-banner-bg: #ffffff;

  width: 100%;
  padding: 50px 100px;
  box-sizing: border-box;
  background: var(--ingredients-banner-bg);
}

.ingredients-page-banner__picture {
  display: block;
  width: 100%;
}

.ingredients-page-banner__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* =========================================================
   Source: assets/ingredients-seeds-section.css
   ========================================================= */

/* Ingredients page — Oatra Seeds slider (Figma seeds cards row) */

.ing-seeds {
  --ing-seeds-pad-y: 50px;
  --ing-seeds-pad-x: 50px;
  --ing-seeds-title-size: 40px;
  --ing-seeds-title-mb: 18px;
  --ing-seeds-icon-size: 72px;
  --ing-seeds-icon-mb: 44px;
  --ing-seeds-slide-gap: 24px;
  --ing-seeds-anim-duration: 0.7s;
  --ing-seeds-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ing-seeds-bg: #ffffff;
  --ing-seeds-title-color: #000000;
  --ing-seeds-radius: 8px;

  background-color: var(--ing-seeds-bg);
  width: 100%;
}

.ing-seeds__container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--ing-seeds-pad-y) var(--ing-seeds-pad-x);
  box-sizing: border-box;
}

.ing-seeds__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ing-seeds__title {
  margin: 0 0 var(--ing-seeds-title-mb);
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--ing-seeds-title-size);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ing-seeds-title-color);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--ing-seeds-anim-duration) var(--ing-seeds-anim-ease),
    transform var(--ing-seeds-anim-duration) var(--ing-seeds-anim-ease);
}

.ing-seeds__icon {
  display: block;
  width: var(--ing-seeds-icon-size);
  height: auto;
  margin: 0 0 var(--ing-seeds-icon-mb);
  object-fit: contain;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--ing-seeds-anim-duration) var(--ing-seeds-anim-ease) 0.06s,
    transform var(--ing-seeds-anim-duration) var(--ing-seeds-anim-ease) 0.06s;
}

/* Slider */
.ing-seeds__slider-wrap {
  position: relative;
  width: 100%;
}

.ing-seeds__slider {
  margin: 0 calc(var(--ing-seeds-slide-gap) / -2);
}

.ing-seeds__slider.slick-initialized {
  display: block;
}

.ing-seeds__slider .slick-list {
  overflow: hidden;
  margin: 0;
}

.ing-seeds__slider .slick-track {
  display: flex;
  align-items: stretch;
}

.ing-seeds__slide {
  padding: 0 calc(var(--ing-seeds-slide-gap) / 2);
  box-sizing: border-box;
  height: auto;
}

.ing-seeds__slider .slick-slide {
  height: auto;
}

.ing-seeds__slider .slick-slide > div {
  height: 100%;
}

.ing-seeds .slick-arrow {
  display: none !important;
}

.ing-seeds__item {
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.65s var(--ing-seeds-anim-ease),
    transform 0.65s var(--ing-seeds-anim-ease);
}

.ing-seeds__slider .slick-slide:nth-child(1) .ing-seeds__item { transition-delay: 0.08s; }
.ing-seeds__slider .slick-slide:nth-child(2) .ing-seeds__item { transition-delay: 0.14s; }
.ing-seeds__slider .slick-slide:nth-child(3) .ing-seeds__item { transition-delay: 0.2s; }
.ing-seeds__slider .slick-slide:nth-child(4) .ing-seeds__item { transition-delay: 0.26s; }
.ing-seeds__slider .slick-slide:nth-child(5) .ing-seeds__item { transition-delay: 0.32s; }
.ing-seeds__slider .slick-slide:nth-child(6) .ing-seeds__item { transition-delay: 0.38s; }
.ing-seeds__slider .slick-slide:nth-child(7) .ing-seeds__item { transition-delay: 0.44s; }
.ing-seeds__slider .slick-slide:nth-child(8) .ing-seeds__item { transition-delay: 0.5s; }

.ing-seeds__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ing-seeds__link[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

.ing-seeds__link:focus-visible {
  outline: 2px solid var(--ing-seeds-title-color);
  outline-offset: 3px;
}

/* Figma: tall portrait seed cards (~2/3 ratio) */
.ing-seeds__image {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--ing-seeds-radius);
  transition: transform 0.4s var(--ing-seeds-anim-ease);
}

.ing-seeds__link:hover .ing-seeds__image,
.ing-seeds__link:focus-visible .ing-seeds__image {
  transform: scale(1.02);
}

.ing-seeds--visible .ing-seeds__title,
.ing-seeds--visible .ing-seeds__icon,
.ing-seeds--visible .ing-seeds__item {
  opacity: 1;
  transform: translateY(0);
}

/* Tablet */


/* Mobile — slidesToShow via JS */

/* =========================================================
   Source: assets/our-story-hero-section.css
   ========================================================= */

/* Our Story page hero — Figma Oatra Desktop 34:1225 "Our Story / Castle of Health" */

/* Header overlay handled by header.jinja → oatra-header-wrap--overlay + oatra-header--overlay.
   The rules below are a CSS safety net: whenever this hero exists on the page,
   force the exact home header look even if the Jinja flags don't kick in. */

body:has(.story-hero) .header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
}

body:has(.story-hero) .oatra-header-wrap {
  background: transparent !important;
}

body:has(.story-hero) .oatra-header-wrap .oatra-header.search-header.search-header {
  background-color: transparent !important;
  border-bottom: none !important;
}

body:has(.story-hero) .oatra-header .oatra-header__nav-link {
  color: #ffffff;
}

body:has(.story-hero) .oatra-header .oatra-header__nav-link:hover,
body:has(.story-hero) .oatra-header .oatra-header__nav-link:focus-visible {
  color: #ffffff;
  opacity: 0.75;
}

body:has(.story-hero) .oatra-header .oatra-header__cart-icon,
body:has(.story-hero) .oatra-header .oatra-header__action-icon {
  filter: none;
}

body:has(.story-hero) .oatra-header .oatra-header__menu-icon,
body:has(.story-hero) .oatra-header .oatra-header__menu-icon::before,
body:has(.story-hero) .oatra-header .oatra-header__menu-icon::after {
  background: #ffffff;
}

/* Neutralize the sticky header on this page — same as home */
body:has(.story-hero) .oatra-header-wrap__main--sticky,
body:has(.story-hero) #fixed-header,
body:has(.story-hero) #fixed-header.sticky {
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── Hero ── */
.story-hero {
  --story-hero-height: 820px;
  --story-hero-height-md: 640px;
  --story-hero-height-sm: 520px;
  --story-hero-padding-inline: 100px;
  --story-hero-title-size: 64px;
  --story-hero-title-mb: 12px;
  --story-hero-subtitle-size: 24px;
  --story-hero-anim-duration: 0.8s;
  --story-hero-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --story-hero-title-color: #fdf2b3;
  --story-hero-subtitle-color: #ffffff;
  --story-hero-overlay: rgba(0, 0, 0, 0.18);

  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
}

.story-hero__inner {
  position: relative;
  width: 100%;
  min-height: var(--story-hero-height);
}

.story-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.story-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

.story-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--story-hero-overlay);
  pointer-events: none;
}

/* Figma: title + subtitle centered mid-frame */
.story-hero__container {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--story-hero-padding-inline);
  pointer-events: none;
}

.story-hero__headings {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 900px;
  margin: 0;
  text-align: center;
  pointer-events: auto;
}

.story-hero__title {
  margin: 0 0 var(--story-hero-title-mb);
  color: var(--story-hero-title-color);
  font-family: var(--font-heading);
  font-size: var(--story-hero-title-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--story-hero-anim-duration) var(--story-hero-anim-ease),
    transform var(--story-hero-anim-duration) var(--story-hero-anim-ease);
}

.story-hero__subtitle {
  margin: 0;
  color: var(--story-hero-subtitle-color);
  font-family: var(--font-body);
  font-size: var(--story-hero-subtitle-size);
  font-weight: 500;
  line-height: 150%;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--story-hero-anim-duration) var(--story-hero-anim-ease) 0.08s,
    transform var(--story-hero-anim-duration) var(--story-hero-anim-ease) 0.08s;
}

.story-hero--visible .story-hero__title,
.story-hero--visible .story-hero__subtitle {
  opacity: 1;
  transform: translateY(0);
}

/* Tablet */


/* Mobile — match Oatra-Phone scaling */




/* Reduced motion */

/* =========================================================
   Source: assets/our-story-castle-section.css
   ========================================================= */

/* Our Story — Castle of Health narrative (Figma desktop + mobile) */

.story-castle {
  --story-castle-bg: #ffffff;
  --story-castle-title-color: #000000;
  --story-castle-text-color: #000000;
  --story-castle-title-size: 48px;
  --story-castle-text-size: 18px;
  --story-castle-gap: 64px;
  --story-castle-paragraph-gap: 24px;
  --story-castle-ease: cubic-bezier(0.22, 1, 0.36, 1);

  width: 100%;
  background: var(--story-castle-bg);
}

.story-castle__container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 100px 70px;
  box-sizing: border-box;
}

.story-castle__title {
  margin: 0 0 54px;
  color: var(--story-castle-title-color);
  font-family: var(--font-heading);
  font-size: var(--story-castle-title-size);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--story-castle-ease),
              transform 0.7s var(--story-castle-ease);
}

.story-castle__grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.35fr);
  align-items: end;
  gap: var(--story-castle-gap);
}

.story-castle__media {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.85s var(--story-castle-ease) 0.08s,
              transform 0.85s var(--story-castle-ease) 0.08s;
}

.rtl .story-castle__media {
  transform: translateX(24px);
}

.story-castle__image {
  display: block;
  width: 100%;
  max-width: 390px;
  max-height: 560px;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
}

.story-castle__content {
  align-self: center;
  min-width: 0;
  color: var(--story-castle-text-color);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.85s var(--story-castle-ease) 0.16s,
              transform 0.85s var(--story-castle-ease) 0.16s;
}

.rtl .story-castle__content {
  transform: translateX(-24px);
}

.story-castle__content p {
  margin: 0;
  color: inherit;
  font-family: var(--font-body);
  font-size: var(--story-castle-text-size);
  font-weight: 400;
  line-height: 1.55;
  white-space: pre-line;
}

.story-castle__content p + p {
  margin-top: var(--story-castle-paragraph-gap);
}

.story-castle--visible .story-castle__title,
.story-castle--visible .story-castle__media,
.story-castle--visible .story-castle__content {
  opacity: 1;
  transform: translate(0, 0);
}



/* Oatra-Phone: image first, then text */

/* =========================================================
   Source: assets/our-story-members-section.css
   ========================================================= */

/* Our Story — Castle Members / Inspired By Nature's Essentials */

.story-members {
  --sm-page-bg: #faf8f4;
  --sm-band-bg: #e1e6d3;
  --sm-title-color: #000000;
  --sm-label-color: #000000;
  --sm-card-bg: rgba(255, 255, 255, 0.55);
  --sm-eyebrow-size: 28px;
  --sm-title-size: 36px;
  --sm-label-size: 15px;
  --sm-card-size: 148px;
  --sm-icon-size: 88px;
  --sm-flag-size: 48px;
  --sm-ease: cubic-bezier(0.22, 1, 0.36, 1);

  width: 100%;
  background: var(--sm-page-bg);
}

.story-members__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 100px 40px;
  box-sizing: border-box;
}

.story-members__eyebrow {
  margin: 0 0 18px;
  color: var(--sm-title-color);
  font-family: var(--font-heading);
  font-size: var(--sm-eyebrow-size);
  font-weight: 500;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--sm-ease), transform 0.7s var(--sm-ease);
}

.story-members__flag {
  display: block;
  width: var(--sm-flag-size);
  height: auto;
  margin: 0 0 22px;
  object-fit: contain;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--sm-ease) 0.06s,
              transform 0.7s var(--sm-ease) 0.06s;
}

.story-members__title {
  margin: 0;
  max-width: 720px;
  color: var(--sm-title-color);
  font-family: var(--font-heading);
  font-size: var(--sm-title-size);
  font-weight: 600;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--sm-ease) 0.1s,
              transform 0.7s var(--sm-ease) 0.1s;
}

.story-members__band {
  width: 100%;
  background: var(--sm-band-bg);
  padding: 56px 100px;
  box-sizing: border-box;
}

.story-members__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 28px;
  align-items: start;
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.story-members__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 180px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--sm-ease), transform 0.65s var(--sm-ease);
}

.story-members__grid .story-members__item:nth-child(1) { transition-delay: 0.08s; }
.story-members__grid .story-members__item:nth-child(2) { transition-delay: 0.14s; }
.story-members__grid .story-members__item:nth-child(3) { transition-delay: 0.2s; }
.story-members__grid .story-members__item:nth-child(4) { transition-delay: 0.26s; }
.story-members__grid .story-members__item:nth-child(5) { transition-delay: 0.32s; }
.story-members__grid .story-members__item:nth-child(6) { transition-delay: 0.38s; }

.story-members__card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sm-card-size);
  height: var(--sm-card-size);
  padding: 22px;
  border-radius: 28px;
  background: var(--sm-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 6px 20px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  transition: transform 0.35s var(--sm-ease), box-shadow 0.35s var(--sm-ease);
}

.story-members__item:hover .story-members__card {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 10px 28px rgba(0, 0, 0, 0.08);
}

.story-members__icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: var(--sm-icon-size);
  max-height: var(--sm-icon-size);
  object-fit: contain;
  object-position: center;
}

.story-members__label {
  margin: 16px 0 0;
  max-width: 150px;
  color: var(--sm-label-color);
  font-family: var(--font-body);
  font-size: var(--sm-label-size);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  white-space: pre-line;
}

.story-members--visible .story-members__eyebrow,
.story-members--visible .story-members__flag,
.story-members--visible .story-members__title,
.story-members--visible .story-members__item {
  opacity: 1;
  transform: translateY(0);
}



/* Mobile — 2×2 grid */

/* =========================================================
   Source: assets/our-story-gallery-section.css
   ========================================================= */

/* Our Story — photo gallery grid (Figma 4×2 collage, full-bleed) */

.story-gallery {
  --sg-bg: #ffffff;
  --sg-gap: 10px;
  --sg-ease: cubic-bezier(0.22, 1, 0.36, 1);

  width: 100%;
  padding: 50px 0;
  background: var(--sg-bg);
}

/* Full-bleed: no side padding — the grid takes the entire width */
.story-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sg-gap);
  width: 100%;
  box-sizing: border-box;
}

.story-gallery__link {
  display: block;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.65s var(--sg-ease),
    transform 0.65s var(--sg-ease);
}

.story-gallery__grid .story-gallery__link:nth-child(1) { transition-delay: 0.04s; }
.story-gallery__grid .story-gallery__link:nth-child(2) { transition-delay: 0.08s; }
.story-gallery__grid .story-gallery__link:nth-child(3) { transition-delay: 0.12s; }
.story-gallery__grid .story-gallery__link:nth-child(4) { transition-delay: 0.16s; }
.story-gallery__grid .story-gallery__link:nth-child(5) { transition-delay: 0.2s; }
.story-gallery__grid .story-gallery__link:nth-child(6) { transition-delay: 0.24s; }
.story-gallery__grid .story-gallery__link:nth-child(7) { transition-delay: 0.28s; }
.story-gallery__grid .story-gallery__link:nth-child(8) { transition-delay: 0.32s; }

.story-gallery__link[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

.story-gallery__link:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

.story-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  transition: transform 0.45s var(--sg-ease);
}

.story-gallery__link:hover .story-gallery__image,
.story-gallery__link:focus-visible .story-gallery__image {
  transform: scale(1.03);
}

.story-gallery--visible .story-gallery__link {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile — 2 columns, still full-bleed */

/* =========================================================
   Source: assets/our-story-closing-section.css
   ========================================================= */

/* Our Story — centered closing illustration (desktop + Oatra-Phone) */

.story-closing {
  --story-closing-bg: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 520px;
  padding: 50px 20px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--story-closing-bg);
}

.story-closing__link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.story-closing__link[aria-disabled="true"] {
  pointer-events: none;
  cursor: default;
}

.story-closing__link:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 6px;
}

.story-closing__picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.story-closing__image {
  display: block;
  width: min(720px, 100%);
  height: auto;
  max-height: 440px;
  object-fit: contain;
  object-position: center;
}

/* =========================================================
   Source: assets/footer-oatra.css
   ========================================================= */

/* Oatra Footer — Figma cream band
   Desktop: centered tagline + social; watermark left @ 10%
   Bottom bar: logo physical left + text physical right
*/

.footer-oatra {
  --fo-bg: #fdf2b3;
  --fo-text: #000000;
  --fo-muted: rgba(0, 0, 0, 0.72);
  --fo-line: rgba(0, 0, 0, 0.12);
  --fo-social-bg: rgba(255, 255, 255, 0.16);
  --fo-social-border: rgba(0, 0, 0, 0.14);
  --fo-pad-y: 72px;
  --fo-pad-x: 100px;
  --fo-title-size: 40px;
  --fo-desc-size: 16px;
  --fo-desc-max: 600px;
  --fo-social-size: 44px;
  --fo-social-gap: 14px;
  --fo-bar-pad-y: 28px;
  --fo-logo-h: 48px;
  --fo-copy-size: 13px;
  --fo-watermark-pct: 10;

  position: relative;
  width: 100%;
  background-color: #F8E8AD;
  color: var(--fo-text);
  overflow: hidden;
}

/* Real <img> — avoids zero-height ::before on auto-height parents */
.footer-oatra__watermark {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  display: block;
  width: min(58vw, 765px);
  max-width: 765px;
  height: auto;
  max-height: 92%;
  object-fit: contain;
  object-position: left bottom;
  opacity: calc(var(--fo-watermark-pct) * 0.01);
  /* Light line-art on cream needs multiply to read */
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
}

.footer-oatra__main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: var(--fo-pad-y) var(--fo-pad-x);
  box-sizing: border-box;
}

.footer-oatra__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.footer-oatra__title {
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--fo-title-size);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.02em;
  color: var(--fo-text);
}

.footer-oatra__description {
  margin: 0 0 28px;
  max-width: var(--fo-desc-max);
  font-family: var(--font-body);
  font-size: var(--fo-desc-size);
  font-weight: 400;
  line-height: 150%;
  color: #0A142F;
}

.footer-oatra__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fo-social-gap);
  direction: ltr;
}

.footer-oatra__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fo-social-size);
  height: var(--fo-social-size);
  border-radius: 50%;
  border: 1px solid var(--fo-social-border);
  background-color: var(--fo-social-bg);
  color: var(--fo-text);
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.footer-oatra__social-link:hover,
.footer-oatra__social-link:focus-visible {
  background-color: rgba(255, 255, 255, 0.34);
  border-color: rgba(0, 0, 0, 0.24);
  transform: scale(1.06);
  text-decoration: none;
  color: var(--fo-text);
}

.footer-oatra__social-link:focus-visible {
  outline: 2px solid var(--fo-text);
  outline-offset: 3px;
}

.footer-oatra__social-link--glyph {
  border: 1px solid #D9D9D933;
  background-color: rgb(255 255 255 / 16%);
}

.footer-oatra__social-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: var(--fo-text);
}

/* Bottom bar — logo left, text right (physical, both LTR & RTL) */
.footer-oatra__bar {
  position: relative;
  border-top: 1px solid var(--fo-line);
  padding: var(--fo-bar-pad-y) var(--fo-pad-x);
  box-sizing: border-box;
}

.footer-oatra__bar-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  direction: ltr;
}

.footer-oatra__bar-start {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.footer-oatra__logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.footer-oatra__logo-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.footer-oatra__logo {
  display: block;
  width: auto;
  max-width: min(220px, 50vw);
  height: var(--fo-logo-h);
  object-fit: contain;
  object-position: left center;
}

.footer-oatra__copy {
  margin: 0;
  flex-shrink: 1;
  font-family: var(--font-body);
  font-size: var(--fo-copy-size);
  font-weight: 400;
  line-height: 1.4;
  color: var(--fo-text);
  text-align: right;
  white-space: nowrap;
}

.menu-header-theme-bg-primary {
    background-color: #FFF !important;
}

/* end_drag_css */



/* start_responsive_css */

/* =========================================================
   Responsive source: assets/product-card.css
   ========================================================= */

@media (max-width: 575px) {
  .oatra-product-card__media {
    min-height: 180px;
    padding: 20px 16px 16px;
  }

  .oatra-product-card__body {
    padding: 0 16px 16px;
  }

  .oatra-product-card__title {
    font-size: 16px;
  }

  .oatra-product-card__price {
    font-size: 15px;
  }

  .oatra-product-card__cart-btn {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oatra-product-card,
  .oatra-product-card__cart-btn {
    transition: background-color 0.2s ease;
  }

  .oatra-product-card:hover {
    transform: none;
  }

  .oatra-product-card__cart-btn:hover,
  .oatra-product-card__cart-btn:focus-visible {
    transform: none;
  }
}

/* =========================================================
   Responsive source: assets/oatra-products-listing.css
   ========================================================= */

@media (max-width: 1199px) {
  .oatra-products-listing {
    padding: 40px 40px;
  }
}

@media (max-width: 991px) {
  .oatra-products-listing {
    padding: 28px 20px;
    flex-direction: column;
  }

  .oatra-products-listing .products-list .prod-col,
  .oatra-products-listing .products-list .prod-col-attr,
  .oatra-products-listing .products-list .prod-col-tb {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 575px) {
  .oatra-products-listing {
    padding: 24px 16px;
  }

  .oatra-products-listing .products-list {
    margin-left: -8px;
    margin-right: -8px;
  }

  .oatra-products-listing .products-list .prod-col,
  .oatra-products-listing .products-list .prod-col-attr,
  .oatra-products-listing .products-list .prod-col-tb {
    padding: 8px;
  }
}

/* =========================================================
   Responsive source: assets/header-oatra.css
   ========================================================= */

@media (max-width: 991px) {
  :root {
    --oatra-header-height: var(--oatra-header-height-mobile);
  }

  .oatra-header__container {
    padding: 0 25px;
  }

  .oatra-header__bar {
    gap: 8px;
  }

  .oatra-header__logo {
    max-height: 40px;
  }

  .oatra-header__nav-link {
    font-size: 14px;
  }

  .oatra-header__actions {
    gap: 0;
  }

  .oatra-header__cart,
  .oatra-header__icon-btn {
    width: 40px;
    height: 40px;
  }

  /* RTL mobile: swap sides — cart on the left, hamburger on the right */
  .rtl .oatra-header__end {
    order: 1;
    justify-content: flex-start;
  }

  .rtl .oatra-header__brand {
    order: 2;
  }

  .rtl .oatra-header__start {
    order: 3;
    justify-content: flex-end;
  }
}

@media (max-width: 575px) {
  .oatra-header__container {
    padding: 0 16px;
  }
}

/* =========================================================
   Responsive source: assets/hero-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .hero-section {
    --hero-padding-inline: 64px;
    --hero-title-size: 56px;
    --hero-card-max-w: 520px;
    --hero-card-pad-x: 44px;
    --hero-card-overlap: 100px;
  }

  .hero-section__inner {
    min-height: var(--hero-height-md);
  }
}

@media (max-width: 991px) {
  .hero-section {
    --hero-padding-inline: 24px;
    --hero-headings-card-gap: 40px;
    --hero-title-size: 40px;
    --hero-subtitle-size: 17px;
    --hero-card-max-w: calc(100% - 8px);
    --hero-card-pad-y: 32px;
    --hero-card-pad-x: 24px;
    --hero-desc-size: 15px;
    --hero-sun-gap: 20px;
    --hero-card-overlap: 80px;
  }

  .hero-section__inner {
    min-height: var(--hero-height-sm);
  }

  .hero-section__description {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .hero-section {
    --hero-title-size: 32px;
    --hero-subtitle-size: 15px;
    --hero-card-pad-y: 28px;
    --hero-sun-size: 40px;
    --hero-card-overlap: 70px;
  }

  .hero-section__container {
    padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-section__title,
  .hero-section__subtitle,
  .hero-section__card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Responsive source: assets/finest-ingredients-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .finest-ingredients-section {
    --fi-title-size: 40px;
    --fi-title-mb: 44px;
    --fi-container-pad-end: 64px;
    --fi-media-min-h: 480px;
    --fi-arrow-w: 88px;
    --fi-feature-2-inset: 35px;
  }
}

@media (max-width: 991px) {
  .finest-ingredients-section {
    --fi-title-size: 32px;
    --fi-title-mb: 28px;
    --fi-feature-title-size: 18px;
    --fi-feature-desc-size: 15px;
    --fi-feature-gap: 28px;
    --fi-arrow-w: 72px;
    --fi-arrow-gap: 14px;
    --fi-image-arrow-gap: 24px;
    --fi-feature-2-inset: 0;
    --fi-container-pad-y: 36px;
    --fi-container-pad-end: 24px;
  }

  .finest-ingredients-section__container {
    padding: var(--fi-container-pad-y) var(--fi-container-pad-end);
  }

  .finest-ingredients-section__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .finest-ingredients-section__inner--no-image {
    padding-inline-start: 0;
  }

  .finest-ingredients-section__media {
    order: -1;
    min-height: auto;
    justify-content: center;
    align-items: center;
  }

  .finest-ingredients-section__image {
    margin: 0 auto;
    max-width: 420px;
    object-position: center;
  }

  .finest-ingredients-section__content {
    align-items: stretch;
  }

  .finest-ingredients-section__title {
    text-align: left;
  }

  .finest-ingredients-section__feature:nth-child(2) {
    margin-inline-start: 0;
  }
}

@media (max-width: 575px) {
  .finest-ingredients-section {
    --fi-title-size: 28px;
    --fi-feature-title-size: 16px;
    --fi-feature-desc-size: 14px;
    --fi-feature-gap: 24px;
    --fi-arrow-w: 64px;
    --fi-container-pad-y: 28px;
    --fi-container-pad-end: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .finest-ingredients-section__media,
  .finest-ingredients-section__title,
  .finest-ingredients-section__feature {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Responsive source: assets/why-oatra-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .why-oatra-section {
    --wo-pad-x: 48px;
    --wo-title-size: 48px;
    --wo-content-max: 680px;
  }
}

@media (max-width: 991px) {
  .why-oatra-section {
    --wo-min-h: 480px;
    --wo-pad-y: 64px;
    --wo-pad-x: 24px;
    --wo-content-max: 100%;
    --wo-title-size: 32px;
    --wo-title-mb: 28px;
    --wo-desc-size: 16px;
    --wo-desc-mb: 32px;
    --wo-btn-py: 14px;
    --wo-btn-px: 40px;
    --wo-btn-font-size: 15px;
  }
}

@media (max-width: 575px) {
  .why-oatra-section {
    --wo-min-h: 420px;
    --wo-pad-y: 48px;
    --wo-pad-x: 20px;
    --wo-title-size: 28px;
    --wo-title-mb: 24px;
    --wo-desc-size: 15px;
    --wo-desc-lh: 1.65;
    --wo-desc-mb: 28px;
    --wo-btn-px: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .why-oatra-section__title,
  .why-oatra-section__description,
  .why-oatra-section__btn {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .why-oatra-section--visible .why-oatra-section__btn:hover,
  .why-oatra-section--visible .why-oatra-section__btn:focus-visible {
    transform: none;
  }
}

/* =========================================================
   Responsive source: assets/oatra-products-section.css
   ========================================================= */

@media (max-width: 991px) {
  .oatra-products-section__container {
    padding: 20px 25px;
  }

  .oatra-products-section__title {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .oatra-products-section .products-slider {
    margin: 0 -8px;
  }

  .oatra-products-section .products-slider .prod-col {
    padding: 15px 8px;
    width: 72vw;
    min-width: 260px;
    max-width: 300px;
    display: inline-block;
    vertical-align: top;
    white-space: normal;
  }

  .oatra-products-section .products-slider-wrapper {
    overflow-x: hidden;
    margin: 0;
  }

  .oatra-products-section .products-slider {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .oatra-products-section .products-slider::-webkit-scrollbar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oatra-products-section .oatra-product-card {
    transition: box-shadow 0.2s ease;
  }
}

/* =========================================================
   Responsive source: assets/the-collection-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .the-collection-section {
    --tc-pad-x: 48px;
    --tc-title-size: 32px;
    --tc-subtitle-size: 20px;
    --tc-slide-gap: 10px;
  }
}

@media (max-width: 991px) {
  .the-collection-section {
    --tc-pad-y: 36px;
    --tc-pad-x: 24px;
    --tc-title-size: 28px;
    --tc-title-mb: 16px;
    --tc-flag-size: 48px;
    --tc-flag-mb: 16px;
    --tc-subtitle-size: 18px;
    --tc-subtitle-mb: 32px;
    --tc-slide-gap: 8px;
    --tc-btn-font-size: 14px;
  }

  .the-collection-section__container {
    padding: 36px 24px;
  }

}

@media (max-width: 575px) {
  .the-collection-section {
    --tc-pad-y: 28px;
    --tc-pad-x: 20px;
    --tc-title-size: 24px;
    --tc-subtitle-size: 16px;
    --tc-slide-gap: 6px;
    --tc-btn-font-size: 13px;
  }

  .the-collection-section__container {
    padding: 28px 20px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .the-collection-section__title,
  .the-collection-section__flag,
  .the-collection-section__subtitle,
  .the-collection-section__card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .the-collection-section__card-link:hover .the-collection-section__card-btn,
  .the-collection-section__card-link:focus-visible .the-collection-section__card-btn {
    transform: translate(-50%, -50%);
  }
}

/* =========================================================
   Responsive source: assets/banners-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .banners-section {
    --bn-pad-x: 48px;
    --bn-caption-size: 20px;
    --bn-min-h: 380px;
  }
}

@media (max-width: 991px) {
  .banners-section {
    --bn-pad-y: 28px;
    --bn-pad-x: 20px;
    --bn-arrows-mb: 12px;
    --bn-arrow-size: 36px;
    --bn-caption-size: 16px;
    --bn-caption-inset: 16px;
    --bn-sun-size: 36px;
    --bn-sun-inset: 14px;
    --bn-min-h: 320px;
    --bn-radius: 18px;
  }

  .banners-section__container {
    padding: 28px 20px;
  }
}

@media (max-width: 575px) {
  .banners-section {
    --bn-pad-y: 24px;
    --bn-caption-size: 15px;
    --bn-min-h: 280px;
    --bn-sun-size: 32px;
  }

  .banners-section__container {
    padding: 24px 16px;
  }
}

/* =========================================================
   Responsive source: assets/most-wanted-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .most-wanted-section {
    --mw-pad-x: 48px;
    --mw-title-size: 40px;
    --mw-slide-gap: 10px;
  }
}

@media (max-width: 991px) {
  .most-wanted-section {
    --mw-pad-y: 36px;
    --mw-pad-x: 24px;
    --mw-title-size: 32px;
    --mw-title-mb: 16px;
    --mw-flag-size: 48px;
    --mw-flag-mb: 28px;
    --mw-slide-gap: 8px;
  }

  .most-wanted-section__container {
    padding: 36px 24px;
  }
}

@media (max-width: 575px) {
  .most-wanted-section {
    --mw-pad-y: 28px;
    --mw-pad-x: 20px;
    --mw-title-size: 28px;
    --mw-flag-mb: 24px;
    --mw-slide-gap: 6px;
  }

  .most-wanted-section__container {
    padding: 28px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .most-wanted-section__title,
  .most-wanted-section__flag,
  .most-wanted-section__item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .most-wanted-section__image {
    transition: none;
  }

  .most-wanted-section__link:hover .most-wanted-section__image,
  .most-wanted-section__link:focus-visible .most-wanted-section__image {
    transform: none;
  }
}

/* =========================================================
   Responsive source: assets/gifts-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .gifts-section {
    --gf-title-size: 34px;
    --gf-card-min-h: 340px;
    --gf-card-overflow-top: 40px;
    --gf-image-max-w: 340px;
  }
}

@media (max-width: 991px) {
  .gifts-section {
    --gf-title-size: 28px;
    --gf-desc-size: 14px;
    --gf-card-min-h: auto;
    --gf-card-overflow-top: 32px;
    --gf-sun-size: 30px;
    --gf-sun-inset: 14px;
    --gf-image-max-w: 220px;
  }

  .gifts-section__shell {
    padding: calc(36px + var(--gf-card-overflow-top)) 24px 36px;
  }

  .gifts-section__card {
    flex-direction: column;
    padding-bottom: 8px;
  }

  .gifts-section__inner {
    flex-direction: column;
    min-height: 0;
  }

  .gifts-section__media {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: var(--gf-image-max-w);
    height: auto;
    margin: calc(var(--gf-card-overflow-top) * -1) auto 0;
  }

  .gifts-section__image {
    width: 100%;
    height: auto;
    max-height: 280px;
    object-position: center bottom;
  }

  .gifts-section__content {
    padding: 12px 28px 36px;
  }
}

@media (max-width: 575px) {
  .gifts-section {
    --gf-title-size: 24px;
    --gf-desc-size: 13px;
    --gf-btn-px: 30px;
    --gf-card-overflow-top: 24px;
    --gf-image-max-w: 180px;
  }

  .gifts-section__shell {
    padding: calc(28px + var(--gf-card-overflow-top)) 20px 28px;
  }

  .gifts-section__content {
    padding: 8px 20px 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gifts-section__media,
  .gifts-section__content,
  .gifts-section__sun {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .gifts-section__btn:hover,
  .gifts-section__btn:focus-visible {
    transform: none;
  }
}

/* =========================================================
   Responsive source: assets/brand-story-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .brand-story-section {
    --bs-title-size: 40px;
    --bs-subtitle-size: 18px;
    --bs-desc-size: 17px;
    --bs-min-height: 560px;
  }
}

@media (max-width: 991px) {
  .brand-story-section {
    --bs-title-size: 36px;
    --bs-subtitle-mb: 32px;
    --bs-illustration-mb: 32px;
    --bs-desc-mb: 32px;
    --bs-desc-size: 16px;
    --bs-min-height: auto;
  }

  .brand-story-section__container {
    padding: 20px 25px;
  }

  .brand-story-section__grid {
    grid-template-columns: 1fr;
  }

  .brand-story-section__media {
    order: -1;
    min-height: 360px;
  }

  .brand-story-section__image {
    min-height: 360px;
  }
}

@media (max-width: 575px) {
  .brand-story-section {
    --bs-title-size: 32px;
    --bs-subtitle-size: 16px;
    --bs-btn-px: 32px;
    --bs-btn-font-size: 15px;
  }

  .brand-story-section__media {
    min-height: 300px;
  }

  .brand-story-section__image {
    min-height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-story-section__title,
  .brand-story-section__subtitle,
  .brand-story-section__illustration,
  .brand-story-section__description,
  .brand-story-section__actions,
  .brand-story-section__image {
    opacity: 1;
    transform: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .brand-story-section__btn:hover,
  .brand-story-section__btn:focus-visible {
    transform: none;
  }
}

/* =========================================================
   Responsive source: assets/ingredients-section.css
   ========================================================= */

@media (max-width: 991px) {
  .ingredients-section {
    --ing-title-size: 32px;
    --ing-title-mb: 24px;
    --ing-label-size: 12px;
    --ing-dot-size: 5px;
  }

  .ingredients-section__container {
    padding: 20px 25px;
  }
}

@media (max-width: 575px) {
  .ingredients-section {
    --ing-label-size: 11px;
    --ing-dot-size: 4px;
  }

  .ingredients-section__label {
    white-space: normal;
    max-width: 88px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ingredients-section__title,
  .ingredients-section__media,
  .ingredients-section__dot,
  .ingredients-section__label,
  .ingredients-section__lines line {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .ingredients-section__label {
    transform: translate(-50%, -50%);
  }
}

/* =========================================================
   Responsive source: assets/our-story-section.css
   ========================================================= */

@media (max-width: 991px) {
  .our-story-section {
    --os-title-size: 32px;
    --os-title-mb: 28px;
    --os-subtitle-size: 22px;
    --os-subtitle-mb: 20px;
    --os-text-size: 16px;
    --os-paragraph-gap: 16px;
    --os-grid-gap: 28px;
  }

  .our-story-section__illustration--empty {
    min-height: 240px;
    max-width: 280px;
    margin: 0 auto;
  }

  .our-story-section__container {
    padding: 20px 25px;
  }

  .our-story-section__grid,
  .rtl .our-story-section__grid {
    flex-direction: column;
    align-items: stretch;
  }

  .our-story-section__media {
    flex: none;
    max-width: 100%;
    width: 100%;
    transform: translateY(20px);
  }

  .rtl .our-story-section__media {
    transform: translateY(20px);
  }

  .our-story-section__content {
    transform: translateY(20px);
  }

  .rtl .our-story-section__content {
    transform: translateY(20px);
  }

  .our-story-section__illustration {
    max-width: 280px;
  }

  .our-story-section--visible .our-story-section__media,
  .our-story-section--visible .our-story-section__content,
  .rtl .our-story-section--visible .our-story-section__media,
  .rtl .our-story-section--visible .our-story-section__content {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .our-story-section__title,
  .our-story-section__media,
  .our-story-section__content {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   Responsive source: assets/nature-essentials-section.css
   ========================================================= */

@media (max-width: 991px) {
  .nature-essentials-section {
    --ne-title-size: 32px;
    --ne-title-mb: 36px;
    --ne-circle-size: 140px;
    --ne-circle-pad: 22px;
    --ne-label-size: 14px;
    --ne-label-mt: 12px;
    --ne-label-max-w: 140px;
    --ne-grid-gap: 20px;
  }

  .nature-essentials-section__container {
    padding: 20px 25px;
  }

  .nature-essentials-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }

  .nature-essentials-section__icon {
    max-width: 96px;
    max-height: 96px;
  }
}

@media (max-width: 479px) {
  .nature-essentials-section {
    --ne-circle-size: 128px;
    --ne-circle-pad: 20px;
  }

  .nature-essentials-section__grid {
    gap: 24px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nature-essentials-section__title,
  .nature-essentials-section__item,
  .nature-essentials-section__circle {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .nature-essentials-section__item:hover .nature-essentials-section__circle {
    transform: none;
  }
}

/* =========================================================
   Responsive source: assets/category-banner-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .category-banner-section {
    --cb-min-h: 460px;
    --cb-max-h: 600px;
    --cb-title-size: 40px;
    --cb-glass-pad-x: 40px;
  }
}

@media (max-width: 991px) {
  .category-banner-section {
    --cb-min-h: 380px;
    --cb-max-h: 480px;
    --cb-title-size: 32px;
    --cb-subtitle-size: 15px;
    --cb-glass-pad-y: 22px;
    --cb-glass-pad-x: 28px;
    --cb-glass-max-w: 420px;
  }

  .category-banner-section__overlay {
    padding: 36px 20px;
  }
}

@media (max-width: 575px) {
  .category-banner-section {
    --cb-min-h: 300px;
    --cb-max-h: 380px;
    --cb-title-size: 26px;
    --cb-subtitle-size: 14px;
    --cb-glass-pad-y: 18px;
    --cb-glass-pad-x: 20px;
    --cb-glass-radius: 12px;
  }

  .category-banner-section__overlay {
    padding: 28px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-banner-section__glass {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Responsive source: assets/ingredients-hero-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .ing-hero {
    --ing-hero-padding-inline: 64px;
    --ing-hero-title-size: 52px;
    --ing-hero-subtitle-size: 20px;
    --ing-hero-card-max-w: 440px;
    --ing-hero-card-overlap: 100px;
  }

  .ing-hero__inner {
    min-height: var(--ing-hero-height-md);
  }
}

@media (max-width: 991px) {
  .ing-hero {
    --ing-hero-padding-inline: 24px;
    --ing-hero-headings-card-gap: 40px;
    --ing-hero-title-size: 36px;
    --ing-hero-subtitle-size: 17px;
    --ing-hero-card-max-w: calc(100% - 8px);
    --ing-hero-desc-size: 15px;
    --ing-hero-tagline-size: 15px;
    --ing-hero-sun-gap: 18px;
    --ing-hero-card-overlap: 80px;
  }

  .ing-hero__inner {
    min-height: var(--ing-hero-height-sm);
  }

  .ing-hero__card {
    padding: 26px 22px 16px;
  }

  .ing-hero__description {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .ing-hero {
    --ing-hero-title-size: 30px;
    --ing-hero-subtitle-size: 15px;
    --ing-hero-sun-size: 38px;
    --ing-hero-card-overlap: 70px;
  }

  .ing-hero__container {
    padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ing-hero__title,
  .ing-hero__subtitle,
  .ing-hero__card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Responsive source: sections/ingredients-banner-section.jinja
   ========================================================= */

@media (max-width: 991px) {
  .ingredients-page-banner {
    padding: 28px 20px;
  }
}

@media (max-width: 575px) {
  .ingredients-page-banner {
    padding: 24px 16px;
  }
}

/* =========================================================
   Responsive source: assets/ingredients-seeds-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .ing-seeds {
    --ing-seeds-pad-x: 48px;
    --ing-seeds-title-size: 34px;
    --ing-seeds-slide-gap: 18px;
  }
}

@media (max-width: 991px) {
  .ing-seeds {
    --ing-seeds-pad-y: 36px;
    --ing-seeds-pad-x: 24px;
    --ing-seeds-title-size: 30px;
    --ing-seeds-title-mb: 14px;
    --ing-seeds-icon-size: 56px;
    --ing-seeds-icon-mb: 30px;
    --ing-seeds-slide-gap: 14px;
  }
}

@media (max-width: 575px) {
  .ing-seeds {
    --ing-seeds-pad-y: 28px;
    --ing-seeds-pad-x: 20px;
    --ing-seeds-title-size: 26px;
    --ing-seeds-icon-size: 48px;
    --ing-seeds-icon-mb: 24px;
    --ing-seeds-slide-gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ing-seeds__title,
  .ing-seeds__icon,
  .ing-seeds__item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ing-seeds__image {
    transition: none;
  }

  .ing-seeds__link:hover .ing-seeds__image,
  .ing-seeds__link:focus-visible .ing-seeds__image {
    transform: none;
  }
}

/* =========================================================
   Responsive source: assets/our-story-hero-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .story-hero {
    --story-hero-padding-inline: 64px;
    --story-hero-title-size: 52px;
    --story-hero-subtitle-size: 20px;
  }

  .story-hero__inner {
    min-height: var(--story-hero-height-md);
  }
}

@media (max-width: 991px) {
  .story-hero {
    --story-hero-padding-inline: 24px;
    --story-hero-title-size: 36px;
    --story-hero-subtitle-size: 17px;
  }

  .story-hero__inner {
    min-height: var(--story-hero-height-sm);
  }
}

@media (max-width: 575px) {
  .story-hero {
    --story-hero-title-size: 30px;
    --story-hero-subtitle-size: 15px;
    --story-hero-height-sm: 460px;
  }

  .story-hero__container {
    padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-hero__title,
  .story-hero__subtitle {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Responsive source: assets/our-story-castle-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .story-castle {
    --story-castle-title-size: 40px;
    --story-castle-gap: 48px;
  }

  .story-castle__container {
    padding: 80px 64px 60px;
  }
}

@media (max-width: 991px) {
  .story-castle {
    --story-castle-title-size: 32px;
    --story-castle-text-size: 16px;
    --story-castle-gap: 28px;
    --story-castle-paragraph-gap: 18px;
  }

  .story-castle__container {
    padding: 56px 24px 48px;
  }

  .story-castle__title {
    margin-bottom: 32px;
  }

  .story-castle__grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .story-castle__media,
  .rtl .story-castle__media,
  .story-castle__content,
  .rtl .story-castle__content {
    transform: translateY(20px);
  }

  .story-castle__image {
    max-width: 300px;
    max-height: 400px;
  }

  .story-castle__content {
    text-align: start;
  }

  .story-castle--visible .story-castle__media,
  .story-castle--visible .story-castle__content,
  .rtl .story-castle--visible .story-castle__media,
  .rtl .story-castle--visible .story-castle__content {
    transform: translateY(0);
  }
}

@media (max-width: 575px) {
  .story-castle {
    --story-castle-title-size: 28px;
    --story-castle-text-size: 15px;
  }

  .story-castle__container {
    padding: 44px 20px 40px;
  }

  .story-castle__image {
    max-width: 250px;
    max-height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-castle__title,
  .story-castle__media,
  .story-castle__content {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Responsive source: assets/our-story-members-section.css
   ========================================================= */

@media (max-width: 1199px) {
  .story-members {
    --sm-eyebrow-size: 24px;
    --sm-title-size: 30px;
    --sm-card-size: 132px;
    --sm-icon-size: 78px;
  }

  .story-members__intro {
    padding: 52px 64px 32px;
  }

  .story-members__band {
    padding: 48px 64px;
  }
}

@media (max-width: 991px) {
  .story-members {
    --sm-eyebrow-size: 22px;
    --sm-title-size: 26px;
    --sm-label-size: 14px;
    --sm-card-size: 120px;
    --sm-icon-size: 72px;
    --sm-flag-size: 40px;
  }

  .story-members__intro {
    padding: 40px 24px 28px;
  }

  .story-members__band {
    padding: 36px 24px;
  }

  .story-members__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
  }
}

@media (max-width: 575px) {
  .story-members {
    --sm-eyebrow-size: 20px;
    --sm-title-size: 22px;
    --sm-card-size: 108px;
    --sm-icon-size: 64px;
  }

  .story-members__intro {
    padding: 32px 20px 24px;
  }

  .story-members__band {
    padding: 28px 20px;
  }

  .story-members__grid {
    gap: 24px 14px;
  }

  .story-members__label {
    max-width: 130px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-members__eyebrow,
  .story-members__flag,
  .story-members__title,
  .story-members__item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .story-members__item:hover .story-members__card {
    transform: none;
  }
}

/* =========================================================
   Responsive source: assets/our-story-gallery-section.css
   ========================================================= */

@media (max-width: 991px) {
  .story-gallery {
    --sg-gap: 8px;
  }

  .story-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .story-gallery {
    --sg-gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-gallery__link {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .story-gallery__image {
    transition: none;
  }

  .story-gallery__link:hover .story-gallery__image,
  .story-gallery__link:focus-visible .story-gallery__image {
    transform: none;
  }
}

/* =========================================================
   Responsive source: assets/our-story-closing-section.css
   ========================================================= */

@media (max-width: 991px) {
  .story-closing {
    min-height: 360px;
    padding: 28px 20px;
  }

  .story-closing__image {
    width: min(520px, 92vw);
    max-height: 310px;
  }
}

@media (max-width: 575px) {
  .story-closing {
    min-height: 300px;
    padding: 24px 16px;
  }

  .story-closing__image {
    width: 100%;
    max-height: 260px;
  }
}

/* =========================================================
   Responsive source: assets/footer-oatra.css
   ========================================================= */

@media (max-width: 1199px) {
  .footer-oatra {
    --fo-pad-x: 60px;
    --fo-title-size: 34px;
  }
}

@media (max-width: 991px) {
  .footer-oatra {
    --fo-pad-y: 48px;
    --fo-pad-x: 24px;
    --fo-title-size: 28px;
    --fo-desc-size: 15px;
    --fo-social-size: 40px;
    --fo-bar-pad-y: 22px;
    --fo-logo-h: 40px;
  }

  .footer-oatra__main {
    min-height: 240px;
  }

  .footer-oatra__watermark {
    width: min(72vw, 480px);
  }

  .footer-oatra__description {
    margin-bottom: 22px;
  }
}

@media (max-width: 575px) {
  .footer-oatra {
    --fo-pad-y: 40px;
    --fo-pad-x: 20px;
    --fo-title-size: 24px;
    --fo-desc-size: 14px;
    --fo-copy-size: 11px;
    --fo-logo-h: 36px;
    --fo-bar-pad-y: 18px;
  }

  .footer-oatra__bar-inner {
    gap: 12px;
  }

  .footer-oatra__copy {
    white-space: normal;
    text-align: right;
    max-width: 55%;
  }

  .footer-oatra__watermark {
    width: min(88vw, 380px);
  }
}

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

  .footer-oatra__social-link:hover,
  .footer-oatra__social-link:focus-visible {
    transform: none;
  }
}

/* end_responsive_css */