/* CTA */
/* Home Hero section */
/* Sections */
/* category-list */
/* Produst list */
/* Swiper */
/* Categories list */
/* Footer & General Form */
/* Header */
/* Menu */
/* Secondary Hero section */
/* General Modal */
/* Search Modal */
/* Sort % Filter */
/* Expand details accordion */
/* Product page */
/* Cart */
/* Checkout */
/* Order details */
/* Our story */
/* Contact */
/* Account */

@font-face {
    font-family: 'Primary';
    src: url('../fonts/HankenGrotesk-Regular.woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Primary';
    src: url('../fonts/HankenGrotesk-SemiBold.woff2');
    font-weight: var(--font-bold);

    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Secondary';
    src: url('../fonts/RecklessStandardS-TRIAL-Light.woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


:where(:root, ::before, ::after) {
    --grid-container-max-width: calc(106.25 * var(--spacing-default));
    --grid-gap-xy: var(--unit-24);
    --font-primary: 'Primary';
    --font-secondary: 'Secondary';

    --color-gray-10: #F9FAFB;
    --color-gray-50: #F6F7F9;
    --color-gray-100: #E2E5E9;
    --color-gray-200: #D1D6DD;
    --color-gray-300: #BFC6D0;
    --color-gray-500: #949FAF;
    --color-gray-700: #5A6779;
    --color-gray-900: #1F2329;


    --color-info-10: #F0F6FF;
    --color-info-50: #E0EEFF;
    --color-info-100: #C7DDFF;
    --color-info-300: #94BFFF;
    --color-info-500: #2E7FFF;
    --color-info-700: #1557D4;
    --color-info-900: #0A2E8C;


    --color-white: #FFFFFF;
    --color-black: #000000;

    --color-primary: #B2A08B;
}

body {
    font-family: var(--font-primary);
    font-weight: 500;
    color: var(--color-gray-900);
}

.font-bold {
    font-weight: var(--font-bold);

}

.font-serif,
h1 {
    font-family: var(--font-secondary);
    font-weight: 400;
}

/* CTA */

.cta--type-one {
    background-color: var(--color-primary);
    height: var(--unit-56);
    outline: none;
    border: none;
    width: 100%;
    font-weight: var(--font-bold);
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cta--type-one--black {
    background-color: var(--color-black);
}

.cta--type-2 {
    font-weight: var(--font-bold);

    display: flex;
    gap: var(--unit-10);
    align-items: center;
}

@media (min-width: 64rem) {

    .cta--type-2 svg,
    .cta--type-one {
        transition: var(--transition);
    }

    .cta--type-2:hover svg {
        transform: translateX(var(--unit-4));
    }

    .cta--type-one:hover {
        opacity: .8;
    }

}

/* Home Hero section */

.hero--homepage {
    position: relative;
    min-height: 100svh;
    color: var(--color-white);
    overflow: hidden;
    isolation: isolate;
    background-color: var(--color-black);
}

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

.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.06);
    z-index: 1;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero--homepage .hero__container {
    position: relative;
    z-index: 2;
    min-height: 100svh;
}

.hero--homepage .hero__inner {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}


.hero--homepage .hero__title {
    line-height: .7;
    letter-spacing: calc(-1 * var(--unit-15));
    font-size: 12vw;
    text-align: center;
}

.hero__copyright {
    font-size: .38em;
    vertical-align: top;
    position: relative;
    top: .1em;
    left: .02em;
}

.hero--homepage .hero__subtitle {
    font-weight: 400;
    line-height: 1.1;
    font-size: clamp(var(--unit-24), 3vw, var(--unit-56));
}

.hero__actions {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid rgba(var(--color-white-rgb), .35);
}

.hero__actions .grid-x {
    min-height: var(--unit-80);
}

.hero__actions .cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--unit-12);
    font-weight: var(--font-bold);

    text-align: center;
}


@media (min-width: 64rem) {

    .hero__actions {
        padding: var(--unit-28) var(--unit-32);
    }

    .hero__action svg {
        transition: var(--transition);
    }

    .hero__action:hover svg {
        transform: translateX(var(--unit-4));
    }
}

@media (max-width: 63.9375rem) {

    .hero--homepage {
        min-height: 100svh;
    }

    .hero--homepage .hero__title {
        font-size: 25vw;
        letter-spacing: calc(-1 * var(--unit-10));
    }

    .hero__actions {
        padding: var(--grid-container-padding-x);
    }

    .hero__action {
        font-size: calc(.95 * var(--spacing-default));
    }

    .hero--homepage .hero__subtitle {
        font-size: var(--unit-22);
    }
}

/* end Home Hero section */

/* Sections */

.section--white {
    background-color: var(--color-white);
}

.section--gray {
    background-color: var(--color-gray-10);
}

.section--black {
    background-color: var(--color-black);
    color: var(--color-white);
}

.section--black .section__title {
    color: var(--color-white);
}

.section__title {
    font-family: var(--font-secondary);
    font-weight: 400;
    color: var(--color-gray-700);
    text-transform: uppercase;
    line-height: 1;
}

.section {
    position: relative;
}

.section.section--full-image {
    height: 100vh;
    overflow: hidden;
    position: relative;
    color: #fff;
    padding: 0;
}

.section.section--full-image img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 1;
}

.section.section--full-image a {
    position: relative;
    z-index: 2;
    height: 100%;
    display: block;
}

.width-100 {
    width: 100%;
}

.section--top {
    padding-top: calc(var(--unit-100) + var(--top-bar-height));
}

.section--white h1 {
    text-transform: uppercase;
}

@media (min-width: 64rem) {

    .section {
        padding: var(--unit-100) 0;
    }

    .section .grid-container>*:not(:last-child) {
        margin-bottom: var(--unit-100);
    }

    .section__title {
        font-size: var(--unit-24);
    }

    .section--full-image img {
        transition: var(--transition);
    }

    .section--full-image:hover img {
        transform: var(--zoom-in-scale);
    }

    .section--white+.section--white {
        padding-top: 0;
    }

    .large-width-100 {
        width: 100%;
    }

    .section--white h1 {
        font-size: var(--unit-50);
    }

}

@media (max-width: 63.9375rem) {

    .section__title {
        font-size: var(--unit-20);
    }

    .section {
        padding: calc(3.25 * var(--spacing-default)) 0;
    }

    .section .grid-container>*:not(:last-child) {
        margin-bottom: calc(3.25 * var(--spacing-default));
    }

    .section--white+.section--white {
        padding-top: 0;
    }

    .small-width-100 {
        width: 100%;
    }

}

/* end Sections */

/* category-list */

.image-container--category-list {
    aspect-ratio: 550/673;
}

@media (min-width: 64rem) {

    .category-list img {
        transition: var(--transition);
    }

    .category-list:hover svg {
        transform: translateX(var(--unit-4));
    }

    .category-list:hover img {
        transform: var(--zoom-in-scale);
    }

}

/* end category-list */

/* Produst list */

.product-list {
    position: relative;
}

.image-container--product-list {
    aspect-ratio: 407/498;
}

.product-list__fav-container {
    position: absolute;
    top: var(--unit-20);
    right: var(--unit-20);
    width: var(--unit-40);
    height: var(--unit-40);
    background-color: rgb(255, 255, 255, .3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;
}

.product-list__fav-container svg path {
    fill: #fff;
    transition: var(--transition);
}

.product-list__fav-container--active {
    background-color: rgb(255, 255, 255, .8);
}

.product-list__fav-container--active svg path {
    fill: #e00000;
}

.product-list__title {
    font-family: var(--font-secondary);
    text-transform: none;
    font-size: var(--unit-23);
}

.product-list__price {
    font-weight: var(--font-bold);
    color: var(--color-primary);
}

.product-list__discount {
    font-size: var(--unit-13);
    color: var(--color-gray-700);
    text-decoration: line-through;
}

.product-list__price:has(.product-list__discount) {
    color: red;
    display: flex;
    align-items: flex-start;
    gap: var(--unit-5);
}

@media (min-width: 64rem) {

    .product-list img,
    .product-list__fav-container {
        transition: var(--transition);
    }

    .product-list:hover img {
        transform: var(--zoom-in-scale);
    }

}

/* end Produst list */

/* Swiper */

.swiper {
    position: relative;
}

.swiper__prev-next {
    display: flex;
}

.swiper__prev,
.swiper__next {
    width: var(--unit-40);
    height: var(--unit-40);
    background-color: rgb(255, 255, 255, .3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 64rem) {

    .swiper__prev-next {
        position: absolute;
        width: calc(100% - var(--unit-16));
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 111;
        justify-content: space-between;
    }

    .swiper__prev,
    .swiper__next {
        transition: var(--transition);
    }

    .swiper__prev:hover,
    .swiper__next:hover {
        background-color: rgb(255, 255, 255, .5);
    }
}


@media (max-width: 63.9375rem) {

    .swiper__prev,
    .swiper__next {
        background-color: rgb(0, 0, 0, .3);
    }

    .swiper__prev-next {
        margin-bottom: var(--unit-16);
        gap: var(--unit-16);
    }

}

/* end Swiper */

/* Categories list */

.categories-list__title {
    font-family: var(--font-secondary);
    text-transform: uppercase;
}

.categories-list ul {
    list-style-type: none;
}

.categories-list ul li {
    border-bottom: 1px solid var(--color-gray-700);
}

@media (min-width: 64rem) {

    .categories-list__image {
        width: calc(7.5 * var(--spacing-default));
    }

    .categories-list__title {
        font-size: 6vw;
        letter-spacing: calc(-1 * var(--unit-5));
        transition: var(--transition);
    }

    .categories-list__image {
        opacity: 0;
        transition: var(--transition);
    }

    .categories-list a:hover .categories-list__image {
        opacity: 1;
    }

    .categories-list a:hover .categories-list__title {
        color: var(--color-primary);
    }

}

@media (max-width: 63.9375rem) {

    .categories-list__title {
        font-size: var(--unit-28);
        letter-spacing: calc(-1 * var(--unit-2));
    }

    .categories-list__image {
        width: calc(4.5 * var(--spacing-default));
    }

    .categories-list ul li a {
        padding: var(--unit-32) 0;
    }

}

/* end Categories list */

/* Footer & General Form */

footer {
    background-color: #F2F1EC;
}

.footer__subscribe-text {
    font-family: var(--font-secondary);
    text-transform: uppercase;
}

.form input {
    background-color: unset;
    outline: unset;
    border: 1px solid var(--color-gray-300);
    height: var(--unit-56);
    padding: 0 var(--unit-16);
    border-radius: var(--unit-8);
    font-weight: var(--font-bold);

}

.form input::placeholder {
    color: var(--color-gray-700);
}

.form input:focus {
    border: 1px solid var(--color-gray-900);
}

.checkbox-virtual__text a {
    font-weight: var(--font-bold);

    text-decoration: underline;
}

.form button {
    height: var(--unit-55);
    background-color: var(--color-primary);
    color: var(--color-white);
    border: unset;
    outline: unset;
    font-weight: var(--font-bold);

}

.footer__links-title {
    font-size: var(--unit-15);
    font-weight: var(--font-bold);

    text-transform: uppercase;
}

.footer__cols ul {
    list-style-type: none;
}

.footer__cols a {
    font-size: var(--unit-15);
    color: var(--color-gray-900);
    padding: var(--unit-4) 0;
    display: inline-flex;
}

.footer__copyright {
    font-size: var(--unit-15);
    color: var(--color-gray-700);
}

.footer__copyright a {
    color: var(--color-gray-900);
    text-decoration: underline;
    font-weight: var(--font-bold);

}

@media (min-width: 64rem) {

    .footer__subscribe-text {
        font-size: var(--unit-50);
        line-height: 1;
    }

    .form--subscribe {
        width: 75%;
        margin: 0 auto;
    }

    .checkbox-virtual__text a,
    .form button,
    .footer__cols a,
    .footer__copyright a,
    .footer__socials a svg {
        transition: var(--transition);
    }

    .footer__socials a:hover svg {
        transform: var(--zoom-in-scale);
    }

    .form button {
        cursor: pointer;
    }

    .checkbox-virtual__text a:hover,
    .footer__cols a:hover,
    .footer__copyright a:hover {
        color: var(--color-primary);
    }

    .form button:hover {
        opacity: .8;
    }

    footer {
        padding: var(--unit-50);
    }

    .form button {
        font-size: var(--unit-20);
    }

    .footer__cols {
        gap: calc(10 * var(--spacing-default));
    }

}

@media (max-width: 63.9375rem) {

    .footer__subscribe-text {
        font-size: var(--unit-30);
        line-height: 1;
    }

    footer {
        padding: var(--unit-30) 0;
    }

    .footer__cols {
        gap: var(--unit-96);
    }

}

/* end Footer & General Form */

/* Header */

.logo {
    width: 50%;
}

.top-bar {
    position: fixed;
    padding: var(--unit-16) 0;
    z-index: 999;
}

/* Native framework hamburger: the .js-hamburger.hamburger element holds the 3
   bars directly (demo structure) so the native animation fires on it. The
   .custom-hamburger wrapper only lays out the icon + label. Bars use
   currentColor, so the top-bar colour states drive both the bars and label. */
.custom-hamburger__label {
    font-weight: var(--font-bold);
}

.top-bar--default-white .logo svg path,
.top-bar--default-white .top-bar__action svg path {
    fill: var(--color-white);
}

.top-bar--default-white .custom-hamburger {
    color: var(--color-white);
}

.top-bar--default-black .logo svg path {
    fill: var(--color-gray-900);
}

.top-bar--default-black .custom-hamburger {
    color: var(--color-gray-900);
}

.custom-hamburger {
    cursor: pointer;
}

.top-bar__action {
    position: relative;
    cursor: pointer;
}

.cart__count {
    position: absolute;
    width: var(--unit-20);
    height: var(--unit-20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-900);
    top: calc(-1 * var(--unit-16));
    right: calc(-1 * var(--unit-16));
    font-size: var(--unit-11);
    color: var(--color-white);
    transition: var(--transition);
}

body[data-scroll-y-dir-thresholed="up"] .top-bar {
    background-color: var(--color-black);
}

body[data-scroll-y-dir-thresholed="up"] .top-bar .cart__count {
    background-color: var(--color-white);
    color: var(--color-gray-900);
}

body[data-scroll-y-dir-thresholed="up"] .top-bar--default-white .logo svg path,
body[data-scroll-y-dir-thresholed="up"] .top-bar--default-white .top-bar__action svg path,
body[data-scroll-y-dir-thresholed="up"] .top-bar--default-black .logo svg path,
body[data-scroll-y-dir-thresholed="up"] .top-bar--default-black .top-bar__action svg path {
    fill: var(--color-white);
}

body[data-scroll-y-dir-thresholed="up"] .top-bar--default-black .custom-hamburger,
body[data-scroll-y-dir-thresholed="up"] .top-bar--default-white .custom-hamburger {
    color: var(--color-white);
}

@media (min-width: 64rem) {

    .top-bar__action svg {
        transition: var(--transition);
    }

    .top-bar__action:hover svg {
        transform: var(--zoom-in-scale);
    }

}

@media (max-width: 63.9375rem) {

    .cart__count {
        top: calc(-.7 * var(--spacing-default));
    }

}

/* Menu */

.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-black);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: opacity var(--transition-duration) var(--transition-timing-function);
    color: var(--color-white);
}

.menu[data-active] {
    opacity: 1;
    pointer-events: all;
    user-select: auto;
}

/* When the native menu is open, force the top bar to its white state
   (replaces the old custom JS that swapped top-bar--default-* classes) */
.menu[data-active] ~ .top-bar .logo svg path,
.menu[data-active] ~ .top-bar .top-bar__action svg path {
    fill: var(--color-white);
}

.menu[data-active] ~ .top-bar .custom-hamburger {
    color: var(--color-white);
}

.menu__image {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
}

.menu__image img {
    object-fit: cover;
}

.menu__nav a,
.menu__secondary-nav a {
    display: inline-flex;
}

.menu__secondary-nav ul {
    list-style: none;
}

.menu__secondary-nav a {
    padding: var(--unit-8) 0;
    opacity: .7;
}

@media (min-width: 64rem) {

    .menu__secondary-nav a,
    .menu__nav a {
        transition: var(--transition);
    }

    .menu__secondary-nav a:hover,
    .menu__nav a:hover {
        color: var(--color-primary);
    }

    .menu__nav a {
        font-size: var(--unit-24);
        padding: var(--unit-8) 0;
    }

    .menu__navs {
        display: flex;
        gap: calc(10 * var(--spacing-default));
        align-items: flex-end;
    }

}

@media (max-width: 63.9375rem) {

    .menu__nav a {
        font-size: var(--unit-20);
        padding: var(--unit-8) 0;
    }

}

/* Language switcher (RO/EN), bottom-left of the menu */
.menu__switchers {
    position: absolute;
    z-index: 4;
    bottom: clamp(var(--unit-32), 8vh, var(--unit-96));
    left: max(var(--grid-container-padding-x), calc((100vw - var(--grid-container-max-width)) / 2 + var(--grid-container-padding-x)));
}

.menu__switch-group {
    display: flex;
    flex-direction: column;
    gap: var(--unit-8);
    align-items: flex-start;
}

.menu__switch-caption {
    font-size: var(--unit-11);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(var(--color-white-rgb), .5);
}

.menu__switch-divider {
    width: 1px;
    align-self: stretch;
    background-color: rgba(var(--color-white-rgb), .35);
    flex-shrink: 0;
}

/* Language/currency toggle — only the bits Perseverance utilities don't cover.
   The rest is applied in HTML: inline-flex xy-center cursor-pointer font-bold text-uppercase color-white font-14. */
.menu__switch-option {
    border: 1px solid rgba(var(--color-white-rgb), .35);
    height: var(--unit-40);
    min-width: var(--unit-40);
    padding: 0 var(--unit-12);
    text-decoration: none;
}

.menu__switch-option[data-active] {
    background-color: var(--color-white);
    color: var(--color-black);
}

@media (min-width: 64rem) {

    .menu__switch-option {
        transition: var(--transition);
    }

    .menu__switch-option:hover {
        border-color: var(--color-white);
    }

}

@media (max-width: 63.9375rem) {

    .menu__switchers {
        left: var(--grid-container-padding-x);
        bottom: var(--unit-28);
    }

}

/* end Menu */

/* Secondary Hero section */

.hero {
    position: relative;
}

.hero--secondary .hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.hero--secondary .hero__container {
    position: relative;
    z-index: 2;
}

.hero--secondary .hero__inner,
.hero--secondary .hero__container {
    height: 100%;
}

.hero--secondary .hero__title {
    text-transform: uppercase;
}

.hero--secondary {
    color: var(--color-white);
}

body {
    /* Absorb the 100vw hero breakout's scrollbar gutter so no horizontal scroll
       appears; clip (not hidden) keeps position:sticky working. */
    overflow-x: clip;
}

.breadcrumb {
    position: absolute;
    z-index: 3;
    bottom: var(--unit-20);
    left: 50%;
    transform: translateX(-50%);
}

.breadcrumb li {
    font-family: var(--font-secondary);
    text-transform: lowercase;
}

.breadcrumb li:not(:last-child)::after {
    content: '/';
    margin-left: var(--unit-4);
    opacity: .5;
}

.breadcrumb li:last-child {
    opacity: .5;
}

.hero--secondary::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-black);
    opacity: .1;
}

@media (min-width: 64rem) {

    .hero--secondary {
        height: 80vh;
    }

    .hero--secondary .hero__title {
        font-size: calc(7.625 * var(--spacing-default));
        line-height: .8;
        letter-spacing: calc(-1 * var(--unit-6));
    }

    .hero--secondary .hero__subtitle {
        font-size: var(--unit-36);
        line-height: 1;
    }

    .breadcrumb li {
        font-size: var(--unit-24);
    }

}

@media (max-width: 63.9375rem) {

    .hero--secondary {
        height: 70vh;
    }

    .hero--secondary .hero__title {
        font-size: var(--unit-48);
        line-height: 1;
    }

    .breadcrumb li {
        font-size: var(--unit-16);
    }

}

/* end Secondary Hero section */

/* General Modal */

#modal .modal--type-one {
    width: 90%;
}

#modal.modal--type-one .modal__container {
    width: 90%;
}

#modal.modal--type-one .modal__content {
    max-width: 100%;
    width: 100%;
}

#modal.modal--type-two .modal__container {
    width: 90%;
}

.modal__wrapper {
    border-radius: unset;
    padding: unset;
}

#modal .modal__btn-close {
    all: unset;
    cursor: pointer;
}

#modal .modal__wrapper .modal__content+.js-modal-close {
    display: none;
}

.modal__content-top,
.modal__content-bottom {
    padding: var(--unit-20);
}

.modal__content-top {
    border-bottom: 1px solid var(--color-gray-200);
}

.modal__title {
    font-size: var(--unit-18);
    font-weight: var(--font-bold);
}


@media (min-width: 64rem) {
    #modal.modal--type-one .modal__container {
        width: calc(37.5 * var(--spacing-default));
    }

    #modal.modal--type-two .modal__container {
        width: calc(46.25 * var(--spacing-default));
        height: 100vh;
        position: fixed;
        top: 0;
        right: 0;
        left: unset;
        transform: none;
        overflow-y: auto;
    }

    #modal.modal--type-two .modal__content {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
    }

    .modal__content-bottom {
        padding: var(--unit-50) var(--unit-20);
    }

    .modal__btn-close svg {
        transition: var(--transition);
    }

    .modal__btn-close:hover svg {
        transform: var(--zoom-in-scale);
    }

    #modal.modal--type-two .modal__wrapper {
        height: 100%;
    }

}

/* end General Modal */

/* Search Modal */

.form--search input {
    border: unset;
    border-radius: unset;
    border-bottom: 1px solid var(--color-gray-500);
    padding: 0;
}

.form--search input:focus {
    border: unset;
    border-radius: unset;
    border-bottom: 1px solid var(--color-gray-900);
}

.form--search input::placeholder {
    color: var(--color-gray-500);
}

.form--search button {
    width: var(--unit-40);
    height: var(--unit-40);
    min-width: var(--unit-40);
    min-height: var(--unit-40);
    background-color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.recommended-items {
    display: flex;
    list-style: none;
    gap: var(--unit-12);
}

.recommended-items a {
    display: inline-flex;
    font-size: var(--unit-13);
    padding: var(--unit-5);
    background-color: var(--color-gray-50);
    color: var(--color-gray-700);
}



@media (min-width: 64rem) {

    .recommended-items a {
        transition: var(--transition);
    }

    .recommended-items a:hover {
        background-color: var(--color-gray-200);
    }

}

/* end Search Modal */

/* Sort % Filter */

.filter-button__title,
.sort-button__title {
    font-weight: var(--font-bold);
    font-size: var(--unit-15);
}

.filter-button {
    position: relative;
}

.filter-button__count {
    position: absolute;
    width: var(--unit-20);
    height: var(--unit-20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-900);
    top: calc(-1 * var(--unit-16));
    right: calc(-1 * var(--unit-16));
    font-size: var(--unit-11);
    color: var(--color-white);
    transition: var(--transition);
}

@media (min-width: 64rem) {

    .filter-button,
    .sort-button {
        cursor: pointer;
        transition: var(--transition);
    }

    .filter-button:hover,
    .sort-button:hover {
        opacity: .8;
    }

}

@media (max-width: 63.9375rem) {

    .filter-button__count {
        right: calc(-1 * var(--unit-8));
    }

}

.sizes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--unit-24);
    padding: var(--unit-20) 0;
}

.size input[type="radio"] {
    display: none;
}

.size__box {
    border: var(--unit-2) solid var(--color-gray-200);
    width: var(--unit-40);
    height: var(--unit-40);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: var(--transition);
}

.size__stock {
    font-size: var(--unit-10);
    color: var(--color-gray-500);
    position: absolute;
    top: calc(-1 * var(--unit-16));
    right: 0;
}

.size__label {
    font-weight: 700;
    font-size: var(--unit-14);
}

.size input[type="radio"]:checked+.size__box {
    border-color: var(--color-gray-900);
}

.size--out-of-stock .size__box {
    position: relative;
    opacity: .4;
    cursor: not-allowed;
}

.size--out-of-stock .size__box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, transparent calc(50% - 1px), var(--color-error) calc(50% - 1px), var(--color-error) calc(50% + 1px), transparent calc(50% + 1px));
}

.colors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--unit-24);
    padding: var(--unit-20) var(--unit-5);
}

.product-color input[type="radio"] {
    display: none;
}

.product-color__swatch {
    width: var(--unit-32);
    height: var(--unit-32);
    border-radius: 50%;
    background-color: var(--swatch);
    outline: var(--unit-2) solid transparent;
    outline-offset: var(--unit-3);
    cursor: pointer;
    transition: var(--transition);
}

.product-color__swatch--light {
    box-shadow: inset 0 0 0 1px var(--color-gray-200);
}

.product-color input[type="radio"]:checked+.product-color__swatch {
    outline-color: var(--color-gray-900);
}

.price-range {
    padding: var(--unit-20) var(--unit-4);
    display: flex;
    flex-direction: column;
    gap: var(--unit-16);
}

.price-range__slider {
    position: relative;
    height: var(--unit-2);
    background-color: var(--color-gray-100);
    border-radius: 100vw;
    margin: var(--unit-10) 0;
}

.price-range__track {
    position: absolute;
    height: 100%;
    background-color: var(--color-gray-900);
    border-radius: 100vw;
}

.price-range__input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.price-range__input::-webkit-slider-thumb {
    appearance: none;
    width: var(--unit-16);
    height: var(--unit-16);
    border-radius: 50%;
    background-color: var(--color-gray-900);
    pointer-events: all;
    cursor: pointer;
    transition: var(--transition);
}

.price-range__input::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.price-range__values {
    font-size: var(--unit-14);
    color: var(--color-gray-700);
}

@media (min-width: 64rem) {
    .size__box:hover {
        border-color: var(--color-gray-500);
    }

    .product-color__swatch:hover {
        outline-color: var(--color-gray-500);
    }
}

.filter-reset-btn {
    display: inline-flex;
    font-weight: var(--font-bold);
    text-decoration: underline;
    text-align: center;
    cursor: pointer;
}

[type="submit"]:disabled,
[type="submit"][disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.radio-list {
    display: flex;
    flex-direction: column;
    gap: var(--unit-20);
}

.radio-list__item {
    display: flex;
    align-items: center;
    gap: var(--unit-16);
    cursor: pointer;
}

.radio-list__item input[type="radio"] {
    display: none;
}

.radio-list__circle {
    width: var(--unit-24);
    height: var(--unit-24);
    border-radius: 50%;
    border: 1.5px solid var(--color-gray-300);
    flex-shrink: 0;
    position: relative;
    transition: var(--transition);
}

.radio-list__circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: var(--unit-12);
    height: var(--unit-12);
    border-radius: 50%;
    background-color: var(--color-info-500);
    transition: var(--transition);
}

.radio-list__item input[type="radio"]:checked+.radio-list__circle {
    border-color: var(--color-info-500);
    background-color: var(--color-info-50);
}

.radio-list__item input[type="radio"]:checked+.radio-list__circle::after {
    transform: translate(-50%, -50%) scale(1);
}

.radio-list__label {
    font-weight: 700;
}

/* Sort modal options are links (PS-compatible) — replicate the radio "checked" look on the current option. */
.radio-list__item {
    text-decoration: none;
    color: inherit;
}

.radio-list__item--current .radio-list__circle {
    border-color: var(--color-info-500);
    background-color: var(--color-info-50);
}

.radio-list__item--current .radio-list__circle::after {
    transform: translate(-50%, -50%) scale(1);
}

/* end Sort % Filter */

/* Expand details accordion */

.accordion__item {
    border-bottom: 1px solid var(--color-gray-100);
}

.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--unit-20) 0;
    cursor: pointer;
    user-select: none;
}

.accordion__trigger svg {
    transition: var(--transition);
    flex-shrink: 0;
}

.accordion__trigger[data-active] svg {
    transform: rotate(180deg);
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-duration) var(--transition-timing-function);
}

.accordion__content-inner {
    padding-bottom: var(--unit-20);
}

.accordion__label {
    font-weight: var(--font-bold);
}

.accordion__content-inner a {
    text-decoration: underline;
    color: var(--color-info-500);
    font-weight: var(--font-bold);
}

.accordion__trigger[data-active] + .accordion__content {
    max-height: calc(30 * var(--spacing-default));
}

.accordion__trigger svg,
.accordion__trigger path {
    pointer-events: none;
}

/* end Expand details accordion */

/* Product page */

.product-details__title,
.product-select__title {
    font-weight: var(--font-bold);
}

.product-select__title {
    font-size: var(--unit-15);
}

.product-details__price {
    font-family: var(--font-secondary);
    font-size: var(--unit-20);
}

.color-preview {
    display: flex;
    margin-left: var(--unit-10);
}

.color-preview__dot {
    width: var(--unit-30);
    height: var(--unit-30);
    border-radius: 50%;
    margin-left: calc(-1 * var(--unit-10));
    border: var(--unit-2) solid var(--color-white);
}

.color-preview__dot:nth-child(1) {
    background-color: #1a1a1a;
}

.color-preview__dot:nth-child(2) {
    background-color: #ffffff;
    box-shadow: inset 0 0 0 1px var(--color-gray-200);
}

.color-preview__dot:nth-child(3) {
    background-color: #8B6914;
}

.product-select-color {
    cursor: pointer;
}

.color-select__item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--unit-10);
}

.color-select__item .image-container {
    border: var(--unit-2) solid transparent;
    transition: var(--transition);
}

.color-select__item--active .image-container {
    border-color: var(--color-gray-900);
}

.color-select__label {
    font-size: var(--unit-14);
}

.color-select__item--active .color-select__label {
    font-weight: 700;
}

.product-select-size .sizes {
    padding: 0;
}

.product-details__devider {
    height: 1px;
    background-color: var(--color-gray-300);
}

.product-select-size__guide {
    cursor: pointer;
    text-decoration: underline;
}

.size-guide__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--unit-14);
}

.size-guide__table th,
.size-guide__table td {
    padding: var(--unit-12) var(--unit-16);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-100);
}

.size-guide__table th {
    font-weight: 700;
    color: var(--color-gray-700);
}

.size-guide__table tbody tr:hover {
    background-color: var(--color-gray-50);
}

.quantity {
    display: flex;
    align-items: center;
    gap: var(--unit-8);
}

.quantity__btn {
    height: var(--unit-30);
    height: var(--unit-30);
    border-radius: 50%;
    border: 1px solid var(--color-gray-100);
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.quantity__btn--minus:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.quantity__value {
    font-weight: 700;
    min-width: var(--unit-16);
    text-align: center;
}

/* ---- PrestaShop TouchSpin quantity stepper (product + cart) ---- *
 * Reskins the core qty-input.tpl markup (.quantity-button__group.input-group
 * with .btn.js-decrement-button / .form-control / .btn.js-increment-button) to
 * the static design's −/value/+ stepper. TouchSpin stays functional (it only
 * binds click handlers to these buttons). The core glyphs use a `material-icons`
 * font the Noera theme does NOT load, so we hide them and draw +/− in CSS.
 */
.quantity-button__group {
    display: inline-flex;
    align-items: center;
    gap: var(--unit-8);
    width: auto;
}

.quantity-button__group .btn {
    width: var(--unit-30);
    height: var(--unit-30);
    padding: 0;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--color-gray-100);
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

/* hide the unavailable material-icons glyphs + the touchspin spinner/confirm states */
.quantity-button__group .btn .material-icons,
.quantity-button__group .btn .spinner-border,
.quantity-button__group .btn .confirmation {
    display: none;
}

/* CSS-drawn − and + so the stepper reads correctly without an icon font */
.quantity-button__group .btn::before {
    content: "";
    position: absolute;
    width: var(--unit-10);
    height: 1px;
    background-color: var(--color-gray-900);
}

.quantity-button__group .js-increment-button::after {
    content: "";
    position: absolute;
    width: 1px;
    height: var(--unit-10);
    background-color: var(--color-gray-900);
}

.quantity-button__group .btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.quantity-button__group .form-control {
    width: var(--unit-40);
    min-width: 0;
    height: var(--unit-30);
    padding: 0 var(--unit-4);
    text-align: center;
    font-weight: 700;
    border: none;
    background-color: transparent;
    -moz-appearance: textfield;
}

.quantity-button__group .form-control::-webkit-outer-spin-button,
.quantity-button__group .form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

@media (min-width: 64rem) {

    .quantity-button__group .btn:hover:not(:disabled) {
        border-color: var(--color-gray-300);
    }

}

@media (min-width: 64rem) {

    .quantity__btn:hover {
        border-color: var(--color-gray-300);
    }

    .product-details-container {
        position: sticky;
        top: calc(var(--top-bar-height) + var(--unit-24));
        align-self: flex-start;
    }

    .product-details__title {
        font-size: var(--unit-24);
    }

}

@media (max-width: 63.9375rem) {

    .section--top {
        padding-top: calc(calc(3.25 * var(--spacing-default)) + var(--top-bar-height));
    }

    .product-images {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .product-images::-webkit-scrollbar {
        display: none;
    }

    .product-images .cell {
        flex: 0 0 85%;
        scroll-snap-align: start;
    }

    .product-details__title {
        font-size: var(--unit-20);
    }

}

/* end Product page */

/* Cart */

.cart-progress {
    padding-bottom: var(--unit-20);
}

.cart-progress__title {
    font-size: var(--unit-16);
    margin-bottom: var(--unit-8);
    font-weight: var(--font-bold);
}

.cart-progress__bar {
    height: var(--unit-2);
    background-color: var(--color-gray-100);
    width: 100%;
}

.cart-progress__fill {
    height: 100%;
    width: var(--progress);
    background-color: var(--color-primary);
    transition: var(--transition);
}

.cart-item {
    background-color: var(--color-gray-10);
}

.cart-item__title,
.cart-item__meta-value {
    font-weight: var(--font-bold);
}

.cart-item__meta-label {
    font-size: var(--unit-15);
    color: var(--color-gray-900);
}

.cart-item__delete {
    cursor: pointer;
}

.cart-item__price {
    font-family: var(--font-secondary);
}

.cart-summary {
    background-color: var(--color-gray-10);
    padding: var(--unit-24);
    display: flex;
    flex-direction: column;
    gap: var(--unit-24);
}

.cart-summary__title {
    font-weight: var(--font-bold);
    font-size: var(--unit-20);
}

.cart-summary__label {
    color: var(--color-gray-700);
}

.cart-summary__value {
    font-weight: var(--font-bold);
}

.cart-summary__value--free {
    color: var(--color-success);
    font-weight: var(--font-bold);
}

.cart-summary__value--total {
    font-size: var(--unit-24);
}

/* "Cu TVA" mention under the cart grand total (mirrors .product-details__tax) */
.cart-summary__tax-note {
    text-align: right;
    margin-top: 2px;
}

.cart-empty {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--unit-24);
}

.cart-empty p {
    font-family: var(--font-secondary);
    font-size: var(--unit-24);
    color: var(--color-gray-500);
}

@media (min-width: 64rem) {

    .cart-item {
        padding: var(--unit-20);
    }

    .cart-item__title {
        font-size: var(--unit-24);
    }

    .cart-item__price {
        font-size: var(--unit-30);
    }

}

@media (max-width: 63.9375rem) {

    .cart-item {
        padding: var(--unit-12);
    }

    .cart-item__title {
        font-size: var(--unit-20);
    }

    .cart-item__price {
        font-size: var(--unit-22);
    }

}

/* end Cart */

/* Checkout */

.checkout__box {
    background-color: var(--color-gray-10);
}

.checkout__number {
    background-color: var(--color-primary);
    width: var(--unit-40);
    height: var(--unit-40);
    border-radius: 50%;
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.checkout__title {
    font-weight: var(--font-bold);
}

.checkout__paragraph {
    color: var(--color-gray-700);
}

.form--checkout input {
    width: 100%;
}

.toggle {
    cursor: pointer;
    position: relative;
}

.toggle__input {
    display: none;
}

.toggle__track {
    width: var(--unit-48);
    height: var(--unit-24);
    border-radius: 100vw;
    background-color: var(--color-gray-200);
    position: relative;
    transition: var(--transition);
}

.toggle__thumb {
    width: var(--unit-18);
    height: var(--unit-18);
    border-radius: 50%;
    background-color: var(--color-white);
    position: absolute;
    top: 50%;
    left: var(--unit-3);
    transform: translateY(-50%);
    transition: var(--transition);
}

.toggle__input:checked+.toggle__track {
    background-color: var(--color-success);
}

.toggle__input:checked+.toggle__track .toggle__thumb {
    left: calc(100% - var(--unit-18) - var(--unit-3));
}

.toggle__label {
    font-size: var(--unit-14);
    color: var(--color-gray-700);
    font-weight: var(--font-bold);
}

.checkout__secure {
    color: var(--color-success);
}

.checkout__secure-label {
    font-weight: var(--font-bold);
    font-size: var(--unit-14);
    color: var(--color-success);
}

@media (min-width: 64rem) {

    .checkout__box {
        padding: var(--unit-32);
    }

    .checkout__title {
        font-size: var(--unit-24);
    }

}

@media (max-width: 63.9375rem) {

    .checkout__title {
        font-size: var(--unit-20);
    }

    .checkout__box {
        padding: var(--unit-12);
    }

    .checkout__number {
        display: none;
    }

    .checkout__number span {
        font-size: var(--unit-12);
    }

}

/* end Checkout */

/* Order details */

.checkout-summary__item {
    padding: var(--unit-24) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.checkout-summary__image {
    width: calc(10 * var(--spacing-default));
}

.checkout-summary__title {
    flex-grow: 1;
    font-size: var(--unit-20);
    font-weight: var(--font-bold);
}

.checkout-summary__price {
    white-space: nowrap;
    color: var(--color-gray-700);
    font-family: var(--font-secondary);
    font-size: var(--unit-20);
}

.checkout-summary__total {
    padding-top: var(--unit-24);
}

.checkout-summary__label {
    font-weight: var(--font-bold);
    font-size: var(--unit-24);
}

.checkout-message__label {
    font-family: var(--font-secondary);
    font-size: var(--unit-50);
    line-height: 1;
    text-transform: uppercase;
}

.checkout-message svg {
    width: var(--unit-100);
    width: var(--unit-100);
}

@media (max-width: 63.9375rem) {

    .checkout-summary__title {
        font-size: var(--unit-14);
    }

    .checkout-summary__image {
        width: var(--unit-64);
        min-width: var(--unit-64);
    }

    .cart-summary__value--total,
    .checkout-summary__label {
        font-size: var(--unit-20);
    }

    .checkout-message__label {
        font-size: var(--unit-35);
    }

    .checkout-message svg {
        width: var(--unit-50);
        height: var(--unit-50);
    }

}

/* end Order details */

/* Our story */

.our-story__title {
    font-family: var(--font-secondary);
    text-transform: uppercase;
}

.our-story__text {
    text-transform: uppercase;
    color: var(--color-gray-700);
    line-height: 1.4;
}

@media (min-width: 64rem) {
    .our-story__title {
        font-size: var(--unit-35);
        line-height: 1;
        letter-spacing: calc(-1 * var(--unit-2));
    }

    .our-story__text {
        padding-left: var(--unit-32);
    }
}

@media (max-width: 63.9375rem) {
    .our-story__title {
        font-size: var(--unit-32);
        letter-spacing: calc(-1 * var(--unit-2));
    }

    .our-story__text {
        font-size: var(--unit-16);
    }
}

/* end Our story */

/* Contact */

.contact-detail__title {
    text-transform: uppercase;
    font-family: var(--font-secondary);
    font-size: var(--unit-35);
}

.contact-detail a span {
    text-decoration: underline;
}

.contact-detail a {
    background-color: var(--color-white);
    padding: var(--unit-12);
}

.contact-detail__paragraph {
    text-transform: uppercase;
    font-size: var(--unit-14);
}

@media (min-width: 64rem) {

    .contact-detail a {
        transition: var(--transition);
    }

    .contact-detail a:hover {
        background-color: var(--color-gray-50);
    }

}

/* end Contact */

/* Account */

.account-title {
    font-weight: var(--font-bold);
}

/* Page titles on non-hero pages are <h1 class="account-title"> rendered via
   _partials/page-heading.tpl. Reset ALL the global <h1> styling (serif, uppercase,
   large, margins) so the h1 renders exactly like the static .account-title div. */
h1.account-title {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: var(--font-bold);
    letter-spacing: normal;
    text-transform: none;
    margin: 0;
}

.account-container {
    background-color: var(--color-gray-50);
}

.account-container__initials {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary);
    border-radius: 50%;
}

.account-container__initials span {
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-size: var(--unit-30);
}

.account-container__greeting {
    font-size: var(--unit-14);
}

.account-container__name {
    font-weight: var(--font-bold);
    font-size: var(--unit-20);
}

.account-container__sign-out {
    text-decoration: underline;
    font-size: var(--unit-13);
    font-weight: var(--font-bold);
    color: var(--color-gray-700);
}

.account-container__nav ul {
    list-style-type: none;
}

.account-container__nav ul li a {
    background-color: var(--color-white);
    padding: var(--unit-12);
    border-bottom: 1px solid var(--color-gray-200);
    font-weight: var(--font-bold);
}

.account-container__nav ul li[data-active] a {
    border-color: var(--color-gray-500);
}

.account-container__dynamic {
    background-color: var(--color-white);
}

.no-orders-title {
    font-family: var(--font-secondary);
    text-transform: uppercase;
    font-size: var();
}

@media (min-width: 64rem) {

    .account-container {
        padding: var(--unit-32);
    }

    .account-container__initials {
        width: var(--unit-50);
        min-width: var(--unit-50);
        height: var(--unit-50);
        min-height: var(--unit-50);
    }

    .account-container__sign-out,
    .account-container__nav ul li a {
        transition: var(--transition);
    }

    .account-container__sign-out:hover {
        color: var(--color-gray-900);
    }

    .account-container__nav ul li a:hover {
        border-color: var(--color-gray-500);
        background-color: var(--color-gray-10);
    }

    .account-container__dynamic {
        padding: var(--unit-24);
    }

    .no-orders-title {
        font-size: var(--unit-35);
    }

}

@media (max-width: 63.9375rem) {

    .account-container {
        padding: var(--unit-0);
        background-color: var(--color-white);
    }

    .account-container__initials {
        width: var(--unit-40);
        min-width: var(--unit-40);
        height: var(--unit-40);
        min-height: var(--unit-40);
    }

    .account-container__initials span {
        font-size: var(--unit-20);
    }

    .account-container__name {
        font-size: var(--unit-14);
    }

    .account-container__nav ul li a {
        padding-left: 0;
    }

    .account-container__nav ul {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .account-container__nav ul::-webkit-scrollbar {
        display: none;
    }

    .account-container__nav ul li {
        flex-shrink: 0;
    }

    .account-container__nav a svg {
        width: var(--unit-18);
        height: var(--unit-18);
    }

    .account-container__nav a span {
        font-size: var(--unit-14);
    }

    .account-container__nav ul li a {
        border-bottom: 1px solid transparent;
        border-top: none;
        white-space: nowrap;
        padding: var(--unit-12) var(--unit-16);
        background-color: var(--color-gray-50);
    }

    .account-container__nav ul li[data-active] a {
        background-color: var(--color-gray-50);
    }

    .account-container__nav ul li[data-active] a {
        border-bottom-color: var(--color-gray-900);
    }

    .no-orders-title {
        font-size: var(--unit-25);
    }

}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--unit-14);
}

.orders-table th {
    text-align: left;
    padding: var(--unit-12) var(--unit-16);
    border-bottom: var(--unit-2) solid var(--color-gray-100);
    font-weight: var(--font-bold);
    color: var(--color-gray-700);
}

.orders-table td {
    padding: var(--unit-12) var(--unit-16);
    border-bottom: 1px solid var(--color-gray-100);
}

.orders-table__view {
    font-weight: var(--font-bold);
    text-decoration: underline;
    color: var(--color-info-500);
}

.order-meta__label {
    font-size: var(--unit-13);
    color: var(--color-gray-500);
    margin-bottom: var(--unit-5);
}

.order-meta__value {
    font-weight: var(--font-bold);
    font-size: var(--unit-14);
}



.order-meta__value--transit {
    color: var(--color-primary);
}

.order-meta__value--processing {
    color: var(--color-gray-700);
}

.order-section__title {
    font-weight: var(--font-bold);
    font-size: var(--unit-16);
    margin-bottom: var(--unit-12);
}

.order-section__text {
    font-size: var(--unit-14);
    color: var(--color-gray-700);
}

.order-product {
    padding: var(--unit-16) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.order-product__image {
    width: var(--unit-100);
    min-width: var(--unit-100);
}

.order-product__title {
    font-weight: var(--font-bold);
    font-size: var(--unit-15);
}

.order-product__meta {
    font-size: var(--unit-13);
    color: var(--color-gray-700);
}

.order-product__price {
    font-weight: var(--font-bold);
    white-space: nowrap;
}

@media (min-width: 64rem) {
    .orders-table__view {
        transition: var(--transition);
    }

    .orders-table__view:hover {
        color: var(--color-gray-900);
    }
}

@media (max-width: 63.9375rem) {

    .orders-table {
        font-size: var(--unit-12);
    }

}

.input-password {
    position: relative;
}

.input-password input {
    width: 100%;
    padding-right: var(--unit-48);
}

/* The framework injects .password-toggle (1rem box, right:.5rem) which shrinks
   the 24px icon and misaligns it. Restore the original size/position. */
.input-password .password-toggle {
    right: var(--unit-16);
    width: auto;
    height: auto;
}

.invoice-item {
    padding: var(--unit-12) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.invoice-item__title {
    font-weight: var(--font-bold);
    font-size: var(--unit-16);
}

.invoice-item__order {
    font-size: var(--unit-14);
    color: var(--color-info-500);
    text-decoration: underline;
}

.invoice-item__download {
    font-weight: var(--font-bold);
    font-size: var(--unit-14);
    color: var(--color-gray-700);
    white-space: nowrap;
}

.invoice-item:first-child,
.orders-table thead tr th {
    padding-top: 0;
}

.invoice-item:last-child,
.orders-table tbody tr:last-child td {
    padding-bottom: 0;
    border-bottom: none;
}

.modal__delete-account-message {
    font-weight: var(--font-bold);
}

.modal__delete-account-cancel {
    text-align: center;
    font-weight: var(--font-bold);
    cursor: pointer;
    background-color: var(--color-gray-100);
    height: var(--unit-56);
    display: flex;
    justify-content: center;
    align-items: center;
}

.form__forgot {
    font-weight: var(--font-bold);
    text-decoration: underline;
    margin-top: var(--unit-8);
}

@media (min-width: 64rem) {

    .invoice-item__order,
    .invoice-item__download,
    .form__forgot {
        transition: var(--transition);
    }

    .invoice-item__order:hover,
    .form__forgot:hover {
        color: var(--color-info-700);
    }

    .invoice-item__download:hover {
        color: var(--color-gray-900);
    }

    .invoice-item__download:hover svg path {
        stroke: var(--color-gray-900);
    }

}

.log-in__logo {
    aspect-ratio: 1/1;
    background-color: var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
}

.log-in__logo svg {
    width: 80%;
}

.log-in__logo svg path {
    fill: var(--color-white);
}

.address-item {
    padding: var(--unit-24) 0;
    border-bottom: 1px solid var(--color-gray-100);
    display: flex;
    flex-direction: column;
    gap: var(--unit-20);
}

.address-item:last-of-type {
    border-bottom: none;
}

.address-item__label {
    font-size: var(--unit-13);
    color: var(--color-gray-500);
}

.address-item__text {
    font-size: var(--unit-15);
    line-height: 1.5;
}

.address-item__action {
    display: flex;
    align-items: center;
    gap: var(--unit-8);
    cursor: pointer;
    font-weight: var(--font-bold);
    font-size: var(--unit-14);
    color: var(--color-gray-700);
}

.address-item__primary-label {
    font-size: var(--unit-14);
}

.toggle__track--green {
    background-color: var(--color-gray-200);
}

.toggle__input:checked+.toggle__track--green {
    background-color: var(--color-success);
}

.address-item__primary-label {
    font-weight: var(--font-bold);
}

@media (min-width: 64rem) {
    .address-item__action {
        transition: var(--transition);
    }

    .address-item__action:hover {
        color: var(--color-gray-900);
    }

    .address-item__action:hover svg path {
        stroke: var(--color-gray-900);
    }
}

.address-item__action--disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ── Account / customer pages (auth, register, identity) ───────────────── */
/* Server-side field errors rendered under an input */
.form__error {
    display: block;
    margin-top: var(--unit-4);
    font-size: var(--unit-14);
    color: var(--color-error, #c0392b);
}

/* Gender radios group */
.form-radio-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--unit-20);
}

.form-radio-group__label {
    font-size: var(--unit-15);
    color: var(--color-gray-700);
}

/* "Already have an account?" prompt under the register form */
.register-form__login-prompt {
    font-size: var(--unit-15);
    color: var(--color-gray-700);
    margin-top: var(--unit-24);
}

.register-form__login-prompt a {
    color: var(--color-gray-900);
    text-decoration: underline;
    font-weight: var(--font-bold);
}

/* Auth right-column logo box (the "chenar negru"). The BO-uploaded shop logo
   ($shop.logo — a dark SVG) is rendered as an <img> via customer/_partials/auth-logo.tpl
   and forced white over the black box with a filter. Sized like the old inline SVG (80%). */
.log-in__logo img {
    width: 80%;
    height: auto;
    filter: brightness(0) invert(1);
}

/* Search-results line — shown above the grid, between the sort bar and results. */
.search-results-info {
    margin-top: var(--unit-8);
    margin-bottom: var(--unit-24);
}

/* ── PrestaShop facets — Noera filter-modal styling (T12) ──────────────────
   Restyles ps_facetedsearch's #search_filters to the Noera look. Accordion
   groups reuse .accordion__*; below are the per-facet controls + the jQuery-UI
   price slider restyle. */
.facets__clear-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--unit-8);
}

.facets__clear {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--unit-13);
    color: var(--color-gray-700);
    text-decoration: underline;
    cursor: pointer;
    transition: var(--transition);
}

.facets__clear:hover {
    color: var(--color-gray-900);
}

/* checkbox / radio facet rows */
.facet__list {
    display: flex;
    flex-direction: column;
    gap: var(--unit-12);
    list-style: none;
    margin: 0;
    padding: 0;
}

.facet__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--unit-12);
    cursor: pointer;
    color: var(--color-gray-700);
    transition: var(--transition);
}

.facet__row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.facet__check {
    flex: 0 0 auto;
    width: var(--unit-18);
    height: var(--unit-18);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--unit-4);
    position: relative;
    transition: var(--transition);
}

.facet__check::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 46%;
    width: var(--unit-5);
    height: var(--unit-9);
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transition: var(--transition);
}

.facet__row input:checked + .facet__check {
    background-color: var(--color-gray-900);
    border-color: var(--color-gray-900);
}

.facet__row input:checked + .facet__check::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

/* radio facets → round control + dot */
.facet__row input[type="radio"] + .facet__check {
    border-radius: 50%;
}

.facet__row input[type="radio"] + .facet__check::after {
    width: var(--unit-8);
    height: var(--unit-8);
    border: none;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
}

.facet__row input[type="radio"]:checked + .facet__check::after {
    transform: translate(-50%, -50%) scale(1);
}

.facet__label {
    font-size: var(--unit-14);
    line-height: 1.3;
}

.facet__row:hover,
.facet__row--active .facet__label {
    color: var(--color-gray-900);
}

.facet__count {
    color: var(--color-gray-500);
}

/* colour facets → reuse the swatch look */
.facet__colors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--unit-14);
}

.facet-color {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.facet-color input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.facet-color__swatch {
    display: block;
    width: var(--unit-28);
    height: var(--unit-28);
    border-radius: 50%;
    background-color: var(--swatch);
    background-size: cover;
    outline: var(--unit-2) solid transparent;
    outline-offset: var(--unit-3);
    box-shadow: inset 0 0 0 1px var(--color-gray-200);
    transition: var(--transition);
}

.facet-color input:checked + .facet-color__swatch {
    outline-color: var(--color-gray-900);
}

/* price slider — restyle ps_facetedsearch's jQuery-UI slider to match .price-range */
.noera-slider {
    padding: var(--unit-20) var(--unit-8) var(--unit-8);
    list-style: none;
    margin: 0;
}

.noera-slider__values {
    font-size: var(--unit-14);
    color: var(--color-gray-700);
    margin-bottom: var(--unit-16);
}

/* #search_filters prefix beats jQuery-UI's own .ui-slider rules (same class
   specificity, but it loads after our style.css). */
#search_filters .noera-slider__range.ui-slider {
    position: relative;
    height: var(--unit-2);
    background-color: var(--color-gray-100);
    border-radius: 100vw;
    border: none;
}

#search_filters .noera-slider__range .ui-slider-range {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: var(--color-gray-900);
    border-radius: 100vw;
}

#search_filters .noera-slider__range .ui-slider-handle {
    position: absolute;
    top: 50%;
    width: var(--unit-16);
    height: var(--unit-16);
    margin-left: calc(-1 * var(--unit-8));
    transform: translateY(-50%);
    background: var(--color-gray-900);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    transition: transform var(--transition);
}

#search_filters .noera-slider__range .ui-slider-handle:hover,
#search_filters .noera-slider__range .ui-slider-handle.ui-state-active {
    transform: translateY(-50%) scale(1.2);
}


/* end Account */

/* ── Wishlist heart on product cards (T16) ───────────────────────────────
   blockwishlist injects <button class="wishlist-button-add"> into the
   .thumbnail-container; we restyle it to the Noera heart (white, top-right). */
.image-container--product-list .thumbnail-container {
    position: relative;
    display: block;
}

.wishlist-button-add,
.wishlist-button {
    position: absolute;
    top: var(--unit-16);
    right: var(--unit-16);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--unit-32);
    height: var(--unit-32);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.wishlist-button-add .material-icons,
.wishlist-button .material-icons {
    font-size: var(--unit-22);
    line-height: 1;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.28));
    transition: var(--transition);
}

.wishlist-button-add:hover .material-icons,
.wishlist-button:hover .material-icons {
    transform: scale(1.12);
}

/* added/checked state: filled heart */
.wishlist-button-add.checked .material-icons,
.wishlist-button-add[data-checked="true"] .material-icons,
.wishlist-button.checked .material-icons {
    color: #fff;
}

/* strip blockwishlist's default circular button chrome so only the heart shows */
.image-container--product-list .thumbnail-container .wishlist-button-add {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: auto;
    height: auto;
}

/* ── Material Icons font (vendored from Hummingbird) ──────────────────────
   Several ported templates still use the `material-icons` glyph font
   (pagination arrows, active-filter close, order-history, wishlist heart…).
   The theme didn't load it, so those glyphs showed as raw ligature text.
   (Specific glyphs can be swapped for Noera SVGs later for exact 1:1.) */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/MaterialIcons-Regular.woff2') format('woff2'),
         url('../fonts/MaterialIcons-Regular.woff') format('woff');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: var(--unit-24);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Noéra: hide the PrestaShop product social-share block (ps_sharebuttons) — the
   static product design has no share buttons. Kept in the DOM for JS, hidden. */
.product__additional-info { display: none; }

/* Noéra: hide the checkout step navigation (unstyled Hummingbird desktop list +
   mobile progress). The static checkout shows the step number inside each
   .checkout__box, not a separate top nav. */
.checkout-steps { display: none; }

/* Noéra: server-rendered PS flash notifications (login / voucher / etc.).
   These are the non-AJAX flash blocks from _partials/notifications.tpl —
   reskinned off Bootstrap .alert onto a muted Noera component. */
.notification {
  position: relative;
  padding: 1rem 2.5rem 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid;
  border-radius: 2px;
  font-size: 14px;
  line-height: 1.5;
}
.notification--error {
  background: #fbf1f0;
  border-color: #e3c2bd;
  color: #8a3a30;
}
.notification--warning {
  background: #fdf6ec;
  border-color: #ecd9b0;
  color: #8a6a1f;
}
.notification--success {
  background: #f0f5ef;
  border-color: #c2d6bd;
  color: #3d6b39;
}
.notification--info {
  background: #f4f4f2;
  border-color: #d6d4cd;
  color: #4a463d;
}
.notification__list {
  margin: 0;
  padding-left: 1.25rem;
}
.notification__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: none;
  border: 0;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: .6;
}
.notification__close:hover {
  opacity: 1;
}

/* FormField forms (account + checkout address) — style PS FormField markup
   (form-group / form-label / form-control / select) to the Noera input look.
   Scoped to .js-address-form so the shared qty-stepper .form-control is untouched. */
.js-address-form .form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--unit-24);
}
.js-address-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--unit-8);
}
.js-address-form .form-label {
  font-weight: var(--font-bold);
  font-size: var(--unit-14);
  color: var(--color-gray-900);
}
.js-address-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.js-address-form select,
.js-address-form textarea {
  width: 100%;
  background-color: unset;
  outline: unset;
  border: 1px solid var(--color-gray-300);
  height: var(--unit-56);
  padding: 0 var(--unit-16);
  border-radius: var(--unit-8);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
}
.js-address-form textarea {
  height: auto;
  min-height: 120px;
  padding: var(--unit-16);
}
.js-address-form input:not([type="checkbox"]):not([type="radio"]):focus,
.js-address-form select:focus,
.js-address-form textarea:focus {
  border-color: var(--color-gray-900);
}
.js-address-form input::placeholder,
.js-address-form textarea::placeholder {
  color: var(--color-gray-700);
}
.js-address-form .form-control-comment {
  font-size: var(--unit-12);
  color: var(--color-gray-700);
}

/* Favourites quick-add card — a real add-to-cart button under each saved product.
   The card is a div (not a wrapping <a>) so the button + image/title links coexist. */
.favourites-card .product-list__title {
  display: block;
}
.favourites-card__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: var(--unit-16);
  text-align: center;
}

/* Order-confirmation product image — explicit Noera sizing (replaces the inert
   Bootstrap .img-fluid the theme never loaded CSS for). */
.order-confirmation__product-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Checkout guest step — Noera tab switcher (guest/register vs login), replaces
   the Bootstrap nav-underline tabs. JS: index.js initCheckoutTabs. */
.checkout-tabs__btn {
  background: none;
  border: none;
  padding: 0 0 var(--unit-8);
  cursor: pointer;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  color: var(--color-gray-700);
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}
.checkout-tabs__btn.is-active {
  color: var(--color-gray-900);
  border-bottom-color: var(--color-gray-900);
}
.checkout-tabs__content {
  margin-top: var(--unit-24);
}
.checkout-tabs__pane {
  display: none;
}
.checkout-tabs__pane.is-active {
  display: block;
}

/* Noera collapse toggles — native <details> for voucher + checkout order-summary */
.cart-voucher__summary,
.cart-summary__products-summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1F2329;
}
.cart-voucher__summary::-webkit-details-marker,
.cart-summary__products-summary::-webkit-details-marker { display: none; }
.cart-voucher__summary::after,
.cart-summary__products-summary::after { content: "+"; float: right; font-size: 16px; line-height: 1; }
details[open] > .cart-voucher__summary::after,
details[open] > .cart-summary__products-summary::after { content: "\2013"; }
.cart-voucher__body { padding-top: 12px; }
.cart-voucher__form input[type="text"] { width: 100%; }