.btn-primary {
    color: #fff;
    background-color: #303030;
    border-color: #303030;
}
.btn-primary:hover {
    color: #303030;
    background-color: #fff;
    border-color: #303030;
}
/* CONTAINER - START */
.footer-grid {
    max-width: 2400px;
}
.site-footer .badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
/* CONTAINER - END */


/* MODALS - START */
.modal-content {
    padding: 1rem 2rem;
}
.modal-header {
	justify-content: space-between;
}
.modal-header,
.modal-body,
.modal-footer {
    padding-left: 0;
    padding-right: 0;
}
.modal-header .modal-title {
    font-weight: bold;
    font-size: 1.25rem;
}
.modal-footer {
    border: 0;
    justify-content: center;
}
.modal-footer .btn-close-extra {
    box-sizing: content-box;
    height: 1rem;
    padding: 0.25rem 0.25rem 0.25rem 1.75rem;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") left 75%/.75rem auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: .5;
}
/* MODALS - END */

/* ALERTS - START */
.alert {
    font-size: 0.8125rem;
}
.alert-fixed {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    min-width: 50rem;
    max-width: calc(100% - 6rem);
    margin-right: auto;
    margin-left: auto;
    transform: translateX(-50%);
    z-index: 9999;    
}
.alert-fixed + .alert-fixed {
	bottom: 5rem;
}
.alert-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #5cb85c;
}
.alert-danger {
    color: #fff;
    background-color: #d52925;
    border-color: #d52925;
}
.alert-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}
.alert-info {
    color: #fff;
    background-color: #3c9ce2;
    border-color: #3c9ce2;
}
.alert-success a,
.alert-danger a,
.alert-warning a,
.alert-info a {
	color: #fff;
	text-decoration: underline;
}
.alert .btn-close {
	color: #A64343;
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	padding: .25em .25em;
    opacity: 1
}
/* ALERTS - END */


/* HOME - START */
#common-home > .content-top {
    display: block;
}
#common-home > .content-top > * {
    margin-bottom: 2px;
}
/* Banner rows: 2px gutter BETWEEN banners, flush to the page edges, no overflow.
   The Bootstrap gutter would add -1px side margins on the row (→ 2px page overflow)
   and 1px side padding on every column (→ a 1px gap at the outer edges). So we keep
   the 2px gutter for inter-banner spacing but (a) zero the row's side margins, which
   removes the overflow so .module-container needs no compensating padding, and
   (b) drop the side padding on the first/last column so the edge banners sit flush. */
#common-home > .content-top .single-banners .banner-row,
#common-home > .content-top .three-banners .banner-row,
#common-home > .content-top .double-banners .banner-row {
    --bs-gutter-x: 2px;
    margin-left: 0;
    margin-right: 0;
}
#common-home > .content-top .single-banners .banner-row > *:first-child,
#common-home > .content-top .three-banners .banner-row > *:first-child,
#common-home > .content-top .double-banners .banner-row > *:first-child {
    padding-left: 0;
}
#common-home > .content-top .single-banners .banner-row > *:last-child,
#common-home > .content-top .three-banners .banner-row > *:last-child,
#common-home > .content-top .double-banners .banner-row > *:last-child {
    padding-right: 0;
}
/* Below md the banners stack full-width (col-12), so the horizontal gutter just
   insets them by 1px on the inner side — zero it so stacked banners are flush. */
@media (max-width: 767.98px) {
    #common-home > .content-top .single-banners .banner-row > *,
    #common-home > .content-top .three-banners .banner-row > *,
    #common-home > .content-top .double-banners .banner-row > * {
        padding-left: 0;
        padding-right: 0;
    }
}
/* HOME - END */


/* STORES - START */
.information-stores-content {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.information-stores-content h1 {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
}
.information-stores-content .description {
    font-size: 0.8125rem;
    text-align: center;
    max-width: 30rem;
    margin: 0 auto 2rem auto;
}
.information-stores-content .stores-wrapper {
    max-width: 80rem;
    margin: auto;
    border-top: 1px solid #E1E1E1;
    padding: 2rem 0;
    text-align: center;
}
.information-stores-content .stores-wrapper h4 {
    font-size: 0.875rem;
    margin-bottom: 2.5rem;
}
.information-stores-content .stores-wrapper h4.points {
    border-top: 1px solid #E1E1E1;
    padding-top: 2rem;
}
.information-stores-content .stores-logo {
    max-width: 9rem;
    margin: 0 0 2rem 0;
}
.information-stores-content .stores-logo.stores-logo-zoe {
    max-width: 14rem;
}
.information-stores-content .stores-row {
    margin-bottom: 4rem;
    --bs-gutter-x: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.information-stores-content .stores-row .store-block-wrap {
    width: 33.33333333%;
    flex: 0 0 auto;
    padding: 0.5rem;
}
/* Tablet: 2 columns */
@media (max-width: 991.98px) {
    .information-stores-content .stores-row .store-block-wrap {
        width: 50%;
    }
}
/* Mobile: 1 column */
@media (max-width: 575.98px) {
    .information-stores-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .information-stores-content .stores-row .store-block-wrap {
        width: 100%;
    }
}
.information-stores-content .stores-row .store-block {
    background: var(--color-white);
    padding: 2.25rem 2.5rem;
    border-radius: .75rem;
}
.information-stores-content .stores-row .store-block-title {
    font-size: 0.825rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.information-stores-content .stores-row .store-block-address {
    font-size: 0.75rem;
}
.information-stores-content .stores-row .store-block-actions {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: 1.25rem;
}
.information-stores-content .stores-row .store-block-actions a {
    border: 1px solid #E1E1E1;
    display: flex;
    border-radius: .25rem;
    padding: 0.9375rem 1rem;
    font-size: .75rem;
    justify-content: space-between;
    align-items: center;
}
.information-stores-content .stores-row .store-block-actions a:hover {
    background-color: #000;
    color: #fff;
}
/* STORES - END */


/* ABOUT US - START */
.about-us-container {
    max-width: 60rem;
    margin: auto;
    padding: 2rem;
}
.about-us-container #content {
    font-size: 0.75rem;
    line-height: 1.5rem;
}
.about-us-container #content img {
    border-radius: 1rem;
    max-width: 100%;
}
.about-us-container #content h1 {
    font-size: 1.5rem;
    font-weight: 400;
}
.about-us-container .about-us-links {
    margin: 6rem auto 3rem auto;
    max-width: 36rem;
}
.about-us-container .about-us-links h4 {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: .15rem;
    margin-bottom: 1.5rem;
}
.about-us-container .about-us-links .banner-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.about-us-container .about-us-links .banner-item {
    border: 1px solid #000000;
    border-radius: 5px;
    font-size: .75rem;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem;
    display: flex;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.about-us-container .about-us-links .banner-item i {
    transition: transform .2s ease;
}
.about-us-container .about-us-links .banner-item:hover {
    background-color: #000;
    border-color: #000;
    color: #fff;
}
.about-us-container .about-us-links .banner-item:hover i {
    transform: translateX(5px);
}
.about-us-container .about-us-links .banner-item:last-child {
    grid-column: span 2 / span 2;
}
.about-us-container .about-us-links .banner-item h2 {
    font-size: .75rem;
    margin: 0;
}
/* ABOUT US - END */


/* GIFT CARD - START */
#account-voucher {
    background-color: #f6f6f8;
    padding: 3rem 1.5rem 6rem;
}
#account-voucher .row {
    margin: 0;
}
#account-voucher #content {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0;
}
#account-voucher .main-content-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 1rem;
}
#account-voucher .description {
    text-align: center;
    font-size: .8125rem;
    line-height: 1.5rem;
    color: #000;
    max-width: 38rem;
    margin: 0 auto 3.5rem;
}
/* 2-col layout: form | image (image goes right via order) */
#account-voucher #content > div:last-of-type {
    display: grid;
    grid-template-columns: 22.75rem 26.875rem;
    column-gap: 6.125rem;
    justify-content: center;
    align-items: start;
}
#account-voucher .form {
    order: 1;
}
#account-voucher .banner {
    order: 2;
}
#account-voucher .banner img {
    display: block;
    width: 100%;
    max-width: 26.875rem;
    height: 40.3125rem;
    border-radius: .625rem;
    object-fit: cover;
}

/* Form fields: underline-only, label on top */
#account-voucher .col-input {
    margin-bottom: 1.875rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: .4375rem;
}
#account-voucher .form-label {
    display: block;
    font-size: .8125rem;
    color: #000;
    font-weight: 400 !important;
    margin: 0 0 .25rem;
    padding: 0;
    letter-spacing: 0;
}
#account-voucher .col-input .form-control {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: .8125rem;
    color: #000;
    box-shadow: none;
    outline: none;
}
#account-voucher .col-input textarea.form-control {
    min-height: 4rem;
    resize: vertical;
    line-height: 1.5;
}
/* Giftcard type dropdown: underline style (inherits .form-control) + custom chevron */
#account-voucher .col-input select.form-control {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .25rem center;
    background-size: 1rem;
    padding-right: 1.5rem;
}

/* Section labels (ΠΟΣΟ ΔΩΡΟΚΑΡΤΑΣ, ΑΛΛΟ ΠΟΣΟ) — non-floating labels outside .col-input */
#account-voucher form > div > div > .form-label {
    font-size: .75rem;
    text-transform: uppercase;
    margin: 0 0 .625rem;
}
#account-voucher .amounts-extra {
    display: flex;
    flex-wrap: wrap;
    gap: .1875rem;
    margin-bottom: 1.5rem;
}
#account-voucher .amount-extra {
    position: relative;
}
#account-voucher .amount-extra input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
#account-voucher .amount-extra label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 2.5rem;
    border: 1px solid #e1e1e1;
    border-radius: .3125rem;
    background: #fff;
    font-size: .75rem;
    color: #000;
    cursor: pointer;
    margin: 0;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
#account-voucher .amount-extra:hover label,
#account-voucher .amount-extra.active label {
    border-color: #000;
    background: #000;
    color: #fff;
}

/* Other amount input */
#account-voucher #input-amount {
    width: 12.125rem;
    height: 2.5rem;
    border: 1px solid #e1e1e1;
    border-radius: .3125rem;
    background: #fff;
    padding: 0 .9375rem;
    font-size: .8125rem;
    color: #000;
    outline: none;
}
#account-voucher #input-amount::placeholder {
    color: #5a5a5a;
}

/* CTA buttons */
#account-voucher .d-grid {
    display: block;
    margin-top: 1.5rem;
}
#account-voucher #voucher-submit-alt {
    position: relative;
    display: block;
    width: 100%;
    height: 3.125rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .3125rem;
    padding: 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
#account-voucher #voucher-submit-alt > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
#account-voucher #voucher-submit-alt i {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
    color: inherit;
}
#account-voucher #voucher-submit-alt .text {
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .25rem;
    text-transform: uppercase;
    color: inherit;
}
#account-voucher #voucher-submit-alt:hover {
    background: #000;
    color: #fff;
}
#account-voucher #voucher-submit-quick {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 0;
    padding: .75rem 0 0;
    margin-top: .25rem;
    font-size: .75rem;
    color: #000;
    cursor: pointer;
}
#account-voucher #voucher-submit-quick:hover {
    text-decoration: underline;
}
#account-voucher #voucher-submit-quick i {
    font-size: .75rem;
}

/* Responsive: collapse to single column below 1024px (image on top, form below) */
@media (max-width: 1024px) {
    .copyright > div {
        grid-template-columns: 1fr;
    }
    .copyright > div .copy,
    .copyright > div .payment-logos,
    .copyright > div .dev {
        justify-self: center;
    }
    .copyright > div .payment-logos {
        order: 1;
        padding-bottom: 20px;
    }
    .copyright > div .copy{
        order: 2;
    }
    .copyright > div .dev{
        order: 3;
    }
    .site-footer .badges {
        margin-top: 20px;
    }
    #account-voucher {
        padding: 2.5rem 1rem 4rem;
    }
    #account-voucher .description {
        margin-bottom: 2.5rem;
    }
    /* grid -> single column; block ignores order, so DOM order (banner, then form) applies */
    #account-voucher #content > div:last-of-type {
        display: block;
        max-width: 30rem;
        margin: 0 auto;
    }
    #account-voucher .banner {
        margin-bottom: 2.5rem;
    }
    #account-voucher .banner img {
        height: auto;
        aspect-ratio: 430 / 645;
        max-width: 20rem;
        margin: 0 auto;
    }
    /* Center amount section labels (ΠΟΣΟ ΔΩΡΟΚΑΡΤΑΣ, ΑΛΛΟ ΠΟΣΟ) */
    #account-voucher form > div > div > .form-label {
        text-align: center;
    }
    /* Center the amount buttons */
    #account-voucher .amounts-extra {
        justify-content: center;
    }
    /* "ΑΛΛΟ ΠΟΣΟ" input full width on mobile */
    #account-voucher #input-amount {
        width: 100%;
    }
}
/* GIFT CARD - END */

/* LOGIN - START */
#account-login {
    background-color: #f6f6f8;
    padding: 3rem 1.5rem 6rem;
}
#account-login .row {
    margin: 0;
}
#account-login #content {
    max-width: 65.375rem;
    margin: 0 auto;
    padding: 0;
}

/* 2-col layout: login | register. minmax(0, …) lets the columns shrink to fit
   between ~1024px and ~1094px (where the fixed 430+430+gap would otherwise overflow);
   at >=1094px they cap at 26.875rem so the desktop layout is unchanged. */
#account-login .columns-container {
    display: grid;
    grid-template-columns: minmax(0, 26.875rem) minmax(0, 26.875rem);
    column-gap: 11.625rem;
    justify-content: center;
    align-items: start;
}

/* Section titles */
#account-login h1,
#account-login h2,
#account-login h3 {
    font-size: 1.125rem;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 0 .375rem;
    line-height: 1.4;
}

/* Subtitle paragraphs (intro texts) */
#account-login .columns-container > div > p,
#account-login .register-top > p,
#account-login .register-bottom > p,
#account-login .social-logins > p {
    font-size: .75rem;
    color: #5a5a5a;
    line-height: 1.6;
    margin: 0 0 2.25rem;
}

/* Inputs (underline-only) */
#account-login .col-input {
    margin-bottom: 1.875rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: .4375rem;
}
#account-login .form-label {
    display: block;
    font-size: .8125rem;
    color: #000;
    font-weight: 400 !important;
    margin: 0 0 .25rem;
    padding: 0;
    letter-spacing: 0;
}
#account-login .col-input .form-control {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: .8125rem;
    color: #000;
    box-shadow: none;
    outline: none;
}

/* Forgot password row */
#account-login .forgot {
    text-align: right;
    margin: 0 0 1.5rem !important;
    font-size: .75rem;
}
#account-login .forgot a {
    color: #000;
    opacity: .5;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}
#account-login .forgot a:hover {
    opacity: 1;
}
#account-login .forgot i {
    font-size: .875rem;
}

/* Generic ghost button (login, register, B2B, social) */
#account-login .login-button-container,
#account-login .register-top,
#account-login .register-bottom {
    margin-top: 1.5rem;
}
#account-login .login-button-container {
    display: block;
}
#account-login .btn,
#account-login a.btn,
#account-login button.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.125rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .3125rem;
    color: #000;
    text-decoration: none;
    padding: 0 1.25rem;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 400;
    transition: background-color .15s ease, color .15s ease;
}
#account-login .btn:hover {
    background: #000;
    color: #fff;
}
#account-login .btn .text {
    color: inherit;
}
#account-login .btn > i {
    color: inherit;
}
/* chevron-right on the right edge */
#account-login #login-button > i.fa-chevron-right,
#account-login .register-top a.btn > i.fa-chevron-right,
#account-login .register-bottom a.btn > i.fa-chevron-right {
    position: absolute;
    right: 1.25rem;
    font-size: .625rem;
}

/* Social logins section */
#account-login .social-logins {
    margin-top: 3rem;
}
#account-login .social-logins h3 {
    font-size: .75rem;
    margin: 0 0 .375rem;
    overflow: hidden;
}
/* horizontal line after social heading */
#account-login .social-logins h3 span {
    display: inline-block;
    padding-right: 1rem;
    position: relative;
}
#account-login .social-logins h3 span::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    width: 13.125rem;
    height: 1px;
    background: #ccc;
}
/* Social login buttons (rendered by tmdsociallogin module) */
#account-login .social_login {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: 0;
    width: 100%;
    max-width: none;
    flex: none;
}
#account-login .social_login .socalicon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.125rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .3125rem;
    color: #000;
    text-decoration: none;
    padding: 0 1.25rem;
    font-size: .75rem;
    transition: background-color .15s ease, color .15s ease;
}
#account-login .social_login .socalicon:hover {
    background: #000;
    color: #fff;
}
#account-login .social_login .socalicon > i {
    position: absolute;
    left: 1.25rem;
    font-size: 1rem;
    color: inherit;
}
#account-login .social_login .socalicon .title {
    color: inherit;
}

/* Register column lists with circle-check bullets */
#account-login .register-top {
    margin-top: 0;
    margin-bottom: 3.5rem;
}
#account-login .register-top ul,
#account-login .register-bottom ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
#account-login .register-top li,
#account-login .register-bottom li {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: .625rem;
    font-size: .8125rem;
    color: #000;
}
#account-login .register-top li i,
#account-login .register-bottom li i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: #E1E1E1;
    color: #000;
    font-size: .75rem;
    flex-shrink: 0;
}

/* Single column on smaller screens — login + social stack first, then register + B2B.
   block layout follows DOM order, so the columns stack in the right sequence. */
@media (max-width: 1024px) {
    #account-login {
        padding: 2.5rem 1rem 4rem;
    }
    #account-login .columns-container {
        display: block;
        max-width: 32rem;
        margin: 0 auto;
    }
    #account-login .columns-container > div + div {
        margin-top: 3rem;
    }
}
/* LOGIN - END */

/* REGISTER - START */
#account-register {
    background-color: #f6f6f8;
    padding: 5rem 1rem 6rem;
}
#account-register .row {
    margin: 0;
}
#account-register #content {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0;
}
#account-register .py-5 {
    padding: 0 !important;
}

/* Header */
#account-register h1 {
    font-size: 1.125rem;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 .5rem;
    color: #000;
    letter-spacing: 0;
}
#account-register > .row > #content > .py-5 > p {
    font-size: .75rem;
    color: #5a5a5a;
    text-align: center;
    line-height: 1.6;
    margin: 0 0 2.75rem;
}

/* Personal info & password fieldsets → 2-col grid */
#account-register #account,
#account-register #password-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 .5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: .75rem;
}
#account-register #account .col-input.d-none {
    display: none;
}

/* Inputs (underline-only) — applies to both .col-input and bare .custom-field wrappers */
#account-register .col-input,
#account-register .custom-field {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ccc;
    padding-bottom: .4375rem;
}
#account-register .form-label {
    display: block;
    font-size: .8125rem;
    color: #000;
    font-weight: 400 !important;
    margin: 0 0 .25rem;
    padding: 0;
    letter-spacing: 0;
}
#account-register .col-input .form-control,
#account-register .custom-field .form-control,
#account-register .col-input select.form-control,
#account-register .col-input input[type="date"],
#account-register .col-input input.form-control {
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: .8125rem;
    color: #000;
    box-shadow: none !important;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0 !important;
    height: auto;
    min-height: 0;
    line-height: 1.5;
}
/* Select dropdown chevron */
#account-register .custom-field select.form-control,
#account-register .col-input select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .25rem center !important;
    background-size: 1rem !important;
    padding-right: 1.5rem !important;
    cursor: pointer;
}

/* Bottom: newsletter radios + agree checkbox + submit button */
#account-register .bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 2rem;
    align-items: end;
    margin-top: 1.5rem;
}
#account-register .bottom > fieldset,
#account-register .bottom > .form-check,
#account-register .bottom > div:not(.btn-container) {
    grid-column: 1;
    border: 0;
    padding: 0;
    margin: 0;
}
#account-register .bottom > fieldset {
    margin-bottom: 2rem;
}

/* Hide "ΕΓΓΡΑΦΗ ΣΤΟ NEWSLETTER" label & merge yes/no radios into compact row */

#account-register .bottom .form-check.form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin: 0 1.25rem 0 0;
    padding: 0;
    min-height: 0;
}
#account-register .bottom .form-check-inline .form-check-input {
    margin: 0;
}
#account-register .bottom .form-check-inline .form-check-label {
    font-size: .75rem;
    margin: 0;
}

/* Standalone agree checkbox */
#account-register .bottom > .form-check {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: .375rem 0;
}
#account-register .bottom > .form-check .form-check-input {
    position: static;
    margin: 0;
    flex-shrink: 0;
}
#account-register .bottom > .form-check .form-check-label {
    font-size: .75rem;
    color: #000;
    font-weight: 400;
    margin: 0;
    cursor: pointer;
}

/* Submit button (right column, vertical center across rows) */
#account-register .btn-container {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0;
}
#account-register .btn-container > input[type="submit"],
#account-register .btn-container .btn {
    position: relative;
    display: block;
    width: 15.375rem;
    height: 3.125rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .3125rem;
    color: #000;
    font-size: .75rem;
    font-weight: 400;
    cursor: pointer;
    padding: 0 2.25rem 0 1.25rem;
    text-align: center;
    transition: background-color .15s ease, color .15s ease;
}
#account-register .btn-container > input[type="submit"]:hover,
#account-register .btn-container .btn:hover {
    background: #000;
    color: #fff;
}
#account-register .btn-container > i {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .625rem;
    color: #000;
    pointer-events: none;
}

/* Single column on smaller screens — every field full width, checkboxes then a
   full-width submit button stacked below (matches the site breakpoint). */
@media (max-width: 1024px) {
    #account-register {
        padding: 2.5rem 1rem 4rem;
    }
    #account-register #account,
    #account-register #password-fieldset {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    #account-register .bottom {
        display: block;
    }
    #account-register .bottom > fieldset {
        margin-bottom: 1.5rem;
    }
    #account-register .btn-container {
        margin-top: 1.5rem !important;
        /* .btn-container is display:grid (Bootstrap .d-grid). Force a full-width
           single column so the button stretches edge-to-edge instead of sitting
           content-width-centered. */
        grid-template-columns: 1fr;
        justify-content: stretch;
    }
    #account-register .btn-container > input[type="submit"],
    #account-register .btn-container .btn {
        width: 100%;
    }
}
/* REGISTER - END */

/* CHECKOUT - START */

#checkout-checkout {
    background-color: #f6f6f8;
    padding: 1.5rem 1rem 4rem;
    max-width: 1320px;
    display: flex;
    gap: 2rem;
}
#checkout-checkout .row {
    margin: 0;
    --bs-gutter-x: 0;
}

/* Checkout header */
.checkout_header .header-container {
    max-width: 2400px;
    margin: auto;
}
.checkout_header .header-main-wrapper {
    display: flex;
    padding: 1.5rem 3rem;
    gap: 2rem;
}
.checkout_header .header-main-wrapper > div {
    flex: 1 1 0;
    min-width: 0; /* equal, shrinkable columns: 3 thirds + the 2rem gaps fit inside the wrapper (no overflow) */
    display: flex;
    justify-content: start;
    align-items: center;
}
.checkout_header .header-main-wrapper .header-logo {
    text-align: center;
    justify-content: center;
}
.checkout_header .header-main-wrapper .header-logo img {
    max-height: 2.5rem;
}
.checkout_header .header-main-wrapper .question a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}
.checkout_header .header-main-wrapper .question a i {
    background: #fff;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E1E1E1;
}
.checkout_header .header-main-wrapper .question a > div {
    display: flex;
    flex-direction: column;
}
.checkout_header .header-main-wrapper .question a > div span:first-child {
    font-size: 0.75rem;
    opacity: 0.6;
}
.checkout_header .header-main-wrapper .question a > div span:last-child {
    font-size: 0.875rem;
}
.checkout_header .header-main-wrapper .cards {
    justify-content: end;
}
.checkout_header .header-main-wrapper .cards img {
    max-width: 100%;
    width: 22rem;
}

/* Two-col layout: content + sidebar */
#quickcheckout-disable {
    padding: 0;
}
#checkout-checkout .checkout-main {
    width: 100%;
    max-width: none;
    padding: 0 1.75rem;
    order: 0;
}
#checkout-checkout .checkout-sidebar {
    width: 100%;
    max-width: 25rem;
    padding: 0;
    flex: none;
    order: 1;
}
#checkout-checkout .checkout-content {
    padding: 0;
}

/* Override existing quickcheckout defaults */
#checkout-checkout .quickcheckout-heading {
    background: transparent !important;
    padding: 0;
    margin: 0 0 .875rem;
    font-size: .875rem;
    font-weight: 500;
    color: #000;
}

/* Cards (payment-address, shipping-address, shipping-method, payment-method) */
#checkout-checkout .card-checkout {
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: 2rem;
}

/* Headings between sections — ΟΛΟΚΛΗΡΩΣΗ ΩΣ ΕΠΙΣΚΕΠΤΗΣ */
#checkout-checkout .quickcheckout-login-choose,
#checkout-checkout .quickcheckout-login-guest {
    border-radius: .625rem;
    margin-bottom: 2rem;
}
#checkout-checkout .quickcheckout-login-guest h2 {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.5rem;
	margin-bottom: .25rem;
}
#checkout-checkout .quickcheckout-login-guest .quickcheckout-login-help {
	font-size: 0.8125rem;
	color: #5A5A5A;
}


/* All Helmi-style ghost buttons inside checkout */
#checkout-checkout .btn,
#checkout-checkout a.btn,
#checkout-checkout button.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 12rem;
    height: 3.75rem;
    background: #ffffff;
    border: 1px solid #000;
    border-radius: .3125rem;
    color: #000;
    font-size: .75rem;
    font-weight: 400;
    padding: 0 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s ease;
    gap: .5rem;
    justify-content: space-between;
}
#checkout-checkout .btn:hover {
    background: #000;
    color: #fff;
}
#checkout-checkout #button-payment-method {
	letter-spacing: .15rem;
}

/* Inputs inside checkout (underline-only) */
#checkout-checkout .col-input {
	flex: 0 0 auto;
	width: 50%;
	padding-left: calc(.5 * var(--bs-gutter-x));
	padding-right: calc(.5 * var(--bs-gutter-x));
}
#checkout-checkout .form-group,
#checkout-checkout .col-input {
    margin-bottom: 1.5rem;
}
#checkout-checkout .form-control,
#checkout-checkout select.form-control,
#checkout-checkout input.form-control,
#checkout-checkout input[type="text"],
#checkout-checkout input[type="email"],
#checkout-checkout input[type="tel"],
#checkout-checkout input[type="password"],
#checkout-checkout input[type="date"],
#checkout-checkout select {
    width: 100%;
    border: 0 !important;
    border-bottom: 1px solid #ccc !important;
    background: transparent !important;
    padding: .25rem 0 .4375rem !important;
    font-size: .8125rem;
    color: #000;
    box-shadow: none !important;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0 !important;
    height: auto;
    min-height: 0;
    line-height: 1.5;
}
#checkout-checkout select.form-control,
#checkout-checkout select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .25rem center !important;
    background-size: 1rem !important;
    padding-right: 1.5rem !important;
    cursor: pointer;
}
#checkout-checkout .form-label,
#checkout-checkout label.control-label,
#checkout-checkout label {
    display: block;
    font-size: 12px;
    color: #000;
    font-weight: 400 !important;
    margin: 0 0 .25rem;
    padding: 0;
    letter-spacing: 0;
}

/* Order comment field (relocated under the gift-wrap box) */
#checkout-checkout #comment {
    margin-top: 50px !important;
    gap: .5rem;
}
#checkout-checkout #comment .form-label {
    font-size: 11px;
    font-weight: 700 !important;
}


#checkout-checkout .quickcheckout-content #mini_cart {
    border-radius: 10px;
}
/* Grid 2-col for guest form fields */
#checkout-checkout #payment-address .quickcheckout-content,
#checkout-checkout #shipping-address .quickcheckout-content {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    flex-direction: row;
}
/* Address line spans full width */
#checkout-checkout #payment-address [id*="address_1"],
#checkout-checkout #payment-address [name*="address_1"],
#checkout-checkout #shipping-address [id*="address_1"],
#checkout-checkout #shipping-address [name*="address_1"] {
    grid-column: span 2;
}

/* Method options as cards (shipping methods, payment methods) */
#checkout-checkout #shipping-method .quickcheckout-content,
#checkout-checkout #payment-method .quickcheckout-content {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}
#checkout-checkout #shipping-method label:has(input:checked),
#checkout-checkout #payment-method label:has(input:checked),
#checkout-checkout .radio:has(input:checked),
#checkout-checkout .form-check:has(input:checked) {
    border-color: #000;
}
#checkout-checkout #shipping-method input[type="radio"],
#checkout-checkout #payment-method input[type="radio"],
#checkout-checkout #shipping-method input[type="checkbox"],
#checkout-checkout #payment-method input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 1.5rem;
    margin: 0;
    accent-color: #000;
    flex-shrink: 0;
    cursor: pointer;
}

/* Generic checkboxes (agree, save-info, same-address, gift-wrap) */
#checkout-checkout .form-check {
	gap: 0.5rem;
	display: flex;
	align-items: center;
}
#checkout-checkout .form-check label {
	margin-bottom: 0;
}
#checkout-checkout .form-check-inline,
#checkout-checkout #terms .quickcheckout-content {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .75rem;
    color: #000;
}
#checkout-checkout .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    border: 1px solid #e1e1e1;
    border-radius: .3125rem;
    accent-color: #000;
    flex-shrink: 0;
}
#checkout-checkout .form-check-input:checked[type=checkbox],
#checkout-checkout .form-check-input:checked[type=radio] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 4'/%3E%3C/svg%3E");
	background-color: #000;
	background-size: 12px;
	background-position: 50% 50%;
}

/* Customer type */
#checkout-checkout .card-checkout .custom-fields-wrap {
	padding-left: calc(.5 * var(--bs-gutter-x));
	padding-right: calc(.5 * var(--bs-gutter-x));
}
#checkout-checkout .card-checkout #custom-field-payment {
	width: 100%;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--bs-gutter-y));
	flex-direction: row;
	--bs-gutter-x: 1.5rem;
	margin-bottom: 0;
	padding: 0;
}
#checkout-checkout .card-checkout #custom-field-payment > .col-input {
	flex: 0 0 auto;
	width: 50%;
	padding-left: calc(.5 * var(--bs-gutter-x));
	padding-right: calc(.5 * var(--bs-gutter-x));
}
#custom-field-invoice .card-content {
	display: flex !important;
	width: 100%;
	gap: 1rem;
	margin-bottom: 1rem;
}
#custom-field-invoice .card-content .form-check {
    background: none;
    border: 0;
    padding: 0;
    min-height: auto;
    margin-bottom: 0;
}
#custom-field-invoice .card-content .form-check > div {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: .25rem;
}
#custom-field-invoice .card-content .form-check > div > input {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
}
#custom-field-invoice .card-content .form-check > div > input:checked {
	background-color: #000;
}
#custom-field-invoice .card-content .form-check > div > label {
	margin: 0;
}
/* Other fields */
#checkout-checkout .col-agree,
#checkout-checkout .col-create_account,
#checkout-checkout .col-shipping_address,
#checkout-checkout .col-password,
#checkout-checkout .col-confirm,
#checkout-checkout .col-newsletter,
#checkout-checkout .col-agree,
#checkout-checkout #create_account{
	width: 100%;
}
#checkout-checkout .col-create_account,
#checkout-checkout .col-shipping_address {
	margin: 0 0 1rem 0;
}
#checkout-checkout .terms .col-password {
	margin: 0 !important;
}
#checkout-checkout .col-shipping_address .form-check,
#checkout-checkout .col-create_account .form-check {
	padding: 0;
	margin: 0 0 0 0;
	display: flex;
	gap: .5rem;
	min-height: auto;
	align-items: center;
}
#checkout-checkout .col-shipping_address .form-check label,
#checkout-checkout .col-create_account .form-check label {
	margin-bottom: 0;
}
#checkout-checkout .col-newsletter .form-check,
#checkout-checkout .col-agree .form-check {
	padding-left: 0;
	padding-right: 0;
}
#checkout-checkout .col-create_account {
	margin-top: 0.5rem;
	margin-bottom: 2rem;
} 
#checkout-checkout .col-shipping_address {
	background-color: #fff;
	padding: 1rem 1.25rem;
	border-radius: 0.375rem;
}
.quick-checkout .hide {
    display: none;
}
/* Shipping methods */
#checkout-checkout .col-shipping_method {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	margin: 0;
	width: 100%;
	gap: 1rem;
}
#checkout-checkout .col-shipping_method > .form-check,
#checkout-checkout .giftwrap_box {
	margin: 0;
	padding: 1.375rem 1rem;
	background: #fff;
	width: 100%;
	gap: 1rem;
	border-radius: 0.375rem;
	flex-wrap: wrap;
	position: relative;
}
#checkout-checkout .col-shipping_method > .form-check label {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: calc(100% - 2.5rem);
	font-size: .75rem;
	align-content: center;
	flex-direction: row;
}
#checkout-checkout .col-shipping_method > .form-check .form-check-input:checked + label:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 1px #000;
    top: 0;
    left: 0;
    border-radius: .375rem;
	pointer-events: none;
}
#checkout-checkout .col-shipping_method > .form-check label .quote__title {
	display: flex;
	gap: .375rem;
	max-width: calc(100% - 4rem);
	flex-wrap: wrap;
}
#checkout-checkout .col-shipping_method > .form-check label strong,
#checkout-checkout .col-shipping_method > .form-check label .quote__title strong {
	font-weight: 400;
}
#checkout-checkout .col-shipping_method > .form-check label .quote__title > p {
	color: #5A5A5A
}
#checkout-checkout .col-shipping_method > .form-check label .quote__title_quote {
	font-weight: 500;
}
#checkout-checkout .col-shipping_method > .form-check label .quote__title img {
	max-height: 1.5rem;
}
#checkout-checkout .col-shipping_method > .form-check .locations-container {
	width: 100%;
	position: relative;
	display: none;
}
#checkout-checkout .col-shipping_method .form-check-input:checked ~ .locations-container {
	display: block;
}
#checkout-checkout .custom-select select {
    display: none;
}
#checkout-checkout .locations-container select, 
#checkout-checkout .locations-container .select-selected {
    padding: 0.7rem;
    border: 1px solid #ccc;
    margin-left: 2.5rem;
    background-color: #fff;
    position: relative;
    width: 500px;
    max-width: 100%;
    font-size: .75rem;
    border-radius: .375rem;
}
#checkout-checkout  .select-items {
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    margin-left: 2.5rem;
    width: 500px;
    max-width: 100%;
    border-width: 0px 1px 1px 1px;
    border-color: #ccc;
    border-style: solid;
}
#checkout-checkout .select-items > div {
    padding: 0.5rem;
    font-size: .75rem;
	cursor: pointer;
}
#checkout-checkout  .select-hide {
    display: none;
}
#checkout-checkout .select-items div:hover, 
#checkout-checkout .same-as-selected {
    background-color: #ccc;
}
#checkout-checkout .locations-container .select-selected.select-arrow-active {
    border-bottom-color: transparent;
}
#checkout-checkout .select-selected:after {
    position: absolute;
    content: "\f078";
    right: 2rem;
    width: 0;
    height: 0;
    font-family: 'Font Awesome 6 Pro';
    transform: translateY(-50%);
}  
#checkout-checkout .select-selected.select-arrow-active:after {
    content: "\f077";
}
#checkout-checkout #boxnow-iframe-window {
	margin-top: 0 !important;
}
#checkout-checkout .giftwrap_box {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin: 0;
	width: 100%;
	gap: 1rem;
	align-items: center;
	margin-top: 5rem;
}
#checkout-checkout .giftwrap_box input {
	width: 1.5rem;
	height: 1.5rem;
	min-width: 1.5rem;
	margin: 0;
	accent-color: #000;
	flex-shrink: 0;
	cursor: pointer;
	
}
#checkout-checkout .giftwrap_box input:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 4'/%3E%3C/svg%3E");
	background-color: #000;
	background-size: 12px;
	background-position: 50% 50%;
}
#checkout-checkout .giftwrap_box label {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: calc(100% - 2.5rem);
	font-size: .75rem;
	align-content: center;
	flex-direction: row;
	margin-bottom: 0;
	font-weight: 400;
}
#checkout-checkout .giftwrap_box label span:last-child {
	font-weight: 500;
}

/* Sidebar */
#checkout-checkout .checkout-sidebar h3,
#checkout-checkout .checkout-sidebar .clicked-title {
    font-size: .75rem;
    font-weight: 400;
    color: #000;
    margin: 0 0 .75rem;
}
#checkout-checkout .quickcheckoutleft {
    border-radius: .625rem;
    padding: 0;
    margin-bottom: 1rem;
}
#checkout-checkout .quickcheckoutmid.totals-terms {
    background: #fff;
    border-radius: .625rem;
    padding: 1rem 1rem;
    margin-top: .5rem;
    border: solid 1px #E1E1E1;
}

/* Cart products list (sidebar) */
#checkout-checkout #cart1.products-only {
    margin-bottom: 0.5rem;
}
#checkout-checkout #cart1.products-only .card-header {
	background: no-repeat;
	border: 0;
	display: flex;
	justify-content: space-between;
	padding: 1rem 1rem;
	font-size: .75rem;
	line-height: 1rem;
	align-items: center;
}
#checkout-checkout #cart1.products-only .card-header .products-only {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.125rem;
	font-weight: 500;
}
#checkout-checkout #cart1.products-only .card-header .edit-cart {
	margin-right: 1rem;
	margin-left: auto;
	display: block;
	font-size: .625rem;
	color: #5A5A5A;
}
#checkout-checkout #cart1.products-only .card-header #cart-slide-toggle {
	font-size: 0.75rem;
	line-height: 0.75rem;
	height: 0.75rem;
	color: #111;
	display: inline-block;
}
#checkout-checkout #cart1.products-only .card-header #cart-slide-toggle i {
	font-size: 0.75rem;
	line-height: 1;
	display: inline;
}
#checkout-checkout #cart1.products-only .h-collapsed .card-header #cart-slide-toggle i:before {
	content: "\f078";
}
#checkout-checkout #cart1.products-only .card-header .totals-only,
#checkout-checkout #cart1.products-only .card-footer {
	display: none;
}
#checkout-checkout #cart1.products-only .card-body {
	padding: 1rem 1rem;
}

#checkout-checkout #cart1 table,
#checkout-checkout #cart1 .quickcheckout-cart {
    width: 100%;
    border: 0 !important;
}
#checkout-checkout #cart1 .quickcheckout-cart thead {
    display: none;
}
#checkout-checkout #cart1 .quickcheckout-cart tbody td {
    border: 0 !important;
    padding: .5rem .25rem;
    font-size: .75rem;
    vertical-align: middle;
}
#checkout-checkout #cart1 .quickcheckout-cart td.image img {
    border: 0 !important;
    border-radius: .25rem;
    width: 4rem;
    height: 6rem;
    object-fit: cover;
}
#checkout-checkout #cart1 .quickcheckout-cart td.name {
    font-size: .75rem;
    font-weight: 400;
    color: #000;
    line-height: 1.4;
}
#checkout-checkout #cart1 .quickcheckout-cart td.total,
#checkout-checkout #cart1 .quickcheckout-cart td.price1 {
    font-size: .75rem;
    color: #000;
    text-align: right;
}

/* Mini Cart */
#mini_cart .card-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
#mini_cart .cart_item {
    display: flex;
    gap: 1rem;
    align-items: start;
}
#mini_cart .cart_item:last-child {
    border-bottom: 0;
}
#mini_cart .cart_item > div {
    display: flex;
    gap: 24px;
    align-items: start;
}
#mini_cart .cart_item .col-image {
    width: 25%;
}
/* Missing thumbnail (e.g. a voucher whose theme has no image): still reserve the
   image slot as a 2:3 placeholder box so the info column aligns like a product row. */
#mini_cart .cart_item .col-image-empty {
    aspect-ratio: 2 / 3;
    background: #f6f6f8;
}
#mini_cart .cart_item .col-image a,
#mini_cart .cart_item .col-image {
    display: block;
}
#mini_cart .cart_item img,
#mini_cart .cart_item video {
    width: 100%;
    height: auto;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
}
#mini_cart .cart_item .col-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    width: 75%;
    padding: 0.5rem 0;
}
#mini_cart .cart_item-info {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
#mini_cart .cart_item-info h4 {
    font-size: 0.6875rem;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0;
    width: 70%;
}
#mini_cart .cart_item-info .quantity {
	font-size: 0.75rem;
	line-height: 1rem;
}
#mini_cart .cart_item-rest {
	display: flex;
	width: 100%;
	font-size: .625rem;
	justify-content: space-between;
	align-items: center;
}
#mini_cart .cart_item-options span {
    background: #F6F6F8;
    min-width: 3.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1rem;
    padding: 0.375rem 0;
    font-size: 0.6875rem;
    border-radius: .25rem;
}
#mini_cart .color {
	margin-right: auto;
	margin-left: .5rem;
	display: inline-flex;
	align-items: center;
	gap: .375rem;
}
#mini_cart .color > span {
	display: inline-block;
	width: .875rem;
	height: .875rem;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .1);
	flex: 0 0 auto;
}
#mini_cart .cart_item-total {
	font-size: 0.75rem;
}

/* Checkout Modules */
#checkout-checkout #voucher {
	
}
#checkout-checkout #voucher .quickcheckout-content {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}
#checkout-checkout #voucher .card {
    background: #fff;
    border-radius: .625rem;
    overflow: hidden;
    border: solid 1px #E1E1E1;
}
#checkout-checkout #voucher .card .card-header {
    background: #fff;
    border: 0;
    padding: 0;
}
#checkout-checkout #voucher .card .card-title {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}
#checkout-checkout #voucher .card .card-title a {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1rem;
    width: 100%;
    align-items: center;
}
#checkout-checkout #voucher .card .card-title .accordion-toggle:not(.collapsed) i:before {
    content: "\f077";
}
#checkout-checkout #voucher .card .card-body {
    padding: 1rem 1rem;
}
#checkout-checkout #voucher input[type="text"] {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ccc;
    background: transparent;
    padding: .5rem 0;
    font-size: .8125rem;
    color: #000;
    outline: none;
    margin: 0 0 1rem 0;
    width: 100%;
    border-radius: 0;
}
#checkout-checkout #voucher .input-group-btn {
    width: 100%;
}
#checkout-checkout #voucher .input-group-btn .btn {
    background: #fff;
    width: 100%;
    border-color: #000;
    color: #000;
    font-size: .75rem;
    padding: .75rem 1rem;
}
#checkout-checkout #voucher .input-group-btn .btn:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* Totals breakdown */
#checkout-checkout .quickcheckoutmid #cart1 .products-only,
#checkout-checkout .quickcheckoutmid #cart1 .edit-cart,
#checkout-checkout .quickcheckoutmid #cart1 #cart-slide-toggle,
#checkout-checkout .quickcheckoutmid #cart1 .card-body {
    display: none;
}
#checkout-checkout .quickcheckoutmid #cart1 .card {
	border: 0;
	border-radius: unset;
}
#checkout-checkout .quickcheckoutmid #cart1 .card-header {
	background: none;
	padding: 0;
	border: 0;
	border-radius: unset;
}
#checkout-checkout .quickcheckoutmid #cart1 .card-header .totals-only {
	margin: 0;
    font-size: 0.75rem;
    line-height: 1.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}
#checkout-checkout .quickcheckoutmid #cart1 .card-footer {
	border: 0;
	border-radius: unset;
	background: none;
	padding: 0;
}

#checkout-checkout .cart_total {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin: 0 !important;
    padding: .375rem 0;
    --bs-gutter-x: 0;
    line-height: 1rem;
}
#checkout-checkout .cart_total-title,
#checkout-checkout .cart_total-text {
    font-size: 12px;
    color: #666;
    padding: 0 !important;
    width: auto !important;
    flex: none !important;
    margin: 0;
}
#checkout-checkout .cart_total.sum_total {
    padding-top: .75rem;
    margin-top: .375rem !important;
}
#checkout-checkout .cart_total.sum_total .cart_total-title {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #000;
}
#checkout-checkout .cart_total.sum_total .cart_total-text {
    font-size: 1rem;
    font-weight: 500;
    color: #000;
}
#checkout-checkout .quickcheckoutmid #terms .form-check {
	border: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	min-height: unset;
	margin-bottom: 0;
	gap: 0.75rem;
}

#checkout-checkout #cart1.totals-only table {
    width: 100%;
}
#checkout-checkout #cart1.totals-only td {
    padding: .375rem 0;
    font-size: .75rem;
    color: #000;
    border: 0 !important;
}
#checkout-checkout #cart1.totals-only tr:last-child td {
    padding-top: .75rem;
    font-size: 1rem;
    font-weight: 500;
    border-top: 1px solid #e1e1e1 !important;
}
#checkout-checkout #cart1.totals-only td:last-child {
    text-align: right;
}

/* Voucher / coupon / reward collapsible sections (sidebar) */
#checkout-checkout #voucher-heading,
#checkout-checkout #coupon-heading,
#checkout-checkout #reward-heading {
    background: transparent !important;
    padding: 1.125rem 1.5rem !important;
    margin: 0 !important;
    font-size: .75rem !important;
    text-transform: uppercase;
    color: #000;
    font-weight: 400 !important;
    letter-spacing: .05rem;
    cursor: pointer;
    border: 0;
    position: relative;
}
#checkout-checkout #voucher-heading::after,
#checkout-checkout #coupon-heading::after,
#checkout-checkout #reward-heading::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .625rem;
}

/* Final submit (terms section in sidebar) */
#checkout-checkout #terms {
    margin-top: 1.5rem;
}
#checkout-checkout #terms .quickcheckout-content {
    text-align: left !important;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
}
#checkout-checkout #button-confirm-order,
#checkout-checkout #button-confirm,
#checkout-checkout button[id*="confirm-order"],
#checkout-checkout input[type="submit"][value*="ΟΛΟΚΛΗΡΩΣΗ"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.75rem;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: .3125rem;
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .15rem;
    cursor: pointer;
    transition: background-color .15s ease;
}
#checkout-checkout #button-confirm-order:hover,
#checkout-checkout button[id*="confirm-order"]:hover {
    background: #333;
}

/* Hide loading spinner overlay default ugly styling */
#checkout-checkout .fa-spinner {
    color: #000;
}

/* Top section heading "ΟΛΟΚΛΗΡΩΣΗ ΩΣ ΕΠΙΣΚΕΠΤΗΣ" */
#checkout-checkout .checkout-login {
    margin-bottom: 2rem;
}
#checkout-checkout .checkout-main > h1,
#checkout-checkout .checkout-main > .heading-title {
    font-size: 1.125rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 .5rem;
}

/* Checkout intro */
#checkout-checkout .quickcheckout-intro {
	display: flex;
	width: 100%;
	justify-content: space-between;
	background: #fff;
	padding: 1.5rem 1.75rem;
	border: 1px solid #E1E1E1;
	border-radius: 0.625rem;
	position: relative;
}
#checkout-checkout .quickcheckout-intro .quickcheckout-intro-left {
	width: 46%;
}
#checkout-checkout .quickcheckout-intro .quickcheckout-intro-left h2 {
	font-size: .875rem;
	text-align: center;
	margin: 0 0 .5rem 0;
}
#checkout-checkout .quickcheckout-intro .quickcheckout-intro-left .quickcheckout-login-help {
    font-size: .75rem;
    color: #5A5A5A;
    margin-bottom: .75rem;
    text-align: center;
}
#checkout-checkout .quickcheckout-intro .quickcheckout-intro-left .btn {
	width: 100%;
	height: 2.5rem;
	border: 1px solid #E1E1E1;
}
#checkout-checkout .quickcheckout-intro .quickcheckout-intro-left .btn > i {
	font-size: .625rem;
	position: relative;
	left: -0.5rem;
}
#checkout-checkout .quickcheckout-intro .quickcheckout-intro-left .btn:hover > i {
	left: 0rem;
}
#checkout-checkout .quickcheckout-intro .quickcheckout-intro-left .btn + .btn {
	margin-top: .5rem
}
#checkout-checkout .quickcheckout-intro .separator.desktop {
	width: 1rem;
	height: 100%;
	top: 0;
	right: 50%;
	position: absolute;
	transform: translateX(.5rem);
}
#checkout-checkout .quickcheckout-intro .separator.desktop .line {
	height: calc(50% - 1.5rem);
	background: #E1E1E1;
	width: 1px;
}
#checkout-checkout .quickcheckout-intro .separator.desktop span {
	height: 3rem;
	width: 2rem;
	line-height: 3rem;
	display: block;
	margin-left: -1rem;
	text-align: center;
	background: #fff;
}

#checkout-checkout .quickcheckout-intro .quickcheckout-intro-right {
	width: 46%;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
#checkout-checkout .quickcheckout-intro #simpler-checkoutpos simpler-checkout {
    max-height: 6rem;
    overflow: hidden;
}

/* Simpler / payment-top widget — leave native */
#simpler-checkoutpos {
    margin-bottom: 0;
    width: 100%;
}

/* Logged-in / B2B express-checkout target sits above the form — white card with spacing below */
#checkout-checkout #quickcheckoutconfirm > #simpler-checkoutpos {
    margin-bottom: 2rem;
}

/* Order comments textarea */
#checkout-checkout textarea.form-control,
#checkout-checkout textarea {
    border: 0 !important;
    border-bottom: 1px solid #ccc !important;
    background: transparent !important;
    padding: .25rem 0 !important;
    font-size: .8125rem;
    color: #000;
    min-height: 3rem;
    resize: vertical;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
    width: 100%;
}

/* Hide unwanted noise */
#checkout-checkout #payment-method.alt-id {
    display: none;
}
/* CHECKOUT - END */

/* CATEGORY - START */
/* Breadcrumbs */
/* ==========================================================================
   GLOBAL BREADCRUMB — single source of truth for every page.
   Edit here to restyle breadcrumbs site-wide; no need to target pages
   individually. Horizontal padding is fluid (clamp): ~3.25rem on desktop down
   to 1rem on mobile, which replaces the old per-page responsive overrides.
   A page only needs its own breadcrumb rule if it genuinely must deviate.
   ========================================================================== */
nav[aria-label="breadcrumb"] {
    padding: 1.25rem clamp(1rem, 4vw, 3.25rem) 0;
    margin: 0;
}
.breadcrumb {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: .5625rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    color: #5a5a5a;
    background: transparent;
    line-height: 1.6;
}
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
}
.breadcrumb-item a {
    color: #5a5a5a;
    text-decoration: none;
}
.breadcrumb-item a:hover {
    text-decoration: underline;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding: 0 .5rem;
    color: #5a5a5a;
    font-size: .5rem;
}
@media (max-width: 675.98px) {
    .breadcrumb-item {
        font-size: 8px;
    }
}

/* Top row (category title) */
body.product_category .top-row {
    padding: 0 3.25rem 1.5rem;
}
body.product_category .top-row .container-xxl {
    max-width: 100%;
    padding: 0;
}
body.product_category .top-row-wrapper,
body.product_category .main-content-container,
body.product_category .top-row .row {
    margin: 0;
    padding: 0;
    --bs-gutter-x: 0;
}
body.product_category .main-content-title {
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
    margin: .75rem 0 .25rem;
    letter-spacing: 0;
}
body.product_category .main-content-small-text {
    font-size: .8125rem;
    color: #5a5a5a;
    line-height: 1.5;
    max-width: 50rem;
}

/* Main grid container */
body.product_category #product-category.container-xxl {
    max-width: 100%;
    padding: 0;
}
body.product_category #product-category > .row {
    margin: 0;
    --bs-gutter-x: 0;
}
body.product_category #product-category #content {
    padding: 0;
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
body.product_category #product-category .content-bottom {
    margin-top: 3rem;
}

/* Filter button — Figma shows it on desktop too.
   Markup has TWO instances: one from column_left (inside <main class="site-main">)
   and one in .mobile-filters-trigger. Hide the first, keep the second styled. */
body.product_category main.site-main > a.ho-filter-title.ho-filter-trigger-container,
body.product_category .site-main > .ho-filter-title.ho-filter-trigger-container {
    display: none;
}
body.product_category .mobile-filters-trigger {
    display: block;
    padding: 0 3.25rem;
    margin: .75rem 0 0;
}
body.product_category .mobile-filters-trigger .ho-filter-title.ho-filter-trigger-container {
    display: inline-flex;
    align-items: center;
    height: 2.5rem;
    background: transparent;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}
body.product_category .mobile-filters-trigger .ho-filter-trigger-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .6875rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04rem;
    line-height: 1;
}
body.product_category .mobile-filters-trigger .ho-filter-trigger-button > i.fa-sliders {
    font-size: 1rem;
    color: #000;
}
/* Hide the chevron-right (not in Figma design) */
body.product_category .mobile-filters-trigger .ho-filter-trigger-button > i.fa-chevron-right {
    display: none;
}

/* Top pagination row (sort + limit + grid icons + pagination-top) — pushed right, overlaps filter row */
body.product_category .top-pagination,
body.product_category .top-pagination.row {
    padding: 0 3.25rem;
    --bs-gutter-x: 0;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    position: relative;
    z-index: 1;
    width: 100%;
}
body.product_category .top-pagination > div {
    display: flex;
    align-items: center;
    gap: 2.125rem;
    flex-wrap: wrap;
    width: auto !important;
    max-width: none;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
}
body.product_category .top-pagination #pagination-top {
    flex: 0 0 auto;
    margin-left: 0;
}
body.product_category .top-pagination .dropdown {
    position: relative;
}
body.product_category .top-pagination .btn-sorting,
body.product_category .top-pagination .btn-limiting {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: .6875rem;
    color: #000;
    cursor: pointer;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    line-height: 1;
}
body.product_category .top-pagination .btn-sorting span::after,
body.product_category .top-pagination .btn-limiting span::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: .5rem;
    margin-left: .375rem;
    color: #000;
    border: 0;
    transform: none;
    transition: transform .15s ease;
}
body.product_category .top-pagination .btn-sorting.dropdown-toggle::after,
body.product_category .top-pagination .btn-limiting.dropdown-toggle::after {
    display: none;
}
body.product_category .top-pagination .dropdown.show .btn-sorting::after,
body.product_category .top-pagination .dropdown.show .btn-limiting::after {
    transform: rotate(180deg);
}
body.product_category .top-pagination .btn-sorting span,
body.product_category .top-pagination .btn-limiting span {
    color: #5a5a5a;
    font-weight: 400;
    margin-left: .25rem;
}
body.product_category .top-pagination .dropdown-menu {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: .3125rem;
    padding: .5rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    min-width: 11rem;
}
body.product_category .top-pagination .dropdown-item {
    padding: .5rem 1rem;
    font-size: .75rem;
    color: #000;
    text-decoration: none;
    display: block;
}
body.product_category .top-pagination .dropdown-item:hover {
    background: #f6f6f8;
}
body.product_category .top-pagination .dropdown-item.active {
    background: #000;
    color: #fff;
}
body.product_category #button-wrapper {
    display: flex;
    gap: .5rem;
    align-items: center;
}
body.product_category #button-grid2,
body.product_category #button-grid4 {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    line-height: 0;
    box-shadow: none !important;
    opacity: .35;
    transition: opacity .15s ease;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.product_category #button-grid4.active,
body.product_category #button-grid4 {
    opacity: 1;
}
body.product_category #button-grid2:hover,
body.product_category #button-grid4:hover {
    opacity: 1;
}
body.product_category #button-grid2 svg,
body.product_category #button-grid4 svg {
    fill: #000;
    height: 1rem;
    width: auto;
    display: block;
}

/* Products grid */
body.product_category #product-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 0 1px;
}
/* Below 1024px the default/dense layout is 3-up (desktop stays 4-up). The JS
   forces the grid4 state on load, so .tw-grid-cols-4 is the effective default —
   both it and the bare container map to 3 columns here. The grid2 toggle
   (.tw-grid-cols-2 -> repeat(2) in custom.css) keeps higher specificity, so the
   3 <-> 2 density toggle still works below 1024px. */
@media (max-width: 1023.98px) {
    body.product_category #product-container,
    body.product_category #product-container.tw-grid-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    body.product_category .top-row {
        padding: 10px 20px;
    }
    body.product_category .top-pagination, body.product_category .top-pagination.row {
        padding: 0 20px;
        margin-bottom: 10px !important;
        z-index: 6;
    }
}
/* Below 576px the layout is locked to 2 columns and the density toggle is hidden
   (no per-state choice on small phones). Overrides every toggle state. */
@media (max-width: 575.98px) {
    body.product_category #product-container,
    body.product_category #product-container.tw-grid-cols-2,
    body.product_category #product-container.tw-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    body.product_category #button-wrapper {
        display: none !important;
    }
        body.product_category .top-pagination .btn-sorting, body.product_category .top-pagination .btn-limiting {
        flex-direction: column;
        font-size: 7px;
    }
}

body.product_category .product-layout {
    width: 100%;
    max-width: 100%;
}
body.product_category .product-block {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Image */
body.product_category .product-block-image {
    position: relative;
    overflow: hidden;
}
body.product_category .product-thumbnail {
    aspect-ratio: 478 / 716;
    overflow: hidden;
    background: #f6f6f8;
}
body.product_category .product-thumbnail img,
body.product_category .product-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sizes overlay at bottom of image (visible on hover).
   Uses padding (not left/right offsets) for the inset so that w-100 (width:100%
   from the template) stays within the containing block instead of overflowing. */
body.product-block .sizes-addcart-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .9375rem;
    padding: 0 1rem;
    z-index: 2;
    opacity: 0;
    transition: opacity .2s ease;
    box-sizing: border-box;
}
body.product_category .product-block:hover .sizes-addcart-container {
    opacity: 1;
}
body.product_category .sizes-available {
    width: 100%;
}
body.product_category .sizes-available-inner {
    display: flex;
    gap: .1875rem;
    flex-wrap: wrap;
}
/* while adding to cart from a card size, show the load-more spinner in place of the sizes */
.sizes-available-inner.loading {
    justify-content: center;
    align-items: center;
    min-height: 1.875rem;
}
body.product_category .size-box, body.product_product .size-box {
    background: #fff;
    border-radius: .3125rem;
    height: 1.875rem;
    min-width: 2.3125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    color: #000;
    cursor: pointer;
}
body.product_category .size-box span {
    padding: 0 .625rem;
    color: inherit;
    display: inline-block;
}
body.product_category .size-box:not(.active) {
    opacity: .5;
}
body.product_category .size-box:not(.active) span {
    color: #5a5a5a;
    text-decoration: line-through;
    cursor: default;
}
body.product_category .size-box.active:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Product caption (title, heart, price) */
body.product_category .product-block-caption {
    padding: .75rem 1rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    flex: 1;
}
body.product_category .product-block-caption > div:first-child {
    min-width: 0;
}
body.product_category .product-string,
body.product_category .product-label-string {
    font-size: .625rem;
    color: #5a5a5a;
    text-transform: uppercase;
    letter-spacing: .08rem;
    margin-bottom: .25rem;
}
body.product_category .product-block-title {
    margin: 0 0 .375rem;
}
body.product_category .product-name {
    font-size: .8125rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.3;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0;
}
body.product_category .product-name a {
    color: #000;
    text-decoration: none;
}
.product-block .product-block-price {
    margin-top: 4px;
}
body.product_category .product-block-price .amount {
    font-size: .8125rem;
    font-weight: 500;
    margin: 0;
    color: #000;
    display: inline-block;
}
body.product_category .product-block-price-retail {
    margin-bottom: .25rem;
}
body.product_category .product-block-price-retail .retail-amount {
    color: #5a5a5a;
    font-size: .75rem;
    font-weight: 500;
}
body.product_category .product__priceref {
    font-size: .625rem;
    color: #5a5a5a;
    text-transform: uppercase;
    margin-right: .25rem;
}
body.product_category .price-discount {
    display: flex;
    align-items: center;
    gap: .5rem;
}
body.product_category .price-discount .amount_final {
    color: white;
    font-size: .8125rem;
    margin: 0;
}
body.product_category .price-discount .amount_before {
    color: #5a5a5a;
    font-size: .75rem;
    text-decoration: line-through;
}

/* Wishlist heart */
body.product_category .product-wishlist {
    background: transparent !important;
    border: 0 !important;
    padding: .375rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5A5A5A;
    cursor: pointer;
    box-shadow: none !important;
    min-width: 0;
}
body.product_category .product-block .product-wishlist-remove {
    display: none;
}
body.product_category .product-block.wished .product-wishlist-add {
    display: none;
}
body.product_category .product-block.wished .product-wishlist-remove {
    display: inline-flex;
}
body.product_category .product-block.wished .product-wishlist i {
    color: #D22B2B;
    font-weight: 900;
}

/* GLOBAL (every page with a .product-block): below 1024px overlay the wishlist
   heart on the top-right of the product image. Always visible — overrides the
   desktop hover-reveal (custom.css .product-layout:hover ... { opacity:1 }). Bare
   icon, no backing disc. Anchored directly on .product-wishlist so it works for
   both markup variants — caption-wrapped (product_main) and direct child of
   .product-block (product_short / product_tag). The add/remove display toggle is
   left untouched; only one of the two anchors is ever shown. */
@media (max-width: 1023.98px) {
    .product-block {
        position: relative;
    }
    .product-block .product-wishlist {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 3;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        background: transparent !important;
        border: 0 !important;
        padding: .375rem !important;
    }
}

/* Tags (SOLD OUT, ZOE BLACK COLLECTION, COMING SOON, BLACK FRIDAY) */
/* body.product_category .product-label-flags {
    position: absolute;
    top: .3125rem;
    left: .3125rem;
    z-index: 3;
}
body.product_category .product-flag {
    display: inline-block;
    padding: .375rem .625rem;
    font-size: .6875rem;
    background: #000;
    color: #fff;
    border-radius: .25rem;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04rem;
}
body.product_category .product-label-flags.coming-soon .product-flag {
    background: #5a5a5a;
}
body.product_category .product-label-flags.black-friday .product-flag {
    background: #000;
} */


/* Loader spinner inside product block — applies on ALL pages (category, product, home).
   Hidden by default, shown while colour-swap AJAX runs (.product-layout gets .loading) */
.product-block .loader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    color: #e5e7eb; /* gray ring — path fill="currentColor" uses this */
    z-index: 4;
}
.product-block .loader svg {
    animation: productBlockSpin 1s linear infinite;
    fill: #000;
}
@keyframes productBlockSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.product-layout.loading .product-block .product-top .loader {
    display: block;
}
/* Dim the card content while loading */
.product-layout.loading .product-block .product-top .product-block-image,
.product-layout.loading .sizes-addcart-container,
.product-layout.loading .product-colors,
.product-layout.loading .product-block .product-block-caption {
    opacity: 0.3;
}

/* Pagination block */
body.product_category .pagination-block {
    padding: 2rem 3.25rem 3rem;
}
body.product_category .pagination-more {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
body.product_category #pagination-more {
    width: 17.25rem;
    height: 3.125rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .3125rem;
    color: #000;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
body.product_category #pagination-more:hover {
    background: #000;
    color: #fff;
}
body.product_category #pagination-more[disabled] {
    opacity: .3;
    pointer-events: none;
}
body.product_category .pagination-wrap {
    margin: 0 !important;
    --bs-gutter-x: 0;
}
body.product_category .pagination-num {
    width: 100%;
}
/* Load-more ("view more") button spinner — ajaxProductsMore() injects
   <div class="button-loader"> into #pagination-more while the next page loads.
   Ported from ho_blank; global so it works on category, search and wishlist. */
.button-loader {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(125, 125, 125, 0.3);
    border-top-color: #666;
    border-radius: 50%;
    animation: spinload 0.8s linear infinite;
    vertical-align: middle;
}
@keyframes spinload {
    to { transform: rotate(360deg); }
}
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: .3125rem;
    justify-content: center;
    flex-wrap: wrap;
}
.pagination li {
    list-style: none;
}
.pagination li a,
.pagination li span,
.pagination li > .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    border: 1px solid transparent;
    border-radius: .3125rem;
    color: #000;
    text-decoration: none;
    font-size: .8125rem;
    padding: 0;
}
.pagination li.active a,
.pagination li.active span,
.pagination li.active .page-link {
    background-color: white;
    pointer-events: none;
}
.pagination li.disabled a,
.pagination li.disabled span,
.pagination li.disabled .page-link {
    border: 0;
    background: transparent;
    color: #5a5a5a;
    pointer-events: none;
}
.pagination li a:hover,
.pagination li span:hover,
.pagination li > .page-link:hover {
    border: 1px solid #E1E1E1;
}
/* CATEGORY - END */

/* SHOP THE LOOK (tagger module) - START */
.tagger-wrapper {
    padding: 3.5rem 3rem 2.5rem;
    margin: 0;
    position: relative;
    max-width: 86rem;
    margin: auto;
}

/* Heading row "SHOP THE LOOK" + swiper navigation/bullets right */
.tagger-wrapper .single-tab-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.75rem;
    padding: 0;
    position: relative;
}
.tagger-wrapper .single-tab-title span {
    font-size: 1.0625rem;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04rem;
}

/* Carousel container */
.tagger-wrapper .product-tag_container {
    position: relative;
}
.tagger-wrapper .product-tag_block-wrapper {
    position: relative;
}
.tagger-wrapper #product-tagger-swiper {
    overflow: hidden;
}
.tagger-wrapper .swiper-wrapper {
    align-items: stretch;
}
.tagger-wrapper .swiper-slide {
    height: auto;
    display: flex;
    flex-direction: row;
}

/* Big look image with shoppable points */
.tagger-wrapper .product-tag-tags {
    width: 50%;
}
.tagger-wrapper .product-tag_imgparent {
    position: relative;
    width: 100%;
    height: 100%;
}
.tagger-wrapper .product-tagger-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.tagger-wrapper .product-tagger-image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 605 / 907;
}

/* Shoppable points (white circles positioned absolute via inline style) */
.tagger-wrapper .product_tag__Points {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.tagger-wrapper .product-tag_point {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    cursor: pointer;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
    display: none;
}
.tagger-wrapper .product-tag_point::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    background: #fff;
    width: 6px;
    height: 6px;
}
.tagger-wrapper .product-tag_point::after {
    content: "";
    position: absolute;
    inset: -.375rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .8);
    animation: pointPulse 1.8s ease-out infinite;
}
.tagger-wrapper .product-tag_point:hover {
    transform: translate(-50%, -50%) scale(1.15);
}
@keyframes pointPulse {
    0% { transform: scale(.6); opacity: .8; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* "Δείτε το look" / Check look button (overlay on image) */
.tagger-wrapper .product-tagger-image-wrapper .btn.check-look {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-width: 14rem;
    height: 3.125rem;
    padding: 0 1.25rem;
    background: #fff;
    border: 1px solid #000;
    border-radius: .3125rem;
    color: #000;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .15rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.tagger-wrapper .product-tagger-image-wrapper .btn.check-look:hover {
    background: #000;
    color: #fff;
}
.tagger-wrapper .product-tagger-image-wrapper .btn.check-look i {
    font-size: .625rem;
}
.tagger-wrapper .product-tagger-image-wrapper .btn.check-look.d-none {
    display: none !important;
}

/* Products panel (revealed slide) */
.tagger-wrapper .product-tag-products {
    width: 50%;
}
.tagger-wrapper .product-tag_prodparent {
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}
.tagger-wrapper .products-tagger-outter .btn.close-look {
    display: none;
}
.tagger-wrapper .products-tagger-outter {
    flex: 1;
    position: relative;
}
.tagger-wrapper .products-tagger-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Close-look X button */
.tagger-wrapper .btn.close-look {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: #000;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color .15s ease;
}
.tagger-wrapper .btn.close-look:hover {
    background: #f6f6f8;
}

/* Each shoppable product card (product_shop_look.twig) */
.tagger-wrapper .product-tag_product {
    width: 100%;
}
.tagger-wrapper .product-tag_product .product-layout {
    width: 100%;
    padding: 0;
}
.tagger-wrapper .product-tag_product .product-block {
    display: grid;
    grid-template-columns: 7.625rem 1fr;
    gap: 1rem;
    align-items: stretch;
    background: transparent;
    padding: 0;
    border: 0;
}
.tagger-wrapper .product-tag_product .product-top {
    grid-column: 1;
}
.tagger-wrapper .product-tag_product .product-block-image {
    width: 100%;
    aspect-ratio: 122 / 183;
    overflow: hidden;
    background: #f6f6f8;
}
.tagger-wrapper .product-tag_product .product-block-image img,
.tagger-wrapper .product-tag_product .product-block-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    font-size: 14px;
}
.tagger-wrapper .product-tag_product .product-block-caption {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 0;
    min-width: 0;
}
.tagger-wrapper .product-tag_product .product-block-title {
    margin: 0;
}
.tagger-wrapper .product-tag_product .product-name {
    font-size: .75rem;
    font-weight: 400;
    margin: 0;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.3;
}
.tagger-wrapper .product-tag_product .product-name a {
    color: #000;
    text-decoration: none;
}
.tagger-wrapper .product-tag_product .product-block-price {
    margin: 0;
}
.tagger-wrapper .product-tag_product .product-block-price .amount {
    font-size: .875rem;
    font-weight: 500;
    margin: 0;
    color: #000;
    display: inline-block;
}
.tagger-wrapper .product-tag_product .product-block-price .amount_before {
    color: #5a5a5a;
    font-size: .75rem;
    text-decoration: line-through;
    margin-left: .375rem;
}

/* Sizes select inside shop-look item — restyled as inline pills via native select */
.tagger-wrapper .tags-sizes-available {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 20px 0;
}
.tagger-wrapper .tags-sizes-available > span {
    font-size: .625rem;
    color: #5a5a5a;
    text-transform: uppercase;
    letter-spacing: .08rem;
    display: none;
}
.tagger-wrapper .tags-sizes-available select {
    width: 100%;
    height: 1.875rem;
    background: #fff !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: .1875rem !important;
    padding: 0 .625rem !important;
    font-size: .75rem;
    color: #000;
    box-shadow: none !important;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .25rem center !important;
    background-size: .875rem !important;
    cursor: pointer;
}

/* Small ΑΓΟΡΑ button (per product) */
.tagger-wrapper .product-tag_product .product-block-actions {
    margin: 0;
}
.tagger-wrapper .product-tag_product .product-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 7.75rem;
    height: 2.5rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .1875rem;
    color: #000;
    text-decoration: none;
    padding: 0 .75rem 0 2.4rem;
    cursor: pointer;
    transition: 0.3s ease all;
}
.tagger-wrapper .product-tag_product .product-cart:hover {
    background: #000;
}
.tagger-wrapper .product-tag_product .product-cart:hover span {
    opacity: 0;
}
.tagger-wrapper .product-tag_product .product-cart:hover i {
    transform: translate(-50%, -50%);
    color: white;
}
.tagger-wrapper .product-tag_product .product-cart > div {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .25rem;
    text-transform: uppercase;
    color: inherit;
    transition: 0.3s ease all;
}
.tagger-wrapper .product-tag_product .product-cart i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-200%, -50%);
    font-size: 1rem;
    color: inherit;
    transition: 0.3s ease all;
}

/* B2B order button in product cards ("ΠΑΡΑΓΓΕΛΙΑ") — match the non-B2B card
   .product-cart pill (white, black border, bag icon, uppercase, black hover).
   Without this it falls back to the tiny transparent default .btn.btn-default.
   Scoped to .product-block so the product-detail .product-page-b2b button is untouched. */
.product-block .product-block-actions-b2b {
    margin: 0 1rem;
    margin-bottom: 0.5rem;
}
.product-block .product-block-actions-b2b .product-cart-b2b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    padding: 0 1rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .1875rem;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s ease all;
    width: 100%;
}
.product-block .product-block-actions-b2b .product-cart-b2b > div {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .25rem;
    text-transform: uppercase;
    color: inherit;
}
.product-block .product-block-actions-b2b .product-cart-b2b i {
    font-size: 1rem;
    color: inherit;
}
.product-block .product-block-actions-b2b .product-cart-b2b:hover {
    background: #000;
    color: #fff;
}
/* B2B product cards: no color swatches and no size selector — ordering is done
   through the ΠΑΡΑΓΓΕΛΙΑ modal, so these are not needed on the card. */
.product-block:has(.product-block-actions-b2b) .product-colors,
.product-block:has(.product-block-actions-b2b) .sizes-addcart-container {
    display: none !important;
}
/* B2B product cards: stack the price label above the amount (column), matching the
   home page. Overrides the category page's inline-block (row) layout — b2b cards only. */
.product-block:has(.product-block-actions-b2b) .product-block-price .amount {
    display: block;
    color: black;
    font-weight: 500;
}

/* "Αγόρασε όλο το look" full-width button (with price) */
.tagger-wrapper .product-tag-read-more-container {
    margin-top: 1.25rem;
}
.tagger-wrapper .product-tag-read-more {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.75rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .3125rem;
    color: #000;
    text-decoration: none;
    padding: 0 1.5rem;
    font-size: .875rem;
    cursor: pointer;
    gap: .75rem;
    transition: background-color .15s ease, color .15s ease;
}
.tagger-wrapper .product-tag-read-more:hover {
    background: #000;
    color: #fff;
}
.tagger-wrapper .product-tag-read-more > i {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.125rem;
}
.tagger-wrapper .product-tag-read-more > span {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    font-size: .875rem;
}

/* Swiper navigation arrows — anchored to heading row */
.tagger-wrapper .swiper-navigation-wrapper {
    position: absolute;
    top: -3.25rem;
    right: 0;
    padding: 0 2rem;
    z-index: 2;
    height: 1.5rem;
    display: flex;
    align-items: center;
}
.tagger-wrapper .tagger-arrows {
    width: 100%;
    display: flex;
    align-items: center;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    justify-content: space-between;
}
.tagger-wrapper .swiper-button-prev.tags-button-prev,
.tagger-wrapper .swiper-button-next.tags-button-next {
    position: static;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    pointer-events: auto;
    color: #000;
    background: transparent;
    cursor: pointer;
}
.tagger-wrapper .swiper-button-prev.tags-button-prev::after,
.tagger-wrapper .swiper-button-next.tags-button-next::after {
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: .875rem;
    color: #000;
}
.tagger-wrapper .swiper-button-prev.tags-button-prev::after {
    content: "\f053";
}
.tagger-wrapper .swiper-button-next.tags-button-next::after {
    content: "\f054";
}
.tagger-wrapper .swiper-button-disabled {
    opacity: .25;
    pointer-events: none;
}

/* Bullets pagination — between the arrows */
.tagger-wrapper .pagination-static {
    width: auto;
}
.tagger-wrapper .tags-pagination.swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    gap: .3125rem;
    width: auto;
}
.tagger-wrapper .tags-pagination .swiper-pagination-bullet {
    width: 1.875rem;
    height: 2px;
    border-radius: 0;
    background: #000;
    opacity: .15;
    margin: 0 !important;
    transition: opacity .15s ease;
}
.tagger-wrapper .tags-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

/* Mobile offcanvas (Shop The Look <1024px, opened by clicking a point) */
.tagger-wrapper .offcancas-tags {
    height: auto;
    max-height: 90vh;
    bottom: auto;
    background-color: #F6F6F8;
    border-radius: 0 0 10px 10px;
}
.tagger-wrapper .offcancas-tags .offcanvas-header {
    padding: 1rem 1.5rem;
}
.tagger-wrapper .offcancas-tags .offcanvas-title {
    font-size: .875rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .04rem;
    color: #000;
    margin: 0;
}
.tagger-wrapper .offcancas-tags .offcanvas-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
}
/* the offcanvas reuses the products-panel markup — neutralize the inline-panel layout rules */
.tagger-wrapper .offcancas-tags .swiper-slide.product-tag-products {
    display: block;
    width: 100%;
}
.tagger-wrapper .offcancas-tags .product-tag_prodparent {
    padding: 0;
}
.tagger-wrapper .offcancas-tags .btn.close-look {
    display: none;

}
/* SHOP THE LOOK (tagger module) - END */

/* PRODUCT - START */
body.product_product #product-product.container-xxl {
    max-width: 100%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 0;
}
body.product_product #product-product > .row {
    margin: 0;
    --bs-gutter-x: 0;
}
body.product_product #product-product #content {
    padding: 0;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* 2-col: gallery (left, wider) + info (right, sticky) */
body.product_product #product-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 35rem;
    column-gap: 3rem;
    align-items: start;
}

/* Gallery — 2-col grid of images */
body.product_product .product-gallery_wrap {
    width: 100%;
    min-width: 0;
    position: relative;
}
body.product_product .product-gallery_container {
    width: 100%;
}
body.product_product .product-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}
body.product_product .product-gallery > div,
body.product_product .product-gallery > a {
    display: block;
    width: 100%;
    overflow: hidden;
}
body.product_product .product-gallery img,
body.product_product .product-gallery video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Product image flags / labels */

/* Right info column - sticky */
body.product_product .product-info_wrap {
    position: sticky;
    top: 5rem;
    align-self: start;
    width: 100%;
    max-width: 430px;
}
body.product_product .product-info_wrap-inner {
    display: flex;
    flex-direction: column;
}

/* Manufacturer logo */
body.product_product .manufacturer_info {
    margin: 0 0 .5rem;
}
body.product_product .manufacturer_info img {
    max-height: 2rem;
    width: auto;
}

/* Title + wishlist heart */
/* .product-title-price is transparent on desktop (no layout change); it only
   becomes a flex row on mobile — see the max-width:1023.98px block (Wrike #3457). */
body.product_product .product-title-price {
    display: contents;
}
body.product_product .product-title-price .product-title {
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    gap: .75rem;
    margin: 0;
}
body.product_product .product-info_wrap-inner h1 {
    font-size: 1.0625rem; /* 17px */
    font-weight: 400;
    text-transform: uppercase;
    color: #000;
    margin: 0;
    letter-spacing: 0;
    line-height: 1.4;
    flex: 1;
}
body.product_product #product-wrap .product-wishlist {
    background: white !important;
    border: 0 !important;
    width: 34px;
    height: 34px;
    border-radius: 100%;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5A5A5A;
    cursor: pointer;
    box-shadow: none !important;
    min-width: 0;
}
body.product_product #product-wrap .product-wishlist:hover i {
    color: #000;
    font-weight: 900;
}
body.product_product #product-wrap .product-wishlist-remove {
    display: none;
}
body.product_product.wished  .product-wishlist-add,
body.product_product #product-product.wished .product-wishlist-add {
    display: none;
}
body.product_product.wished .product-wishlist-remove,
body.product_product #product-product.wished .product-wishlist-remove {
    display: inline-flex;
}
body.product_product.wished .product-wishlist i,
body.product_product #product-product.wished .product-wishlist i {
    color: #D22B2B;
    font-weight: 900;
}

.product-tabs-wrapper .single-tab-title span{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    font-size: 17px;
    font-weight: 500;
    margin-top: 2rem;
}

/* SKU details */
body.product_product .product-details {
    margin: 0;
}
body.product_product .product-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .6875rem;
    color: #5a5a5a;
    text-transform: uppercase;
    letter-spacing: .04rem;
}
body.product_product .product-details {
    margin: 0;
    padding: 0;
    display: none; /* hide SKU/model code */
}

/* Price */
body.product_product .product-price {
    margin: 0;
    margin-top: 16px;
    display: flex;
    align-items: baseline;
    gap: .625rem;
}
body.product_product .product-price .price-new {
    font-size: 1.25rem;
    font-weight: 500;
    border-radius: 5px;
}
body.product_product .product-price .price-new.special {
    background-color: #C72B2B;
    color: white;
    padding: 2px 7px;
}

body.product_product .product-price .price-old {
    font-size: 1rem;
    color: #5a5a5a;
    text-decoration: line-through;
}
body.product_product .product-block-price-retail {
    margin: 0;
}
body.product_product .product-block-price-retail .retail-amount {
    font-size: .8125rem;
    color: #5a5a5a;
    margin: 0;
}
body.product_product .product__priceref {
    font-size: .625rem;
    color: #5a5a5a;
    text-transform: uppercase;
    margin-right: .375rem;
    letter-spacing: .04rem;
}

/* Color related (color swatches row) */
body.product_product .product-color_related {
    margin: 20px 0;
}
body.product_product .product-color_related h3 {
    font-size: .6875rem;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04rem;
    margin: 0 0 .5rem;
}
body.product_product .product-color_related h3 span {
    color: #5a5a5a;
    margin-left: .25rem;
}
body.product_product .color_related-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
body.product_product .color_related-item a {
    display: block;
    text-decoration: none;
}
body.product_product .color_related-image {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid transparent;
    box-shadow: 0 0 0 1px transparent;
    transition: box-shadow .15s ease;
    cursor: pointer;
}
body.product_product .color_related-image > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
}
body.product_product .color_related-item.active .color_related-image,
body.product_product .color_related-item:hover .color_related-image {
    box-shadow: 0 0 0 1px #000;
}

/* Options row (sizes via radio) */
body.product_product .options-row {
    --bs-gutter-x: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
body.product_product .options-row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding: 0;
    flex: none;
}
body.product_product .options-row .col-form-label,
body.product_product .options-row .form-label {
    display: block;
    font-size: .6875rem;
    font-weight: 400 !important;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04rem;
    margin: 0 0 .5rem;
    padding: 0;
}
body.product_product .options-row .option-row {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}
body.product_product .options-row .form-check {
    margin: 0;
    padding: 0;
    min-height: 0;
    position: relative;
}
body.product_product .options-row .form-check .form-check-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 38px;
    padding: 0 .75rem;
    border: 1px solid #e1e1e1;
    border-radius: .25rem;
    background: transparent;
    font-size: .75rem;
    color: #000;
    text-align: center;
    cursor: pointer;
    margin: 0;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
body.product_product .product-info_wrap .product-custom_product-chart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}
body.product_product .product-info_wrap .product-custom_product-chart .product-custom-text-1 p {
    margin-bottom: 0;
}
body.product_product .options-row .form-check.no-image .option-value-box {
    line-height: 1;
}
body.product_product .options-row .form-check:not(.active) .form-check-label {
    opacity: .4;
    text-decoration: line-through;
    cursor: pointer;
}
body.product_product .options-row .form-check.active:hover .form-check-label {
    border-color: #000;
}
body.product_product .options-row .form-check.active input:checked + .form-check-label {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Notify-me tooltip — appears above an out-of-stock size on hover.
   The wrapper sits flush against the button top (bottom: 100%, no gap) with
   padding-bottom: 10px filling the visual gap — so hover is maintained as the
   cursor travels from the button up through the "gap" into the tooltip bubble. */
body.product_product .options-row .form-check:not(.active) {
    position: relative;
}
body.product_product .size-notify-wrapper {
    display: none;
    position: absolute;
    bottom: 100%;           /* flush against button — 0px gap */
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 10px;   /* visually appears as gap but keeps hover alive */
    z-index: 20;
    cursor: pointer;
}
body.product_product .options-row .form-check:not(.active):hover .size-notify-wrapper {
    display: block;
}
body.product_product .size-notify-tooltip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 2rem;
    padding: .5rem 1.125rem;
    font-size: .75rem;
    font-weight: 400;
    color: #000;
}
/* triangle pointing down — sits just below the pill, pointing into the gap */
body.product_product .size-notify-tooltip::after {
    content: '';
    position: absolute;
    top: 78%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #e1e1e1;
}

/* Size chart link */
body.product_product .product-ruler {
    margin: 0;
}
body.product_product .product-ruler .btn-size-chart {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: transparent;
    border: 0;
    padding: 0;
    color: #5a5a5a;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    text-decoration: none;
}
body.product_product .product-ruler .btn-size-chart:hover {
    color: #000;
    text-decoration: underline;
}
body.product_product .product-ruler i {
    font-size: .875rem;
}

/* Custom text 1 (e.g. "Ύψος Μοντέλου ...") */
body.product_product .product-custom-text-1 {
    font-size: .6875rem;
    color: #5a5a5a;
    line-height: 1.5;
    margin: 0;
}

/* Add-to-cart row: quantity + main button */
body.product_product .product-btn {
    display: flex;
    align-items: stretch;
    gap: .5rem;
    margin-top: 30px;
}
body.product_product .product-quantity {
    flex: 0 0 auto;
}
body.product_product .number-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 3rem;
    border: 1px solid #E1E1E1;
    border-radius: .3125rem;
    background: transparent;
    padding: 0 .25rem;
    min-width: 140px;
}
body.product_product .number-spinner .input-group-btn {
    display: inline-flex;
    background: transparent !important;
    border: 0 !important;
    padding: 0 5px !important;
    color: #8A8A8A !important;
}
body.product_product .number-spinner button.button-minus,
body.product_product .number-spinner button.button-plus {
    background: transparent !important;
    border: 0 !important;
    width: 1.5rem;
    height: 100%;
    color: #8A8A8A;
    font-size: .875rem;
    font-weight: 400;
    cursor: pointer;
    padding: 0 !important;
    box-shadow: none !important;
    line-height: 1;
}
body.product_product .number-spinner input.form-control {
    width: 1.75rem;
    text-align: center;
    border: 0 !important;
    background: transparent !important;
    font-size: .8125rem;
    color: #000;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none;
    height: auto;
}

/* Main cart button */
body.product_product #button-cart,
body.product_product #button-notify {
    position: relative;
    flex: 1;
    height: 3rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .3125rem;
    color: #000;
    cursor: pointer;
    padding: 0 1rem;
    transition: all .3s ease;
}
body.product_product #button-cart > div,
body.product_product #button-notify > div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    width: 100%;
    height: 100%;
    font-size: .6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .15rem;
}
body.product_product #button-cart:hover,
body.product_product #button-notify:hover {
    background: #000;
    color: #fff;
}
body.product_product #button-cart i,
body.product_product #button-notify i {
    font-size: 1rem;
    color: inherit;
}
body.product_product #button-cart .text,
body.product_product #button-notify .text {
    color: inherit;
}

/* Rest: bag icon pinned to the left edge, label centred across the full button.
   Hover: button goes black (rule above), label fades out, icon slides to the centre. */
body.product_product #button-cart,
body.product_product #button-notify {
    display: flex;
    justify-content: center;
    align-items: center;
}
body.product_product #button-cart > div,
body.product_product #button-notify > div {
    position: relative;
    width: 100%;
    overflow: visible;
}
body.product_product #button-cart i,
body.product_product #button-notify i {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: left .3s ease, transform .3s ease;
}
body.product_product #button-cart:hover i,
body.product_product #button-notify:hover i {
    left: 50%;
    transform: translate(-50%, -50%);
}
body.product_product #button-cart .text,
body.product_product #button-notify .text {
    transition: opacity .3s ease;
}
body.product_product #button-cart:hover .text,
body.product_product #button-notify:hover .text,
body.product_product #button-cart.loading .text {
    opacity: 0;
}

/* B2B order button ("ΠΑΡΑΓΓΕΛΙΑ") on the product page — same look as #button-cart
   (the regular cart row is hidden in b2b mode, so this is the primary action). */
body.product_product .product-page-b2b .product-block-actions-b2b {
    display: flex;
    margin-top: 30px;
}
body.product_product .product-page-b2b .product-cart-b2b {
    position: relative;
    flex: 1;
    width: 100%;
    height: 3rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .3125rem;
    color: #000;
    cursor: pointer;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all .3s ease;
}
body.product_product .product-page-b2b .product-cart-b2b > div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    height: 100%;
    font-size: .6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .15rem;
    color: inherit;
}
body.product_product .product-page-b2b .product-cart-b2b i {
    font-size: 1rem;
    color: inherit;
}
body.product_product .product-page-b2b .product-cart-b2b:hover {
    background: #000;
    color: #fff;
}

/* Simpler / Klarna widgets — give container spacing only, leave native styles */
body.product_product #simpler-product:not(:empty) {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.product_product .klarna-container {
    margin: 0;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
}
body.product_product .klarna-container .osm-container-inner .badge {
    padding: 0;
}
body.product_product .klarna-container .osm-container-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.product_product .klarna-container .osm-container-inner .text-wrapper p {
    margin-bottom: 0;
    font-size: 12px;
    color: #5A5A5A;
}

body.product_product .klarna-container .klarna-link {
    font-size: 10px;
    color: #5A5A5A;
    text-decoration: underline;
    transition: 0.3s ease all;
}
body.product_product .klarna-container .klarna-link:hover {
    color: black;
}

/* Accordion (Σύνθεση / Πληροφορίες / Παράδοση / Βοήθεια) */
body.product_product #product-info.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: transparent;
    margin: 0;
}
body.product_product #product-info .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e1e1e1;
    border-radius: 0;
}
body.product_product #product-info .accordion-item:first-of-type {
    border-top: 1px solid #e1e1e1;
}
body.product_product #product-info .accordion-header {
    margin: 0;
    background: transparent;
}
body.product_product #product-info .accordion-button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 1rem 0 !important;
    font-size: .75rem;
    font-weight: 400;
    color: #000;
    text-transform: capitalize;
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
}
body.product_product #product-info .accordion-button::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    background: none !important;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: 0;
    transform: none;
    transition: transform .2s ease;
    font-size: .625rem;
    color: #000;
}
body.product_product #product-info .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}
body.product_product #product-info .accordion-item.no-arrow .accordion-button::after {
    display: none;
}
body.product_product #product-info .accordion-item.no-arrow .accordion-header > span {
    display: inline-block;
    font-size: 10px;
    color: #5a5a5a;
    margin-left: auto;
    padding-left: 1rem;
}
body.product_product #product-info .accordion-item.no-arrow .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
body.product_product #product-info .accordion-body {
    padding: 0 0 1rem;
    font-size: 10px;
    color: #5a5a5a;
    line-height: 1.6;
}

/* Bottom USPs (3 icons row) */
body.product_product .product-usps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1.5rem;
}
body.product_product .product-usps > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
}
body.product_product .product-usps img {
    width: 1.875rem;
    height: 1.875rem;
    object-fit: contain;
    filter: brightness(0);
}
body.product_product .product-usps span {
    font-size: .5625rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04rem;
    line-height: 1.4;
}

/* Description (collapsed or shown below price) */
body.product_product .product-description {
    font-size: .75rem;
    color: #5a5a5a;
    line-height: 1.6;
    margin: 0;
}
body.product_product .product-description p {
    margin: 0 0 .5rem;
}
body.product_product .product-description p:last-child {
    margin-bottom: 0;
}
body.product_product :is(.gallery-external-actions, .swiper-external-actions) {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.product_product :is(.gallery-external-actions .product-wishlist, .swiper-external-actions .product-wishlist) {
    background-color: white !important;
    border-radius: 100%;
    height: 34px;
    width: 34px;
}
/* Hide breadcrumb + Shop The Look trigger from gallery area (handled in own section) */
body.product_product #shopthelook_link {
    height: 34px;
    background: white;
    padding: .5rem 1.25rem;
    border-radius: 17px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04rem;
    color: #000;
    cursor: pointer;
    display: none; /* shown via JS only when a .product-tag_container (shop-the-look) exists */
    align-items: center;
    gap: .375rem;
    transition: 0.3s ease all;
}
body.product_product #shopthelook_link i {
    font-size: .5rem;
    transition: 0.3s ease all;
}
body.product_product #shopthelook_link:hover {
    background-color: black;
    color: white;
}

body.product_product #shopthelook_link:hover i {
    transform: translateX(5px);
}

/* Breadcrumbs (top of product page) */
/* Breadcrumb styling is now global (see GLOBAL BREADCRUMB block). */
/* PRODUCT - END */

/* SIZE CHART MODAL - START */
#sizeChartModal .modal-dialog {
    max-width: 47.5rem;
    margin: 4.5rem auto;
}
#sizeChartModal .modal-content {
    background: #f6f6f8;
    border: 0;
    border-radius: .625rem;
    padding: 25px;
}
#sizeChartModal .modal-header {
    padding: 1rem .5rem;
    padding-top: 0;
    border: 0;
    align-items: center;
}
#sizeChartModal .modal-title {
    font-size: .875rem;
    font-weight: 500;
    color: #000;
    margin: 0;
    letter-spacing: 0;
}
#sizeChartModal .btn-close.close {
    background: white;
    border: 0;
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    opacity: 1;
    color: #000;
    position: relative;
    cursor: pointer;
    transition: 0.3s ease all;
}
#sizeChartModal .btn-close.close:hover {
    background-color: black;
}
#sizeChartModal .btn-close.close:hover::before {
    color: white;
}
#sizeChartModal .btn-close.close::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 1rem;
    color: #000;
    transition: 0.3s ease all;
}
#sizeChartModal .modal-body {
    padding: 0;
}

/* Section heading (Διεθνής Οδηγός / Helmi Οδηγός) */
#sizeChartModal .modal-body h4 {
    font-size: .6875rem;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .08rem;
    margin: 1.5rem 0 .625rem;
}
#sizeChartModal .modal-body h4:first-child {
    margin-top: .75rem;
}

/* Tables with pill cells separated by gaps */
#sizeChartModal .modal-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: .25rem;
    margin: 0 0 20px;
}
#sizeChartModal .modal-body td {
    background: transparent;
    border: 0;
    padding: .625rem .5rem;
    font-size: .75rem;
    color: #000;
    text-align: center;
    border-radius: .25rem;
    vertical-align: middle;
    line-height: 1.3;
}
/* First row = sizes header (empty corner + XS, S, M, L, XL) — transparent, bold */
#sizeChartModal .modal-body table tr:nth-child(odd) td{
    background-color: white;
}
#sizeChartModal .modal-body table thead tr td {
    background-color: transparent !important;
    font-weight: bold;
}

/* SIZE CHART MODAL - END */

/* CART PAGE - START */
body.checkout_cart {
    background: #f6f6f8;
}
/* Breadcrumb styling is now global (see GLOBAL BREADCRUMB block). */

#checkout-cart {
    padding-top: 1rem;
    padding-bottom: 4rem;
}
#checkout-cart #content {
    width: 100%;
    max-width: 100%;
    padding: 0;
}
#checkout-cart .checkout-cart > .row {
    margin: 0;
    --bs-gutter-x: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 25rem;
    column-gap: 2.5rem;
    align-items: start;
}

/* Cart content (left column) */
#checkout-cart .cart-content {
    width: 100%;
    max-width: none;
    padding: 0;
    flex: none;
}

/* Top: title centered + counter + back-link */
#checkout-cart .top-btns {
    display: flex;
    align-items: center;
    margin: 0.1875rem 0 1rem 0;
    position: relative;
    justify-content: space-between;
}
#checkout-cart .top-btns h1 {
    grid-column: 2;
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
    margin: 0;
    line-height: 1rem;
    text-align: center;
    display: none;
}
#checkout-cart .top-btns .counter {
    grid-column: 2;
    grid-row: 2;
    text-align: center;
    font-size: .75rem;
    color: #5a5a5a;
    margin-top: .25rem;
}
#checkout-cart .top-btns .btn-back {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: .75rem;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04rem;
    cursor: pointer;
}
#checkout-cart .top-btns .btn-back:hover {
    text-decoration: underline;
}
#checkout-cart .top-btns .btn-back i {
    font-size: .625rem;
}
#checkout-cart .cart-content > .row {
    margin: 0;
    --bs-gutter-x: 0;
}
#checkout-cart .cart-content > .row > form {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Each product card */
#checkout-cart .cart--product--card {
    background: #fff;
    border-radius: .5rem;
    padding: 1rem;
    width: 100%;
    border: solid 1px #E1E1E1;
}
#checkout-cart .cart--productcard--inside {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 1.25rem;
    align-items: stretch;
}
#checkout-cart .cart--productcard--inside > div:first-child {
    width: 7rem;
}
#checkout-cart .cart--productcard--inside img,
#checkout-cart .cart--productcard--inside video {
    width: 100%;
    height: auto;
    aspect-ratio: 7 / 9;
    object-fit: cover;
    border-radius: .25rem;
    display: block;
}
#checkout-cart .cart--productcard--inside > div:last-child {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    position: relative;
    min-width: 0;
}

/* Remove (X) button — top right */
#checkout-cart .cart--productcard--inside > div:last-child > div:first-child {
    position: absolute;
    top: 0;
    right: 0;
}
#checkout-cart .cart--productcard--inside > div:last-child button[onclick*="cart.remove"],
#checkout-cart .cart--productcard--inside > div:last-child button[onclick*="voucher.remove"] {
    background: transparent;
    border: 0;
    padding: .25rem;
    color: #000;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
#checkout-cart .cart--productcard--inside > div:last-child button[onclick*="cart.remove"]:hover {
    opacity: .6;
}

/* Title */
#checkout-cart .cart--productcard--inside h3 {
    font-size: .8125rem;
    font-weight: 400;
    margin: 0;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.3;
    padding-right: 2rem;
}
#checkout-cart .cart--productcard--inside h3 a {
    color: #000;
    text-decoration: none;
}
#checkout-cart .cart--productcard--inside h3 a:hover {
    text-decoration: underline;
}

/* SKU + stock badge */
#checkout-cart .cart-model-stock {
    font-size: .6875rem;
    color: #5a5a5a;
    text-transform: uppercase;
    letter-spacing: .04rem;
}
#checkout-cart .cart-model-stock .d-flex {
    display: inline-block;
}
#checkout-cart .cart-model-stock .badge.bg-danger {
    background: #A64343 !important;
    color: #fff;
    padding: .25rem .5rem;
    font-size: .625rem;
    border-radius: .1875rem;
    font-weight: 400;
}

/* Color swatch row */
#checkout-cart .cart--productcard--inside .color {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .6875rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04rem;
    margin: 0;
}
#checkout-cart .cart--productcard--inside .color > span {
    display: inline-block;
    width: .875rem;
    height: .875rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .1);
}

/* Options (size etc.) */
#checkout-cart .cart-options {
    font-size: .6875rem;
    color: #5a5a5a;
    flex-wrap: wrap;
    gap: .375rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
}
#checkout-cart .cart-options span {
    color: #000;
}

/* Quantity stepper inside cart card */
#checkout-cart .product-quantity {
    margin-top: .75rem;
    margin-bottom: .25rem;
}
#checkout-cart .number-spinner {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    border: 1px solid #e1e1e1;
    border-radius: .3125rem;
    background: #fff;
    padding: 0 .25rem;
    width: fit-content;
}
#checkout-cart .number-spinner .input-group-btn {
    display: inline-flex;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
#checkout-cart .number-spinner button.button-minus,
#checkout-cart .number-spinner button.button-plus {
    background: transparent !important;
    border: 0 !important;
    width: 1.5rem;
    height: 100%;
    color: #000;
    font-size: .875rem;
    cursor: pointer;
    padding: 0 !important;
    box-shadow: none !important;
    line-height: 1;
}
#checkout-cart .number-spinner input.form-control {
    width: 1.75rem;
    text-align: center;
    border: 0 !important;
    background: transparent !important;
    font-size: .8125rem;
    color: #000;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none;
    height: auto;
}

/* Total (price) */
#checkout-cart .cart-total {
    position: absolute;
    right: 0;
    bottom: 0;
}
#checkout-cart .cart_item-price-total {
    font-size: .9375rem;
    font-weight: 500;
    color: #000;
}

/* Wishlist toggle inside card */
#checkout-cart .wishlist-button {
    margin-top: 0;
}
#checkout-cart .wishlist-button a {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: .625rem;
    color: #5a5a5a;
    text-transform: uppercase;
    letter-spacing: .08rem;
    text-decoration: none;
    cursor: pointer;
    display: none;
}
#checkout-cart .wishlist-button a:hover {
    color: #000;
    text-decoration: underline;
}
#checkout-cart .wishlist-button .product-wishlist-remove {
    display: none;
}
#checkout-cart .wishlist-button.wished .product-wishlist-add {
    display: none;
}
#checkout-cart .wishlist-button.wished .product-wishlist-remove {
    display: inline-flex;
}
#checkout-cart .wishlist-button.wished i {
    font-weight: 900;
}

/* USPs (3 icons below products) */
#checkout-cart .cart-content .product-usps,
#checkout-cart .cart-sidebar .product-usps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: .5rem;
    border: solid 1px #E1E1E1;
}
#checkout-cart .product-usps > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
}
#checkout-cart .product-usps img {
    width: 1.875rem;
    height: 1.875rem;
    object-fit: contain;
    filter: brightness(0);
}
#checkout-cart .product-usps span {
    font-size: .625rem;
    font-weight: 500;
    color: #000;
    line-height: 1rem;
    max-width: 10rem;
}
/* Hide mobile-only USPs on desktop */
#checkout-cart .cart-sidebar .product-usps.mobile,
#checkout-cart .cart-sidebar .btn-back.mobile {
    display: none;
}

/* Cart sidebar (right column) */
#checkout-cart .cart-sidebar {
    width: 100%;
    max-width: none;
    padding: 3.625rem 0 0 0;
    position: sticky;
    top: 5rem;
    align-self: start;
}

/* Free shipping progress bar */
#checkout-cart .cart-free-shipingbar {
    background: #fff;
    border-radius: .5rem;
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
    font-size: .75rem;
    color: #000;
    line-height: 1.4;
    border: solid 1px #E1E1E1;
}
#checkout-cart .cart-free-shipingbar img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    filter: brightness(0);
    flex-shrink: 0;
}
#checkout-cart .cart-free-shipingbar b {
    font-weight: 500;
}

/* Sidebar inner stack */
#checkout-cart .cart-sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Modules (vouchers, coupons, reward, gift-card collapsibles) */
#checkout-cart .cart-modules {
    display: flex;
    flex-direction: column;
    gap: .375rem;
}
#checkout-cart .cart-modules > div {
    background: #fff;
    border-radius: .625rem;
    overflow: hidden;
    border: solid 1px #E1E1E1;
}
#checkout-cart #voucher-heading,
#checkout-cart #coupon-heading,
#checkout-cart #reward-heading {
    background: transparent !important;
    padding: 1rem 1.25rem !important;
    margin: 0 !important;
    font-size: .75rem !important;
    text-transform: uppercase;
    letter-spacing: .05rem;
    color: #000;
    font-weight: 400 !important;
    cursor: pointer;
    border: 0;
    position: relative;
}
#checkout-cart #voucher-heading::after,
#checkout-cart #coupon-heading::after,
#checkout-cart #reward-heading::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .625rem;
    transition: transform .2s ease;
}
#checkout-cart .cart-modules  .card .card-header {
    background: #fff;
    border: 0;
    padding: 0;
}
#checkout-cart .cart-modules  .card .card-title {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
}
#checkout-cart .cart-modules  .card .card-title a {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1rem;
    width: 100%;
    align-items: center;
}
#checkout-cart .cart-modules  .card .card-title .accordion-toggle:not(.collapsed) i:before {
    content: "\f077";
}
#checkout-cart .cart-modules  .card .card-body {
    padding: 1rem 1rem;
}
#checkout-cart .cart-modules input[type="text"] {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ccc;
    background: transparent;
    padding: .5rem 0;
    font-size: .8125rem;
    color: #000;
    outline: none;
    margin: 0 0 1rem 0;
    width: 100%;
    border-radius: 0;
}
#checkout-cart .cart-modules .input-group-btn {
    width: 100%;
}
#checkout-cart .cart-modules .input-group-btn .btn {
    background: #fff;
    width: 100%;
    border-color: #000;
    color: #000;
    font-size: .75rem;
    padding: .75rem 1rem;
}
#checkout-cart .cart-modules .input-group-btn .btn:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* Totals card */
#checkout-cart .card.card-cart {
    background: #fff;
    border: 0;
    border-radius: .5rem;
    overflow: hidden;
    border: solid 1px #E1E1E1;
}
#checkout-cart .card.card-cart .card-header {
    background: transparent;
    border: 0;
    padding: 1rem 1.25rem .5rem;
}
#checkout-cart .card.card-cart .card-header h3 {
    font-size: .75rem;
    font-weight: 500;
    color: #000;
    text-transform: uppercase;
    margin: 0;
}
#checkout-cart .card.card-cart .card-footer {
    background: transparent;
    border: 0;
    padding: 0 1.25rem .5rem !important;
    margin: 0 0 1rem 0;
}
#checkout-cart .cart_total {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin: 0 !important;
    padding: .375rem 0;
    --bs-gutter-x: 0;
    line-height: 1rem;
}
#checkout-cart .cart_total-title,
#checkout-cart .cart_total-text {
    font-size: .8125rem;
    color: #666;
    padding: 0 !important;
    width: auto !important;
    flex: none !important;
    margin: 0;
}
#checkout-cart .cart_total.sum_total {
    padding-top: .75rem;
    margin-top: .375rem !important;
}
#checkout-cart .cart_total.sum_total .cart_total-title {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #000;
}
#checkout-cart .cart_total.sum_total .cart_total-text {
    font-size: 1rem;
    font-weight: 500;
    color: #000;
}

/* Checkout button */
#checkout-cart .card.card-cart > .px-3.pb-3 {
    padding: 0 1.25rem 1.25rem !important;
}
#checkout-cart .btn.btn-checkout,
#checkout-cart .btn-primary.btn-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    width: 100%;
    height: 3.25rem;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: .3125rem;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .15rem;
    cursor: pointer;
    transition: background-color .15s ease;
    margin-top: 0 !important;
}
#checkout-cart .btn.btn-checkout:hover {
    background: #333;
}
#checkout-cart .btn.btn-checkout i {
    font-size: .75rem;
}

/* Simpler quick buy inside cart */
#checkout-cart #simpler-cart:not(:empty) {
    margin-top: .75rem;
}

/* Alerts (success/error/info) */
#checkout-cart .alert {
    background: #fff;
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-size: .8125rem;
}
#checkout-cart .alert-danger {
    background-color: #d52925;
    color: white;
}
#checkout-cart .alert-success {
    color: #4a7c4a;
}
#checkout-cart .alert-info {
    color: #4a6b8c;
}

/* Responsive: below the desktop two-column layout, stack content + summary into a
   single column. Bootstrap .container drops to 720px at <992px, which leaves the
   fixed 25rem (400px) sidebar crushing the items column down to ~90px and overlaps
   the price/quantity inside each card. Single-column gives each full width. */
@media (max-width: 991.98px) {
    #checkout-cart .checkout-cart > .row {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 1.5rem;
    }
    #checkout-cart .cart-sidebar {
        padding-top: 0;
        position: static;
    }
}
/* CART PAGE - END */

/* ORDER SUCCESS - START */
body.checkout_success #common-success.container,
body.common_success #common-success.container {
    max-width: 56rem;
    padding: 2.5rem 1.5rem 4rem;
    margin: 0 auto;
}
body.checkout_success #common-success .row,
body.common_success #common-success .row {
    margin: 0;
    --bs-gutter-x: 0;
}
body.checkout_success #common-success #content,
body.common_success #common-success #content {
    padding: 0;
    width: 100%;
    max-width: 100%;
    flex: none;
}
.thankyou-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Heading: check icon circle + h1 + subtitle */
.thankyou-heading {
    text-align: center;
    margin: 0;
}
.thankyou-heading .heading-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: white;
    color: black;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.thankyou-heading .heading-icon i {
    font-size: 1.125rem;
    color: black;
}
.thankyou-heading h1 {
    font-size: 1.375rem;
    font-weight: 500;
    color: #000;
    margin: 0 0 .5rem;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}
.thankyou-heading .heading-msg {
    font-size: .8125rem;
    color: #5a5a5a;
    line-height: 1.6;
}

/* Products section */
.thankyou-content {
    padding: 1.5rem 0;
    border-bottom: 1px solid #e1e1e1;
    margin: 0;
}
.thankyou-content .order-heading {
    font-size: 12px;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .05rem;
    margin: 0 0 1.25rem;
}
.table-products {
    width: 100%;
}
.table-products-flex {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.product-row-flex {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1.25rem;
    align-items: center;
}
.product-row-flex .td-image {
    width: 7.5rem;
}
.product-row-flex .td-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 0;
    display: block;
}
.product-row-flex .wrap-tds {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    column-gap: 1.5rem;
    row-gap: .5rem;
    align-items: center;
}
.product-row-flex .td-name {
    grid-column: 1 / 4;
    grid-row: 1;
    font-size: 11px;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.3;
    margin-bottom: 20px;
}
.product-row-flex .td-option {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
}
.product-row-flex .td-color {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
}
.product-row-flex .td-quantity {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
}
.product-row-flex .wrap-td-block.td-total {
    grid-column: 5;
    grid-row: 1 / span 2;
    align-self: center;
    text-align: right;
}
.product-row-flex .td-option,
.product-row-flex .td-color {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .6875rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04rem;
}
.product-row-flex .td-color .wrap-td-value {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}
.product-row-flex .td-color .wrap-td-value > span {
    display: inline-block;
    width: .875rem;
    height: .875rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .1);
}
.product-row-flex .td-option .wrap-td-label {
    display: none;
}
.product-row-flex .td-option .wrap-td-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 30px;
    padding: 0 .5rem;
    border-radius: .1875rem;
    background-color: white;
    font-size: 11px;
}
.product-row-flex .td-quantity .wrap-td-value {
    font-size: .75rem;
    color: #5a5a5a;
}
.product-row-flex .td-total {
    font-size: .875rem;
    font-weight: 400;
    color: #000;
    text-align: right;
}
.product-row-flex .wrap-td-block.td-total {
    text-align: right;
}

/* Order details (3-col grid of address/contact/shipping) */
.order-details-flex {
    padding: 1.5rem 0;
    border-bottom: 1px solid #e1e1e1;
}
.order-address-flex h4 {
    font-size: .75rem;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .05rem;
    margin: 0 0 1.25rem;
}
.order-details-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 2rem;
}
.order-details-ul > li {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    font-size: .75rem;
    color: #5a5a5a;
    line-height: 1.5;
}
.order-details-ul > li > span {
    display: block;
    font-size: .6875rem;
    color: #000;
    letter-spacing: .04rem;
    margin: 0;
}

/* Bottom info note */
.order-success-text-bottom {
    padding: 1.5rem 0 0;
    text-align: center;
}
.order-success-text-bottom div {
    font-size: 13px;
}
.order-success-text-bottom > span:first-child {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    color: #000;
}
.order-success-text-bottom i {
    font-size: .875rem;
    color: #000;
}
.order-success-text-bottom .text-muted,
.order-success-text-bottom span.fw-normal {
    display: block;
    margin-top: .5rem;
    font-size: .6875rem;
    color: #5a5a5a !important;
    line-height: 1.6;
}
.order-success-text-bottom a {
    color: #000;
    text-decoration: underline;
}

/* Responsive: single-column success page on smaller screens (site breakpoint) */
@media (max-width: 1024px) {
    /* Checkout header (mobile): compact 3-up — phone icon | centered logo |
       2-row payment cards (card-logos-mobile.png, 327x86). Columns size to
       content so the logo stays centred; the help text + phone number are hidden. */
    .checkout_header .header-main-wrapper {
        padding: 0.75rem 1rem;
    }
    .checkout_header .header-main-wrapper > div {
        flex: 0 0 auto;
    }
    .checkout_header .header-main-wrapper .question {
        justify-content: flex-start;
    }
    .checkout_header .header-main-wrapper .header-logo {
        flex: 1 1 auto;
    }
    .checkout_header .header-main-wrapper .question a > div {
        display: none;
    }
    .checkout_header .header-main-wrapper .cards img {
        width: auto;
        max-width: min(40vw, 327px);
    }

    /* Product rows: image | (name / size+color / qty+total) stacked */
    .product-row-flex {
        grid-template-columns: 6.5rem 1fr;
        gap: 1rem;
        align-items: start;
    }
    .product-row-flex .td-image {
        width: 6.5rem;
    }
    .product-row-flex .wrap-tds {
        min-width: 0;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 1rem;
        row-gap: .75rem;
        align-items: center;
    }
    .product-row-flex .td-name {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .product-row-flex .td-option {
        grid-column: 1;
        grid-row: 2;
    }
    .product-row-flex .td-color {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }
    .product-row-flex .td-quantity {
        grid-column: 1;
        grid-row: 3;
    }
    .product-row-flex .wrap-td-block.td-total {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
    }

    /* Order details: 3-col → 2-col */
    .order-details-ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem 1.5rem;
    }
}
/* ORDER SUCCESS - END */

/* REMINDER MODAL (stock notify) - START */
#reminderModal .modal-dialog {
    max-width: 33rem;
    margin: 5rem auto;
}
#reminderModal .modal-content {
    background: #f6f6f8;
    border: 0;
    border-radius: 0;
    padding: 25px 25px 40px 25px;
}
#reminderModal .modal-header {
    border: 0;
    padding: 0;
    padding-bottom: 30px;
    align-items: center;
    gap: 1.5rem;
}
#reminderModal .modal-title {
    font-size: .8125rem;
    font-weight: 400;
    color: #000;
    margin: 0;
    letter-spacing: 0;
    line-height: 1.5;
    max-width: 90%;
}
#reminderModal .btn-close.close {
    background: transparent;
    border: 0;
    padding: 0;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    opacity: 1;
    color: #000;
    cursor: pointer;
    position: relative;
    margin-left: auto;
    border-radius: 100%;
    margin: 0;
    background-color: white;
    transition: 0.3s ease all;
}
#reminderModal .btn-close.close::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 1rem;
    color: #000;
    transition: 0.3s ease all;
}

#reminderModal .btn-close.close:hover {
    background-color: black;
}
#reminderModal .btn-close.close:hover::before {
    color: white;
}
#reminderModal .modal-body {
    padding: 0;
}

/* Body: top row = image + product info; bottom row = form */
#reminderModal .modal-body > div:first-child {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 2rem;
}
#reminderModal .modal-body > div:first-child > div:first-child img {
    width: 100%;
    height: auto;
    aspect-ratio: 122 / 184;
    object-fit: cover;
    border-radius: 0;
    display: block;
}
#reminderModal .modal-body > div:first-child > div:last-child {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding-top: 24px;
    padding-bottom: 24px;
}
/* Title */
#reminderModal .modal-body .fw-bold:not(.option-selected) {
    font-size: 12px;
    font-weight: 400 !important;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0 !important;
    margin-bottom: 25px !important;
}
/* Size row "Μέγεθος : L" */
#reminderModal .option-selected {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
    font-weight: 400 !important;
    margin: 0 !important;
}
#reminderModal .option-selected .label_d {
    font-size: .625rem;
    color: #5a5a5a;
    text-transform: uppercase;
    letter-spacing: .04rem;
}
#reminderModal .option-selected #reminder_size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2rem;
    padding: 0 .75rem;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: .1875rem;
    font-size: .75rem;
    font-weight: 400;
}

/* Form: email input + button */
#reminderModal form .mb-3.required {
    margin-bottom: 1.5rem !important;
    border-bottom: 1px solid #ccc;
    padding-bottom: .375rem;
}
#reminderModal form input.form-control[type="text"] {
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    padding: .25rem 0 !important;
    font-size: .8125rem;
    color: #000;
    text-align: center;
    box-shadow: none !important;
    outline: none;
    border-radius: 0 !important;
    height: auto;
}
#reminderModal form input.form-control::placeholder {
    color: #5a5a5a;
    text-align: center;
}
#reminderModal .d-grid {
    display: flex !important;
    justify-content: center;
    margin: 0 !important;
}
#reminderModal #reminder_send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-width: 16rem;
    height: 3rem;
    background: #f6f6f8;
    border: 1px solid #000;
    border-radius: .3125rem;
    color: #000;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    padding: 0 1.5rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
#reminderModal #reminder_send:hover {
    background: #000;
    color: #fff;
}
/* Hide the bell + chevron icons from the button (not in Figma) */
#reminderModal #reminder_send > i {
    display: none;
}
/* REMINDER MODAL (stock notify) - END */

/* IMAGE SLIDER MODAL (fullscreen gallery) - START */
#imageSliderModal .modal-dialog {
    max-width: 100%;
    width: 100%;
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: stretch;
}
#imageSliderModal .modal-content {
    background: #f6f6f8;
    border: 0;
    border-radius: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    padding: 0;
    overflow: hidden;
}

/* Left sidebar: close X + title + price (vertical stack, top-aligned) */
#imageSliderModal .modal-header {
    flex: 0 0 15rem;
    width: 15rem;
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background: transparent;
    gap: 0;
}

/* Close X — first child, top of sidebar */
#imageSliderModal .btn-close.close {
    background: white;
    border: 0;
    padding: 0;
    width: 32px;
    height: 32px;
    opacity: 1;
    color: #000;
    cursor: pointer;
    position: relative;
    margin: 0 0 1.25rem;
    order: -1;
    border-radius: 100%;
    transition: 0.3s ease all;
}
#imageSliderModal .btn-close.close:hover {
    background-color: black;
}
#imageSliderModal .btn-close.close:hover::before {
    color: white;
}
#imageSliderModal .btn-close.close::before {
    content: "\f104";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 1rem;
    color: #000;
    transition: 0.3s ease all;
}
#imageSliderModal .modal-title {
    font-size: .6875rem;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04rem;
    margin: 0 0 .375rem;
    line-height: 1.4;
}
#imageSliderModal .modal-subtitle {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: .375rem;
    font-size: .75rem;
}
#imageSliderModal .modal-subtitle .price-new {
    font-size: .8125rem;
    font-weight: 500;
    color: #000;
}
#imageSliderModal .modal-subtitle .price-old {
    font-size: .6875rem;
    color: #5a5a5a;
    text-decoration: line-through;
}

/* Right side: swiper fills remaining width */
#imageSliderModal .modal-body {
    flex: 1;
    min-width: 0;
    height: 100vh;
    padding: 0;
    position: relative;
    overflow: hidden;
}
#imageSliderModal #slideshow_image_slider.swiper {
    height: 100%;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: relative;
}
#imageSliderModal .swiper-wrapper {
    height: 100%;
}
/* No gap between slides — override Swiper inline margins */
#imageSliderModal .swiper-slide {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-right: 0 !important;
}
#imageSliderModal .swiper-slide img,
#imageSliderModal .swiper-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Scrollbar — anchored to bottom of modal-body, fixed 400px wide, centered */
#imageSliderModal .modal-body .swiper-scrollbar {
    position: absolute !important;
    bottom: 1.5rem !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: 25rem !important;
    max-width: 25rem !important;
    height: 2px !important;
    background: rgba(0, 0, 0, .15) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    z-index: 5;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
#imageSliderModal .modal-body .swiper-scrollbar-drag {
    background: #000;
    border-radius: 0;
    height: 2px;
    cursor: grab;
}
#imageSliderModal .modal-body .swiper-scrollbar-drag:active {
    cursor: grabbing;
}

/* Override Bootstrap fade-in to be instant for fullscreen */
#imageSliderModal.fade.show .modal-dialog {
    transform: none;
}
/* IMAGE SLIDER MODAL (fullscreen gallery) - END */

/* SEARCH OFFCANVAS - START */
#searchOffcanvas.offcanvas.offcanvas-top {
    background: #f6f6f8;
    height: auto;
    min-height: 30rem;
    border: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .05);
}
#searchOffcanvas #search.search_mod {
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem 0;
    background: transparent;
}

/* Top row: logo centered + close right */
#searchOffcanvas #search > div:first-child {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 1560px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
#searchOffcanvas .search-logo {
    grid-column: 2;
    max-height: 2.5rem;
    width: auto;
    display: block;
    margin: 0 auto;
}
#searchOffcanvas .search-focus-close {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: #000;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    cursor: pointer;
}
#searchOffcanvas .search-focus-close span {
    color: inherit;
}
#searchOffcanvas .search-focus-close i {
    font-size: .64rem;
    color: inherit;
}

/* Search input row */
#searchOffcanvas .search-input-clear-cont {
    padding-left: 3rem;
    padding-right: 3rem;
}
#searchOffcanvas .search-input-clear {
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
    position: relative;
    border-bottom: 1px solid #000;
    padding: 0 0 .5rem;
}
#searchOffcanvas #search_input.form-control {
    width: 100%;
    border: 0 !important;
    background: transparent !important;
    padding: .25rem 0 !important;
    font-size: .9375rem;
    color: #000;
    box-shadow: none !important;
    outline: none;
    border-radius: 0 !important;
    height: auto;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .04rem;
}
#searchOffcanvas #search_input.form-control::placeholder {
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04rem;
    font-size: .9375rem;
}
#searchOffcanvas #search-clear {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #000;
    font-size: 1rem;
    line-height: 1;
}
#searchOffcanvas #search-clear.is-hidden {
    display: none;
}

/* Live search results / popular searches */
#searchOffcanvas .live-search {
    padding: 0;
    margin: 0;
}
#searchOffcanvas .live-results__container {
    margin: 0;
}
#searchOffcanvas .live-results__suggestion-box {
    max-width: 1360px;
    margin-left: auto;
    margin-right: auto;
}
#searchOffcanvas .live-results__suggestion-box-cont {
    padding-left: 3rem;
    padding-right: 3rem;
}
#searchOffcanvas .live-results__suggestion-box h4 {
    font-size: 10px;
    font-weight: 400;
    color: rgba(0, 0, 0, .5);
    text-transform: uppercase;
    letter-spacing: .08rem;
    margin: 0 0 1rem;
}
#searchOffcanvas .live-results__suggestion-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}
#searchOffcanvas .live-results__suggestion-box li {
    margin: 0;
    padding: 0;
}
#searchOffcanvas .live-results__suggestion-box li a {
    color: #000;
    text-decoration: none;
    font-size: .9375rem;
    line-height: 1.4;
    display: inline-block;
}
#searchOffcanvas .live-results__suggestion-box li a:hover {
    text-decoration: underline;
}

/* When loaded results show — products grid (live ajax results) */
#searchOffcanvas.loaded-results #search.search_mod {
    padding-bottom: 4rem;
}

/* Loader */
#searchOffcanvas .aj-loader {
    display: flex;
    justify-content: center;
    padding: 2rem;
}
/* SEARCH OFFCANVAS - END */

/* CART POPUP (right offcanvas) - START */
#offcanvasCart.offcanvas-end {
    background: #f6f6f8;
    width: 636px;
    border: 0;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .08);
}

/* Header: bag icon + title + counter + close */
#offcanvasCart .offcanvas-header {
    padding: 1.25rem 1.5rem;
    border: 0;
    display: flex;
    align-items: center;
    gap: .625rem;
    background: transparent;
}
#offcanvasCart .offcanvas-header > i.fa-bag-shopping {
    font-size: 1.25rem;
    color: #000;
}
#offcanvasCart .offcanvas-title {
    font-size: 11px;
    font-weight: 500;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .05rem;
    margin: 0;
    line-height: 1;
}
#offcanvasCart .offcanvas-header .counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;    
    width: 24px;
    border-radius: 50%;
    background-color: white;
    color: black;
    font-size: .625rem;
    font-weight: 400;
}
#offcanvasCart .offcanvas-header .btn-close {
    margin: 0 0 0 auto;
    background: white;
    border: 1px solid #E1E1E1;
    padding: 0;
    width: 32px;
    height: 32px;
    opacity: 1;
    position: relative;
    cursor: pointer;
    border-radius: 100%;
    transition: 0.3s ease all;
    display: flex;
    align-items: center;
    justify-content: center;
}
#offcanvasCart .offcanvas-header .btn-close:hover {
    background-color: black;
    border-color: black;
}
#offcanvasCart .offcanvas-header .btn-close:hover::before {
    color: white;
}
#offcanvasCart .offcanvas-header .btn-close::before {
    content: "\f104";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 0.65rem;
    color: #000;
    transition: 0.3s ease;
}

/* Body */
#offcanvasCart .offcanvas-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}
#offcanvasCart .offcanvas-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Free shipping bar — Helmi-specific module appears as first child of offcanvas-up; placeholder rule */
#offcanvasCart .offcanvas-up {
    flex: 1;
    overflow-y: auto;
    padding: 0 1rem;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#offcanvasCart .cart_total:not(.sum_total) {
    display: none;
}

#offcanvasCart .cart-free-shipingbar,
#offcanvasCart .free-shipping-bar {
    background: #fff;
    border-radius: .5rem;
    padding: .75rem 1rem;
    font-size: .75rem;
    color: #000;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 10px;
}
#offcanvasCart .cart-free-shipingbar b {
    font-weight: 500;
}
/* Cart item */
#offcanvasCart .cart_item {
    background: transparent;
    margin: 0;
    padding: 0;}
#offcanvasCart .cart_item:last-child {
    border-bottom: 0;
}
#offcanvasCart .cart_item > div {
    display: flex;
    gap: 24px;
    align-items: start;
}
#offcanvasCart .cart_item .col-image {
    width: 25%;
}
/* Missing thumbnail (e.g. a voucher with no gift.jpg): still reserve the image slot
   as a 2:3 placeholder box so the info column aligns like a normal product row. */
#offcanvasCart .cart_item .col-image-empty {
    aspect-ratio: 2 / 3;
    background: #f6f6f8;
}
#offcanvasCart .cart_item .col-image a,
#offcanvasCart .cart_item .col-image {
    display: block;
}
#offcanvasCart .cart_item img,
#offcanvasCart .cart_item video {
    width: 100%;
    height: auto;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
}

/* Right column: title + remove + options + qty/price */
#offcanvasCart .cart_item .col-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    width: 75%;
    padding-top: 1.5rem;
}
#offcanvasCart .cart_item-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
}
#offcanvasCart .cart_item-info h4 {
    font-size: .75rem;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0;
    flex: 1;
}
/* Remove (X) inside cart_item-info — restyle Bootstrap btn-close */
#offcanvasCart .cart_item-info .btn-close {
    background: transparent;
    border: 0;
    padding: 0;
    opacity: 1;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    width: auto;
    height: auto;
    color: #5A5A5A;
    font-size: 10px;
    font-weight: 400px;
}
#offcanvasCart .cart_item-info .btn-close:hover {
    color: #000000;
    text-decoration: underline;
}

/* Options (size pill + color dot) */
#offcanvasCart .cart_item-options {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    justify-content: start;
}
#offcanvasCart .cart_item-options > span {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: 11px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04rem;
    font-weight: 400;
    justify-content: center;
}
/* color dot */
#offcanvasCart .cart_item-options > span > i {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .1);
}
/* size pill (no leading icon) */
#offcanvasCart .cart_item-options > span:not(:has(i)) {
    border-radius: 5px;
    padding: .4rem 1rem;
    min-width: 3rem;
    background: #fff;
}

/* Quantity + price row */
#offcanvasCart .cart_item-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
}
#offcanvasCart .cart_item-qnt {
    display: inline-flex;
    align-items: center;
    width: fit-content;
}
#offcanvasCart .cart_item-qnt .qty-btn {
    border: 0;
    background: none;
    width: 34px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: #5a5a5a;
    font-size: .7rem;
    transition: color .2s;
}
#offcanvasCart .cart_item-qnt .qty-btn:hover {
    color: #000;
}
#offcanvasCart .cart_item-qnt .qty-input {
    width: 46px;
    height: 26px;
    border: 0;
    text-align: center;
    font-size: .75rem;
    color: #5a5a5a;
    background: none;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}
#offcanvasCart .cart_item-qnt .qty-input::-webkit-outer-spin-button,
#offcanvasCart .cart_item-qnt .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#offcanvasCart .cart_item-price {
    font-size: .875rem;
    font-weight: 400;
    color: #000;
}

/* Footer (sticky-ish bottom): totals + checkout buttons */
#offcanvasCart .offcanvas-down {
    background: #f6f6f8;
    padding: 1.25rem 1.5rem 1rem;
    border-top: 1px solid #e1e1e1;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
#offcanvasCart .cart_total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: .25rem 0;
}
#offcanvasCart .cart_total-text {
    font-size: 1rem;
    color: #000;
    font-weight: 500;
}
#offcanvasCart .cart_total-title {
    font-size: 13px;
    color: #000;
    font-weight: 400;
}
/* #offcanvasCart .cart_total.sum_total {
    padding-top: .5rem;
    border-top: 1px solid #e1e1e1;
    margin-top: .25rem;
} */
#offcanvasCart .cart_total.sum_total .cart_total-title {
    font-size: 13px;
    color: black;
    font-weight: 400;
}
#offcanvasCart .cart_total.sum_total .cart_total-text {
    font-size: 1rem;
    font-weight: 500;
}
#offcanvasCart .offcanvas-down .gap-2 {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 0;
}
#offcanvasCart .btn-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    width: 100%;
    height: 3.25rem;
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: .3125rem;
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .125rem;
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
}
#offcanvasCart .btn-checkout:hover {
    background: #000000;
    color: #fff;
    justify-content: space-between;
}
#offcanvasCart .btn-checkout i {
    font-size: .75rem;
}
#offcanvasCart .btn-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    width: 100%;
    height: 2.75rem;
    background: transparent;
    color: #000;
    border: 1px solid #000;
    border-radius: .3125rem;
    text-decoration: none;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .08rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
#offcanvasCart .btn-cart:hover {
    background: #000;
    color: #fff;
}
#offcanvasCart .btn-cart i {
    font-size: .625rem;
}

/* Simpler quick buy widget (passthrough) */
#offcanvasCart #simpler-minicartpos {
    margin: 0;
}

/* Empty state */
#offcanvasCart .offcanvas-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: #5a5a5a;
    font-size: .875rem !important;
    font-weight: 400 !important;
}
/* CART POPUP (right offcanvas) - END */

/* CATEGORY FILTERS (offcanvas-start) - START */
#filtersOffcanvas.offcanvas-start {
    background: #f6f6f8;
    width: 25rem;
    border: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .08);
}
#filtersOffcanvas .offcanvas-header {
    padding: 1.5rem 3.25rem;
    /* padding-top: 0.5rem; */
    border: 0;
    background: transparent;
}
#filtersOffcanvas .filters-responsive-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: .75rem;
}
#filtersOffcanvas .filters-responsive-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .05rem;
    font-weight: 400;
}
#filtersOffcanvas .filters-responsive-title i {
    font-size: 1rem;
}
#filtersOffcanvas .filters-responsive-close {
    cursor: pointer;
    color: #000;
    font-size: .6875rem;
    line-height: 1;
    padding: .25rem 0;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid black;
}
#filtersOffcanvas .filters-responsive-close.mobile {
    display: none;
}
#filtersOffcanvas .filters-responsive-close i {
    font-size: 1.125rem;
    color: #000;
}

/* Body wrapper */
#filtersOffcanvas .offcanvas-body {
    padding: 0;
    overflow-y: auto;
}
#filtersOffcanvas .ho-filters-wrapper {
    padding: 0;
}
#filtersOffcanvas .filters-wrapper {
    padding: 0 3.25rem 5.5rem;
    display: flex;
    flex-direction: column;
}
#filtersOffcanvas .filters-block-wrapper {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #E1E1E1;
}
#filtersOffcanvas .filter-clear-all i {
    transform: scale(1.4);
}
/* Filter group container */
#filtersOffcanvas .filter-group-container {
    padding: 1.25rem 0;
    border-bottom: 1px solid #e1e1e1;
}
#filtersOffcanvas .filter-group-container:last-child {
    border-bottom: 0;
}
/* The template tags a group `.hide-group` whenever its total_count is falsy, but
   the group still renders selectable options (e.g. Είδος/Μέγεθος/Χρώμα). ho_blank
   keeps these groups visible and usable, so don't hide them here either — just
   let them fall through to the normal collapsible group styling. */

/* Title row */
#filtersOffcanvas .filter-group-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin: 0 0 1rem;
}
#filtersOffcanvas .filter-group-container:not(.opened) .filter-group-title-container {
    margin-bottom: 0;
}
#filtersOffcanvas .filter-group-title {
    font-size: .6875rem;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .08rem;
    line-height: 1.4;
}
#filtersOffcanvas .filter-group-clear {
    font-size: .625rem;
    color: #5a5a5a;
    text-transform: uppercase;
    letter-spacing: .04rem;
    cursor: pointer;
    background: transparent;
}
#filtersOffcanvas .filter-group-clear:hover {
    color: #000;
    text-decoration: underline;
}

/* Filters list container — collapsible (closed when no `.opened` parent) */
#filtersOffcanvas .filter-group-filters-container {
    display: none;
}
#filtersOffcanvas .filter-group-container.opened .filter-group-filters-container {
    display: block;
}
#filtersOffcanvas .filter-group-block-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Default no-image filter (simple checkbox + text label, vertical list) */
#filtersOffcanvas .form-check.filter-no-image {
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 0;
}
#filtersOffcanvas .form-check.filter-no-image .form-check-label {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .8125rem;
    color: #000;
    line-height: 1.5;
    cursor: pointer;
    padding: .25rem 0;
    margin: 0;
}
#filtersOffcanvas .form-check.filter-no-image .form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    border: 1px solid #5a5a5a;
    border-radius: .125rem;
    accent-color: #000;
    cursor: pointer;
    flex-shrink: 0;
}
#filtersOffcanvas .form-check.filter-no-image .form-check-label.disabled {
    opacity: .4;
    text-decoration: line-through;
    cursor: not-allowed;
}

/* With image/color filter — color swatch + label inline */
#filtersOffcanvas .form-check.filter-with-image {
    width: calc(50% - .25rem);
    margin: 0;
    padding: 0;
    min-height: 0;
    display: flex;
}

#filtersOffcanvas .form-check.filter-with-image .form-check-label {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04rem;
    line-height: 1.3;
    cursor: pointer;
    /* Same box as the selected card (transparent border) so selecting only changes
       colour/shadow/check — no padding/position shift. */
    padding: .625rem .75rem;
    border: 1px solid transparent;
    border-radius: 3px;
    margin: 0;
    position: relative;
}
#filtersOffcanvas .form-check.filter-with-image .form-check-image-block {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
#filtersOffcanvas .form-check.filter-with-image .form-check-color-block {
    display: block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .08);
}
#filtersOffcanvas .form-check.filter-with-image .form-check-image-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
/* Active (checked) color = white bordered card with a check on the right */
#filtersOffcanvas .form-check.filter-with-image:has(.form-check-input:checked) .form-check-label {
    width: 100%;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    padding: .625rem .75rem;
}
#filtersOffcanvas .form-check.filter-with-image:has(.form-check-input:checked) .form-check-label::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    margin-left: auto;
    padding-left: .5rem;
    font-size: .8125rem;
    line-height: 1;
    color: #000;
}
#filtersOffcanvas .form-check.filter-with-image .form-check-label.disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* SIZE / Options as pill grid (3-col) */
#filtersOffcanvas .goption .filter-group-block-wrap,
#filtersOffcanvas .gfilter .filter-group-filters-container:not(.has-image) .filter-group-block-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .375rem;
}
#filtersOffcanvas .goption.go1 .filter-group-block-wrap {
    grid-template-columns: repeat(4, 1fr);
}

#filtersOffcanvas .goption .form-check.filter-no-image,
#filtersOffcanvas .gfilter .filter-group-filters-container:not(.has-image) .form-check.filter-no-image {
    width: 100%;
}
#filtersOffcanvas .goption .form-check.filter-no-image .form-check-label,
#filtersOffcanvas .gfilter .filter-group-filters-container:not(.has-image) .form-check.filter-no-image .form-check-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.25rem;
    padding: 0.2rem 1rem;
    border: 1px solid #e1e1e1;
    border-radius: .25rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    color: #000;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
    text-align: center;
}

#filtersOffcanvas .goption .form-check.filter-no-image .form-check-label:hover,
#filtersOffcanvas .gfilter .filter-group-filters-container:not(.has-image) .form-check.filter-no-image .form-check-label:hover {
    border: 1px solid black;
}

#filtersOffcanvas .goption .form-check.filter-no-image .form-check-input,
#filtersOffcanvas .gfilter .filter-group-filters-container:not(.has-image) .form-check.filter-no-image .form-check-input {
    display: none;
}
#filtersOffcanvas .goption .form-check.filter-no-image .form-check-input:checked + .form-check-title,
#filtersOffcanvas .goption .form-check.filter-no-image:has(.form-check-input:checked) .form-check-label,
#filtersOffcanvas .gfilter .filter-group-filters-container:not(.has-image) .form-check.filter-no-image:has(.form-check-input:checked) .form-check-label {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}
#filtersOffcanvas .goption .form-check.filter-no-image .form-check-label.disabled,
#filtersOffcanvas .gfilter .filter-group-filters-container:not(.has-image) .form-check.filter-no-image .form-check-label.disabled {
    opacity: .4;
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Colors / images grid — 2-col with swatch + label */
#filtersOffcanvas .gfilter .filter-group-filters-container.has-image .filter-group-block-wrap,
#filtersOffcanvas .goption .filter-group-filters-container.has-image .filter-group-block-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}
#filtersOffcanvas .gfilter .filter-group-filters-container.has-image .form-check.filter-with-image,
#filtersOffcanvas .goption .filter-group-filters-container.has-image .form-check.filter-with-image {
    width: 100%;
}

/* Price range section */
#filtersOffcanvas .gprice_range .price-range-group {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
#filtersOffcanvas .gprice_range input.filter_price_from,
#filtersOffcanvas .gprice_range input.filter_price_to {
    flex: 1;
    border: none !important;
    background: #fff !important;
    border-radius: .25rem !important;
    padding: .5rem .75rem !important;
    font-size: .75rem;
    color: #000;
    box-shadow: none !important;
    outline: none;
    text-align: center;
    height: 2.25rem;
}
#filtersOffcanvas .gprice_range .divider {
    width: .5rem;
    height: 1px;
    background: #5a5a5a;
    flex-shrink: 0;
}

/* ionRangeSlider — minimal Helmi styling */
#filtersOffcanvas .irs--round .irs-line {
    background: #e1e1e1;
    height: 2px;
    top: 25px; /* align with .irs-bar; was falling back to the irs--round default (~36px) */
    border-radius: 0;
}
#filtersOffcanvas .irs--round .irs-bar {
    background: #000;
    height: 2px;
    top: 25px;
    border-radius: 0;
}
#filtersOffcanvas .irs--round .irs-handle {
    width: 16px;
    height: 16px;
    background: #000;
    border: 0;
    box-shadow: none;
    top: 18px;
    cursor: grab;
}
#filtersOffcanvas .irs--round .irs-handle:active {
    cursor: grabbing;
}
#filtersOffcanvas .irs--round .irs-min,
#filtersOffcanvas .irs--round .irs-max {
    background: rgba(0, 0, 0, .2);
    color: black;
    font-size: .625rem;
    padding: 3px 5px;
    text-transform: uppercase;
    border-radius: 5px;
}
#filtersOffcanvas .irs--round .irs-single,
#filtersOffcanvas .irs--round .irs-from,
#filtersOffcanvas .irs--round .irs-to {
    background: #000;
    color: #fff;
    font-size: .625rem;
    padding: 3px 5px;
    border-radius: 5px;
    text-transform: none;
}
#filtersOffcanvas .irs--round .irs-from::before,
#filtersOffcanvas .irs--round .irs-to::before,
#filtersOffcanvas .irs--round .irs-single::before {
    display: none;
}

/* Apply button (sticky bottom of offcanvas) — Bootstrap .btn.btn-primary override */
#filtersOffcanvas .filters-responsive-results,
#filtersOffcanvas .btn.btn-primary.filters-responsive-results,
#filtersOffcanvas .ho-filter-apply-button,
#filtersOffcanvas #filter-results-button {
    position: fixed;
    left: 1.5rem;
    max-width: 22rem;
    width: 100%;
    bottom: 1.25rem;
    z-index: 5;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    height: 3.25rem;
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
    border-radius: .3125rem !important;
    text-decoration: none;
    font-size: .75rem !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .15rem;
    cursor: pointer;
    transition: background-color .15s ease;
    padding: 0 1rem !important;
    box-shadow: none !important;
}
#filtersOffcanvas .filters-responsive-results:hover,
#filtersOffcanvas .ho-filter-apply-button:hover,
#filtersOffcanvas #filter-results-button:hover {
    background: #333 !important;
}
#filtersOffcanvas .filters-responsive-results i {
    font-size: .625rem;
}

/* Selected filters (chips on top) */
#filtersOffcanvas .selected-filters-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0 0 1rem;
}
#filtersOffcanvas .selected-filter-block {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    background: #000;
    color: #fff;
    padding: .25rem .625rem;
    border-radius: 1rem;
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    cursor: pointer;
}
#filtersOffcanvas .selected-filter-block i {
    font-size: .625rem;
}
#filtersOffcanvas .filter-clear-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin: 1.5rem 0 0;
    padding: .875rem 1rem;
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    background: transparent;
    color: #9D3232;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .08rem;
    cursor: pointer;
    transition: 0.3s ease all;
}
#filtersOffcanvas .filter-clear-all:empty {
    display: none;
}
#filtersOffcanvas .filter-clear-all:hover {
    background: #9D3232;
    color: #fff;
}
/* Collapse +/- indicator on attribute / option / manufacturer groups */
#filtersOffcanvas .gfilter > .filter-group-title-container,
#filtersOffcanvas .goption > .filter-group-title-container,
#filtersOffcanvas .gmanufacturer > .filter-group-title-container {
    position: relative;
    padding-right: 1.5rem;
}
#filtersOffcanvas .gfilter > .filter-group-title-container::after,
#filtersOffcanvas .goption > .filter-group-title-container::after,
#filtersOffcanvas .gmanufacturer > .filter-group-title-container::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: 300;
    color: #000;
    line-height: 1;
}
#filtersOffcanvas .gfilter.opened > .filter-group-title-container::after,
#filtersOffcanvas .goption.opened > .filter-group-title-container::after,
#filtersOffcanvas .gmanufacturer.opened > .filter-group-title-container::after {
    content: "\2212"; /* minus sign */
}

/* Category subcategories styled as checkbox rows (links keep navigation) */
#filtersOffcanvas .gcategory .form-check-link {
    width: 100%;
    margin: 0;
    padding: 0;
}
#filtersOffcanvas .gcategory .form-check-link .form-check-label {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .8125rem;
    color: #000;
    text-transform: none;
    letter-spacing: 0;
    padding: .25rem 0;
    margin: 0;
    cursor: pointer;
}
#filtersOffcanvas .gcategory .form-check-link .form-check-label::before {
    content: "";
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid #5a5a5a;
    border-radius: .125rem;
    flex-shrink: 0;
    background: #fff;
}
#filtersOffcanvas .gcategory .form-check-link .form-check-label.checked::before {
    background: #000;
    border-color: #000;
}

/* CATEGORY FILTERS (offcanvas-start) - END */

/* BANNER MODULES - START */
.single-banners {
    position: relative;
}
.single-banners .banner-caption {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 20rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 20px;
    padding-bottom: 20px;
    flex-direction: column;
    text-shadow: 0px 1px .375rem #0003;
}
.single-banners .banner-caption .banner-title {
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 400;
    margin-bottom: 2rem;
}
/* BANNER MODULES - END */

/* TUNES MODULES - START */
#common-home > .content-top > .tunes {
    margin-bottom: 5rem;
}
.tunes .swiper-pagination-wrap {
    height: 2rem;
    margin: 1rem 0;
}
/* TUNES MODULES - END */


/* BLOG - START */
/* Routes: extension/blog/home (list), extension/blog/blog (single post),
   extension/blog/category (category list). Markup lives in
   catalog/view/theme/helmi/template/extension/blog/*.twig + the shared
   post.twig card (.summary). Layout mirrors the old theme's blog grid,
   typography re-tuned to the Helmi redesign (Gotham, uppercase labels,
   muted #5a5a5a meta — same scale as the category page). */

/* Shared container (.container-max is custom, undefined elsewhere) */
body.extension_blog_home .container-max,
body.extension_blog_category .container-max,
body.extension_blog_blog .container-max {
    max-width: 60rem;
    margin: 0 auto;
    padding-inline: clamp(1rem, 4vw, 3.25rem);
    padding-bottom: 4rem;
}

/* Breadcrumbs — same look as the category page */
/* Breadcrumb styling is now global (see GLOBAL BREADCRUMB block). */

/* Page heading (list + category) */
body.extension_blog_home .container-max > h1,
body.extension_blog_category .container-max > h1 {
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02rem;
    color: #000;
    margin: .75rem 0 .25rem;
}
body.extension_blog_home .mini-description {
    font-size: .8125rem;
    color: #5a5a5a;
    line-height: 1.5;
    max-width: 50rem;
    margin-bottom: 1rem;
}

/* "View all categories" link (category page) — pill like the old theme */
body.extension_blog_category .link-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    color: #000;
    border: 1px solid var(--color-border);
    padding: .625rem 1.125rem;
    transition: background .2s ease, color .2s ease;
}
body.extension_blog_category .d-flex.gap-3 a { text-decoration: none; }
body.extension_blog_category .link-button:hover {
    background: var(--color-black);
    color: var(--color-white);
}
body.extension_blog_category .link-button i { font-size: .75rem; }

/* ---- Post grid (list + category) ---- */
body.extension_blog_home .blog-list-container > div:not(.mini-description):not(.pagination-out),
body.extension_blog_category .container-max > div:not(.d-flex):not(.pagination-out) {
    display: flex;
    margin-top: 1.5rem;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 4rem;
}

/* ---- Post card (shared snippet .summary) ---- */
.blog-list-container .summary,
.container-max .summary,
.related-container .summary {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Image */
.blog-list-container .summary > div:has(> a > img),
.container-max .summary > div:has(> a > img),
.related-container .summary > div:has(> a > img) {
    overflow: hidden;
    margin-bottom: 1rem;
}
.blog-list-container .summary img,
.container-max .summary img,
.related-container .summary img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .5s ease;
}
.blog-list-container .summary:hover img,
.container-max .summary:hover img,
.related-container .summary:hover img {
    transform: scale(1.04);
}
/* Category label */
.blog-list-container .summary > a:not(.blog-read-more),
.container-max .summary > a:not(.blog-read-more),
.related-container .summary > a:not(.blog-read-more) {
    display: inline-block;
    font-size: .5625rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    color: #5a5a5a;
    text-decoration: none;
    margin-bottom: .375rem;
}
.blog-list-container .summary > a:not(.blog-read-more):hover,
.container-max .summary > a:not(.blog-read-more):hover,
.related-container .summary > a:not(.blog-read-more):hover {
    color: #000;
}
/* Title */
.blog-list-container .summary h2,
.container-max .summary h2,
.related-container .summary h2 {
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .01rem;
    margin: 0 0 .5rem;
}
.blog-list-container .summary h2 a,
.container-max .summary h2 a,
.related-container .summary h2 a {
    color: #000;
    text-decoration: none;
}
.blog-list-container .summary h2 a:hover,
.container-max .summary h2 a:hover,
.related-container .summary h2 a:hover {
    text-decoration: underline;
}
/* Excerpt */
.blog-list-container .summary > div:not(:has(img)),
.container-max .summary > div:not(:has(img)),
.related-container .summary > div:not(:has(img)) {
    font-size: .8125rem;
    line-height: 1.55;
    color: #5a5a5a;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Read more — neutralize Bootstrap .btn, render as text link */
.summary a.btn.blog-read-more {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    color: #000;
    line-height: 1;
    border-bottom: 1px solid transparent;
}
.summary a.btn.blog-read-more i {
    font-size: .75rem;
    transition: transform .2s ease;
}
.summary a.btn.blog-read-more:hover {
    border-bottom-color: #000;
}
.summary a.btn.blog-read-more:hover i {
    transform: translateX(3px);
}

/* Pagination wrapper */
body.extension_blog_home .pagination-out,
body.extension_blog_category .pagination-out {
    margin-top: 3rem;
}

/* ---- Single post ---- */
body.extension_blog_blog .blog-post-container {
    max-width: 52rem;
}
/* Back to blog */
body.extension_blog_blog .backtoblog a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    color: #5a5a5a;
    text-decoration: none;
    margin: 1.5rem 0;
}
body.extension_blog_blog .backtoblog a:hover { color: #000; }
body.extension_blog_blog .backtoblog i { font-size: .75rem; }
/* Date (meta block right after .backtoblog) */
body.extension_blog_blog .backtoblog + div {
    font-size: .5625rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    color: #5a5a5a;
    text-align: center;
}
/* Title */
body.extension_blog_blog .blog-post-container h1 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .01rem;
    text-align: center;
    margin: .75rem auto 2rem;
    max-width: 36rem;
}
/* Body copy — re-tune typography only (normalize editor inline font-sizes) */
body.extension_blog_blog .blog-description {
    font-size: .9375rem;
    line-height: 1.85;
    color: #2a2a2a;
}
body.extension_blog_blog .blog-description span[style*="font-size"] {
    font-size: inherit !important;
}
body.extension_blog_blog .blog-description p {
    margin: 0 0 1rem;
}
body.extension_blog_blog .blog-description a {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 2px;
}
body.extension_blog_blog .blog-description a:hover { color: #5a5a5a; }
body.extension_blog_blog .blog-description img {
    max-width: 100%;
    height: auto;
}
/* Extra images — stacked full width */
body.extension_blog_blog .extra-images {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}
body.extension_blog_blog .extra-images img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Related posts slider ---- */
body.extension_blog_blog .related-container {
    max-width: 78rem;
    margin: 4rem auto 0;
    padding-inline: clamp(1rem, 4vw, 3.25rem);
}
body.extension_blog_blog .related-container h4 {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02rem;
    text-align: center;
    margin-bottom: 2rem;
}
body.extension_blog_blog .related-container .swiper-slide {
    height: auto;
}
/* BLOG - END */

/* CONTACT - START */
#information-contact {
	font-size: 0.875rem;
}
#information-contact h1,
#information-contact legend {
	text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0 0 1rem;
}
#information-contact address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: 1.125rem;
    margin: 0;
}
#information-contact .form-group.row {
	display: flex;
	flex-direction: column;
}
#information-contact .form-group label {
	font-size: 0.8125rem;
	padding-bottom: .25rem;
}
#information-contact .form-group.row input {
    width: 100%;
}
#information-contact .form-group.row input, 
#information-contact .form-group.row textarea {
    width: 100%;
    border: 0;
    border-bottom: solid 1px #111;
    background: none;
    border-radius: 0;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.125rem;
}
#information-contact .form-group {
	margin-bottom:.5rem;
}
#information-contact .buttons input {
    width: 100%;
    margin-top: 2rem;
    border-radius: 0;
    background: #000;
    border: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
#information-contact .buttons input:hover,
#information-contact .buttons input:active,
#information-contact .buttons input:focus {
	color:#fff;
}
#information-contact form {
	max-width: 48rem;
	margin:0 auto;
	width:100%;
	margin-bottom:2rem;
}
#information-contact .card-default.contact-details {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    max-width: 48rem;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}
#information-contact .information-box {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 1rem;
}
#information-contact .information-box > div {
	text-align: center;
	background: #fff;
	width: calc(33.33333333% - 1rem);
	padding: 1rem;
	border-radius: .625rem;
	font-size: .75rem;
}
#information-contact .information-box > div > strong {
	font-weight: 500;
	font-size: .8125rem;
	margin-bottom: .5rem;
	display: block;
}
#information-contact .map-container.my-3 {
    max-width: 48rem;
    margin: 0 auto;
    margin-bottom: 2rem !important;
    border: solid 1px #000;
}

/* Contact — mobile: stack info boxes into a single column and
   shrink the page/form headings with tighter margins */
@media (max-width: 575.98px) {
    #information-contact .information-box {
        flex-direction: column;
    }
    #information-contact .information-box > div {
        width: 100%;
    }
    #information-contact h1,
    #information-contact legend {
        font-size: 1.125rem;
        /* override Bootstrap .my-5 / .my-4 utility margins */
        margin: 1rem 0 .5rem !important;
    }
}
/* CONTACT - END */



/* ============================================================
   MOBILE CHROME — Figma "Homepage - mobile" (node 1:13031)
   Simplified header (burger | logo | cart) + sticky bottom bar
   (search · account · favourites · language) + footer accordion.
   Breakpoint aligned with the existing burger/nav switch (≤1024).
   ============================================================ */
/* MOBILE CHROME - START */
.mobile-bottombar { display: none; }
.footer-col__chevron { display: none; }   /* shown only inside the mobile accordion */
#filtersOffcanvas .filters-responsive-close .sliders {
    display: none;
}
#product-product .product-gallery {
    position: relative;
}
#product-product .product-gallery #shopthelook_link {
    position: absolute;
    top: 1rem;
    right: 3.5rem;
    left: auto;
    z-index: 2;
}
#product-product .product-gallery .shopthelook-favorites {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}
.table-title-mobile {
    display: none;
}
#offcanvasCart {
    z-index: 9999999;
}
.information_information #content h1 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.information_information #content h1 {
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
}
.top-row-wrapper .main-content-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    margin: 0;
    margin-top: 1rem;
    padding-bottom: 1rem;
}

@media (max-width: 1024px) {
    body.product_search .top-pagination, body.product_search .top-pagination.row {
        padding: 0 1rem 1rem;
    }
    .about-us-container #content h1 {
        font-size: 1.2rem;
    }
    .about-us-container {
        padding: 1rem;
    }
    .information-stores-content .stores-row {
        margin-bottom: 1rem;
    }
    .information-stores-content .stores-row .store-block-actions a {
        width: 100%;
    }
    .information-stores-content .stores-row .store-block-actions {
        flex-direction: row;
    }
    .information-stores-content .stores-row .store-block-address {
        font-size: 12px;
    }
    .information-stores-content .stores-row .store-block-title {
        margin-bottom: 10px;
    }
    .information-stores-content .stores-row .store-block {
        padding: 20px 15px;
    }
    .information-stores-content .stores-wrapper h4 {
        margin-bottom: 1rem;
    }
    .information-stores-content .stores-logo {
        max-width: 8rem;
    }
    .information-stores-content .description {
        margin-bottom: 20px;
    }
    .information-stores-content .stores-wrapper {
        padding-top: 20px;
    }
    .information-stores-content .description {
        font-size: 12px;
    }
    .information-stores-content h1 {
        font-size: 20px;
    }
    .information-stores-content {
        padding-top: 0.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #offcanvasCart .offcanvas-down {
        padding: 1rem;
        padding-bottom: 0.2rem;
    }
    #offcanvasCart #simpler-minicart {
        padding: 0 1rem;
        padding-bottom: 1.5rem;
    }
    #offcanvasCart .cart_item .col-image {
        width: 35%;
    }
    #offcanvasCart .cart_item .col-info {
        padding-top: 0.8rem;
        gap: 18px;
    }
    #offcanvasCart .cart_item-options {
        flex-direction: column-reverse;
        gap: 12px;
        align-items: start;
    }

    #offcanvasCart .offcanvas-title {
        font-weight: 400;
    }
    #offcanvasCart .cart_item {
        padding-bottom: 0;
        border-bottom: none;
    }
    #offcanvasCart .cart_item-info h4 {
        font-size: 11px;
    }
    #offcanvasCart .cart_item > div {
        gap: 1rem;
    }
    #offcanvasCart .offcanvas-up {
        padding-left: 0;
        padding-right: 1rem;
        gap: 5px;
    }
    #offcanvasCart .cart-free-shipingbar, #offcanvasCart .free-shipping-bar {
        font-size: 11px;
    }
    #offcanvasCart .offcanvas-header {
        padding: 0.6rem 1rem;
    }
    #reminderModal .modal-body > div:first-child {
        gap: 1rem;
    }
    #reminderModal .modal-content {
        padding: 1rem;
        border-radius: 10px;
    }
    #reminderModal .modal-dialog {
        padding: 1rem;
    }
    #sizeChartModal .modal-header {
        padding: 0;
    }
    .table-title {
        display: none;
    }
    .table-title-mobile {
        display: block;
        font-size: 12px;
        font-weight: 500;
        text-align: left;
    }
    #sizeChartModal .modal-body table {
        display: block;
        overflow-x: auto;
    }
    #sizeChartModal .modal-dialog {
        padding: 1rem;
    }
    #sizeChartModal .modal-content {
        padding: 1rem;
    }
    body.product_product :is(.gallery-external-actions .product-wishlist, .swiper-external-actions .product-wishlist) {
        background-color: transparent !important;
    }
    .topbar {
        padding: 0.4rem 1rem;
    }
    .topbar__msg {
        font-size: 11px;
    }
    #filtersOffcanvas .filters-responsive-close {
        border: none;
        padding: 0;
        pointer-events: none;
    }
    #filtersOffcanvas .filters-responsive-close .sliders {
        display: block;
    }
    #filtersOffcanvas .filters-responsive-close .xmark {
        display: none;
    }

    #filtersOffcanvas .filters-responsive-close.mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        border-radius: 100%;
        background-color: white;
        border:none;
        text-decoration: none;
        width: 32px;
        height: 32px;
        pointer-events: auto;
    }
    /* full-height on mobile: 60vh clipped the result cards mid-caption
       (name/price below the fold) now that results are a card grid */
    #searchOffcanvas.offcanvas.offcanvas-top {
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        overflow: hidden;
    }
    #searchOffcanvas .offcanvas-body {
        overscroll-behavior: contain;
    }

    /* ---- Header: keep only burger | logo | cart ---- */
    .site-header__bar { height: 70px; }

    /* search + secondary utils move to the bottom bar; keep cart only */
    .site-header__left .util--search,
    .site-header__utils .util--account,
    .site-header__utils .util--wishlist,
    .site-header__utils .util--lang,
    .site-header__utils .util__divider { display: none; }

    .site-header__utils { gap: 0; }
    .site-header__utils .util--cart { padding-right: 0; }

    /* vertically center the logo inside the 70px bar */
    .site-header__logo { padding: 0; top: 50%; transform: translate(-50%, -50%); display:flex; }
    .logo img { max-height: 34px; }

    /* ---- Sticky bottom bar ---- */
    .mobile-bottombar {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 44px;
        background: var(--color-white);
        z-index: 1039;
        box-shadow: 0px 3px 10px #00000029;
    }
    .mobile-bottombar__item {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--color-black);
        font-size: 20px;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        position: relative;
        transition: 0.3s ease all;
    }
    .mobile-bottombar__item > i { font-size: 1rem; }

    /* thin dividers between cells */
    .mobile-bottombar__item + .mobile-bottombar__item::before {
        content: "";
        position: absolute;
        left: 0; top: 50%;
        transform: translateY(-50%);
        width: 1px; 
        height: 100%;
        background: var(--color-border);
    }
    #body.account_wishlist .mobile-bottombar .mobile-bottombar__item.wishlist {
        background-color: black;
        color: white;
    }

    #body.account_login .mobile-bottombar .mobile-bottombar__item.account {
        background-color: black;
        color: white;
    }
    #body.account_register .mobile-bottombar .mobile-bottombar__item.account {
        background-color: black;
        color: white;
    }

    /* language cell: globe + short code (GR / EN) */
    .mobile-bottombar__lang { font-size: 0; }
    .mobile-bottombar__lang form,
    .mobile-bottombar__lang .btn-group { margin: 0; display: flex; }
    .mobile-bottombar__lang .language-select {
        display: flex;
        align-items: center;
        border: 0;
        background: none;
        padding: 0;
        cursor: pointer;
        color: var(--color-black);
    }
    .mobile-bottombar__lang .language-select > span { display: flex; align-items: center; gap: 6px; }
    .mobile-bottombar__lang .language-select i { font-size: 1rem; }
    .mobile-bottombar__lang .language-select .full { display: none; }
    .mobile-bottombar__lang .language-select .short {
        font-size: 11px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    /* keep page content clear of the fixed bottom bar */
    .wrapper { padding-bottom: 56px; }

    /* ---- Footer accordion ---- */
    .footer-grid { grid-template-columns: 1fr; gap: 0; padding: 0; }
    .site-footer .footer-col { border-bottom: 1px solid var(--color-border); padding: 0; }
    .site-footer .footer-col:last-child { border: none; }
    .site-footer .footer-col__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 18px var(--container-pad);
        cursor: pointer;
        font-size: 12px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-weight: 400;
    }

    .footer-links li {
        margin-bottom: 15px;
    }

    /* chevron on collapsible columns */
    .site-footer .footer-col__chevron {
        display: inline-block;
        font-size: 13px;
        line-height: 1;
        flex: 0 0 auto;
        transition: transform 0.25s;
    }
    .site-footer .footer-col.is-open .footer-col__chevron { transform: rotate(180deg); }

    /* collapsed body of link columns */
    .site-footer .footer-col:not(.footer-col--newsletter):not(.is-open) .footer-links,
    .site-footer .footer-col:not(.footer-col--newsletter):not(.is-open) .footer-col__subtitle,
    .site-footer .footer-col:not(.footer-col--newsletter):not(.is-open) .footer-col__text { display: none; }

    .site-footer .footer-links { padding: 0 var(--container-pad) 18px; }
    .site-footer .footer-col--contact .footer-col__subtitle,
    .site-footer .footer-col--contact .footer-col__text { padding-left: var(--container-pad); padding-right: var(--container-pad); font-weight: 400; font-size: 10px;}
    .site-footer .footer-col--contact .footer-col__text:last-child { padding-bottom: 18px; }

    /* newsletter: always open, no chevron */
    .site-footer .footer-col--newsletter { padding: 28px var(--container-pad); }
    .site-footer .footer-col--newsletter .footer-col__title { padding: 0 0 18px; cursor: default; }
    .footer-newsletter { max-width: none; }
    .footer-social { margin-top: 28px; }

    .footer-newsletter__btn {
        font-size: 12px;
        font-weight: 400;
        margin-top: 5px;
    }
}
/* MOBILE CHROME - END */


/* ============================================================
   MOBILE MENU — Figma "Menu - mobile" (1:20488) + "Menu - Subcategories - mobile" (1:20603)
   Full-screen drawer: head (X | logo | cart) + search + category list
   with drill-in slide panels (back row, ΠΡΟΒΟΛΗ ΟΛΩΝ, promo banners).
   ============================================================ */
/* MOBILE MENU - START */
@media (max-width: 1024px) {
    #searchOffcanvas .live-results__no_results-wrap {
        font-size: 14px;
    }

    /* ---- drawer shell ---- */
    .offcancas-menu.offcanvas-start {
        width: 100%;
        max-width: 460px;
        background: #F6F6F8;
        border: 0;
        top: 70px;
    }
    .offcancas-menu .offcanvas-body {
        display: flex;
        flex-direction: column;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }

    #searchOffcanvas #search > div:first-child {
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #searchOffcanvas .search-logo {
        margin-left: 0;
        margin-right: auto;
    }

    #searchOffcanvas .live-results__suggestion-box-cont {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    #searchOffcanvas .search-input-clear-cont {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #mmenu.offcanvas.show ~ .offcanvas-backdrop {
        top: 70px !important;
    }

    #searchOffcanvas.offcanvas.show ~ .mobile-bottombar{
        z-index: 1043;
    }
    #searchOffcanvas.offcanvas.show ~ .mobile-bottombar .js-search-trigger{
        background-color: black;
        color: white;
    }
    /* Burger → X when mmenu is open or opening */
    body:has(#mmenu.show) .burger span:nth-child(1),
    body:has(#mmenu.showing) .burger span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }
    body:has(#mmenu.show) .burger span:nth-child(2),
    body:has(#mmenu.showing) .burger span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    body:has(#mmenu.show) .burger span:nth-child(3),
    body:has(#mmenu.showing) .burger span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    /* ---- inner head: X | logo | cart ---- */
    .mmenu-head {
        display: none;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        padding: 0 16px;
        flex: 0 0 auto;
    }
    .mmenu-close,
    .mmenu-cart {
        display: flex;
        align-items: center;
        border: 0;
        background: none;
        padding: 8px;
        font-size: 20px;
        line-height: 1;
        color: var(--color-black);
        text-decoration: none;
        cursor: pointer;
    }
    .mmenu-logo {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        text-decoration: none;
        color: var(--color-black);
    }
    .mmenu-logo img { max-height: 30px; width: auto; }
    .mmenu-logo .logo__brand { font-size: 24px; font-weight: 700; letter-spacing: 0.18em; line-height: 1; }
    .mmenu-logo .logo__sub { font-size: 8px; letter-spacing: 0.5em; text-transform: uppercase; line-height: 1; }

    /* ---- scroll area (positioning context for slide panels) ---- */
    .mmenu-scroll {
        position: relative;
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* search — white rounded field */
    .mmenu-search {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 12px 16px;
        padding: 11px 16px;
        background: var(--color-white);
        border-radius: 10px;
    }
    .mmenu-search__input {
        flex: 1 1 auto;
        border: 0;
        background: transparent;
        font-family: inherit;
        font-size: 12px;
        color: var(--color-black);
    }
    .mmenu-search__input:focus { outline: none; }
    .mmenu-search__input::placeholder { color: var(--color-muted); }
    .mmenu-search__btn { border: 0; background: none; padding: 0; font-size: 16px; color: var(--color-black); cursor: pointer; }

    /* ---- root category list (no borders / no item backgrounds) ---- */
    .mmenu-scroll nav { position: static; padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem;}
    .mmenu-scroll nav > ul { list-style: none; margin: 0; padding: 4px 0; }
    .mmenu-scroll nav li { background: transparent !important; border: 0 !important; }
    .mmenu-scroll nav a { color: var(--color-black) !important; }
    .mmenu-scroll nav > ul > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 18px 16px;
        font-size: 12px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-black);
        text-decoration: none;
    }
    .mmenu-arrow { flex: 0 0 auto; font-size: 14px; }

    /* ---- slide panels (any nested dropdown) ---- */
    /* Bootstrap sets .dropdown{position:relative}; force li static so panels
       pin to .mmenu-scroll (level 1) or to their parent panel (deeper levels) */
    .offcancas-menu .mmenu-scroll nav li { position: static !important; }
    .offcancas-menu ul.dropdown-menu {
        display: block !important;          /* override Bootstrap display:none */
        position: absolute !important;      /* override .navbar-nav .dropdown-menu{position:static} */
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        margin: 0;
        padding: 1rem;
        padding-bottom: 2rem;
        border: 0;
        border-radius: 0;
        background: #F6F6F8;
        list-style: none;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        overflow-x: hidden;   /* clip nested (3rd-level) panels parked at translateX(100%) */
        z-index: 2;
        border-radius:0 0 16px 16px;
    }
    .offcancas-menu ul.dropdown-menu.is-active { transform: translateX(0); }
    /* while a child panel is open, lock the parent's scrolling so items of the
       previous level can't scroll into view below the (viewport-sized) panel */
    #mmenu.mmenu--deep .mmenu-scroll { overflow-y: hidden; }
    .offcancas-menu ul.dropdown-menu:has(ul.dropdown-menu.is-active) { overflow-y: hidden; }
    .offcancas-menu ul.dropdown-menu > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 16px;
        font-size: 11px;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--color-black);
        text-decoration: none;
    }

    /* back row */
    .mmenu-back {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        border: 0;
        background: none;
        padding: 16px;
        font-family: inherit;
        font-size: 12px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--color-black);
        cursor: pointer;
        background-color: white;
        border-radius: 10px;
    }
    .mmenu-back i { font-size: 14px; }

    /* view-all button */
    .mmenu-viewall {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 16px;
        padding: 14px;
        border: 1px solid #ccc;
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-black);
        text-decoration: none;
        border-radius: 10px;
        background-color: white;
    }

    /* placeholder promo banners */
    .mmenu-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 0 16px; }
    .mmenu-scroll nav a.mmenu-banner {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        text-align: center;
        aspect-ratio: 3 / 4;
        padding: 12px;
        background: linear-gradient(135deg, #e9e9ec, #d3d3d8);
        background-size: cover;
        background-position: center;
        color: #fff !important;
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
    }
    .mmenu-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0) 55%);
    }
    .mmenu-banner span {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .mmenu-banner .fa-angle-right { font-size: 10px; }

    /* push the "view all" subcategory to the bottom of the submenu list
       (back row stays on top; view-all link + promo banners stay below it) */
    #mmenu .nav-inner-menu { display: flex !important; flex-direction: column; }
    #mmenu .nav-inner-menu .mmenu-back { order: -1; }
    #mmenu .nav-inner-menu li.menu-view-all { order: 1; }
    #mmenu .nav-inner-menu .mmenu-viewall { order: 2; }
    #mmenu .nav-inner-menu .mmenu-banners { order: 3; }

    /* style the "view all" subcategory as a bordered pill button (like .mmenu-viewall) */
    #mmenu .nav-inner-menu li.menu-view-all > a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 16px;
        padding: 14px;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: #fff;
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-black);
        text-decoration: none;
    }
    #mmenu .nav-inner-menu li.menu-view-all > a::after {
        content: "\f105"; /* fa-angle-right */
        font-family: "Font Awesome 6 Pro";
        font-weight: 300;
        font-size: 13px;
    }

    /* hide legacy account/wishlist/lang/social block (moved to bottom bar) */
    .offcancas-menu .mmenu-bottom { display: none; }
}
/* MOBILE MENU - END */
#checkout-checkout .quickcheckout-intro .separator.mobile {
    display: none;
}
@media only screen and (max-width: 1240px) {
    body.product_product #product-wrap {
        grid-template-columns: minmax(0, 1fr) 28rem;
    }
    body.product_product #product-wrap {
        column-gap: 2rem;
    }
    #checkout-checkout .quickcheckout-intro .separator.desktop {
        display: none;
    }
    #checkout-checkout .quickcheckout-intro .separator.mobile {
        display: flex;
        justify-content: center;
    }
    #checkout-checkout .quickcheckout-intro .separator.mobile {
        position: relative;
    }
    #checkout-checkout .quickcheckout-intro .separator.mobile::before {
        content: "";
        width: 44%;
        height: 2px;
        background-color: #E1E1E1;
        position: absolute;
        left: 1rem;
        top: 50%;
    }
    #checkout-checkout .quickcheckout-intro .separator.mobile::after {
        content: "";
        width: 44%;
        height: 2px;
        background-color: #E1E1E1;
        position: absolute;
        right: 1rem;
        top: 50%;
    }
    #checkout-checkout .quickcheckout-intro {
        flex-direction: column;
        gap: 1.5rem;
    }
    #checkout-checkout .quickcheckout-intro .quickcheckout-intro-left {
        width: 100%;
    }
    #checkout-checkout .quickcheckout-intro .quickcheckout-intro-right {
        width: 100%;
    }
    #checkout-checkout .quickcheckout-intro .quickcheckout-intro-right #simpler-checkoutpos{
        display: flex;
        justify-content: center;
    }

}

/* SHOP THE LOOK <1024px: slide shows only the look image with points;
   clicking a point opens the look's offcanvas (see .offcancas-tags rules) */
@media only screen and (max-width: 1023.98px) {
    .tagger-wrapper .product-tag_point {
        display: block;
    }
    .tagger-wrapper .tagger-row .swiper-slide__.product-tag-products {
        display: none;
    }
    .tagger-wrapper .product-tag-tags {
        width: 100%;
    }
    .offcancas-tags .offcanvas-header .btn-close {
        transform: scale(0.8);
    }
    .tagger-wrapper .product-tag_product .product-name a {
        font-size: 11px;
    }
    .tagger-wrapper .product-tag_product .product-name {
        margin-bottom: 5px;
    }
    .tagger-wrapper .product-block .sizes-available .size-box.active {
        background-color: white;
        padding: 8px;
        color: black;
    }
    .tagger-wrapper .product-block .sizes-available .size-box.active:hover span{
        color: black;
    }
    .tagger-wrapper .offcancas-tags .offcanvas-body {
        padding: 20px 16px;
    }
    .tagger-wrapper .offcancas-tags .offcanvas-header {
        padding: 14px 16px;
    }
    body .product-block .sizes-addcart-container {
        display: none !important;
    }

    .pagination li a, .pagination li span, .pagination li > .page-link {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }
    .tagger-wrapper .single-tab-title {
        justify-content: center;
        margin-bottom: 1rem;
    }
    .tagger-wrapper .single-tab-title span {
        font-size: 14px;
    }
    .tagger-wrapper .swiper-navigation-wrapper {
        top: auto;
        bottom: -2.8rem;
        left: 50%;
        transform:translateX(-50%);
        right: auto;
    }
    .tagger-wrapper {
        padding-bottom: 4rem;
    }
    .tagger-wrapper {
        padding-left: 0;
        padding-right: 0;
        padding-top: 2rem;
    }
    body.product_category .pagination-block {
        padding-bottom: 1rem;
    }
    body.product_category #product-category .content-bottom {
        margin-top: 1rem;
    }
    #searchOffcanvas .search-logo {
        max-height: 1.8rem;
    }
    .content-top .double-banners .banner-row {
        --bs-gutter-y: 2px;
    }
    body.product_product .product-info_wrap-inner h1 {
        font-size: 11px;
    }
    body.product_product .product-price .price-old {
        font-size: 13px;
    }
    body.product_product .product-price .price-new {
        font-size: 14px;
    }
    /* Wrike #3457: put title (left) + price (right) on one row to compress the
       above-the-fold height so users reach the products below with less scroll. */
    body.product_product .product-title-price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        column-gap: .75rem;
        margin-top: 5px;
    }
    body.product_product .product-title-price .product-title {
        flex: 1 1 auto;
        min-width: 0;
    }
    body.product_product .product-title-price .product-price {
        margin: 0;
        flex: 0 0 auto;
        white-space: nowrap;
        align-self: center;
    }
    body.product_product .color_related-image {
        width: 1rem;
        height: 1rem;
    }
    body.product_product .product-ruler .btn-size-chart {
        font-size: 10px;
    }
    body.product_product #product-info .accordion-item.no-arrow .accordion-header > span {
        font-size: 10px;
    }
    body.product_product #product-info .accordion-body {
        font-size: 9px;
    }
    .product-tabs-wrapper .single-tab-title span {
        font-size: 14px;
        font-weight: 400;
    }
    body.product_product #button-cart > div, body.product_product #button-notify > div {
        font-size: 10px;
    }
    body.product_product .product-gallery {
        display: block
    }
    body.product_product #product-wrap .swiper-pagination {
        bottom: -1.5rem;
    }
    #checkout-checkout {
        gap: 1rem;
    }
    #checkout-checkout .checkout-main {
        padding: 0 1rem;
    }
}

/* order-products bottom-sheet handle: hidden by default, revealed only inside
   the < 821.8px media query for the desktop-layout products column */
.mini-cart-bar { display: none; }

/* dark backdrop behind the bottom sheet (revealed only < 821.8px via .show below) */
#mini-cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1039;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
}

@media (max-width: 821.8px) {
    #product-product .product-gallery #shopthelook_link {
        position: absolute;
        bottom: 1rem;
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
    }
    body.product_product #product-wrap .product-wishlist {
        background: transparent !important;
    }
    #product-product .product-gallery .shopthelook-favorites {
        position: absolute;
        top: 8px;
        right: 10px;
        z-index: 2;
    }
    #checkout-checkout #voucher .card .card-title a {
        font-size: 12px;
    }
    #checkout-checkout #voucher .card, #checkout-checkout #voucher .card > div {
        background-color: transparent !important;
        border-radius: 0;
        border: none !important; 
        box-shadow: none;
    }
    #checkout-checkout #voucher .card .card-header {
        border-bottom: 1px solid #E1E1E1 !important;
    }
    #checkout-checkout .quickcheckoutmid.totals-terms {
        background-color: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
    }
    #checkout-checkout .quickcheckoutmid.totals-terms #mini_cart {
        background-color: transparent;
    }

    #checkout-checkout #payment-address .quickcheckout-content, #checkout-checkout #shipping-address .quickcheckout-content {
        margin-left: 0;
        margin-right: 0;
    }
    #checkout-checkout .card-checkout {
        margin-bottom: 1rem;
    }
    #checkout-checkout .col-shipping_method {
        gap: 4px;
    }
    #checkout-checkout .col-input {
        width: 100%;
    }
    #checkout-checkout .quickcheckout-login-choose, #checkout-checkout .quickcheckout-login-guest {
        margin-bottom: 1rem;
    }
    #checkout-checkout .quickcheckout-login-guest h2 {
        font-size: 1rem;
    }
    #checkout-checkout .quickcheckout-login-guest .quickcheckout-login-help {
        font-size: 13px;
    }
    body.product_product #product-wrap {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 2rem;
    }
    body.product_product .product-info_wrap {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    body.product_product #product-product.container-xxl {
        padding-right: 0;
    }
    /* Mobile has no hover, so drop the "notify" label on out-of-stock sizes;
       tapping such a size opens the reminder modal directly instead (handled in
       the size click handler in product.twig). !important beats the :hover rule. */
    body.product_product .size-notify-wrapper {
        display: none !important;
    }

    #checkout-checkout {
        display: flex;
        flex-direction: column;
    }

    #checkout-checkout .checkout-sidebar {
        max-width: 100% !important;
    }

    /* === Order-products bottom sheet (desktop layout, viewport < 821.8px) ===
       Scoped to the desktop branch via :not(:has(.clicked-title)); the real-mobile
       branch keeps its own .clicked-title sheet untouched. */
    #checkout-checkout:not(:has(.clicked-title)) { padding-bottom: 20px; }

    #checkout-checkout:not(:has(.clicked-title)) .checkout-sidebar #cart1.products-only {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999999;
        margin: 0;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        background: #fff;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
    }
    /* flatten wrappers so the bar + product list become direct flex rows of the sheet */
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only > .quickcheckout-content,
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only #mini_cart {
        display: contents;
    }
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .mini-cart-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-top: 1px solid #e1e1e1;
        background: #fff;
        cursor: pointer;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #000;
    }
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .mini-cart-bar__count {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        white-space: nowrap;
    }
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .mini-cart-bar i {
        transition: transform .25s ease;
    }
    /* hide the desktop card header inside the sheet */
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .card-header { display: none; }
    /* collapsed: product list hidden — only the bar shows, pinned to the bottom */
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .card-body {
        display: none;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* expanded: reveal the product list (grows upward, bar stays at the sheet top) */
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only.expanded .card-body {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only.expanded .mini-cart-bar i { transform: rotate(180deg); }

    /* product rows: title on top, then size+color, then quantity+price (2-col grid) */
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .cart_item {
        background: #fff;
        border: 0;
        margin: 0;
        align-items: stretch;
    }
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .cart_item .col-info {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        align-content: center;
        column-gap: 1rem;
        row-gap: 1.5rem;
    }
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .cart_item-info,
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .cart_item-rest {
        display: contents;
    }
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .cart_item-info h4 {
        grid-column: 1 / -1;
        order: 1;
        width: auto;
    }
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .cart_item-options { order: 2; }
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .color { order: 3; margin: 0; }
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .cart_item-info .quantity { order: 4; text-align: center;}
    #checkout-checkout:not(:has(.clicked-title)) #cart1.products-only .cart_item-total { order: 5; text-align: left !important; font-size: 14px;}

    /* reveal the backdrop only at this breakpoint (no-op on wider screens) */
    #mini-cart-backdrop.show { opacity: 1; visibility: visible; }

    #checkout-checkout .giftwrap_box {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }
    #checkout-checkout .checkout-main {
        padding: 0;
    }
}

@media (max-width: 675.98px) {
    #checkout-cart .top-btns .btn-back {
        font-size: 10px;
    }
    .checkout_header .header-main-wrapper .header-logo img {
        max-height: 2rem;
    }
    .checkout_header .header-main-wrapper .question a i {
        width: 36px;
        height: 36px;
    }
    .checkout_header .header-main-wrapper .cards img {
        max-width: min(40vw, 200px);
    }
    /* NOTE: the 2-column grid lock and the #button-wrapper (density toggle) hide
       moved DOWN to the max-width:575.98px block (near the grid definition above).
       From 576-1023px the grid keeps the 3-up default with a working toggle. */
    body.product_category .dropdown-limit {
        display: none !important;
    }
    body.product_category .mobile-filters-trigger {
        padding: 20px;
    }
    body.product_category .mobile-filters-trigger .ho-filter-title.ho-filter-trigger-container {
        height: auto;
    }
    body.product_category .top-pagination .btn-sorting span, body.product_category .top-pagination .btn-limiting span{
        font-size: 10px;
    }
    body.product_category .product-name {
        font-size: 10px;
    }
    body.product_category .product-string, body.product_category .product-label-string {
        font-size: 8px;
        margin-bottom: 2px;
    }
    body.product_category .product-block-caption {
        padding-top: 10px;
    }
    body.product_category .product-block-title {
        margin-bottom: 12px;
    }
    .product-colors ul li > span > div {
        width: 12px;
        height: 12px;
    }
    .product-block .product-block-price {
        margin-top: 12px;
        line-height: 1;
    }
    body.product_category .product-block-price .amount {
        font-size: 14px;
        font-weight: 400;
    }
    .footer-social a {
        width: 60px;
        height: 60px;
    }
    #filtersOffcanvas .offcanvas-header {
        padding: 1.5rem 1rem;
    }
    #filtersOffcanvas .filters-wrapper {
        padding: 0 1.5rem 5.5rem;
    }
    #filtersOffcanvas .filters-responsive-results, #filtersOffcanvas .btn.btn-primary.filters-responsive-results, #filtersOffcanvas .ho-filter-apply-button, #filtersOffcanvas #filter-results-button {
        font-size: 10px !important;
        font-weight: 400;
    }
    body.checkout_success #newsletter-module .agree-row {
        flex-direction: column;
    }
    body.checkout_success #newsletter-module .agree-row > div:first-child {
        text-align: center !important;
    }
    .success-continue-btn {
        margin: 40px auto 0;
    }
}

/* B2B ORDER MODAL (size/color quantity grid) - START */
/* Matches the #reminderModal design language: light #f6f6f8 surface,
   square corners, circular FontAwesome close button, black accents,
   small uppercase letter-spaced typography, invert-on-hover buttons. */
/* Fluid width up to 1140px, always horizontally centred, vertically
   centred via .modal-dialog-centered. id specificity beats Bootstrap's
   responsive .modal-xl max-width rules so this stays consistent. */
#b2bModal .modal-dialog {
    width: calc(100% - 2rem);
    max-width: 1140px;
    margin: 1.75rem auto;
}
#b2bModal .modal-content {
    background: #f6f6f8;
    border: 0;
    border-radius: 0;
    padding: 25px 25px 30px 25px;
    max-height: 100%;
}
/* Scrollable body: keep header/footer fixed, scroll the table area */
#b2bModal.modal .modal-body {
    overflow-y: auto;
}
#b2bModal .modal-header {
    border: 0;
    padding: 0;
    padding-bottom: 24px;
    align-items: center;
    gap: 1.5rem;
}
#b2bModal .modal-title,
#b2bModal h5#b2bModalLabel {
    font-size: .8125rem;
    font-weight: 400;
    color: #000;
    margin: 0;
    letter-spacing: .04rem;
    text-transform: uppercase;
    line-height: 1.5;
}
#b2bModal .btn-close {
    background: #fff;
    border: 0;
    padding: 0;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    opacity: 1;
    color: #000;
    cursor: pointer;
    position: relative;
    margin: 0 0 0 auto;
    border-radius: 100%;
    transition: .3s ease all;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#b2bModal .btn-close::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 1rem;
    color: #000;
    transition: .3s ease all;
}
#b2bModal .btn-close:hover {
    background-color: #000;
}
#b2bModal .btn-close:hover::before {
    color: #fff;
}

/* Body / table */
#b2bModal .modal-body {
    padding: 0;
}
#b2bModal .b2b__options__table .table-responsive {
    border: 1px solid #e3e3e6;
    background: #fff;
}
#b2bModal table {
    margin: 0;
    border-color: #e3e3e6;
}
#b2bModalContent table th {
    font-size: .625rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .04rem;
    color: #5a5a5a;
    text-align: center;
    padding: .75rem;
    vertical-align: middle;
    background: #f6f6f8;
    border-bottom: 1px solid #e3e3e6;
    white-space: nowrap;
}
#b2bModalContent table th.color-th {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 2;
}
#b2bModalContent table td {
    padding: .5rem .75rem;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    color: #000;
    font-size: .8125rem;
    border-color: #eee;
}
/* Zebra striping — alternate white / grey rows. Applied to every cell so the
   sticky color column keeps the same background as the rest of its row. */
#b2bModalContent tbody tr:nth-child(odd) td {
    background: #fff;
}
#b2bModalContent tbody tr:nth-child(even) td {
    background: #f6f6f8;
}
/* Color cell: swatch + name */
#b2bModalContent td.color-th-icon {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 1;
}
#b2bModalContent td.color-th-icon div {
    display: flex;
    height: 100%;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}
#b2bModalContent td.color-th-icon div i {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .25);
}
#b2bModalContent td.color-th-icon div span {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .02rem;
}
/* Quantity inputs */
#b2bModal table input[type="number"] {
    width: 3.25rem;
    height: 2.25rem;
    margin: 0 auto;
    padding: 0 .25rem;
    border: 1px solid #000;
    border-radius: .1875rem;
    background: #fff;
    color: #000;
    font-size: .8125rem;
    text-align: center;
    box-shadow: none;
    -moz-appearance: textfield;
}
#b2bModal table input[type="number"]::-webkit-outer-spin-button,
#b2bModal table input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#b2bModal table input[type="number"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .15);
}
#b2bModal table input[type="number"]:disabled {
    border-color: #d6d6d9;
    background: #f0f0f2;
    color: #b5b5b8;
    cursor: not-allowed;
}

/* Footer / buttons */
#b2bModal .modal-footer {
    border: 0;
    padding: 0;
    padding-top: 28px;
    justify-content: center;
    gap: 1rem;
}
#b2bModal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 11rem;
    height: 3rem;
    border-radius: .3125rem;
    font-size: .75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .04rem;
    padding: 0 1.5rem;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
#b2bModal .modal-footer .btn.btn-primary,
#b2bModal #submitB2BOrder {
    background: #f6f6f8;
    border: 1px solid #000;
    color: #000;
}
#b2bModal .modal-footer .btn.btn-primary:hover,
#b2bModal .modal-footer .btn.btn-primary:active,
#b2bModal .modal-footer .btn.btn-primary:focus,
#b2bModal #submitB2BOrder:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}
#b2bModal .modal-footer .btn.btn-secondary {
    background: transparent;
    border: 1px solid #c9c9ce;
    color: #5a5a5a;
}
#b2bModal .modal-footer .btn.btn-secondary:hover,
#b2bModal .modal-footer .btn.btn-secondary:active,
#b2bModal .modal-footer .btn.btn-secondary:focus {
    background: #e9e9ec;
    border-color: #c9c9ce;
    color: #000;
}

@media (max-width: 575.98px) {
    #b2bModal .modal-content {
        padding: 20px 16px 24px 16px;
        border-radius: 10px;
    }
    #b2bModal .modal-footer {
        flex-direction: column-reverse;
    }
    #b2bModal .modal-footer .btn {
        width: 100%;
        min-width: 0;
    }
}
/* B2B ORDER MODAL (size/color quantity grid) - END */

/* ============================================================
   LIVE SEARCH — results grid at all widths
   (compact mobile list retired 2026-07-16 - client wants the grid;
   base rule below keeps the unused compact <ul> markup hidden)
   ============================================================ */
#searchOffcanvas .search-products--compact { display: none; margin: 0; padding: 0; list-style: none; }


/* hide the floating CookieScript badge while the mobile search offcanvas is open */
@media (max-width: 821.8px) {
    body.search-offcanvas-open #cookiescript_badge { display: none !important; }
}