/**
 * Akira Child Theme - Custom Styles
 * 
 * Custom CSS overrides for Akira theme
 * Applied globally across all pages
 */

/* ========================================
   GLOBAL WRAPPER STYLING
   ======================================== */
#wrapper {
    padding-bottom: 40px;
}

/* Keep Akira's global header spacing for catalog/content pages, but remove the homepage gap before Axon content. */
body#index #header {
    margin-bottom: 0 !important;
}

/* Align Axon Header Test (ID 24) boxed sections with the wide content page grid. */
#header-normal .elementor-24 .elementor-section.elementor-section-boxed > .elementor-container,
#header-sticky .elementor-24 .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1600px !important;
}

#header-normal .elementor-24 .elementor-element-680c3db,
#header-sticky .elementor-24 .elementor-element-680c3db {
    padding-right: 15px !important;
    padding-left: 15px !important;
}

#header-normal .elementor-24 .elementor-element-680c3db > .elementor-container > .elementor-row,
#header-sticky .elementor-24 .elementor-element-680c3db > .elementor-container > .elementor-row {
    justify-content: space-between !important;
    width: 100% !important;
}

#header-normal .elementor-24 .elementor-element-239a3c0,
#header-sticky .elementor-24 .elementor-element-239a3c0 {
    flex: 1 1 auto !important;
    width: auto !important;
}

#header-normal .elementor-24 .elementor-element-3dc18ff,
#header-sticky .elementor-24 .elementor-element-3dc18ff {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
}

header.is-sticked #header-sticky {
    box-shadow: 0 10px 28px rgba(20, 24, 31, 0.14), 0 2px 8px rgba(20, 24, 31, 0.08) !important;
}

.aq-header-assistance-link .aq-header-assistance-icon {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    object-fit: contain !important;
}

#header-normal .elementor-element-2e0af06 .elementor-button-icon,
#header-normal .elementor-element-33b797f .elementor-button-icon,
#header-normal .elementor-element-182d95b .elementor-button-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
}

#header-normal .elementor-element-2e0af06 .elementor-button-icon i,
#header-normal .elementor-element-33b797f .elementor-button-icon i,
#header-normal .elementor-element-182d95b .elementor-button-icon i {
    display: none !important;
}

#header-normal .elementor-element-2e0af06 .elementor-button-icon::before,
#header-normal .elementor-element-33b797f .elementor-button-icon::before,
#header-normal .elementor-element-182d95b .elementor-button-icon::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    filter: brightness(0) invert(1) !important;
}

#header-normal .elementor-element-2e0af06 .elementor-button-icon::before {
    background-image: url("../img/building.png") !important;
}

#header-normal .elementor-element-33b797f .elementor-button-icon::before {
    background-image: url("../img/servicii.png") !important;
}

#header-normal .elementor-element-182d95b .elementor-button-icon::before {
    background-image: url("../img/showroom-icon.png") !important;
}

/* Background color only on category, search, and new products listing pages */
body.page-category #wrapper,
body.page-search #wrapper,
body#new-products #wrapper {
    background: #f5f5f5;
}

body#new-products #left-column {
    display: none !important;
}

body#new-products #content-wrapper.left-column,
body#new-products #content-wrapper.col-lg-9 {
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ========================================
   REGISTRATION PAGE
   ======================================== */
body#registration #wrapper {
    background: #FFFFFF !important;
    padding-bottom: 64px !important;
}

body#registration #header {
    margin-bottom: 0 !important;
}

body#registration #main {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding: 22px 15px 20px !important;
}

body#registration #content.page-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body#registration .aq-register-shell {
    display: grid !important;
    grid-template-columns: minmax(320px, 0.86fr) minmax(520px, 1.14fr) !important;
    gap: 32px !important;
    align-items: stretch !important;
}

body#registration .aq-register-intro,
body#registration .aq-register-card {
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(20, 24, 31, 0.10) !important;
}

body#registration .aq-register-intro {
    position: relative !important;
    overflow: hidden !important;
    min-height: 620px !important;
    padding: 42px !important;
    color: #FFFFFF !important;
    background:
        radial-gradient(520px 300px at 16% 8%, rgba(217, 8, 18, 0.28), transparent 62%),
        linear-gradient(145deg, #1F1F1F 0%, #303238 100%) !important;
}

body#registration .aq-register-intro::after {
    content: "" !important;
    position: absolute !important;
    right: -120px !important;
    bottom: -120px !important;
    width: 280px !important;
    height: 280px !important;
    border-radius: 999px !important;
    background: rgba(217, 8, 18, 0.35) !important;
    filter: blur(8px) !important;
}

body#registration .aq-register-eyebrow {
    display: inline-flex !important;
    margin-bottom: 22px !important;
    padding: 8px 12px !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body#registration .aq-register-intro h1 {
    max-width: 520px !important;
    margin: 0 0 18px !important;
    color: #FFFFFF !important;
    font-size: clamp(32px, 3vw, 48px) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
}

body#registration .aq-register-intro p {
    max-width: 510px !important;
    margin: 0 0 34px !important;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

body#registration .aq-register-benefits {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

body#registration .aq-register-benefits li {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 13px 14px !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body#registration .aq-register-benefit-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    color: #FFFFFF !important;
    border-radius: 999px !important;
    background: var(--aq-red, #D90812) !important;
}

body#registration .aq-register-benefit-icon i {
    color: inherit !important;
    font-size: 20px !important;
}

body#registration .aq-register-login-note {
    position: absolute !important;
    left: 42px !important;
    right: 42px !important;
    bottom: 38px !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-top: 22px !important;
    color: rgba(255, 255, 255, 0.74) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
}

body#registration .aq-register-login-note a {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
}

body#registration .aq-register-card {
    padding: 38px 42px 42px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(31, 31, 31, 0.08) !important;
}

body#registration .aq-register-card__head {
    margin-bottom: 28px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--aq-border, #E6E6E6) !important;
}

body#registration .aq-register-card__head span {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--aq-black, #1F1F1F) !important;
    font-size: 26px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

body#registration .aq-register-card__head p {
    margin: 0 !important;
    color: #6F6F6F !important;
    font-size: 14px !important;
}

body#registration #customer-form .form-group.row {
    display: block !important;
    margin: 0 0 16px !important;
}

body#registration #customer-form .form-control-label,
body#registration #customer-form .js-input-column,
body#registration #customer-form > div > .form-group.row > .form-control-comment {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

body#registration #customer-form .form-control-label {
    margin: 0 0 7px !important;
    color: var(--aq-black, #1F1F1F) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

body#registration #customer-form .form-control {
    width: 100% !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    color: var(--aq-black, #1F1F1F) !important;
    border: 1px solid #DADDE2 !important;
    border-radius: 10px !important;
    background: #FAFBFC !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

body#registration #customer-form .form-control:focus {
    border-color: var(--aq-red, #D90812) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(217, 8, 18, 0.10) !important;
}

body#registration #customer-form .input-group {
    display: flex !important;
    align-items: stretch !important;
    position: relative !important;
}

body#registration #customer-form .input-group .form-control {
    padding-right: 104px !important;
    border-radius: 10px !important;
}

body#registration #customer-form .input-group .btn {
    position: absolute !important;
    top: 50% !important;
    right: 22px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    color: var(--aq-red, #D90812) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
}

body#registration #customer-form .input-group .js-visible-password + .btn::before {
    font-size: 13px !important;
    font-weight: 400 !important;
    opacity: 0.78 !important;
}

body#registration #customer-form .form-control-comment {
    margin-top: 6px !important;
    color: #8A8A8A !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

body#registration #customer-form .wrapper-custom-checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    color: #4D535A !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

body#registration #customer-form .custom-radio-inline {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 18px !important;
}

body#registration #customer-form .custom-checkbox,
body#registration #customer-form .custom-radio {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
}

body#registration #customer-form .wrapper-custom-checkbox .text em {
    display: block !important;
    margin-top: 4px !important;
    color: #6F6F6F !important;
    font-size: 12px !important;
    font-style: normal !important;
    line-height: 1.55 !important;
}

body#registration #customer-form .form-footer {
    margin-top: 24px !important;
}

body#registration #customer-form .form-control-submit {
    width: 100% !important;
    min-height: 48px !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--aq-red, #D90812) !important;
    box-shadow: 0 14px 28px rgba(217, 8, 18, 0.22) !important;
}

body#registration #customer-form .form-control-submit:hover,
body#registration #customer-form .form-control-submit:focus {
    background: var(--aq-red-dark, #B8060F) !important;
}

@media (max-width: 991px) {
    body#registration #wrapper {
        padding-bottom: 44px !important;
    }

    body#registration #main {
        padding: 14px 10px 0 !important;
    }

    body#registration .aq-register-shell {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body#registration .aq-register-intro {
        min-height: 0 !important;
        padding: 26px 22px !important;
        border-radius: 18px !important;
    }

    body#registration .aq-register-intro h1 {
        font-size: 28px !important;
    }

    body#registration .aq-register-intro p {
        margin-bottom: 0 !important;
        font-size: 14px !important;
    }

    body#registration .aq-register-eyebrow {
        margin-bottom: 14px !important;
    }

    body#registration .aq-register-benefits {
        display: none !important;
    }

    body#registration .aq-register-login-note {
        position: static !important;
        margin-top: 22px !important;
    }

    body#registration .aq-register-card {
        padding: 24px 16px 26px !important;
        border-radius: 18px !important;
    }

    body#registration .aq-register-card__head span {
        font-size: 22px !important;
    }
}

/* ========================================
   LOGIN PAGE + ACCOUNT CANVAS
   ======================================== */
body#authentication #header {
    margin-bottom: 0 !important;
}

body#authentication #wrapper {
    background: #FFFFFF !important;
    padding-bottom: 72px !important;
}

body#authentication #main {
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 28px 15px 20px !important;
}

body#authentication #content.page-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body#authentication .aq-login-shell {
    display: grid !important;
    grid-template-columns: minmax(420px, 0.9fr) minmax(320px, 0.7fr) !important;
    gap: 28px !important;
    align-items: stretch !important;
    max-width: 940px !important;
    margin: 0 auto !important;
}

body#authentication .aq-login-card,
body#authentication .aq-login-support {
    border-radius: 20px !important;
    box-shadow: 0 22px 60px rgba(20, 24, 31, 0.10) !important;
}

body#authentication .aq-login-card {
    padding: 34px 38px 36px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(31, 31, 31, 0.08) !important;
}

body#authentication .aq-login-card__head {
    margin-bottom: 24px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid var(--aq-border, #E6E6E6) !important;
}

body#authentication .aq-login-card__head span {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--aq-black, #1F1F1F) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

body#authentication .aq-login-card__head p {
    margin: 0 !important;
    color: #6F6F6F !important;
    font-size: 14px !important;
}

body#authentication #login-form .form-group {
    margin-bottom: 16px !important;
}

body#authentication #login-form .form-control-label,
body#authentication #login-form label {
    margin-bottom: 7px !important;
    color: var(--aq-black, #1F1F1F) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

body#authentication #login-form .form-control {
    min-height: 46px !important;
    padding: 0 14px !important;
    color: var(--aq-black, #1F1F1F) !important;
    border: 1px solid #DADDE2 !important;
    border-radius: 10px !important;
    background: #FAFBFC !important;
    box-shadow: none !important;
}

body#authentication #login-form .form-control:focus {
    border-color: var(--aq-red, #D90812) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(217, 8, 18, 0.10) !important;
}

body#authentication #login-form .input-group {
    display: flex !important;
    align-items: stretch !important;
    position: relative !important;
}

body#authentication #login-form .input-group .form-control {
    padding-right: 104px !important;
    border-radius: 10px !important;
}

body#authentication #login-form .input-group .btn {
    position: absolute !important;
    top: 50% !important;
    right: 22px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    color: var(--aq-red, #D90812) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
}

body#authentication #login-form .input-group .js-visible-password + .btn::before {
    font-size: 13px !important;
    font-weight: 400 !important;
    opacity: 0.78 !important;
}

body#authentication #submit-login,
body#authentication #login-form .btn-primary {
    width: 100% !important;
    min-height: 48px !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--aq-red, #D90812) !important;
    box-shadow: 0 14px 28px rgba(217, 8, 18, 0.22) !important;
}

body#authentication #submit-login:hover,
body#authentication #submit-login:focus {
    background: var(--aq-red-dark, #B8060F) !important;
}

body#authentication #login-form .forgot-password {
    margin: 14px 0 0 !important;
    text-align: center !important;
}

body#authentication #login-form .forgot-password a,
body#authentication .aq-login-create a {
    color: var(--aq-red, #D90812) !important;
    font-weight: 700 !important;
}

body#authentication .aq-login-create {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 24px -38px -36px !important;
    padding: 18px 20px !important;
    color: #7A7A7A !important;
    background: #F7F8FA !important;
    border-top: 1px solid var(--aq-border, #E6E6E6) !important;
}

body#authentication .aq-login-support {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: 420px !important;
    padding: 34px !important;
    color: #FFFFFF !important;
    background:
        radial-gradient(420px 260px at 18% 8%, rgba(217, 8, 18, 0.30), transparent 62%),
        linear-gradient(145deg, #1F1F1F 0%, #303238 100%) !important;
}

body#authentication .aq-login-support span {
    margin-bottom: 12px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

body#authentication .aq-login-support h2 {
    margin: 0 0 12px !important;
    color: #FFFFFF !important;
    font-size: 30px !important;
    line-height: 1.14 !important;
    font-weight: 800 !important;
}

body#authentication .aq-login-support p {
    margin: 0 0 22px !important;
    color: rgba(255, 255, 255, 0.76) !important;
    line-height: 1.65 !important;
}

body#authentication .aq-login-support a {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    background: var(--aq-red, #D90812) !important;
}

#canvas-my-account .canvas-widget-top {
    min-height: 64px !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--aq-border, #E6E6E6) !important;
    box-shadow: none !important;
}

#canvas-my-account .title-canvas-widget {
    display: flex !important;
    align-items: center !important;
    min-height: 64px !important;
    padding: 0 56px 0 20px !important;
    color: var(--aq-red, #D90812) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

#canvas-my-account .title-canvas-widget::after {
    right: 18px !important;
    top: 50% !important;
    color: var(--aq-red, #D90812) !important;
    font-size: 22px !important;
    transform: translateY(-50%) !important;
}

#canvas-my-account .canvas-widget-content,
#canvas-my-account .wrapper-scroll,
#canvas-my-account .wrapper-scroll-content {
    background: #F6F7F8 !important;
}

#canvas-my-account .canvas-my-account-wrapper {
    width: auto !important;
    padding: 18px 16px 28px !important;
    color: var(--aq-black, #1F1F1F) !important;
}

#canvas-my-account form {
    padding: 0 !important;
}

#canvas-my-account form .form-group {
    margin-bottom: 16px !important;
}

#canvas-my-account form label {
    margin-bottom: 7px !important;
    color: var(--aq-black, #1F1F1F) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#canvas-my-account form .form-control {
    min-height: 44px !important;
    padding: 0 12px !important;
    color: var(--aq-black, #1F1F1F) !important;
    border: 1px solid #DADDE2 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

#canvas-my-account form .input-group {
    display: flex !important;
    align-items: stretch !important;
    position: relative !important;
}

#canvas-my-account form .input-group .form-control {
    padding-right: 92px !important;
    border-radius: 10px !important;
}

#canvas-my-account form .input-group button {
    position: absolute !important;
    top: 50% !important;
    right: 22px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    color: var(--aq-red, #D90812) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-50%) !important;
}

#canvas-my-account form .input-group .js-visible-password + button::before {
    font-size: 13px !important;
    font-weight: 400 !important;
    opacity: 0.78 !important;
}

#canvas-my-account form .btn-primary {
    width: 100% !important;
    min-height: 46px !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--aq-red, #D90812) !important;
}

#canvas-my-account .forgot-password {
    margin: 12px 0 0 !important;
    text-align: center !important;
}

#canvas-my-account .forgot-password a,
#canvas-my-account .no-account a {
    color: var(--aq-red, #D90812) !important;
    font-weight: 700 !important;
}

#canvas-my-account .no-account {
    margin: 18px -16px 16px !important;
    padding: 16px !important;
    text-align: center !important;
    color: #7A7A7A !important;
    background: #FFFFFF !important;
    border-top: 1px solid var(--aq-border, #E6E6E6) !important;
    border-bottom: 1px solid var(--aq-border, #E6E6E6) !important;
}

#canvas-my-account .sb-account-info {
    display: block !important;
    margin: 0 0 14px !important;
    padding: 22px 18px 18px !important;
    text-align: center !important;
    background: #FFFFFF !important;
    border: 1px solid var(--aq-border, #E6E6E6) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(20, 24, 31, 0.06) !important;
}

#canvas-my-account .sb-account-info p {
    margin: 0 !important;
}

#canvas-my-account .sb-account-info p:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}

#canvas-my-account .sb-account-info p:first-child a:first-child {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 74px !important;
    height: 74px !important;
    color: var(--aq-red, #D90812) !important;
    background: var(--aq-red-soft, #FFF1F2) !important;
    border: 1px solid rgba(217, 8, 18, 0.18) !important;
    border-radius: 999px !important;
}

#canvas-my-account .sb-account-info p:first-child a:first-child i {
    margin: 0 !important;
    color: var(--aq-red, #D90812) !important;
    font-size: 54px !important;
    line-height: 1 !important;
}

#canvas-my-account .sb-account-info p:first-child a:last-child {
    color: var(--aq-black, #1F1F1F) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-transform: uppercase !important;
}

#canvas-my-account .sb-account-info p:last-child {
    margin-top: 10px !important;
}

#canvas-my-account .sb-account-info p:last-child a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    color: var(--aq-gray, #6F6F6F) !important;
    font-size: 14px !important;
    border: 1px solid var(--aq-border, #E6E6E6) !important;
    border-radius: 999px !important;
    background: #FFFFFF !important;
}

#canvas-my-account .alert,
#canvas-my-account [class*="discount"],
#canvas-my-account .wbf-account-discount-notice {
    border-radius: 10px !important;
}

#canvas-my-account .sb-item {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    margin: 0 0 8px !important;
    padding: 0 14px !important;
    color: var(--aq-black, #1F1F1F) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--aq-border, #E6E6E6) !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

#canvas-my-account .sb-item:hover,
#canvas-my-account .sb-item:focus {
    color: var(--aq-red, #D90812) !important;
    border-color: rgba(217, 8, 18, 0.24) !important;
    background: var(--aq-red-soft, #FFF1F2) !important;
}

#canvas-my-account .sb-item i {
    flex: 0 0 22px !important;
    width: 22px !important;
    margin-right: 12px !important;
    color: var(--aq-red, #D90812) !important;
    font-size: 19px !important;
    text-align: center !important;
}

#canvas-my-account .sb-item span {
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

@media (max-width: 991px) {
    body#authentication #wrapper {
        padding-bottom: 44px !important;
    }

    body#authentication #main {
        padding: 14px 10px 0 !important;
    }

    body#authentication .aq-login-shell {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body#authentication .aq-login-card {
        padding: 24px 16px 26px !important;
        border-radius: 18px !important;
    }

    body#authentication .aq-login-card__head span {
        font-size: 22px !important;
    }

    body#authentication .aq-login-create {
        margin: 22px -16px -26px !important;
        flex-wrap: wrap !important;
    }

    body#authentication .aq-login-support {
        min-height: 0 !important;
        padding: 24px 22px !important;
        border-radius: 18px !important;
    }

    body#authentication .aq-login-support h2 {
        font-size: 24px !important;
    }
}

/* ========================================
   PASSWORD RECOVERY PAGE
   ======================================== */
body#password #header {
    margin-bottom: 0 !important;
}

body#password #wrapper {
    background: #FFFFFF !important;
    padding-bottom: 72px !important;
}

body#password #main {
    max-width: 1120px !important;
    margin: 0 auto !important;
    padding: 28px 15px 20px !important;
}

body#password #content.page-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body#password .aq-password-shell {
    display: grid !important;
    grid-template-columns: minmax(420px, 0.9fr) minmax(320px, 0.7fr) !important;
    gap: 28px !important;
    align-items: stretch !important;
    max-width: 940px !important;
    margin: 0 auto !important;
}

body#password .aq-password-card,
body#password .aq-password-support {
    border-radius: 20px !important;
    box-shadow: 0 22px 60px rgba(20, 24, 31, 0.10) !important;
}

body#password .aq-password-card {
    padding: 34px 38px 36px !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(31, 31, 31, 0.08) !important;
}

body#password .aq-password-card__head {
    margin-bottom: 24px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid var(--aq-border, #E6E6E6) !important;
}

body#password .aq-password-card__head span {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--aq-black, #1F1F1F) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

body#password .aq-password-card__head p {
    margin: 0 !important;
    color: #6F6F6F !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

body#password .aq-password-form,
body#password .aq-password-form .form-fields,
body#password .aq-password-form .form-group {
    margin: 0 !important;
}

body#password .aq-password-form .form-group {
    display: block !important;
}

body#password .aq-password-form .form-control-label {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
    color: var(--aq-black, #1F1F1F) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

body#password .aq-password-form .email,
body#password .aq-password-form .form-control {
    width: 100% !important;
    max-width: none !important;
}

body#password .aq-password-form .form-control {
    min-height: 46px !important;
    padding: 0 14px !important;
    color: var(--aq-black, #1F1F1F) !important;
    border: 1px solid #DADDE2 !important;
    border-radius: 10px !important;
    background: #FAFBFC !important;
    box-shadow: none !important;
}

body#password .aq-password-form .form-control:focus {
    border-color: var(--aq-red, #D90812) !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(217, 8, 18, 0.10) !important;
}

body#password #send-reset-link {
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 18px !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--aq-red, #D90812) !important;
    box-shadow: 0 14px 28px rgba(217, 8, 18, 0.22) !important;
}

body#password #send-reset-link:hover,
body#password #send-reset-link:focus {
    background: var(--aq-red-dark, #B8060F) !important;
}

body#password .aq-password-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 18px !important;
    color: var(--aq-black, #1F1F1F) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border: 1px solid var(--aq-border, #E6E6E6) !important;
    border-radius: 10px !important;
    background: #F7F8FA !important;
}

body#password .aq-password-back:hover,
body#password .aq-password-back:focus {
    color: var(--aq-red, #D90812) !important;
    border-color: rgba(217, 8, 18, 0.24) !important;
    background: var(--aq-red-soft, #FFF1F2) !important;
}

body#password .aq-password-support {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: 420px !important;
    padding: 34px !important;
    color: #FFFFFF !important;
    background:
        radial-gradient(420px 260px at 18% 8%, rgba(217, 8, 18, 0.30), transparent 62%),
        linear-gradient(145deg, #1F1F1F 0%, #303238 100%) !important;
}

body#password .aq-password-support span {
    margin-bottom: 12px !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

body#password .aq-password-support h2 {
    margin: 0 0 12px !important;
    color: #FFFFFF !important;
    font-size: 30px !important;
    line-height: 1.14 !important;
    font-weight: 800 !important;
}

body#password .aq-password-support p {
    margin: 0 0 22px !important;
    color: rgba(255, 255, 255, 0.76) !important;
    line-height: 1.65 !important;
}

body#password .aq-password-support a {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    background: var(--aq-red, #D90812) !important;
}

body#password .aq-password-success {
    margin: 0 !important;
}

body#password .aq-password-success .item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    color: var(--aq-black, #1F1F1F) !important;
    border: 1px solid rgba(33, 150, 83, 0.18) !important;
    border-radius: 12px !important;
    background: rgba(33, 150, 83, 0.08) !important;
}

body#password .aq-password-success .item i {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
}

body#password .aq-password-success .item p {
    margin: 0 !important;
}

@media (max-width: 991px) {
    body#password #wrapper {
        padding-bottom: 44px !important;
    }

    body#password #main {
        padding: 14px 10px 0 !important;
    }

    body#password .aq-password-shell {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body#password .aq-password-card {
        padding: 24px 16px 26px !important;
        border-radius: 18px !important;
    }

    body#password .aq-password-card__head span {
        font-size: 22px !important;
    }

    body#password .aq-password-support {
        min-height: 0 !important;
        padding: 24px 22px !important;
        border-radius: 18px !important;
    }

    body#password .aq-password-support h2 {
        font-size: 24px !important;
    }
}

/* ========================================
   MANUFACTURER LIST + BRAND DETAIL
   ======================================== */
/* Hide the page-title block on /marci and on every /brand/<id>-<slug> page. */
body#manufacturer .page-title {
    display: none !important;
}

/* Brand detail page only: hide the left column and stretch content to full width. */
body#manufacturer[class*="manufacturer-id-"] #left-column {
    display: none !important;
}

body#manufacturer[class*="manufacturer-id-"] #content-wrapper.left-column,
body#manufacturer[class*="manufacturer-id-"] #content-wrapper.col-lg-9 {
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ========================================
   CONTACT PAGE
   ======================================== */
body#contact #wrapper {
    background: #f6f7f4;
    padding-bottom: 70px;
}

body#contact #header {
    margin-bottom: 0 !important;
}

body#contact .wbf-contact-page {
    padding: 18px 0 20px;
}

body#contact .wbf-contact-hero {
    max-width: 760px;
    margin-bottom: 22px;
}

body#contact .wbf-contact-hero h1 {
    margin: 0 0 12px;
    color: #1f2a24;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.18;
    text-transform: none;
}

body#contact .wbf-contact-hero p {
    margin: 0;
    color: #5a635e;
    font-size: 16px;
    line-height: 1.7;
}

body#contact .wbf-contact-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.42fr) minmax(0, 0.58fr);
    gap: 28px;
    align-items: start;
}

body#contact .wbf-contact-info-panel,
body#contact .wbf-contact-form-panel {
    background: #fff;
    border: 1px solid rgba(31, 42, 36, 0.08);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(31, 42, 36, 0.08);
}

body#contact .wbf-contact-info-panel {
    padding: 34px;
}

body#contact .wbf-contact-form-panel {
    padding: 34px 38px;
}

body#contact .contact-rich h3,
body#contact .contact-form h3 {
    margin: 0 0 18px;
    color: #1f2a24;
    font-size: 22px;
    font-weight: 700;
    text-transform: none;
}

body#contact .contact-rich .info-contact {
    margin-bottom: 24px;
    color: #66706b;
    line-height: 1.65;
}

body#contact .contact-rich .block {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 0;
    border-top: 1px solid rgba(31, 42, 36, 0.08);
}

body#contact .contact-rich .block:first-of-type {
    border-top: 0;
}

body#contact .contact-rich .icon {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eef3eb;
    color: #536b45;
    font-size: 20px;
}

body#contact .contact-rich .data,
body#contact .contact-rich .data a {
    color: #2e3631;
    font-size: 15px;
    line-height: 1.55;
}

body#contact .contact-rich .aq-contact-phones .wbf-randomphones-block {
    display: block;
    padding: 0;
    border-top: 0;
}

body#contact .contact-rich .aq-contact-phones .wbf-randomphones-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

body#contact .contact-rich .aq-contact-phones .wbf-randomphones-item {
    margin: 0;
}

body#contact .contact-rich .aq-contact-phones .wbf-randomphones-link {
    display: inline-flex;
    gap: 4px;
    text-decoration: none;
}

body#contact .contact-rich .aq-contact-phones .wbf-randomphones-label {
    font-weight: 600;
}

body#contact .contact-form .form-group.row {
    margin-right: 0;
    margin-left: 0;
}

body#contact .contact-form .form-control-label {
    padding-right: 0;
    padding-left: 0;
    color: #3d4741;
    font-weight: 600;
}

body#contact .contact-form .form-control,
body#contact .contact-form .form-control-select,
body#contact .contact-form textarea {
    min-height: 46px;
    border-color: rgba(31, 42, 36, 0.16);
    border-radius: 6px;
    background-color: #fbfcfb;
}

body#contact .contact-form textarea {
    min-height: 140px;
}

body#contact .contact-form .form-footer {
    display: flex;
    justify-content: flex-end;
}

body#contact .contact-form .btn-primary {
    min-width: 170px;
    border-radius: 6px;
    box-shadow: 0 10px 22px rgba(70, 94, 55, 0.2);
}

@media (max-width: 991px) {
    body#contact .wbf-contact-page {
        padding-top: 14px;
    }

    body#contact .wbf-contact-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    body#contact .wbf-contact-info-panel,
    body#contact .wbf-contact-form-panel {
        padding: 24px 20px;
    }

    body#contact .wbf-contact-hero h1 {
        font-size: 28px;
    }
}

/* ========================================
   HIDE BREADCRUMB ON MOBILE
   ======================================== */
@media (max-width: 991px) {
    .axps-breadcrumb {
        display: none !important;
    }
}

/* ========================================
   RESPONSIVE UTILITY CLASSES FIX
   Fix for .hidden-lg-up not working on desktop
   ======================================== */
@media (min-width: 992px) {
    .hidden-lg-up {
        display: none !important;
    }
}

/* ========================================
   PRODUCT PRICE STYLING - Main Product Page
   Match ProductCCA module styling
   ======================================== */

/* Current price container with flexbox for inline elements */
.product-prices .current-price {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 10px !important;
}

/* Main price - 1.8rem matching theme standards */
.product-prices .current-price-value {
  font-size: 1.8rem !important;
  line-height: 1.2 !important;
}

/* Unit price - 1.2rem with #333 color */
.product-prices .product-unit-price {
  font-size: 1.2rem !important;
  color: #333 !important;
  margin-bottom: 0 !important;
}

/* VAT label (Cu TVA / Fara TVA) - inline with unit price styling */
.product-prices .tax-shipping-delivery-label {
  font-size: 1.2rem !important;
  color: #333 !important;
  font-weight: normal !important;
  white-space: nowrap !important;
}

body#product .summary-container .product-brands a,
body#product .summary-container .product-brands a:hover {
    border: none !important;
    box-shadow: none !important;
}

body#product .summary-container .product-brands img {
    border: none !important;
    max-width: 76px !important;
}

@media (min-width: 768px) {
    body#product .summary-container:not(.wbf-sticky-summary) {
        position: relative !important;
    }

    body#product .summary-container .product-brands {
        float: none !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 2 !important;
        margin: 0 !important;
    }

    body#product .summary-container .product-brands a {
        min-height: 0 !important;
        padding: 0 !important;
    }

    body#product .summary-container .product_title,
    body#product .summary-container .product-short-description {
        padding-right: 90px !important;
    }
}

/* Regular price (strikethrough) */
.product-prices .regular-price {
  font-size: 1.6rem !important;
  color: #999 !important;
  text-decoration: line-through !important;
}

/* Product discount badge */
.product-prices .product-discount {
  font-size: 1.4rem !important;
  color: var(--color-price, #dc3545) !important;
  font-weight: 600 !important;
}

/* Ensure proper spacing for all price elements */
.product-prices .product-price {
  margin-bottom: 20px !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* Tablet and smaller - reduce font sizes slightly */
@media (max-width: 991px) {
  .product-prices .current-price-value {
    font-size: 2rem !important;
  }
  
  .product-prices .product-unit-price,
  .product-prices .tax-shipping-delivery-label {
    font-size: 1.1rem !important;
  }
}

/* Mobile - further reduction */
@media (max-width: 575px) {
  .product-prices .current-price-value {
    font-size: 1.8rem !important;
  }
  
  .product-prices .product-unit-price,
  .product-prices .tax-shipping-delivery-label {
    font-size: 1rem !important;
  }
  
  .product-prices .current-price {
    gap: 8px !important;
  }
}

/* ========================================
   PRODUCT TITLE & IMAGE OVERRIDES
   ======================================== */

/* Product title - smaller font size */
.summary-container .product_title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
}

/* Lazy load images - white background instead of gray */
.ax-lazy-load:not([style]) {
    background-color: #ffffff !important;
}

/* ========================================
   LAYOUT ADJUSTMENTS
   Reduce right column width for more content space
   ======================================== */

@media (min-width: 1025px) {
    #content-wrapper.col-lg-9 {
        -ms-flex: 0 0 calc(100% - 300px) !important;
        flex: 0 0 calc(100% - 300px) !important;
        max-width: calc(100% - 300px) !important;
    }
    #left-column.col-lg-3, #right-column.col-lg-3 {
        -ms-flex: 0 0 300px !important;
        flex: 0 0 300px !important;
        max-width: 300px !important;
    }
}

/* ========================================
   PRODUCT TABS POSITIONING
   Tabs moved under thumbnails - adjust alignment
   ======================================== */

/* Tabs container inside product-images-thumb */
.product-images-thumb .container.container-parent,
.single-product-images .container.container-parent.product-tabs-desktop {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    background: #FFF !important;
    border: 1px solid var(--aq-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07) !important;
}

/* Adjust tabs wrapper alignment */
.product-images-thumb #wrapper-tab-product,
.single-product-images #wrapper-tab-product {
    margin-top: 5px !important;
}

.wc-tabs-wrapper .accordion-title.active_accordion {
    color: #000 !important;
  }

/* ========================================
   PRODUCT TABS - DESKTOP: OPEN BY DEFAULT, CLOSABLE
   MOBILE: CLOSED BY DEFAULT, AT BOTTOM, OPENABLE
   NOTE: Visibility controlled by .child-tab-open/.child-tab-closed classes via JS
   ======================================== */

/* Mobile: Tabs at bottom of product container */
@media (max-width: 991px) {
    /* Hide tabs in original desktop position */
    .single-product-images .product-tabs-desktop {
        display: none !important;
    }
    
    /* Mobile tabs container - show at bottom */
    .product-tabs-mobile {
        display: block !important;
        width: 100%;
        padding: 0 15px;
        margin-top: 30px;
    }
}

/* ========================================
   WBF OTHER CURRENCIES - SPACING
   Add space between currency prices and product description
   ======================================== */

.wbf-oc-prices-with-units,
.wbf-oc-complete-prices,
.wbf-oc-prices {
    margin-bottom: 20px !important;
}

/* Hide multi-currency unit prices on brand/manufacturer listing page */
body#manufacturer .wbf-oc-prices-with-units,
body#new-products .wbf-oc-prices-with-units {
    display: none !important;
}

/* ========================================
   SAFEGUARD: FORCE PRODUCTS VISIBLE
   Products should ALWAYS be visible unless explicitly disabled
   ======================================== */

:root[data-wbfccd="1"] #products,
:root[data-wbfccd="1"] .products,
:root[data-wbfccd="1"] #js-product-list,
:root[data-wbfccd="1"] .product-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

:root[data-wbfccd="1"] .product-type-1 .item-inner .element-bottom {
    min-height: 50px !important;
}

/* ========================================
   DYNAMIC SUBCATEGORY LAYOUT
   Automatically adjust subcategory widths based on count
   Controlled by wbf_customcategorydisplay module
   Override Bootstrap grid with flexbox
   ======================================== */

/* Override Bootstrap row to use flexbox ONLY for subcategories */
:root[data-wbfccd="1"] .product-list-subcategories .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

:root[data-wbfccd="1"] .product-list-subcategories {
    margin-bottom: 12px !important;
}

:root[data-wbfccd="1"] .product-list-subcategories .wrapp-category {
    margin-bottom: 0 !important;
}

/* Override Bootstrap col-* classes - remove default widths and padding */
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* 1 item = 100% width */
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"]:first-child:nth-last-child(1) {
    flex-basis: 100% !important;
    max-width: 100% !important;
}

/* 2 items = 50% each */
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"]:first-child:nth-last-child(2),
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"]:first-child:nth-last-child(2) ~ [class*="col-"] {
    flex-basis: calc(50% - 7.5px) !important;
    max-width: calc(50% - 7.5px) !important;
}

/* 3 items = 33.33% each */
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"]:first-child:nth-last-child(3),
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"]:first-child:nth-last-child(3) ~ [class*="col-"] {
    flex-basis: calc(33.333% - 10px) !important;
    max-width: calc(33.333% - 10px) !important;
}

/* 4 items = 25% each */
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"]:first-child:nth-last-child(4),
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"]:first-child:nth-last-child(4) ~ [class*="col-"] {
    flex-basis: calc(25% - 11.25px) !important;
    max-width: calc(25% - 11.25px) !important;
}

/* 5 items = 20% each */
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"]:first-child:nth-last-child(5),
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"]:first-child:nth-last-child(5) ~ [class*="col-"] {
    flex-basis: calc(20% - 12px) !important;
    max-width: calc(20% - 12px) !important;
}

/* 6 items = 16.66% each */
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"]:first-child:nth-last-child(6),
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"]:first-child:nth-last-child(6) ~ [class*="col-"] {
    flex-basis: calc(16.666% - 12.5px) !important;
    max-width: calc(16.666% - 12.5px) !important;
}

/* 7+ items = default to 4 per row (25%) */
:root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"] {
    flex-basis: calc(25% - 11.25px) !important;
    max-width: calc(25% - 11.25px) !important;
}

/* Tablet: 2 per row */
@media (max-width: 991px) {
    :root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"] {
        flex-basis: calc(50% - 7.5px) !important;
        max-width: calc(50% - 7.5px) !important;
    }
}

/* Mobile: 1 per row */
@media (max-width: 575px) {
    :root[data-wbfccd="1"] .product-list-subcategories .row > [class*="col-"] {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    
    :root[data-wbfccd="1"] .product-list-subcategories .row {
        gap: 10px !important;
    }
}

/* ========================================
   DYNAMIC PRODUCT IMAGE LAYOUT
   WBF Custom Category Display Module
   DESKTOP ONLY - On mobile, swiper should work for 2+ images
   ======================================== */

/* DESKTOP ONLY: Override swiper for horizontal row layout (1-4 images) */
@media (min-width: 576px) {
    :root[data-wbfccd="1"] .img-count-1.swiper-container,
    :root[data-wbfccd="1"] .img-count-2.swiper-container,
    :root[data-wbfccd="1"] .img-count-3.swiper-container,
    :root[data-wbfccd="1"] .img-count-4.swiper-container,
    :root[data-wbfccd="1"] .js-images-cover.img-count-1,
    :root[data-wbfccd="1"] .js-images-cover.img-count-2,
    :root[data-wbfccd="1"] .js-images-cover.img-count-3,
    :root[data-wbfccd="1"] .js-images-cover.img-count-4 {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        overflow: visible !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Static row layout for 1-4 images - DESKTOP ONLY (disable swiper on desktop) */
/* On mobile (< 576px), swiper should work normally for 2+ images */
@media (min-width: 576px) {
    :root[data-wbfccd="1"] .img-count-1 .swiper-wrapper,
    :root[data-wbfccd="1"] .img-count-2 .swiper-wrapper,
    :root[data-wbfccd="1"] .img-count-3 .swiper-wrapper,
    :root[data-wbfccd="1"] .img-count-4 .swiper-wrapper,
    :root[data-wbfccd="1"] .js-images-cover.img-count-1 .swiper-wrapper,
    :root[data-wbfccd="1"] .js-images-cover.img-count-2 .swiper-wrapper,
    :root[data-wbfccd="1"] .js-images-cover.img-count-3 .swiper-wrapper,
    :root[data-wbfccd="1"] .js-images-cover.img-count-4 .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        transform: none !important;
        transition: none !important;
        width: 100% !important;
        height: auto !important;
        position: static !important;
    }
}

/* For 5+ images - completely restore default swiper behavior */

/* Constrain image size for 5+ images in carousel */
:root[data-wbfccd="1"] .img-count-5 .swiper-slide img,
:root[data-wbfccd="1"] .img-count-6 .swiper-slide img,
:root[data-wbfccd="1"] .img-count-7 .swiper-slide img,
:root[data-wbfccd="1"] .img-count-8 .swiper-slide img,
:root[data-wbfccd="1"] .img-count-9 .swiper-slide img,
:root[data-wbfccd="1"] .img-count-10 .swiper-slide img,
:root[data-wbfccd="1"] .js-images-cover.img-count-5 .swiper-slide img,
:root[data-wbfccd="1"] .js-images-cover.img-count-6 .swiper-slide img,
:root[data-wbfccd="1"] .js-images-cover.img-count-7 .swiper-slide img,
:root[data-wbfccd="1"] .js-images-cover.img-count-8 .swiper-slide img,
:root[data-wbfccd="1"] .js-images-cover.img-count-9 .swiper-slide img,
:root[data-wbfccd="1"] .js-images-cover.img-count-10 .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    max-height: 600px !important;
    object-fit: contain !important;
    object-position: center center !important;
}

:root[data-wbfccd="1"] .img-count-5 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .img-count-6 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .img-count-7 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .img-count-8 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .img-count-9 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .img-count-10 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .js-images-cover.img-count-5 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .js-images-cover.img-count-6 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .js-images-cover.img-count-7 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .js-images-cover.img-count-8 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .js-images-cover.img-count-9 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .js-images-cover.img-count-10 .swiper-slide .wrapper-imgs {
    max-height: 600px !important;
    height: auto !important;
}

/* DESKTOP ONLY: Swiper-slide static positioning for 1-4 images */
@media (min-width: 576px) {
    :root[data-wbfccd="1"] .img-count-1 .swiper-slide,
    :root[data-wbfccd="1"] .img-count-2 .swiper-slide,
    :root[data-wbfccd="1"] .img-count-3 .swiper-slide,
    :root[data-wbfccd="1"] .img-count-4 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-1 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-2 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-3 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-4 .swiper-slide {
        flex-shrink: 0 !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        position: static !important;
        transition: none !important;
    }
}

/* DESKTOP ONLY: Hide swiper navigation for 1-4 images */
/* On mobile, navigation should be visible for 2+ images */
@media (min-width: 576px) {
    :root[data-wbfccd="1"] .img-count-1 .swiper-arrows,
    :root[data-wbfccd="1"] .img-count-1 .swiper-dots,
    :root[data-wbfccd="1"] .img-count-1 .gallery-swiper-arrow,
    :root[data-wbfccd="1"] .img-count-1 .gallery-swiper-pagination,
    :root[data-wbfccd="1"] .img-count-2 .swiper-arrows,
    :root[data-wbfccd="1"] .img-count-2 .swiper-dots,
    :root[data-wbfccd="1"] .img-count-2 .gallery-swiper-arrow,
    :root[data-wbfccd="1"] .img-count-2 .gallery-swiper-pagination,
    :root[data-wbfccd="1"] .img-count-3 .swiper-arrows,
    :root[data-wbfccd="1"] .img-count-3 .swiper-dots,
    :root[data-wbfccd="1"] .img-count-3 .gallery-swiper-arrow,
    :root[data-wbfccd="1"] .img-count-3 .gallery-swiper-pagination,
    :root[data-wbfccd="1"] .img-count-4 .swiper-arrows,
    :root[data-wbfccd="1"] .img-count-4 .swiper-dots,
    :root[data-wbfccd="1"] .img-count-4 .gallery-swiper-arrow,
    :root[data-wbfccd="1"] .img-count-4 .gallery-swiper-pagination {
        display: none !important;
    }
}

/* MOBILE: Hide arrows only for single image */
@media (max-width: 575px) {
    :root[data-wbfccd="1"] .img-count-1 .swiper-arrows,
    :root[data-wbfccd="1"] .img-count-1 .swiper-dots,
    :root[data-wbfccd="1"] .img-count-1 .gallery-swiper-arrow,
    :root[data-wbfccd="1"] .img-count-1 .gallery-swiper-pagination {
        display: none !important;
    }
}

/* DESKTOP ONLY: Dynamic width based on image count */
/* Formula: For N images in a row with gap G between them:
   width = (100% - (N-1) * G) / N
   On mobile, all slides should be 100% width for swiper carousel */
@media (min-width: 576px) {
    /* 1 image = 100% width */
    :root[data-wbfccd="1"] .img-count-1 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-1 .swiper-slide {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 2 images = 50% each (gap handled by flex) */
    :root[data-wbfccd="1"] .img-count-2 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-2 .swiper-slide {
        flex: 0 0 calc((100% - 10px) / 2) !important;
        max-width: calc((100% - 10px) / 2) !important;
    }

    /* 3 images = 33.33% each */
    :root[data-wbfccd="1"] .img-count-3 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-3 .swiper-slide {
        flex: 0 0 calc((100% - 20px) / 3) !important;
        max-width: calc((100% - 20px) / 3) !important;
    }

    /* 4 images = 25% each */
    :root[data-wbfccd="1"] .img-count-4 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-4 .swiper-slide {
        flex: 0 0 calc((100% - 30px) / 4) !important;
        max-width: calc((100% - 30px) / 4) !important;
    }
}

/* Responsive: 2 per row on tablets (only for 1-4 images) */
@media (max-width: 991px) {
    :root[data-wbfccd="1"] .img-count-1 .swiper-slide,
    :root[data-wbfccd="1"] .img-count-2 .swiper-slide,
    :root[data-wbfccd="1"] .img-count-3 .swiper-slide,
    :root[data-wbfccd="1"] .img-count-4 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-1 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-2 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-3 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-4 .swiper-slide {
        flex: 0 0 calc((100% - 10px) / 2) !important;
        max-width: calc((100% - 10px) / 2) !important;
    }
}

/* Responsive: Enable carousel on mobile for 2+ images */
@media (max-width: 575px) {
    /* For 2-4 images on mobile, FULLY restore swiper behavior */
    :root[data-wbfccd="1"] .img-count-2.swiper-container,
    :root[data-wbfccd="1"] .img-count-3.swiper-container,
    :root[data-wbfccd="1"] .img-count-4.swiper-container,
    :root[data-wbfccd="1"] .js-images-cover.img-count-2,
    :root[data-wbfccd="1"] .js-images-cover.img-count-3,
    :root[data-wbfccd="1"] .js-images-cover.img-count-4 {
        display: block !important;
        overflow: hidden !important;
    }
    
    /* CRITICAL: Remove forced transform/position to let Swiper JS control navigation */
    :root[data-wbfccd="1"] .img-count-2 .swiper-wrapper,
    :root[data-wbfccd="1"] .img-count-3 .swiper-wrapper,
    :root[data-wbfccd="1"] .img-count-4 .swiper-wrapper,
    :root[data-wbfccd="1"] .js-images-cover.img-count-2 .swiper-wrapper,
    :root[data-wbfccd="1"] .js-images-cover.img-count-3 .swiper-wrapper,
    :root[data-wbfccd="1"] .js-images-cover.img-count-4 .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* DO NOT force transform - let Swiper JS handle it */
        transform: unset;
        transition: unset;
        position: relative !important;
        gap: 0 !important;
    }
    
    :root[data-wbfccd="1"] .img-count-2 .swiper-slide,
    :root[data-wbfccd="1"] .img-count-3 .swiper-slide,
    :root[data-wbfccd="1"] .img-count-4 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-2 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-3 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-4 .swiper-slide {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        flex-shrink: 0 !important;
        position: relative !important;
        margin: 0 !important;
    }
    
    /* Show navigation arrows on mobile for 2+ images */
    :root[data-wbfccd="1"] .img-count-2 .swiper-arrows,
    :root[data-wbfccd="1"] .img-count-2 .gallery-swiper-arrow,
    :root[data-wbfccd="1"] .img-count-3 .swiper-arrows,
    :root[data-wbfccd="1"] .img-count-3 .gallery-swiper-arrow,
    :root[data-wbfccd="1"] .img-count-4 .swiper-arrows,
    :root[data-wbfccd="1"] .img-count-4 .gallery-swiper-arrow {
        display: block !important;
    }
    
    /* Show pagination dots on mobile for 2+ images */
    :root[data-wbfccd="1"] .img-count-2 .swiper-dots,
    :root[data-wbfccd="1"] .img-count-2 .gallery-swiper-pagination,
    :root[data-wbfccd="1"] .img-count-3 .swiper-dots,
    :root[data-wbfccd="1"] .img-count-3 .gallery-swiper-pagination,
    :root[data-wbfccd="1"] .img-count-4 .swiper-dots,
    :root[data-wbfccd="1"] .img-count-4 .gallery-swiper-pagination {
        display: block !important;
    }
    
    /* Single image stays static on mobile */
    :root[data-wbfccd="1"] .img-count-1 .swiper-slide,
    :root[data-wbfccd="1"] .js-images-cover.img-count-1 .swiper-slide {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Ensure images scale properly within their containers (only for 1-4 images) */
:root[data-wbfccd="1"] .img-count-1 .swiper-slide img,
:root[data-wbfccd="1"] .img-count-2 .swiper-slide img,
:root[data-wbfccd="1"] .img-count-3 .swiper-slide img,
:root[data-wbfccd="1"] .img-count-4 .swiper-slide img,
:root[data-wbfccd="1"] .js-images-cover.img-count-1 .swiper-slide img,
:root[data-wbfccd="1"] .js-images-cover.img-count-2 .swiper-slide img,
:root[data-wbfccd="1"] .js-images-cover.img-count-3 .swiper-slide img,
:root[data-wbfccd="1"] .js-images-cover.img-count-4 .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
}

/* Maintain aspect ratio for product images - auto height (only for 1-4 images) */
:root[data-wbfccd="1"] .img-count-1 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .img-count-2 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .img-count-3 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .img-count-4 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .js-images-cover.img-count-1 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .js-images-cover.img-count-2 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .js-images-cover.img-count-3 .swiper-slide .wrapper-imgs,
:root[data-wbfccd="1"] .js-images-cover.img-count-4 .swiper-slide .wrapper-imgs {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
}

/* Remove extra spacing around images (only for 1-4 images) */
:root[data-wbfccd="1"] .img-count-1 .swiper-slide,
:root[data-wbfccd="1"] .img-count-2 .swiper-slide,
:root[data-wbfccd="1"] .img-count-3 .swiper-slide,
:root[data-wbfccd="1"] .img-count-4 .swiper-slide,
:root[data-wbfccd="1"] .js-images-cover.img-count-1 .swiper-slide,
:root[data-wbfccd="1"] .js-images-cover.img-count-2 .swiper-slide,
:root[data-wbfccd="1"] .js-images-cover.img-count-3 .swiper-slide,
:root[data-wbfccd="1"] .js-images-cover.img-count-4 .swiper-slide {
    display: flex !important;
    align-items: flex-start !important;
}

:root[data-wbfccd="1"] .img-count-1 .swiper-slide .img-light-box,
:root[data-wbfccd="1"] .img-count-2 .swiper-slide .img-light-box,
:root[data-wbfccd="1"] .img-count-3 .swiper-slide .img-light-box,
:root[data-wbfccd="1"] .img-count-4 .swiper-slide .img-light-box,
:root[data-wbfccd="1"] .js-images-cover.img-count-1 .swiper-slide .img-light-box,
:root[data-wbfccd="1"] .js-images-cover.img-count-2 .swiper-slide .img-light-box,
:root[data-wbfccd="1"] .js-images-cover.img-count-3 .swiper-slide .img-light-box,
:root[data-wbfccd="1"] .js-images-cover.img-count-4 .swiper-slide .img-light-box {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Main images container alignment */
:root[data-wbfccd="1"] .product-images-cover,
:root[data-wbfccd="1"] .images-container {
    align-items: flex-start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

:root[data-wbfccd="1"] .single-product-images {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Disable zoom effect but keep images visible */
:root[data-wbfccd="1"] .easyzoom,
:root[data-wbfccd="1"] .easyzoom-product {
    display: block !important;
    background: transparent !important;
    position: relative !important;
}

/* Ensure the image inside easyzoom is visible */
:root[data-wbfccd="1"] .easyzoom img,
:root[data-wbfccd="1"] .easyzoom-product img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Fix for p-ax-img-loader to show images */
:root[data-wbfccd="1"] .p-ax-img-loader {
    position: static !important;
    overflow: hidden !important;
    display: block !important;
}

/* Hide only the zoom overlay, not the main image */
:root[data-wbfccd="1"] .easyzoom-flyout {
    display: none !important;
}

:root[data-wbfccd="1"] .wrapper-imgs:hover,
:root[data-wbfccd="1"] .img-light-box:hover,
:root[data-wbfccd="1"] .easyzoom:hover,
:root[data-wbfccd="1"] .easyzoom-product:hover {
    background: transparent !important;
}

/* Disable any zoom transitions - only for 1-4 images */
:root[data-wbfccd="1"] .img-count-1 img,
:root[data-wbfccd="1"] .img-count-2 img,
:root[data-wbfccd="1"] .img-count-3 img,
:root[data-wbfccd="1"] .img-count-4 img {
    transition: none !important;
}

:root[data-wbfccd="1"] .img-count-1 img:hover,
:root[data-wbfccd="1"] .img-count-2 img:hover,
:root[data-wbfccd="1"] .img-count-3 img:hover,
:root[data-wbfccd="1"] .img-count-4 img:hover {
    transform: none !important;
}

/* Responsive: Reduce height on tablets (only for 1-4 images) */
@media (max-width: 991px) {
    :root[data-wbfccd="1"] .img-count-1 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .img-count-2 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .img-count-3 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .img-count-4 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .js-images-cover.img-count-1 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .js-images-cover.img-count-2 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .js-images-cover.img-count-3 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .js-images-cover.img-count-4 .swiper-slide .wrapper-imgs {
        height: auto !important;
        max-height: none !important;
    }
}

/* Responsive: Reduce height on mobile (only for 1-4 images) */
@media (max-width: 575px) {
    :root[data-wbfccd="1"] .img-count-1 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .img-count-2 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .img-count-3 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .img-count-4 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .js-images-cover.img-count-1 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .js-images-cover.img-count-2 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .js-images-cover.img-count-3 .swiper-slide .wrapper-imgs,
    :root[data-wbfccd="1"] .js-images-cover.img-count-4 .swiper-slide .wrapper-imgs {
        height: auto !important;
        max-height: none !important;
    }
}

/* DESKTOP ONLY: Disable swiper initialization for 1-4 images */
/* On mobile, swiper should work normally - do NOT set display:flex */
@media (min-width: 576px) {
    :root[data-wbfccd="1"] .img-count-1.swiper-container-initialized,
    :root[data-wbfccd="1"] .img-count-2.swiper-container-initialized,
    :root[data-wbfccd="1"] .img-count-3.swiper-container-initialized,
    :root[data-wbfccd="1"] .img-count-4.swiper-container-initialized,
    :root[data-wbfccd="1"] .js-images-cover.img-count-1.swiper-container-initialized,
    :root[data-wbfccd="1"] .js-images-cover.img-count-2.swiper-container-initialized,
    :root[data-wbfccd="1"] .js-images-cover.img-count-3.swiper-container-initialized,
    :root[data-wbfccd="1"] .js-images-cover.img-count-4.swiper-container-initialized {
        display: flex !important;
    }
}

/* DESKTOP ONLY: Reset transform for initialized swipers with 1-4 images */
/* On mobile, let Swiper JS control the transform for navigation */
@media (min-width: 576px) {
    :root[data-wbfccd="1"] .img-count-1.swiper-container-initialized .swiper-wrapper,
    :root[data-wbfccd="1"] .img-count-2.swiper-container-initialized .swiper-wrapper,
    :root[data-wbfccd="1"] .img-count-3.swiper-container-initialized .swiper-wrapper,
    :root[data-wbfccd="1"] .img-count-4.swiper-container-initialized .swiper-wrapper,
    :root[data-wbfccd="1"] .js-images-cover.img-count-1.swiper-container-initialized .swiper-wrapper,
    :root[data-wbfccd="1"] .js-images-cover.img-count-2.swiper-container-initialized .swiper-wrapper,
    :root[data-wbfccd="1"] .js-images-cover.img-count-3.swiper-container-initialized .swiper-wrapper,
    :root[data-wbfccd="1"] .js-images-cover.img-count-4.swiper-container-initialized .swiper-wrapper {
        transform: translate3d(0px, 0px, 0px) !important;
    }
}

/* Product Layout 10 overrides for full width images */
:root[data-wbfccd="1"] .product-layout-10 .product-images-cover {
    max-width: 100% !important;
}

:root[data-wbfccd="1"] .product-layout-10 .images-container {
    overflow: hidden !important;
}

:root[data-wbfccd="1"] .product-layout-10 .summary-container {
    max-width: 100% !important;
}

/* Hide thumbnail navigation for product layout 10 */
:root[data-wbfccd="1"] .product-layout-10 .product-images-thumb {
    display: none !important;
}

/* Hide product variant color/texture swatches - these are not the main images */
:root[data-wbfccd="1"] .product-variants .variant-links,
:root[data-wbfccd="1"] .product-variants .color-group,
:root[data-wbfccd="1"] .product-variants .texture-group,
:root[data-wbfccd="1"] .clearfix.product-variants {
    display: none !important;
}

/* ========================================
   PRODUCT THUMBNAILS - Show when 2+ images
   Override theme's .no-thumb rule that hides ALL thumbnails
   We want to show thumbnails when product has multiple images
   Uses :has() selector to check for img-count-X class
   ======================================== */

/* Show thumbnails when there are 2+ images (using :has() selector) */
.no-thumb:has(.img-count-2) .product-images-thumb,
.no-thumb:has(.img-count-3) .product-images-thumb,
.no-thumb:has(.img-count-4) .product-images-thumb,
.no-thumb:has(.img-count-5) .product-images-thumb,
.no-thumb:has(.img-count-6) .product-images-thumb,
.no-thumb:has(.img-count-7) .product-images-thumb,
.no-thumb:has(.img-count-8) .product-images-thumb,
.no-thumb:has(.img-count-9) .product-images-thumb,
.no-thumb:has(.img-count-10) .product-images-thumb {
    display: block !important;
}

/* ========================================
   PRODUCT THUMBNAILS - Styling
   Better quality images, smaller display size
   ======================================== */

/* Thumbnail container - add margin-top */
.product-images-thumb {
    margin-top: 20px !important;
}

/* Thumbnail items - smaller size */
.product-images-thumb .item-image {
    max-width: 100px !important;
    width: 100px !important;
    padding: 0 5px !important;
}

/* Thumbnail wrapper - constrain size */
.product-images-thumb .wrapper-imgs {
    width: 90px !important;
    height: 90px !important;
    overflow: hidden !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    background: #fff !important;
}

/* Thumbnail images - fit container properly */
.product-images-thumb .wrapper-imgs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Active thumbnail - highlight */
.product-images-thumb .swiper-slide-thumb-active .wrapper-imgs {
    border-color: var(--color-primary, #2c5aa0) !important;
    opacity: 1 !important;
}

/* Hover effect on thumbnails */
.product-images-thumb .item-image:hover .wrapper-imgs {
    border-color: var(--color-primary, #2c5aa0) !important;
}

/* Thumbnail swiper wrapper - center items */
.product-images-thumb .swiper-wrapper {
    justify-content: flex-start !important;
    gap: 0 !important;
}

/* Mobile - slightly smaller thumbnails */
@media (max-width: 991px) {
    .product-images-thumb .item-image {
        max-width: 80px !important;
        width: 80px !important;
    }
    
    .product-images-thumb .wrapper-imgs {
        width: 70px !important;
        height: 70px !important;
    }
}

/* ========================================
   PRODUCT TABS - ACCORDION CHILD THEME FIX
   Override parent theme inline styles with CSS classes
   Target BOTH .accordion-child-closable AND .product-tabs-mobile
   ======================================== */

/* CRITICAL FIX: Make accordion-title clickable on mobile by ensuring pseudo-element doesn't block clicks */
.accordion-child-closable .accordion-title,
.product-tabs-mobile .accordion-title {
    position: relative !important;
    cursor: pointer !important;
    /* Ensure entire element is clickable */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* CRITICAL: Make ::after pseudo-element non-blocking */
.accordion-child-closable .accordion-title::after,
.product-tabs-mobile .accordion-title::after {
    pointer-events: none !important;
    /* Pseudo-element won't intercept clicks - they pass through to parent */
}

/* Desktop: Control tabs via classes with !important to override inline styles */
@media (min-width: 992px) {
    .accordion-child-closable .wc-tab.child-tab-open {
        display: block !important;
    }
    .accordion-child-closable .wc-tab.child-tab-closed {
        display: none !important;
    }
}

/* Mobile: All tabs closed by default except when explicitly opened */
@media (max-width: 991px) {
    /* Default: hide all tabs in both containers */
    .accordion-child-closable .wc-tab,
    .product-tabs-mobile .wc-tab {
        display: none !important;
    }
    /* Only show tabs explicitly marked as open */
    .accordion-child-closable .wc-tab.child-tab-open,
    .product-tabs-mobile .wc-tab.child-tab-open {
        display: block !important;
    }
}

/* ========================================
   CATEGORY DESCRIPTION STYLING
   Improve readability and spacing
   ======================================== */

/* Subcategory title font size adjustment */
.product-list-subcategories .wrapp-category .category-title {
    font-size: 1.5rem !important;
}

@media (max-width: 991px) {
    .product-list-subcategories .wrapp-category .category-title {
        font-size: 1.3rem !important;
    }
}

/* ========================================
   COMPACT CATEGORY HEADER (Desktop)
   - Breadcrumbs: small, top-left
   - Title: left-aligned, smaller, inline
   - Description: collapsible
   ======================================== */

/* Page header section - remove background, make compact */
body.page-category .page-header,
body.page-category .page-title {
    background: transparent !important;
    padding: 10px 0 0 0 !important;
    margin-bottom: 0 !important;
    text-align: left !important;
}

.wbf-tc-category-hero-image {
    display: none;
}

/* Breadcrumbs - compact, inline with title area */
body.page-category .axps-breadcrumb,
body.page-category .breadcrumb {
    font-size: 12px !important;
    padding: 5px 0 !important;
    margin: 0 0 4px 0 !important;
    background: transparent !important;
    justify-content: flex-start !important;
}

body.page-category .axps-breadcrumb li,
body.page-category .axps-breadcrumb a,
body.page-category .breadcrumb li,
body.page-category .breadcrumb a {
    font-size: 12px !important;
    color: #666 !important;
}

body.page-category .axps-breadcrumb li:last-child,
body.page-category .breadcrumb li:last-child {
    color: #333 !important;
    font-weight: 500 !important;
}

/* Category title - compact, left-aligned */
body.page-category .page-header h1,
body.page-category .page-title h1,
body.page-category #js-product-list-header h1 {
    font-size: 22px !important;
    font-weight: 600 !important;
    text-align: left !important;
    text-transform: none !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    color: #333 !important;
}

body.page-category #js-product-list-header {
    margin-bottom: 10px !important;
}

/* Hide category banner image on desktop for cleaner look */
body.page-category .category-banner-boxed {
    display: none !important;
}

/* Category header wrapper - compact spacing */
body.page-category #content-wrapper {
    padding-top: 0 !important;
}

body.page-category .page-title > .container.container-parent {
    max-width: 1640px !important;
}

/* ========================================
   PRODUCT PAGE - BREADCRUMB STYLING
   Match category page style
   ======================================== */

/* Product page breadcrumbs - same style as category */
body.page-product .axps-breadcrumb,
body.page-product .breadcrumb,
body.page-product .single-breadcrumbs-wrapper .axps-breadcrumb,
body.page-product .single-breadcrumbs-wrapper .breadcrumb {
    font-size: 12px !important;
    padding: 5px 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
    justify-content: flex-start !important;
}

body.page-product .axps-breadcrumb a,
body.page-product .breadcrumb a {
    font-size: 12px !important;
 }

body.page-product .axps-breadcrumb > span,
body.page-product .breadcrumb span {
    font-size: 12px !important;
    font-weight: var(--font-weight-body) !important;
    font-family: var(--font-family-body) !important;
}

body.page-product .axps-breadcrumb span:last-child,
body.page-product .breadcrumb li:last-child {
    color: #333 !important;
    font-weight: 500 !important;
}

/* Single breadcrumbs wrapper on product page - move closer to top */
body.page-product .single-breadcrumbs-wrapper {
    margin-top: -25px !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
}

/* Hide product navigation arrows on product page */
body.page-product .axps-products-nav {
    display: none !important;
}

/* Product images - show full product (main product gallery) */
body.page-product .single-product-images .js-images-cover img,
body.page-product .single-product-images .wrapper-imgs img,
body.page-product .single-product-images .easyzoom img,
body.page-product .single-product-images .easyzoom-product img,
body.page-product .single-product-images .p-ax-img-loader img {
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: auto !important;
}

/* Desktop: limit max height */
@media (min-width: 992px) {
    body.page-product .single-product-images .js-images-cover img,
    body.page-product .single-product-images .wrapper-imgs img,
    body.page-product .single-product-images .easyzoom img,
    body.page-product .single-product-images .easyzoom-product img,
    body.page-product .single-product-images .p-ax-img-loader img {
        max-height: 600px !important;
    }
}

/* Mobile: ensure container allows full image height */
@media (max-width: 991px) {
    body.page-product .single-product-images .easyzoom,
    body.page-product .single-product-images .easyzoom-product,
    body.page-product .single-product-images .wrapper-imgs {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
}

/* Remove dark background from product page title area if present */
body.page-product .page-title {
    background: transparent !important;
    padding: 10px 0 !important;
    margin-bottom: 0 !important;
}

/* Main category description - smooth expandable intro */
.category-description-wrapper {
    position: relative !important;
    margin: 0 0 8px 0 !important;
    padding: 12px 14px !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbfd 100%) !important;
    border: 1px solid rgba(19, 103, 239, 0.14) !important;
   /* border-left: 3px solid #db1623 !important; */
    border-radius: 8px !important;
    box-shadow: 0 8px 22px rgba(16, 33, 54, 0.06) !important;
}

/* ============================================================
   Align category description with the row directly below it.

   Two distinct category layouts exist on the site:

   1. No left column (e.g. /cicluri) — the listing template
      renders subcategories straight into the body of the
      .container-fluid.max-width-1600.container-parent wrapper.
      The inner .row uses Bootstrap's -15px horizontal margins,
      so it pokes 15px outside the container's 30px padding on
      each side. Pulling the description out by -15px here lines
      its outer edges up with the subcategory row.

   2. With left column (e.g. /produs/26-finisaje-lemn) — the
      products grid lives inside .col-lg-9, whose 15px padding
      pulls the grid's RIGHT edge BACK INSIDE the container.
      Applying the same -15px right margin would push the
      description 15px past the grid's right edge. So the
      override must only fire when no left column is present.

   Scoping with :not(:has(#left-column)) keeps the no-sidebar
   layouts aligned and leaves sidebar layouts untouched (the
   description naturally spans the full container width, which
   already lines up with the page content on those layouts).
   ============================================================ */
@media (min-width: 992px) {
    body#category:not(:has(#left-column)) .page-title .category-description-wrapper {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
}

.category-description-wrapper .category-description-title {
    width: 100% !important;
    margin: 0 !important;
}

.category-description-body {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
}

.category-description {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-family-body, Arial, Helvetica, sans-serif) !important;
    font-size: var(--font-size-body, 1.4rem) !important;
    font-weight: var(--font-weight-body, 400) !important;
    line-height: 1.5 !important;
    color: #3f4954 !important;
    max-height: var(--category-description-collapsed-height, 21px) !important;
    overflow: hidden !important;
    transition: max-height 0.48s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease !important;
    position: relative !important;
    flex: 1 !important;
    min-width: 0 !important;
    will-change: max-height !important;
}

/* No gradient - clean single line */
.category-description::after {
    display: none !important;
}

/* Description expanded state */
.category-description.expanded {
    color: #27313b !important;
}

/* All paragraphs - left aligned, inline when collapsed */
.category-description p {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Add spacing between paragraphs when expanded */
.category-description.expanded p {
    margin-bottom: 8px !important;
}

.category-description.expanded p:last-child {
    margin-bottom: 0 !important;
}

/* Links in description */
.category-description a {
    color: var(--color-primary, #1367ef) !important;
    text-decoration: none !important;
}

.category-description a:hover {
    text-decoration: underline !important;
}

/* Toggle button - compact Aquatec action */
.category-description-toggle {
    display: none !important; /* Hidden by default - JS shows when description overflows */
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 7px 14px !important;
    margin: 0 !important;
    background: #72716E !important;
    border: 1px solid #72716E !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    outline: none !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
}

.category-description-toggle:hover,
.category-description-toggle:focus {
    background: #db1623 !important;
    border-color: #db1623 !important;
    transform: translateY(-1px) !important;
}

.category-description-toggle .toggle-arrow {
    display: inline-block !important;
    font-size: 9px !important;
    line-height: 1 !important;
    margin-left: 1px !important;
    transform-origin: 50% 48% !important;
    transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1) !important;
    color: #fff !important;
}

.category-description-toggle .toggle-text {
    font-size: 12px !important;
    color: #fff !important;
}

.category-description-toggle.active {
    background: #27313b !important;
    border-color: #27313b !important;
    box-shadow: 0 8px 18px rgba(39, 49, 59, 0.16) !important;
}

/* Arrow rotates when expanded */
.category-description-toggle.active .toggle-arrow {
    transform: rotate(180deg) !important;
}

/* Hide on mobile */
@media (max-width: 991px) {
    .category-description-wrapper,
    .category-description-body,
    .category-description,
    .category-description-toggle {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .category-description-wrapper {
        display: flex !important;
    }
    /* Button only visible when JS adds 'visible' class (description overflows) */
    .category-description-toggle.visible {
        display: inline-flex !important;
    }
}

/* ========================================
   CART MODAL - MOBILE ADJUSTMENTS
   Make product image smaller on mobile devices
   ======================================== */

/* Hide breadcrumbs on mobile */
@media (max-width: 767px) {
    .single-breadcrumbs-wrapper {
        display: none !important;
    }
    
    /* Main product page - Move combination label above values, keep values horizontal */
    .summary-container .product-variants-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 15px !important;
    }
    
    .summary-container .product-variants .control-label {
        width: 100% !important;
        text-align: left !important;
        padding-right: 0 !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    
    /* Keep the values container horizontal */
    .summary-container .product-variants .select-container {
        width: 100% !important;
    }
    
    .summary-container .product-variants-item ul {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
    
    .summary-container .product-variants-item ul li {
        display: inline-flex !important;
    }
    
    .summary-container .product-variants-item select {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    /* Cart Modal - Product section with image + info side by side */
    /* Target ONLY the direct children of modal-body > .row, not nested .col-md-6 */
    #blockcart-modal .modal-body > .row > .col-md-6:first-child,
    #nrtshoppingcart-modal .modal-body > .row > .col-md-6:first-child {
        /* This is the product section (image + name/price) - should be full width */
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 15px !important;
    }
    
    #blockcart-modal .modal-body > .row > .col-md-6:last-child,
    #nrtshoppingcart-modal .modal-body > .row > .col-md-6:last-child {
        /* This is the cart totals section - full width */
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Inner row inside product section - image column small, info column flexible */
    #blockcart-modal .modal-body > .row > .col-md-6:first-child > .row > .col-md-6:first-child,
    #nrtshoppingcart-modal .modal-body > .row > .col-md-6:first-child > .row > .col-md-6:first-child {
        max-width: 100px !important;
        flex: 0 0 100px !important;
        padding-right: 10px !important;
    }
    
    #blockcart-modal .modal-body > .row > .col-md-6:first-child > .row > .col-md-6:last-child,
    #nrtshoppingcart-modal .modal-body > .row > .col-md-6:first-child > .row > .col-md-6:last-child {
        flex: 1 !important;
        max-width: calc(100% - 110px) !important;
    }
    
    /* Make product image smaller */
    #blockcart-modal .product-image,
    #nrtshoppingcart-modal .wrapper-imgs,
    #nrtshoppingcart-modal-content .wrapper-imgs {
        max-width: 100px !important;
        height: auto !important;
    }
    
    /* Adjust product name - use h4 styling */
    #blockcart-modal .product-name,
    #nrtshoppingcart-modal .modal-body h6 {
        font-family: var(--font-family-heading) !important;
        font-size: var(--font-size-h4) !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Adjust product price - use body styling */
    #blockcart-modal .product-price,
    #nrtshoppingcart-modal .product-price {
        font-family: var(--font-family-body) !important;
        font-size: var(--font-size-body) !important;
        margin-bottom: 5px !important;
    }
}

@media (max-width: 575px) {
    /* Even smaller on very small devices - still need > direct child selectors */
    #blockcart-modal .modal-body > .row > .col-md-6:first-child > .row > .col-md-6:first-child,
    #nrtshoppingcart-modal .modal-body > .row > .col-md-6:first-child > .row > .col-md-6:first-child {
        max-width: 80px !important;
        flex: 0 0 80px !important;
    }
    
    #blockcart-modal .modal-body > .row > .col-md-6:first-child > .row > .col-md-6:last-child,
    #nrtshoppingcart-modal .modal-body > .row > .col-md-6:first-child > .row > .col-md-6:last-child {
        max-width: calc(100% - 90px) !important;
    }

    #blockcart-modal .product-image,
    #nrtshoppingcart-modal .wrapper-imgs,
    #nrtshoppingcart-modal-content .wrapper-imgs {
        max-width: 80px !important;
    }

}

/* ========================================
   PRODUCT VARIANT SELECTED STATE
   Use theme CSS variables for consistency
   ======================================== */

/* Product combination radio button - SELECTED state */
.product-variants > .product-variants-item input[type="radio"]:checked + .radio-label,
.product-variants > .product-variants-item .input-container input[type="radio"]:checked + label {
    background-color: #CC0B16 !important;
    border-color: #CC0B16 !important;
    color: #fff !important;
}

/* ========================================
   MINI CART - MOBILE ADJUSTMENTS
   Moved from global.css to child theme
   Original: padding 8px, font-size 1.2rem
   ======================================== */

@media (max-width: 767px) {
    #canvas-mini-cart .col {
        padding-left: 1px !important;
        padding-right: 1px !important;
        margin-top: 2px !important;
        margin-bottom: 2px !important;
        font-size: 1.2rem;
    }
}

/* ========================================
   CIRCLE BADGE TOOLTIPS - GLOBAL STYLES
   Unified tooltip styling for all modules:
   - .pswd-circle-badge (wbf_psweightdiscount)
   - .productcca-circle-badge (productcca)
   - .wbf_solutions-circle-badge (wbf_solutions)
   ======================================== */

/* Base circle badge styling - ensure consistency */
.pswd-circle-badge,
.productcca-circle-badge,
.wbf_solutions-circle-badge {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

/* Visual feedback on tap/click */
.pswd-circle-badge:active,
.productcca-circle-badge:active,
.wbf_solutions-circle-badge:active {
    transform: scale(0.95);
}

/* Desktop: Tooltip appears below badge on hover */
@media (min-width: 768px) {
    .pswd-circle-badge::before,
    .productcca-circle-badge::before,
    .wbf_solutions-circle-badge::before {
        content: attr(data-tooltip);
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) scale(0);
        transform-origin: top center;
        padding: 8px 12px;
        background: rgba(33, 33, 33, 0.95);
        color: #fff;
        border-radius: 4px;
        white-space: normal;
        width: max-content;
        max-width: 280px;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        text-align: left;
        z-index: 99999;
        opacity: 0;
        pointer-events: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    
    /* Arrow pointing up to the badge */
    .pswd-circle-badge::after,
    .productcca-circle-badge::after,
    .wbf_solutions-circle-badge::after {
        content: '';
        position: absolute;
        top: calc(100% + 2px);
        left: 50%;
        transform: translateX(-50%) scale(0);
        border: 6px solid transparent;
        border-bottom-color: rgba(33, 33, 33, 0.95);
        z-index: 99999;
        opacity: 0;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    
    /* Show tooltip on hover */
    .pswd-circle-badge:hover::before,
    .productcca-circle-badge:hover::before,
    .wbf_solutions-circle-badge:hover::before,
    .pswd-circle-badge:hover::after,
    .productcca-circle-badge:hover::after,
    .wbf_solutions-circle-badge:hover::after {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

/* Mobile: Tooltip appears below badge on tap (not centered on screen) */
@media (max-width: 767px) {
    /* Reset any existing mobile tooltip styles */
    .pswd-circle-badge::before,
    .productcca-circle-badge::before,
    .wbf_solutions-circle-badge::before {
        content: none;
        display: none;
    }
    
    .pswd-circle-badge::after,
    .productcca-circle-badge::after,
    .wbf_solutions-circle-badge::after {
        content: none;
        display: none;
    }
    
    /* Active state: Show tooltip below badge - !important to override module CSS */
    .pswd-circle-badge.active::before,
    .productcca-circle-badge.active::before,
    .wbf_solutions-circle-badge.active::before {
        content: attr(data-tooltip) !important;
        display: block !important;
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 50vw !important;
        transform: translateX(-50%) !important;
        padding: 10px 14px !important;
        background: rgba(33, 33, 33, 0.95) !important;
        color: #fff !important;
        border-radius: 6px !important;
        white-space: normal !important;
        width: max-content !important;
        max-width: min(280px, 80vw) !important;
        text-align: left !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        z-index: 99999 !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
        opacity: 1 !important;
        visibility: visible !important;
        animation: tooltipFadeIn 0.2s ease-out;
    }
    
    /* Arrow pointing up to badge - !important to override module CSS */
    .pswd-circle-badge.active::after,
    .productcca-circle-badge.active::after,
    .wbf_solutions-circle-badge.active::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        border: 6px solid transparent !important;
        border-bottom-color: rgba(33, 33, 33, 0.95) !important;
        z-index: 99999 !important;
    }
    
    /* Visual feedback - badge highlight when active */
    .pswd-circle-badge.active,
    .productcca-circle-badge.active,
    .wbf_solutions-circle-badge.active {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 0 5px rgba(0, 0, 0, 0.2);
        z-index: 10000;
    }
    
    /* CSS-only fallback: Show tooltip on focus (for accessibility and if JS fails) */
    .pswd-circle-badge:focus::before,
    .productcca-circle-badge:focus::before,
    .wbf_solutions-circle-badge:focus::before {
        content: attr(data-tooltip) !important;
        display: block !important;
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 10px 14px !important;
        background: rgba(33, 33, 33, 0.95) !important;
        color: #fff !important;
        border-radius: 6px !important;
        white-space: normal !important;
        width: max-content !important;
        max-width: min(280px, 80vw) !important;
        text-align: left !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        z-index: 99999 !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .pswd-circle-badge:focus::after,
    .productcca-circle-badge:focus::after,
    .wbf_solutions-circle-badge:focus::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        top: calc(100% + 4px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        border: 6px solid transparent !important;
        border-bottom-color: rgba(33, 33, 33, 0.95) !important;
        z-index: 99999 !important;
    }
    
    .pswd-circle-badge:focus,
    .productcca-circle-badge:focus,
    .wbf_solutions-circle-badge:focus {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 0 5px rgba(0, 0, 0, 0.2);
        z-index: 10000;
    }
    
    /* Make badges focusable on mobile */
    .pswd-circle-badge,
    .productcca-circle-badge,
    .wbf_solutions-circle-badge {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Animation for tooltip appearance */
@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Ensure tooltips visible in cart sidebar containers
   NOTE: #canvas-mini-cart itself must NOT be overflow:visible — it breaks flex scroll containment.
   Product rows (.cart-item-product) must NOT be overflow:visible either — their height must
   expand to fit labels + notification bars so they contribute to scrollHeight properly. */
#canvas-mini-cart .cart-item-labels,
#canvas-mini-cart .media,
#canvas-mini-cart .media-body,
.cart-summary,
.cart-summary-top,
.cart-summary-products,
.js-cart-summary,
.blockcart-content {
    overflow: visible !important;
}

/* Ensure proper z-index stacking for badges in cart */
#canvas-mini-cart .pswd-circle-badge,
#canvas-mini-cart .productcca-circle-badge,
#canvas-mini-cart .wbf_solutions-circle-badge,
.cart-summary .pswd-circle-badge,
.cart-summary .productcca-circle-badge,
.cart-summary .wbf_solutions-circle-badge {
    z-index: 100;
}

#canvas-mini-cart .pswd-circle-badge.active,
#canvas-mini-cart .productcca-circle-badge.active,
#canvas-mini-cart .wbf_solutions-circle-badge.active,
.cart-summary .pswd-circle-badge.active,
.cart-summary .productcca-circle-badge.active,
.cart-summary .wbf_solutions-circle-badge.active {
    z-index: 10001;
}

/* Ensure tooltips appear above cart overlay */
#canvas-mini-cart .pswd-circle-badge::before,
#canvas-mini-cart .productcca-circle-badge::before,
#canvas-mini-cart .wbf_solutions-circle-badge::before,
#canvas-mini-cart .pswd-circle-badge::after,
#canvas-mini-cart .productcca-circle-badge::after,
#canvas-mini-cart .wbf_solutions-circle-badge::after {
    z-index: 99999 !important;
}

/* Override nrtthemecustomizer images.css - center product image */
.square_large_default {
    padding-top: 80% !important;
}

/* Override nrtthemecustomizer images.css - cart page mobile images */
.small_default {
    padding-top: 100% !important;
}

/* Cart sidebar: hide Qty label and adjust price styling */
#canvas-mini-cart .price-qty .qty span {
    display: none !important;
}

#canvas-mini-cart .price-qty .price {
    font-size: 12px !important;
    text-align: right !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

/* Cart sidebar: title with product count (CCP format) */
#canvas-mini-cart h3.title-canvas-widget .js-cart-canvans-title,
#canvas-mini-cart h3.title-canvas-widget .totals-nb {
    font-size: 14px !important;
    display: inline !important;
    margin-left: 5px !important;
    opacity: 0.85 !important;
}

/* Cart sidebar: labels row - inline badges below product info */
#canvas-mini-cart .cart-item-labels {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 8px !important;
    padding-top: 5px !important;
    width: 100% !important;
    align-items: center !important;
}

#canvas-mini-cart .cart-item-labels:empty {
    display: none !important;
}

/* Cart page: improve spacing below header and softly frame the working area */
body#cart #wrapper {
    padding-top: 34px !important;
    padding-bottom: 64px !important;
    background: #fbfbfb !important;
}

body#cart .cart-container,
body#cart .ax-cart-summary {
    background: #ffffff !important;
    border: 1px solid #e7e7e7 !important;
    box-shadow: 0 10px 26px rgba(35, 35, 35, 0.04) !important;
}

body#cart #main-content::before {
    content: "Cosul tau";
    display: block !important;
    margin: 0 0 14px !important;
    color: #232323 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

body#cart .cart-container {
    padding: 22px 24px 20px !important;
}

body#cart .cart-overview .shop_table_responsive {
    margin-bottom: 24px !important;
}

body#cart .cart-detailed-totals h2 {
    letter-spacing: 0 !important;
}

@media (min-width: 992px) {
    body#cart #content-wrapper.cart-grid-body {
        padding-right: 30px !important;
    }
}

/* Checkout page: match the cart page spacing and framed working area */
body#checkout #wrapper {
    padding-top: 34px !important;
    padding-bottom: 64px !important;
    background: #fbfbfb !important;
}

body#checkout #main-content::before {
    content: "Finalizeaza comanda";
    display: block !important;
    margin: 0 0 14px !important;
    color: #232323 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

body#checkout section.checkout-step,
body#checkout .ax-cart-summary,
body#checkout .js-cart-summary {
    background: #ffffff !important;
    border: 1px solid #e7e7e7 !important;
    box-shadow: 0 10px 26px rgba(35, 35, 35, 0.04) !important;
}

body#checkout section.checkout-step {
    margin-bottom: 18px !important;
}

body#checkout section.checkout-step .step-title,
body#checkout section.checkout-step .content {
    border-right: none !important;
    border-left: none !important;
}

body#checkout section.checkout-step .step-title {
    border-top: none !important;
    padding: 18px 22px !important;
    background: #ffffff !important;
}

body#checkout section.checkout-step .content {
    padding: 22px !important;
    background: #ffffff !important;
}

body#checkout .cart-detailed-totals h2,
body#checkout .ax-cart-summary h2 {
    letter-spacing: 0 !important;
}

@media (min-width: 992px) {
    body#checkout #content-wrapper {
        padding-right: 30px !important;
    }
}

/* Cart page: mobile full-width rows for Price, Quantity, Subtotal */
@media (max-width: 767px) {
    body#cart #wrapper {
        padding-top: 18px !important;
        padding-bottom: 42px !important;
    }

    body#cart #wrapper > .container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    body#cart .cart-container {
        padding: 14px 16px 18px !important;
        margin-bottom: 18px !important;
    }

    body#cart #main-content::before {
        margin-bottom: 12px !important;
        font-size: 20px !important;
    }

    body#cart .ax-cart-summary {
        margin-top: 0 !important;
    }

    body#checkout #wrapper {
        padding-top: 18px !important;
        padding-bottom: 42px !important;
    }

    body#checkout #wrapper > .container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    body#checkout #main-content::before {
        margin-bottom: 12px !important;
        font-size: 20px !important;
    }

    body#checkout section.checkout-step {
        margin-bottom: 16px !important;
    }

    body#checkout section.checkout-step .step-title {
        padding: 15px 16px !important;
    }

    body#checkout section.checkout-step .content {
        padding: 16px !important;
    }

    body#checkout .ax-cart-summary,
    body#checkout .js-cart-summary {
        margin-top: 2px !important;
    }

    .cart-overview tr.cart-item {
        display: flex !important;
        flex-wrap: wrap !important;
        padding-left: 0 !important;
        position: relative !important;
    }
    
    .cart-overview .product-remove {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
        order: 0 !important;
    }
    
    .cart-overview .product-thumbnail {
        position: relative !important;
        width: 80px !important;
        max-height: 90px !important;
        flex-shrink: 0 !important;
        order: 1 !important;
        top: auto !important;
        left: auto !important;
    }
    
    .cart-overview td.product-name {
        flex: 1 !important;
        padding-left: 15px !important;
        order: 2 !important;
    }
    
    .cart-overview td.product-c-price,
    .cart-overview td.product-quantity,
    .cart-overview td.product-subtotal {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        padding: 10px 0 !important;
        border-bottom: 1px dashed var(--ax-line-color) !important;
    }
    
    .cart-overview td.product-c-price {
        order: 3 !important;
        margin-top: 10px !important;
    }
    
    .cart-overview td.product-quantity {
        order: 4 !important;
    }
    
    .cart-overview td.product-subtotal {
        order: 5 !important;
        border-bottom: none !important;
    }
    
    .cart-overview td.product-c-price::before,
    .cart-overview td.product-quantity::before,
    .cart-overview td.product-subtotal::before {
        content: attr(data-title) !important;
        font-weight: 600 !important;
        color: var(--color-body) !important;
    }
    
    .cart-overview td.product-c-price .amount,
    .cart-overview td.product-subtotal .product-price {
        text-align: right !important;
    }
    
    .cart-overview td.product-quantity .bootstrap-touchspin {
        margin-left: auto !important;
    }
}

/* Hide default unit-price-cart when pswd-discount-line is present (avoid duplication) */
/* Structure: td.product-c-price > .amount > .unit-price-cart, then .pswd-discount-line is sibling of .amount */
td.product-c-price:has(.pswd-discount-line) .unit-price-cart {
    display: none !important;
}

/* PSWD Discount Line styling for order confirmation - under unit price like cart */
.order-confirmation-table .pswd-discount-line,
.order-line .pswd-discount-line {
    margin-top: 3px !important;
    font-size: 0.9em !important;
    display: block !important;
}

.order-confirmation-table .pswd-discount-line span:first-child,
.order-line .pswd-discount-line span:first-child {
    color: #666 !important;
    text-decoration: line-through !important;
}

.order-confirmation-table .pswd-discount-line span:last-child,
.order-line .pswd-discount-line span:last-child {
    color: #28a745 !important;
    font-weight: 600 !important;
}

/* Order confirmation unit price column layout */
.order-confirmation-table .qty .col-xs-4:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.order-confirmation-table .order-unit-price {
    display: block !important;
}

/* Mobile: price and unit-price inline with / separator (when no discount) */
@media (max-width: 767px) {
    .cart-overview td.product-c-price:not(:has(.pswd-discount-line)) .amount {
        display: inline-flex !important;
        align-items: baseline !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
    }
    
    .cart-overview td.product-c-price:not(:has(.pswd-discount-line)) .amount > span {
        display: inline !important;
    }
    
    .cart-overview td.product-c-price:not(:has(.pswd-discount-line)) .unit-price-cart {
        display: inline !important;
    }
    
    .cart-overview td.product-c-price:not(:has(.pswd-discount-line)) .unit-price-cart::before {
        content: " / " !important;
        margin-left: 0.5vh;
    }
}

/* PERSONALIZARE button styled like circle badges - both mobile and desktop */
.cart-badges-wrapper .personalizare-badge,
.cart-overview td.product-name .personalizare-badge {
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    border: none !important;
    background-color: var(--bg-color-btn, #2c5aa0) !important;
    color: #fff !important;
    text-transform: none !important;
    cursor: pointer !important;
}

.cart-badges-wrapper .personalizare-badge:hover,
.cart-overview td.product-name .personalizare-badge:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

/* PERSONALIZARE circle button for order confirmation - matches cart circle badges */
.order-confirmation-table .personalizare-circle-btn,
.order-line .personalizare-circle-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin: 0 2px !important;
    border: none !important;
    background-color: var(--bg-color-btn, #2c5aa0) !important;
    color: #fff !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: all 0.2s ease !important;
}

.order-confirmation-table .personalizare-circle-btn:hover,
.order-line .personalizare-circle-btn:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
    transform: scale(1.05) !important;
}

/* PERSONALIZARE pill badge for order confirmation - full text style */
.order-confirmation-table .personalizare-badge,
.order-confirmation-badges-wrapper .personalizare-badge,
.order-line .personalizare-badge {
    height: 24px !important;
    min-width: auto !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    border: none !important;
    background-color: var(--bg-color-btn, #2c5aa0) !important;
    color: #fff !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: all 0.2s ease !important;
    text-transform: none !important;
}

.order-confirmation-table .personalizare-badge:hover,
.order-confirmation-badges-wrapper .personalizare-badge:hover,
.order-line .personalizare-badge:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

/* Order confirmation customizations wrapper - inline with product details */
.order-confirmation-table .customizations,
.order-line .customizations {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 4px !important;
}

/* Order confirmation badges wrapper - aligns PERSONALIZARE with module badges */
.order-confirmation-badges-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-top: 4px !important;
}

/* ========================================
   ORDER CONFIRMATION PAGE POLISH
   ======================================== */
#content-hook_order_confirmation.wbf-order-confirmation-hero,
.wbf-order-confirmation-main,
.wbf-order-confirmation-payment-return,
.wbf-order-confirmation-account {
    border: 1px solid #e8ecef !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 45px rgba(23, 32, 38, 0.08) !important;
    overflow: hidden !important;
}

#content-hook_order_confirmation.wbf-order-confirmation-hero {
    background: linear-gradient(135deg, #f5fbf6 0%, #ffffff 48%, #f7fafc 100%) !important;
    margin-bottom: 24px !important;
}

#content-hook_order_confirmation.wbf-order-confirmation-hero .card-block {
    padding: 32px !important;
}

.wbf-order-confirmation-hero__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    text-align: center !important;
}

.wbf-order-confirmation-hero__icon {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 58px !important;
    background: #1f9d55 !important;
    color: #fff !important;
    box-shadow: 0 12px 26px rgba(31, 157, 85, 0.22) !important;
}

.wbf-order-confirmation-hero__icon .las {
    font-size: 32px !important;
    line-height: 1 !important;
}

.wbf-order-confirmation-hero__eyebrow {
    margin: 0 0 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #1f7a45 !important;
}

.wbf-order-confirmation-hero__title {
    margin: 0 !important;
    font-size: 32px !important;
    line-height: 1.18 !important;
    color: #172026 !important;
}

.wbf-order-confirmation-hero__text {
    margin: 10px 0 0 !important;
    max-width: 760px !important;
    color: #53616b !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.wbf-order-confirmation-hero__copy {
    max-width: 780px !important;
    margin: 0 auto !important;
}

.wbf-order-confirmation-meta {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 24px !important;
}

.wbf-order-confirmation-meta__item {
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid #e1e7eb !important;
    border-radius: 8px !important;
}

.wbf-order-confirmation-meta__item span {
    display: block !important;
    margin-bottom: 5px !important;
    color: #6d7a84 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.wbf-order-confirmation-meta__item strong {
    display: block !important;
    color: #172026 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
}

.wbf-order-confirmation-main .card-block {
    padding: 28px !important;
}

.wbf-order-confirmation-main #order-items {
    padding-right: 28px !important;
}

.wbf-order-confirmation-main #order-items > .row:first-child {
    align-items: flex-end !important;
}

.wbf-order-confirmation-main #order-items > hr,
.wbf-order-confirmation-main .order-confirmation-table > hr {
    display: none !important;
}

.wbf-order-confirmation-main #order-items .card-title.h3,
.wbf-order-confirmation-details__panel .card-title {
    margin: 0 0 12px !important;
    color: #172026 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
}

.wbf-order-confirmation-main .order-confirmation-table table {
    width: 100% !important;
    margin-top: 12px !important;
    border-top: none !important;
}

.wbf-order-confirmation-main .order-confirmation-table table td {
    padding: 10px 0 !important;
    border-bottom: 1px solid #f1f3f5 !important;
    color: #53616b !important;
}

.wbf-order-confirmation-main .order-confirmation-table table td:last-child {
    text-align: right !important;
    color: #172026 !important;
    font-weight: 600 !important;
}

.wbf-order-confirmation-main .order-confirmation-table table .total-value td {
    padding-top: 16px !important;
    color: #172026 !important;
    font-size: 18px !important;
}

.wbf-order-confirmation-details__panel {
    position: sticky !important;
    top: 18px !important;
    padding: 22px !important;
    background: #f8fafb !important;
    border: 1px solid #e1e7eb !important;
    border-radius: 8px !important;
}

.wbf-order-confirmation-details__list {
    margin: 0 !important;
}

.wbf-order-confirmation-details__list > div {
    padding: 14px 0 !important;
    border-bottom: 1px solid #e1e7eb !important;
}

.wbf-order-confirmation-details__list > div:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.wbf-order-confirmation-details__list dt {
    margin-bottom: 4px !important;
    color: #6d7a84 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.wbf-order-confirmation-details__list dd {
    margin: 0 !important;
    color: #172026 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

.wbf-order-confirmation-details__list dd small {
    display: block !important;
    margin-top: 4px !important;
    color: #6d7a84 !important;
    font-weight: 400 !important;
}

.wbf-order-confirmation-payment-return .card-block {
    padding: 24px 28px !important;
}

.wbf-order-confirmation-payment-return {
    margin-top: 24px !important;
    background: #fff !important;
}

/* ========================================
   ORDER CONFIRMATION TABLE - CART PAGE STYLE
   ======================================== */

/* Override theme.css container styling */
body#checkout #order-summary-content .order-confirmation-table {
    padding: 0.1rem;
    margin-bottom: 3.2rem;
    background-color: #fff;
    border: none;
    border-radius: 0;
}

/* Make order-line rows look like cart table rows */
.order-confirmation-table .order-line {
    display: flex !important;
    align-items: flex-start !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

/* Image column - compact like cart */
.order-confirmation-table .order-line > .col-sm-1 {
    flex: 0 0 80px !important;
    max-width: 80px !important;
    padding-right: 15px !important;
}

.order-confirmation-table .order-line .image img {
    max-width: 100% !important;
    height: auto !important;
}

/* Details column - product name and badges */
.order-confirmation-table .order-line > .col-sm-5 {
    flex: 1 !important;
    padding-right: 15px !important;
}

.order-confirmation-table .order-line .details a {
    font-weight: 600 !important;
    color: #333 !important;
    text-decoration: none !important;
}

.order-confirmation-table .order-line .details a:hover {
    color: var(--bg-color-btn, #2c5aa0) !important;
}

/* Qty/Price section - match cart table columns */
.order-confirmation-table .order-line > .col-sm-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

.order-confirmation-table .order-line .qty .row {
    display: grid !important;
    grid-template-columns: minmax(88px, 1fr) 56px minmax(102px, 1fr) !important;
    align-items: flex-start !important;
}

.order-confirmation-table .order-line .qty .col-xs-4 {
    width: auto !important;
    max-width: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Unit price column styling */
.order-confirmation-table .order-line .qty .col-xs-4:first-child {
    text-align: left !important;
}

.order-confirmation-table .order-unit-price {
    font-weight: 500 !important;
    color: #333 !important;
    white-space: nowrap !important;
}

/* Quantity column */
.order-confirmation-table .order-line .qty .col-xs-4:nth-child(2) {
    text-align: center !important;
    font-weight: 500 !important;
}

/* Subtotal column - bold and colored like cart */
.order-confirmation-table .order-line .qty .col-xs-4:last-child {
    text-align: right !important;
    white-space: nowrap !important;
}

.order-confirmation-table .order-line .qty .bold {
    font-weight: 700 !important;
    color: #f44336 !important;
    font-size: 1em !important;
    word-break: keep-all !important;
}

/* ========================================
   ORDER CONFIRMATION - MOBILE RESPONSIVE
   Match cart page shop_table_responsive layout
   ======================================== */
@media (max-width: 767px) {
    /* Hide desktop column headers on mobile */
    #order-items .col-lg-6:last-child .row,
    #order-items ._desktop-title {
        display: none !important;
    }
    
    /* Order line - card-like layout matching cart */
    .order-confirmation-table .order-line {
        position: relative !important;
        display: block !important;
        margin-bottom: 20px !important;
        padding-bottom: 20px !important;
        padding-left: 0 !important;
        border-bottom: 1px solid var(--ax-line-color, #e5e5e5) !important;
    }
    
    .order-confirmation-table .order-line:last-of-type {
        margin-bottom: 0 !important;
    }
    
    /* Image column - centered at top on mobile */
    .order-confirmation-table .order-line > .col-sm-1 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
        flex: none !important;
        position: static !important;
    }
    
    .order-confirmation-table .order-line .image {
        display: inline-block !important;
        position: relative !important;
    }
    
    .order-confirmation-table .order-line .image img {
        width: 100px !important;
        max-width: 100px !important;
        height: auto !important;
        border-radius: 4px !important;
    }
    
    /* Circle badges under image on mobile */
    .order-confirmation-table .order-line .image .mobile-badges-under-image {
        display: flex !important;
        justify-content: center !important;
        gap: 4px !important;
        margin-top: 8px !important;
        flex-wrap: wrap !important;
    }
    
    /* Details column - product name, full width below image */
    .order-confirmation-table .order-line > .col-sm-5 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
        flex: none !important;
        text-align: center !important;
    }
    
    .order-confirmation-table .order-line .details a {
        display: block !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 5px !important;
    }
    
    .order-confirmation-table .order-line .details .text-muted {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }
    
    /* Hide badges wrapper in details on mobile - shown under image instead */
    .order-confirmation-table .order-line .details .order-confirmation-badges-wrapper {
        display: none !important;
    }
    
    /* Qty/Price section - stacked rows like cart, full width */
    .order-confirmation-table .order-line > .col-sm-6 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        flex: none !important;
    }
    
    .order-confirmation-table .order-line .qty .row {
        display: block !important;
    }
    
    /* Each price/qty cell becomes a row with label */
    .order-confirmation-table .order-line .qty .col-xs-4 {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 0 !important;
        border-bottom: 1px dashed var(--ax-line-color, #e5e5e5) !important;
        flex: none !important;
    }
    
    .order-confirmation-table .order-line .qty .col-xs-4:last-child {
        border-bottom: none !important;
    }
    
    /* Add labels before each cell using ::before */
    .order-confirmation-table .order-line .qty .col-xs-4:first-child::before {
        content: 'PREȚ UNITAR' !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        color: var(--color-title, #333) !important;
        text-transform: uppercase !important;
    }
    
    .order-confirmation-table .order-line .qty .col-xs-4:nth-child(2)::before {
        content: 'CANTITATE' !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        color: var(--color-title, #333) !important;
        text-transform: uppercase !important;
    }
    
    .order-confirmation-table .order-line .qty .col-xs-4:last-child::before {
        content: 'SUBTOTAL' !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        color: var(--color-title, #333) !important;
        text-transform: uppercase !important;
    }
    
    /* Reset text alignment for mobile rows */
    .order-confirmation-table .order-line .qty .col-xs-4,
    .order-confirmation-table .order-line .qty .col-xs-4:first-child,
    .order-confirmation-table .order-line .qty .col-xs-4:nth-child(2),
    .order-confirmation-table .order-line .qty .col-xs-4:last-child {
        text-align: right !important;
    }
    
    /* HR separators - hide on mobile since we use border-bottom */
    .order-confirmation-table hr {
        display: none !important;
    }
    
    /* Badges wrapper in details - hidden on mobile (shown under image instead) */
    .order-confirmation-badges-wrapper {
        display: none !important;
    }
    
    /* Mobile badges under image - shown on mobile */
    .mobile-badges-under-image {
        display: flex !important;
        justify-content: center !important;
        gap: 4px !important;
        margin-top: 8px !important;
        flex-wrap: wrap !important;
    }
    
    /* PSWD discount line - stack nicely on mobile */
    .order-confirmation-table .pswd-discount-line {
        display: block !important;
        margin-top: 4px !important;
    }
}

/* Desktop: Hide mobile badges under image, show badges in details */
@media (min-width: 768px) {
    .mobile-badges-under-image {
        display: none !important;
    }
}

.order-confirmation-badges-wrapper .personalizare-circle-btn {
    margin: 0 !important;
}

/* Cart badges wrapper - ensure inline display on all screen sizes */
.cart-overview td.product-name .cart-badges-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-top: 4px !important;
}

/* Hide product list in checkout sidebar (CART TOTALS) */
#cart-summary-product-list .media-list,
.cart-summary-items-subtotal .media-list {
    display: none !important;
}

/* ========================================
   ORDER ITEMS ACCORDION - MOBILE ONLY
   ======================================== */

/* Hide accordion header on desktop */
.order-items-accordion-header {
    display: none;
}

/* Mobile accordion styles */
@media (max-width: 767px) {
    /* Accordion header - visible on mobile */
    .order-items-accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background-color: #f8f9fa;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        cursor: pointer;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }
    
    .order-items-accordion-header:hover {
        background-color: #e9ecef;
    }
    
    .order-items-accordion-header .accordion-title {
        font-weight: 600;
        font-size: 15px;
        color: #333;
    }
    
    .order-items-accordion-header .accordion-icon {
        font-size: 18px;
        color: #666;
        transition: transform 0.3s ease;
    }
    
    .order-items-accordion-header.open .accordion-icon {
        transform: rotate(180deg);
    }
    
    .order-items-accordion-header.open {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom: none;
        margin-bottom: 0;
    }
    
    /* Accordion content - hidden by default on mobile */
    .order-items-accordion-content {
        display: none;
        border: 1px solid #e5e5e5;
        border-top: none;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        padding: 15px;
        background-color: #fff;
        margin-bottom: 20px;
    }
    
    .order-items-accordion-content.open {
        display: block;
    }
    
    /* Hide the "Order items" h3 title inside accordion since we have it in header */
    .order-items-accordion-content #order-items .card-title.h3 {
        display: none;
    }
}

/* ========================================
   PRODUCT LAYOUT 2 - TITLE & DESCRIPTION IN LEFT COLUMN
   Only title and description moved below images on desktop
   Right column with price/variants/add-to-cart remains intact
   ======================================== */

/* Desktop wrapper for title & description in layout 2 */
.product-title-description-desktop {
    margin-top: 1.5rem;
    padding: 0 15px;
}

.product-title-description-desktop .product_title {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.product-title-description-desktop .product-short-description {
    line-height: 1.6;
    color: #333;
}

/* ========================================
   PRODUCT LAYOUT 2 - TABS IN LEFT COLUMN
   Tabs moved under title/description on desktop
   ======================================== */

/* Desktop tabs in left column - visible on lg+ */
.product-tabs-desktop {
    margin-top: 2rem;
    padding: 0;
}

.product-tabs-desktop #wrapper-tab-product {
    margin-top: 0;
}

/* Ensure tabs container has no extra margins in left column */
.single-product-images .product-tabs-desktop {
    width: 100%;
}

/* WBF Solutions product pages: keep the left product/media column as a clean card. */

.product-tabs-desktop.hidden-md-down {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    background: #FFF !important;
    border: 1px solid var(--aq-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07) !important;
  }

/* ========================================
   PRODUCT LAYOUT 2 - FULL WIDTH IMAGES
   Images displayed full-width above the two columns on desktop
   Max-height constrained to 450px on desktop, 300px on mobile
   ======================================== */

/* Full-width images row on desktop */
.product-images-fullwidth {
    margin-bottom: 20px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.product-images-fullwidth .images-container {
    width: 100%;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Override padding-top aspect ratio trick - use natural image height */
.product-images-fullwidth .p-ax-img-loader {
    position: relative !important;
    padding-top: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide the gray placeholder background pseudo-element */
.product-images-fullwidth .p-ax-img-loader::before,
.product-images-fullwidth .p-ax-img-loader::after {
    display: none !important;
    content: none !important;
}

.product-images-fullwidth .product-images-cover {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-images-fullwidth .wrapper-imgs {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-images-fullwidth .swiper-slide {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-images-fullwidth .img-light-box {
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-images-fullwidth .easyzoom,
.product-images-fullwidth .easyzoom-product {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Image styling - fill the container properly */
/* IMPORTANT: Higher specificity to override :root[data-wbfccd="1"] .img-count-X rules */
:root .product-images-fullwidth .wrapper-imgs img,
:root .product-images-fullwidth .p-ax-img-loader img,
:root .product-images-fullwidth .swiper-slide img,
:root .product-images-fullwidth .js-images-cover img,
:root[data-wbfccd="1"] .product-images-fullwidth .wrapper-imgs img,
:root[data-wbfccd="1"] .product-images-fullwidth .p-ax-img-loader img,
:root[data-wbfccd="1"] .product-images-fullwidth .swiper-slide img,
:root[data-wbfccd="1"] .product-images-fullwidth .js-images-cover img,
:root[data-wbfccd="1"] .product-images-fullwidth .js-images-cover.img-count-1 .swiper-slide img,
:root[data-wbfccd="1"] .product-images-fullwidth .js-images-cover.img-count-2 .swiper-slide img,
:root[data-wbfccd="1"] .product-images-fullwidth .js-images-cover.img-count-3 .swiper-slide img,
:root[data-wbfccd="1"] .product-images-fullwidth .js-images-cover.img-count-4 .swiper-slide img,
:root[data-wbfccd="1"] .product-images-fullwidth .img-count-1 .swiper-slide img,
:root[data-wbfccd="1"] .product-images-fullwidth .img-count-2 .swiper-slide img,
:root[data-wbfccd="1"] .product-images-fullwidth .img-count-3 .swiper-slide img,
:root[data-wbfccd="1"] .product-images-fullwidth .img-count-4 .swiper-slide img,
body.page-product .product-images-fullwidth .wrapper-imgs img,
body.page-product .product-images-fullwidth .p-ax-img-loader img,
body.page-product .product-images-fullwidth .swiper-slide img,
body.page-product .product-images-fullwidth .js-images-cover img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Make images display horizontally in full-width row */
.product-images-fullwidth .js-images-cover {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-images-fullwidth .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-images-fullwidth .swiper-slide {
    flex: 1;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
}

/* Mobile: Images in left column with constrained height */
@media (max-width: 991px) {
    /* Mobile image container */
    .horizontal-thumb.images-cover-slider .images-container {
        max-height: 300px !important;
        overflow: hidden !important;
    }
    
    .horizontal-thumb.images-cover-slider .p-ax-img-loader {
        position: relative !important;
        padding-top: 0 !important;
        height: auto !important;
        max-height: 300px !important;
        background: transparent !important;
    }
    
    .horizontal-thumb.images-cover-slider .product-images-cover,
    .horizontal-thumb.images-cover-slider .wrapper-imgs,
    .horizontal-thumb.images-cover-slider .swiper-slide,
    .horizontal-thumb.images-cover-slider .img-light-box,
    .horizontal-thumb.images-cover-slider .easyzoom,
    .horizontal-thumb.images-cover-slider .easyzoom-product {
        max-height: 300px !important;
    }
    
    .horizontal-thumb.images-cover-slider .wrapper-imgs img,
    .horizontal-thumb.images-cover-slider .p-ax-img-loader img {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 300px !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
        margin: 0 auto !important;
        background: transparent !important;
    }
    
    /* CRITICAL: Ensure swiper works on mobile for 2+ images */
    /* DO NOT override swiper-wrapper transform - let Swiper JS handle it */
    .horizontal-thumb.images-cover-slider .js-images-cover {
        overflow: hidden !important;
    }
    
    /* Ensure swiper-wrapper can be transformed by Swiper JS */
    .horizontal-thumb.images-cover-slider .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* DO NOT set transform here - Swiper JS controls this */
    }
    
    .horizontal-thumb.images-cover-slider .swiper-slide {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        width: 100% !important;
    }
    
    .horizontal-thumb.images-cover-slider .easyzoom,
    .horizontal-thumb.images-cover-slider .easyzoom-product {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* MOBILE SWIPER: Show arrows for 2+ images */
    .horizontal-thumb.images-cover-slider .swiper-arrows,
    .horizontal-thumb.images-cover-slider .gallery-swiper-arrow {
        display: block !important;
        z-index: 10 !important;
    }
    
    /* Hide arrows only for single image */
    .horizontal-thumb.images-cover-slider .img-count-1 .swiper-arrows,
    .horizontal-thumb.images-cover-slider .img-count-1 .gallery-swiper-arrow {
        display: none !important;
    }
    
    /* Hide pagination dots on mobile - use arrows only */
    .horizontal-thumb.images-cover-slider .swiper-dots,
    .horizontal-thumb.images-cover-slider .gallery-swiper-pagination,
    .horizontal-thumb .swiper-dots,
    .horizontal-thumb .gallery-swiper-pagination,
    .horizontal-thumb .swiper-pagination-bullets {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* CRITICAL: Fix swiper container - hide overflow, no gaps */
    .horizontal-thumb.images-cover-slider .js-images-cover,
    .horizontal-thumb .js-images-cover,
    .horizontal-thumb .swiper-container {
        overflow: hidden !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* CRITICAL: Fix swiper-wrapper - no gaps, proper width */
    .horizontal-thumb.images-cover-slider .swiper-wrapper,
    .horizontal-thumb .swiper-wrapper {
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* CRITICAL: Ensure slides take EXACTLY full width - no partial image */
    .horizontal-thumb.images-cover-slider .swiper-slide,
    .horizontal-thumb .swiper-slide {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Ensure images fill the slide completely */
    .horizontal-thumb .swiper-slide img,
    .horizontal-thumb .swiper-slide .wrapper-imgs,
    .horizontal-thumb .swiper-slide .img-light-box {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   PRODUCT LAYOUT 2 - ADDITIONAL FIXES
   ======================================== */

/* 1. Move images closer to top - reduce margin after breadcrumbs */
.product-layout-2 .breadcrumb-section {
    margin-bottom: 10px !important;
}

.product-layout-2 .product-images-fullwidth {
    margin-top: 0 !important;
}

/* 2. Make Watch video and Click to enlarge buttons inline */
.product-images-fullwidth .gr-btn-additional {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.product-images-fullwidth .gr-btn-additional .btn-additional {
    display: inline-flex !important;
    margin: 0 !important;
}

/* 3. Fix mobile swiper - restore proper swiper functionality */
@media (max-width: 991px) {
    /* IMPORTANT: Remove all custom swiper overrides on mobile to let Swiper JS work */
    .horizontal-thumb.images-cover-slider .swiper-wrapper {
        /* Let Swiper control the transform */
        display: flex !important;
    }
    
    .horizontal-thumb.images-cover-slider .swiper-slide {
        flex-shrink: 0 !important;
    }
    
    /* Show gallery swiper navigation arrows */
    .gallery-swiper-arrow,
    .gallery-swiper-arrow-prev,
    .gallery-swiper-arrow-next {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        background: #fefefe !important;
        border-radius: 0 !important;
    }
    
    /* Style disabled state but keep clickable */
    .gallery-swiper-arrow.swiper-button-disabled,
    .gallery-swiper-arrow-prev[disabled],
    .gallery-swiper-arrow-next[disabled] {
        opacity: 0.35 !important;
    }
    
    /* Make gr-btn-additional inline on mobile too */
    .gr-btn-additional {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    
    .gr-btn-additional .btn-additional {
        display: inline-flex !important;
        margin: 0 !important;
    }
}

/* ========================================
   PRODUCT CARD ENHANCEMENT - Category Listing (Akira Theme)
   Option B: Light polish to existing cards
   
   TO REVERT: Delete this entire section
   (from "PRODUCT CARD ENHANCEMENT" to "END PRODUCT CARD ENHANCEMENT")
   ======================================== */

/* Product grid - equal height rows */
.products .row,
.featured-products .row,
#box-product-grid .row,
#js-product-list .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Product grid columns - stretch to equal height */
.products .row > [class*="col-"],
.featured-products .row > [class*="col-"],
#box-product-grid .row > [class*="col-"],
#js-product-list .row > [class*="col-"] {
    display: flex !important;
}

/* Product card container - subtle card styling + full height */
.products .item-inner,
.products .js-product-miniature,
.featured-products .item-inner,
#box-product-grid .item-inner {
    background: #fff !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}

/* Hover effect - subtle lift */
.products .item-inner:hover,
.products .js-product-miniature:hover,
.featured-products .item-inner:hover,
#box-product-grid .item-inner:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    transform: translateY(-2px) !important;
}

/* Product image container (element-top) */
.products .element-top,
.featured-products .element-top,
#box-product-grid .element-top {
    border-radius: 4px 4px 0 0 !important;
    overflow: hidden !important;
}

/* Product image wrapper */
.products .wrapper-imgs,
.featured-products .wrapper-imgs,
#box-product-grid .wrapper-imgs {
    overflow: hidden !important;
}

/* Product image - maintain aspect ratio */
.products .wrapper-imgs img,
.featured-products .wrapper-imgs img,
#box-product-grid .wrapper-imgs img {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
}

html:root[data-wbfccd="1"] body.page-category #products #box-product-grid.products .wrapper-imgs img.ax-img-loader,
html:root[data-wbfccd="1"] body.page-category #products #box-product-grid.products .wrapper-imgs picture img,
html:root[data-wbfccd="1"] body.page-category #js-product-list #box-product-grid.products .wrapper-imgs img.ax-img-loader,
html:root[data-wbfccd="1"] body.page-category #js-product-list #box-product-grid.products .wrapper-imgs picture img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: auto !important;
    object-fit: fill !important;
    object-position: 50% 50% !important;
}

/* Image hover effect - subtle zoom */
.products .item-inner:hover .wrapper-imgs img,
.featured-products .item-inner:hover .wrapper-imgs img,
#box-product-grid .item-inner:hover .wrapper-imgs img {
    transform: scale(1.03) !important;
}

/* Product info area (element-bottom) - flex grow to fill space */
.products .element-bottom,
.featured-products .element-bottom,
#box-product-grid .element-bottom {
    padding: 15px !important;
    background: #fff !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Product title - fixed height for 2 lines */
.products .product_name,
.featured-products .product_name,
#box-product-grid .product_name {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    min-height: 40px !important; /* Space for ~2 lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.products .product_name a,
.featured-products .product_name a,
#box-product-grid .product_name a {
    color: #333 !important;
    text-decoration: none !important;
}

.products .product_name a:hover,
.featured-products .product_name a:hover,
#box-product-grid .product_name a:hover {
    color: var(--color-primary, #c00) !important;
}

/* Product price - pushed to bottom */
.products .product-price-and-shipping,
.featured-products .product-price-and-shipping,
#box-product-grid .product-price-and-shipping {
    margin-top: auto !important; /* Push to bottom */
    padding-top: 5px !important;
}

.products .price,
.featured-products .price,
#box-product-grid .price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000 !important;
}

/* Discover/Add to cart button styling */
.products .btn-action.add-to-cart,
.featured-products .btn-action.add-to-cart,
#box-product-grid .btn-action.add-to-cart {
    border-radius: 12px 12px 0 0 !important;
}

/* Responsive - mobile adjustments */
@media (max-width: 575px) {
    .products .element-bottom,
    .featured-products .element-bottom,
    #box-product-grid .element-bottom {
        padding: 12px !important;
    }
    
    .products .product_name,
    .featured-products .product_name,
    #box-product-grid .product_name {
        font-size: 13px !important;
        min-height: 36px !important; /* Slightly smaller on mobile */
    }
    
    .products .price,
    .featured-products .price,
    #box-product-grid .price {
        font-size: 14px !important;
    }
}

/* Hide Quick View button globally */
.btn-action.quick-view,
.btn-action.quick-view.js-quick-view,
.js-quick-view,
.quick-view {
    display: none !important;
    visibility: hidden !important;
}

/* ======================================== 
   END PRODUCT CARD ENHANCEMENT
   ======================================== */

/* ========================================
   PRODUCT ATTACHMENTS/DOWNLOADS TAB
   Styling for downloadable files section
   ======================================== */

.product-attachments {
    padding: 15px 0 !important;
}

.product-attachments .attachments-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-attachments .attachment-item {
    padding: 12px 15px !important;
    margin-bottom: 10px !important;
    background: #f9f9f9 !important;
    border-radius: 8px !important;
    border: 1px solid #e8e8e8 !important;
    transition: all 0.2s ease !important;
}

.product-attachments .attachment-item:hover {
    background: #f0f0f0 !important;
    border-color: var(--color-primary, #2c5aa0) !important;
}

.product-attachments .attachment-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    color: #333 !important;
    font-weight: 500 !important;
}

.product-attachments .attachment-link:hover {
    color: var(--color-primary, #2c5aa0) !important;
}

.product-attachments .attachment-link .material-icons {
    font-size: 24px !important;
    color: var(--color-primary, #2c5aa0) !important;
}

.product-attachments .attachment-name {
    flex-grow: 1 !important;
}

.product-attachments .attachment-size {
    font-size: 12px !important;
    color: #999 !important;
    font-weight: normal !important;
}

.product-attachments .attachment-description {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
    color: #666 !important;
    padding-left: 34px !important;
}

/* ========================================
   HIDE "CART CONTAINS X PRODUCTS" NOTIFICATION
   Only hide this specific notification on product pages
   ======================================== */

/* Target the "Your cart contains X of these products" notification */
body.page-product #notifications .alert-info,
body.page-product .notifications-container .alert-info {
    display: none !important;
}

/* Ensure other notifications (success, warning, error) remain visible */
body.page-product #notifications .alert-success,
body.page-product #notifications .alert-warning,
body.page-product #notifications .alert-danger:not([data-alert="danger"]) {
    display: block !important;
}

/* ========================================
   END NOTIFICATIONS HIDING
   ======================================== */

/* ========================================
   eMAG-STYLE CATEGORY PAGE FILTERS
   Desktop: Sticky sidebar with collapsible sections
   Mobile: Horizontal filter bar
   ======================================== */

/* -----------------------------------------
   DESKTOP: STICKY SIDEBAR
   ----------------------------------------- */
@media (min-width: 992px) {
    /* Make sidebar sticky */
    body.page-category #left-column,
    body.page-search #left-column {
        position: sticky !important;
        top: 20px !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Custom scrollbar */
        scrollbar-width: thin;
        scrollbar-color: #ccc #f5f5f5;
    }
    
    /* Webkit scrollbar styling */
    body.page-category #left-column::-webkit-scrollbar,
    body.page-search #left-column::-webkit-scrollbar {
        width: 6px;
    }
    
    body.page-category #left-column::-webkit-scrollbar-track,
    body.page-search #left-column::-webkit-scrollbar-track {
        background: #f5f5f5;
        border-radius: 3px;
    }
    
    body.page-category #left-column::-webkit-scrollbar-thumb,
    body.page-search #left-column::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }
    
    body.page-category #left-column::-webkit-scrollbar-thumb:hover,
    body.page-search #left-column::-webkit-scrollbar-thumb:hover {
        background: #999;
    }
}

/* -----------------------------------------
   DESKTOP: eMAG-STYLE SIDEBAR WIDGETS
   ----------------------------------------- */

/* Widget container - cleaner spacing */
body.page-category #left-column .widget,
body.page-search #left-column .widget {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* Widget title - eMag style (same as mobile canvas) */
body.page-category #left-column .widget-title,
body.page-category #left-column .widget-title.h3,
body.page-category #left-column .facet-title,
body.page-category #left-column .title .h4,
body.page-category #left-column .h4.facet-title,
body.page-search #left-column .widget-title,
body.page-search #left-column .widget-title.h3,
body.page-search #left-column .facet-title,
body.page-search #left-column .title .h4,
body.page-search #left-column .h4.facet-title {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: #111 !important;
    text-transform: uppercase !important;
    margin-bottom: 0 !important;
    padding: 10px 5px 10px 5px !important;
    border-bottom: 1px solid #eee !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #fff;
}

/* Hide grid/list toggle on desktop */
@media (min-width: 992px) {
    body.page-category .gr-list-gird,
    body.page-search .gr-list-gird {
        display: none !important;
    }
}

/* Fix filter dropdown overlapping values - ensure proper z-index and positioning */
body.page-category #left-column .facet,
body.page-category #left-column .widget,
body.page-search #left-column .facet,
body.page-search #left-column .widget {
    position: relative !important;
    z-index: auto !important;
}

body.page-category #left-column .facet .collapse,
body.page-category #left-column .facet .facet-dropdown,
body.page-category #left-column .widget .collapse,
body.page-search #left-column .facet .collapse,
body.page-search #left-column .facet .facet-dropdown,
body.page-search #left-column .widget .collapse {
    position: relative !important;
    z-index: 1 !important;
}

/* 4. Filter panel title - smaller and lighter on mobile and desktop */
#canvas-facets-search .facet .title .h4,
#canvas-facets-search .facet-title,
#canvas-facets-search .h4.facet-title {
    font-size: 1.3rem !important;
    font-weight: 500 !important;
    padding-top: 15px !important;
}

/* Facet section container */
body.page-category #left-column .facet,
body.page-search #left-column .facet {
    border-bottom: 1px solid #eee !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 10px;
}

body.page-category #left-column .facet:last-child,
body.page-search #left-column .facet:last-child {
    border-bottom: none !important;
}

/* Facet content list */
body.page-category #left-column .facet ul,
body.page-search #left-column .facet ul {
    padding: 10px 10px 15px 10px !important;
    margin: 0 !important;
    background: #fff;
}

/* Facet list items */
body.page-category #left-column .facet ul li,
body.page-search #left-column .facet ul li {
    padding: 4px 0 !important;
    display: block !important;
    width: 100% !important;
}

/* ==========================================================
   FILTER MODULE - Override global .label, label styles
   Global CSS line 6135: .label, label { font-size: var(--font-size-body); font-weight: var(--font-weight-label); }
   ========================================================== */

/* Hide duplicate #_desktop_facets_search inside Elementor widget */
/* There are TWO #_desktop_facets_search: one in #left-column (correct), one in Elementor (duplicate) */
.elementor #_desktop_facets_search,
.elementor-widget-container #_desktop_facets_search,
[data-elementor-type] #_desktop_facets_search,
.elementor-element #_desktop_facets_search {
    display: none !important;
}

/* Ensure the correct #_desktop_facets_search (direct child of #left-column) is visible */
#left-column > #_desktop_facets_search {
    display: block !important;
}

/* Override global label styles ONLY for filter module */
#_desktop_facets_search .label,
#_desktop_facets_search label,
#left-column .widget-facet-search .label,
#left-column .widget-facet-search label,
.widget-facet-search .facet-label .label,
.widget-facet-search .facet-label label,
.widget.widget-facet-search label {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #3f3f3f !important;
    line-height: 1.4 !important;
}

/* Facet labels - eMag style */
body.page-category #left-column .facet-label,
body.page-search #left-column .facet-label,
#_desktop_facets_search .facet-label,
.widget-facet-search .facet-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #3f3f3f !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    width: 100% !important;
    text-align: left !important;
    line-height: 1.4 !important;
}

body.page-category #left-column .facet-label:hover,
body.page-search #left-column .facet-label:hover {
    color: var(--aq-red) !important;
}

body.page-category #left-column .facet-label.active,
body.page-search #left-column .facet-label.active,
.widget-facet-search .facet-label.active,
#canvas-facets-search .facet-label.active {
    color: var(--aq-red) !important;
    font-weight: 600 !important;
}

/* When facet-label has .active class, show checkbox as checked */
.facet-label.active .custom-checkbox .ps-shown-by-js,
.facet-label.active .custom-checkbox span:not(.color),
#canvas-facets-search .facet-label.active .custom-checkbox .ps-shown-by-js,
#canvas-facets-search .facet-label.active .custom-checkbox span:not(.color) {
    background: var(--aq-red) !important;
    border-color: var(--aq-red) !important;
}

.facet-label.active .custom-checkbox .ps-shown-by-js i,
.facet-label.active .custom-checkbox span:not(.color) i,
#canvas-facets-search .facet-label.active .custom-checkbox .ps-shown-by-js i,
#canvas-facets-search .facet-label.active .custom-checkbox span:not(.color) i {
    color: #fff !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove padding-right from has-magnitude - magnitude now inline */
.widget-facet-search .has-magnitude {
    padding-right: 0 !important;
}

/* Filter count/magnitude - inline after value */
.widget-facet-search .magnitude,
body.page-category #left-column .facet-label .magnitude,
body.page-search #left-column .facet-label .magnitude {
    position: static !important;
    display: inline !important;
    margin-top: 0 !important;
    margin-left: 4px !important;
    color: #999 !important;
    font-weight: 400 !important;
    font-size: 12px !important;
}

/* Facet list items - proper alignment */
.widget-facet-search ul li,
body.page-category #left-column .widget-facet-search ul li,
body.page-search #left-column .widget-facet-search ul li {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 0px !important;
}

/* Custom checkbox container - flex alignment */
body.page-category #left-column .custom-checkbox,
body.page-search #left-column .custom-checkbox,
.widget-facet-search .custom-checkbox,
.widget-facet-search .ps-shown-by-js {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important; /* Override any parent vertical-align */
}

/* Checkbox span - the actual checkbox box */
.widget-facet-search .custom-checkbox input + span,
#_desktop_facets_search .custom-checkbox input + span,
#canvas-facets-search .custom-checkbox input + span,
body.page-category #left-column .custom-checkbox span:not(.color),
body.page-search #left-column .custom-checkbox span:not(.color),
.widget-facet-search .custom-checkbox span:not(.color) {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    border: 1px solid #ccc !important;
    border-radius: 3px !important;
    background: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important; /* Override global -2px */
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

/* Override global.css vertical-align: -2px on checkbox span */
.widget-facet-search .custom-checkbox input + span.ps-shown-by-js,
#_desktop_facets_search .custom-checkbox input + span.ps-shown-by-js,
#canvas-facets-search .custom-checkbox input + span.ps-shown-by-js {
    vertical-align: middle !important;
}

/* Facet label - the entire clickable area */
.widget-facet-search .facet-label,
.widget-facet-search .ps-shown-by-js .facet-label,
#_desktop_facets_search .facet-label,
#canvas-facets-search .facet-label {
    display: flex !important;
    align-items: center !important;
    line-height: 16px !important;
}

/* Label text inside facet-label - vertically center with checkbox */
.widget-facet-search .facet-label .label,
.widget-facet-search .facet-label label,
#_desktop_facets_search .facet-label .label,
#_desktop_facets_search .facet-label label,
#canvas-facets-search .facet-label .label,
#canvas-facets-search .facet-label label {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 16px !important;
    height: 16px !important;
}

/* Text span containing filter value - align with checkbox center */
.widget-facet-search .facet-label .text,
#_desktop_facets_search .facet-label .text,
#canvas-facets-search .facet-label .text {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
    margin-top: -2px !important; /* Nudge text up to align with checkbox center */
}

/* Magnitude inside text span */
.widget-facet-search .facet-label .text .magnitude,
#_desktop_facets_search .facet-label .text .magnitude,
#canvas-facets-search .facet-label .text .magnitude {
    display: inline !important;
    vertical-align: baseline !important;
}

/* Checked checkbox styling */
body.page-category #left-column .custom-checkbox input:checked + span:not(.color),
body.page-search #left-column .custom-checkbox input:checked + span:not(.color),
.widget-facet-search .custom-checkbox input:checked + span,
.widget-facet-search .custom-checkbox input:checked + .ps-shown-by-js,
#canvas-facets-search .custom-checkbox input:checked + span,
#canvas-facets-search .custom-checkbox input:checked + .ps-shown-by-js {
    background: var(--aq-red) !important;
    border-color: var(--aq-red) !important;
}

body.page-category #left-column .custom-checkbox input:checked + span:not(.color) i,
body.page-search #left-column .custom-checkbox input:checked + span:not(.color) i,
.widget-facet-search .custom-checkbox input:checked + span i,
.widget-facet-search .custom-checkbox input:checked + .ps-shown-by-js i,
#canvas-facets-search .custom-checkbox input:checked + span i,
#canvas-facets-search .custom-checkbox input:checked + .ps-shown-by-js i {
    color: #fff !important;
    font-size: 12px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Category navigation - eMag style: clean, minimal, no bullets */
body.page-category #left-column .block-categories,
body.page-search #left-column .block-categories {
    background: #F1F8FE !important;
    padding: 10px !important;
}

/* Block-categories widget title - no background */
.widget.block-categories .widget-title,
body.page-category #left-column .block-categories .widget-title,
body.page-search #left-column .block-categories .widget-title {
    background: transparent !important;
}

/* Remove circle bullets from category links */
body.page-category #left-column .block-categories ul > li > a::before,
body.page-search #left-column .block-categories ul > li > a::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    border: none !important;
}

body.page-category #left-column .block-categories ul,
body.page-category #left-column .category-sub-menu,
body.page-category #left-column #_desktop_category_tree ul,
body.page-search #left-column .block-categories ul,
body.page-search #left-column .category-sub-menu,
body.page-search #left-column #_desktop_category_tree ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-category #left-column .block-categories li,
body.page-category #left-column .category-sub-menu li,
body.page-category #left-column #_desktop_category_tree li,
body.page-search #left-column .block-categories li,
body.page-search #left-column .category-sub-menu li,
body.page-search #left-column #_desktop_category_tree li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.page-category #left-column .block-categories li::before,
body.page-category #left-column .category-sub-menu li::before,
body.page-category #left-column #_desktop_category_tree li::before,
body.page-search #left-column .block-categories li::before,
body.page-search #left-column .category-sub-menu li::before,
body.page-search #left-column #_desktop_category_tree li::before {
    display: none !important;
    content: none !important;
}

/* Category links - eMag style: text only, minimal padding */
body.page-category #left-column #_desktop_category_tree a,
body.page-category #left-column .category-sub-menu a,
body.page-category #left-column .block-categories a,
body.page-search #left-column #_desktop_category_tree a,
body.page-search #left-column .category-sub-menu a,
body.page-search #left-column .block-categories a {
    color: #186bd8 !important;
    font-size: 1.5rem !important;
    text-decoration: none !important;
    display: block !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* Hover: text color change only, no background */
body.page-category #left-column #_desktop_category_tree a:hover,
body.page-category #left-column .category-sub-menu a:hover,
body.page-category #left-column .block-categories a:hover,
body.page-search #left-column #_desktop_category_tree a:hover,
body.page-search #left-column .category-sub-menu a:hover,
body.page-search #left-column .block-categories a:hover {
    background: transparent !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

/* Active/current category - bold text, primary color */
body.page-category #left-column .category-sub-menu .current a,
body.page-category #left-column .block-categories .current > a,
body.page-category #left-column #_desktop_category_tree .current > a,
body.page-search #left-column .category-sub-menu .current a,
body.page-search #left-column .block-categories .current > a,
body.page-search #left-column #_desktop_category_tree .current > a {
    background: transparent !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
}

/* Category count - gray, inline */
body.page-category #left-column .category-sub-menu .category-count,
body.page-category #left-column .block-categories .category-count,
body.page-search #left-column .category-sub-menu .category-count,
body.page-search #left-column .block-categories .category-count {
    color: #999 !important;
    font-size: 1.2rem !important;
    margin-left: 5px !important;
}

/* Subcategories indentation */
body.page-category #left-column .category-sub-menu ul,
body.page-category #left-column .block-categories ul ul,
body.page-search #left-column .category-sub-menu ul,
body.page-search #left-column .block-categories ul ul {
    padding-left: 12px !important;
}

/* -----------------------------------------
   DESKTOP: Product List Top Bar Styling
   ----------------------------------------- */

/* Product list top navigation bar - Desktop */
.nav-products-list-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
    background: #fff !important;
    padding: 10px;
    border-radius: 4px !important;
    margin-top: 0; /* Align with sidebar */
}

/* ========================================
   PERSONALIZARE CULOARE FILTER BUTTON
   Custom filter for attppf products
   ======================================== */

/* ATTPPF Filter - Hidden products */
.attppf-hidden,
.item.attppf-hidden,
.js-product-miniature.attppf-hidden,
.archive-wrapper-items .item.attppf-hidden,
.wrapper-items .item.attppf-hidden,
.products .item.attppf-hidden {
    display: none !important;
}

.btn-outline-primary:active {
    background: #7D0309 !important;
    color: #fff !important;
  }

/* Ensure the grid reflows properly - use flexbox for wrapper */
.archive-wrapper-items.wrapper-items {
    display: flex;
    flex-wrap: wrap;
}

.archive-wrapper-items .item:not(.attppf-hidden) {
    /* Items will naturally flow to fill gaps */
}

/* Override general filter-buttons styles for personalizare button - Ocean Gradient Style */
.filter-personalizare {
    margin-right: 10px !important;
}

.filter-personalizare .filter-personalizare-btn,
.nav-products-list-top .filter-personalizare .filter-personalizare-btn,
a.filter-personalizare-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    background: linear-gradient(135deg, #3F84F2 0%, #DB1724 100%) !important;
    border: none !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Shine effect on hover */
.filter-personalizare .filter-personalizare-btn::before,
.nav-products-list-top .filter-personalizare .filter-personalizare-btn::before,
a.filter-personalizare-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
    transition: left 0.5s ease !important;
}

.filter-personalizare .filter-personalizare-btn:hover::before,
.nav-products-list-top .filter-personalizare .filter-personalizare-btn:hover::before,
a.filter-personalizare-btn:hover::before {
    left: 100% !important;
}

/* Remove ::after pseudo element for this button */
.filter-personalizare .filter-personalizare-btn::after,
.nav-products-list-top .filter-personalizare .filter-personalizare-btn::after,
a.filter-personalizare-btn::after {
    content: none !important;
    display: none !important;
}

/* Ensure SVG and text are visible */
.filter-personalizare-btn svg,
.filter-personalizare-btn .filter-icon-colorful {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
}

.filter-personalizare-btn span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fff !important;
}

.filter-personalizare-btn .filter-icon-colorful circle {
    fill: #fff !important;
}

.filter-personalizare-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 147, 233, 0.3) !important;
    text-decoration: none !important;
    color: #fff !important;
}

/* Active state - teal/green gradient */
.filter-personalizare-btn.active,
.nav-products-list-top .filter-personalizare .filter-personalizare-btn.active {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    box-shadow: none !important;
}

.filter-personalizare-btn.active:hover {
    box-shadow: 0 4px 12px rgba(17, 153, 142, 0.3) !important;
}

.filter-personalizare-btn.active span {
    color: #fff !important;
}

.filter-personalizare-btn.active .filter-icon-colorful circle {
    fill: #fff !important;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .filter-personalizare {
        order: -1 !important;
        margin-right: 8px !important;
    }
    
    .filter-personalizare .filter-personalizare-btn,
    .nav-products-list-top .filter-personalizare .filter-personalizare-btn,
    .nav-products-list-top .filter-buttons.filter-personalizare a,
    .filter-buttons.filter-personalizare a.filter-personalizare-btn {
        padding: 10px 14px !important;
        font-size: 12px !important;
        border-radius: 4px !important;
        box-shadow: none !important;
        /* Maintain gradient on mobile - override white background */
        background: linear-gradient(135deg, #3F84F2 0%, #DB1724 100%) !important;
        border: none !important;
        color: #fff !important;
    }
    
    /* Hover/touch state on mobile - use green gradient instead of white */
    .filter-personalizare .filter-personalizare-btn:hover,
    .filter-personalizare .filter-personalizare-btn:focus,
    .filter-personalizare .filter-personalizare-btn:active,
    .nav-products-list-top .filter-personalizare .filter-personalizare-btn:hover,
    .nav-products-list-top .filter-personalizare .filter-personalizare-btn:focus,
    .nav-products-list-top .filter-personalizare .filter-personalizare-btn:active,
    .nav-products-list-top .filter-buttons.filter-personalizare a:hover,
    .nav-products-list-top .filter-buttons.filter-personalizare a:focus,
    .nav-products-list-top .filter-buttons.filter-personalizare a:active,
    .filter-buttons.filter-personalizare a.filter-personalizare-btn:hover,
    .filter-buttons.filter-personalizare a.filter-personalizare-btn:focus,
    .filter-buttons.filter-personalizare a.filter-personalizare-btn:active {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
        border: none !important;
        color: #fff !important;
        box-shadow: none !important;
        transform: none !important;
    }
    
    /* Active state (when filter is applied) */
    .filter-personalizare .filter-personalizare-btn.active,
    .filter-personalizare .filter-personalizare-btn.active:hover,
    .filter-personalizare .filter-personalizare-btn.active:focus,
    .nav-products-list-top .filter-personalizare .filter-personalizare-btn.active,
    .nav-products-list-top .filter-buttons.filter-personalizare a.active {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
        box-shadow: none !important;
        transform: none !important;
    }
    
    .filter-personalizare-btn span {
        display: none !important;
    }
    
    .filter-personalizare-btn .filter-icon-colorful {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Ensure SVG stays white on all states */
    .filter-personalizare-btn:hover .filter-icon-colorful circle,
    .filter-personalizare-btn:focus .filter-icon-colorful circle,
    .filter-personalizare-btn:active .filter-icon-colorful circle {
        fill: #fff !important;
    }
}

/* Product card border radius - js-product item-inner */
.js-product.item-inner,
.products .item-inner,
#js-product-list .item-inner {
    border-radius: 4px !important;
}

/* Per page dropdown border radius */
.gr-per-page .dropdown-toggle {
    border-radius: 4px !important;
}

/* Ordering dropdown border radius */
.wc-ordering-dropdown .dropdown-toggle {
    border-radius: 4px !important;
}

/* -----------------------------------------
   MOBILE: eMAG-STYLE HORIZONTAL FILTER BAR
   ----------------------------------------- */
@media (min-width: 992px) {
    body.page-category #left-column,
    body.page-search #left-column {
        top: 118px !important;
    }
}

@media (max-width: 991px) {
    /* 1. Hide category description on mobile */
    body.page-category .category-description,
    body.page-search .category-description {
        display: none !important;
    }
    
    /* Hide block-categories widget on mobile */
    body.page-category .widget.block-categories,
    body.page-search .widget.block-categories {
        display: none !important;
    }
    
    /* 1. Hide category title on mobile - only show breadcrumbs */
    body.page-category .page-title h1,
    body.page-category .category-header h1,
    body.page-category #js-product-list-header h1,
    body.page-category .page-header h1,
    body.page-search .page-header h1,
    body.page-search .page-title h1 {
        display: none !important;
    }
    
    /* 2. Compact page title section - eMag style */
    body.page-category .page-title,
    body.page-search .page-title {
        padding: 10px 0 5px 0 !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }
    
    /* 2. Breadcrumbs - eMag style (1rem) */
    body.page-category .page-title .axps-breadcrumb,
    body.page-category .breadcrumb,
    body.page-search .page-title .axps-breadcrumb,
    body.page-search .breadcrumb {
        font-size: 1rem !important;
        padding: 0 !important;
        margin-bottom: 5px !important;
    }
    
    body.page-category .breadcrumb li,
    body.page-category .breadcrumb a,
    body.page-category .axps-breadcrumb li,
    body.page-category .axps-breadcrumb a,
    body.page-search .breadcrumb li,
    body.page-search .breadcrumb a,
    body.page-search .axps-breadcrumb li,
    body.page-search .axps-breadcrumb a {
        font-size: 1rem !important;
        color: #666 !important;
    }
    
    body.page-category .breadcrumb li::before,
    body.page-category .axps-breadcrumb li::before,
    body.page-search .breadcrumb li::before,
    body.page-search .axps-breadcrumb li::before {
        font-size: 0.9rem !important;
    }
    
    /* 3. STICKY Filter/sort bar - full viewport width below the mobile header */
    body.page-category .nav-products-list-top,
    body.page-search .nav-products-list-top {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        border-top: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
        margin-top: 0 !important;
        margin-bottom: 14px !important;
        background: #fff !important;
        position: fixed !important;
        top: 54px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1041 !important;
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    body.page-category #products,
    body.page-search #products {
        padding-top: 74px !important;
    }

    body.page-category .product-list-subcategories + .row.category-layout-1 #products,
    body.page-search .product-list-subcategories + .row.category-layout-1 #products {
        padding-top: 0 !important;
    }

    body.page-category .product-list-subcategories,
    body.page-search .product-list-subcategories {
        margin-top: 74px !important;
    }
    
    /* 4. Active filters - horizontal scrollable row */
    body.page-category #js-active-search-filters,
    body.page-category #active-search-filters,
    body.page-search #js-active-search-filters,
    body.page-search #active-search-filters {
        display: block !important;
        visibility: visible !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    
    body.page-category #js-active-search-filters .active-filter-title,
    body.page-search #js-active-search-filters .active-filter-title {
        display: none !important; /* Hide "Active filters:" title on mobile */
    }
    
    body.page-category #js-active-search-filters #active-search-filters ul,
    body.page-category #active-search-filters ul,
    body.page-search #js-active-search-filters #active-search-filters ul,
    body.page-search #active-search-filters ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 8px 15px !important;
        margin: 0 -15px !important;
        list-style: none !important;
        scrollbar-width: thin !important;
        scrollbar-color: #ccc transparent !important;
        background: transparent !important;
    }
    
    /* Webkit scrollbar for active filters */
    body.page-category #active-search-filters ul::-webkit-scrollbar,
    body.page-search #active-search-filters ul::-webkit-scrollbar {
        height: 4px !important;
    }
    
    body.page-category #active-search-filters ul::-webkit-scrollbar-track,
    body.page-search #active-search-filters ul::-webkit-scrollbar-track {
        background: transparent !important;
    }
    
    body.page-category #active-search-filters ul::-webkit-scrollbar-thumb,
    body.page-search #active-search-filters ul::-webkit-scrollbar-thumb {
        background: #ccc !important;
        border-radius: 2px !important;
    }
    
    body.page-category #active-search-filters ul li,
    body.page-search #active-search-filters ul li {
        flex-shrink: 0 !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    body.page-category #active-search-filters ul li a,
    body.page-search #active-search-filters ul li a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 12px !important;
        background: #FFFFFF !important;
        border: 1px solid var(--aq-red) !important;
        border-radius: 16px !important;
        color: var(--aq-red) !important;
        font-size: 1.1rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        line-height: 1.4 !important;
    }
    
    /* Clear all button */
    body.page-category #active-search-filters ul li a.filter-block-all,
    body.page-search #active-search-filters ul li a.filter-block-all {
        background: #fff3cd !important;
        border-color: #ffc107 !important;
        color: #856404 !important;
    }
    
    /* X icon - hide the ::after since template already has <i class="las la-times"> */
    body.page-category #active-search-filters ul li a:not(.filter-block-all)::after,
    body.page-search #active-search-filters ul li a:not(.filter-block-all)::after {
        display: none !important;
        content: none !important;
    }
    
    /* Style the existing X icon from template */
    body.page-category #active-search-filters ul li a i.la-times,
    body.page-search #active-search-filters ul li a i.la-times {
        font-size: 12px !important;
        margin-left: 4px !important;
        opacity: 0.7 !important;
    }
    
    /* Left section - filter buttons */
    .nav-products-list-top-left {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        flex: 1 1 50% !important;
        max-width: calc(50% - 5px) !important;
        min-width: 0 !important;
    }
    
    /* Hide center section on mobile */
    .nav-products-list-top-center {
        display: none !important;
    }
    
    /* Right section - sort */
    .nav-products-list-top-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex: 1 1 50% !important;
        min-width: 0 !important;
    }
    
    /* Hide result count on mobile */
    .nav-products-list-top-right .wc-result-count {
        display: none !important;
    }
    
    /* 3. Filter button - wider, eMag style */
    .nav-products-list-top .filter-buttons {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }
    
    .nav-products-list-top .filter-buttons a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 20px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        color: #333 !important;
        font-size: 1.3rem !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    .nav-products-list-top .filter-buttons a:hover,
    .nav-products-list-top .filter-buttons a:active {
        background: #f5f5f5 !important;
        border-color: #ccc !important;
    }
    
    /* Remove the + icon after filter text */
    .nav-products-list-top .filter-buttons a::after {
        content: "▼" !important;
        font-family: inherit !important;
        font-size: 10px !important;
        margin-left: 5px !important;
    }
    
    /* Sort dropdown - narrower to balance with wider filter button */
    .nav-products-list-top-right {
        max-width: calc(50% - 5px) !important;
    }
    
    .nav-products-list-top .wc-ordering-dropdown {
        width: 100% !important;
    }
    
    .nav-products-list-top .wc-ordering-dropdown .dropdown-toggle,
    .nav-products-list-top .gr-per-page .dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 10px 20px !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        color: #333 !important;
        font-size: 1.3rem !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        transition: all 0.2s ease !important;
        line-height: 1.4 !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    .nav-products-list-top .wc-ordering-dropdown .dropdown-toggle:hover,
    .nav-products-list-top .gr-per-page .dropdown-toggle:hover {
        background: #f5f5f5 !important;
        border-color: #ccc !important;
    }
    
    /* Dropdown icon */
    .nav-products-list-top .wc-ordering-dropdown .dropdown-toggle .las,
    .nav-products-list-top .gr-per-page .dropdown-toggle .las {
        font-size: 12px !important;
    }
    
    /* Grid/List view icons - smaller on mobile */
    .nav-products-list-top .gr-list-gird {
        display: none !important; /* Hide on mobile - not needed */
    }
    
    /* Per page dropdown - hide on mobile */
    .nav-products-list-top .gr-per-page {
        display: none !important;
    }
}

/* -----------------------------------------
   MOBILE: FILTER OFF-CANVAS PANEL (eMag style)
   ----------------------------------------- */
@media (max-width: 991px) {
    /* Off-canvas panel header */
    #canvas-facets-search .canvas-widget-top {
        background: #1a73e8 !important;
        padding: 15px 20px !important;
    }
    
    #canvas-facets-search .title-canvas-widget {
        color: #fff !important;
        font-size: 1.6rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
    }
    
    /* Panel content */
    #canvas-facets-search .canvas-widget-content {
        padding: 0 !important;
    }
    
    /* Facet sections in panel */
    #canvas-facets-search .facet {
        border-bottom: 1px solid #eee !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #canvas-facets-search .facet .title {
        padding: 15px 20px !important;
        margin: 0 !important;
        background: #f9f9f9 !important;
    }
    
    #canvas-facets-search .facet .title .h4 {
        font-size: 1.4rem !important;
        font-weight: 600 !important;
        color: #333 !important;
        margin: 0 !important;
    }
    
    #canvas-facets-search .facet ul {
        padding: 10px 20px 15px !important;
        margin: 0 !important;
    }
    
    #canvas-facets-search .facet ul li {
        padding: 8px 0 !important;
    }
    
    #canvas-facets-search .facet-label {
        font-size: 1.4rem !important;
    }
}

/* -----------------------------------------
   ACTIVE FILTERS CHIPS (eMag style)
   ----------------------------------------- */
#js-active-search-filters {
    margin-bottom: 15px !important;
}

#js-active-search-filters .active-filter-title {
    font-size: 1.3rem !important;
    color: #666 !important;
    margin-bottom: 10px !important;
}

#js-active-search-filters ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#js-active-search-filters ul li {
    display: inline-flex !important;
}

#js-active-search-filters ul li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: #FFFFFF !important;
    border: 1px solid var(--aq-red) !important;
    border-radius: 16px !important;
    color: var(--aq-red) !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

#js-active-search-filters ul li a:hover {
    background: var(--aq-red-soft) !important;
}

#js-active-search-filters ul li a .close {
    font-size: 14px !important;
    line-height: 1 !important;
    opacity: 0.7 !important;
}

#js-active-search-filters ul li a .close:hover {
    opacity: 1 !important;
}

/* Clear all filters link */
#js-active-search-filters .js-clear-all-filters {
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    background: transparent !important;
    border: 1px solid #dc3545 !important;
    border-radius: 16px !important;
    color: #dc3545 !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

#js-active-search-filters .js-clear-all-filters:hover {
    background: #dc3545 !important;
    color: #fff !important;
}

/* Hide duplicate X icon on active filter chips (desktop + mobile) */
/* Template has <i class="las la-times">, but parent theme adds ::after with another X */
#js-active-search-filters ul li a:not(.filter-block-all)::after,
#active-search-filters ul li a:not(.filter-block-all)::after {
    display: none !important;
    content: none !important;
}

/* Style the existing X icon from template */
#js-active-search-filters ul li a i.la-times,
#js-active-search-filters ul li a i.las.la-times,
#active-search-filters ul li a i.la-times,
#active-search-filters ul li a i.las.la-times {
    font-size: 12px !important;
    margin-left: 6px !important;
    opacity: 0.7 !important;
}

#js-active-search-filters ul li a i.la-times:hover,
#active-search-filters ul li a i.la-times:hover {
    opacity: 1 !important;
}

/* ========================================
   END eMAG-STYLE CATEGORY FILTERS
   ======================================== */

/* -----------------------------------------
   MOBILE CANVAS FILTER WIDGET STYLING
   ----------------------------------------- */
.canvas-widget-content .widget-title {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    padding-top: 20px !important;
    color: var(--color-primary) !important;
}

.canvas-widget-top .title-canvas-widget::after {
    color: #fff !important;
}

/* ========================================
   PRODUCT PAGE - GALLERY SWIPER ARROWS
   Hide on desktop, show only on mobile/tablet
   ======================================== */
@media (min-width: 992px) {
    .product-images .swiper-arrows,
    .gallery-swiper-arrow {
        display: none !important;
    }
}

/* ========================================
   CART SIDEBAR - CUSTOM STYLING
   ======================================== */

/* Cart sidebar: flex column container — constrains children to sidebar height */
#canvas-mini-cart.canvas-widget {
    display: flex !important;
    flex-direction: column !important;
    width: 500px !important;
    overflow: hidden !important;
}

/* Cart sidebar: canvas-widget-top header — fixed height */
#canvas-mini-cart .canvas-widget-top {
    flex: 0 0 auto !important;
}

/* Cart sidebar: widget_shopping_cart — fills remaining space, no own scroll */
#canvas-mini-cart .widget_shopping_cart {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Cart sidebar: inner flex column for scroll + bottom bar */
#canvas-mini-cart .widget_shopping_cart_content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Subtotal and price - reduce font size from 1.8rem to 1.5rem */
#canvas-mini-cart .totals-top {
    font-size: 1.5rem !important;
}

#canvas-mini-cart .totals-top .value-top {
    font-size: 1.5rem !important;
}

/* Cart sidebar: product list scroll container */
#canvas-mini-cart .wrapper-scroll {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#canvas-mini-cart .wrapper-scroll-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    -webkit-overflow-scrolling: touch;
}

/* Ensure last product's labels + notifications aren't clipped at the scroll boundary */
#canvas-mini-cart .block-shopping-cart {
    padding-bottom: 12px !important;
    margin-bottom: 60px !important;
}

/* Each product row must contain its labels + .pswd-line-notice notification bars */
#canvas-mini-cart .cart-item-product {
    overflow: visible !important;
    padding-bottom: 6px !important;
}

/* Product right column must auto-size to include labels + notifications */
#canvas-mini-cart .cart-item-product-right {
    overflow: visible !important;
}

/* Discount notification bar - compact in sidebar */
#canvas-mini-cart .pswd-line-notice {
    font-size: 11px !important;
    padding: 6px 10px !important;
    margin: 6px 0 2px 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Cart sidebar: bottom bar — pinned to bottom, doesn't scroll */
#canvas-mini-cart .widget_shopping_cart_bottom {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 10 !important;
    background: #fff !important;
    border-top: 1px solid #e5e5e5 !important;
}

/* Cart sidebar: buttons inline (side by side) — override .btn-full width:100% */
#canvas-mini-cart .card-block-btn {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 0 !important;
}

#canvas-mini-cart .card-block-btn .btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    padding: 10px 12px !important;
    font-size: 1.2rem !important;
}

/* "Vezi coșul" button - add background color */
#canvas-mini-cart .card-block-btn a.btn.btn-outline-primary {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
}

#canvas-mini-cart .card-block-btn a.btn.btn-outline-primary:hover {
    background-color: var(--bg-color-btn-hover) !important;
    border-color: var(--bg-color-btn-hover) !important;
}

/* Hide duplicate brand/manufacturer from right product summary column (already shown on left) */
.single-product-summary .product-manufacturer {
    display: none !important;
}

/* ============================================================
   PhotoSwipe Lightbox - Fix position & overlay
   Theme's photoswipe.min.css uses position:absolute which
   renders the gallery inline instead of as a fullscreen overlay.
   ============================================================ */
.pswp {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
}

.pswp__bg {
    opacity: 0.92 !important;
}

.pswp__top-bar {
    z-index: 100000 !important;
}

.pswp__button--close,
.pswp__button--arrow--left,
.pswp__button--arrow--right {
    cursor: pointer !important;
    opacity: 0.85 !important;
}

.pswp__button--close:hover,
.pswp__button--arrow--left:hover,
.pswp__button--arrow--right:hover {
    opacity: 1 !important;
}

/* ========================================
   HEADER TOP MENU - WordPress-style online links
   ======================================== */
.whb-column.whb-col-right.whb-column7.whb-visible-lg,
.wbf-header-top-menu {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, #8a2387, #e94057, #f27121) 1;
}

.wbf-header-top-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    width: 100%;
    min-height: 38px;
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
}

.wbf-header-top-menu a {
    color: #777;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.wbf-header-top-menu a:hover,
.wbf-header-top-menu a:focus {
    color: var(--color-primary, #1367ef);
    text-decoration: none;
}

.wbf-header-top-menu__search {
    white-space: nowrap;
}

.wbf-header-top-menu__nav ul {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wbf-header-top-menu__nav li {
    margin: 0;
    padding: 0;
}

.wbf-header-top-menu__socials {
    display: flex;
    align-items: center;
    gap: 5px;
}

.wbf-header-top-menu__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #ededed;
    color: #777;
    font-size: 16px;
}

.wbf-header-top-menu__socials a:hover,
.wbf-header-top-menu__socials a:focus {
    background: #e3e3e3;
    color: #222;
}

@media (max-width: 991px) {
    .wbf-header-top-menu {
        display: none;
    }
}

/* ========================================
   PRODUCT PAGE NATIVE COLOR SWATCHES
   Scoped to main product variants only; do not affect ATT PPF or related modules.
   ======================================== */
body#product .summary-container .product-actions .product-variants > .product-variants-item.type_color .color,
body#product .summary-container .product-actions .product-variants > .product-variants-item.type_color .custom-checkbox input + span.color {
    width: 48px !important;
    height: 48px !important;
    border-radius: 0 !important;
}

body#product .summary-container .product-actions .product-variants > .product-variants-item.type_color .input-color {
    width: 48px !important;
    height: 48px !important;
}

@media (max-width: 1024px) {
    body#product .summary-container .product-actions .product-variants > .product-variants-item.type_color .corlor-tooltip {
        display: block !important;
        pointer-events: none;
    }

    body#product .summary-container .product-actions .product-variants > .product-variants-item.type_color .color:hover .corlor-tooltip,
    body#product .summary-container .product-actions .product-variants > .product-variants-item.type_color .color:active .corlor-tooltip,
    body#product .summary-container .product-actions .product-variants > .product-variants-item.type_color .input-container:focus-within .corlor-tooltip {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

.block-categories .category-sub-menu > ul {
    border-left: 0 solid var(--ax-line-color) !important;
    border-right: 0 solid var(--ax-line-color);
    margin-left: 10px;
}

/* ========================================
   AQUATEC CATEGORY RED-GRAY POLISH
   Scoped late override for category/search pages and add-to-cart actions.
   ======================================== */
:root {
    --aq-red: #D90812;
    --aq-red-dark: #B8060F;
    --aq-red-soft: #FFF1F2;
    --aq-black: #1F1F1F;
    --aq-dark-gray: #3A3A3A;
    --aq-gray: #6F6F6F;
    --aq-border: #E6E6E6;
    --aq-bg: #F6F7F8;
    --aq-card-bg: #FFFFFF;
    --aq-success-soft: #F4F8F5;
}

body.page-category #wrapper,
body.page-search #wrapper {
    background: var(--aq-bg) !important;
}

body.page-category .category-description-wrapper,
body.page-search .category-description-wrapper,
body.page-category .block-category,
body.page-search .block-category {
    background: linear-gradient(135deg, var(--aq-card-bg) 0%, #F8F8F8 100%) !important;
    border: 1px solid var(--aq-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

body.page-category .category-description-wrapper .category-description-title,
body.page-search .category-description-wrapper .category-description-title,
body.page-category .block-category h1,
body.page-search .block-category h1 {
    color: var(--aq-black) !important;
}

body.page-category .category-description,
body.page-search .category-description,
body.page-category .block-category .category-description,
body.page-search .block-category .category-description {
    color: var(--aq-dark-gray) !important;
}

body.page-category #left-column,
body.page-category #search_filters_wrapper,
body.page-search #left-column,
body.page-search #search_filters_wrapper {
    background: transparent !important;
}

body.page-category #left-column .block-categories,
body.page-category #left-column .block,
body.page-category #search_filters,
body.page-search #left-column .block-categories,
body.page-search #left-column .block,
body.page-search #search_filters {
    background: var(--aq-card-bg) !important;
    border: 1px solid var(--aq-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

body.page-category #left-column .block-categories,
body.page-search #left-column .block-categories {
    margin-bottom: 12px !important;
}

body.page-category #left-column .block,
body.page-category #search_filters,
body.page-search #left-column .block,
body.page-search #search_filters {
    margin-bottom: 16px !important;
}

body.page-category #search_filters,
body.page-search #search_filters {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.page-category #left-column .widget-facet-search.facet,
body.page-category #search_filters .widget-facet-search.facet,
body.page-search #left-column .widget-facet-search.facet,
body.page-search #search_filters .widget-facet-search.facet {
    background: var(--aq-card-bg) !important;
    border: 1px solid var(--aq-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 12px 0 !important;
    overflow: hidden !important;
}

body.page-category #left-column .widget-title,
body.page-category #left-column .widget-title.h3,
body.page-category #left-column .widget-title a,
body.page-category #left-column .facet-title,
body.page-category #left-column .title .h4,
body.page-category #left-column .h4.facet-title,
body.page-search #left-column .widget-title,
body.page-search #left-column .widget-title.h3,
body.page-search #left-column .widget-title a,
body.page-search #left-column .facet-title,
body.page-search #left-column .title .h4,
body.page-search #left-column .h4.facet-title {
    color: var(--aq-black) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    border-bottom-color: var(--aq-border) !important;
}

body.page-category #left-column .block-categories .widget-title,
body.page-category #left-column .block-categories .widget-title a,
body.page-search #left-column .block-categories .widget-title,
body.page-search #left-column .block-categories .widget-title a {
    color: var(--aq-red) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

body.page-category #left-column #_desktop_category_tree a,
body.page-category #left-column .category-sub-menu a,
body.page-category #left-column .block-categories a,
body.page-search #left-column #_desktop_category_tree a,
body.page-search #left-column .category-sub-menu a,
body.page-search #left-column .block-categories a {
    color: #2E2E2E !important;
    background-color: transparent !important;
    border-color: transparent !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

body.page-category #left-column #_desktop_category_tree a:hover,
body.page-category #left-column .category-sub-menu a:hover,
body.page-category #left-column .block-categories a:hover,
body.page-search #left-column #_desktop_category_tree a:hover,
body.page-search #left-column .category-sub-menu a:hover,
body.page-search #left-column .block-categories a:hover,
body.page-category #left-column .category-sub-menu .current > a,
body.page-category #left-column .block-categories .current > a,
body.page-category #left-column #_desktop_category_tree .current > a,
body.page-search #left-column .category-sub-menu .current > a,
body.page-search #left-column .block-categories .current > a,
body.page-search #left-column #_desktop_category_tree .current > a {
    color: var(--aq-red) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

body#product .product-variants > .product-variants-item .radio-label:hover,
body#product .product-variants > .product-variants-item .radio-label:focus,
body#product .product-variants > .product-variants-item input[type="radio"]:focus + .radio-label,
body#product .product-variants > .product-variants-item input[type="radio"]:checked + .radio-label,
body#product .product-variants > .product-variants-item .input-container input[type="radio"]:focus + label,
body#product .product-variants > .product-variants-item .input-container input[type="radio"]:checked + label,
body.page-product .product-variants > .product-variants-item .radio-label:hover,
body.page-product .product-variants > .product-variants-item .radio-label:focus,
body.page-product .product-variants > .product-variants-item input[type="radio"]:focus + .radio-label,
body.page-product .product-variants > .product-variants-item input[type="radio"]:checked + .radio-label,
body.page-product .product-variants > .product-variants-item .input-container input[type="radio"]:focus + label,
body.page-product .product-variants > .product-variants-item .input-container input[type="radio"]:checked + label {
    background-color: var(--aq-red) !important;
    border-color: var(--aq-red) !important;
    color: #FFFFFF !important;
}

#canvas-mini-cart .card-block-btn .btn-primary,
#canvas-mini-cart .card-block-btn a.btn.btn-primary,
#canvas-mini-cart .card-block-btn .btn-outline-primary,
#canvas-mini-cart .card-block-btn a.btn.btn-outline-primary {
    background-color: var(--aq-red) !important;
    border-color: var(--aq-red) !important;
    color: #FFFFFF !important;
}

#canvas-mini-cart .card-block-btn .btn-primary:hover,
#canvas-mini-cart .card-block-btn a.btn.btn-primary:hover,
#canvas-mini-cart .card-block-btn .btn-outline-primary:hover,
#canvas-mini-cart .card-block-btn a.btn.btn-outline-primary:hover {
    background-color: var(--aq-red-dark) !important;
    border-color: var(--aq-red-dark) !important;
    color: #FFFFFF !important;
}

#canvas-mini-cart .card-block-btn a.btn.btn-primary:not(.btn-outline-primary),
#canvas-mini-cart .card-block-btn a.btn.btn-primary:not(.btn-outline-primary):hover,
#canvas-mini-cart .card-block-btn a.btn.btn-primary:not(.btn-outline-primary):focus {
    background-color: #115dd8 !important;
    border-color: #115dd8 !important;
    color: #FFFFFF !important;
}

#canvas-mini-cart .card-block-btn a.btn.btn-outline-primary,
#canvas-mini-cart .card-block-btn a.btn.btn-outline-primary:hover,
#canvas-mini-cart .card-block-btn a.btn.btn-outline-primary:focus {
    background-color: #706F6C !important;
    border-color: #706F6C !important;
    color: #FFFFFF !important;
}

body.page-category #left-column .facet,
body.page-search #left-column .facet {
    border-bottom-color: var(--aq-border) !important;
}

body.page-category #left-column .facet-label,
body.page-search #left-column .facet-label,
body.page-category #_desktop_facets_search .facet-label,
body.page-search #_desktop_facets_search .facet-label,
body.page-category .widget-facet-search .facet-label,
body.page-search .widget-facet-search .facet-label,
body.page-category #left-column .facet-label a,
body.page-category #left-column .facet-label label,
body.page-search #left-column .facet-label a,
body.page-search #left-column .facet-label label {
    color: var(--aq-dark-gray) !important;
}

body.page-category #left-column .facet-label:hover,
body.page-category #left-column .facet-label:hover a,
body.page-category #left-column .facet-label:hover label,
body.page-search #left-column .facet-label:hover,
body.page-search #left-column .facet-label:hover a,
body.page-search #left-column .facet-label:hover label,
body.page-category #left-column .facet-label.active,
body.page-search #left-column .facet-label.active,
body.page-category .widget-facet-search .facet-label.active,
body.page-search .widget-facet-search .facet-label.active,
body.page-category #canvas-facets-search .facet-label.active,
body.page-search #canvas-facets-search .facet-label.active {
    color: var(--aq-red) !important;
}

body.page-category #left-column .custom-checkbox input:checked + span:not(.color),
body.page-search #left-column .custom-checkbox input:checked + span:not(.color),
body.page-category .widget-facet-search .custom-checkbox input:checked + span,
body.page-search .widget-facet-search .custom-checkbox input:checked + span,
body.page-category .widget-facet-search .custom-checkbox input:checked + .ps-shown-by-js,
body.page-search .widget-facet-search .custom-checkbox input:checked + .ps-shown-by-js,
body.page-category #canvas-facets-search .custom-checkbox input:checked + span,
body.page-search #canvas-facets-search .custom-checkbox input:checked + span,
body.page-category #canvas-facets-search .custom-checkbox input:checked + .ps-shown-by-js,
body.page-search #canvas-facets-search .custom-checkbox input:checked + .ps-shown-by-js,
body.page-category .facet-label.active .custom-checkbox .ps-shown-by-js,
body.page-search .facet-label.active .custom-checkbox .ps-shown-by-js,
body.page-category .facet-label.active .custom-checkbox span:not(.color),
body.page-search .facet-label.active .custom-checkbox span:not(.color) {
    background: var(--aq-red) !important;
    border-color: var(--aq-red) !important;
}

body.page-category .widget-facet-search .magnitude,
body.page-search .widget-facet-search .magnitude,
body.page-category #left-column .facet-label .magnitude,
body.page-search #left-column .facet-label .magnitude,
body.page-category #left-column .category-sub-menu .category-count,
body.page-category #left-column .block-categories .category-count,
body.page-search #left-column .category-sub-menu .category-count,
body.page-search #left-column .block-categories .category-count {
    color: #8A8A8A !important;
}

body.page-category .active_filters,
body.page-search .active_filters {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-category #active-search-filters,
body.page-search #active-search-filters,
body.page-category #active-search-filters ul,
body.page-search #active-search-filters ul {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.page-category #js-active-search-filters ul li a,
body.page-category #active-search-filters ul li a,
body.page-category .active_filters .filter-block,
body.page-search #js-active-search-filters ul li a,
body.page-search #active-search-filters ul li a,
body.page-search .active_filters .filter-block {
    background: #FFFFFF !important;
    color: var(--aq-red) !important;
    border: 1px solid var(--aq-red) !important;
    border-radius: 999px !important;
}

body.page-category #js-active-search-filters ul li a:hover,
body.page-category #active-search-filters ul li a:hover,
body.page-search #js-active-search-filters ul li a:hover,
body.page-search #active-search-filters ul li a:hover {
    background: var(--aq-red-soft) !important;
    color: var(--aq-red-dark) !important;
    border-color: var(--aq-red-dark) !important;
}

body.page-category #js-active-search-filters .js-clear-all-filters,
body.page-category #active-search-filters .filter-block-all,
body.page-search #js-active-search-filters .js-clear-all-filters,
body.page-search #active-search-filters .filter-block-all {
    background: var(--aq-red) !important;
    color: #FFFFFF !important;
    border-color: var(--aq-red) !important;
}

body.page-category .btn-primary,
body.page-category .btn-action.add-to-cart,
body.page-category .js-add-to-cart,
body.page-category [data-button-action="add-to-cart"],
body.page-search .btn-primary,
body.page-search .btn-action.add-to-cart,
body.page-search .js-add-to-cart,
body.page-search [data-button-action="add-to-cart"],
body.page-product .summary-container .product-add-to-cart .add-to-cart,
body.page-product .summary-container .product-add-to-cart [data-button-action="add-to-cart"] {
    background-color: var(--aq-red) !important;
    border-color: var(--aq-red) !important;
    color: #FFFFFF !important;
}

body.page-category .btn-action.add-to-cart i,
body.page-category .btn-action.add-to-cart svg,
body.page-category .js-add-to-cart i,
body.page-category .js-add-to-cart svg,
body.page-category [data-button-action="add-to-cart"] i,
body.page-category [data-button-action="add-to-cart"] svg,
body.page-search .btn-action.add-to-cart i,
body.page-search .btn-action.add-to-cart svg,
body.page-search .js-add-to-cart i,
body.page-search .js-add-to-cart svg,
body.page-search [data-button-action="add-to-cart"] i,
body.page-search [data-button-action="add-to-cart"] svg,
body.page-product .summary-container .product-add-to-cart .add-to-cart i,
body.page-product .summary-container .product-add-to-cart .add-to-cart svg,
body.page-product .summary-container .product-add-to-cart [data-button-action="add-to-cart"] i,
body.page-product .summary-container .product-add-to-cart [data-button-action="add-to-cart"] svg {
    display: none !important;
}

body.page-category .btn-action.add-to-cart::before,
body.page-category .btn-action.add-to-cart::after,
body.page-category .js-add-to-cart::before,
body.page-category .js-add-to-cart::after,
body.page-category [data-button-action="add-to-cart"]::before,
body.page-category [data-button-action="add-to-cart"]::after,
body.page-search .btn-action.add-to-cart::before,
body.page-search .btn-action.add-to-cart::after,
body.page-search .js-add-to-cart::before,
body.page-search .js-add-to-cart::after,
body.page-search [data-button-action="add-to-cart"]::before,
body.page-search [data-button-action="add-to-cart"]::after,
body.page-product .summary-container .product-add-to-cart .add-to-cart::before,
body.page-product .summary-container .product-add-to-cart .add-to-cart::after,
body.page-product .summary-container .product-add-to-cart [data-button-action="add-to-cart"]::before,
body.page-product .summary-container .product-add-to-cart [data-button-action="add-to-cart"]::after {
    display: none !important;
    content: none !important;
}

body.page-category .btn-primary:hover,
body.page-category .btn-action.add-to-cart:hover,
body.page-category .js-add-to-cart:hover,
body.page-category [data-button-action="add-to-cart"]:hover,
body.page-search .btn-primary:hover,
body.page-search .btn-action.add-to-cart:hover,
body.page-search .js-add-to-cart:hover,
body.page-search [data-button-action="add-to-cart"]:hover,
body.page-product .summary-container .product-add-to-cart .add-to-cart:hover,
body.page-product .summary-container .product-add-to-cart [data-button-action="add-to-cart"]:hover {
    background-color: var(--aq-red) !important;
    border-color: var(--aq-red) !important;
    color: #FFFFFF !important;
}

body.page-category #box-product-grid .btn-action.add-to-cart,
body.page-category #products .btn-action.add-to-cart,
body.page-category #js-product-list .btn-action.add-to-cart,
body.page-category .product-miniature .btn-action.add-to-cart,
body.page-search #box-product-grid .btn-action.add-to-cart,
body.page-search #products .btn-action.add-to-cart,
body.page-search #js-product-list .btn-action.add-to-cart,
body.page-search .product-miniature .btn-action.add-to-cart {
    background-color: var(--aq-red) !important;
    border: 1px solid var(--aq-red) !important;
    color: #FFFFFF !important;
}

body.page-category #box-product-grid .btn-action.add-to-cart span,
body.page-category #products .btn-action.add-to-cart span,
body.page-category #js-product-list .btn-action.add-to-cart span,
body.page-category .product-miniature .btn-action.add-to-cart span,
body.page-search #box-product-grid .btn-action.add-to-cart span,
body.page-search #products .btn-action.add-to-cart span,
body.page-search #js-product-list .btn-action.add-to-cart span,
body.page-search .product-miniature .btn-action.add-to-cart span {
    color: inherit !important;
}

body.page-category #box-product-grid .btn-action.add-to-cart:hover,
body.page-category #products .btn-action.add-to-cart:hover,
body.page-category #js-product-list .btn-action.add-to-cart:hover,
body.page-category .product-miniature .btn-action.add-to-cart:hover,
body.page-search #box-product-grid .btn-action.add-to-cart:hover,
body.page-search #products .btn-action.add-to-cart:hover,
body.page-search #js-product-list .btn-action.add-to-cart:hover,
body.page-search .product-miniature .btn-action.add-to-cart:hover {
    background-color: var(--aq-red-dark) !important;
    border-color: var(--aq-red-dark) !important;
    color: #FFFFFF !important;
}

body.page-category #box-product-grid .item-inner,
body.page-category #products .product-miniature .item-inner,
body.page-category #js-product-list .product-miniature .item-inner,
body.page-search #box-product-grid .item-inner,
body.page-search #products .product-miniature .item-inner,
body.page-search #js-product-list .product-miniature .item-inner {
    border: 1px solid var(--aq-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

body.page-category #box-product-grid .element-top,
body.page-category #products .product-miniature .element-top,
body.page-category #js-product-list .product-miniature .element-top,
body.page-search #box-product-grid .element-top,
body.page-search #products .product-miniature .element-top,
body.page-search #js-product-list .product-miniature .element-top {
    background: #FFFFFF !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 14px !important;
}

body.page-category #box-product-grid .wrapper-imgs,
body.page-category #products .product-miniature .wrapper-imgs,
body.page-category #js-product-list .product-miniature .wrapper-imgs,
body.page-search #box-product-grid .wrapper-imgs,
body.page-search #products .product-miniature .wrapper-imgs,
body.page-search #js-product-list .product-miniature .wrapper-imgs {
    background: #FFFFFF !important;
    border-radius: 6px !important;
}

body.page-product .horizontal-thumb.images-cover-slider .images-container,
body.page-product .product-images-fullwidth .images-container,
body.page-product .images-container.js-images-container {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
}

.images-container.js-images-container.wbf-img-protected.wbf-img-noclick {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: 100% !important;
    background: #FFF !important;
    border: 1px solid var(--aq-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07) !important;
    padding: 15px !important;
}

body.page-product .product-images-cover,
body.page-product .product-cover,
body.page-product .product-images-fullwidth .wrapper-imgs {
    background: #FFFFFF !important;
    border: 1px solid var(--aq-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07) !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
}

/* Product 683 uses a bespoke full-width image strip; remove the card surface only there. */
body.product-id-683 .product-images-fullwidth .product-images-cover,
body.product-id-683 .product-images-fullwidth .wrapper-imgs,
body.product-id-683 .product-images-fullwidth .img-light-box,
body.product-id-683 .product-images-fullwidth .easyzoom,
body.product-id-683 .product-images-fullwidth .easyzoom-product,
body.product-id-683 .product-images-fullwidth .p-ax-img-loader {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.product-id-683 .product-images-fullwidth .product-images-cover,
body.product-id-683 .product-images-fullwidth .wrapper-imgs {
    margin-bottom: 0 !important;
    overflow: visible !important;
}

body.product-id-683 .product-images-fullwidth .gr-btn-additional {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Product-2 layout (wbf_solutions finishing-cycle products, e.g. 477 / 498)
   uses the bespoke full-width desktop image strip. Drop the card frame that the
   `.images-container.js-images-container.wbf-img-protected.wbf-img-noclick` rule
   (above) puts around it, so the images sit flush instead of inside a
   bordered/shadowed box. Scoped to .product-layout-2 so only this layout is
   affected; .product-images-fullwidth is desktop-only (hidden-md-down). */
body.page-product .product-layout-2 .product-images-fullwidth .images-container.js-images-container.wbf-img-protected.wbf-img-noclick {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Product-2 layout (wbf_solutions cicluri): on mobile the cover arrows are
   enough, so hide the thumbnail strip to reclaim vertical space. The strip is
   only HIDDEN, never removed — axoncreator's gallery init needs the
   .js-images-thumb element in the DOM or it crashes the cover Swiper. */
@media (max-width: 991px) {
    body.page-product .product-layout-2 .horizontal-thumb.images-cover-slider .product-images-thumb {
        display: none !important;
    }
}

body.page-product .product-images-thumb {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    margin: 0 0 10px 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body#product .horizontal-thumb.images-cover-slider .product-images-thumb,
body.page-product .horizontal-thumb.images-cover-slider .product-images-thumb {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body#product .horizontal-thumb.images-cover-slider .product-images-thumb,
body.page-product .horizontal-thumb.images-cover-slider .product-images-thumb,
body#product .horizontal-thumb.images-cover-slider .images-thumb-wrapper,
body.page-product .horizontal-thumb.images-cover-slider .images-thumb-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.page-product .product-images-thumb .wrapper-imgs {
    border-color: var(--aq-border) !important;
    box-shadow: none !important;
}

body.page-product .product-information {
    background: #FFFFFF !important;
    border: 1px solid var(--aq-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07) !important;
    padding: 20px !important;
}

body.page-product .accordion-title[href="#description"] {
    border-top: 0 !important;
}

@media (max-width: 991px) {
    body#product .horizontal-thumb.images-cover-slider .images-container,
    body#product .images-container.js-images-container,
    body.page-product .horizontal-thumb.images-cover-slider .images-container,
    body.page-product .images-container.js-images-container {
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body#product .horizontal-thumb.images-cover-slider .product-images-cover,
    body#product .product-images-cover,
    body#product .product-cover,
    body.page-product .horizontal-thumb.images-cover-slider .product-images-cover,
    body.page-product .product-images-cover,
    body.page-product .product-cover {
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body#product .horizontal-thumb.images-cover-slider .wrapper-imgs,
    body#product .horizontal-thumb.images-cover-slider .easyzoom,
    body#product .horizontal-thumb.images-cover-slider .easyzoom-product,
    body#product .horizontal-thumb.images-cover-slider .img-light-box,
    body#product .horizontal-thumb.images-cover-slider .p-ax-img-loader,
    body.page-product .horizontal-thumb.images-cover-slider .wrapper-imgs,
    body.page-product .horizontal-thumb.images-cover-slider .easyzoom,
    body.page-product .horizontal-thumb.images-cover-slider .easyzoom-product,
    body.page-product .horizontal-thumb.images-cover-slider .img-light-box,
    body.page-product .horizontal-thumb.images-cover-slider .p-ax-img-loader {
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    body#product .horizontal-thumb.images-cover-slider .wrapper-imgs img,
    body#product .horizontal-thumb.images-cover-slider .p-ax-img-loader img,
    body#product .product-images-cover img,
    body.page-product .horizontal-thumb.images-cover-slider .wrapper-imgs img,
    body.page-product .horizontal-thumb.images-cover-slider .p-ax-img-loader img,
    body.page-product .product-images-cover img {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }
}

body.page-category .products-sort-order .select-title,
body.page-category .dropdown .expand-more,
body.page-category .showing .btn,
body.page-category #js-product-list-top .btn,
body.page-search .products-sort-order .select-title,
body.page-search .dropdown .expand-more,
body.page-search .showing .btn,
body.page-search #js-product-list-top .btn {
    border-color: var(--aq-border) !important;
    color: var(--aq-black) !important;
}

body.page-category .product-price,
body.page-category .product-miniature .price,
body.page-category #box-product-grid .price,
body.page-category .products .price,
body.page-search .product-price,
body.page-search .product-miniature .price,
body.page-search #box-product-grid .price,
body.page-search .products .price {
    color: var(--aq-black) !important;
    font-weight: 700 !important;
}

body.page-category .active-color,
body.page-search .active-color,
body.page-category .title-canvas-widget,
body.page-search .title-canvas-widget {
    color: var(--aq-red) !important;
}
.btn-outline-primary {
  color: #000 !important;
  background-color: transparent;
  border-color:  var(--aq-red) !important;
}

.btn-outline-primary:hover  {
  color: #fff !important;
  background-color: #C40710 !important;
  border-color: #C40710 !important;
}

/* WBF reversible ATTPPF save-button outline guard (2026-05-29)
   Akira global.css sets .btn-outline-primary.active/.focus to the theme
   hover color, which can be blue on the native customization save button. */
body#product .product-customization button.btn-outline-primary[name="submitCustomizedData"],
body#product .js-product-customization button.btn-outline-primary[name="submitCustomizedData"] {
  color: #fff !important;
  background-color: #e30613 !important;
  border-color: #e30613 !important;
  box-shadow: none !important;
}

body#product .product-customization button.btn-outline-primary[name="submitCustomizedData"].active,
body#product .product-customization button.btn-outline-primary[name="submitCustomizedData"].focus,
body#product .product-customization button.btn-outline-primary[name="submitCustomizedData"]:active,
body#product .product-customization button.btn-outline-primary[name="submitCustomizedData"]:focus,
body#product .product-customization button.btn-outline-primary[name="submitCustomizedData"]:focus-visible,
body#product .product-customization button.btn-outline-primary[name="submitCustomizedData"]:hover,
body#product .js-product-customization button.btn-outline-primary[name="submitCustomizedData"].active,
body#product .js-product-customization button.btn-outline-primary[name="submitCustomizedData"].focus,
body#product .js-product-customization button.btn-outline-primary[name="submitCustomizedData"]:active,
body#product .js-product-customization button.btn-outline-primary[name="submitCustomizedData"]:focus,
body#product .js-product-customization button.btn-outline-primary[name="submitCustomizedData"]:focus-visible,
body#product .js-product-customization button.btn-outline-primary[name="submitCustomizedData"]:hover {
  color: #fff !important;
  background-color: #C40710 !important;
  border-color: #C40710 !important;
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(227, 6, 19, 0.2) !important;
}

.elementor-element.elementor-element-680c3db.elementor-section-content-middle.hidden-md-down.elementor-hidden-tablet.elementor-hidden-phone.elementor-section-boxed.elementor-section-height-default.elementor-section.elementor-top-section {
  background: linear-gradient(90deg, #491113 0%, #7B0C11 50%, #B61C23 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

.product-type-1 .item-inner .btn-action:not(.loading):hover {
  color: var(--color-btn-hover) !important;
  background-color: #c40710 !important;
}

@media (max-width: 767px) {
    #header-normal .elementor-element-891014e .elementor-element-9622a3f {
        display: none !important;
    }

    body#product .horizontal-thumb.images-cover-slider .product-images-cover,
    body#product .horizontal-thumb.images-cover-slider .js-images-cover,
    body#product .horizontal-thumb.images-cover-slider .swiper-wrapper,
    body#product .horizontal-thumb.images-cover-slider .swiper-slide,
    body#product .horizontal-thumb.images-cover-slider .img-light-box,
    body#product .horizontal-thumb.images-cover-slider .wrapper-imgs,
    body#product .horizontal-thumb.images-cover-slider .p-ax-img-loader,
    body.page-product .horizontal-thumb.images-cover-slider .product-images-cover,
    body.page-product .horizontal-thumb.images-cover-slider .js-images-cover,
    body.page-product .horizontal-thumb.images-cover-slider .swiper-wrapper,
    body.page-product .horizontal-thumb.images-cover-slider .swiper-slide,
    body.page-product .horizontal-thumb.images-cover-slider .img-light-box,
    body.page-product .horizontal-thumb.images-cover-slider .wrapper-imgs,
    body.page-product .horizontal-thumb.images-cover-slider .p-ax-img-loader {
        height: min(78vw, 360px) !important;
        max-height: 360px !important;
        overflow: hidden !important;
    }

    body#product .horizontal-thumb.images-cover-slider .easyzoom,
    body#product .horizontal-thumb.images-cover-slider .easyzoom-product,
    body.page-product .horizontal-thumb.images-cover-slider .easyzoom,
    body.page-product .horizontal-thumb.images-cover-slider .easyzoom-product {
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        height: 100% !important;
        max-height: none !important;
        pointer-events: none !important;
    }

    body#product .horizontal-thumb.images-cover-slider .wrapper-imgs img,
    body#product .horizontal-thumb.images-cover-slider .p-ax-img-loader img,
    body#product .product-images-cover img,
    body.page-product .horizontal-thumb.images-cover-slider .wrapper-imgs img,
    body.page-product .horizontal-thumb.images-cover-slider .p-ax-img-loader img,
    body.page-product .product-images-cover img {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 360px !important;
        object-fit: contain !important;
        object-position: center center !important;
        opacity: 1 !important;
    }
}

.gr-list-gird {
  display: none !important;
}

/* =========================================================================
   FIX: Off-canvas panels leaking into the viewport on mobile
   -------------------------------------------------------------------------
   Symptom: on mobile (notably iOS Safari at viewports wider than 375px) the
   category page and other product pages can be panned horizontally, with the
   product grid shifted right and the left edge of cards cut off.

   Root cause: the compiled akira theme stylesheet (assets/mod_css/global.css)
   positions .canvas-widget panels with only `left: 100%` / `right: 100%` and
   does NOT set opacity/visibility/pointer-events/transform on the closed
   state. On viewports where `100%` resolves against the documentElement
   width (375) instead of the actual viewport (e.g. 390 on iPhone 12+), the
   right-side panels (#canvas-my-account, #canvas-mini-cart) end up at
   left:375px, width:360px — meaning ~15px of each panel pokes into the
   visible viewport. They have pointer-events:auto and visibility:visible,
   so the document becomes horizontally pannable and the grid misaligns.

   Fix: enforce a truly off-screen closed state via transform + opacity +
   visibility + pointer-events. The theme's `.open-canvas` rule still wins
   when a panel is actually opened (higher specificity due to combined
   selectors below, plus !important guards).
   ========================================================================= */
.canvas-widget.canvas-right:not(.open-canvas) {
    left: auto !important;
    right: 0 !important;
    -webkit-transform: translateX(100%) !important;
    transform: translateX(100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.canvas-widget.canvas-left:not(.open-canvas) {
    right: auto !important;
    left: 0 !important;
    -webkit-transform: translateX(-100%) !important;
    transform: translateX(-100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.canvas-widget.open-canvas {
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Safety net: keep the body from being horizontally scrollable on small
   viewports regardless of any other widget that might overflow.
   Body already has overflow-x: hidden inline, but some Elementor sections
   re-enable it; reinforce on html as well for mobile. */
@media (max-width: 991px) {
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* =========================================================================
   BRANDED 404 PAGE
   -------------------------------------------------------------------------
   Used by templates/errors/404.tpl in this child theme. All styles are
   scoped to the .aq-404 root so they cannot leak elsewhere.
   ========================================================================= */
.aq-404 {
    --aq404-red: var(--aq-red, #D90812);
    --aq404-red-dark: var(--aq-red-dark, #B8060F);
    --aq404-ink: var(--aq-black, #1F1F1F);
    --aq404-muted: var(--aq-gray, #6F6F6F);
    --aq404-border: var(--aq-border, #E6E6E6);
    --aq404-bg: var(--aq-bg, #F6F7F8);
    --aq404-card: var(--aq-card-bg, #FFFFFF);

    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    padding: 34px 20px 42px;
    background:
        radial-gradient(1100px 480px at 50% -120px, rgba(217, 8, 18, 0.06), transparent 60%),
        var(--aq404-bg);
    color: var(--aq404-ink);
    font-family: Mulish, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

.aq-404 *,
.aq-404 *::before,
.aq-404 *::after {
    box-sizing: border-box;
}

.aq-404 .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.aq-404__container {
    width: 100%;
    max-width: 760px;
    text-align: center;
    background: var(--aq404-card);
    border: 1px solid var(--aq404-border);
    border-radius: 18px;
    padding: 34px 38px 32px;
    box-shadow: 0 10px 34px rgba(31, 31, 31, 0.06);
}

.aq-404__brand {
    display: flex;
    justify-content: center;
    margin: 0 auto 10px;
}

.aq-404__brand img {
    display: block;
    width: min(190px, 58vw);
    height: auto;
}

.aq-404__visual {
    position: relative;
    margin: 0 auto 12px;
    width: 100%;
    max-width: 430px;
    color: var(--aq404-red);
    line-height: 1;
}

.aq-404__code {
    display: block;
    font-family: Mulish, Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(104px, 13vw, 154px);
    letter-spacing: -0.04em;
    line-height: 0.82;
    color: var(--aq404-red);
    text-shadow: 0 6px 0 rgba(217, 8, 18, 0.08);
    white-space: nowrap;
}

.aq-404__title {
    margin: 0 0 8px;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    color: var(--aq404-ink);
    letter-spacing: -0.01em;
}

.aq-404__lede {
    margin: 0 auto 22px;
    max-width: 520px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--aq404-muted);
}

.aq-404__search {
    max-width: 520px;
    margin: 0 auto 20px;
}

.aq-404__search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 16px;
    background: #fff;
    border: 1px solid var(--aq404-border);
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(31, 31, 31, 0.02);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aq-404__search-field:focus-within {
    border-color: var(--aq404-red);
    box-shadow: 0 0 0 4px rgba(217, 8, 18, 0.12);
}

.aq-404__search-icon {
    flex: 0 0 auto;
    color: var(--aq404-muted);
}

.aq-404__search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 10px 4px;
    font: inherit;
    color: var(--aq404-ink);
}

.aq-404__search input[type="search"]::placeholder {
    color: var(--aq404-muted);
    opacity: 0.85;
}

.aq-404__search-btn {
    flex: 0 0 auto;
    appearance: none;
    border: 0;
    background: var(--aq404-red);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    padding: 12px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}

.aq-404__search-btn:hover {
    background: var(--aq404-red-dark);
}

.aq-404__search-btn:active {
    transform: translateY(1px);
}

.aq-404__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 22px;
}

.aq-404__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.aq-404__btn--primary {
    background: var(--aq404-red);
    color: #fff;
}

.aq-404__btn--primary:hover,
.aq-404__btn--primary:focus {
    background: var(--aq404-red-dark);
    color: #fff;
    text-decoration: none;
}

.aq-404__btn--secondary {
    background: #fff;
    color: var(--aq404-ink);
    border-color: var(--aq404-border);
}

.aq-404__btn--secondary:hover,
.aq-404__btn--secondary:focus {
    border-color: var(--aq404-ink);
    color: var(--aq404-ink);
    text-decoration: none;
}

.aq-404__btn:active {
    transform: translateY(1px);
}

.aq-404__quicklinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 14px;
    padding-top: 18px;
    border-top: 1px dashed var(--aq404-border);
    font-size: 13px;
}

.aq-404__quicklinks-label {
    color: var(--aq404-muted);
    font-weight: 600;
    margin-right: 4px;
}

.aq-404__quicklinks a {
    color: var(--aq404-ink);
    text-decoration: none;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(31, 31, 31, 0.04);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.aq-404__quicklinks a:hover,
.aq-404__quicklinks a:focus {
    background: rgba(217, 8, 18, 0.10);
    color: var(--aq404-red-dark);
    text-decoration: none;
}

/* The Akira 404 layout includes empty title/notification regions before the
   content block. Collapse them only on the 404 page so the card starts near
   the real header instead of halfway down the screen. */
body.page-pagenotfound #header,
body.pagenotfound #header {
    margin-bottom: 0 !important;
}

body.page-pagenotfound #wrapper,
body.pagenotfound #wrapper {
    background: var(--aq-bg, #F6F7F8) !important;
    padding-bottom: 0 !important;
}

body.page-pagenotfound,
body.pagenotfound {
    background: var(--aq-bg, #F6F7F8) !important;
}

body.page-pagenotfound main,
body.pagenotfound main {
    background: var(--aq-bg, #F6F7F8) !important;
}

body.page-pagenotfound #wrapper > .page-title,
body.page-pagenotfound #wrapper > #notifications,
body.pagenotfound #wrapper > .page-title,
body.pagenotfound #wrapper > #notifications {
    display: none !important;
}

body.page-pagenotfound #footer,
body.pagenotfound #footer {
    display: none !important;
}

/* ==========================================================================
   Desktop products megamenu
   ========================================================================= */
@media (min-width: 992px) {
    .wrapper-menu-horizontal .aq-custom-menu-item {
        position: static !important;
    }

    #header-normal .elementor-element-99ac6ed,
    #header-sticky .elementor-element-99ac6ed {
        position: static !important;
    }

    #header-normal .wrapper-menu-horizontal .aq-custom-menu-item > .aq-megamenu,
    #header-sticky .wrapper-menu-horizontal .aq-custom-menu-item > .aq-megamenu {
        left: -30px !important;
        right: auto !important;
        width: calc(100% + 45px) !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(31, 31, 31, 0.08) !important;
        border-radius: 0 0 10px 10px !important;
        box-shadow: 0 18px 44px rgba(20, 24, 31, 0.14) !important;
        overflow: hidden !important;
        -webkit-transform: translateY(15px) !important;
        transform: translateY(15px) !important;
    }

    #header-sticky .wrapper-menu-horizontal .aq-custom-menu-item > .aq-megamenu {
        left: calc((914px - min(1040px, calc(100vw - 30px))) / 2 - 15px) !important;
        width: min(1040px, calc(100vw - 30px)) !important;
        box-sizing: border-box !important;
    }

    #header-normal .wrapper-menu-horizontal .aq-custom-menu-item:hover > .aq-megamenu,
    #header-sticky .wrapper-menu-horizontal .aq-custom-menu-item:hover > .aq-megamenu {
        -webkit-transform: translateY(0) !important;
        transform: translateY(0) !important;
    }

    .aq-megamenu .container-parent {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .aq-megamenu__grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 330px !important;
        gap: 0 !important;
        min-height: 0 !important;
        background: #FFFFFF !important;
    }

    .aq-megamenu__products {
        padding: 22px 18px 22px 22px !important;
    }

    .aq-megamenu__section-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 18px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--aq-border, #E6E6E6) !important;
    }

    .aq-megamenu__section-head span {
        position: relative !important;
        color: var(--aq-red, #D90812) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.03em !important;
        text-transform: uppercase !important;
    }

    .aq-megamenu__section-head span::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        bottom: -13px !important;
        width: 40px !important;
        height: 2px !important;
        background: var(--aq-red, #D90812) !important;
    }

    .aq-megamenu__section-head a,
    .aq-megamenu__footer a {
        color: var(--aq-red, #D90812) !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
        text-decoration: none !important;
    }

    .aq-megamenu__product-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px 10px !important;
    }

    .aq-megamenu__product-link {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) 10px !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 58px !important;
        padding: 7px 6px !important;
        color: var(--aq-black, #1F1F1F) !important;
        border-radius: 10px !important;
        text-decoration: none !important;
        transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
    }

    .aq-megamenu__product-link::after {
        content: "\203A" !important;
        color: #9A9A9A !important;
        font-size: 20px !important;
        line-height: 1 !important;
        transition: color 0.18s ease, transform 0.18s ease !important;
    }

    .aq-megamenu__product-link:hover,
    .aq-megamenu__product-link:focus {
        color: var(--aq-red, #D90812) !important;
        background: var(--aq-red-soft, #FFF1F2) !important;
        transform: translateX(2px) !important;
    }

    .aq-megamenu__product-link:hover::after,
    .aq-megamenu__product-link:focus::after {
        color: var(--aq-red, #D90812) !important;
        transform: translateX(2px) !important;
    }

    .aq-megamenu__product-link strong {
        display: block !important;
        color: inherit !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    .aq-megamenu__product-link small {
        display: -webkit-box !important;
        margin-top: 3px !important;
        overflow: hidden !important;
        color: var(--aq-gray, #6F6F6F) !important;
        font-size: 11px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .aq-megamenu__thumb {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        overflow: hidden !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(31, 31, 31, 0.12) !important;
        border-radius: 8px !important;
    }

    .aq-megamenu__thumb img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .aq-megamenu__support {
        padding: 22px 22px 22px 0 !important;
    }

    .aq-megamenu__support-card {
        box-sizing: border-box !important;
        height: 100% !important;
        min-height: 0 !important;
        padding: 22px 20px !important;
        background: var(--aq-red-soft, #FFF1F2) !important;
        border: 1px solid rgba(217, 8, 18, 0.12) !important;
        border-radius: 12px !important;
        color: var(--aq-black, #1F1F1F) !important;
    }

    .aq-megamenu__support-icon {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 14px !important;
        color: var(--aq-red, #D90812) !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(217, 8, 18, 0.20) !important;
        border-radius: 999px !important;
    }

    .aq-megamenu__support-icon svg {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        fill: currentColor !important;
    }

    .aq-megamenu__support-card h3 {
        margin: 0 0 10px !important;
        color: var(--aq-black, #1F1F1F) !important;
        font-size: 17px !important;
        font-weight: 800 !important;
    }

    .aq-megamenu__support-card p {
        margin: 0 0 16px !important;
        color: var(--aq-dark-gray, #3A3A3A) !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .aq-megamenu__support-cta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 42px !important;
        margin-bottom: 16px !important;
        padding: 0 18px !important;
        color: #FFFFFF !important;
        background: var(--aq-red, #D90812) !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    .aq-megamenu__support-cta:hover,
    .aq-megamenu__support-cta:focus {
        color: #FFFFFF !important;
        background: var(--aq-red-dark, #B8060F) !important;
    }

    .aq-megamenu__support-list {
        display: grid !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .aq-megamenu__support-list li {
        position: relative !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 9px !important;
        padding-left: 0 !important;
        color: var(--aq-dark-gray, #3A3A3A) !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .aq-megamenu__check {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: static !important;
        flex: 0 0 16px !important;
        width: 16px !important;
        height: 16px !important;
        margin-top: 1px !important;
        color: var(--aq-red, #D90812) !important;
    }

    .aq-megamenu__check svg {
        display: block !important;
        width: 16px !important;
        height: 16px !important;
        fill: currentColor !important;
    }

    .aq-megamenu__footer {
        display: none !important;
    }

    .aq-megamenu-curated {
        min-height: 0 !important;
    }

    .aq-curated-menu__columns {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 28px !important;
        padding: 24px 28px 26px !important;
        background: #FFFFFF !important;
    }

    .aq-curated-menu__columns.has-support {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 330px !important;
        gap: 14px !important;
    }

    .aq-curated-menu__head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 14px !important;
        margin-bottom: 14px !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--aq-border, #E6E6E6) !important;
    }

    .aq-curated-menu__head span {
        position: relative !important;
        color: var(--aq-red, #D90812) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        letter-spacing: 0.03em !important;
        line-height: 1.25 !important;
        text-transform: uppercase !important;
    }

    .aq-curated-menu__head span::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        bottom: -13px !important;
        width: 38px !important;
        height: 2px !important;
        background: var(--aq-red, #D90812) !important;
    }

    .aq-curated-menu__head a {
        color: var(--aq-red, #D90812) !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        letter-spacing: 0.02em !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
    }

    .aq-curated-menu__list {
        display: grid !important;
        gap: 7px !important;
    }

    .aq-curated-menu__list .aq-megamenu__product-link {
        grid-template-columns: 34px minmax(0, 1fr) 10px !important;
        min-height: 56px !important;
    }

    #header-normal .aq-megamenu-curated .aq-curated-menu__support,
    #header-sticky .aq-megamenu-curated .aq-curated-menu__support,
    .aq-curated-menu__support {
        width: 330px !important;
        max-width: 330px !important;
        padding: 0 22px 22px 0 !important;
        box-sizing: border-box !important;
    }

    #header-normal .aq-megamenu-curated .aq-curated-menu__support .aq-megamenu__support-card,
    #header-sticky .aq-megamenu-curated .aq-curated-menu__support .aq-megamenu__support-card {
        width: 100% !important;
    }

    #header-normal .aq-sticky-heading-break {
        display: none !important;
    }

    #header-sticky .aq-sticky-heading-break {
        display: block !important;
    }

    .aq-random-item.is-hidden {
        display: none !important;
    }

    #header-sticky .elementor-element-rbuiagf,
    #header-sticky .elementor-element-rbuiagf > .elementor-container,
    #header-sticky .elementor-element-rbuiagf > .elementor-container > .elementor-row,
    #header-sticky .elementor-element-dbjspel,
    #header-sticky .elementor-element-dbjspel > .elementor-column-wrap,
    #header-sticky .elementor-element-dbjspel .elementor-widget-wrap,
    #header-sticky .elementor-element-680c3db,
    #header-sticky .elementor-element-680c3db > .elementor-container,
    #header-sticky .elementor-element-680c3db > .elementor-container > .elementor-row,
    #header-sticky .elementor-element-239a3c0,
    #header-sticky .elementor-element-239a3c0 > .elementor-column-wrap,
    #header-sticky .elementor-element-239a3c0 .elementor-widget-wrap,
    #header-sticky .elementor-element-99ac6ed,
    #header-sticky .wrapper-menu-horizontal,
    #header-sticky .menu-horizontal {
        min-height: 52px !important;
        height: 52px !important;
    }

    #header-sticky .wrapper-menu-horizontal {
        width: 914px !important;
        max-width: 914px !important;
    }

    #header-sticky .menu-horizontal {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 914px !important;
        max-width: 914px !important;
    }

    #header-sticky .menu-horizontal .item-level-0 {
        flex: 0 0 auto !important;
    }

    #header-sticky .elementor-element-dbjspel > .elementor-column-wrap,
    #header-sticky .elementor-element-239a3c0 > .elementor-column-wrap {
        width: 914px !important;
        max-width: 914px !important;
    }

    #header-normal .menu-horizontal .item-level-0 > a,
    #header-sticky .menu-horizontal .item-level-0 > a {
        height: 52px !important;
        min-height: 52px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .aq-megamenu__grid {
        grid-template-columns: minmax(0, 1fr) 300px !important;
    }

    .aq-megamenu__product-list {
        grid-template-columns: 1fr !important;
    }

    .aq-curated-menu__columns.has-support {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px !important;
    }

    #header-normal .aq-megamenu-curated .aq-curated-menu__support,
    #header-sticky .aq-megamenu-curated .aq-curated-menu__support,
    .aq-curated-menu__support {
        width: 300px !important;
        max-width: 300px !important;
    }
}

@media (max-width: 991px) {
    #canvas-menu-mobile .title-canvas-widget {
        color: var(--aq-red, #D90812) !important;
    }

    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap {
        transition: background 0.18s ease, color 0.18s ease !important;
    }

    #canvas-menu-mobile .aq-mobile-simple-menu a,
    #canvas-menu-mobile .aq-mobile-simple-menu a:visited {
        color: var(--aq-black, #1F1F1F) !important;
    }

    #canvas-menu-mobile .aq-mobile-simple-menu .aq-mobile-simple-menu__sublink,
    #canvas-menu-mobile .aq-mobile-simple-menu .aq-mobile-simple-menu__sublink:visited {
        color: var(--aq-black, #1F1F1F) !important;
    }

    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap:hover,
    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap:focus-within,
    #canvas-menu-mobile .aq-mobile-simple-menu .open > .menu_a_wrap,
    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap.active {
        background: var(--aq-red-soft, #FFF1F2) !important;
    }

    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap:hover > a,
    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap:focus-within > a,
    #canvas-menu-mobile .aq-mobile-simple-menu .open > .menu_a_wrap > a,
    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap.active > a,
    #canvas-menu-mobile .aq-mobile-simple-menu a:hover,
    #canvas-menu-mobile .aq-mobile-simple-menu a:focus,
    #canvas-menu-mobile .aq-mobile-simple-menu a:active {
        color: var(--aq-red, #D90812) !important;
    }

    #canvas-menu-mobile .aq-mobile-simple-menu .icon-opener {
        background: var(--aq-red, #D90812) !important;
        color: #FFFFFF !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.45) !important;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
        transition: background 0.18s ease !important;
    }

    #canvas-menu-mobile .aq-mobile-simple-menu .icon-opener:hover,
    #canvas-menu-mobile .aq-mobile-simple-menu .icon-opener:focus {
        background: var(--aq-red-dark, #B8060F) !important;
    }

    #canvas-menu-mobile .aq-mobile-support-card {
        margin: 18px 12px 24px !important;
        padding: 22px 20px !important;
        background: var(--aq-red-soft, #FFF1F2) !important;
        border: 1px solid rgba(217, 8, 18, 0.16) !important;
        border-radius: 10px !important;
    }

    #canvas-menu-mobile .aq-mobile-support-card__icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        margin-bottom: 14px !important;
        color: var(--aq-red, #D90812) !important;
        background: #FFFFFF !important;
        border: 1px solid rgba(217, 8, 18, 0.22) !important;
        border-radius: 999px !important;
    }

    #canvas-menu-mobile .aq-mobile-support-card__icon svg {
        width: 20px !important;
        height: 20px !important;
        fill: currentColor !important;
    }

    #canvas-menu-mobile .aq-mobile-support-card h3 {
        margin: 0 0 10px !important;
        color: var(--aq-black, #1F1F1F) !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
    }

    #canvas-menu-mobile .aq-mobile-support-card p {
        margin: 0 0 16px !important;
        color: var(--aq-dark-gray, #3A3A3A) !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    #canvas-menu-mobile .aq-mobile-support-card__cta {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 42px !important;
        color: #FFFFFF !important;
        background: var(--aq-red, #D90812) !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    #canvas-menu-mobile .aq-mobile-support-card__cta:hover,
    #canvas-menu-mobile .aq-mobile-support-card__cta:focus {
        color: #FFFFFF !important;
        background: var(--aq-red-dark, #B8060F) !important;
    }
}

/* ==========================================================================
   Mobile canvas drawers: filter + account polish
   ========================================================================= */
@media (max-width: 991px) {
    #canvas-facets-search .canvas-widget-top,
    #canvas-my-account .canvas-widget-top {
        min-height: 64px !important;
        padding: 0 !important;
        background: #FFFFFF !important;
        border-bottom: 1px solid var(--aq-border, #E6E6E6) !important;
        box-shadow: none !important;
    }

    #canvas-facets-search .title-canvas-widget,
    #canvas-my-account .title-canvas-widget {
        display: flex !important;
        align-items: center !important;
        min-height: 64px !important;
        padding: 0 56px 0 20px !important;
        color: var(--aq-red, #D90812) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
    }

    #canvas-facets-search .title-canvas-widget::after,
    #canvas-my-account .title-canvas-widget::after {
        right: 18px !important;
        top: 50% !important;
        color: var(--aq-red, #D90812) !important;
        font-size: 22px !important;
        transform: translateY(-50%) !important;
    }

    #canvas-facets-search .canvas-widget-content {
        background: #F6F7F8 !important;
    }

    #canvas-facets-search #search_filters,
    #canvas-facets-search #search_filters_wrapper,
    #canvas-facets-search #_mobile_facets_search {
        background: transparent !important;
    }

    #canvas-facets-search .widget-facet-search.facet {
        margin: 12px 12px 0 !important;
        overflow: hidden !important;
        background: var(--aq-card-bg, #FFFFFF) !important;
        border: 1px solid var(--aq-border, #E6E6E6) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #canvas-facets-search .widget-facet-search .widget-title,
    #canvas-facets-search .widget-facet-search .widget-title h3,
    #canvas-facets-search .widget-facet-search .widget-title h3 span,
    #canvas-facets-search .widget-facet-search .facet-title,
    #canvas-facets-search .widget-facet-search .title .h4,
    #canvas-facets-search .widget-facet-search .h4.facet-title {
        color: var(--aq-black, #1F1F1F) !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        text-transform: uppercase !important;
    }

    #canvas-facets-search .widget-facet-search .widget-title,
    #canvas-facets-search .widget-facet-search .title {
        margin: 0 !important;
        padding: 14px 16px !important;
        border-bottom: 1px solid var(--aq-border, #E6E6E6) !important;
        background: #FFFFFF !important;
    }

    #canvas-facets-search .widget-facet-search .widget-content {
        background: #FFFFFF !important;
    }

    #canvas-facets-search .widget-facet-search ul {
        padding: 10px 16px 14px !important;
    }

    #canvas-my-account .canvas-widget-content,
    #canvas-my-account .wrapper-scroll,
    #canvas-my-account .wrapper-scroll-content {
        background: #F6F7F8 !important;
    }

    #canvas-my-account .canvas-my-account-wrapper {
        width: auto !important;
        padding: 18px 16px 28px !important;
        color: var(--aq-black, #1F1F1F) !important;
    }

    #canvas-my-account .sb-account-info {
        display: block !important;
        margin: 0 0 14px !important;
        padding: 22px 18px 18px !important;
        text-align: center !important;
        background: #FFFFFF !important;
        border: 1px solid var(--aq-border, #E6E6E6) !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 24px rgba(20, 24, 31, 0.06) !important;
    }

    #canvas-my-account .sb-account-info p {
        margin: 0 !important;
    }

    #canvas-my-account .sb-account-info p:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    #canvas-my-account .sb-account-info p:first-child a:first-child {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 74px !important;
        height: 74px !important;
        color: var(--aq-red, #D90812) !important;
        background: var(--aq-red-soft, #FFF1F2) !important;
        border: 1px solid rgba(217, 8, 18, 0.18) !important;
        border-radius: 999px !important;
    }

    #canvas-my-account .sb-account-info p:first-child a:first-child i {
        margin: 0 !important;
        font-size: 54px !important;
        line-height: 1 !important;
        color: var(--aq-red, #D90812) !important;
    }

    #canvas-my-account .sb-account-info p:first-child a:last-child {
        color: var(--aq-black, #1F1F1F) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.01em !important;
        text-transform: uppercase !important;
    }

    #canvas-my-account .sb-account-info p:last-child {
        margin-top: 10px !important;
    }

    #canvas-my-account .sb-account-info p:last-child a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 34px !important;
        padding: 0 14px !important;
        color: var(--aq-gray, #6F6F6F) !important;
        font-size: 14px !important;
        border: 1px solid var(--aq-border, #E6E6E6) !important;
        border-radius: 999px !important;
        background: #FFFFFF !important;
    }

    #canvas-my-account .alert,
    #canvas-my-account [class*="discount"],
    #canvas-my-account .wbf-account-discount-notice {
        border-radius: 10px !important;
    }

    #canvas-my-account .sb-item {
        display: flex !important;
        align-items: center !important;
        min-height: 46px !important;
        margin: 0 0 8px !important;
        padding: 0 14px !important;
        color: var(--aq-black, #1F1F1F) !important;
        background: #FFFFFF !important;
        border: 1px solid var(--aq-border, #E6E6E6) !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
    }

    #canvas-my-account .sb-item:hover,
    #canvas-my-account .sb-item:focus {
        color: var(--aq-red, #D90812) !important;
        border-color: rgba(217, 8, 18, 0.24) !important;
        background: var(--aq-red-soft, #FFF1F2) !important;
    }

    #canvas-my-account .sb-item i {
        flex: 0 0 22px !important;
        width: 22px !important;
        margin-right: 12px !important;
        color: var(--aq-red, #D90812) !important;
        font-size: 19px !important;
        text-align: center !important;
    }

    #canvas-my-account .sb-item span {
        color: inherit !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }
}

@media (max-width: 991px) {
    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap:hover,
    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap:focus-within,
    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap.active,
    #canvas-menu-mobile .aq-mobile-simple-menu li.open > .menu_a_wrap {
        background-color: var(--aq-red-soft, #FFF1F2) !important;
    }

    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap:hover > a,
    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap:focus-within > a,
    #canvas-menu-mobile .aq-mobile-simple-menu .menu_a_wrap.active > a,
    #canvas-menu-mobile .aq-mobile-simple-menu li.open > .menu_a_wrap > a,
    #canvas-menu-mobile .aq-mobile-simple-menu .aq-mobile-simple-menu__sublink:hover,
    #canvas-menu-mobile .aq-mobile-simple-menu .aq-mobile-simple-menu__sublink:focus {
        color: var(--aq-red, #D90812) !important;
    }
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .aq-404 {
        padding: 18px 14px 28px;
        min-height: 0;
    }
    .aq-404__container {
        padding: 24px 20px 24px;
        border-radius: 14px;
    }
    .aq-404__brand {
        margin-bottom: 8px;
    }
    .aq-404__visual {
        margin-bottom: 10px;
        max-width: 300px;
    }
    .aq-404__code {
        font-size: clamp(94px, 28vw, 116px);
        line-height: 0.82;
    }
    .aq-404__lede {
        margin-bottom: 18px;
        font-size: 14px;
    }
    .aq-404__search-field {
        padding: 4px 4px 4px 14px;
        gap: 6px;
    }
    .aq-404__search-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    .aq-404__ctas {
        gap: 10px;
    }
    .aq-404__btn {
        padding: 11px 18px;
        font-size: 13px;
    }
    .aq-404__quicklinks {
        font-size: 12px;
        gap: 6px 8px;
    }
    .aq-404__quicklinks a {
        padding: 4px 8px;
    }
}

/* ========================================
   PRODUCT THUMBNAIL STRIP - DESKTOP OVERFLOW FIX
   Symptom: on products with 7+ images, the .product-images-thumb strip
   bleeds outside the left column and overlaps the product summary on the
   right. Root cause: the swiper-container (.images-thumb-wrapper) was
   missing overflow:hidden on desktop, so all 9 slides (940px) escaped
   the 668px column; and the global rule at "GALLERY SWIPER ARROWS"
   above also hides .gallery-swiper-arrow on desktop, leaving the
   carousel unusable.
   Fix: clip the swiper-container so Swiper paginates correctly, then
   re-surface the prev/next arrows on the thumb strip only (the big
   image still relies on clicking thumbs, not arrows).
   ======================================== */
@media (min-width: 992px) {
    .product-images-thumb {
        position: relative !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }
    .product-images-thumb .images-thumb-wrapper {
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .product-images-thumb .swiper-arrows {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        pointer-events: none !important;
        z-index: 4 !important;
    }
    .product-images-thumb .swiper-arrows .gallery-swiper-arrow,
    .product-images-thumb .swiper-arrows .gallery-swiper-arrow-prev,
    .product-images-thumb .swiper-arrows .gallery-swiper-arrow-next {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid #d8d8d8 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .product-images-thumb .swiper-arrows .gallery-swiper-arrow-prev {
        left: 2px !important;
        right: auto !important;
    }
    .product-images-thumb .swiper-arrows .gallery-swiper-arrow-next {
        right: 2px !important;
        left: auto !important;
    }
    .product-images-thumb .swiper-arrows .gallery-swiper-arrow.swiper-button-disabled {
        opacity: 0.35 !important;
        cursor: default !important;
        pointer-events: none !important;
    }
    .product-images-thumb .images-thumb-wrapper.img-count-1 .swiper-arrows,
    .product-images-thumb .images-thumb-wrapper.img-count-2 .swiper-arrows,
    .product-images-thumb .images-thumb-wrapper.img-count-3 .swiper-arrows,
    .product-images-thumb .images-thumb-wrapper.img-count-4 .swiper-arrows,
    .product-images-thumb .images-thumb-wrapper.img-count-5 .swiper-arrows,
    .product-images-thumb .images-thumb-wrapper.img-count-6 .swiper-arrows {
        display: none !important;
    }
}