/*
 * Matelas Nameštaj - Amerce template theme override
 * Keep vendor styles.css untouched.
 */
:root {
  --primary: #1E90FF;
  --secondary: #0B69C7;
  --bg-4: rgba(30, 144, 255, 0.10);
  --on-surface: #0C355A;
}

/* Keep focus states visible and consistent with the Matelas blue theme. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: #1E90FF;
}

/* ============================================================
   STEP 02 - Matelas dynamic header
   ============================================================ */
.matelas-logo-link {
    min-width: 150px;
    align-items: center;
}

.matelas-site-logo {
    display: block;
    width: auto;
    max-width: 190px;
    height: auto;
    max-height: 54px;
    object-fit: contain;
}

.tf-header .box-nav-category .sub-nav-category {
    z-index: 80;
}

.tf-header .box-nav-category .sub-nav-category_list {
    min-width: 220px;
}

.matelas-mobile-categories {
    border-top: 1px solid var(--line);
}

@media (max-width: 575.98px) {
    .matelas-site-logo {
        max-width: 145px;
        max-height: 44px;
    }
}

/* ============================================================
   STEP 03 - dynamic category strip + dashboard banners
   ============================================================ */
.matelas-category-strip-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
}

.matelas-db-hero,
.matelas-db-promotional {
    position: relative;
    overflow: hidden;
    background-position: center;
    background-size: cover;
}

.matelas-db-hero.has-content::after,
.matelas-db-promotional.has-content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, .16) 48%, rgba(0, 0, 0, .04) 100%);
}

.matelas-hero-copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 40px clamp(28px, 5vw, 90px);
    pointer-events: none;
}

.matelas-hero-copy-inner {
    width: min(620px, 100%);
    color: #fff;
    pointer-events: auto;
}

.matelas-hero-kicker {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.matelas-hero-title {
    margin-bottom: 14px;
    color: #fff;
    font-size: clamp(30px, 4vw, 58px);
    line-height: 1.05;
}

.matelas-hero-description {
    max-width: 560px;
    margin-bottom: 22px;
    color: rgba(255, 255, 255, .92);
    font-size: 16px;
    line-height: 1.6;
}

.matelas-banner-copy-left {
    justify-content: flex-start;
    text-align: left;
}

.matelas-banner-copy-center {
    justify-content: center;
    text-align: center;
}

.matelas-banner-copy-center .matelas-hero-copy-inner,
.matelas-banner-copy-center .wrap {
    margin-inline: auto;
}

.matelas-banner-copy-right {
    justify-content: flex-end;
    text-align: right;
}

.matelas-banner-copy-right .matelas-hero-copy-inner,
.matelas-banner-copy-right .wrap {
    margin-left: auto;
}

.matelas-db-promotional .bn_content {
    z-index: 2;
}

.matelas-db-promotional .bn_content.matelas-banner-copy-center .wrap {
    text-align: center;
}

.matelas-db-promotional .bn_content.matelas-banner-copy-right .wrap {
    margin-left: auto;
    text-align: right;
}

.matelas-promo-description {
    max-width: 620px;
    margin: 14px 0 22px;
    line-height: 1.6;
}

.matelas-banner-copy-center .matelas-promo-description {
    margin-inline: auto;
}

.matelas-banner-copy-right .matelas-promo-description {
    margin-left: auto;
}

.matelas-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.matelas-banner-copy-center .matelas-banner-actions {
    justify-content: center;
}

.matelas-banner-copy-right .matelas-banner-actions {
    justify-content: flex-end;
}

.matelas-banner-secondary {
    border-color: #fff;
    color: #fff;
}

@media (max-width: 767.98px) {
    .matelas-home-hero-section .banner-image-parallax {
        min-height: 360px;
    }

    .matelas-home-hero-section .bn-image,
    .matelas-home-hero-section .bn-image picture,
    .matelas-home-hero-section .bn-image img {
        width: 100%;
        height: 100%;
        min-height: 360px;
        object-fit: cover;
    }

    .matelas-hero-copy {
        padding: 28px 22px;
    }

    .matelas-db-hero.has-content::after,
    .matelas-db-promotional.has-content::after {
        background: rgba(0, 0, 0, .36);
    }

    .matelas-banner-copy-right,
    .matelas-banner-copy-center {
        justify-content: flex-start;
        text-align: left;
    }

    .matelas-banner-copy-right .matelas-hero-copy-inner,
    .matelas-banner-copy-center .matelas-hero-copy-inner,
    .matelas-db-promotional .bn_content.matelas-banner-copy-right .wrap,
    .matelas-db-promotional .bn_content.matelas-banner-copy-center .wrap {
        margin: 0;
        text-align: left;
    }

    .matelas-banner-copy-center .matelas-banner-actions,
    .matelas-banner-copy-right .matelas-banner-actions {
        justify-content: flex-start;
    }
}

/* ============================================================
   STEP 04 - dynamic home products
   ============================================================ */
.matelas-home-products .card-product_wrapper {
    background: #f7f7f7;
    border-radius: 12px;
}

.matelas-home-products .matelas-product-image-wrap {
    display: block;
    width: 100%;
    height: 100%;
    background: #f7f7f7;
}

.matelas-home-products .matelas-product-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.matelas-product-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 240px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: #8b8b8b;
    background: linear-gradient(145deg, #f7f7f7, #eeeeee);
    text-align: center;
}

.matelas-product-placeholder .icon {
    font-size: 54px;
    color: #b6b6b6;
}

.matelas-product-placeholder span {
    font-size: 13px;
    font-weight: 500;
}

.matelas-product-category {
    display: inline-block;
    margin-bottom: 4px;
    transition: color .2s ease;
}

.matelas-product-category:hover {
    color: #1E90FF !important;
}

.matelas-home-products .name-product {
    min-height: 48px;
}

.matelas-products-empty {
    display: flex;
    min-height: 280px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 40px 20px;
    border: 1px dashed #d9d9d9;
    border-radius: 16px;
    background: #fafafa;
    text-align: center;
}

.matelas-products-empty-icon {
    display: flex;
    width: 70px;
    height: 70px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(30, 144, 255, .10);
    color: #1E90FF;
    font-size: 34px;
}

@media (max-width: 767.98px) {
    .matelas-product-placeholder {
        min-height: 170px;
    }

    .matelas-home-products .name-product {
        min-height: auto;
    }
}

/* ============================================================
   STEP 05 - dynamic product detail
   ============================================================ */
.matelas-product-breadcrumb-wrap {
    padding-top: 26px;
    padding-bottom: 24px;
}

.matelas-product-breadcrumbs {
    min-width: 0;
    flex-wrap: wrap;
}

.matelas-product-breadcrumbs > * {
    flex: 0 0 auto;
}

.matelas-product-single {
    padding-bottom: 64px;
}

.matelas-product-gallery.sticky-top {
    top: 18px;
}

.matelas-product-gallery .flat-wrap-media-product {
    min-width: 0;
}

.matelas-gallery-slide {
    overflow: hidden;
    border-radius: 14px;
    background: #f6f6f6;
}

.matelas-gallery-slide .item {
    display: flex;
    min-height: 520px;
    align-items: center;
    justify-content: center;
}

.matelas-product-main-image {
    width: 100%;
    height: 100%;
    max-height: 720px;
    object-fit: contain;
    background: #f6f6f6;
}

.matelas-gallery-thumb {
    position: relative;
    display: flex;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background: #f6f6f6;
}

.matelas-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.matelas-gallery-thumb > span {
    font-size: 24px;
    color: #1E90FF;
}

.matelas-media-play {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, .68);
    color: #fff;
    font-size: 14px;
}

.matelas-product-video-wrap {
    display: flex;
    min-height: 520px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    background: #0e0e0e;
}

.matelas-product-video-wrap iframe,
.matelas-product-video-wrap video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    background: #000;
}

.matelas-product-gallery-empty {
    display: flex;
    min-height: 560px;
    padding: 40px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    border: 1px dashed #d8d8d8;
    border-radius: 16px;
    background: linear-gradient(145deg, #fafafa, #f1f1f1);
    text-align: center;
    color: #777;
}

.matelas-product-gallery-empty .icon {
    margin-bottom: 4px;
    font-size: 72px;
    color: #b9b9b9;
}

.matelas-product-gallery-empty strong {
    color: #111;
    font-size: 20px;
}

.matelas-product-gallery-empty span {
    max-width: 420px;
    line-height: 1.6;
}

.matelas-product-info .tf-product-info-list {
    gap: 0;
}

.matelas-product-title {
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.08;
    letter-spacing: -.02em;
}

.matelas-product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}

.matelas-product-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.matelas-availability {
    font-weight: 600;
}

.matelas-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #30a46c;
}

.matelas-availability.is-unavailable .matelas-status-dot {
    background: #d92d20;
}

.matelas-product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.matelas-product-badge,
.matelas-discount-chip {
    display: inline-flex;
    min-height: 28px;
    padding: 5px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.matelas-product-badge.sale,
.matelas-discount-chip {
    background: rgba(30, 144, 255, .11);
    color: #1E90FF;
}

.matelas-product-badge.new {
    background: #111;
    color: #fff;
}

.matelas-product-price-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.matelas-product-price-wrap .price-new {
    letter-spacing: -.02em;
}

.matelas-product-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0;
}

.matelas-highlight {
    display: flex;
    min-height: 86px;
    padding: 14px;
    align-items: center;
    gap: 12px;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fafafa;
}

.matelas-highlight > i {
    flex: 0 0 auto;
    color: #1E90FF;
    font-size: 25px;
}

.matelas-highlight span,
.matelas-highlight strong {
    display: block;
}

.matelas-highlight span {
    margin-bottom: 2px;
    color: #777;
    font-size: 12px;
}

.matelas-highlight strong {
    font-size: 13px;
    line-height: 1.35;
}

.matelas-standard-config,
.matelas-inquiry-box,
.matelas-unavailable-box {
    margin-top: 18px;
    padding: 18px;
    border-radius: 12px;
    background: #f7f7f7;
}

.matelas-standard-config {
    border-left: 3px solid #1E90FF;
}

.matelas-buy-box {
    margin-top: 22px;
}

.matelas-buy-box .group-btn {
    display: flex;
    gap: 12px;
}

.matelas-buy-box .wg-quantity {
    flex: 0 0 132px;
}

.matelas-buy-box .wg-quantity button {
    border: 0;
    background: transparent;
    font-size: 20px;
}

.matelas-buy-box .quantity-product {
    min-width: 0;
    text-align: center;
    -moz-appearance: textfield;
}

.matelas-buy-box .quantity-product::-webkit-outer-spin-button,
.matelas-buy-box .quantity-product::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.matelas-inquiry-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(30, 144, 255, .20);
    background: rgba(30, 144, 255, .055);
}

.matelas-inquiry-box strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
}

.matelas-unavailable-box {
    color: #8d281f;
    background: #fff3f2;
    border: 1px solid #ffd7d3;
    line-height: 1.55;
}

.matelas-contact-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eee;
}

.matelas-contact-strip a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.matelas-contact-strip i {
    color: #1E90FF;
    font-size: 18px;
}

.matelas-product-tabs-section {
    border-top: 1px solid #eee;
}

.matelas-product-tab-nav {
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

.matelas-product-tab-nav .nav-tab-item {
    flex: 0 0 auto;
}

.matelas-product-tab-content {
    padding-top: 30px;
}

.matelas-tab-panel {
    max-width: 1180px;
    margin: 0 auto;
}

.matelas-rich-content,
.matelas-tab-copy p {
    line-height: 1.75;
}

.matelas-tab-copy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
}

.matelas-tab-copy {
    padding: 22px;
    border-radius: 12px;
    background: #f8f8f8;
}

.matelas-tab-copy h5 {
    margin-bottom: 10px;
}

.matelas-spec-list {
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
}

.matelas-spec-row {
    display: grid;
    grid-template-columns: minmax(180px, .8fr) 1.2fr;
    gap: 20px;
    padding: 14px 18px;
    border-bottom: 1px solid #ececec;
}

.matelas-spec-row:last-child {
    border-bottom: 0;
}

.matelas-spec-row:nth-child(even) {
    background: #fafafa;
}

.matelas-dimension-grid,
.matelas-delivery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.matelas-dimension-card,
.matelas-delivery-card {
    padding: 18px;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fafafa;
}

.matelas-dimension-card span,
.matelas-dimension-card strong,
.matelas-delivery-card span,
.matelas-delivery-card strong {
    display: block;
}

.matelas-dimension-card span,
.matelas-delivery-card span {
    margin-bottom: 6px;
}

.matelas-dimension-card small {
    font-size: .7em;
    color: #777;
}

.matelas-info-note {
    margin-top: 18px;
    padding: 14px 16px;
    border-left: 3px solid #1E90FF;
    background: rgba(30, 144, 255, .055);
    line-height: 1.65;
}

.matelas-material-group + .matelas-material-group {
    margin-top: 28px;
}

.matelas-material-group > h5 {
    margin-bottom: 16px;
}

.matelas-material-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.matelas-material-card {
    display: flex;
    min-width: 0;
    padding: 14px;
    gap: 14px;
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
}

.matelas-material-swatch {
    flex: 0 0 72px;
    height: 72px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #eee;
    background: #f6f6f6;
}

.matelas-material-swatch img,
.matelas-material-swatch > span {
    display: block;
    width: 100%;
    height: 100%;
}

.matelas-material-swatch img {
    object-fit: cover;
}

.matelas-material-swatch .is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 26px;
}

.matelas-material-body {
    min-width: 0;
}

.matelas-product-faq .accordion-item {
    border: 0;
    border-bottom: 1px solid #e9e9e9;
}

.matelas-product-faq .accordion-button {
    padding: 18px 0;
    background: transparent;
    box-shadow: none;
    color: #111;
    font-weight: 600;
}

.matelas-product-faq .accordion-body {
    padding: 0 0 18px;
    line-height: 1.7;
}

.matelas-related-products .card-product_wrapper {
    border-radius: 12px;
    background: #f7f7f7;
}

.matelas-related-products .matelas-product-image-wrap,
.matelas-related-products .matelas-product-image {
    width: 100%;
    height: 100%;
}

.matelas-related-products .matelas-product-image {
    object-fit: cover;
}

.matelas-product-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 99999;
    max-width: min(420px, calc(100vw - 32px));
    padding: 14px 18px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
}

.matelas-product-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.matelas-product-toast.is-success {
    background: #157347;
}

.matelas-product-toast.is-error {
    background: #b42318;
}

.matelas-btn-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 7px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: currentColor;
    border-radius: 50%;
    vertical-align: -2px;
    animation: matelas-spin .7s linear infinite;
}

@keyframes matelas-spin {
    to { transform: rotate(360deg); }
}

.matelas-empty-product-icon {
    font-size: 76px;
    color: #aaa;
}

.matelas-footer .inner-bottom {
    min-height: 72px;
}

@media (max-width: 1199.98px) {
    .matelas-dimension-grid,
    .matelas-delivery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .matelas-material-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .matelas-product-highlights {
        grid-template-columns: 1fr;
    }

    .matelas-highlight {
        min-height: auto;
    }

    .matelas-inquiry-box {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767.98px) {
    .matelas-product-breadcrumb-wrap {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .matelas-product-single {
        padding-bottom: 42px;
    }

    .matelas-product-gallery.sticky-top {
        position: static !important;
    }

    .matelas-gallery-slide .item,
    .matelas-product-video-wrap,
    .matelas-product-gallery-empty {
        min-height: 390px;
    }

    .matelas-product-title {
        margin-top: 8px;
        font-size: 30px;
    }

    .matelas-buy-box .group-btn {
        flex-wrap: wrap;
    }

    .matelas-buy-box .wg-quantity {
        flex: 0 0 120px;
    }

    .matelas-tab-copy-grid,
    .matelas-material-grid,
    .matelas-dimension-grid,
    .matelas-delivery-grid {
        grid-template-columns: 1fr;
    }

    .matelas-spec-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .matelas-material-card {
        padding: 12px;
    }

    .matelas-product-toast {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none;
    }
}

/* STEP 05B - Product quote / custom inquiry modal */
.matelas-quote-modal .modal-dialog {
    max-width: 880px;
}

.matelas-quote-modal .modal-content {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .18);
}

.matelas-quote-modal .modal-header {
    padding: 22px 26px;
    border-bottom: 1px solid #eceff3;
    background: #fff;
}

.matelas-quote-modal .modal-body {
    padding: 26px;
    background: #fff;
}

.matelas-quote-kicker {
    margin-bottom: 3px;
    color: #1e90ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.matelas-quote-product {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    margin-bottom: 26px;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    background: #f8fafc;
}

.matelas-quote-product > img,
.matelas-quote-product-placeholder {
    width: 108px;
    height: 92px;
    flex: 0 0 108px;
    border-radius: 12px;
    object-fit: cover;
    background: #edf1f5;
}

.matelas-quote-product-placeholder {
    display: grid;
    place-items: center;
    font-size: 30px;
    color: #8793a3;
}

.matelas-quote-product-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.matelas-quote-product-copy > span,
.matelas-quote-product-copy > small {
    color: #6b7280;
    font-size: 12px;
}

.matelas-quote-product-copy > strong {
    font-size: 18px;
    line-height: 1.25;
}

.matelas-quote-product-price {
    margin-top: 4px;
    color: #1e90ff;
    font-weight: 700;
}

.matelas-quote-section-title {
    margin: 26px 0 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #edf0f4;
    font-size: 14px;
    font-weight: 700;
}

.matelas-quote-modal .form-label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.matelas-quote-modal .form-control {
    min-height: 48px;
    border-radius: 10px;
    border-color: #dfe4ea;
    box-shadow: none;
}

.matelas-quote-modal textarea.form-control {
    min-height: 112px;
    resize: vertical;
}

.matelas-quote-modal .form-control:focus {
    border-color: #1e90ff;
    box-shadow: 0 0 0 3px rgba(30, 144, 255, .10);
}

.matelas-quote-consents {
    display: grid;
    gap: 11px;
    margin-top: 22px;
    padding: 16px;
    border-radius: 14px;
    background: #f8fafc;
}

.matelas-quote-consents .form-check {
    margin: 0;
    padding-left: 1.75rem;
}

.matelas-quote-consents .form-check-label {
    color: #4b5563;
    font-size: 13px;
    line-height: 1.45;
}

.matelas-quote-consents .form-check-input:checked {
    background-color: #1e90ff;
    border-color: #1e90ff;
}

.matelas-quote-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.matelas-quote-actions .tf-btn {
    min-width: 150px;
}

.matelas-quote-form-alert {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
}

.matelas-quote-form-alert.is-error {
    color: #991b1b;
    border: 1px solid #fecaca;
    background: #fef2f2;
}

.matelas-quote-success {
    max-width: 560px;
    margin: 20px auto;
    padding: 18px 8px;
    text-align: center;
}

.matelas-quote-success-icon {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    color: #1e90ff;
    background: rgba(30, 144, 255, .10);
    font-size: 34px;
}

.matelas-quote-success h3 {
    margin-bottom: 8px;
}

.matelas-inquiry-number {
    display: inline-flex;
    gap: 5px;
    margin-top: 8px;
    padding: 9px 13px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 13px;
}

.matelas-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    .matelas-quote-modal .modal-dialog {
        margin: .75rem;
    }

    .matelas-quote-modal .modal-header,
    .matelas-quote-modal .modal-body {
        padding: 18px;
    }

    .matelas-quote-product > img,
    .matelas-quote-product-placeholder {
        width: 82px;
        height: 76px;
        flex-basis: 82px;
    }

    .matelas-quote-product-copy > strong {
        font-size: 16px;
    }

    .matelas-quote-actions {
        flex-direction: column-reverse;
    }

    .matelas-quote-actions .tf-btn {
        width: 100%;
    }
}

.matelas-material-groups {
    display: grid;
    gap: 14px;
}

.matelas-material-group {
    padding: 12px;
    border: 1px solid #e7ebf0;
    border-radius: 12px;
    background: #fff;
}

.matelas-material-group-title {
    margin-bottom: 9px;
    font-size: 12px;
    font-weight: 700;
    color: #5d6673;
}

.matelas-material-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.matelas-material-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px;
    border: 1px solid #e5e9ef;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.matelas-material-option:hover {
    border-color: #b9d9fb;
    background: #f8fbff;
}

.matelas-material-option:has(input:checked) {
    border-color: #1e90ff;
    background: rgba(30, 144, 255, .06);
    box-shadow: 0 0 0 2px rgba(30, 144, 255, .08);
}

.matelas-material-option > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.matelas-material-option-visual,
.matelas-material-option-visual img,
.matelas-material-swatch {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
}

.matelas-material-option-visual img {
    display: block;
    object-fit: cover;
}

.matelas-material-swatch {
    display: block;
    border: 1px solid rgba(15, 23, 42, .10);
}

.matelas-material-swatch.is-empty {
    background: linear-gradient(135deg, #eef2f7 0 50%, #dfe5ec 50% 100%);
}

.matelas-material-option-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.matelas-material-option-copy strong {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.matelas-material-option-copy small {
    color: #7b8491;
    font-size: 10px;
}

@media (max-width: 575px) {
    .matelas-material-options {
        grid-template-columns: 1fr;
    }
}

/* STEP 05C - Quote modal premium UI polish */
.matelas-quote-modal {
    --mq-blue: #1e90ff;
    --mq-blue-deep: #0879e4;
    --mq-ink: #161b22;
    --mq-muted: #667085;
    --mq-line: #e5eaf0;
    --mq-soft: #f7f9fc;
}

.matelas-quote-modal .modal-dialog {
    max-width: 1040px;
}

.matelas-quote-modal .modal-content {
    border: 1px solid rgba(17, 24, 39, .06);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 32px 100px rgba(16, 24, 40, .22);
}

.matelas-quote-modal .modal-header.matelas-quote-modal-head {
    position: relative;
    align-items: flex-start;
    padding: 28px 32px 25px;
    border: 0;
    border-bottom: 1px solid var(--mq-line);
    background:
        radial-gradient(circle at 0 0, rgba(30, 144, 255, .12), transparent 38%),
        linear-gradient(135deg, #ffffff 0%, #fbfdff 58%, #f3f8ff 100%);
}

.matelas-quote-head-wrap {
    display: flex;
    gap: 16px;
    min-width: 0;
    padding-right: 42px;
}

.matelas-quote-head-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(30, 144, 255, .18);
    border-radius: 15px;
    color: var(--mq-blue);
    background: rgba(30, 144, 255, .08);
}

.matelas-quote-head-icon svg {
    width: 25px;
    height: 25px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.matelas-quote-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.matelas-quote-kicker span {
    padding: 3px 7px;
    border-radius: 999px;
    color: #fff;
    background: var(--mq-blue);
    letter-spacing: .06em;
}

.matelas-quote-modal .modal-title {
    margin: 0;
    color: var(--mq-ink);
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -.025em;
}

.matelas-quote-head-copy {
    max-width: 690px;
    margin: 8px 0 0;
    color: var(--mq-muted);
    font-size: 13px;
    line-height: 1.55;
}

.matelas-quote-close {
    position: absolute;
    top: 22px;
    right: 24px;
    width: 36px;
    height: 36px;
    margin: 0 !important;
    padding: 0;
    border-radius: 50%;
    background-color: #fff;
    background-size: 11px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .08);
    opacity: .72;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

.matelas-quote-close:hover {
    opacity: 1;
    transform: rotate(4deg);
    box-shadow: 0 6px 24px rgba(15, 23, 42, .13);
}

.matelas-quote-modal .modal-body {
    padding: 28px 32px 32px;
    background: #fff;
}

.matelas-quote-product-card {
    position: relative;
    display: grid;
    grid-template-columns: 152px minmax(0, 1fr) minmax(190px, auto);
    align-items: center;
    gap: 22px;
    padding: 16px;
    border: 1px solid var(--mq-line);
    border-radius: 20px;
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
    box-shadow: 0 8px 30px rgba(16, 24, 40, .045);
}

.matelas-quote-product-media {
    position: relative;
    min-width: 0;
}

.matelas-quote-product-media > img,
.matelas-quote-product-media .matelas-quote-product-placeholder {
    width: 152px;
    height: 112px;
    display: block;
    border-radius: 14px;
    object-fit: cover;
    background: #eef2f6;
}

.matelas-quote-product-media .matelas-quote-product-placeholder {
    display: grid;
    place-items: center;
    color: #98a2b3;
    font-size: 32px;
}

.matelas-product-card-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #fff;
    background: rgba(17, 24, 39, .78);
    backdrop-filter: blur(6px);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.matelas-quote-product-info {
    min-width: 0;
}

.matelas-quote-product-category {
    margin-bottom: 5px;
    color: var(--mq-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.matelas-quote-product-info h3 {
    margin: 0 0 9px;
    color: var(--mq-ink);
    font-size: 20px;
    line-height: 1.25;
    font-weight: 650;
}

.matelas-quote-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 15px;
    color: #7a8492;
    font-size: 11px;
}

.matelas-quote-product-meta strong {
    color: #4f5967;
    font-weight: 600;
}

.matelas-quote-price-box {
    min-width: 190px;
    padding: 15px 17px;
    border: 1px solid rgba(30, 144, 255, .15);
    border-radius: 15px;
    background: rgba(30, 144, 255, .055);
}

.matelas-quote-price-box > span,
.matelas-quote-price-box > small {
    display: block;
    color: #738093;
    font-size: 10px;
    line-height: 1.4;
}

.matelas-quote-price-box > strong {
    display: block;
    margin: 4px 0 3px;
    color: var(--mq-blue-deep);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 750;
}

.matelas-quote-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 14px 0 22px;
    border: 1px solid #edf0f4;
    border-radius: 16px;
    background: #fafbfc;
    overflow: hidden;
}

.matelas-quote-benefits > div {
    position: relative;
    min-width: 0;
    padding: 13px 15px 13px 35px;
}

.matelas-quote-benefits > div + div {
    border-left: 1px solid #edf0f4;
}

.matelas-benefit-dot {
    position: absolute;
    top: 18px;
    left: 16px;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--mq-blue);
    box-shadow: 0 0 0 3px rgba(30, 144, 255, .12);
}

.matelas-quote-benefits strong,
.matelas-quote-benefits small {
    display: block;
}

.matelas-quote-benefits strong {
    margin-bottom: 2px;
    color: #344054;
    font-size: 11px;
    font-weight: 700;
}

.matelas-quote-benefits small {
    color: #7a8492;
    font-size: 10px;
    line-height: 1.35;
}

.matelas-quote-panel {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid var(--mq-line);
    border-radius: 20px;
    background: #fff;
}

.matelas-quote-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 19px;
    padding-bottom: 16px;
    border-bottom: 1px solid #edf0f4;
}

.matelas-quote-step {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--mq-blue);
    background: rgba(30, 144, 255, .09);
    font-size: 11px;
    font-weight: 800;
}

.matelas-quote-panel-head h4 {
    margin: 0 0 3px;
    color: #20262e;
    font-size: 16px;
    font-weight: 700;
}

.matelas-quote-panel-head p {
    margin: 0;
    color: #7a8492;
    font-size: 11px;
    line-height: 1.45;
}

.matelas-quote-modal .form-label {
    margin-bottom: 7px;
    color: #344054;
    font-size: 11px;
    font-weight: 650;
}

.matelas-required {
    color: var(--mq-blue);
}

.matelas-quote-modal .form-control {
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid #dce2e9;
    border-radius: 12px;
    color: #232a33;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
    font-size: 13px;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.matelas-quote-modal .form-control::placeholder {
    color: #a0a8b5;
}

.matelas-quote-modal .form-control:hover {
    border-color: #cbd3dd;
}

.matelas-quote-modal .form-control:focus {
    border-color: var(--mq-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(30, 144, 255, .095);
}

.matelas-quote-modal textarea.form-control {
    min-height: 118px;
    line-height: 1.55;
    resize: vertical;
}

.matelas-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.matelas-field-label-row small {
    color: #98a2b3;
    font-size: 10px;
}

.matelas-material-groups {
    gap: 12px;
}

.matelas-material-group {
    padding: 13px;
    border: 1px solid #e7ebf0;
    border-radius: 14px;
    background: #fafbfc;
}

.matelas-material-group-title {
    margin-bottom: 10px;
    color: #596273;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.matelas-material-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.matelas-material-option {
    min-height: 62px;
    padding: 9px 34px 9px 9px;
    border-color: #e2e7ed;
    border-radius: 12px;
    background: #fff;
}

.matelas-material-option:hover {
    border-color: rgba(30, 144, 255, .42);
    background: #fff;
    box-shadow: 0 5px 18px rgba(30, 144, 255, .06);
}

.matelas-material-option:has(input:checked) {
    border-color: var(--mq-blue);
    background: rgba(30, 144, 255, .045);
    box-shadow: 0 0 0 2px rgba(30, 144, 255, .07);
}

.matelas-material-option-visual,
.matelas-material-option-visual img,
.matelas-material-swatch {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 10px;
}

.matelas-material-option-copy strong {
    color: #344054;
    font-size: 11px;
    font-weight: 650;
}

.matelas-material-option-copy small {
    margin-top: 2px;
    color: #98a2b3;
    font-size: 9px;
}

.matelas-material-check {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border: 1px solid #d5dbe3;
    border-radius: 50%;
    color: transparent;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    transform: translateY(-50%);
    transition: all .18s ease;
}

.matelas-material-option:has(input:checked) .matelas-material-check {
    border-color: var(--mq-blue);
    color: #fff;
    background: var(--mq-blue);
}

.matelas-quote-consents {
    gap: 0;
    margin-top: 18px;
    padding: 0;
    border: 1px solid var(--mq-line);
    border-radius: 16px;
    background: #fafbfc;
    overflow: hidden;
}

.matelas-consent-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 !important;
    padding: 14px 16px 14px 42px !important;
}

.matelas-consent-row + .matelas-consent-row {
    border-top: 1px solid #e9edf2;
}

.matelas-consent-row .form-check-input {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 17px;
    height: 17px;
    margin: 0;
    border-color: #cbd3dc;
    box-shadow: none;
}

.matelas-consent-row .form-check-input:checked {
    border-color: var(--mq-blue);
    background-color: var(--mq-blue);
}

.matelas-consent-row .form-check-label {
    display: block;
    color: #475467;
}

.matelas-consent-row .form-check-label strong,
.matelas-consent-row .form-check-label small {
    display: block;
}

.matelas-consent-row .form-check-label strong {
    margin-bottom: 2px;
    color: #344054;
    font-size: 11px;
    font-weight: 650;
}

.matelas-consent-row .form-check-label small {
    color: #7e8794;
    font-size: 10px;
    line-height: 1.45;
}

.matelas-quote-form-alert {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 12px;
    font-size: 12px;
}

.matelas-quote-actions {
    position: sticky;
    z-index: 5;
    bottom: -32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 22px -32px -32px;
    padding: 17px 32px 19px;
    border-top: 1px solid var(--mq-line);
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(12px);
    box-shadow: 0 -12px 28px rgba(16, 24, 40, .035);
}

.matelas-quote-actions-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.matelas-quote-actions-copy strong {
    color: #344054;
    font-size: 11px;
    font-weight: 700;
}

.matelas-quote-actions-copy span {
    margin-top: 2px;
    color: #8a94a2;
    font-size: 10px;
}

.matelas-quote-actions-buttons {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.matelas-quote-actions .tf-btn {
    min-width: 142px;
    min-height: 46px;
    border-radius: 11px;
}

.matelas-quote-actions [data-quote-submit] {
    min-width: 174px;
    box-shadow: 0 8px 22px rgba(30, 144, 255, .2);
}

.matelas-quote-actions [data-quote-submit]:disabled {
    box-shadow: none;
    opacity: .7;
}

.matelas-quote-success {
    max-width: 650px;
    margin: 12px auto;
    padding: 34px 20px 26px;
    text-align: center;
}

.matelas-quote-success-icon {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    border: 1px solid rgba(30, 144, 255, .2);
    border-radius: 50%;
    color: #fff;
    background: var(--mq-blue);
    box-shadow: 0 12px 32px rgba(30, 144, 255, .22), 0 0 0 9px rgba(30, 144, 255, .07);
}

.matelas-quote-success-icon svg {
    width: 37px;
    height: 37px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.matelas-success-kicker {
    margin-bottom: 4px;
    color: var(--mq-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.matelas-quote-success h3 {
    margin: 0 0 9px;
    color: #1f2937;
    font-size: 25px;
    font-weight: 700;
}

.matelas-quote-success > p {
    max-width: 540px;
    margin: 0 auto;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.65;
}

.matelas-inquiry-number-card {
    max-width: 440px;
    margin: 23px auto 0;
    padding: 17px 20px;
    border: 1px solid rgba(30, 144, 255, .17);
    border-radius: 16px;
    background: rgba(30, 144, 255, .055);
}

.matelas-inquiry-number-card span,
.matelas-inquiry-number-card strong,
.matelas-inquiry-number-card small {
    display: block;
}

.matelas-inquiry-number-card span {
    color: #667085;
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.matelas-inquiry-number-card strong {
    margin: 4px 0 5px;
    color: var(--mq-blue-deep);
    font-size: 20px;
    letter-spacing: .025em;
}

.matelas-inquiry-number-card small {
    color: #84909f;
    font-size: 9px;
    line-height: 1.4;
}

.matelas-success-close {
    min-width: 150px;
    margin-top: 22px;
    border-radius: 11px;
}

@media (max-width: 991px) {
    .matelas-quote-modal .modal-dialog {
        max-width: calc(100% - 28px);
        margin-right: auto;
        margin-left: auto;
    }

    .matelas-quote-product-card {
        grid-template-columns: 126px minmax(0, 1fr);
    }

    .matelas-quote-product-media > img,
    .matelas-quote-product-media .matelas-quote-product-placeholder {
        width: 126px;
        height: 100px;
    }

    .matelas-quote-price-box {
        grid-column: 1 / -1;
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 2px 12px;
    }

    .matelas-quote-price-box > strong {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin: 0;
        text-align: right;
    }

    .matelas-quote-price-box > small {
        grid-column: 1;
    }

    .matelas-material-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .matelas-quote-modal .modal-dialog {
        max-width: none;
        margin: 8px;
    }

    .matelas-quote-modal .modal-content {
        border-radius: 20px;
    }

    .matelas-quote-modal .modal-header.matelas-quote-modal-head {
        padding: 21px 20px 19px;
    }

    .matelas-quote-head-wrap {
        gap: 12px;
        padding-right: 32px;
    }

    .matelas-quote-head-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
        border-radius: 12px;
    }

    .matelas-quote-head-icon svg {
        width: 21px;
        height: 21px;
    }

    .matelas-quote-head-copy {
        font-size: 11px;
    }

    .matelas-quote-close {
        top: 16px;
        right: 15px;
        width: 32px;
        height: 32px;
    }

    .matelas-quote-modal .modal-body {
        padding: 20px;
    }

    .matelas-quote-product-card {
        grid-template-columns: 90px minmax(0, 1fr);
        gap: 13px;
        padding: 12px;
        border-radius: 16px;
    }

    .matelas-quote-product-media > img,
    .matelas-quote-product-media .matelas-quote-product-placeholder {
        width: 90px;
        height: 82px;
        border-radius: 11px;
    }

    .matelas-product-card-badge {
        display: none;
    }

    .matelas-quote-product-info h3 {
        font-size: 16px;
    }

    .matelas-quote-product-meta {
        gap: 3px 9px;
        font-size: 9px;
    }

    .matelas-quote-price-box {
        padding: 12px;
    }

    .matelas-quote-price-box > strong {
        font-size: 17px;
    }

    .matelas-quote-benefits {
        grid-template-columns: 1fr;
    }

    .matelas-quote-benefits > div + div {
        border-top: 1px solid #edf0f4;
        border-left: 0;
    }

    .matelas-quote-panel {
        padding: 17px;
        border-radius: 16px;
    }

    .matelas-material-options {
        grid-template-columns: 1fr;
    }

    .matelas-quote-actions {
        bottom: -20px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin: 20px -20px -20px;
        padding: 14px 20px 17px;
    }

    .matelas-quote-actions-copy {
        text-align: center;
    }

    .matelas-quote-actions-buttons {
        width: 100%;
    }

    .matelas-quote-actions .tf-btn,
    .matelas-quote-actions [data-quote-submit] {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .matelas-quote-head-icon {
        display: none;
    }

    .matelas-quote-modal .modal-title {
        font-size: 23px;
    }

    .matelas-quote-product-card {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .matelas-quote-product-media > img,
    .matelas-quote-product-media .matelas-quote-product-placeholder {
        width: 74px;
        height: 70px;
    }

    .matelas-quote-price-box {
        grid-template-columns: 1fr;
    }

    .matelas-quote-price-box > strong {
        grid-column: 1;
        grid-row: auto;
        margin: 3px 0;
        text-align: left;
    }

    .matelas-field-label-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .matelas-quote-actions-buttons {
        flex-direction: column-reverse;
    }

    .matelas-quote-actions .tf-btn {
        width: 100%;
    }
}
/* ============================================================
   STEP 06 - Dynamic cart page + mini/offcanvas cart
   ============================================================ */
.matelas-mini-cart {
    --mc-border: #e9edf2;
    --mc-muted: #6b7280;
    width: min(470px, 100vw) !important;
    border-left: 0;
    box-shadow: -18px 0 50px rgba(15, 23, 42, .12);
}

.matelas-mini-cart .canvas-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.matelas-mini-cart-head {
    padding: 24px 26px 20px;
    border-bottom: 1px solid var(--mc-border);
    background: linear-gradient(180deg, rgba(30, 144, 255, .055), #fff 88%);
}

.matelas-mini-cart-kicker,
.matelas-cart-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.matelas-mini-cart-close {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border: 1px solid var(--mc-border);
    border-radius: 50%;
    background: #fff;
    color: #111827;
    transition: .2s ease;
}

.matelas-mini-cart-close:hover {
    border-color: rgba(30, 144, 255, .4);
    color: var(--primary);
    transform: rotate(4deg);
}

.matelas-mini-cart-wrap,
.matelas-mini-cart-wrap .tf-mini-cart-wrap,
.matelas-mini-cart-wrap .tf-mini-cart-main,
.matelas-mini-cart-wrap .tf-mini-cart-sroll {
    min-height: 0;
}

.matelas-mini-cart-wrap {
    flex: 1 1 auto;
    overflow: hidden;
}

.matelas-mini-cart-wrap .tf-mini-cart-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.matelas-mini-cart-wrap .tf-mini-cart-main {
    flex: 1 1 auto;
    overflow: hidden;
}

.matelas-mini-cart-wrap .tf-mini-cart-sroll {
    height: 100%;
    overflow-y: auto;
    padding: 0 26px;
}

.matelas-mini-cart-items {
    padding-bottom: 8px;
}

.matelas-mini-cart-item {
    position: relative;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: 14px;
    padding: 20px 0 !important;
    border-bottom: 1px solid var(--mc-border);
}

.matelas-mini-cart-image {
    width: 92px !important;
    height: 92px !important;
    overflow: hidden;
    border-radius: 14px;
    background: #f5f7f9;
}

.matelas-mini-cart-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.matelas-cart-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: linear-gradient(145deg, #f4f7fa, #eef3f8);
    color: #9aa6b2;
    font-size: 28px;
}

.matelas-mini-cart-info {
    min-width: 0;
    align-self: center;
}

.matelas-mini-cart-info .name {
    display: block;
    margin-bottom: 5px;
    color: #111827;
    font-size: 14px;
    line-height: 1.45;
}

.matelas-mini-cart-sku {
    display: block;
    margin-bottom: 8px;
    color: #8993a1;
    font-size: 10px;
}

.matelas-mini-cart-qty-price {
    display: flex;
    gap: 5px;
    color: #6b7280;
    font-size: 12px;
}

.matelas-mini-cart-qty-price strong {
    color: var(--primary);
}

.matelas-mini-cart-side {
    min-width: 88px;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    color: #111827;
    font-size: 12px;
    white-space: nowrap;
}

.matelas-mini-remove {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e9edf2;
    border-radius: 50%;
    background: #fff;
    color: #8a94a3;
    font-size: 12px;
    transition: .2s ease;
}

.matelas-mini-remove:hover {
    border-color: #ffd2d2;
    background: #fff5f5;
    color: #dc3545;
}

.matelas-mini-remove.is-loading,
[data-cart-qty-action].is-loading,
[data-cart-qty-input].is-loading {
    opacity: .55;
    pointer-events: none;
}

.matelas-mini-cart-empty {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 42px 22px;
    text-align: center;
}

.matelas-mini-cart-empty-icon,
.matelas-cart-empty-page-icon {
    width: 78px;
    height: 78px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1px solid rgba(30, 144, 255, .15);
    border-radius: 50%;
    background: rgba(30, 144, 255, .07);
    color: var(--primary);
    font-size: 31px;
}

.matelas-mini-cart-empty h4 {
    margin-bottom: 8px;
}

.matelas-mini-cart-empty p {
    max-width: 300px;
    margin-bottom: 22px;
}

.matelas-mini-cart-bottom {
    flex: 0 0 auto;
    border-top: 1px solid var(--mc-border);
    background: #fff;
    box-shadow: 0 -12px 28px rgba(15, 23, 42, .045);
}

.matelas-mini-cart-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 26px;
    background: rgba(30, 144, 255, .055);
    color: #53606f;
    font-size: 11px;
    line-height: 1.5;
}

.matelas-mini-cart-note i {
    margin-top: 2px;
    color: var(--primary);
    font-size: 17px;
}

.matelas-mini-cart-bottom .tf-mini-cart-bottom-wrap {
    padding: 18px 26px 24px !important;
}

.matelas-mini-cart-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Main cart page */
.matelas-cart-title {
    padding-bottom: 38px;
}

.matelas-cart-page {
    padding-top: 0;
}

.matelas-cart-service-note {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border: 1px solid rgba(30, 144, 255, .13);
    border-radius: 14px;
    background: rgba(30, 144, 255, .05);
}

.matelas-cart-service-note p {
    margin-top: 2px;
    color: #687384;
    font-size: 12px;
}

.matelas-cart-service-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    color: var(--primary);
    box-shadow: 0 5px 16px rgba(30, 144, 255, .09);
    font-size: 20px;
}

.matelas-cart-list-card,
.matelas-cart-summary {
    border: 1px solid #e9edf2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 34px rgba(15, 23, 42, .045);
}

.matelas-cart-list-head {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    border-bottom: 1px solid #edf0f3;
}

.matelas-cart-count-pill {
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    border-radius: 50%;
    background: rgba(30, 144, 255, .1);
    color: var(--primary);
    font-size: 11px;
    vertical-align: middle;
}

.matelas-cart-table-wrap {
    overflow-x: auto;
    padding: 0 24px 4px;
}

.matelas-cart-table {
    min-width: 730px;
    margin-bottom: 0;
}

.matelas-cart-table thead th {
    padding-top: 18px;
    padding-bottom: 14px;
    border-bottom-color: #edf0f3;
}

.matelas-cart-row td {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
    vertical-align: middle !important;
}

.matelas-cart-product-image {
    width: 112px !important;
    height: 112px !important;
    flex: 0 0 112px;
    overflow: hidden;
    border-radius: 15px;
    background: #f5f7f9;
}

.matelas-cart-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.matelas-cart-product-info {
    min-width: 190px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.matelas-cart-product-info .prd_name {
    margin-bottom: 2px;
    font-size: 14px;
}

.matelas-cart-inline-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f1f8f4;
    color: #388657;
    font-size: 9px;
    font-weight: 700;
}

.matelas-cart-remove-btn {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: transparent;
}

.matelas-cart-quantity {
    border-radius: 10px !important;
    overflow: hidden;
}

.matelas-cart-quantity .quantity-product {
    min-width: 42px;
    text-align: center;
}

.matelas-cart-summary-wrap {
    top: 18px;
}

.matelas-cart-summary {
    position: relative;
    overflow: hidden;
    padding: 28px !important;
}

.matelas-cart-summary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #77bdff);
}

.matelas-cart-summary-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 13px;
    background: rgba(30, 144, 255, .08);
    color: var(--primary);
    font-size: 21px;
}

.matelas-cart-summary .subtotal,
.matelas-cart-summary .discount,
.matelas-cart-delivery-row {
    padding: 13px 0;
    border-bottom: 1px solid #edf0f3;
}

.matelas-cart-delivery-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
}

.matelas-cart-delivery-row div {
    display: flex;
    flex-direction: column;
}

.matelas-cart-delivery-row small {
    margin-top: 2px;
    color: #8a94a3;
    font-size: 9px;
}

.matelas-cart-delivery-row strong {
    color: #556273;
    font-size: 11px;
}

.matelas-cart-summary .total-order {
    margin: 22px 0 18px;
    padding-top: 0;
    border-top: 0;
}

.matelas-cart-summary .total-order .total {
    color: var(--primary);
}

.matelas-cart-summary-notice {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    padding: 11px 12px;
    border-radius: 11px;
    background: #f7f8fa;
    color: #697586;
    font-size: 10px;
    line-height: 1.5;
}

.matelas-cart-summary-notice i {
    margin-top: 2px;
    color: var(--primary);
}

.matelas-cart-empty-page {
    max-width: 720px;
    margin: 10px auto 25px;
    padding: 60px 30px;
    border: 1px solid #e9edf2;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(15, 23, 42, .04);
    text-align: center;
}

.matelas-cart-empty-page h3 {
    margin-bottom: 9px;
}

.matelas-cart-empty-page p {
    max-width: 520px;
    margin: 0 auto 24px;
}

.matelas-cart-recommendations {
    border-top: 1px solid #f0f2f4;
}

.matelas-checkout-placeholder {
    min-height: 54vh;
    display: flex;
    align-items: center;
}

@media (max-width: 991px) {
    .matelas-cart-summary-wrap {
        position: static !important;
    }

    .matelas-cart-summary {
        margin-top: 4px;
    }
}

@media (max-width: 767px) {
    .matelas-mini-cart-head,
    .matelas-mini-cart-wrap .tf-mini-cart-sroll,
    .matelas-mini-cart-note,
    .matelas-mini-cart-bottom .tf-mini-cart-bottom-wrap {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .matelas-mini-cart-item {
        grid-template-columns: 78px minmax(0, 1fr) auto;
        gap: 11px;
    }

    .matelas-mini-cart-image {
        width: 78px !important;
        height: 78px !important;
    }

    .matelas-mini-cart-side {
        min-width: 34px;
    }

    .matelas-mini-cart-side > strong {
        display: none;
    }

    .matelas-mini-cart-actions {
        grid-template-columns: 1fr;
    }

    .matelas-cart-title {
        padding-top: 35px;
        padding-bottom: 26px;
    }

    .matelas-cart-service-note {
        align-items: flex-start;
    }

    .matelas-cart-list-card {
        border-radius: 16px;
    }

    .matelas-cart-list-head {
        padding: 17px 18px;
    }

    .matelas-cart-table-wrap {
        padding: 0 18px;
    }

    .matelas-cart-summary {
        padding: 22px !important;
        border-radius: 16px;
    }

    .matelas-cart-empty-page {
        padding: 42px 20px;
        border-radius: 18px;
    }
}

/* STEP 06A - stability hotfix + cart/catalog visual polish */
.matelas-cart-title .page-title-content,
.matelas-catalog-title .page-title-content {
    max-width: 820px;
    margin: 0 auto;
}

.matelas-cart-page > .container,
.matelas-catalog-page > .container {
    position: relative;
}

.matelas-cart-list-card {
    overflow: hidden;
    border-color: #e7ebf0;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .055);
}

.matelas-cart-list-head {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.matelas-cart-table {
    border-collapse: separate;
    border-spacing: 0 12px;
}

.matelas-cart-table thead th {
    border: 0 !important;
    color: #7d8794;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.matelas-cart-table tbody .matelas-cart-row td {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    border-top: 1px solid #edf1f5 !important;
    border-bottom: 1px solid #edf1f5 !important;
    background: #fff;
}

.matelas-cart-table tbody .matelas-cart-row td:first-child {
    padding-left: 16px !important;
    border-left: 1px solid #edf1f5 !important;
    border-radius: 16px 0 0 16px;
}

.matelas-cart-table tbody .matelas-cart-row td:last-child {
    padding-right: 16px !important;
    border-right: 1px solid #edf1f5 !important;
    border-radius: 0 16px 16px 0;
}

.matelas-cart-table tbody .matelas-cart-row:hover td {
    background: #fbfdff;
    border-color: rgba(30, 144, 255, .17) !important;
}

.matelas-cart-product-image {
    border: 1px solid #edf1f5;
    box-shadow: 0 7px 20px rgba(15, 23, 42, .05);
}

.matelas-cart-product-info .prd_name {
    max-width: 300px;
    font-size: 15px;
    line-height: 1.45;
}

.matelas-cart-summary {
    box-shadow: 0 20px 55px rgba(15, 23, 42, .075);
}

.matelas-cart-summary .action-checkout {
    min-height: 52px;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(30, 144, 255, .2);
}

.matelas-cart-assurance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.matelas-cart-assurance {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid #e9edf2;
    border-radius: 14px;
    background: #fff;
}

.matelas-cart-assurance i {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(30, 144, 255, .07);
    color: var(--primary);
    font-size: 18px;
}

.matelas-cart-assurance strong {
    display: block;
    margin-bottom: 2px;
    color: #172033;
    font-size: 12px;
}

.matelas-cart-assurance span {
    display: block;
    color: #7b8795;
    font-size: 10px;
    line-height: 1.4;
}

.matelas-catalog-title {
    padding-bottom: 38px;
}

.matelas-catalog-kicker {
    display: inline-flex;
    margin-bottom: 9px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.matelas-catalog-desc {
    max-width: 700px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.matelas-catalog-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: 1px solid #e9edf2;
    border-radius: 18px;
    background: #fbfcfe;
}

.matelas-catalog-chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid #e5eaf0;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    transition: .2s ease;
}

.matelas-catalog-chip:hover,
.matelas-catalog-chip.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 7px 18px rgba(30, 144, 255, .18);
}

.matelas-catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf0f3;
}

.matelas-catalog-toolbar strong {
    color: #172033;
    font-size: 14px;
}

.matelas-catalog-toolbar span {
    margin-left: 4px;
    font-size: 12px;
}

.matelas-catalog-empty {
    max-width: 760px;
    margin: 0 auto;
    padding: 62px 30px;
    border: 1px solid #e9edf2;
    border-radius: 22px;
    background: #fff;
    text-align: center;
    box-shadow: 0 15px 45px rgba(15, 23, 42, .045);
}

.matelas-catalog-empty p {
    max-width: 520px;
    margin: 8px auto 22px;
}

@media (max-width: 991px) {
    .matelas-cart-assurance-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .matelas-catalog-filter {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .matelas-catalog-chip {
        flex: 0 0 auto;
    }

    .matelas-catalog-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .matelas-cart-assurance {
        min-height: 64px;
    }
}


/* ============================================================
   STEP 06B - Cart UI + Matelas global visual signature
   ============================================================ */
:root {
    --matelas-blue: #1E90FF;
    --matelas-blue-dark: #0B69C7;
    --matelas-blue-ink: #0C355A;
    --matelas-blue-soft: #EEF7FF;
    --matelas-blue-softer: #F7FBFF;
    --matelas-ink: #172033;
    --matelas-muted: #718096;
    --matelas-line: #E7EEF5;
    --matelas-shadow: 0 18px 48px rgba(25, 61, 96, .08);
}

/* A subtle brand signature shared by the live frontend pages. */
#wrapper {
    overflow: clip;
}

#wrapper .tf-header .header-bottom_wrap {
    border-bottom: 1px solid rgba(30, 144, 255, .09);
    box-shadow: 0 7px 22px rgba(12, 53, 90, .035);
}

#wrapper .tf-header .box-nav-menu > .menu-item > .item-link {
    position: relative;
}

#wrapper .tf-header .box-nav-menu > .menu-item > .item-link::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: var(--matelas-blue);
    transition: left .22s ease, right .22s ease;
}

#wrapper .tf-header .box-nav-menu > .menu-item:hover > .item-link::after {
    left: 0;
    right: 0;
}

#wrapper .sect-heading h2,
#wrapper .sect-heading h3,
#wrapper .sect-heading h4 {
    position: relative;
}

#wrapper .matelas-home-products .sect-heading h3::after,
#wrapper .matelas-related-products .sect-heading h4::after,
#wrapper .matelas-cart-recommendations .sect-heading h4::after {
    content: "";
    display: block;
    width: 58px;
    height: 4px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--matelas-blue), #72B9FF);
}

#wrapper .matelas-home-products {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 4% 18%, rgba(30, 144, 255, .075), transparent 22%),
        radial-gradient(circle at 96% 82%, rgba(30, 144, 255, .05), transparent 24%),
        #fff;
}

#wrapper .card-product .card-product_wrapper {
    border: 1px solid transparent;
    border-radius: 18px;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

#wrapper .card-product:hover .card-product_wrapper {
    transform: translateY(-3px);
    border-color: rgba(30, 144, 255, .16);
    box-shadow: 0 16px 38px rgba(12, 53, 90, .09);
}

#wrapper .card-product .matelas-product-category {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 5px;
    color: var(--matelas-blue) !important;
    font-weight: 650;
}

#wrapper .card-product .price-new {
    color: var(--matelas-blue-dark) !important;
}

#wrapper .matelas-catalog-title,
#wrapper .matelas-cart-title {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 20%, rgba(30, 144, 255, .10), transparent 25%),
        radial-gradient(circle at 82% 78%, rgba(30, 144, 255, .07), transparent 20%),
        linear-gradient(180deg, #FBFDFF 0%, #FFFFFF 100%);
}

#wrapper .matelas-catalog-title::before,
#wrapper .matelas-cart-title::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    top: -145px;
    right: 9%;
    z-index: -1;
    border: 38px solid rgba(30, 144, 255, .055);
    border-radius: 50%;
}

#wrapper .matelas-catalog-title h1,
#wrapper .matelas-cart-title h1 {
    color: var(--matelas-blue-ink);
}

#wrapper .tf-btn.animate-btn {
    box-shadow: 0 10px 24px rgba(30, 144, 255, .14);
}

/* Cart page */
.matelas-cart-page {
    position: relative;
    padding-bottom: 34px;
}

.matelas-cart-page::before {
    content: "";
    position: absolute;
    inset: 20px 0 auto;
    height: 360px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(238, 247, 255, .72), rgba(255,255,255,0));
}

.matelas-cart-service-note {
    position: relative;
    overflow: hidden;
    padding: 18px 20px;
    border-color: rgba(30, 144, 255, .17);
    border-radius: 18px;
    background: linear-gradient(105deg, #F2F9FF 0%, #FFFFFF 64%);
    box-shadow: 0 10px 30px rgba(12, 53, 90, .045);
}

.matelas-cart-service-note::after {
    content: "";
    position: absolute;
    width: 115px;
    height: 115px;
    top: -70px;
    right: 28px;
    border: 20px solid rgba(30, 144, 255, .06);
    border-radius: 50%;
}

.matelas-cart-service-note strong {
    color: var(--matelas-blue-ink);
    font-size: 14px;
}

.matelas-cart-service-icon {
    border: 1px solid rgba(30, 144, 255, .13);
    background: var(--matelas-blue);
    color: #fff;
    box-shadow: 0 10px 24px rgba(30, 144, 255, .22);
}

.matelas-cart-assurance-grid {
    gap: 14px;
}

.matelas-cart-assurance {
    position: relative;
    overflow: hidden;
    min-height: 84px;
    padding: 16px 18px;
    border-color: var(--matelas-line);
    border-radius: 18px;
    box-shadow: 0 9px 25px rgba(12, 53, 90, .035);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.matelas-cart-assurance::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--matelas-blue);
}

.matelas-cart-assurance:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 144, 255, .19);
    box-shadow: 0 14px 30px rgba(12, 53, 90, .065);
}

.matelas-cart-assurance > i {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    border: 1px solid rgba(30, 144, 255, .10);
    background: var(--matelas-blue-soft);
    color: var(--matelas-blue-dark);
}

.matelas-cart-assurance.is-delivery > i {
    background: #F0F9FF;
    color: #0284C7;
}

.matelas-cart-assurance.is-help > i {
    background: #F4F3FF;
    color: #6556D8;
}

.matelas-cart-assurance.is-help::after {
    background: #6556D8;
}

.matelas-cart-assurance strong {
    color: var(--matelas-ink);
    font-size: 13px;
}

.matelas-cart-assurance span {
    color: var(--matelas-muted);
    font-size: 11px;
}

.matelas-cart-list-card {
    border: 1px solid rgba(30, 144, 255, .11);
    border-radius: 22px;
    box-shadow: var(--matelas-shadow);
}

.matelas-cart-list-head {
    min-height: 92px;
    padding: 21px 24px;
    border-bottom-color: #EAF0F6;
    background: linear-gradient(100deg, #FFFFFF 0%, #F6FBFF 100%);
}

.matelas-cart-list-title {
    display: flex;
    align-items: center;
    gap: 13px;
}

.matelas-cart-list-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--matelas-blue), #5EAEFF);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 10px 24px rgba(30, 144, 255, .20);
}

.matelas-cart-count-pill {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--matelas-blue-soft);
    color: var(--matelas-blue-dark);
    font-weight: 800;
}

.matelas-cart-continue-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--matelas-blue-dark);
    font-size: 12px;
    font-weight: 700;
}

.matelas-cart-continue-link i {
    transition: transform .2s ease;
}

.matelas-cart-continue-link:hover i {
    transform: translateX(-3px);
}

.matelas-cart-table-wrap {
    padding: 7px 20px 12px;
}

.matelas-cart-table {
    border-spacing: 0 14px;
}

.matelas-cart-table thead th {
    padding: 10px 14px 3px !important;
    color: #8A96A7;
}

.matelas-cart-table tbody .matelas-cart-row td {
    padding: 18px 14px !important;
    border-top: 1px solid #E8EFF6 !important;
    border-bottom: 1px solid #E8EFF6 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #FCFEFF 100%);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.matelas-cart-table tbody .matelas-cart-row td:first-child {
    padding-left: 18px !important;
    border-left: 1px solid #E8EFF6 !important;
    border-radius: 18px 0 0 18px;
}

.matelas-cart-table tbody .matelas-cart-row td:last-child {
    padding-right: 18px !important;
    border-right: 1px solid #E8EFF6 !important;
    border-radius: 0 18px 18px 0;
}

.matelas-cart-table tbody .matelas-cart-row:hover td {
    border-color: rgba(30, 144, 255, .24) !important;
    background: #F9FCFF;
}

.matelas-cart-product-image {
    position: relative;
    border: 1px solid #E6EDF4;
    border-radius: 17px;
    background: linear-gradient(145deg, #F6F9FC, #EEF4F9);
    box-shadow: 0 9px 24px rgba(12, 53, 90, .06);
}

.matelas-cart-product-info .prd_name {
    margin-bottom: 5px;
    color: var(--matelas-ink);
    font-size: 15px;
    font-weight: 700 !important;
}

.matelas-cart-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 1px;
}

.matelas-cart-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #8390A2;
    font-size: 10px;
}

.matelas-cart-meta i {
    color: var(--matelas-blue);
    font-size: 12px;
}

.matelas-cart-product-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.matelas-cart-inline-badge {
    margin-top: 0;
    padding: 5px 9px;
    border: 1px solid #DFF1E6;
    background: #F1FBF5;
    color: #287A4B;
}

.matelas-cart-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 0;
    padding: 5px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #9B5D61;
    font-size: 10px;
    font-weight: 700;
    transition: .2s ease;
}

.matelas-cart-remove-btn:hover {
    background: #FFF3F4;
    color: #D54B55;
}

.matelas-cart-quantity {
    min-height: 44px;
    padding: 3px !important;
    border: 1px solid #DFE8F0 !important;
    border-radius: 999px !important;
    background: #F8FBFE;
    box-shadow: inset 0 1px 2px rgba(12, 53, 90, .03);
}

.matelas-cart-quantity .btn-quantity {
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    background: #fff;
    color: var(--matelas-blue-ink);
    transition: .2s ease;
}

.matelas-cart-quantity .btn-quantity:hover {
    background: var(--matelas-blue);
    color: #fff;
    box-shadow: 0 7px 14px rgba(30, 144, 255, .20);
}

.matelas-cart-quantity .quantity-product {
    width: 36px;
    min-width: 36px;
    color: var(--matelas-ink);
    font-weight: 800;
}

.matelas-cart-table .cart_price,
.matelas-cart-table .cart_total {
    color: var(--matelas-blue-dark) !important;
    font-size: 14px;
    font-weight: 800 !important;
}

.matelas-cart-summary {
    overflow: hidden;
    padding: 0 26px 26px !important;
    border: 1px solid rgba(30, 144, 255, .16);
    border-radius: 22px;
    box-shadow: 0 22px 60px rgba(12, 53, 90, .11);
}

.matelas-cart-summary::before {
    display: none;
}

.matelas-cart-summary-head {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0 -26px 12px;
    padding: 22px 24px;
    background:
        radial-gradient(circle at 100% 0, rgba(255,255,255,.16), transparent 32%),
        linear-gradient(135deg, var(--matelas-blue-dark), var(--matelas-blue));
    color: #fff;
}

.matelas-cart-summary-head .matelas-cart-kicker,
.matelas-cart-summary-head h5 {
    color: #fff;
}

.matelas-cart-summary-head .matelas-cart-kicker {
    opacity: .78;
}

.matelas-cart-summary-icon {
    width: 46px;
    height: 46px;
    margin: 0;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.14);
    color: #fff;
    backdrop-filter: blur(6px);
}

.matelas-cart-summary-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}

.matelas-cart-summary .subtotal,
.matelas-cart-summary .discount,
.matelas-cart-delivery-row {
    padding: 15px 0;
    border-bottom-color: #EAF0F5;
}

.matelas-summary-label {
    display: flex !important;
    align-items: center;
    gap: 9px;
}

.matelas-summary-row-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--matelas-blue-soft);
    color: var(--matelas-blue-dark);
    font-size: 13px;
}

.matelas-summary-row-icon.is-success {
    background: #EFFAF3;
    color: #2E8B57;
}

.matelas-cart-delivery-row .matelas-summary-label > div {
    display: flex;
    flex-direction: column;
}

.matelas-delivery-badge {
    padding: 6px 9px;
    border-radius: 999px;
    background: #F2F7FC;
    color: #52667A !important;
    font-size: 9px !important;
    font-weight: 800;
}

.matelas-cart-total-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 20px 0 16px;
    padding: 16px 17px;
    border: 1px solid rgba(30, 144, 255, .14);
    border-radius: 14px;
    background: linear-gradient(105deg, #F3F9FF 0%, #FBFDFF 100%);
}

.matelas-cart-total-box > div {
    display: flex;
    flex-direction: column;
}

.matelas-cart-total-box span {
    color: #738197;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
}

.matelas-cart-total-box small {
    margin-top: 2px;
    color: #9AA5B4;
    font-size: 9px;
}

.matelas-cart-total-box > strong {
    color: var(--matelas-blue-dark);
    font-size: 19px;
    white-space: nowrap;
}

.matelas-cart-summary-notice {
    margin-bottom: 15px;
    border: 1px solid #EDF1F5;
    background: #FAFBFD;
}

.matelas-cart-trust-list {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.matelas-cart-trust-list > div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 11px;
    background: #FBFDFF;
}

.matelas-cart-trust-list > div > i {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--matelas-blue-soft);
    color: var(--matelas-blue-dark);
    font-size: 14px;
}

.matelas-cart-trust-list span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.matelas-cart-trust-list strong {
    color: var(--matelas-ink);
    font-size: 10px;
}

.matelas-cart-trust-list small {
    color: #8A96A7;
    font-size: 9px;
}

.matelas-cart-summary .action-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--matelas-blue-dark), var(--matelas-blue));
    color: #fff;
    box-shadow: 0 13px 28px rgba(30, 144, 255, .24);
}

.matelas-cart-summary .action-checkout i {
    transition: transform .2s ease;
}

.matelas-cart-summary .action-checkout:hover i {
    transform: translateX(3px);
}

.matelas-cart-empty-page {
    position: relative;
    overflow: hidden;
    border-color: rgba(30, 144, 255, .13);
    background:
        radial-gradient(circle at 50% 0%, rgba(30, 144, 255, .09), transparent 35%),
        #fff;
    box-shadow: var(--matelas-shadow);
}

.matelas-cart-recommendations {
    position: relative;
    border-top: 0;
    background: linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
}

.matelas-cart-recommendations .sect-heading {
    position: relative;
}

@media (max-width: 991px) {
    .matelas-cart-summary {
        margin-top: 6px;
    }

    .matelas-cart-list-card,
    .matelas-cart-summary {
        border-radius: 18px;
    }
}

@media (max-width: 767px) {
    #wrapper .matelas-catalog-title::before,
    #wrapper .matelas-cart-title::before {
        right: -70px;
    }

    .matelas-cart-list-head {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
    }

    .matelas-cart-continue-link {
        margin-left: 58px;
    }

    .matelas-cart-summary-head {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .matelas-cart-summary-badge {
        display: none;
    }

    .matelas-cart-total-box {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .matelas-cart-total-box > strong {
        font-size: 22px;
    }
}

/* Small accent details across the already-connected Matelas pages. */
#wrapper .category-v05 {
    border: 1px solid transparent;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

#wrapper .category-v05:not(.bg-primary) {
    border-color: #EDF1F5;
    background: linear-gradient(145deg, #FFFFFF, #FBFDFF) !important;
}

#wrapper .category-v05:hover {
    transform: translateY(-3px);
    border-color: rgba(30, 144, 255, .18);
    box-shadow: 0 12px 28px rgba(12, 53, 90, .08);
}

#wrapper .category-v05.bg-primary {
    background: linear-gradient(135deg, var(--matelas-blue-dark), var(--matelas-blue)) !important;
    box-shadow: 0 12px 26px rgba(30, 144, 255, .20);
}

#wrapper .matelas-product-breadcrumb-wrap {
    border-bottom: 1px solid rgba(30, 144, 255, .08);
    background: linear-gradient(180deg, #FBFDFF 0%, #FFFFFF 100%);
}

#wrapper .matelas-product-title::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-top: 15px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--matelas-blue), #74BAFF);
}

#wrapper .matelas-product-highlights .matelas-highlight {
    border-color: rgba(30, 144, 255, .10);
    background: linear-gradient(145deg, #F9FCFF, #F3F8FD);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#wrapper .matelas-product-highlights .matelas-highlight:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 144, 255, .20);
    box-shadow: 0 11px 24px rgba(12, 53, 90, .06);
}

#wrapper .matelas-product-highlights .matelas-highlight > i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 7px 17px rgba(30, 144, 255, .08);
}

#wrapper .matelas-gallery-slide,
#wrapper .matelas-gallery-thumb {
    border: 1px solid rgba(30, 144, 255, .08);
}

#wrapper .matelas-catalog-filter {
    border-color: rgba(30, 144, 255, .10);
    background:
        radial-gradient(circle at 0 50%, rgba(30, 144, 255, .06), transparent 26%),
        #FBFDFF;
    box-shadow: 0 10px 28px rgba(12, 53, 90, .035);
}

#wrapper .matelas-catalog-toolbar {
    position: relative;
}

#wrapper .matelas-catalog-toolbar::before {
    content: "";
    width: 5px;
    height: 26px;
    flex: 0 0 5px;
    border-radius: 999px;
    background: var(--matelas-blue);
    box-shadow: 0 5px 12px rgba(30, 144, 255, .18);
}

@media (max-width: 767px) {
    #wrapper .matelas-home-products .sect-heading h3::after,
    #wrapper .matelas-related-products .sect-heading h4::after,
    #wrapper .matelas-cart-recommendations .sect-heading h4::after {
        width: 44px;
        height: 3px;
        margin-top: 10px;
    }

    #wrapper .matelas-catalog-toolbar::before {
        display: none;
    }
}

/* ============================================================
   STEP 06C - Header navigation hover polish
   Keep Amerce's item-link::after as an invisible hover bridge.
   The visible Matelas accent belongs to the text itself.
   ============================================================ */
#wrapper .tf-header .box-nav-menu > .menu-item > .item-link::after {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: calc(100% + 48px);
    height: 100%;
    border-radius: 0;
    background: transparent;
    transform: translate(-50%, -50%);
    transition: none;
}

#wrapper .tf-header .box-nav-menu > .menu-item:hover > .item-link::after {
    left: 50%;
    right: auto;
    display: block;
}

#wrapper .tf-header .box-nav-menu > .menu-item > .item-link .cus-text::after {
    left: 50%;
    right: auto;
    bottom: -7px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--matelas-blue), #72B9FF);
    transform: translateX(-50%);
    transition: width .2s ease;
}

#wrapper .tf-header .box-nav-menu > .menu-item:hover > .item-link {
    color: var(--matelas-blue-dark);
}

#wrapper .tf-header .box-nav-menu > .menu-item:hover > .item-link .cus-text::after {
    left: 50%;
    right: auto;
    width: 22px;
}

/* ============================================================
   STEP 07 - Checkout
   ============================================================ */
#wrapper.matelas-checkout-page,
#wrapper .matelas-checkout-shell {
    background: #f7fbff;
}

#wrapper .matelas-checkout-title {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 12%, rgba(30, 144, 255, .12), transparent 24%),
        radial-gradient(circle at 88% 20%, rgba(30, 144, 255, .08), transparent 20%),
        linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

#wrapper .matelas-checkout-title::after {
    content: "";
    position: absolute;
    right: 8%;
    top: -74px;
    width: 180px;
    height: 180px;
    border: 22px solid rgba(30, 144, 255, .055);
    border-radius: 50%;
    pointer-events: none;
}

#wrapper .matelas-checkout-assurance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

#wrapper .matelas-checkout-assurance > div {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 82px;
    padding: 16px 18px;
    border: 1px solid rgba(30, 144, 255, .14);
    border-radius: 16px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 10px 28px rgba(12, 53, 90, .045);
}

#wrapper .matelas-checkout-assurance i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    background: var(--matelas-blue-soft);
    color: var(--matelas-blue);
    font-size: 20px;
}

#wrapper .matelas-checkout-assurance span {
    display: grid;
    gap: 3px;
}

#wrapper .matelas-checkout-assurance strong {
    color: var(--matelas-blue-ink);
    font-size: 14px;
}

#wrapper .matelas-checkout-assurance small {
    color: #738396;
    line-height: 1.45;
}

#wrapper .matelas-checkout-stack {
    display: grid;
    gap: 22px;
}

#wrapper .matelas-checkout-card,
#wrapper .matelas-checkout-summary {
    border: 1px solid rgba(12, 53, 90, .09);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 42px rgba(12, 53, 90, .055);
}

#wrapper .matelas-checkout-card {
    padding: 28px;
}

#wrapper .matelas-checkout-card-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(12, 53, 90, .08);
}

#wrapper .matelas-checkout-card-head > i {
    color: rgba(30, 144, 255, .34);
    font-size: 28px;
}

#wrapper .matelas-checkout-card-head h4 {
    margin: 2px 0 0;
    color: #112f49;
}

#wrapper .matelas-checkout-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--matelas-blue), #68b6ff);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(30, 144, 255, .22);
}

#wrapper .matelas-customer-type {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#wrapper .matelas-customer-type label,
#wrapper .matelas-option-card {
    position: relative;
    cursor: pointer;
}

#wrapper .matelas-customer-type input,
#wrapper .matelas-option-card > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#wrapper .matelas-customer-type label > span {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 1px;
    align-items: center;
    min-height: 78px;
    padding: 15px 17px;
    border: 1px solid rgba(12, 53, 90, .10);
    border-radius: 15px;
    background: #fbfdff;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

#wrapper .matelas-customer-type label > span > i {
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f0f6fb;
    color: #52708b;
    font-size: 18px;
}

#wrapper .matelas-customer-type label > span strong {
    color: #17364f;
}

#wrapper .matelas-customer-type label > span small {
    color: #7d8b98;
}

#wrapper .matelas-customer-type label.is-active > span {
    border-color: rgba(30, 144, 255, .52);
    background: linear-gradient(145deg, #f7fbff, #edf7ff);
    box-shadow: 0 8px 22px rgba(30, 144, 255, .09);
    transform: translateY(-1px);
}

#wrapper .matelas-customer-type label.is-active > span > i {
    background: var(--matelas-blue);
    color: #fff;
}

#wrapper .matelas-checkout-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

#wrapper .matelas-field-wide {
    grid-column: 1 / -1;
}

#wrapper .matelas-field {
    display: grid;
    gap: 7px;
}

#wrapper .matelas-field label {
    margin: 0;
    color: #17364f;
    font-size: 13px;
    font-weight: 650;
}

#wrapper .matelas-field input,
#wrapper .matelas-field select,
#wrapper .matelas-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid #dce7ef;
    border-radius: 12px;
    background: #fff;
    color: #102f48;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

#wrapper .matelas-field textarea {
    min-height: 100px;
    resize: vertical;
}

#wrapper .matelas-field input:focus,
#wrapper .matelas-field select:focus,
#wrapper .matelas-field textarea:focus {
    border-color: rgba(30, 144, 255, .68);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(30, 144, 255, .09);
    outline: none;
}

#wrapper .matelas-field .is-invalid,
#wrapper .matelas-checkout-terms input.is-invalid {
    border-color: #df4b4b !important;
    box-shadow: 0 0 0 3px rgba(223, 75, 75, .08) !important;
}

#wrapper [data-field-error] {
    min-height: 0;
    color: #c93e3e;
    font-size: 12px;
    line-height: 1.35;
}

#wrapper [data-field-error].is-visible {
    min-height: 16px;
}

#wrapper .matelas-option-list {
    display: grid;
    gap: 12px;
}

#wrapper .matelas-option-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    min-height: 84px;
    padding: 15px 16px;
    border: 1px solid #dfe8ef;
    border-radius: 15px;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

#wrapper .matelas-option-card:hover {
    border-color: rgba(30, 144, 255, .34);
    transform: translateY(-1px);
}

#wrapper .matelas-option-card.is-active {
    border-color: rgba(30, 144, 255, .58);
    background: linear-gradient(145deg, #fafdff, #eef8ff);
    box-shadow: 0 8px 24px rgba(30, 144, 255, .085);
}

#wrapper .matelas-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #f1f6fa;
    color: #52708b;
    font-size: 20px;
}

#wrapper .matelas-option-card.is-active .matelas-option-icon {
    background: var(--matelas-blue);
    color: #fff;
}

#wrapper .matelas-option-copy {
    display: grid;
    gap: 4px;
}

#wrapper .matelas-option-copy strong {
    color: #17364f;
    font-size: 14px;
}

#wrapper .matelas-option-copy small {
    color: #778897;
    line-height: 1.45;
}

#wrapper .matelas-option-price {
    color: var(--matelas-blue-dark);
    font-weight: 700;
    white-space: nowrap;
}

#wrapper .matelas-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #d8e5ee;
    border-radius: 50%;
    color: transparent;
    background: #fff;
}

#wrapper .matelas-option-card.is-active .matelas-option-check {
    border-color: var(--matelas-blue);
    background: var(--matelas-blue);
    color: #fff;
}

#wrapper .matelas-pickup-note {
    display: flex;
    gap: 13px;
    align-items: center;
    padding: 15px 16px;
    border: 1px solid rgba(30, 144, 255, .17);
    border-radius: 14px;
    background: var(--matelas-blue-soft);
    color: #42617b;
}

#wrapper .matelas-pickup-note > i {
    color: var(--matelas-blue);
    font-size: 22px;
}

#wrapper .matelas-pickup-note > div {
    display: grid;
    gap: 2px;
}

#wrapper .matelas-pickup-note strong {
    color: var(--matelas-blue-ink);
}

#wrapper .matelas-checkout-summary {
    top: 24px;
    overflow: hidden;
}

#wrapper .matelas-checkout-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 25px 26px;
    background: linear-gradient(135deg, #0c6dce 0%, #1e90ff 66%, #62b5ff 100%);
    color: #fff;
}

#wrapper .matelas-checkout-summary-head .matelas-cart-kicker,
#wrapper .matelas-checkout-summary-head h4 {
    color: #fff;
}

#wrapper .matelas-checkout-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-weight: 700;
}

#wrapper .matelas-checkout-products {
    display: grid;
    gap: 0;
    padding: 8px 24px 2px;
}

#wrapper .matelas-checkout-product {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(12, 53, 90, .075);
}

#wrapper .matelas-checkout-product-image {
    position: relative;
    display: block;
    width: 66px;
    height: 66px;
    border-radius: 13px;
    overflow: visible;
    background: #f5f7f9;
}

#wrapper .matelas-checkout-product-image img,
#wrapper .matelas-checkout-product-image > span {
    width: 100%;
    height: 100%;
    border-radius: 13px;
    object-fit: cover;
}

#wrapper .matelas-checkout-product-image > span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7f94a5;
    font-size: 22px;
}

#wrapper .matelas-checkout-product-image b {
    position: absolute;
    top: -7px;
    right: -7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    height: 23px;
    padding: 0 6px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--matelas-blue);
    color: #fff;
    font-size: 11px;
}

#wrapper .matelas-checkout-product > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

#wrapper .matelas-checkout-product > div a {
    color: #17364f;
    line-height: 1.35;
}

#wrapper .matelas-checkout-product > div small {
    color: #8795a2;
}

#wrapper .matelas-checkout-product > strong {
    color: #17364f;
    white-space: nowrap;
}

#wrapper .matelas-checkout-totals {
    display: grid;
    gap: 0;
    padding: 12px 24px 0;
}

#wrapper .matelas-checkout-totals > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(12, 53, 90, .075);
    color: #596f81;
}

#wrapper .matelas-checkout-totals > div strong {
    color: #17364f;
}

#wrapper .matelas-checkout-totals > .is-discount strong {
    color: #2f9a5b;
}

#wrapper .matelas-checkout-grand-total {
    align-items: flex-end !important;
    padding: 20px 0 !important;
    border-bottom: 0 !important;
}

#wrapper .matelas-checkout-grand-total > span {
    display: grid;
    gap: 2px;
}

#wrapper .matelas-checkout-grand-total b {
    color: #17364f;
    font-size: 16px;
}

#wrapper .matelas-checkout-grand-total small {
    color: #8795a2;
}

#wrapper .matelas-checkout-grand-total > strong {
    color: var(--matelas-blue-dark) !important;
    font-size: 24px;
}

#wrapper .matelas-checkout-terms {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: start;
    margin: 4px 24px 0;
    padding: 15px;
    border-radius: 13px;
    background: #f8fbfd;
    color: #647889;
    font-size: 13px;
    line-height: 1.5;
}

#wrapper .matelas-checkout-terms input {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: var(--matelas-blue);
}

#wrapper .matelas-checkout-terms a {
    color: var(--matelas-blue-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

#wrapper .matelas-checkout-summary > .matelas-field-global-error {
    display: block;
    margin: 6px 24px 0;
}

#wrapper .matelas-checkout-submit {
    width: calc(100% - 48px) !important;
    margin: 18px 24px 0;
    min-height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0b69c7, #1e90ff);
    box-shadow: 0 12px 26px rgba(30, 144, 255, .20);
}

#wrapper .matelas-checkout-submit:hover {
    box-shadow: 0 16px 32px rgba(30, 144, 255, .25);
}

#wrapper .matelas-checkout-submit.is-loading {
    opacity: .72;
    cursor: wait;
}

#wrapper .matelas-checkout-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 24px 0;
    color: #587287;
    font-size: 13px;
    font-weight: 600;
}

#wrapper .matelas-checkout-back:hover {
    color: var(--matelas-blue-dark);
}

#wrapper .matelas-checkout-security {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-top: 20px;
    padding: 17px 24px 22px;
    border-top: 1px solid rgba(12, 53, 90, .075);
    color: #718494;
    font-size: 12px;
    line-height: 1.5;
}

#wrapper .matelas-checkout-security i {
    margin-top: 2px;
    color: var(--matelas-blue);
    font-size: 19px;
}

#wrapper .matelas-checkout-security strong {
    color: #17364f;
}

#wrapper .matelas-checkout-alert {
    margin: 14px 24px 0;
    padding: 12px 14px;
    border-radius: 11px;
    font-size: 13px;
    line-height: 1.45;
}

#wrapper .matelas-checkout-alert.is-error {
    border: 1px solid rgba(204, 61, 61, .18);
    background: #fff4f4;
    color: #b93838;
}

#wrapper .matelas-checkout-alert.is-success {
    border: 1px solid rgba(43, 155, 91, .18);
    background: #f0fbf5;
    color: #277f4d;
}

#wrapper .matelas-checkout-success {
    max-width: 860px;
    margin: 0 auto;
    padding: 42px;
    border: 1px solid rgba(30, 144, 255, .14);
    border-radius: 24px;
    background: #fff;
    text-align: center;
    box-shadow: 0 18px 54px rgba(12, 53, 90, .07);
}

#wrapper .matelas-checkout-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e8f6ff, #f7fcff);
    color: var(--matelas-blue);
    font-size: 34px;
    box-shadow: inset 0 0 0 1px rgba(30, 144, 255, .14);
}

#wrapper .matelas-checkout-success h2 {
    margin: 6px 0 10px;
    color: var(--matelas-blue-ink);
}

#wrapper .matelas-checkout-success > p {
    max-width: 650px;
    margin: 0 auto 28px;
    color: #718494;
}

#wrapper .matelas-checkout-success-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#wrapper .matelas-checkout-success-grid > div {
    display: grid;
    justify-items: center;
    gap: 5px;
    padding: 20px 14px;
    border: 1px solid rgba(12, 53, 90, .08);
    border-radius: 15px;
    background: #fbfdff;
}

#wrapper .matelas-checkout-success-grid i {
    color: var(--matelas-blue);
    font-size: 22px;
}

#wrapper .matelas-checkout-success-grid span {
    color: #8292a0;
    font-size: 12px;
}

#wrapper .matelas-checkout-success-grid strong {
    color: #17364f;
    font-size: 14px;
}

#wrapper .matelas-checkout-success-note {
    display: flex;
    gap: 13px;
    align-items: center;
    max-width: 620px;
    margin: 24px auto 0;
    padding: 16px 18px;
    border: 1px solid rgba(30, 144, 255, .14);
    border-radius: 14px;
    background: var(--matelas-blue-soft);
    text-align: left;
}

#wrapper .matelas-checkout-success-note i {
    color: var(--matelas-blue);
    font-size: 24px;
}

#wrapper .matelas-checkout-success-note > div {
    display: grid;
    gap: 2px;
}

#wrapper .matelas-checkout-success-note strong {
    color: var(--matelas-blue-ink);
}

#wrapper .matelas-checkout-success-note span {
    color: #667f94;
    font-size: 13px;
}

@media (max-width: 991.98px) {
    #wrapper .matelas-checkout-assurance {
        grid-template-columns: 1fr;
    }

    #wrapper .matelas-checkout-summary {
        position: static !important;
        margin-top: 4px;
    }
}

@media (max-width: 767.98px) {
    #wrapper .matelas-checkout-card {
        padding: 20px 16px;
        border-radius: 16px;
    }

    #wrapper .matelas-checkout-card-head {
        grid-template-columns: auto 1fr;
        gap: 11px;
    }

    #wrapper .matelas-checkout-card-head > i {
        display: none;
    }

    #wrapper .matelas-customer-type,
    #wrapper .matelas-checkout-fields,
    #wrapper .matelas-checkout-success-grid {
        grid-template-columns: 1fr;
    }

    #wrapper .matelas-field-wide {
        grid-column: auto;
    }

    #wrapper .matelas-option-card {
        grid-template-columns: auto 1fr;
    }

    #wrapper .matelas-option-price,
    #wrapper .matelas-option-check {
        grid-column: 2;
        justify-self: start;
    }

    #wrapper .matelas-option-check {
        display: none;
    }

    #wrapper .matelas-checkout-summary-head,
    #wrapper .matelas-checkout-products,
    #wrapper .matelas-checkout-totals {
        padding-left: 18px;
        padding-right: 18px;
    }

    #wrapper .matelas-checkout-terms,
    #wrapper .matelas-checkout-back,
    #wrapper .matelas-checkout-alert {
        margin-left: 18px;
        margin-right: 18px;
    }

    #wrapper .matelas-checkout-submit {
        width: calc(100% - 36px) !important;
        margin-left: 18px;
        margin-right: 18px;
    }

    #wrapper .matelas-checkout-security {
        padding-left: 18px;
        padding-right: 18px;
    }

    #wrapper .matelas-checkout-product {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    #wrapper .matelas-checkout-product-image {
        width: 58px;
        height: 58px;
    }

    #wrapper .matelas-checkout-product > strong {
        grid-column: 2;
        justify-self: start;
    }

    #wrapper .matelas-checkout-success {
        padding: 30px 18px;
        border-radius: 18px;
    }
}

/* ============================================================
   STEP 08 - Customer account / authentication
   ============================================================ */
.matelas-auth-page,
.matelas-account-page {
    background:
        radial-gradient(circle at 92% 18%, rgba(30, 144, 255, .09), transparent 22%),
        #fff;
}

.matelas-account-title {
    position: relative;
    overflow: hidden;
}

.matelas-account-title::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -70px;
    top: -100px;
    border: 24px solid rgba(30, 144, 255, .06);
    border-radius: 50%;
    pointer-events: none;
}

.matelas-auth-shell,
.matelas-account-shell {
    position: relative;
}

.matelas-auth-card,
.matelas-account-panel,
.matelas-account-sidebar,
.matelas-address-grid article,
.matelas-inquiry-cards article {
    border: 1px solid rgba(20, 67, 102, .10);
    box-shadow: 0 18px 55px rgba(22, 66, 98, .07);
    background: #fff;
}

.matelas-auth-card {
    border-radius: 24px;
    padding: 32px;
}

.matelas-auth-card-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 26px;
}

.matelas-auth-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    font-size: 24px;
    background: linear-gradient(135deg, #1E90FF, #0B69C7);
    box-shadow: 0 10px 24px rgba(30, 144, 255, .25);
}

.matelas-auth-form {
    display: grid;
    gap: 18px;
}

.matelas-auth-form .tf-field,
.matelas-account-form label + input,
.matelas-account-form label + select,
.matelas-account-form label + textarea {
    margin: 0;
}

.matelas-auth-form input,
.matelas-account-form input,
.matelas-account-form select,
.matelas-account-form textarea {
    width: 100%;
    min-height: 50px;
    border: 1px solid #dfe8ef;
    border-radius: 12px;
    background: #fbfdff;
    padding: 12px 14px;
    color: #153a56;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.matelas-auth-form input:focus,
.matelas-account-form input:focus,
.matelas-account-form select:focus,
.matelas-account-form textarea:focus {
    border-color: rgba(30, 144, 255, .72);
    box-shadow: 0 0 0 4px rgba(30, 144, 255, .10);
    background: #fff;
    outline: none;
}

.matelas-account-form textarea {
    min-height: 92px;
    resize: vertical;
}

.matelas-account-form label {
    display: block;
    margin-bottom: 7px;
    color: #173f5f;
    font-weight: 600;
    font-size: 13px;
}

.matelas-account-form small,
.matelas-password-hint {
    color: #7a8f9f;
    font-size: 12px;
}

.matelas-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.matelas-auth-options .checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.matelas-auth-alert {
    border-radius: 14px;
    padding: 13px 15px;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid transparent;
}

.matelas-auth-alert.is-error {
    color: #a53c3c;
    border-color: rgba(220, 74, 74, .18);
    background: #fff5f5;
}

.matelas-auth-alert.is-success {
    color: #176b48;
    border-color: rgba(31, 148, 99, .18);
    background: #f1fbf6;
}

.matelas-link-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #1E90FF;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

.matelas-auth-benefits {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 36px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(145deg, #0b69c7 0%, #1e90ff 62%, #57b2ff 100%);
    box-shadow: 0 22px 60px rgba(11, 105, 199, .22);
}

.matelas-auth-benefits::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 34px solid rgba(255,255,255,.08);
    border-radius: 50%;
    right: -90px;
    bottom: -105px;
}

.matelas-auth-benefits > * {
    position: relative;
    z-index: 1;
}

.matelas-auth-benefits h3,
.matelas-auth-benefits p,
.matelas-auth-benefits strong,
.matelas-auth-benefits small {
    color: #fff;
}

.matelas-auth-benefits p {
    opacity: .86;
    margin: 12px 0 26px;
}

.matelas-auth-benefit-badge {
    display: inline-flex;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.matelas-auth-benefit-list {
    display: grid;
    gap: 14px;
    margin-bottom: 28px;
}

.matelas-auth-benefit-list > div {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
}

.matelas-auth-benefit-list i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,.14);
    font-size: 20px;
}

.matelas-auth-benefit-list span {
    display: grid;
    gap: 2px;
}

.matelas-auth-benefit-list small {
    opacity: .75;
    font-size: 12px;
}

.matelas-auth-secondary {
    border: 0 !important;
}

.matelas-consent-list {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 14px;
    background: #f7fbff;
    border: 1px solid rgba(30, 144, 255, .10);
}

.matelas-consent-list label,
.matelas-inline-check {
    display: flex !important;
    align-items: flex-start;
    gap: 9px;
    margin: 0 !important;
    color: #506b80 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

.matelas-consent-list a {
    color: #1E90FF;
    text-decoration: underline;
}

.matelas-register-success {
    text-align: center;
    padding: 22px 8px 4px;
}

.matelas-register-success > span {
    display: inline-flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eff8ff;
    color: #1E90FF;
    font-size: 32px;
    margin-bottom: 16px;
}

.matelas-register-success p {
    max-width: 460px;
    margin: 10px auto 22px;
    color: #6d8292;
}

.matelas-auth-narrow {
    width: min(100%, 590px);
    margin: 0 auto;
}

.matelas-account-sidebar {
    border-radius: 20px;
    overflow: hidden;
    top: 24px;
}

.matelas-account-person {
    display: flex;
    gap: 13px;
    align-items: center;
    padding: 22px;
    border-bottom: 1px solid #edf2f6;
    background: linear-gradient(135deg, #f8fcff, #eef7ff);
}

.matelas-account-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1E90FF, #0B69C7);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 9px 22px rgba(30, 144, 255, .20);
}

.matelas-account-person > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.matelas-account-person strong,
.matelas-account-person small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.matelas-account-person small {
    color: #7890a2;
    font-size: 11px;
}

.matelas-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #16875b;
    font-size: 10px;
    font-weight: 700;
}

.matelas-account-nav {
    padding: 10px;
}

.matelas-account-nav .link-account {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    align-items: center;
    border-radius: 12px;
    padding: 12px 13px;
    color: #36556c;
    border: 0;
    transition: all .2s ease;
}

.matelas-account-nav .link-account:hover,
.matelas-account-nav .link-account.active {
    color: #0b69c7;
    background: #eff7ff;
}

.matelas-account-nav .link-account.active {
    box-shadow: inset 3px 0 0 #1E90FF;
}

.matelas-account-nav .link-account i {
    font-size: 20px;
}

.matelas-account-nav .link-account em {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e4f2ff;
    color: #1E90FF;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
}

.matelas-account-content {
    min-height: 520px;
}

.matelas-account-heading,
.matelas-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.matelas-account-heading {
    margin-bottom: 24px;
}

.matelas-account-heading h3,
.matelas-account-heading h4,
.matelas-panel-head h5 {
    margin: 2px 0 0;
}

.matelas-account-count {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eff7ff;
    color: #1E90FF;
    font-size: 12px;
    font-weight: 700;
}

.matelas-account-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.matelas-account-stats > a {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 20px;
    border: 1px solid rgba(30, 144, 255, .12);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #f6fbff);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.matelas-account-stats > a:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 144, 255, .28);
    box-shadow: 0 16px 35px rgba(30, 144, 255, .09);
}

.matelas-account-stats > a > span,
.matelas-mini-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #eaf5ff;
    color: #1E90FF;
    font-size: 20px;
}

.matelas-account-stats > a > div {
    display: grid;
}

.matelas-account-stats small {
    color: #73899a;
}

.matelas-account-stats strong {
    font-size: 26px;
    color: #143b59;
}

.matelas-account-grid,
.matelas-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.matelas-account-panel {
    border-radius: 18px;
    padding: 22px;
}

.matelas-panel-head {
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid #edf2f5;
}

.matelas-panel-head a {
    color: #1E90FF;
    font-size: 12px;
    font-weight: 600;
}

.matelas-mini-list > div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f0f3f6;
}

.matelas-mini-list > div:last-child {
    border-bottom: 0;
}

.matelas-mini-list > div > div:not(.text-end) {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.matelas-mini-list small {
    color: #8395a3;
    font-size: 11px;
}

.matelas-mini-list .text-end {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.matelas-mini-list .text-end b {
    font-size: 12px;
    color: #173e5d;
}

.matelas-account-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    background: #f4f6f8;
    color: #667a88;
}

.matelas-account-status.is-info { background: #eaf5ff; color: #0b73d8; }
.matelas-account-status.is-success { background: #eaf9f2; color: #16875b; }
.matelas-account-status.is-danger { background: #fff0f0; color: #c34747; }
.matelas-account-status.is-pending { background: #fff8e8; color: #a66a13; }

.matelas-account-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 210px;
    color: #7c91a0;
}

.matelas-account-empty.large {
    min-height: 360px;
    border: 1px dashed rgba(30, 144, 255, .22);
    border-radius: 20px;
    background: #fbfdff;
}

.matelas-account-empty > i {
    font-size: 34px;
    color: #1E90FF;
    margin-bottom: 12px;
}

.matelas-account-empty a:not(.tf-btn) {
    color: #1E90FF;
    text-decoration: underline;
}

.matelas-account-table-wrap {
    overflow-x: auto;
    border: 1px solid #e8eef2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(22, 66, 98, .05);
}

.matelas-account-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.matelas-account-table th {
    background: #f7fbff;
    color: #73899a;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 14px 18px;
    border-bottom: 1px solid #e8eef2;
}

.matelas-account-table td {
    padding: 17px 18px;
    border-bottom: 1px solid #eff3f6;
    color: #4c687c;
    font-size: 13px;
}

.matelas-account-table tbody tr:last-child td { border-bottom: 0; }
.matelas-account-table tbody tr:hover { background: #fcfeff; }

.matelas-inquiry-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.matelas-inquiry-cards article {
    border-radius: 18px;
    padding: 20px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.matelas-inquiry-cards article:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(30, 144, 255, .09);
}

.matelas-inquiry-card-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.matelas-inquiry-card-top h5 { margin: 2px 0 0; }
.matelas-inquiry-cards article > p { color: #718696; min-height: 42px; }

.matelas-inquiry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #eff3f6;
}

.matelas-inquiry-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 8px;
    background: #f6f8fa;
    color: #708696;
    font-size: 10px;
}

.matelas-inquiry-meta span.is-blue { background: #eaf5ff; color: #1E90FF; }

.matelas-address-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.matelas-address-grid article {
    position: relative;
    border-radius: 18px;
    padding: 20px;
}

.matelas-address-grid article.is-default {
    border-color: rgba(30, 144, 255, .36);
    box-shadow: 0 15px 38px rgba(30, 144, 255, .09);
}

.matelas-address-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
}

.matelas-address-card-head > span {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eaf5ff;
    color: #1E90FF;
}

.matelas-address-card-head > div { display: grid; }
.matelas-address-card-head small { color: #1E90FF; font-size: 10px; font-weight: 700; }
.matelas-address-grid article > p { color: #657d8f; line-height: 1.65; }

.matelas-address-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    margin-top: 14px;
    border-top: 1px solid #edf2f5;
}

.matelas-address-actions a,
.matelas-address-actions button {
    color: #1E90FF;
    font-size: 12px;
    font-weight: 600;
    border: 0;
    background: none;
    padding: 0;
}

.matelas-address-actions button { color: #be5050; }

.matelas-form-divider {
    position: relative;
    margin: 28px 0 20px;
    border-top: 1px solid #edf2f5;
}

.matelas-form-divider span {
    position: relative;
    top: -11px;
    display: inline-flex;
    gap: 5px;
    background: #fff;
    padding-right: 12px;
    color: #153e5d;
    font-weight: 700;
    font-size: 13px;
}

.matelas-form-divider small { color: #8394a0; font-weight: 400; }

.matelas-security-note {
    display: flex;
    gap: 13px;
    align-items: center;
    padding: 14px;
    border-radius: 14px;
    background: #f1fbf6;
    border: 1px solid #dff3e9;
}

.matelas-security-note > span {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #fff;
    color: #16875b;
    font-size: 20px;
}

.matelas-security-note > div { display: grid; gap: 2px; }
.matelas-security-note small { color: #6f8b7f; }

.matelas-security-meta {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.matelas-security-meta span {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: #718696;
    font-size: 12px;
}

.matelas-security-meta b { color: #173e5d; }

@media (max-width: 991.98px) {
    .matelas-account-sidebar { position: static !important; }
    .matelas-account-nav {
        display: flex;
        overflow-x: auto;
        gap: 6px;
        padding: 10px;
        scrollbar-width: none;
    }
    .matelas-account-nav::-webkit-scrollbar { display: none; }
    .matelas-account-nav .link-account {
        grid-template-columns: auto auto auto;
        min-width: max-content;
        box-shadow: none !important;
    }
    .matelas-account-grid,
    .matelas-security-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .matelas-auth-card,
    .matelas-auth-benefits { padding: 22px 18px; border-radius: 18px; }
    .matelas-auth-options { align-items: flex-start; flex-direction: column; }
    .matelas-account-stats,
    .matelas-inquiry-cards,
    .matelas-address-grid { grid-template-columns: 1fr; }
    .matelas-account-heading { align-items: flex-start; flex-direction: column; }
    .matelas-mini-list > div { grid-template-columns: 42px minmax(0, 1fr); }
    .matelas-mini-list .text-end { grid-column: 2; justify-items: start; text-align: left !important; }
    .matelas-account-person { padding: 16px; }
    .matelas-account-nav .link-account .text { font-size: 13px !important; }
}

/* =========================================================
   STEP 08A - Mobile sticky toolbar + auth checkbox polish
   ========================================================= */

/* Keep text/password/etc. fields finger friendly, but never stretch checks/radios. */
.matelas-auth-form input[type="checkbox"],
.matelas-auth-form input[type="radio"],
.matelas-account-form input[type="checkbox"],
.matelas-account-form input[type="radio"] {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 20px;
    cursor: pointer;
}

.matelas-auth-form .tf-check.style-2,
.matelas-account-form .tf-check.style-2 {
    width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    border-radius: 5px;
    border: 1.5px solid #afc4d4;
    background: #fff;
    box-shadow: none;
}

.matelas-auth-form .tf-check.style-2:checked,
.matelas-account-form .tf-check.style-2:checked {
    background: #1E90FF;
    border-color: #1E90FF;
}

.matelas-auth-form .tf-check.style-2:focus-visible,
.matelas-account-form .tf-check.style-2:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(30, 144, 255, .14);
}

/* Make the entire label row a comfortable click/tap target. */
.matelas-auth-options .checkbox-wrap {
    min-height: 36px;
    padding: 6px 8px;
    margin: -6px -8px !important;
    border-radius: 9px;
    cursor: pointer;
    user-select: none;
    transition: background-color .18s ease;
}

.matelas-auth-options .checkbox-wrap:hover {
    background: #f3f9ff;
}

.matelas-auth-options .checkbox-wrap span {
    line-height: 20px;
}

.matelas-consent-list label,
.matelas-inline-check {
    min-height: 38px;
    padding: 7px 8px;
    border-radius: 9px;
    cursor: pointer;
    user-select: none;
    transition: background-color .18s ease, color .18s ease;
}

.matelas-consent-list label:hover,
.matelas-inline-check:hover {
    background: rgba(30, 144, 255, .06);
    color: #274f6c !important;
}

.matelas-consent-list label > span,
.matelas-inline-check > span {
    line-height: 20px;
}

/* Mobile navigation is shared by every public frontend page. */
.matelas-mobile-toolbar {
    border-top: 1px solid rgba(24, 61, 87, .08);
    padding: 9px 6px calc(8px + env(safe-area-inset-bottom));
    min-height: 66px;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -8px 28px rgba(29, 58, 80, .10);
}

.matelas-mobile-toolbar .toolbar-item {
    min-width: 0;
}

.matelas-mobile-toolbar .toolbar-item a {
    min-height: 48px;
    color: #182f40;
    border-radius: 12px;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.matelas-mobile-toolbar .toolbar-item a:active {
    transform: translateY(1px);
}

.matelas-mobile-toolbar .toolbar-icon {
    font-size: 21px;
    line-height: 1;
}

.matelas-mobile-toolbar .toolbar-label {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.matelas-mobile-toolbar .toolbar-item.is-active a {
    color: #1E90FF;
    background: rgba(30, 144, 255, .075);
}

.matelas-mobile-toolbar .toolbar-count {
    top: -7px;
    right: -9px;
    width: 17px;
    height: 17px;
    font-size: 10px;
    line-height: 17px;
    background: #1E90FF;
    box-shadow: 0 0 0 2px #fff;
}

.matelas-mobile-toolbar .toolbar-count.is-empty {
    display: none;
}

@media (max-width: 1199px) {
    body {
        padding-bottom: calc(66px + env(safe-area-inset-bottom));
    }

    #goTop {
        bottom: calc(82px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 420px) {
    .matelas-mobile-toolbar {
        padding-left: 2px;
        padding-right: 2px;
    }

    .matelas-mobile-toolbar .toolbar-label {
        font-size: 10.5px;
    }
}

/* STEP 09 - Live search */
.matelas-live-search{position:relative;overflow:visible!important}
.matelas-search-suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:1200;background:#fff;border:1px solid rgba(30,144,255,.18);border-radius:16px;box-shadow:0 18px 55px rgba(19,39,67,.16);padding:10px;max-height:min(620px,72vh);overflow:auto;min-width:520px}
.matelas-search-suggest[hidden]{display:none!important}
.matelas-search-group+.matelas-search-group{border-top:1px solid #edf1f5;margin-top:7px;padding-top:7px}
.matelas-search-group-title{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#7b8794;padding:8px 10px 6px}
.matelas-search-category,.matelas-search-product{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:11px;color:#15171a;transition:background .18s ease,transform .18s ease}
.matelas-search-category:hover,.matelas-search-product:hover{background:#f2f8ff;color:#101820;transform:translateX(2px)}
.matelas-search-category>span:nth-child(2),.matelas-search-copy{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}
.matelas-search-category strong,.matelas-search-copy strong{font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.matelas-search-category small,.matelas-search-copy small{font-size:11px;color:#7b8794;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.matelas-search-category-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#eaf4ff;color:#1e90ff;flex:0 0 auto}
.matelas-search-thumb{width:54px;height:54px;border-radius:11px;overflow:hidden;background:#f5f6f7;display:grid;place-items:center;flex:0 0 auto}
.matelas-search-thumb img{width:100%;height:100%;object-fit:cover}
.matelas-search-noimage{color:#9aa6b2;font-size:22px}
.matelas-search-price{font-size:13px;font-weight:700;color:#1e90ff;white-space:nowrap;margin-left:8px}
.matelas-search-all{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:8px;padding:11px;border-radius:11px;background:#1e90ff;color:#fff!important;font-weight:700;font-size:13px}
.matelas-search-all:hover{background:#0e7ee8}
.matelas-search-loading,.matelas-search-empty{padding:18px 14px;text-align:center;color:#6c7783;font-size:13px}
.matelas-search-loading span{display:inline-block;width:12px;height:12px;border:2px solid #cfe8ff;border-top-color:#1e90ff;border-radius:50%;animation:matelasSearchSpin .7s linear infinite;margin-right:6px;vertical-align:-2px}
@keyframes matelasSearchSpin{to{transform:rotate(360deg)}}

/* STEP 09 - Public content pages */
.matelas-public-hero{background:radial-gradient(circle at 86% 12%,rgba(30,144,255,.14),transparent 24%),linear-gradient(135deg,#f5faff 0%,#fff 55%,#f6f9fc 100%);border-bottom:1px solid #e8f1fa}
.matelas-public-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#1e90ff;margin-bottom:12px}
.matelas-public-kicker:before{content:"";width:24px;height:2px;background:#1e90ff;border-radius:999px}
.matelas-content-card{background:#fff;border:1px solid #e7edf3;border-radius:22px;box-shadow:0 12px 42px rgba(26,48,79,.06);padding:clamp(22px,3.4vw,48px)}
.matelas-rich-content{font-size:16px;line-height:1.8;color:#495461}
.matelas-rich-content h2,.matelas-rich-content h3,.matelas-rich-content h4{color:#111820;margin:1.6em 0 .65em;line-height:1.25}
.matelas-rich-content h2:first-child,.matelas-rich-content h3:first-child{margin-top:0}
.matelas-rich-content a{color:#1e90ff;text-decoration:underline;text-underline-offset:3px}
.matelas-rich-content ul,.matelas-rich-content ol{padding-left:1.35rem;margin:1rem 0}
.matelas-rich-content blockquote{margin:1.5rem 0;padding:16px 20px;border-left:4px solid #1e90ff;background:#f2f8ff;border-radius:0 14px 14px 0}
.matelas-rich-content table{width:100%;border-collapse:collapse;margin:1.5rem 0}
.matelas-rich-content th,.matelas-rich-content td{border:1px solid #e3e9ef;padding:10px 12px;text-align:left}
.matelas-search-page-form{max-width:820px;margin:0 auto;position:relative}
.matelas-search-page-form .form-search-nav{display:flex!important;width:100%;height:62px;border:1px solid rgba(30,144,255,.25);border-radius:16px;background:#fff;box-shadow:0 12px 40px rgba(30,144,255,.08);padding:0 14px 0 20px}
.matelas-search-page-form .form-search-nav input{flex:1;border:0;outline:0;background:transparent;font-size:16px;min-width:0}
.matelas-search-page-form .form-search-nav button{width:44px;height:44px;border-radius:12px;background:#1e90ff;color:#fff;display:grid;place-items:center;align-self:center}
.matelas-search-page-form .matelas-search-suggest{min-width:0;top:calc(100% + 10px)}
.matelas-search-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:28px 0 22px}
.matelas-search-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:34px}
.matelas-search-category-card{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #e5edf5;border-radius:16px;background:#fff;transition:.2s ease;box-shadow:0 8px 24px rgba(31,49,76,.04)}
.matelas-search-category-card:hover{border-color:#9fd0ff;transform:translateY(-2px);box-shadow:0 12px 30px rgba(30,144,255,.10)}
.matelas-search-category-card .iconbox{width:46px;height:46px;border-radius:13px;background:#edf7ff;color:#1e90ff;display:grid;place-items:center;font-size:20px;flex:0 0 auto}
.matelas-search-category-card strong{display:block;color:#121820;font-size:14px}.matelas-search-category-card small{color:#7a8590;font-size:11px}
.matelas-empty-state{text-align:center;padding:64px 20px;border:1px dashed #cfe1f2;border-radius:22px;background:#fafdff}
.matelas-empty-state .icon-wrap{width:72px;height:72px;border-radius:22px;background:#eaf5ff;color:#1e90ff;display:grid;place-items:center;margin:0 auto 18px;font-size:30px}

.matelas-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.matelas-blog-card{border:1px solid #e7edf3;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(21,44,75,.05);transition:.22s ease}
.matelas-blog-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(30,144,255,.10);border-color:#b9dcff}
.matelas-blog-card-media{display:block;aspect-ratio:16/10;background:#f3f5f7;overflow:hidden}
.matelas-blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.matelas-blog-card:hover img{transform:scale(1.035)}
.matelas-blog-card-placeholder{width:100%;height:100%;display:grid;place-items:center;color:#87a6c5;font-size:40px;background:linear-gradient(135deg,#eff8ff,#f8fbff)}
.matelas-blog-card-body{padding:20px}.matelas-blog-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:11px;color:#75808c;margin-bottom:10px}
.matelas-blog-category{display:inline-flex;padding:5px 9px;border-radius:999px;background:#edf7ff;color:#1e90ff;font-weight:700}
.matelas-blog-card h3{font-size:20px;line-height:1.3;margin-bottom:9px}.matelas-blog-card p{color:#6d7782;line-height:1.65;margin-bottom:0}
.matelas-blog-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}.matelas-blog-chip{padding:9px 14px;border:1px solid #dce6ef;border-radius:999px;background:#fff;font-size:13px;font-weight:600}.matelas-blog-chip:hover,.matelas-blog-chip.is-active{background:#1e90ff;border-color:#1e90ff;color:#fff}
.matelas-article-wrap{max-width:920px;margin:0 auto}.matelas-article-cover{border-radius:24px;overflow:hidden;margin-bottom:30px;background:#f3f5f7}.matelas-article-cover img{width:100%;max-height:620px;object-fit:cover}
.matelas-article-meta{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;color:#75808c;font-size:13px;margin:12px 0 0}
.matelas-related-blog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

.matelas-faq-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:34px;align-items:start}.matelas-faq-nav{position:sticky;top:120px;border:1px solid #e7edf3;border-radius:18px;background:#fff;padding:12px}.matelas-faq-nav a{display:block;padding:11px 13px;border-radius:11px;color:#4d5965;font-size:13px;font-weight:600}.matelas-faq-nav a:hover{background:#edf7ff;color:#1e90ff}
.matelas-faq-section{margin-bottom:36px}.matelas-faq-section-title{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}.matelas-faq-section-title .iconbox{width:44px;height:44px;border-radius:13px;background:#edf7ff;color:#1e90ff;display:grid;place-items:center;flex:0 0 auto}
.matelas-faq-item{border:1px solid #e6edf4;border-radius:15px;background:#fff;margin-bottom:10px;overflow:hidden}.matelas-faq-question{width:100%;border:0;background:#fff;padding:17px 18px;display:flex;justify-content:space-between;gap:16px;text-align:left;font-weight:700;color:#18202a}.matelas-faq-question:hover{background:#f8fbfe}.matelas-faq-question i{transition:transform .2s ease}.matelas-faq-item.is-open .matelas-faq-question i{transform:rotate(180deg)}.matelas-faq-answer{display:none;padding:0 18px 18px;color:#65717c;line-height:1.7}.matelas-faq-item.is-open .matelas-faq-answer{display:block}

.matelas-contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;align-items:start}.matelas-contact-info{display:grid;gap:14px}.matelas-contact-info-card{display:flex;gap:14px;padding:18px;border:1px solid #e7edf3;border-radius:16px;background:#fff}.matelas-contact-info-card .iconbox{width:46px;height:46px;border-radius:13px;background:#edf7ff;color:#1e90ff;display:grid;place-items:center;flex:0 0 auto}.matelas-contact-info-card strong{display:block;margin-bottom:3px}.matelas-contact-info-card a,.matelas-contact-info-card span{color:#68737f;font-size:14px}
.matelas-contact-form{border:1px solid #e7edf3;border-radius:22px;background:#fff;padding:clamp(22px,3vw,36px);box-shadow:0 14px 42px rgba(25,45,71,.06)}.matelas-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.matelas-form-field{display:flex;flex-direction:column;gap:7px}.matelas-form-field.full{grid-column:1/-1}.matelas-form-field label{font-size:13px;font-weight:700;color:#25303a}.matelas-form-field input,.matelas-form-field textarea{width:100%;border:1px solid #dbe4ec;border-radius:13px;background:#fbfdff;padding:13px 14px;outline:0;transition:.18s ease}.matelas-form-field input:focus,.matelas-form-field textarea:focus{border-color:#1e90ff;box-shadow:0 0 0 3px rgba(30,144,255,.10);background:#fff}.matelas-form-field textarea{min-height:150px;resize:vertical}.matelas-form-error{font-size:11px;color:#dc3545;min-height:14px}.matelas-contact-success{padding:22px;border-radius:16px;background:#effaf4;border:1px solid #bde8cf;color:#20663e;margin-bottom:18px}.matelas-contact-submit[disabled]{opacity:.65;pointer-events:none}

@media(max-width:991.98px){.matelas-search-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.matelas-blog-grid,.matelas-related-blog{grid-template-columns:repeat(2,minmax(0,1fr))}.matelas-faq-layout,.matelas-contact-grid{grid-template-columns:1fr}.matelas-faq-nav{position:static;display:flex;overflow:auto;gap:6px}.matelas-faq-nav a{white-space:nowrap}}
@media(max-width:767.98px){.matelas-search-category-grid,.matelas-blog-grid,.matelas-related-blog,.matelas-form-grid{grid-template-columns:1fr}.matelas-content-card{border-radius:18px}.matelas-search-page-form .form-search-nav{height:56px}.matelas-public-hero{padding-top:32px!important;padding-bottom:32px!important}}
@media(max-width:1199.98px){.canvas-mb .matelas-live-search{position:relative;overflow:visible}.canvas-mb .matelas-search-suggest{left:0;right:0;min-width:0;top:calc(100% + 7px);max-height:58vh}.canvas-mb .matelas-search-price{font-size:11px}.canvas-mb .matelas-search-thumb{width:46px;height:46px}}

/* ========================================================================== 
   STEP 10 - Wishlist, privacy consent and final Matelas home polish
   ========================================================================== */
.matelas-wishlist-nav { position: relative; }
.matelas-wishlist-nav .count,
.matelas-mobile-toolbar [data-wishlist-count] {
    position: absolute;
    top: -7px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1e90ff;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid #fff;
}
.matelas-wishlist-nav .count.is-empty,
.matelas-mobile-toolbar [data-wishlist-count].is-empty { display: none; }

.matelas-wishlist-toggle {
    position: absolute;
    z-index: 6;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(17,24,39,.09);
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: #111827;
    box-shadow: 0 8px 24px rgba(15,23,42,.08);
    transition: .2s ease;
}
.matelas-wishlist-toggle:hover,
.matelas-wishlist-toggle.is-active {
    background: #1e90ff;
    color: #fff;
    border-color: #1e90ff;
    transform: translateY(-1px);
}
.matelas-wishlist-toggle:disabled { opacity: .6; pointer-events: none; }
.matelas-product-wishlist-action {
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 12px;
    border: 1px solid rgba(30,144,255,.28);
    background: rgba(30,144,255,.05);
    color: #155fa8;
    font-weight: 650;
    transition: .2s ease;
}
.matelas-product-wishlist-action:hover,
.matelas-product-wishlist-action.is-active {
    color: #fff;
    background: #1e90ff;
    border-color: #1e90ff;
}
.matelas-mini-toast {
    position: fixed;
    z-index: 99999;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 20px);
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: min(92vw, 440px);
    padding: 13px 18px;
    border-radius: 12px;
    background: #111827;
    color: #fff;
    box-shadow: 0 20px 55px rgba(15,23,42,.25);
    opacity: 0;
    pointer-events: none;
    transition: .18s ease;
}
.matelas-mini-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.matelas-cookie-banner {
    position: fixed;
    z-index: 99995;
    left: 24px;
    right: 24px;
    bottom: 22px;
    max-width: 1120px;
    margin: 0 auto;
    display: none;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid rgba(30,144,255,.18);
    border-radius: 18px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 24px 70px rgba(15,23,42,.18);
    backdrop-filter: blur(14px);
}
.matelas-cookie-banner.is-visible { display: grid; }
.matelas-cookie-banner__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg,#1e90ff,#54b0ff);
    color: #fff;
    font-size: 21px;
}
.matelas-cookie-banner__content strong { display:block; font-size:16px; margin-bottom:3px; color:#0f172a; }
.matelas-cookie-banner__content p { margin:0 0 4px; color:#64748b; line-height:1.5; font-size:13px; }
.matelas-cookie-banner__content a { color:#1e90ff; font-size:12px; font-weight:650; }
.matelas-cookie-banner__actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.matelas-cookie-banner__actions .tf-btn { min-height:40px; padding:9px 14px; }
.matelas-cookie-preferences {
    position: fixed;
    inset: 0;
    z-index: 99998;
    opacity: 0;
    transition: opacity .18s ease;
}
.matelas-cookie-preferences.is-visible { opacity:1; }
.matelas-cookie-preferences__backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(3px); }
.matelas-cookie-preferences__panel {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-48%);
    width:min(92vw,610px);
    max-height:86vh;
    overflow:auto;
    padding:28px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 30px 90px rgba(15,23,42,.28);
    transition:transform .18s ease;
}
.matelas-cookie-preferences.is-visible .matelas-cookie-preferences__panel { transform:translate(-50%,-50%); }
.matelas-cookie-preferences__close {
    position:absolute; top:16px; right:16px; width:38px; height:38px; border:0; border-radius:50%; background:#f3f6f9; color:#111827;
}
.matelas-consent-option {
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:12px;
    padding:16px;
    border:1px solid #e7edf4;
    border-radius:14px;
    background:#fff;
    cursor:pointer;
}
.matelas-consent-option > div { flex:1; min-width:0; }
.matelas-consent-option strong { display:block; color:#111827; }
.matelas-consent-option small { display:block; margin-top:3px; color:#6b7280; line-height:1.4; }
.matelas-consent-option input { position:absolute; opacity:0; pointer-events:none; }
.matelas-consent-switch { position:relative; flex:0 0 auto; width:46px; height:26px; border-radius:999px; background:#dce3eb; transition:.2s ease; }
.matelas-consent-switch::after { content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.18); transition:.2s ease; }
.matelas-consent-option input:checked + .matelas-consent-switch { background:#1e90ff; }
.matelas-consent-option input:checked + .matelas-consent-switch::after { transform:translateX(20px); }
.matelas-consent-option.is-required { background:rgba(30,144,255,.04); cursor:default; }
.matelas-consent-status { padding:6px 9px; border-radius:999px; background:rgba(30,144,255,.1); color:#1476d4; font-size:11px; font-weight:700; white-space:nowrap; }
.matelas-cookie-preferences__actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
html.matelas-consent-open { overflow:hidden; }
.matelas-footer-bottom-links { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.matelas-cookie-settings-link { padding:0; border:0; background:transparent; color:rgba(255,255,255,.62); font:inherit; text-decoration:underline; text-underline-offset:3px; }
.matelas-cookie-settings-link:hover { color:#fff; }

.matelas-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.matelas-benefit-card {
    position:relative;
    overflow:hidden;
    display:flex;
    gap:16px;
    min-height:180px;
    padding:24px;
    border:1px solid rgba(30,144,255,.13);
    border-radius:18px;
    background:linear-gradient(145deg,#fff 0%,#f7fbff 100%);
    box-shadow:0 14px 40px rgba(15,23,42,.055);
}
.matelas-benefit-card::after { content:""; position:absolute; width:120px; height:120px; border-radius:50%; right:-54px; bottom:-60px; border:22px solid rgba(30,144,255,.055); }
.matelas-benefit-icon { width:48px; height:48px; flex:0 0 48px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; color:#fff; background:linear-gradient(135deg,#1e90ff,#4dabff); font-size:22px; }
.matelas-benefit-card h3 { font-size:20px; margin:4px 0 7px; }
.matelas-benefit-card p { color:#697586; margin:0; line-height:1.55; }

.matelas-home-testimonials { background:linear-gradient(180deg,#f7fbff 0%,#fff 100%); }
.matelas-testimonial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.matelas-testimonial-card { padding:24px; border-radius:18px; background:#fff; border:1px solid #e8eef5; box-shadow:0 14px 38px rgba(15,23,42,.05); }
.matelas-testimonial-stars { color:#1e90ff; letter-spacing:2px; margin-bottom:12px; }
.matelas-testimonial-card blockquote { margin:0 0 18px; color:#263444; font-size:15px; line-height:1.65; }
.matelas-testimonial-person { display:flex; flex-direction:column; gap:2px; }
.matelas-testimonial-person span { color:#7b8794; font-size:12px; }

.matelas-faq-list { display:grid; gap:10px; }
.matelas-faq-item { border:1px solid #e6edf5; border-radius:14px; background:#fff; overflow:hidden; }
.matelas-faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; font-weight:650; color:#172033; }
.matelas-faq-item summary::-webkit-details-marker { display:none; }
.matelas-faq-item summary i { color:#1e90ff; transition:transform .2s ease; }
.matelas-faq-item[open] summary i { transform:rotate(45deg); }
.matelas-faq-answer { padding:0 20px 18px; color:#667484; line-height:1.65; }
.matelas-gallery-card { position:relative; margin:0; border-radius:14px; overflow:hidden; aspect-ratio:1/1; background:#f3f5f7; }
.matelas-gallery-card img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.matelas-gallery-card:hover img { transform:scale(1.035); }
.matelas-gallery-card figcaption { position:absolute; left:12px; right:12px; bottom:12px; padding:9px 11px; border-radius:10px; background:rgba(15,23,42,.72); color:#fff; font-size:12px; backdrop-filter:blur(7px); }

@media (max-width: 991.98px) {
    .matelas-benefit-grid, .matelas-testimonial-grid { grid-template-columns:1fr; }
    .matelas-cookie-banner { grid-template-columns:auto minmax(0,1fr); bottom:82px; }
    .matelas-cookie-banner__actions { grid-column:1/-1; justify-content:stretch; }
    .matelas-cookie-banner__actions .tf-btn { flex:1 1 150px; }
}
@media (max-width: 575.98px) {
    .matelas-cookie-banner { left:10px; right:10px; bottom:74px; padding:15px; border-radius:15px; grid-template-columns:1fr; gap:10px; }
    .matelas-cookie-banner__icon { width:42px; height:42px; }
    .matelas-cookie-banner__actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }
    .matelas-cookie-banner__actions [data-consent-action="preferences"] { grid-column:1/-1; }
    .matelas-cookie-preferences__panel { width:calc(100vw - 20px); padding:22px 16px; border-radius:17px; }
    .matelas-cookie-preferences__actions { flex-direction:column-reverse; }
    .matelas-cookie-preferences__actions .tf-btn { width:100%; }
    .matelas-benefit-card { padding:18px; min-height:auto; }
    .matelas-wishlist-toggle { width:36px; height:36px; top:10px; right:10px; }
    .matelas-mini-toast { bottom:78px; }
}

/* ========================================================================== 
   STEP 11 - Homepage production polish
   ========================================================================== */
.matelas-home-category-strip {
    position: relative;
    z-index: 3;
}
.matelas-category-strip-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}
.matelas-category-strip-head .matelas-public-kicker {
    margin-bottom: 7px;
}
.matelas-category-strip-head h2 {
    margin: 0;
    font-size: clamp(23px, 2.1vw, 32px);
    line-height: 1.15;
}
.matelas-category-strip-link,
.matelas-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #166fc8;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
    transition: color .18s ease, gap .18s ease;
}
.matelas-category-strip-link:hover,
.matelas-inline-link:hover {
    color: #1e90ff;
    gap: 10px;
}
.matelas-home-category-strip .category-v05 {
    position: relative;
    overflow: hidden;
    min-height: 92px;
    border: 1px solid #e8edf3;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15, 40, 70, .045);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.matelas-home-category-strip .category-v05.bg-main {
    background: linear-gradient(135deg, #fff 0%, #f8fbff 100%) !important;
}
.matelas-home-category-strip .category-v05.bg-primary {
    border-color: rgba(30,144,255,.25);
    background: linear-gradient(135deg, #1477d9 0%, #1e90ff 52%, #4aabff 100%) !important;
    box-shadow: 0 12px 28px rgba(30,144,255,.18);
}
.matelas-home-category-strip .category-v05::after {
    content: "→";
    position: absolute;
    right: 15px;
    bottom: 11px;
    opacity: 0;
    transform: translateX(-5px);
    color: #1e90ff;
    font-size: 17px;
    font-weight: 800;
    transition: .2s ease;
}
.matelas-home-category-strip .category-v05.bg-primary::after { color: #fff; }
.matelas-home-category-strip .category-v05:hover {
    transform: translateY(-3px);
    border-color: rgba(30,144,255,.28);
    box-shadow: 0 15px 35px rgba(18, 69, 116, .10);
}
.matelas-home-category-strip .category-v05:hover::after {
    opacity: .95;
    transform: translateX(0);
}
.matelas-home-category-strip .cate-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 14px rgba(15,23,42,.09);
}
.matelas-home-category-strip .matelas-category-strip-image {
    transition: transform .28s ease;
}
.matelas-home-category-strip .category-v05:hover .matelas-category-strip-image {
    transform: scale(1.06);
}

.matelas-home-hero-section .container-full {
    position: relative;
}
.matelas-home-hero-section .matelas-db-hero {
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(12,53,90,.10);
}
.matelas-db-hero.has-content::after {
    background:
        linear-gradient(90deg, rgba(6,22,36,.68) 0%, rgba(7,25,43,.42) 34%, rgba(8,27,47,.10) 70%, rgba(8,27,47,.04) 100%),
        linear-gradient(0deg, rgba(0,0,0,.12), rgba(0,0,0,0));
}
.matelas-hero-copy-inner {
    position: relative;
    padding: clamp(24px, 3vw, 38px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(13,31,48,.44), rgba(13,31,48,.17));
    box-shadow: 0 20px 50px rgba(0,0,0,.14);
    backdrop-filter: blur(5px);
}
.matelas-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(30,144,255,.84);
    box-shadow: 0 7px 18px rgba(30,144,255,.22);
    font-size: 11px;
    letter-spacing: .12em;
}
.matelas-hero-title {
    text-wrap: balance;
    text-shadow: 0 3px 18px rgba(0,0,0,.20);
}
.matelas-hero-description {
    font-size: 16px;
    text-wrap: pretty;
}
.matelas-home-hero-section .tf-btn.btn-white {
    border-color: #fff;
    box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.matelas-home-trustbar {
    position: relative;
    z-index: 4;
    margin-top: -28px;
    padding-bottom: 6px;
}
.matelas-trustbar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    border: 1px solid rgba(30,144,255,.14);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255,255,255,.97);
    box-shadow: 0 18px 50px rgba(12,53,90,.10);
    backdrop-filter: blur(12px);
}
.matelas-trustbar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 17px 18px;
    color: #172331;
    transition: background .2s ease;
}
.matelas-trustbar-item + .matelas-trustbar-item {
    border-left: 1px solid #e9eff5;
}
.matelas-trustbar-item:hover {
    background: #f5faff;
}
.matelas-trustbar-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #e7f4ff, #f5faff);
    color: #1e90ff;
    font-size: 20px;
    box-shadow: inset 0 0 0 1px rgba(30,144,255,.10);
}
.matelas-trustbar-item strong,
.matelas-trustbar-item small {
    display: block;
}
.matelas-trustbar-item strong {
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 780;
}
.matelas-trustbar-item small {
    color: #73808d;
    font-size: 10.5px;
    line-height: 1.4;
}

#wrapper .matelas-home-products {
    padding-top: clamp(60px, 6vw, 92px);
}
.matelas-home-products .sect-heading {
    margin-bottom: 26px;
}
.matelas-home-products .sect-heading .row {
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid rgba(30,144,255,.12);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(241,248,255,.92), rgba(255,255,255,.96));
    box-shadow: 0 12px 38px rgba(12,53,90,.055);
}

.matelas-benefit-card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.matelas-benefit-card:hover {
    transform: translateY(-4px);
    border-color: rgba(30,144,255,.23);
    box-shadow: 0 18px 44px rgba(15,23,42,.08);
}
.matelas-benefit-card--measure .matelas-benefit-icon { background: linear-gradient(135deg,#1e90ff,#62b8ff); }
.matelas-benefit-card--delivery .matelas-benefit-icon { background: linear-gradient(135deg,#0b74d1,#27a6e8); }
.matelas-benefit-card--support .matelas-benefit-icon { background: linear-gradient(135deg,#275fe8,#6958eb); }
.matelas-benefit-card h3 { text-wrap: balance; }

.matelas-home-promo {
    padding-inline: 10px;
}
.matelas-home-promo .matelas-db-promotional {
    border-radius: 22px;
    box-shadow: 0 22px 60px rgba(12,53,90,.11);
}
.matelas-db-promotional.has-content::after {
    background: linear-gradient(90deg, rgba(4,18,31,.68) 0%, rgba(5,21,38,.34) 48%, rgba(5,21,38,.08) 100%);
}
.matelas-db-promotional .bn_content .wrap {
    max-width: 650px;
    padding: 28px;
    border-radius: 18px;
    background: rgba(9,26,42,.26);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(4px);
}

.matelas-home-testimonials {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 16%, rgba(30,144,255,.08), transparent 24%),
        linear-gradient(180deg,#f7fbff 0%,#fff 100%);
}
.matelas-home-testimonials::after {
    content: "";
    position: absolute;
    right: -90px;
    top: 50px;
    width: 260px;
    height: 260px;
    border: 46px solid rgba(30,144,255,.035);
    border-radius: 50%;
    pointer-events: none;
}
.matelas-testimonial-card {
    position: relative;
    z-index: 1;
    min-height: 100%;
    border-color: #e3edf6;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.matelas-testimonial-card:hover {
    transform: translateY(-4px);
    border-color: #bfe0ff;
    box-shadow: 0 20px 44px rgba(30,144,255,.10);
}
.matelas-testimonial-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}
.matelas-testimonial-quote {
    margin-top: -8px;
    color: rgba(30,144,255,.13);
    font-family: Georgia, serif;
    font-size: 64px;
    line-height: 1;
}
.matelas-testimonial-person {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 11px;
}
.matelas-testimonial-avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg,#1e90ff,#68baff);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 7px 18px rgba(30,144,255,.18);
}
.matelas-testimonial-person-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.matelas-home-faq {
    position: relative;
}
.matelas-faq-intro-card {
    position: sticky;
    top: 110px;
    overflow: hidden;
    padding: 28px;
    border: 1px solid rgba(30,144,255,.16);
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 10%, rgba(30,144,255,.13), transparent 30%),
        linear-gradient(145deg,#f5faff 0%,#fff 78%);
    box-shadow: 0 14px 40px rgba(12,53,90,.06);
}
.matelas-faq-intro-card::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -55px;
    width: 140px;
    height: 140px;
    border: 24px solid rgba(30,144,255,.045);
    border-radius: 50%;
}
.matelas-faq-intro-icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg,#1e90ff,#65b8ff);
    color: #fff;
    font-size: 23px;
    box-shadow: 0 10px 24px rgba(30,144,255,.20);
}
.matelas-faq-intro-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.matelas-faq-intro-actions .tf-btn {
    min-height: 46px;
}
.matelas-home-faq .matelas-faq-item {
    transition: border-color .18s ease, box-shadow .18s ease;
}
.matelas-home-faq .matelas-faq-item:hover,
.matelas-home-faq .matelas-faq-item[open] {
    border-color: #b9dcff;
    box-shadow: 0 10px 28px rgba(30,144,255,.06);
}

.matelas-home-blog {
    position: relative;
    background:
        linear-gradient(180deg,#fff 0%,#f8fbfe 55%,#fff 100%);
}
.matelas-home-blog .matelas-blog-card {
    min-height: 100%;
}
.matelas-home-blog .matelas-blog-card-body {
    display: flex;
    flex-direction: column;
    min-height: 200px;
}
.matelas-home-blog .matelas-blog-card h3 {
    text-wrap: balance;
}

.matelas-home-gallery {
    padding-inline: 10px;
}
.matelas-home-gallery .container-full {
    padding-top: 28px;
    padding-bottom: 28px;
    border: 1px solid rgba(30,144,255,.10);
    border-radius: 22px;
    background: linear-gradient(145deg,#f7fbff,#fff);
    overflow: hidden;
}
.matelas-gallery-card {
    box-shadow: 0 10px 30px rgba(15,23,42,.07);
}
.matelas-gallery-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg,rgba(9,24,38,.18),transparent 46%);
    opacity: .55;
    transition: opacity .3s ease;
}
.matelas-gallery-card:hover::after { opacity: .2; }
.matelas-gallery-card figcaption { z-index: 2; }

@media (max-width: 1199.98px) {
    .matelas-trustbar-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .matelas-trustbar-item:nth-child(3) { border-left: 0; border-top: 1px solid #e9eff5; }
    .matelas-trustbar-item:nth-child(4) { border-top: 1px solid #e9eff5; }
}
@media (max-width: 991.98px) {
    .matelas-faq-intro-card { position: relative; top: auto; }
    .matelas-home-hero-section .matelas-db-hero { border-radius: 18px; }
    .matelas-home-promo .matelas-db-promotional { border-radius: 18px; }
}
@media (max-width: 767.98px) {
    .matelas-category-strip-head { align-items: flex-start; }
    .matelas-category-strip-head h2 { font-size: 23px; }
    .matelas-category-strip-link { display: none; }
    .matelas-home-category-strip .category-v05 { min-height: 82px; border-radius: 14px; }
    .matelas-home-hero-section .matelas-db-hero { border-radius: 0; }
    .matelas-hero-copy-inner { padding: 22px; border-radius: 16px; backdrop-filter: blur(2px); }
    .matelas-home-trustbar { margin-top: 12px; }
    .matelas-trustbar-grid { grid-template-columns: 1fr 1fr; border-radius: 15px; }
    .matelas-trustbar-item { padding: 13px 12px; gap: 9px; }
    .matelas-trustbar-item:nth-child(3) { border-left: 0; }
    .matelas-trustbar-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; font-size: 17px; }
    .matelas-trustbar-item strong { font-size: 11.5px; }
    .matelas-trustbar-item small { display: none; }
    .matelas-home-products .sect-heading .row { padding: 20px; border-radius: 18px; }
    .matelas-home-promo { padding-inline: 0; }
    .matelas-home-promo .matelas-db-promotional { border-radius: 0; }
    .matelas-db-promotional .bn_content .wrap { padding: 20px; border-radius: 15px; }
    .matelas-home-gallery { padding-inline: 0; }
    .matelas-home-gallery .container-full { border-radius: 0; }
}
@media (max-width: 479.98px) {
    .matelas-trustbar-grid { grid-template-columns: 1fr; }
    .matelas-trustbar-item + .matelas-trustbar-item,
    .matelas-trustbar-item:nth-child(3),
    .matelas-trustbar-item:nth-child(4) { border-left: 0; border-top: 1px solid #e9eff5; }
    .matelas-trustbar-item small { display: block; }
}

/* ============================================================
   STEP 12 - Catalog + Product Detail production polish
   Visual only: no cart / inquiry / checkout logic changes.
   ============================================================ */

/* ---------- shared small accents ---------- */
#wrapper .matelas-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
    color: var(--matelas-blue, #1E90FF);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

#wrapper .matelas-section-kicker::before {
    content: "";
    width: 23px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

#wrapper .matelas-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--matelas-blue-ink, #0C355A);
    font-size: 13px;
    font-weight: 700;
}

#wrapper .matelas-inline-link i {
    transition: transform .2s ease;
}

#wrapper .matelas-inline-link:hover {
    color: var(--matelas-blue, #1E90FF);
}

#wrapper .matelas-inline-link:hover i {
    transform: translateX(3px);
}

/* ---------- catalog hero ---------- */
#wrapper .matelas-catalog-title {
    position: relative;
    overflow: hidden;
    padding-top: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(30, 144, 255, .08);
    background:
        radial-gradient(circle at 82% 22%, rgba(30, 144, 255, .13), transparent 25%),
        radial-gradient(circle at 15% 78%, rgba(30, 144, 255, .07), transparent 24%),
        linear-gradient(135deg, #F8FCFF 0%, #FFFFFF 52%, #F4F9FE 100%);
}

#wrapper .matelas-catalog-title::after {
    content: "";
    position: absolute;
    top: -90px;
    right: 7%;
    width: 210px;
    height: 210px;
    border: 26px solid rgba(30, 144, 255, .055);
    border-radius: 50%;
    pointer-events: none;
}

#wrapper .matelas-catalog-hero {
    position: relative;
    z-index: 1;
}

#wrapper .matelas-catalog-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr);
    align-items: center;
    gap: 48px;
}

#wrapper .matelas-catalog-hero-split .page-title-content {
    max-width: 700px;
}

#wrapper .matelas-catalog-title h1 {
    color: #10253A;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.04;
    letter-spacing: -.035em;
}

#wrapper .matelas-catalog-desc {
    font-size: 16px;
    line-height: 1.75;
}

#wrapper .matelas-catalog-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

#wrapper .matelas-catalog-hero-actions .tf-btn {
    min-height: 46px;
    padding: 10px 20px;
    border-radius: 12px;
}

#wrapper .matelas-catalog-hero-image {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border: 1px solid rgba(30, 144, 255, .10);
    border-radius: 26px;
    background: #EEF6FC;
    box-shadow: 0 24px 60px rgba(12, 53, 90, .11);
}

#wrapper .matelas-catalog-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(6, 35, 61, .38));
    pointer-events: none;
}

#wrapper .matelas-catalog-hero-image img {
    width: 100%;
    height: 100%;
    min-height: 330px;
    object-fit: cover;
    transition: transform .55s ease;
}

#wrapper .matelas-catalog-hero-image:hover img {
    transform: scale(1.035);
}

#wrapper .matelas-catalog-hero-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #173754;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    box-shadow: 0 7px 22px rgba(0,0,0,.12);
    backdrop-filter: blur(9px);
}

#wrapper .matelas-catalog-hero-badge i {
    color: var(--matelas-blue, #1E90FF);
}

/* ---------- catalog category showcase ---------- */
#wrapper .matelas-catalog-showcase {
    padding: 26px;
    border: 1px solid rgba(30, 144, 255, .09);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0, rgba(30, 144, 255, .07), transparent 28%),
        #FFFFFF;
    box-shadow: 0 18px 52px rgba(12, 53, 90, .055);
}

#wrapper .matelas-catalog-showcase-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

#wrapper .matelas-catalog-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#wrapper .matelas-catalog-showcase-card {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 13px;
    min-width: 0;
    min-height: 92px;
    padding: 10px 12px;
    border: 1px solid #EBF0F5;
    border-radius: 17px;
    background: linear-gradient(145deg, #FFFFFF, #FBFDFF);
    color: #172033;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

#wrapper .matelas-catalog-showcase-card:hover {
    transform: translateY(-3px);
    border-color: rgba(30, 144, 255, .22);
    background: #FFFFFF;
    box-shadow: 0 13px 30px rgba(12, 53, 90, .08);
}

#wrapper .matelas-catalog-showcase-media {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 13px;
    background: #EFF5FA;
    color: var(--matelas-blue, #1E90FF);
    font-size: 28px;
}

#wrapper .matelas-catalog-showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

#wrapper .matelas-catalog-showcase-card:hover .matelas-catalog-showcase-media img {
    transform: scale(1.07);
}

#wrapper .matelas-catalog-showcase-copy {
    min-width: 0;
}

#wrapper .matelas-catalog-showcase-copy strong,
#wrapper .matelas-catalog-showcase-copy small {
    display: block;
}

#wrapper .matelas-catalog-showcase-copy strong {
    overflow: hidden;
    margin-bottom: 3px;
    color: #172033;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#wrapper .matelas-catalog-showcase-copy small {
    color: #7A8794;
    font-size: 11px;
}

#wrapper .matelas-catalog-showcase-arrow {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F2F7FC;
    color: var(--matelas-blue, #1E90FF);
    transition: .2s ease;
}

#wrapper .matelas-catalog-showcase-card:hover .matelas-catalog-showcase-arrow {
    background: var(--matelas-blue, #1E90FF);
    color: #fff;
}

/* ---------- catalog supporting bar ---------- */
#wrapper .matelas-catalog-assurance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#wrapper .matelas-catalog-assurance > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 14px 16px;
    border: 1px solid #EAF0F5;
    border-radius: 16px;
    background: #fff;
}

#wrapper .matelas-catalog-assurance i {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(145deg, #EEF7FF, #E4F1FD);
    color: var(--matelas-blue, #1E90FF);
    font-size: 19px;
}

#wrapper .matelas-catalog-assurance span,
#wrapper .matelas-catalog-assurance strong,
#wrapper .matelas-catalog-assurance small {
    display: block;
}

#wrapper .matelas-catalog-assurance strong {
    margin-bottom: 2px;
    color: #19324A;
    font-size: 12px;
}

#wrapper .matelas-catalog-assurance small {
    color: #7B8794;
    font-size: 10px;
    line-height: 1.4;
}

/* Product card refinement on catalog pages only */
#wrapper .matelas-catalog-grid .card-product {
    min-width: 0;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: #fff;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

#wrapper .matelas-catalog-grid .card-product:hover {
    transform: translateY(-4px);
    border-color: rgba(30, 144, 255, .10);
    box-shadow: 0 17px 38px rgba(12, 53, 90, .08);
}

#wrapper .matelas-catalog-grid .card-product_wrapper {
    overflow: hidden;
    border: 1px solid #EEF1F4;
    border-radius: 15px;
    background: #F7F9FB;
}

#wrapper .matelas-catalog-grid .card-product_info {
    padding: 12px 5px 5px;
}

#wrapper .matelas-catalog-grid .name-product {
    min-height: 48px;
    color: #172033;
    font-size: 14px;
}

#wrapper .matelas-catalog-grid .price-new {
    font-size: 14px;
}

/* ---------- product detail ---------- */
#wrapper .matelas-product-single {
    position: relative;
    padding-top: 26px;
    padding-bottom: 70px;
}

#wrapper .matelas-product-gallery {
    position: relative;
    padding: 10px;
    border: 1px solid rgba(30, 144, 255, .09);
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 18px 48px rgba(12, 53, 90, .065);
}

#wrapper .matelas-gallery-slide {
    border-radius: 17px;
}

#wrapper .matelas-gallery-hint {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 999px;
    background: rgba(255,255,255,.90);
    color: #39526A;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(12, 53, 90, .08);
    backdrop-filter: blur(8px);
    pointer-events: none;
}

#wrapper .matelas-gallery-hint i {
    color: var(--matelas-blue, #1E90FF);
}

#wrapper .matelas-product-info {
    padding: 28px;
    border: 1px solid rgba(30, 144, 255, .09);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(30, 144, 255, .055), transparent 30%),
        #FFFFFF;
    box-shadow: 0 18px 48px rgba(12, 53, 90, .06);
}

#wrapper .matelas-product-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--matelas-blue, #1E90FF);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
}

#wrapper .matelas-product-eyebrow span {
    width: 23px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

#wrapper .matelas-product-title {
    color: #10263B;
}

#wrapper .matelas-product-meta {
    padding-bottom: 15px;
    border-bottom: 1px solid #EDF2F6;
}

#wrapper .matelas-product-price-panel {
    margin: 16px 0 18px;
    padding: 17px 18px;
    border: 1px solid rgba(30, 144, 255, .12);
    border-radius: 16px;
    background: linear-gradient(135deg, #F6FBFF, #FFFFFF);
}

#wrapper .matelas-product-price-panel .matelas-product-price-wrap {
    margin-bottom: 6px !important;
}

#wrapper .matelas-product-price-panel .price-new {
    color: var(--matelas-blue-dark, #0B69C7) !important;
    font-size: clamp(26px, 2.6vw, 38px);
}

#wrapper .matelas-product-highlights {
    gap: 9px;
}

#wrapper .matelas-product-highlights .matelas-highlight {
    min-height: 92px;
    border-radius: 15px;
}

#wrapper .matelas-standard-config {
    border: 1px solid rgba(30, 144, 255, .12);
    border-left: 4px solid var(--matelas-blue, #1E90FF);
    border-radius: 14px;
    background: #F7FBFF;
}

#wrapper .matelas-buy-box {
    padding: 14px;
    border: 1px solid #E9EEF3;
    border-radius: 16px;
    background: #FBFCFE;
}

#wrapper .matelas-buy-box .wg-quantity {
    overflow: hidden;
    border: 1px solid #DDE6EE;
    border-radius: 12px;
    background: #fff;
}

#wrapper .matelas-buy-box .tf-btn {
    min-height: 52px;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(30, 144, 255, .16);
}

#wrapper .matelas-inquiry-box {
    padding: 19px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(30, 144, 255, .075), rgba(30, 144, 255, .025));
}

#wrapper .matelas-inquiry-box .tf-btn {
    flex: 0 0 auto;
    border-radius: 11px;
}

#wrapper .matelas-product-wishlist-action {
    min-height: 48px;
    border-radius: 12px;
}

#wrapper .matelas-contact-strip {
    margin-top: 18px;
    padding: 17px 0 0;
}

#wrapper .matelas-product-assurance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

#wrapper .matelas-product-assurance > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid #EAF0F5;
    border-radius: 14px;
    background: #FBFDFF;
}

#wrapper .matelas-product-assurance i {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    border-radius: 10px;
    background: #EDF7FF;
    color: var(--matelas-blue, #1E90FF);
    font-size: 16px;
}

#wrapper .matelas-product-assurance span,
#wrapper .matelas-product-assurance strong,
#wrapper .matelas-product-assurance small {
    display: block;
}

#wrapper .matelas-product-assurance strong {
    margin-bottom: 3px;
    color: #19324A;
    font-size: 11px;
    line-height: 1.35;
}

#wrapper .matelas-product-assurance small {
    color: #7C8793;
    font-size: 9px;
    line-height: 1.45;
}

/* ---------- product tabs ---------- */
#wrapper .matelas-product-tabs-section {
    padding-top: 64px;
    padding-bottom: 64px;
    border-top: 1px solid rgba(30, 144, 255, .08);
    background:
        radial-gradient(circle at 7% 12%, rgba(30, 144, 255, .055), transparent 19%),
        #F8FBFE;
}

#wrapper .matelas-product-tabs-section > .container {
    padding-top: 22px;
    padding-bottom: 30px;
    border: 1px solid rgba(30, 144, 255, .09);
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 18px 50px rgba(12, 53, 90, .05);
}

#wrapper .matelas-product-tab-nav {
    gap: 8px;
    padding: 0 22px 16px;
    border-bottom: 1px solid #EDF1F5;
}

#wrapper .matelas-product-tab-nav .tf-btn-tab {
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid #E8EDF2;
    border-radius: 999px;
    background: #FBFCFE;
}

#wrapper .matelas-product-tab-nav .tf-btn-tab .h5 {
    font-size: 13px;
}

#wrapper .matelas-product-tab-nav .tf-btn-tab:hover,
#wrapper .matelas-product-tab-nav .tf-btn-tab.active {
    border-color: var(--matelas-blue, #1E90FF);
    background: var(--matelas-blue, #1E90FF);
    color: #fff;
    box-shadow: 0 8px 18px rgba(30, 144, 255, .17);
}

#wrapper .matelas-product-tab-nav .tf-btn-tab.active .h5,
#wrapper .matelas-product-tab-nav .tf-btn-tab:hover .h5 {
    color: inherit;
}

#wrapper .matelas-product-tab-content {
    padding: 30px 26px 0;
}

#wrapper .matelas-tab-copy,
#wrapper .matelas-dimension-card,
#wrapper .matelas-delivery-card,
#wrapper .matelas-material-card {
    border-color: #E9EFF4;
    border-radius: 15px;
    background: linear-gradient(145deg, #FFFFFF, #FBFDFF);
}

#wrapper .matelas-tab-copy,
#wrapper .matelas-dimension-card,
#wrapper .matelas-delivery-card,
#wrapper .matelas-material-card {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#wrapper .matelas-tab-copy:hover,
#wrapper .matelas-dimension-card:hover,
#wrapper .matelas-delivery-card:hover,
#wrapper .matelas-material-card:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 144, 255, .17);
    box-shadow: 0 11px 26px rgba(12, 53, 90, .055);
}

#wrapper .matelas-spec-list {
    border-color: #E8EEF4;
    border-radius: 15px;
}

#wrapper .matelas-spec-row:nth-child(even) {
    background: #F8FBFD;
}

#wrapper .matelas-related-products {
    padding-top: 64px !important;
    padding-bottom: 70px;
    background: linear-gradient(180deg, #FFFFFF, #F8FBFE);
}

#wrapper .matelas-related-heading .matelas-section-kicker {
    justify-content: center;
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
    #wrapper .matelas-catalog-hero-split {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
        gap: 30px;
    }

    #wrapper .matelas-catalog-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #wrapper .matelas-product-info {
        padding: 22px;
    }

    #wrapper .matelas-product-assurance {
        grid-template-columns: 1fr;
    }

    #wrapper .matelas-product-assurance > div {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 9px;
        align-items: center;
    }

    #wrapper .matelas-product-assurance i {
        margin-bottom: 0;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 991px) {
    #wrapper .matelas-catalog-hero-split {
        grid-template-columns: 1fr;
    }

    #wrapper .matelas-catalog-hero-split .page-title-content {
        max-width: none;
        text-align: center;
    }

    #wrapper .matelas-catalog-hero-split .breadcrumb-wrap,
    #wrapper .matelas-catalog-hero-split .matelas-catalog-hero-actions {
        justify-content: center;
    }

    #wrapper .matelas-catalog-hero-image {
        min-height: 280px;
    }

    #wrapper .matelas-catalog-hero-image img {
        min-height: 280px;
    }

    #wrapper .matelas-catalog-assurance {
        grid-template-columns: 1fr;
    }

    #wrapper .matelas-product-info {
        padding: 20px;
    }
}

@media (max-width: 767px) {
    #wrapper .matelas-catalog-title {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    #wrapper .matelas-catalog-title h1 {
        font-size: 34px;
    }

    #wrapper .matelas-catalog-hero-actions {
        justify-content: center;
    }

    #wrapper .matelas-catalog-hero-actions .tf-btn {
        flex: 1 1 150px;
    }

    #wrapper .matelas-catalog-hero-image {
        min-height: 220px;
        border-radius: 20px;
    }

    #wrapper .matelas-catalog-hero-image img {
        min-height: 220px;
    }

    #wrapper .matelas-catalog-showcase {
        padding: 18px;
        border-radius: 19px;
    }

    #wrapper .matelas-catalog-showcase-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    #wrapper .matelas-catalog-showcase-grid {
        grid-template-columns: 1fr;
    }

    #wrapper .matelas-catalog-showcase-card {
        grid-template-columns: 58px minmax(0, 1fr) 30px;
        min-height: 78px;
    }

    #wrapper .matelas-catalog-showcase-media {
        width: 58px;
        height: 58px;
    }

    #wrapper .matelas-catalog-assurance > div {
        min-height: 70px;
    }

    #wrapper .matelas-catalog-grid .card-product {
        padding: 5px;
        border-radius: 14px;
    }

    #wrapper .matelas-product-single {
        padding-top: 14px;
    }

    #wrapper .matelas-product-gallery,
    #wrapper .matelas-product-info {
        border-radius: 18px;
    }

    #wrapper .matelas-product-gallery {
        padding: 7px;
    }

    #wrapper .matelas-gallery-hint {
        top: 16px;
        left: 16px;
        padding: 7px 9px;
        font-size: 9px;
    }

    #wrapper .matelas-product-info {
        padding: 18px;
    }

    #wrapper .matelas-product-highlights {
        grid-template-columns: 1fr;
    }

    #wrapper .matelas-product-highlights .matelas-highlight {
        min-height: 72px;
    }

    #wrapper .matelas-inquiry-box {
        align-items: stretch;
        flex-direction: column;
    }

    #wrapper .matelas-inquiry-box .tf-btn {
        width: 100%;
    }

    #wrapper .matelas-product-tabs-section {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    #wrapper .matelas-product-tabs-section > .container {
        padding-top: 16px;
        padding-bottom: 20px;
        border-radius: 18px;
    }

    #wrapper .matelas-product-tab-nav {
        padding: 0 14px 12px;
    }

    #wrapper .matelas-product-tab-content {
        padding: 22px 14px 0;
    }

    #wrapper .matelas-tab-copy-grid,
    #wrapper .matelas-material-grid,
    #wrapper .matelas-dimension-grid,
    #wrapper .matelas-delivery-grid {
        grid-template-columns: 1fr;
    }

    #wrapper .matelas-spec-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ========================================================================== 
   STEP 13 - Modern header/footer + public pages production polish
   ========================================================================== */

/* ---------- topbar ---------- */
#wrapper + .matelas-topbar,
.matelas-topbar {
    min-height: 38px;
    background: linear-gradient(90deg, #0B69C7 0%, #1E90FF 52%, #0B69C7 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.16);
}
.matelas-topbar .container-full { padding-top: 0; padding-bottom: 0; }
.matelas-topbar .swiper-topbar { height: 38px; }
.matelas-topbar .swiper-topbar .swiper-slide { display:flex; align-items:center; justify-content:center; min-height:38px; }
.matelas-topbar .swiper-topbar p { margin:0; font-size:12px; font-weight:700; letter-spacing:.015em; }
.matelas-topbar-links,
.matelas-topbar-right { gap:16px !important; align-items:center; }
.matelas-topbar-links a,
.matelas-topbar-right a,
.matelas-topbar-country { font-size:11px; opacity:.92; }
.matelas-topbar-contact { display:inline-flex; align-items:center; gap:6px; font-weight:700; }
.matelas-topbar-country { display:inline-flex; align-items:center; gap:5px; color:#fff; }

/* ---------- modern desktop header ---------- */
#wrapper .matelas-header-modern {
    position: sticky;
    top: 0;
    z-index: 950;
    background: rgba(255,255,255,.96);
    box-shadow: 0 9px 28px rgba(18,54,86,.055);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
#wrapper .matelas-header-main {
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid rgba(30,144,255,.085);
}
#wrapper .matelas-header-modern .header-inner {
    min-height: 86px;
    gap: 22px;
}
#wrapper .matelas-header-left { flex: 1 1 auto; min-width: 0; }
#wrapper .matelas-logo-link {
    min-width: 82px;
    margin-right: 22px;
}
#wrapper .matelas-logo-shell {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    border: 1px solid rgba(30,144,255,.13);
    border-radius: 18px;
    background: linear-gradient(145deg, #FFFFFF, #F1F8FF);
    box-shadow: 0 9px 26px rgba(13,77,129,.075);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#wrapper .matelas-logo-link:hover .matelas-logo-shell {
    transform: translateY(-1px);
    border-color: rgba(30,144,255,.28);
    box-shadow: 0 12px 32px rgba(13,77,129,.11);
}
#wrapper .matelas-site-logo { max-width: 50px; max-height: 50px; }
#wrapper .matelas-header-tools { flex: 1 1 auto; min-width: 0; gap: 10px; align-items:center; }

#wrapper .matelas-category-menu { flex: 0 0 auto; }
#wrapper .matelas-category-trigger {
    min-width: 190px;
    height: 54px;
    padding: 0 15px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #DDE8F1 !important;
    border-radius: 15px !important;
    background: #F8FBFE !important;
    color: #18334B !important;
    box-shadow: none !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
#wrapper .matelas-category-trigger:hover {
    border-color: rgba(30,144,255,.38) !important;
    background: #F1F8FF !important;
    transform: translateY(-1px);
}
#wrapper .matelas-category-trigger-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    border-radius: 10px;
    background: #E8F4FF;
    color: var(--matelas-blue);
}
#wrapper .matelas-category-trigger .name-category { flex:1; }
#wrapper .matelas-category-menu .box-nav-category {
    margin-top: 10px;
    overflow: visible;
    border: 1px solid rgba(30,144,255,.12);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(16,49,78,.15);
}
#wrapper .matelas-category-menu .nav-category_link { border-radius:10px; margin:2px 7px; }
#wrapper .matelas-category-menu .nav-category_link:hover { background:#F0F8FF; color:var(--matelas-blue-dark); }

#wrapper .matelas-header-search {
    width: min(650px, 42vw);
    min-width: 330px;
    height: 54px;
    padding: 0 7px 0 15px !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    overflow: visible !important;
    border: 1px solid #DCE6EE !important;
    border-radius: 15px !important;
    background: #FFFFFF !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 7px 20px rgba(18,54,86,.035);
    transition: border-color .18s ease, box-shadow .18s ease;
}
#wrapper .matelas-header-search:focus-within {
    border-color: rgba(30,144,255,.52) !important;
    box-shadow: 0 0 0 4px rgba(30,144,255,.08), 0 10px 24px rgba(18,54,86,.055);
}
#wrapper .matelas-search-leading { color:#8A9AAA; font-size:18px; }
#wrapper .matelas-header-search input {
    min-width:0;
    flex:1;
    height:100%;
    border:0 !important;
    background:transparent !important;
    color:#1A2E40;
    font-size:13px;
    outline:0;
}
#wrapper .matelas-header-search .btn-action-submit {
    width:auto !important;
    min-width:105px;
    height:40px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:0;
    border-radius:11px;
    background:linear-gradient(135deg, #1E90FF, #0B69C7);
    color:#fff;
    font-size:12px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(30,144,255,.18);
}
#wrapper .matelas-header-search .btn-action-submit:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(30,144,255,.24); }

#wrapper .matelas-header-actions-wrap { flex:0 0 auto; }
#wrapper .matelas-header-actions { gap:7px; align-items:center; }
#wrapper .matelas-header-actions .matelas-header-action {
    position:relative;
    min-width:54px;
    height:54px;
    padding:6px 10px !important;
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid transparent;
    border-radius:14px;
    background:#fff;
    color:#18334B;
    transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
#wrapper .matelas-header-actions .matelas-header-action:hover {
    border-color:rgba(30,144,255,.18);
    background:#F4FAFF;
    color:var(--matelas-blue-dark);
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(18,54,86,.055);
}
#wrapper .matelas-action-icon {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    flex:0 0 38px;
    border-radius:11px;
    background:#F2F7FB;
    color:#193B58;
    font-size:19px;
}
#wrapper .matelas-header-action:hover .matelas-action-icon { background:#E8F4FF; color:var(--matelas-blue); }
#wrapper .matelas-action-copy { min-width:0; flex-direction:column; line-height:1.15; }
#wrapper .matelas-action-copy small { margin-bottom:3px; color:#8A98A6; font-size:8.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
#wrapper .matelas-action-copy strong { max-width:125px; overflow:hidden; color:inherit; font-size:10.5px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
#wrapper .matelas-account-action { min-width:170px !important; }
#wrapper .matelas-wishlist-nav .count,
#wrapper .matelas-cart-action .count {
    top:-5px !important;
    right:-4px !important;
    border-color:#fff !important;
    box-shadow:0 4px 12px rgba(30,144,255,.22);
}
#wrapper .matelas-cart-action .count {
    position:absolute;
    min-width:19px;
    height:19px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:2px solid #fff;
    border-radius:999px;
    background:var(--matelas-blue);
    color:#fff;
    font-size:10px;
    font-weight:800;
}

#wrapper .matelas-header-nav-row {
    min-height: 51px;
    background: rgba(255,255,255,.99);
    border-bottom:1px solid #EDF2F6 !important;
    box-shadow:none !important;
}
#wrapper .matelas-header-nav-row .header-bottom { min-height:50px; }
#wrapper .matelas-header-nav-row .box-nav-menu { gap:2px; }
#wrapper .matelas-header-nav-row .box-nav-menu > .menu-item > .item-link {
    min-height:50px;
    padding:0 13px;
    display:flex;
    align-items:center;
    border-radius:10px;
    color:#34475A;
    font-size:12.5px;
    font-weight:700;
}
#wrapper .matelas-header-nav-row .box-nav-menu > .menu-item:hover > .item-link { background:#F6FAFD; }
#wrapper .matelas-header-nav-actions { display:flex; align-items:center; gap:9px; }
#wrapper .matelas-nav-quote-link,
#wrapper .matelas-nav-offer-link {
    min-height:36px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}
#wrapper .matelas-nav-quote-link { padding:0 13px; color:#496174; }
#wrapper .matelas-nav-quote-link:hover { color:var(--matelas-blue); background:#F3F9FF; }
#wrapper .matelas-nav-offer-link {
    padding:0 14px;
    background:#EAF5FF;
    color:var(--matelas-blue-dark);
    border:1px solid rgba(30,144,255,.12);
}
#wrapper .matelas-nav-offer-link:hover { background:var(--matelas-blue); color:#fff; }

/* ---------- public page hero ---------- */
#wrapper .matelas-public-hero {
    position:relative;
    overflow:hidden;
    min-height:260px;
    display:flex;
    align-items:center;
    background:
        radial-gradient(circle at 12% 22%, rgba(30,144,255,.13), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(30,144,255,.10), transparent 22%),
        linear-gradient(135deg,#F5FAFF 0%,#FFFFFF 48%,#F3F9FF 100%);
    border-bottom:1px solid rgba(30,144,255,.11);
}
#wrapper .matelas-public-hero::before,
#wrapper .matelas-public-hero::after {
    content:"";
    position:absolute;
    border:1px solid rgba(30,144,255,.10);
    border-radius:50%;
    pointer-events:none;
}
#wrapper .matelas-public-hero::before { width:220px; height:220px; top:-130px; right:8%; box-shadow:0 0 0 30px rgba(30,144,255,.025); }
#wrapper .matelas-public-hero::after { width:120px; height:120px; bottom:-70px; left:10%; box-shadow:0 0 0 22px rgba(30,144,255,.022); }
#wrapper .matelas-public-hero .container { position:relative; z-index:2; }
#wrapper .matelas-public-hero .breadcrumb-wrap {
    width:max-content;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    padding:7px 11px;
    border:1px solid #E5EEF6;
    border-radius:999px;
    background:rgba(255,255,255,.78);
    box-shadow:0 6px 18px rgba(26,58,87,.04);
}
#wrapper .matelas-public-hero h1 { color:#112B42; letter-spacing:-.025em; }
#wrapper .matelas-public-hero .text-body-1 { color:#657689 !important; line-height:1.7; }

/* ---------- contact ---------- */
#wrapper .matelas-contact-page { background:linear-gradient(180deg,#FFFFFF,#F8FBFE 58%,#FFFFFF); }
#wrapper .matelas-contact-paths {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;
    margin-bottom:25px;
}
#wrapper .matelas-contact-path {
    min-height:88px;
    padding:15px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 24px;
    gap:11px;
    align-items:center;
    border:1px solid #E5EDF5;
    border-radius:17px;
    background:#fff;
    box-shadow:0 9px 25px rgba(17,50,80,.04);
    transition:.2s ease;
}
#wrapper .matelas-contact-path:hover { transform:translateY(-2px); border-color:rgba(30,144,255,.3); box-shadow:0 14px 34px rgba(30,144,255,.085); }
#wrapper .matelas-contact-path > span { width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#EDF7FF;color:var(--matelas-blue);font-size:18px; }
#wrapper .matelas-contact-path strong { display:block; margin-bottom:3px; color:#193149; font-size:12px; }
#wrapper .matelas-contact-path small { display:block; color:#7A8794; font-size:10px; line-height:1.45; }
#wrapper .matelas-contact-path > i { color:#8DA0B2; transition:transform .18s ease,color .18s ease; }
#wrapper .matelas-contact-path:hover > i { color:var(--matelas-blue); transform:translateX(3px); }
#wrapper .matelas-contact-info { position:sticky; top:180px; }
#wrapper .matelas-contact-info-card {
    padding:19px;
    border-color:#E4EDF5;
    border-radius:18px;
    box-shadow:0 8px 24px rgba(20,49,78,.035);
    transition:.2s ease;
}
#wrapper .matelas-contact-info-card:hover { transform:translateY(-2px); border-color:rgba(30,144,255,.26); box-shadow:0 12px 32px rgba(30,144,255,.07); }
#wrapper .matelas-contact-info-card .iconbox { background:linear-gradient(145deg,#EAF6FF,#F6FBFF); box-shadow:inset 0 0 0 1px rgba(30,144,255,.07); }
#wrapper .matelas-contact-info .matelas-content-card { background:linear-gradient(145deg,#FFFFFF,#F7FBFF); border-color:rgba(30,144,255,.14); }
#wrapper .matelas-contact-form {
    position:relative;
    overflow:hidden;
    border-color:rgba(30,144,255,.12);
    border-radius:24px;
    box-shadow:0 20px 55px rgba(17,50,80,.075);
}
#wrapper .matelas-contact-form::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,#1E90FF,#72B9FF); }
#wrapper .matelas-contact-form .matelas-form-field input,
#wrapper .matelas-contact-form .matelas-form-field textarea { background:#F9FBFD; }
#wrapper .matelas-contact-submit { border-radius:12px; box-shadow:0 10px 24px rgba(30,144,255,.2); }
#wrapper .matelas-form-anchor { position:absolute; top:-160px; }

/* ---------- FAQ ---------- */
#wrapper .matelas-faq-layout { grid-template-columns:300px minmax(0,1fr); gap:30px; }
#wrapper .matelas-faq-nav {
    top:180px;
    padding:11px;
    border-color:rgba(30,144,255,.11);
    border-radius:20px;
    box-shadow:0 13px 36px rgba(17,50,80,.055);
}
#wrapper .matelas-faq-nav > a { position:relative; padding:12px 13px 12px 35px; border-radius:12px; }
#wrapper .matelas-faq-nav > a::before { content:""; position:absolute; left:15px; top:50%; width:7px; height:7px; border:2px solid #A8B7C5; border-radius:50%; transform:translateY(-50%); transition:.18s ease; }
#wrapper .matelas-faq-nav > a:hover::before { border-color:var(--matelas-blue); background:var(--matelas-blue); }
#wrapper .matelas-faq-help-card {
    margin-top:11px;
    padding:18px;
    border-radius:16px;
    background:linear-gradient(145deg,#0B69C7,#1E90FF);
    color:#fff;
}
#wrapper .matelas-faq-help-icon { width:38px;height:38px;display:grid;place-items:center;margin-bottom:12px;border-radius:11px;background:rgba(255,255,255,.15);font-size:18px; }
#wrapper .matelas-faq-help-card strong { display:block; margin-bottom:7px; color:#fff; font-size:13px; }
#wrapper .matelas-faq-help-card p { margin:0 0 12px; color:rgba(255,255,255,.78); font-size:10px; line-height:1.55; }
#wrapper .matelas-faq-help-card a { display:inline-flex;align-items:center;gap:6px;padding:0;color:#fff;font-size:10px;font-weight:800; }
#wrapper .matelas-faq-section {
    margin-bottom:25px;
    padding:22px;
    border:1px solid #E7EEF5;
    border-radius:20px;
    background:#fff;
    box-shadow:0 10px 32px rgba(17,50,80,.04);
}
#wrapper .matelas-faq-section-title .iconbox { box-shadow:inset 0 0 0 1px rgba(30,144,255,.08); }
#wrapper .matelas-faq-item { border-color:#E9EFF5; border-radius:14px; box-shadow:none; }
#wrapper .matelas-faq-item.is-open { border-color:rgba(30,144,255,.22); box-shadow:0 8px 22px rgba(30,144,255,.055); }
#wrapper .matelas-faq-item.is-open .matelas-faq-question { background:#F7FBFF; color:#0B69C7; }

/* ---------- blog listing ---------- */
#wrapper .matelas-blog-page { background:linear-gradient(180deg,#FFFFFF 0%,#F9FBFD 48%,#FFFFFF 100%); }
#wrapper .matelas-blog-chips-modern { justify-content:center; margin-bottom:28px; }
#wrapper .matelas-blog-featured {
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
    gap:0;
    overflow:hidden;
    margin-bottom:42px;
    border:1px solid rgba(30,144,255,.11);
    border-radius:24px;
    background:#fff;
    box-shadow:0 20px 56px rgba(17,50,80,.075);
}
#wrapper .matelas-blog-featured-media { position:relative; min-height:410px; overflow:hidden; background:#EFF5F9; }
#wrapper .matelas-blog-featured-media img { width:100%;height:100%;object-fit:cover;transition:transform .45s ease; }
#wrapper .matelas-blog-featured:hover .matelas-blog-featured-media img { transform:scale(1.025); }
#wrapper .matelas-blog-featured-badge { position:absolute;left:20px;top:20px;padding:7px 11px;border-radius:999px;background:rgba(17,43,66,.88);color:#fff;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;backdrop-filter:blur(6px); }
#wrapper .matelas-blog-featured-copy { padding:clamp(28px,4vw,54px); display:flex; flex-direction:column; justify-content:center; background:radial-gradient(circle at 100% 0,rgba(30,144,255,.06),transparent 34%),#fff; }
#wrapper .matelas-blog-featured-copy h2 { margin-bottom:14px; color:#142C42; font-size:clamp(27px,3vw,42px); line-height:1.12; letter-spacing:-.025em; }
#wrapper .matelas-blog-featured-copy p { margin-bottom:22px; color:#6C7A88; font-size:14px; line-height:1.75; }
#wrapper .matelas-blog-read-link,
#wrapper .matelas-blog-card-link { display:inline-flex;align-items:center;gap:7px;color:var(--matelas-blue-dark);font-size:11px;font-weight:800; }
#wrapper .matelas-blog-read-link i,
#wrapper .matelas-blog-card-link i { transition:transform .18s ease; }
#wrapper .matelas-blog-read-link:hover i,
#wrapper .matelas-blog-card-link:hover i { transform:translateX(3px); }
#wrapper .matelas-blog-list-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 22px; }
#wrapper .matelas-blog-grid { gap:20px; }
#wrapper .matelas-blog-card { border-radius:19px; box-shadow:0 10px 30px rgba(17,50,80,.045); }
#wrapper .matelas-blog-card-body { padding:19px 19px 21px; }
#wrapper .matelas-blog-card-link { margin-top:15px; }

/* ---------- blog article ---------- */
#wrapper .matelas-article-wrap { max-width:980px; }
#wrapper .matelas-article-cover { border:1px solid rgba(30,144,255,.08); box-shadow:0 17px 46px rgba(17,50,80,.07); }
#wrapper .matelas-article-wrap .matelas-content-card { border-radius:24px; box-shadow:0 18px 48px rgba(17,50,80,.055); }
#wrapper .matelas-article-wrap .matelas-rich-content { max-width:760px; margin:0 auto; }
#wrapper .matelas-article-wrap .matelas-rich-content > p:first-of-type { font-size:18px; color:#33495D; line-height:1.8; }
#wrapper .matelas-related-blog .matelas-blog-card { border-radius:17px; }

/* ---------- static/about ---------- */
#wrapper .matelas-static-page { background:linear-gradient(180deg,#FFFFFF,#F9FBFD 54%,#FFFFFF); }
#wrapper .matelas-about-pillars {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px;
    max-width:1100px;
    margin:0 auto 26px;
}
#wrapper .matelas-about-pillar {
    min-height:120px;
    padding:19px;
    display:flex;
    gap:14px;
    border:1px solid #E5EDF5;
    border-radius:18px;
    background:#fff;
    box-shadow:0 9px 25px rgba(17,50,80,.04);
}
#wrapper .matelas-about-pillar > span { width:45px;height:45px;display:grid;place-items:center;flex:0 0 45px;border-radius:13px;background:#EDF7FF;color:var(--matelas-blue);font-size:19px; }
#wrapper .matelas-about-pillar strong { display:block;margin:2px 0 6px;color:#17314A;font-size:12px; }
#wrapper .matelas-about-pillar p { margin:0;color:#74818D;font-size:10px;line-height:1.55; }
#wrapper .matelas-about-page .matelas-content-card { border-top:4px solid var(--matelas-blue); }
#wrapper .matelas-about-cta {
    max-width:980px;
    margin:24px auto 0;
    padding:25px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    border:1px solid rgba(30,144,255,.12);
    border-radius:20px;
    background:radial-gradient(circle at 95% 10%,rgba(30,144,255,.10),transparent 24%),linear-gradient(135deg,#F4FAFF,#FFFFFF);
}
#wrapper .matelas-about-cta-actions { display:flex;gap:9px;flex-wrap:wrap;flex:0 0 auto; }
#wrapper .matelas-about-cta .tf-btn { border-radius:11px; }

/* ---------- footer ---------- */
#wrapper .matelas-footer-modern {
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 10% 12%, rgba(30,144,255,.13), transparent 23%),
        radial-gradient(circle at 93% 82%, rgba(30,144,255,.08), transparent 25%),
        #071827 !important;
}
#wrapper .matelas-footer-modern::before { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.45),transparent 78%); }
#wrapper .matelas-footer-cta-wrap { position:relative;z-index:2;padding-top:42px; }
#wrapper .matelas-footer-cta {
    min-height:155px;
    padding:28px 32px;
    display:grid;
    grid-template-columns:60px minmax(0,1fr) auto;
    gap:22px;
    align-items:center;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    border-radius:24px;
    background:linear-gradient(135deg,#0B69C7,#1E90FF 68%,#4AA7FF);
    box-shadow:0 24px 60px rgba(0,0,0,.18);
}
#wrapper .matelas-footer-cta-icon { width:60px;height:60px;display:grid;place-items:center;border-radius:18px;background:rgba(255,255,255,.14);color:#fff;font-size:25px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
#wrapper .matelas-footer-cta-copy span { display:block;margin-bottom:6px;color:rgba(255,255,255,.72);font-size:9px;font-weight:900;letter-spacing:.15em; }
#wrapper .matelas-footer-cta-copy h3 { margin:0 0 6px;color:#fff;font-size:24px;letter-spacing:-.02em; }
#wrapper .matelas-footer-cta-copy p { margin:0;color:rgba(255,255,255,.78);font-size:12px; }
#wrapper .matelas-footer-cta-actions { display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end; }
#wrapper .matelas-footer-cta-actions .tf-btn { min-height:44px;border-radius:12px; }
#wrapper .matelas-footer-text-link { display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:11px;font-weight:800; }
#wrapper .matelas-footer-benefits { position:relative;z-index:2;padding:34px 0 30px;border-bottom:1px solid rgba(255,255,255,.08); }
#wrapper .matelas-footer-benefit { padding:8px 0; }
#wrapper .matelas-footer-benefit .icon { width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.07); }
#wrapper .matelas-footer-benefit .title { font-size:12px; }
#wrapper .matelas-footer-benefit .text { font-size:9.5px;line-height:1.55; }
#wrapper .matelas-footer-main { position:relative;z-index:2; }
#wrapper .matelas-footer-grid { display:grid !important;grid-template-columns:minmax(260px,1.05fr) minmax(480px,1.65fr) minmax(240px,.8fr);gap:45px;align-items:start; }
#wrapper .matelas-footer-grid > .col-left,
#wrapper .matelas-footer-grid > .col-center,
#wrapper .matelas-footer-grid > .col-right { width:auto !important; max-width:none !important; }
#wrapper .matelas-footer-brand { max-width:350px; }
#wrapper .matelas-footer-logo { width:76px;height:76px;display:grid;place-items:center;margin-bottom:18px;padding:9px;border-radius:20px;background:#fff;box-shadow:0 13px 30px rgba(0,0,0,.15); }
#wrapper .matelas-footer-logo img { max-width:58px;max-height:58px;object-fit:contain; }
#wrapper .matelas-footer-brand-text { max-width:320px;margin:0 0 18px;color:rgba(255,255,255,.58);font-size:11px;line-height:1.7; }
#wrapper .matelas-footer-contact-list { display:grid;gap:9px; }
#wrapper .matelas-footer-contact-list > a,
#wrapper .matelas-footer-contact-list > span { display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.74);font-size:10.5px; }
#wrapper .matelas-footer-contact-list i { color:#64B4FF; }
#wrapper .matelas-footer-link-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px; }
#wrapper .matelas-footer-modern .footer-heading { margin-bottom:14px;font-size:10px;font-weight:900;letter-spacing:.12em;color:#fff; }
#wrapper .matelas-footer-modern .footer-menu-list { display:grid;gap:8px; }
#wrapper .matelas-footer-modern .footer-menu-list .link { position:relative;font-size:10.5px;transition:color .18s ease,transform .18s ease; }
#wrapper .matelas-footer-modern .footer-menu-list .link:hover { color:#fff;transform:translateX(3px); }
#wrapper .matelas-footer-help-card { padding:23px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
#wrapper .matelas-footer-help-icon { width:46px;height:46px;display:grid;place-items:center;margin-bottom:15px;border-radius:14px;background:rgba(30,144,255,.16);color:#63B6FF;font-size:20px; }
#wrapper .matelas-footer-help-label { margin:0 0 7px;color:#63B6FF;font-size:8.5px;font-weight:900;letter-spacing:.14em; }
#wrapper .matelas-footer-help-card h4 { margin:0 0 8px;color:#fff;font-size:17px;line-height:1.25; }
#wrapper .matelas-footer-help-card > p:not(.matelas-footer-help-label) { margin:0 0 17px;color:rgba(255,255,255,.58);font-size:10px;line-height:1.65; }
#wrapper .matelas-footer-help-btn { min-height:40px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;border-radius:11px;background:#fff;color:#0B69C7;font-size:10px;font-weight:900; }
#wrapper .matelas-footer-bottom { position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.08); }
#wrapper .matelas-footer-bottom .inner-bottom { min-height:66px; }
#wrapper .matelas-footer-bottom-links a,
#wrapper .matelas-footer-bottom-links button,
#wrapper .matelas-footer-bottom-links span,
#wrapper .matelas-footer-bottom .text-nocopy { font-size:9.5px; }

/* ---------- responsive ---------- */
@media (max-width: 1399.98px) {
    #wrapper .matelas-header-search { width:min(520px,38vw); min-width:290px; }
    #wrapper .matelas-account-action { min-width:145px !important; }
    #wrapper .matelas-footer-grid { grid-template-columns:minmax(240px,.9fr) minmax(420px,1.5fr) minmax(220px,.75fr);gap:30px; }
}

@media (max-width: 1199.98px) {
    #wrapper .matelas-header-modern .header-inner { min-height:72px; }
    #wrapper .matelas-logo-link { min-width:60px;margin-right:0; }
    #wrapper .matelas-logo-shell { width:52px;height:52px;border-radius:15px;padding:6px; }
    #wrapper .matelas-site-logo { max-width:41px;max-height:41px; }
    #wrapper .matelas-mobile-menu-btn { width:44px;height:44px;display:grid;place-items:center;border:1px solid #E4EBF2;border-radius:12px;background:#fff; }
    #wrapper .matelas-header-actions .matelas-header-action { height:46px;min-width:46px;padding:4px !important; }
    #wrapper .matelas-action-icon { width:38px;height:38px; }
    #wrapper .matelas-footer-grid { grid-template-columns:1fr 1.5fr; }
    #wrapper .matelas-footer-help-col { grid-column:1/-1; }
    #wrapper .matelas-footer-help-card { display:grid;grid-template-columns:46px minmax(0,1fr) auto;column-gap:14px;align-items:center; }
    #wrapper .matelas-footer-help-icon { margin:0;grid-row:1/span 3; }
    #wrapper .matelas-footer-help-label { margin:0; }
    #wrapper .matelas-footer-help-card h4 { margin:2px 0 3px; }
    #wrapper .matelas-footer-help-card > p:not(.matelas-footer-help-label) { margin:0; }
    #wrapper .matelas-footer-help-btn { grid-column:3;grid-row:1/span 3; }
    #wrapper .matelas-contact-info { position:static; }
}

@media (max-width: 991.98px) {
    #wrapper .matelas-contact-paths { grid-template-columns:1fr; }
    #wrapper .matelas-faq-layout { grid-template-columns:1fr; }
    #wrapper .matelas-faq-nav { position:static;display:flex;gap:6px;overflow:auto;padding:8px; }
    #wrapper .matelas-faq-nav > a { flex:0 0 auto;white-space:nowrap;padding:10px 12px; }
    #wrapper .matelas-faq-nav > a::before { display:none; }
    #wrapper .matelas-faq-help-card { display:none; }
    #wrapper .matelas-blog-featured { grid-template-columns:1fr; }
    #wrapper .matelas-blog-featured-media { min-height:320px; }
    #wrapper .matelas-about-pillars { grid-template-columns:1fr; }
    #wrapper .matelas-footer-cta { grid-template-columns:52px minmax(0,1fr); }
    #wrapper .matelas-footer-cta-icon { width:52px;height:52px; }
    #wrapper .matelas-footer-cta-actions { grid-column:1/-1;justify-content:flex-start;padding-left:74px; }
    #wrapper .matelas-footer-grid { grid-template-columns:1fr; }
    #wrapper .matelas-footer-brand { max-width:none; }
    #wrapper .matelas-footer-link-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 767.98px) {
    .matelas-topbar { min-height:34px; }
    .matelas-topbar .swiper-topbar { height:34px; }
    .matelas-topbar .swiper-topbar .swiper-slide { min-height:34px; }
    .matelas-topbar .swiper-topbar p { font-size:10px; }
    #wrapper .matelas-header-modern { box-shadow:0 5px 18px rgba(18,54,86,.06); }
    #wrapper .matelas-header-modern .header-inner { min-height:66px;gap:10px; }
    #wrapper .matelas-logo-shell { width:48px;height:48px;border-radius:14px; }
    #wrapper .matelas-site-logo { max-width:37px;max-height:37px; }
    #wrapper .matelas-header-actions { gap:3px; }
    #wrapper .matelas-header-actions .matelas-header-action { height:42px;min-width:42px;border-radius:11px; }
    #wrapper .matelas-action-icon { width:34px;height:34px;border-radius:10px;font-size:17px; }
    #wrapper .matelas-public-hero { min-height:220px;padding-top:38px !important;padding-bottom:38px !important; }
    #wrapper .matelas-public-hero h1 { font-size:34px; }
    #wrapper .matelas-public-hero .breadcrumb-wrap { margin-bottom:12px !important; }
    #wrapper .matelas-contact-path { grid-template-columns:40px minmax(0,1fr) 20px; }
    #wrapper .matelas-contact-form { border-radius:19px; }
    #wrapper .matelas-faq-section { padding:16px;border-radius:17px; }
    #wrapper .matelas-blog-featured { border-radius:19px;margin-bottom:30px; }
    #wrapper .matelas-blog-featured-media { min-height:240px; }
    #wrapper .matelas-blog-featured-copy { padding:24px; }
    #wrapper .matelas-blog-featured-copy h2 { font-size:28px; }
    #wrapper .matelas-about-cta { align-items:flex-start;flex-direction:column;padding:21px;border-radius:18px; }
    #wrapper .matelas-about-cta-actions { width:100%; }
    #wrapper .matelas-about-cta-actions .tf-btn { flex:1 1 140px; }
    #wrapper .matelas-footer-cta-wrap { padding-top:28px; }
    #wrapper .matelas-footer-cta { grid-template-columns:1fr;padding:23px;border-radius:19px;text-align:left; }
    #wrapper .matelas-footer-cta-icon { width:48px;height:48px; }
    #wrapper .matelas-footer-cta-copy h3 { font-size:21px; }
    #wrapper .matelas-footer-cta-actions { grid-column:auto;padding-left:0;justify-content:flex-start; }
    #wrapper .matelas-footer-benefits { padding:25px 0 22px; }
    #wrapper .matelas-footer-grid { gap:24px; }
    #wrapper .matelas-footer-link-grid { grid-template-columns:1fr;gap:0; }
    #wrapper .matelas-footer-help-card { display:block; }
    #wrapper .matelas-footer-help-icon { margin-bottom:13px; }
    #wrapper .matelas-footer-help-btn { display:inline-flex; }
    #wrapper .matelas-footer-bottom .inner-bottom { gap:12px;padding-top:16px;padding-bottom:86px; }
}


/* STEP 13A / 14 - utility topbar polish */
.matelas-topbar-hours { display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:11px;opacity:.92;white-space:nowrap; }
.matelas-topbar-links .matelas-topbar-contact { text-decoration:none !important; }
.matelas-topbar-links .matelas-topbar-contact:hover, .matelas-topbar-right a:hover { opacity:1;color:#fff !important; }
@media (max-width:1399.98px){ .matelas-topbar-links .matelas-topbar-contact span, .matelas-topbar-hours { font-size:10px; } }

/* STEP 14 - production 404 */
.matelas-not-found-page{padding:72px 0 90px;background:radial-gradient(circle at 50% 0,rgba(30,144,255,.12),transparent 34rem),#f8fbff;min-height:62vh;}
.matelas-not-found-card{max-width:820px;margin:0 auto;text-align:center;padding:54px 48px;border:1px solid rgba(30,144,255,.15);border-radius:28px;background:#fff;box-shadow:0 24px 70px rgba(20,62,103,.09);}
.matelas-not-found-code{font-size:clamp(84px,14vw,150px);font-weight:800;line-height:.85;letter-spacing:-.08em;color:rgba(30,144,255,.13);margin-bottom:20px;}
.matelas-not-found-card h1{font-size:clamp(30px,4vw,46px);margin:8px 0 14px;}
.matelas-not-found-card p{max-width:620px;margin:0 auto 8px;color:#687482;font-size:16px;line-height:1.7;}
.matelas-not-found-card small{display:block;color:#98a2ad;margin-top:8px;}
.matelas-not-found-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px;}
.matelas-not-found-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;max-width:600px;margin:28px auto 0;padding-top:28px;border-top:1px solid #edf1f5;}
.matelas-not-found-search input{min-height:50px;border:1px solid #dce5ed;border-radius:13px;padding:0 16px;background:#fbfdff;outline:none;}
.matelas-not-found-search input:focus{border-color:#1e90ff;box-shadow:0 0 0 4px rgba(30,144,255,.08);}
@media(max-width:575.98px){.matelas-not-found-page{padding:34px 0 60px}.matelas-not-found-card{padding:34px 18px;border-radius:20px}.matelas-not-found-search{grid-template-columns:1fr}.matelas-not-found-search .tf-btn{width:100%}}

/* STEP 14 - public quote QA restoration */
.matelas-public-quote-page{padding:58px 0 80px;background:linear-gradient(180deg,#f4f9ff 0,#fff 360px);min-height:65vh}.matelas-public-quote-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:24px}.matelas-public-quote-head h1{font-size:42px;margin:5px 0}.matelas-public-quote-head p{color:#75808c}.matelas-public-quote-status{padding:9px 14px;border-radius:999px;background:#eaf4ff;color:#0b69c7;font-weight:700}.matelas-public-quote-status.is-accepted{background:#e9f8ef;color:#207545}.matelas-public-quote-status.is-rejected,.matelas-public-quote-status.is-expired{background:#fff0f0;color:#a23d3d}.matelas-public-quote-flash{padding:14px 17px;border-radius:13px;margin-bottom:18px}.matelas-public-quote-flash.is-success{background:#eaf8f0;color:#176c3d;border:1px solid #bce4cd}.matelas-public-quote-flash.is-error{background:#fff1f1;color:#9b3333;border:1px solid #f0c2c2}.matelas-public-quote-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}.matelas-public-quote-main,.matelas-public-quote-side{display:grid;gap:18px}.matelas-public-quote-card{background:#fff;border:1px solid #e2eaf1;border-radius:20px;padding:24px;box-shadow:0 14px 38px rgba(20,62,103,.055)}.matelas-public-quote-customer{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:18px;border-bottom:1px solid #edf1f5}.matelas-public-quote-customer>div{display:flex;flex-direction:column;gap:3px}.matelas-public-quote-customer small{color:#8a95a1;text-transform:uppercase;font-size:10px;letter-spacing:.08em}.matelas-public-quote-items{margin-top:6px}.matelas-public-quote-item{display:grid;grid-template-columns:minmax(0,1fr) 100px 140px;gap:18px;align-items:start;padding:20px 0;border-bottom:1px solid #edf1f5}.matelas-public-quote-item:last-child{border-bottom:0}.matelas-public-quote-item small,.matelas-public-quote-item p{display:block;color:#7b8793;margin-top:4px}.matelas-public-quote-item .spec{padding:8px 10px;border-radius:9px;background:#f7faff}.matelas-public-quote-item .qty{text-align:center;color:#66717d}.matelas-public-quote-item .price{text-align:right;font-weight:800;color:#0b69c7}.matelas-public-quote-terms h3,.matelas-public-quote-actions h3{margin-bottom:15px}.matelas-public-quote-terms>div+div{margin-top:16px}.matelas-public-quote-terms p{color:#6f7b87;margin-top:4px}.matelas-public-quote-summary .rowx{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #edf1f5}.matelas-public-quote-summary .total{display:flex;justify-content:space-between;gap:16px;align-items:end;padding:18px 0 8px}.matelas-public-quote-summary .total strong{font-size:25px;color:#0b69c7}.matelas-public-quote-note{display:flex;gap:8px;align-items:center;margin-top:11px;color:#65717c;font-size:12px}.matelas-public-quote-actions p{color:#75808c;font-size:13px;margin-bottom:17px}.matelas-quote-reject-btn{margin-top:9px;border:0;background:transparent;color:#9b3f3f;padding:10px;font-weight:700}.matelas-public-quote-support{display:flex;flex-direction:column;gap:4px}.matelas-public-quote-support small{color:#7d8994}.matelas-public-quote-support a{color:#0b69c7}.matelas-public-quote-invalid{max-width:720px;margin:20px auto;text-align:center;padding:60px 30px;background:#fff;border:1px solid #e2eaf1;border-radius:24px;box-shadow:0 18px 50px rgba(20,62,103,.06)}.matelas-public-quote-invalid h1{font-size:38px;margin:8px 0 14px}.matelas-public-quote-invalid p{color:#6f7b87;margin-bottom:24px}@media(max-width:991.98px){.matelas-public-quote-grid{grid-template-columns:1fr}.matelas-public-quote-side{grid-template-columns:1fr 1fr}.matelas-public-quote-support{grid-column:1/-1}}@media(max-width:767.98px){.matelas-public-quote-page{padding:32px 0 60px}.matelas-public-quote-head{display:block}.matelas-public-quote-status{display:inline-flex;margin-top:12px}.matelas-public-quote-side{grid-template-columns:1fr}.matelas-public-quote-support{grid-column:auto}.matelas-public-quote-customer{grid-template-columns:1fr}.matelas-public-quote-item{grid-template-columns:1fr auto}.matelas-public-quote-item .qty{grid-column:1;text-align:left}.matelas-public-quote-item .price{grid-column:2;grid-row:1/3;align-self:center}.matelas-public-quote-card{padding:18px;border-radius:17px}}

/* ============================================================
   STEP 15 - Final responsive / touch QA
   ============================================================ */

/* Avoid iOS focus zoom and keep all important form controls finger friendly. */
@media (max-width: 767.98px) {
    #wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    #wrapper select,
    #wrapper textarea,
    .matelas-quote-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .matelas-quote-modal select,
    .matelas-quote-modal textarea {
        font-size: 16px !important;
    }

    #wrapper .tf-btn,
    #wrapper button[type="submit"],
    #wrapper .matelas-contact-submit,
    #wrapper .matelas-checkout-submit,
    .matelas-quote-modal .tf-btn {
        min-height: 46px;
    }

    #wrapper .matelas-public-hero h1,
    #wrapper .matelas-catalog-title h1 {
        font-size: clamp(30px, 9vw, 36px) !important;
        line-height: 1.08;
    }

    #wrapper .matelas-public-hero .text-body-1,
    #wrapper .matelas-catalog-title .text-body-1 {
        font-size: 14px;
        line-height: 1.65;
    }
}

/* Small phones: keep the primary header compact and prevent icon collisions. */
@media (max-width: 575.98px) {
    #wrapper .matelas-header-modern .header-inner {
        gap: 6px;
    }

    #wrapper .matelas-logo-link {
        min-width: 48px;
    }

    #wrapper .matelas-header-actions-wrap {
        margin-left: auto;
    }

    #wrapper .matelas-header-actions .matelas-header-action,
    #wrapper .matelas-mobile-menu-btn {
        min-width: 42px;
        width: 42px;
        height: 42px;
    }

    #wrapper .matelas-action-icon {
        width: 34px;
        height: 34px;
    }

    #wrapper .matelas-header-actions .count {
        transform: scale(.92);
        transform-origin: top right;
    }

    .matelas-topbar .swiper-topbar p {
        padding: 0 8px;
        font-size: 9.5px;
    }
}

/* Quote modal: behave like a native sheet on small screens, not a squeezed desktop modal. */
@media (max-width: 767.98px) {
    .matelas-quote-modal .modal-dialog {
        width: calc(100% - 16px);
        max-width: none;
        margin: 8px auto;
        min-height: calc(100% - 16px);
    }

    .matelas-quote-modal .modal-content {
        max-height: calc(100dvh - 16px);
        border-radius: 20px;
    }

    .matelas-quote-modal .modal-header.matelas-quote-modal-head {
        padding: 18px 16px 16px;
    }

    .matelas-quote-modal .modal-body {
        padding: 16px;
    }

    .matelas-quote-modal .matelas-quote-product-card {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px;
    }

    .matelas-quote-modal .matelas-quote-product-media {
        width: 72px;
        height: 72px;
    }

    .matelas-quote-modal .matelas-quote-price-box {
        grid-column: 1 / -1;
        width: 100%;
    }

    .matelas-quote-modal .matelas-quote-panel {
        padding: 16px;
        border-radius: 16px;
    }

    .matelas-quote-modal .form-check-label,
    .matelas-quote-modal .form-check {
        line-height: 1.5;
    }

    .matelas-quote-modal .form-check-input {
        width: 20px;
        height: 20px;
        min-width: 20px;
        margin-top: 2px;
    }
}

/* Cart becomes a real stacked mobile card instead of a horizontally scrolling table. */
@media (max-width: 639.98px) {
    #wrapper .matelas-cart-table-wrap {
        overflow: visible;
        padding: 8px 12px 14px;
    }

    #wrapper .matelas-cart-table,
    #wrapper .matelas-cart-table tbody,
    #wrapper .matelas-cart-table tr,
    #wrapper .matelas-cart-table td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    #wrapper .matelas-cart-table {
        min-width: 0;
        border-spacing: 0;
    }

    #wrapper .matelas-cart-table thead {
        display: none;
    }

    #wrapper .matelas-cart-table tbody .matelas-cart-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 14px;
        margin-bottom: 14px;
        padding: 16px;
        border: 1px solid #e5edf4;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(12,53,90,.055);
    }

    #wrapper .matelas-cart-table tbody .matelas-cart-row td,
    #wrapper .matelas-cart-table tbody .matelas-cart-row td:first-child,
    #wrapper .matelas-cart-table tbody .matelas-cart-row td:last-child {
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0;
        background: transparent;
    }

    #wrapper .matelas-cart-table .cart_product {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 13px;
        margin-bottom: 15px;
        padding-bottom: 15px !important;
        border-bottom: 1px solid #edf2f6 !important;
    }

    #wrapper .matelas-cart-product-image {
        width: 86px !important;
        height: 86px !important;
        flex-basis: 86px;
        border-radius: 14px;
    }

    #wrapper .matelas-cart-product-info {
        min-width: 0;
    }

    #wrapper .matelas-cart-product-info .prd_name {
        font-size: 14px;
        line-height: 1.35;
    }

    #wrapper .matelas-cart-table td[data-cart-title] {
        display: flex;
        min-height: 58px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 5px;
    }

    #wrapper .matelas-cart-table td[data-cart-title]::before {
        content: attr(data-cart-title);
        color: #8795a3;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    #wrapper .matelas-cart-table td.text-end {
        align-items: flex-end;
        text-align: right !important;
    }

    #wrapper .matelas-cart-quantity {
        min-width: 126px;
    }

    #wrapper .matelas-cart-list-head {
        align-items: flex-start;
        flex-direction: column;
        min-height: auto;
        padding: 17px 16px;
    }
}

/* Checkout: large tap zones for radio choices and legal consent. */
@media (max-width: 767.98px) {
    #wrapper .matelas-customer-type label,
    #wrapper .matelas-option-card {
        cursor: pointer;
    }

    #wrapper .matelas-option-card {
        min-height: 82px;
        padding: 14px;
    }

    #wrapper .matelas-checkout-terms label {
        min-height: 48px;
        align-items: flex-start;
        padding: 8px 2px;
        cursor: pointer;
    }

    #wrapper .matelas-checkout-terms input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        margin-top: 1px;
    }

    #wrapper .matelas-checkout-summary {
        border-radius: 18px;
    }
}

/* Account tables remain usable without breaking page width; make horizontal intent obvious. */
@media (max-width: 767.98px) {
    #wrapper .matelas-account-table-wrap {
        position: relative;
        margin-left: -2px;
        margin-right: -2px;
        -webkit-overflow-scrolling: touch;
    }

    #wrapper .matelas-account-table-wrap::after {
        content: "Prevucite tabelu →";
        position: sticky;
        left: 12px;
        display: inline-block;
        margin: 8px 12px 10px;
        padding: 5px 8px;
        border-radius: 999px;
        background: #eef7ff;
        color: #0b69c7;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .04em;
    }

    #wrapper .matelas-account-form .tf-btn,
    #wrapper .matelas-account-panel > .tf-btn {
        width: 100%;
        justify-content: center;
    }

    #wrapper .matelas-security-meta span {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

/* Public/contact forms: consistent touch and validation behavior. */
@media (max-width: 767.98px) {
    #wrapper .matelas-contact-form .matelas-form-field input,
    #wrapper .matelas-contact-form .matelas-form-field textarea {
        min-height: 50px;
    }

    #wrapper .matelas-contact-form .matelas-form-field textarea {
        min-height: 130px;
    }

    #wrapper .matelas-contact-form .matelas-contact-submit {
        width: 100%;
        justify-content: center;
    }

    #wrapper .matelas-contact-form .d-flex.align-items-center.justify-content-between {
        align-items: stretch !important;
    }
}

/* Prevent long customer/product strings from forcing horizontal overflow. */
#wrapper .matelas-product-title,
#wrapper .matelas-cart-product-info,
#wrapper .matelas-account-panel,
#wrapper .matelas-contact-form,
#wrapper .matelas-blog-featured-copy,
#wrapper .matelas-footer-modern,
.matelas-quote-modal .modal-content {
    overflow-wrap: anywhere;
}

/* ========================================================================== 
   STEP 18 - Servis za kupce
   ========================================================================== */
#wrapper .matelas-service-hero { min-height:280px; display:flex; align-items:center; }
#wrapper .matelas-customer-service { background:linear-gradient(180deg,#fff 0%,#f7fbff 46%,#fff 100%); }
#wrapper .matelas-service-highlights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:26px; }
#wrapper .matelas-service-highlight { display:flex; gap:14px; align-items:flex-start; padding:20px; border:1px solid rgba(30,144,255,.14); border-radius:20px; background:rgba(255,255,255,.94); box-shadow:0 12px 32px rgba(17,50,80,.05); }
#wrapper .matelas-service-highlight-icon { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:14px; color:#1e90ff; background:#edf7ff; }
#wrapper .matelas-service-highlight-icon .mt-icon { width:23px; height:23px; }
#wrapper .matelas-service-highlight strong { display:block; color:#112b42; font-size:15px; margin-bottom:5px; }
#wrapper .matelas-service-highlight p { margin:0; color:#6c7b89; line-height:1.55; font-size:13px; }
#wrapper .matelas-service-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:26px; align-items:start; }
#wrapper .matelas-service-main { display:flex; flex-direction:column; gap:22px; min-width:0; }
#wrapper .matelas-service-card,
#wrapper .matelas-service-side-card { background:#fff; border:1px solid #e4edf5; border-radius:24px; box-shadow:0 16px 44px rgba(17,50,80,.055); }
#wrapper .matelas-service-card { padding:clamp(24px,3vw,40px); }
#wrapper .matelas-service-intro { border-top:4px solid #1e90ff; }
#wrapper .matelas-service-intro h2 { color:#112b42; margin:8px 0 14px; font-size:clamp(25px,2.4vw,34px); letter-spacing:-.02em; }
#wrapper .matelas-service-intro p { color:#526273; line-height:1.82; margin-bottom:16px; }
#wrapper .matelas-service-callout { margin:22px 0; padding:18px 20px; background:linear-gradient(135deg,#eef8ff,#f8fbff); border:1px solid rgba(30,144,255,.18); border-left:4px solid #1e90ff; border-radius:14px; color:#173955; line-height:1.65; }
#wrapper .matelas-service-section-head { display:flex; align-items:center; gap:16px; padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid #edf1f5; }
#wrapper .matelas-service-section-head > span { width:52px; height:52px; display:grid; place-items:center; flex:0 0 52px; border-radius:17px; color:#fff; background:linear-gradient(135deg,#1e90ff,#1673cf); font-weight:700; box-shadow:0 9px 22px rgba(30,144,255,.22); }
#wrapper .matelas-service-section-head small { display:block; color:#1e90ff; font-weight:700; font-size:11px; letter-spacing:.13em; margin-bottom:3px; }
#wrapper .matelas-service-section-head h2 { margin:0; color:#112b42; font-size:clamp(23px,2vw,30px); }
#wrapper .matelas-service-copy { color:#4c5b69; line-height:1.78; }
#wrapper .matelas-service-copy > ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:16px; }
#wrapper .matelas-service-copy > ul > li { position:relative; padding-left:25px; }
#wrapper .matelas-service-copy > ul > li::before { content:""; position:absolute; left:1px; top:.7em; width:9px; height:9px; border-radius:50%; background:#1e90ff; box-shadow:0 0 0 5px rgba(30,144,255,.10); }
#wrapper .matelas-service-copy ul ul { margin-top:9px; padding-left:21px; }
#wrapper .matelas-service-copy ul ul li { margin:7px 0; }
#wrapper .matelas-service-copy strong { color:#1d3346; }
#wrapper .matelas-service-copy a { color:#147ddd; text-decoration:underline; text-underline-offset:3px; }
#wrapper .matelas-service-links { display:flex; flex-direction:column; gap:10px; }
#wrapper .matelas-service-links a { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:15px 17px; border:1px solid #e5edf5; border-radius:14px; color:#1d3346; background:#fbfdff; transition:.2s ease; }
#wrapper .matelas-service-links a:hover { color:#1e90ff; border-color:rgba(30,144,255,.34); background:#f2f9ff; transform:translateX(3px); }
#wrapper .matelas-service-sidebar { position:sticky; top:118px; display:flex; flex-direction:column; gap:18px; }
#wrapper .matelas-service-side-card { padding:22px; overflow:hidden; }
#wrapper .matelas-service-side-card h3 { color:#112b42; font-size:21px; line-height:1.28; margin:7px 0 10px; }
#wrapper .matelas-service-side-card p { color:#6b7986; line-height:1.65; }
#wrapper .matelas-service-notice-preview { display:block; position:relative; border-radius:16px; overflow:hidden; border:1px solid #e6edf3; background:#f7f9fb; margin-top:16px; }
#wrapper .matelas-service-notice-preview img { width:100%; height:238px; object-fit:cover; object-position:top center; display:block; transition:transform .35s ease; }
#wrapper .matelas-service-notice-preview span { position:absolute; left:12px; right:12px; bottom:12px; padding:10px 12px; color:#fff; font-size:13px; font-weight:700; text-align:center; border-radius:11px; background:rgba(17,43,66,.88); backdrop-filter:blur(7px); }
#wrapper .matelas-service-notice-preview:hover img { transform:scale(1.025); }
#wrapper .matelas-service-contact-card { background:linear-gradient(145deg,#f2f9ff,#fff); border-color:rgba(30,144,255,.18); }
#wrapper .matelas-service-contact-row { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(30,144,255,.12); color:#173955; }
#wrapper .matelas-service-contact-row > span { width:39px; height:39px; flex:0 0 39px; border-radius:12px; display:grid; place-items:center; color:#1e90ff; background:#fff; box-shadow:0 5px 14px rgba(17,50,80,.06); }
#wrapper .matelas-service-contact-row .mt-icon { width:20px; height:20px; }
#wrapper .matelas-service-contact-row small { display:block; color:#7b8995; font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
#wrapper .matelas-service-contact-row strong { display:block; color:#173955; font-size:14px; overflow-wrap:anywhere; }
#wrapper .matelas-service-contact-link { display:flex; justify-content:space-between; align-items:center; margin-top:16px; color:#147ddd; font-weight:700; }
@media (max-width:1199.98px) {
    #wrapper .matelas-service-layout { grid-template-columns:minmax(0,1fr) 300px; }
    #wrapper .matelas-service-sidebar { top:90px; }
}
@media (max-width:991.98px) {
    #wrapper .matelas-service-highlights { grid-template-columns:1fr; }
    #wrapper .matelas-service-layout { grid-template-columns:1fr; }
    #wrapper .matelas-service-sidebar { position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    #wrapper .matelas-service-contact-card { grid-column:1/-1; }
}
@media (max-width:575.98px) {
    #wrapper .matelas-service-hero { min-height:230px; }
    #wrapper .matelas-service-card,
    #wrapper .matelas-service-side-card { border-radius:18px; }
    #wrapper .matelas-service-card { padding:22px 18px; }
    #wrapper .matelas-service-highlight { padding:17px; border-radius:16px; }
    #wrapper .matelas-service-section-head { align-items:flex-start; }
    #wrapper .matelas-service-section-head > span { width:44px; height:44px; flex-basis:44px; border-radius:14px; }
    #wrapper .matelas-service-sidebar { grid-template-columns:1fr; }
    #wrapper .matelas-service-contact-card { grid-column:auto; }
    #wrapper .matelas-service-notice-preview img { height:210px; }
}

/* =========================================================
   STEP 19 - Knjiga utisaka
   ========================================================= */
.matelas-guestbook-hero {
    position: relative;
    overflow: hidden;
}
.matelas-guestbook-hero::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -110px;
    top: -140px;
    border-radius: 50%;
    border: 34px solid rgba(30, 144, 255, .06);
    pointer-events: none;
}
.matelas-guestbook-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 920px;
    margin: 30px auto 0;
}
.matelas-guestbook-stat {
    min-height: 92px;
    padding: 17px 20px;
    border: 1px solid rgba(30, 144, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 12px 35px rgba(15, 46, 75, .06);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(8px);
}
.matelas-guestbook-stat > strong {
    font-size: 29px;
    line-height: 1;
    color: #0b3152;
}
.matelas-guestbook-stat > span:not(.matelas-guestbook-stat-stars) {
    color: #66798b;
    font-size: 13px;
}
.matelas-guestbook-stat-stars {
    letter-spacing: 2px;
    color: #ffb21c;
    font-size: 16px;
}
.matelas-guestbook-stat-action {
    flex-direction: row;
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(135deg, #1e90ff 0%, #1376d1 100%);
    border-color: transparent;
    color: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}
.matelas-guestbook-stat-action:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(30, 144, 255, .2);
}
.matelas-guestbook-stat-action-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .16);
    font-size: 26px;
    color: #fff !important;
}
.matelas-guestbook-stat-action span:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.matelas-guestbook-stat-action strong { color: #fff; font-size: 16px; }
.matelas-guestbook-stat-action small { color: rgba(255,255,255,.78); font-size: 12px; }

.matelas-guestbook-page {
    background: linear-gradient(180deg, #fff 0%, #f9fcff 56%, #fff 100%);
}
.matelas-guestbook-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.matelas-guestbook-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 25px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e7eef6;
    box-shadow: 0 15px 42px rgba(20, 48, 76, .07);
    overflow: hidden;
}
.matelas-guestbook-card::before {
    content: "“";
    position: absolute;
    right: 18px;
    top: 8px;
    font: 700 78px/1 Georgia, serif;
    color: rgba(30, 144, 255, .07);
    pointer-events: none;
}
.matelas-guestbook-card.is-featured {
    border-color: rgba(30, 144, 255, .28);
    box-shadow: 0 18px 50px rgba(30, 144, 255, .11);
}
.matelas-guestbook-card.is-featured::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #1e90ff, #74c0ff);
}
.matelas-guestbook-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
}
.matelas-guestbook-stars {
    color: #ffb21c;
    letter-spacing: 2px;
    white-space: nowrap;
}
.matelas-guestbook-stars span { color: #dfe6ec; }
.matelas-guestbook-featured {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 99px;
    background: #eef7ff;
    color: #167bdc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.matelas-guestbook-card blockquote {
    position: relative;
    z-index: 1;
    margin: 0 0 24px;
    color: #33495d;
    font-size: 15px;
    line-height: 1.8;
    flex: 1;
    overflow-wrap: anywhere;
}
.matelas-guestbook-person {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding-top: 17px;
    border-top: 1px solid #edf2f6;
}
.matelas-guestbook-person img,
.matelas-guestbook-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.matelas-guestbook-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e90ff, #5bb4ff);
    color: #fff;
    font-weight: 800;
}
.matelas-guestbook-person > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.matelas-guestbook-person strong { color: #0d2f4c; overflow-wrap: anywhere; }
.matelas-guestbook-person > div span { color: #7b8b99; font-size: 12px; }
.matelas-guestbook-person time { color: #91a0ac; font-size: 11px; white-space: nowrap; }

.matelas-guestbook-pagination {
    margin: 30px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}
.matelas-pagination-pages { display: flex; align-items: center; gap: 7px; }
.matelas-pagination-pages a,
.matelas-pagination-pages span {
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #426078;
    text-decoration: none;
}
.matelas-pagination-pages a { border: 1px solid #e2eaf2; background: #fff; }
.matelas-pagination-pages a:hover,
.matelas-pagination-pages a.active { background: #1e90ff; border-color: #1e90ff; color: #fff; }
.matelas-pagination-arrow { display: inline-flex; align-items: center; gap: 7px; color: #167bdc; font-weight: 700; text-decoration: none; }

.matelas-guestbook-submit-wrap {
    margin-top: 58px;
    padding: 10px;
    border-radius: 26px;
    background: linear-gradient(135deg, #eff8ff 0%, #f8fbff 50%, #eef7ff 100%);
    border: 1px solid #dcecf9;
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 10px;
    scroll-margin-top: 130px;
}
.matelas-guestbook-submit-info,
.matelas-guestbook-form {
    padding: 34px;
    border-radius: 20px;
}
.matelas-guestbook-submit-info {
    background: linear-gradient(145deg, #102f4e 0%, #0d2741 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.matelas-guestbook-submit-info::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -100px;
    bottom: -100px;
    border: 30px solid rgba(255,255,255,.05);
    border-radius: 50%;
}
.matelas-guestbook-submit-info .matelas-public-kicker { color: #71beff; }
.matelas-guestbook-submit-info h2 { color: #fff; margin: 8px 0 12px; }
.matelas-guestbook-submit-info > p { color: rgba(255,255,255,.72); line-height: 1.75; margin-bottom: 26px; }
.matelas-guestbook-submit-points { display: grid; gap: 14px; }
.matelas-guestbook-submit-points > div { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; align-items: start; }
.matelas-guestbook-submit-points > div > span { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items:center; justify-content:center; background: rgba(30,144,255,.18); color:#78c0ff; }
.matelas-guestbook-submit-points p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.matelas-guestbook-submit-points strong { color:#fff; font-size:13px; }
.matelas-guestbook-submit-points small { color:rgba(255,255,255,.6); line-height:1.5; }

.matelas-guestbook-form { background: #fff; box-shadow: 0 12px 36px rgba(15, 43, 69, .05); }
.matelas-field-note { color: #8997a4; font-weight: 400; font-size: 11px; }
.matelas-rating-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-height: 48px; }
.matelas-rating-picker button { border: 0; background: transparent; color: #d9e0e6; font-size: 29px; line-height: 1; padding: 3px 2px; cursor: pointer; transition: transform .16s ease, color .16s ease; }
.matelas-rating-picker button:hover { transform: translateY(-2px) scale(1.08); }
.matelas-rating-picker button.active { color: #ffb21c; }
.matelas-rating-picker span { margin-left: 8px; color: #536a7e; font-size: 12px; font-weight: 700; }
.matelas-guestbook-character-row { min-height: 19px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.matelas-guestbook-character-row small { color: #94a0ab; font-size: 11px; }
.matelas-checkbox-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; color: #6d7e8d; line-height: 1.55; }
.matelas-checkbox-row input { width: 20px !important; height: 20px !important; min-height: 20px !important; flex: 0 0 20px; margin-top: 1px; accent-color: #1e90ff; }
.matelas-guestbook-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; padding-top: 20px; border-top: 1px solid #edf2f6; }
.matelas-guestbook-form-footer p { margin: 0; color: #8895a1; font-size: 12px; max-width: 430px; }
.matelas-guestbook-submit-btn { min-width: 190px; }
.matelas-guestbook-empty { margin-bottom: 10px; }
.matelas-testimonial-actions { display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px; }

@media (max-width: 991.98px) {
    .matelas-guestbook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .matelas-guestbook-submit-wrap { grid-template-columns: 1fr; }
    .matelas-guestbook-submit-info, .matelas-guestbook-form { padding: 28px; }
}
@media (max-width: 767.98px) {
    .matelas-guestbook-stats { grid-template-columns: 1fr 1fr; }
    .matelas-guestbook-stat-action { grid-column: 1 / -1; }
    .matelas-guestbook-grid { grid-template-columns: 1fr; }
    .matelas-guestbook-card { padding: 22px; }
    .matelas-guestbook-submit-wrap { margin-top: 38px; padding: 6px; border-radius: 20px; }
    .matelas-guestbook-submit-info, .matelas-guestbook-form { padding: 22px 18px; border-radius: 16px; }
    .matelas-guestbook-form-footer { align-items: stretch; flex-direction: column; }
    .matelas-guestbook-submit-btn { width: 100%; }
    .matelas-guestbook-pagination { gap: 10px; flex-wrap: wrap; }
    .matelas-pagination-arrow { font-size: 12px; }
}
@media (max-width: 420px) {
    .matelas-guestbook-stats { grid-template-columns: 1fr; }
    .matelas-guestbook-stat-action { grid-column: auto; }
    .matelas-guestbook-person { grid-template-columns: 40px minmax(0,1fr); }
    .matelas-guestbook-person img, .matelas-guestbook-avatar { width:40px; height:40px; }
    .matelas-guestbook-person time { grid-column: 2; }
    .matelas-rating-picker span { flex: 0 0 100%; margin: 5px 0 0; }
}


/* ==========================================================================
   STEP 20 - Materials catalog + stronger header/footer typography
   ========================================================================== */

/* Header/footer readability */
.matelas-topbar .swiper-topbar p { font-size: 13px; }
.matelas-topbar-links a,
.matelas-topbar-right a,
.matelas-topbar-country,
.matelas-topbar-hours { font-size: 12px; }
#wrapper .matelas-header-search input { font-size: 14px; }
#wrapper .matelas-header-search .btn-action-submit { font-size: 13px; }
#wrapper .matelas-action-copy small { font-size: 9.5px; }
#wrapper .matelas-action-copy strong { font-size: 11.5px; }
#wrapper .matelas-header-nav-row .box-nav-menu > .menu-item > .item-link { font-size: 13.5px; }
#wrapper .matelas-header-nav-row .sub-menu_link { font-size: 13px; }
#wrapper .matelas-nav-quote-link,
#wrapper .matelas-nav-offer-link { font-size: 12px; }

#wrapper .matelas-footer-cta-copy span { font-size: 10px; }
#wrapper .matelas-footer-cta-copy p { font-size: 13px; line-height: 1.6; }
#wrapper .matelas-footer-text-link { font-size: 12px; }
#wrapper .matelas-footer-benefit .title { font-size: 13px; }
#wrapper .matelas-footer-benefit .text { font-size: 11px; line-height: 1.6; }
#wrapper .matelas-footer-brand-text { font-size: 13px; line-height: 1.75; }
#wrapper .matelas-footer-contact-list > a,
#wrapper .matelas-footer-contact-list > span { font-size: 12.5px; }
#wrapper .matelas-footer-modern .footer-heading { font-size: 11.5px; }
#wrapper .matelas-footer-modern .footer-menu-list { gap: 10px; }
#wrapper .matelas-footer-modern .footer-menu-list .link { font-size: 12.5px; }
#wrapper .matelas-footer-help-label { font-size: 9.5px; }
#wrapper .matelas-footer-help-card > p:not(.matelas-footer-help-label) { font-size: 12px; }
#wrapper .matelas-footer-help-btn { font-size: 11.5px; }
#wrapper .matelas-footer-bottom-links a,
#wrapper .matelas-footer-bottom-links button,
#wrapper .matelas-footer-bottom-links span,
#wrapper .matelas-footer-bottom .text-nocopy { font-size: 11px; }

.matelas-mobile-section-label {
    margin-top: 10px;
    padding: 10px 16px 4px;
    color: #1e90ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.canvas-mb .mb-menu-link { font-size: 15px; }

/* Materials shared */
#wrapper .matelas-material-hero {
    min-height: 310px;
}
#wrapper .matelas-material-hero::after {
    box-shadow: 0 0 0 34px rgba(30,144,255,.025), 0 0 0 72px rgba(30,144,255,.018);
}
#wrapper .matelas-material-hero h1 {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#wrapper .matelas-material-hero-stats {
    max-width: 920px;
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}
#wrapper .matelas-material-hero-stats > div,
#wrapper .matelas-material-hero-stats > a {
    min-height: 80px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid rgba(30,144,255,.12);
    border-radius: 17px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 12px 30px rgba(21,59,92,.05);
    backdrop-filter: blur(7px);
}
#wrapper .matelas-material-hero-stats > div {
    flex-direction: column;
    gap: 3px;
}
#wrapper .matelas-material-hero-stats strong {
    color: #16344f;
    font-size: 24px;
    line-height: 1;
}
#wrapper .matelas-material-hero-stats > div span {
    color: #738496;
    font-size: 11px;
}
#wrapper .matelas-material-hero-stats > a {
    justify-content: flex-start;
    color: inherit;
    text-align: left;
}
#wrapper .matelas-material-hero-stats > a > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 13px;
    background: #eaf5ff;
    color: #1e90ff;
    font-size: 19px;
}
#wrapper .matelas-material-hero-stats > a span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#wrapper .matelas-material-hero-stats > a strong {
    font-size: 13px;
}
#wrapper .matelas-material-hero-stats > a small {
    color: #7d8d9c;
    font-size: 10.5px;
}
#wrapper .matelas-material-page {
    background:
        radial-gradient(circle at 0 20%, rgba(30,144,255,.055), transparent 18%),
        linear-gradient(180deg,#fff 0%,#f9fcff 52%,#fff 100%);
}
#wrapper .matelas-material-section-head {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
#wrapper .matelas-material-section-head > div:first-child { max-width: 750px; }
#wrapper .matelas-material-section-head h2 { margin: 5px 0 8px; color: #15344f; font-size: 30px; letter-spacing: -.025em; }
#wrapper .matelas-material-section-head p { margin: 0; color: #728394; font-size: 14px; line-height: 1.7; }
#wrapper .matelas-material-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #edf7ff;
    color: #167bdc;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

/* Colours */
#wrapper .matelas-colour-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
}
#wrapper .matelas-colour-card {
    overflow: hidden;
    min-width: 0;
    border: 1px solid #e4edf5;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(18,54,86,.055);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#wrapper .matelas-colour-card:hover {
    transform: translateY(-4px);
    border-color: rgba(30,144,255,.26);
    box-shadow: 0 20px 44px rgba(18,54,86,.09);
}
#wrapper .matelas-material-image {
    aspect-ratio: 4/3;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f4f7f9;
}
#wrapper .matelas-material-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
#wrapper .matelas-colour-card:hover .matelas-material-image img { transform: scale(1.035); }
#wrapper .matelas-material-image.is-missing > span,
#wrapper .matelas-swatch-image.is-missing > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: #9aa8b5;
}
#wrapper .matelas-material-image.is-missing i,
#wrapper .matelas-swatch-image.is-missing i { font-size: 31px; color: #b5c3cf; }
#wrapper .matelas-colour-card-copy { padding: 18px 18px 20px; }
#wrapper .matelas-colour-card-copy h3 { margin: 9px 0 7px; color: #17354f; font-size: 16px; }
#wrapper .matelas-colour-card-copy p { margin: 0; color: #7d8b98; font-size: 11.5px; line-height: 1.6; }

#wrapper .matelas-ral-panel {
    margin-top: 58px;
    padding: 30px;
    border: 1px solid rgba(30,144,255,.13);
    border-radius: 26px;
    background: linear-gradient(145deg,#f7fbff,#fff);
    box-shadow: 0 18px 50px rgba(19,56,88,.055);
}
#wrapper .matelas-ral-search {
    width: min(310px,100%);
    height: 45px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #dfe9f1;
    border-radius: 13px;
    background: #fff;
}
#wrapper .matelas-ral-search i { color: #8798a8; }
#wrapper .matelas-ral-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #203a51;
    font-size: 13px;
}
#wrapper .matelas-ral-grid {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 11px;
}
#wrapper .matelas-ral-card {
    min-width: 0;
    padding: 8px;
    display: grid;
    grid-template-columns: 46px minmax(0,1fr);
    align-items: center;
    gap: 9px;
    border: 1px solid #e6edf3;
    border-radius: 13px;
    background: #fff;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#wrapper .matelas-ral-card:hover {
    transform: translateY(-2px);
    border-color: rgba(30,144,255,.28);
    box-shadow: 0 9px 22px rgba(18,54,86,.07);
}
#wrapper .matelas-ral-swatch {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    border: 1px solid rgba(9,27,42,.13);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
#wrapper .matelas-ral-card strong {
    display: block;
    overflow: hidden;
    color: #273f54;
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#wrapper .matelas-ral-card small { display: block; margin-top: 2px; color: #93a0ab; font-size: 9px; }
#wrapper .matelas-ral-empty { margin: 20px 0 0; color: #728394; text-align: center; }

/* Fabrics */
#wrapper .matelas-fabric-collection-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px;
}
#wrapper .matelas-fabric-collection-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e4edf5;
    border-radius: 21px;
    background: #fff;
    color: inherit;
    box-shadow: 0 13px 36px rgba(18,54,86,.055);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#wrapper .matelas-fabric-collection-card:hover {
    color: inherit;
    transform: translateY(-4px);
    border-color: rgba(30,144,255,.27);
    box-shadow: 0 21px 46px rgba(18,54,86,.10);
}
#wrapper .matelas-fabric-cover {
    position: relative;
    aspect-ratio: 4/3;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f1f5f8;
}
#wrapper .matelas-fabric-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
#wrapper .matelas-fabric-collection-card:hover .matelas-fabric-cover img { transform: scale(1.04); }
#wrapper .matelas-fabric-cover.is-missing > span {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #eaf5ff;
    color: #1e90ff;
    font-size: 24px;
}
#wrapper .matelas-fabric-count {
    position: absolute;
    right: 11px;
    bottom: 11px;
    min-height: 27px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(8,31,50,.78);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    backdrop-filter: blur(7px);
}
#wrapper .matelas-fabric-copy { padding: 19px; }
#wrapper .matelas-fabric-copy h3 { margin: 9px 0 7px; color: #17354f; font-size: 17px; }
#wrapper .matelas-fabric-copy p { margin: 0 0 13px; color: #7a8996; font-size: 11.5px; }
#wrapper .matelas-fabric-link { display: inline-flex; align-items: center; gap: 6px; color: #1479d8; font-size: 11px; font-weight: 800; }
#wrapper .matelas-fabric-link i { transition: transform .18s ease; }
#wrapper .matelas-fabric-collection-card:hover .matelas-fabric-link i { transform: translateX(3px); }

#wrapper .matelas-swatch-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 15px;
}
#wrapper .matelas-swatch-card {
    overflow: hidden;
    min-width: 0;
    border: 1px solid #e5edf4;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(18,54,86,.045);
}
#wrapper .matelas-swatch-image {
    aspect-ratio: 1/1;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #f2f5f7;
}
#wrapper .matelas-swatch-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .28s ease;
}
#wrapper .matelas-swatch-card:hover .matelas-swatch-image img { transform: scale(1.035); }
#wrapper .matelas-swatch-card-copy { padding: 13px 14px 15px; text-align: center; }
#wrapper .matelas-swatch-card-copy h3 { margin: 0 0 4px; color: #213b52; font-size: 13px; }
#wrapper .matelas-swatch-card-copy span { color: #8a98a5; font-size: 9.5px; }

/* Shared info & CTA */
#wrapper .matelas-material-info-grid {
    margin-top: 46px;
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 15px;
}
#wrapper .matelas-material-info-card {
    min-height: 190px;
    padding: 23px;
    border: 1px solid #e3edf5;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 11px 30px rgba(18,54,86,.045);
}
#wrapper .matelas-material-info-card > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: 14px;
    background: #eaf5ff;
    color: #1e90ff;
}
#wrapper .matelas-material-info-card .mt-icon { width: 22px; height: 22px; }
#wrapper .matelas-material-info-card h3 { margin: 0 0 8px; color: #183750; font-size: 15px; }
#wrapper .matelas-material-info-card p { margin: 0; color: #768695; font-size: 12px; line-height: 1.7; }
#wrapper .matelas-material-note {
    margin-top: 24px;
    padding: 27px 28px;
    display: grid;
    grid-template-columns: 54px minmax(0,1fr) auto;
    gap: 18px;
    align-items: center;
    border: 1px solid rgba(30,144,255,.15);
    border-radius: 21px;
    background:
        radial-gradient(circle at 94% 10%,rgba(30,144,255,.09),transparent 22%),
        linear-gradient(135deg,#f4faff,#fff);
}
#wrapper .matelas-material-note-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: #1e90ff;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 12px 25px rgba(30,144,255,.18);
}
#wrapper .matelas-material-note h2 { margin: 5px 0 7px; color: #16344f; font-size: 20px; }
#wrapper .matelas-material-note p { margin: 0; max-width: 830px; color: #718291; font-size: 12px; line-height: 1.7; }

@media (max-width: 1199.98px) {
    #wrapper .matelas-colour-grid,
    #wrapper .matelas-fabric-collection-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    #wrapper .matelas-ral-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    #wrapper .matelas-swatch-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 991.98px) {
    #wrapper .matelas-material-hero-stats { grid-template-columns: 1fr 1fr; }
    #wrapper .matelas-material-hero-stats > a { grid-column: 1 / -1; }
    #wrapper .matelas-colour-grid,
    #wrapper .matelas-fabric-collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #wrapper .matelas-ral-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    #wrapper .matelas-swatch-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    #wrapper .matelas-material-info-grid { grid-template-columns: 1fr; }
    #wrapper .matelas-material-info-card { min-height: auto; }
    #wrapper .matelas-material-note { grid-template-columns: 48px minmax(0,1fr); }
    #wrapper .matelas-material-note .tf-btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 767.98px) {
    .matelas-topbar .swiper-topbar p { font-size: 11px; }
    #wrapper .matelas-material-hero { min-height: 270px; }
    #wrapper .matelas-material-section-head { align-items: stretch; flex-direction: column; gap: 14px; }
    #wrapper .matelas-material-section-head h2 { font-size: 25px; }
    #wrapper .matelas-material-section-head .tf-btn { align-self: flex-start; }
    #wrapper .matelas-colour-grid,
    #wrapper .matelas-fabric-collection-grid { gap: 12px; }
    #wrapper .matelas-ral-panel { margin-top: 38px; padding: 20px 15px; border-radius: 20px; }
    #wrapper .matelas-ral-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    #wrapper .matelas-swatch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
    #wrapper .matelas-material-note { padding: 21px; grid-template-columns: 1fr; }
    #wrapper .matelas-material-note-icon { width: 48px; height: 48px; }
    #wrapper .matelas-material-note .tf-btn { grid-column: auto; width: 100%; }
}
@media (max-width: 575.98px) {
    #wrapper .matelas-material-hero-stats { grid-template-columns: 1fr; }
    #wrapper .matelas-material-hero-stats > a { grid-column: auto; }
    #wrapper .matelas-colour-grid,
    #wrapper .matelas-fabric-collection-grid { grid-template-columns: 1fr; }
    #wrapper .matelas-colour-card { display: grid; grid-template-columns: 125px minmax(0,1fr); }
    #wrapper .matelas-colour-card .matelas-material-image { aspect-ratio: auto; min-height: 145px; }
    #wrapper .matelas-ral-card { grid-template-columns: 40px minmax(0,1fr); }
    #wrapper .matelas-ral-swatch { width: 40px; height: 40px; }
    #wrapper .matelas-swatch-card-copy h3 { font-size: 12px; }
    #wrapper .matelas-footer-modern .footer-menu-list .link { font-size: 13px; }
}