/* Restrained layout corrections for the original warm pricing design. */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior-x: none;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
    overscroll-behavior-x: none;
    touch-action: pan-y pinch-zoom;
}

/* Give the page introduction its own calm space above the footage. */
.prsttx {
    width: min(92%, 1080px);
    margin: 24px auto 18px !important;
    padding: 0 18px;
    box-sizing: border-box;
    color: #202a32;
    font-size: clamp(20px, 2vw, 27px) !important;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

/* Keep the loaded hero footage visible even when motion is reduced. */
.hero-video {
    opacity: 1 !important;
    animation: none !important;
}

/* Keep the first visible frame above the short black lead-in in the MP4.
   The high-specificity sizing prevents shared img rules from restoring the
   1280 x 720 intrinsic height on tall, intermediate-width screens. */
.hero-video-wrapper > .hero-video-poster {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    box-sizing: border-box;
    opacity: 1;
    pointer-events: none;
    transition: opacity 160ms linear, visibility 0s linear 160ms;
}

.hero-video-wrapper > .hero-video-poster.is-hidden {
    visibility: hidden;
    opacity: 0;
}

/* The shared stylesheet scales this whole row on hover. Keep card actions stable. */
.card1 .kn,
.card1 .kn:hover,
.card1 .kn:focus-within {
    transform: none !important;
    scale: 1 !important;
}

/* Long metallic navigation keys with readable labels. */
.metal-buttons-wrapper {
    width: 90% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding-top: 16px;
    box-sizing: border-box;
}

.metal-buttons-container {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px !important;
    padding: 0 0 8px !important;
    border: 0;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none;
}

.metal-nav-title {
    display: flex;
    margin: 0 0 11px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: #5a5144;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.025em;
    text-align: center;
}

.metal-nav-title::before,
.metal-nav-title::after {
    width: 38px;
    height: 1px;
    content: "";
    background: rgba(90, 81, 68, 0.28);
}

.metal-btn-link {
    display: block;
    min-width: 0;
    text-decoration: none;
}

.metal-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px;
    height: 52px;
    justify-content: center !important;
    padding: 8px 20px !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 1px !important;
    box-shadow:
        0 4px 0 #5a5a5a,
        0 7px 10px rgba(37, 33, 27, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        inset 0 -2px 0 rgba(0, 0, 0, 0.28) !important;
}

.metal-btn::before,
.metal-btn:hover::before {
    top: 50% !important;
    right: 16px !important;
    bottom: auto !important;
    left: auto !important;
    width: 2px !important;
    height: 72% !important;
    border-radius: 3px !important;
    transform: translateY(-50%) !important;
    background: radial-gradient(ellipse at center, rgba(75, 79, 80, 0.2), rgba(255, 255, 255, 0.07) 55%, transparent 78%) !important;
    box-shadow:
        inset 0 3px 7px rgba(0, 0, 0, 0.28),
        inset 0 -1px 2px rgba(255, 255, 255, 0.14) !important;
    opacity: 0.82 !important;
}

.metal-btn:hover {
    transform: none !important;
}

.metal-btn .btn-icon {
    width: 26px;
    height: 26px;
    margin: 0 !important;
    transform: none !important;
    z-index: 4;
}

.metal-btn .btn-text {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0;
    color: #fffdf7;
    font-size: 12.5px !important;
    line-height: 1;
    letter-spacing: 0.03em !important;
    text-align: left;
    white-space: nowrap;
    padding-right: 14px;
    text-shadow: 0 1px 2px rgba(24, 28, 30, 0.75);
    z-index: 4;
}

/* Calm editorial spacing between the navigation and the catalogue. */
.txtcen {
    max-width: 1180px;
    margin: 34px auto 28px;
    padding: 0 26px;
}

.txtcen .txtcentr {
    margin: 0 auto 14px;
    padding: 10px 18px 12px;
    font-size: clamp(20px, 1.8vw, 27px);
    line-height: 1.25;
    letter-spacing: 0.015em;
}

.txtcen .spomog-text {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 14px;
    font-size: 15px;
    line-height: 1.55;
}

/* Quiet contextual links: visible enough for navigation without changing the tone. */
.context-link {
    color: inherit !important;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(47, 62, 68, 0.3);
    text-underline-offset: 3px;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.context-link:hover,
.context-link:focus-visible {
    color: #264f61 !important;
    text-decoration-color: rgba(38, 79, 97, 0.72);
}

.faq-answer-v2 .context-link {
    text-decoration-color: rgba(231, 224, 211, 0.32);
}

.faq-answer-v2 .context-link:hover,
.faq-answer-v2 .context-link:focus-visible {
    color: #f1e5d0 !important;
    text-decoration-color: rgba(241, 229, 208, 0.72);
}

/* One card plane and consistent row rhythm. */
.vitrina > .row > .col-lg-10 > .row {
    align-items: stretch;
}

.vitrina > .row > .col-lg-10 {
    padding: 14px 14px 0 !important;
    background: rgba(229, 221, 203, 0.24);
    border: 1px solid rgba(106, 91, 64, 0.18);
    border-radius: 5px;
    box-shadow:
        0 2px 6px rgba(49, 42, 32, 0.13),
        0 11px 24px rgba(49, 42, 32, 0.11) !important;
}

.vitrina > .row > .col-lg-10 > .row {
    margin-right: -7px !important;
    margin-left: -7px !important;
}

.vitrina .col-lg-3 {
    display: flex;
    margin-bottom: 14px;
    padding-right: 7px;
    padding-left: 7px;
}

.vitrina .col-lg-3 > .card1 {
    width: 100%;
    height: 100%;
}

.card1 {
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(107, 92, 66, 0.25);
    border-radius: 10px;
    box-shadow:
        0 2px 5px rgba(39, 34, 27, 0.17),
        0 8px 16px rgba(39, 34, 27, 0.12);
    transform: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

.card1:hover,
.card1:focus-within {
    border-color: rgba(107, 92, 66, 0.3) !important;
    box-shadow:
        0 2px 5px rgba(39, 34, 27, 0.18),
        0 9px 18px rgba(39, 34, 27, 0.14) !important;
    transform: none !important;
}

.card1:hover .card-img-top,
.card1:hover .variant-image-unique,
.card1:focus-within .card-img-top,
.card1:focus-within .variant-image-unique {
    transform: none !important;
}

.card-variant-unique {
    min-height: 0 !important;
}

.card-variant-nav-unique {
    display: grid !important;
    flex: 0 0 auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch !important;
    min-height: 64px;
    padding: 7px !important;
    gap: 5px !important;
    background: linear-gradient(180deg, #303b40 0%, #202b31 100%) !important;
    border-bottom: 1px solid rgba(15, 20, 23, 0.65);
    border-radius: 9px 9px 0 0;
}

.variant-btn-unique,
.variant-btn-unique:hover,
.variant-btn-unique.active {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px;
    height: 52px;
    margin: 0 !important;
    padding: 5px 4px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transform: none !important;
    color: #d3d8da !important;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.045) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

.variant-btn-unique:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.variant-btn-unique.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.variant-icon-unique {
    width: 24px !important;
    height: 38px !important;
    flex: 0 0 auto;
    object-fit: contain;
    transform: none !important;
}

.variant-label-unique {
    display: inline-flex !important;
    min-width: 0;
    height: 18px;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
    color: inherit !important;
    font-size: 10.5px !important;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.variant-dot-unique {
    flex: 0 0 auto;
    background: #89979e !important;
}

.variant-btn-unique.active .variant-dot-unique {
    background: #e8edef !important;
}

.card-variant-main-unique {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.variant-image-link-unique {
    display: flex !important;
    height: 330px;
    flex: 0 0 330px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 7px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #f6f1e7 0%, #eee5d5 100%);
    border-bottom: 1px solid rgba(107, 92, 66, 0.14);
    box-shadow: inset 0 0 0 1px rgba(111, 91, 60, 0.06);
}

.variant-image-unique,
.variant-image-unique:hover {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
    background: transparent !important;
    object-fit: contain !important;
    transform: none !important;
}

.card1:not(.card-variant-unique) > a {
    display: flex;
    height: 330px;
    flex: 0 0 330px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 7px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #f6f1e7 0%, #eee5d5 100%);
    border-bottom: 1px solid rgba(107, 92, 66, 0.14);
    box-shadow: inset 0 0 0 1px rgba(111, 91, 60, 0.06);
}

.card1:not(.card-variant-unique) > .card-img-top,
.card1:not(.card-variant-unique) > a > .card-img-top {
    display: block;
    width: 100% !important;
    height: 330px !important;
    box-sizing: border-box;
    background: transparent !important;
    object-fit: contain !important;
}

.card1:not(.card-variant-unique) > a > .card-img-top {
    height: 100% !important;
}

.catalog-image-link-legacy-fix,
.card1:not(.card-variant-unique) .card-title > a {
    color: inherit;
    text-decoration: none;
}

.catalog-image-link-legacy-fix:focus-visible,
.card1:not(.card-variant-unique) .card-title > a:focus-visible {
    outline: 3px solid #1b82b2;
    outline-offset: -3px;
}

.card1:not(.card-variant-unique) .card-title > a:hover {
    color: #123e60;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.card1:not(.card-variant-unique) > .card-img-top {
    padding: 7px;
    background: linear-gradient(180deg, #f6f1e7 0%, #eee5d5 100%) !important;
    border-bottom: 1px solid rgba(107, 92, 66, 0.14);
    box-shadow: inset 0 0 0 1px rgba(111, 91, 60, 0.06);
}

.card1 > .card-body,
.card-variant-main-unique > .card-body {
    display: flex;
    min-height: 138px;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 12px 10px 0 !important;
}

.card1 .card-title {
    line-height: 1.22;
    margin: 0 0 7px;
    font-size: 15px;
    font-weight: 700;
}

.card1 .card-text {
    line-height: 1.35;
    margin: 0 0 10px;
    font-size: 14px;
}

.variant-price-unique {
    font-size: 18px;
    font-weight: 700;
}

.catalog-data-markers {
    display: inline-flex;
    margin-left: 8px;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}

.catalog-data-dot {
    display: block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border: 1px solid rgba(7, 20, 56, .18);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(7, 20, 56, .16);
}

.catalog-data-dot--no-price {
    background: #e1b33d;
}

.catalog-data-dot--compatibility {
    background: #397ca8;
}

.catalog-data-dot--identity {
    background: #8061a9;
}

.variant-desc-unique {
    color: #655e52;
    font-size: 13px;
}

.card1 .knop {
    margin-top: auto;
    margin-right: -10px;
    margin-left: -10px;
    padding: 8px 10px 10px !important;
    box-sizing: border-box;
}

.variant-actions-unique {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    min-height: 40px;
    gap: 8px;
}

.variant-goto-btn-unique,
.variant-cart-btn-unique {
    min-width: 0;
    display: flex !important;
    height: 40px;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1 !important;
    white-space: nowrap;
    transform: none !important;
    scale: 1 !important;
    transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
}

.variant-goto-btn-unique:hover,
.variant-goto-btn-unique:focus,
.variant-goto-btn-unique:active,
.variant-cart-btn-unique:hover,
.variant-cart-btn-unique:focus,
.variant-cart-btn-unique:active {
    max-width: 100% !important;
    transform: none !important;
    scale: 1 !important;
}

.variant-goto-btn-unique {
    color: #f6f1e6 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
}

.variant-goto-btn-unique:hover,
.variant-goto-btn-unique:focus {
    background: rgba(255, 255, 255, 0.07) !important;
}

.variant-cart-btn-unique,
.variant-cart-btn-unique:hover,
.variant-cart-btn-unique:focus {
    color: #ffffff !important;
    background: #2e6a46 !important;
    border: 1px solid #3b7955 !important;
    border-radius: 6px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 2px 0 rgba(16, 46, 30, 0.75) !important;
}

.variant-cart-btn-unique:hover {
    background: #275d3d !important;
}

.variant-cart-btn-unique .toto-cart-icon-unique,
.variant-cart-btn-unique .variant-cart-label-unique {
    display: inline-flex;
    align-items: center;
    height: auto;
    line-height: 1 !important;
    vertical-align: middle;
}

.variant-cart-btn-unique .toto-cart-icon-unique {
    width: 18px;
    flex: 0 0 18px;
    justify-content: center;
    margin: 0 !important;
    font-size: 15px !important;
}

/* The lower catalogue uses the same two-action treatment as the remote cards. */
.catalog-card-normalized > .card-body {
    min-height: 174px;
}

.catalog-price-legacy-fix {
    margin: 0 0 9px !important;
    color: #16120e;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2 !important;
}

.catalog-actions-legacy-fix {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    width: 100%;
    min-height: 40px;
    align-items: center;
    gap: 8px;
}

.catalog-goto-legacy-fix,
.catalog-cart-legacy-fix {
    display: flex !important;
    width: 100%;
    height: 40px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1 !important;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    transform: none !important;
    scale: 1 !important;
    transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
}

.catalog-goto-legacy-fix:hover,
.catalog-goto-legacy-fix:focus,
.catalog-goto-legacy-fix:active,
.catalog-cart-legacy-fix:hover,
.catalog-cart-legacy-fix:focus,
.catalog-cart-legacy-fix:active {
    max-width: 100% !important;
    transform: none !important;
    scale: 1 !important;
}

.catalog-goto-legacy-fix {
    color: #f6f1e6 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
}

.catalog-goto-legacy-fix:hover,
.catalog-goto-legacy-fix:focus {
    background: rgba(255, 255, 255, 0.07) !important;
}

.catalog-cart-legacy-fix,
.catalog-cart-legacy-fix:hover,
.catalog-cart-legacy-fix:focus {
    color: #ffffff !important;
    background: #2e6a46 !important;
    border: 1px solid #3b7955 !important;
    border-radius: 6px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 2px 0 rgba(16, 46, 30, 0.75) !important;
}

.catalog-cart-icon-legacy-fix,
.catalog-cart-label-legacy-fix {
    display: inline-flex;
    height: auto;
    align-items: center;
    line-height: 1 !important;
}

.catalog-cart-icon-legacy-fix {
    width: 18px;
    flex: 0 0 18px;
    justify-content: center;
    margin: 0 !important;
    font-size: 15px !important;
}

.card1:not(.card-variant-unique) .knop .kn {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
}

/* Lower navigation repeats the metallic controls used above the catalog. */
.vitrina + .container-fluid.nav-tov {
    margin: 30px auto 38px;
    padding-right: 24px;
    padding-left: 24px;
}

.container-fluid.nav-tov.catalog-footer-nav {
    margin: 34px auto 8px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.metal-buttons-wrapper--bottom {
    padding-top: 0;
}

.vitrina + .container-fluid.nav-tov .card10 {
    margin: 0;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 4px 9px rgba(39, 34, 27, 0.32);
}

.vitrina + .container-fluid.nav-tov .card-body {
    padding: 0;
}

.vitrina + .container-fluid.nav-tov .knopvit {
    margin: 0;
    padding: 12px 10px;
}

.card1:not(.card-variant-unique) .knop .kn > a,
.card1:not(.card-variant-unique) .knop .kn > button {
    display: inline-flex !important;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #f7f1e6 !important;
    font-size: 12px !important;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

/* FAQ keeps its original palette and now follows the complete catalog. */
.faq-section-v2 {
    width: min(90%, 1300px);
    margin: 52px auto;
    overflow: hidden;
}

.faq-question-v2 {
    min-height: 66px;
}

/* Contact panel copied from the services page and fitted to the warm catalog palette. */
.pricing-contact-panel {
    width: min(90%, 760px);
    margin: 20px auto 36px;
    padding: 20px 24px 18px;
    border-top: 1px solid rgba(91, 79, 61, 0.22);
    text-align: center;
}

.pricing-contact-panel .knopki,
.pricing-contact-panel .knop-card,
.pricing-contact-socials {
    display: flex;
    justify-content: center;
}

.pricing-contact-panel .knop-card {
    width: auto;
    margin: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.pricing-contact-panel .knop-card a {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: opacity 0.18s ease;
}

.pricing-contact-panel .knop-card a:hover {
    opacity: 0.8;
}

.pricing-contact-panel .iconki img {
    width: 34px;
    height: 34px;
    max-width: none !important;
    object-fit: contain;
}

.pricing-contact-actions {
    justify-content: center;
    margin-top: 12px;
    gap: 8px;
}

.pricing-contact-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    min-height: 36px;
    padding: 8px 14px;
    border: 0;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(26, 31, 36, 0.14);
}

.pricing-contact-actions .call-btn {
    text-align: center;
    gap: 9px;
}

.pricing-contact-actions .call-btn svg {
    position: static;
    display: block;
    margin: 0;
    transform: none;
}

.pricing-contact-actions .call-btn span {
    display: block;
    line-height: 1;
}

.pricing-contact-actions .call-btn,
.pricing-contact-actions .call-btn:hover,
.pricing-contact-actions .call-btn:focus {
    color: #ffffff !important;
    background: #4285f4 !important;
}

.pricing-contact-actions .whatsapp-btn,
.pricing-contact-actions .whatsapp-btn:hover,
.pricing-contact-actions .whatsapp-btn:focus {
    color: #ffffff !important;
    background: #25d366 !important;
}

.pricing-contact-actions .max-btn,
.pricing-contact-actions .max-btn:hover,
.pricing-contact-actions .max-btn:focus {
    color: #ffffff !important;
    background: linear-gradient(135deg, #471aff 0%, #6e1aff 48%, #00bfff 100%) !important;
    border: 0 !important;
    outline: 0;
    background-clip: padding-box;
    box-shadow: 0 3px 8px rgba(13, 0, 26, 0.15);
}

.pricing-contact-actions .max-btn:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.42), 0 3px 8px rgba(13, 0, 26, 0.15);
}

.pricing-contact-actions .max-btn img {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 6px;
}

/* At compact desktop widths four cards remain in one row, so actions need tighter rhythm. */
@media (min-width: 768px) and (max-width: 1150px) {
    .variant-actions-unique,
    .catalog-actions-legacy-fix {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
        gap: 4px !important;
    }

    .variant-goto-btn-unique,
    .variant-cart-btn-unique,
    .catalog-goto-legacy-fix,
    .catalog-cart-legacy-fix {
        padding-right: 4px !important;
        padding-left: 4px !important;
        gap: 4px !important;
        font-size: 12.5px !important;
    }

    .variant-cart-btn-unique .toto-cart-icon-unique,
    .catalog-cart-icon-legacy-fix {
        width: 14px;
        flex-basis: 14px;
        font-size: 13px !important;
    }
}

@media (max-width: 767px) {
    .prsttx {
        width: calc(100% - 16px);
        margin: 16px auto 13px !important;
        padding: 0;
        font-size: 15px !important;
        line-height: 1.34;
    }

    .metal-buttons-wrapper {
        width: 90% !important;
        margin-top: 0 !important;
        padding-top: 11px;
    }

    .metal-buttons-container {
        gap: 3px !important;
        padding: 0 0 6px !important;
    }

    .metal-nav-title {
        margin: 0 0 8px;
        gap: 7px;
        font-size: 10.5px;
    }

    .metal-nav-title::before,
    .metal-nav-title::after {
        width: 22px;
    }

    .metal-btn {
        min-height: 42px;
        height: 42px;
        padding: 5px 4px !important;
        gap: 3px !important;
    }

    .metal-btn .btn-icon {
        width: 20px;
        height: 20px;
    }

    .metal-btn .btn-text {
        font-size: 9.5px !important;
        letter-spacing: 0 !important;
    }

    .metal-btn::before,
    .metal-btn:hover::before {
        top: 50% !important;
        right: 8px !important;
        bottom: auto !important;
        left: auto !important;
        width: 2px !important;
        height: 64% !important;
        transform: translateY(-50%) !important;
    }

    .txtcen {
        margin: 28px auto 22px;
        padding: 0 14px;
    }

    .txtcen .txtcentr {
        margin-bottom: 11px;
        padding: 8px 10px 10px;
        font-size: 18px;
        line-height: 1.3;
    }

    .txtcen .spomog-text {
        padding: 0 4px;
        font-size: 13px;
        line-height: 1.5;
    }

    .vitrina .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .vitrina .col-lg-3 {
        margin-bottom: 8px;
        padding-right: 4px;
        padding-left: 4px;
    }

    .vitrina > .row > .col-lg-10 {
        padding: 8px 8px 0 !important;
    }

    .vitrina > .row > .col-lg-10 > .row {
        margin-right: -4px !important;
        margin-left: -4px !important;
    }

    .card-variant-nav-unique {
        min-height: 56px;
        padding: 5px !important;
        gap: 4px !important;
    }

    .variant-btn-unique,
    .variant-btn-unique:hover,
    .variant-btn-unique.active {
        min-height: 48px;
        height: 48px;
        padding: 3px 1px !important;
        flex-direction: column !important;
        gap: 1px !important;
    }

    .variant-icon-unique {
        width: 17px !important;
        height: 24px !important;
    }

    .variant-label-unique {
        font-size: 8px !important;
    }

    .variant-image-link-unique {
        height: 205px;
        flex-basis: 205px;
    }

    .card1:not(.card-variant-unique) > a {
        height: 205px;
        flex-basis: 205px;
    }

    .card1:not(.card-variant-unique) > .card-img-top,
    .card1:not(.card-variant-unique) > a > .card-img-top {
        height: 205px !important;
    }

    .card1 > .card-body,
    .card-variant-main-unique > .card-body {
        min-height: 118px;
    }

    .card-variant-main-unique > .card-body {
        min-height: 165px;
    }

    .variant-actions-unique,
    .card1:not(.card-variant-unique) .knop .kn {
        min-height: 36px;
        gap: 6px !important;
    }

    .variant-goto-btn-unique,
    .variant-cart-btn-unique,
    .card1:not(.card-variant-unique) .knop .kn > a,
    .card1:not(.card-variant-unique) .knop .kn > button {
        font-size: 11px !important;
    }

    .variant-goto-btn-unique,
    .variant-cart-btn-unique {
        height: 36px;
        padding: 0 3px !important;
        line-height: 1 !important;
        gap: 5px !important;
        white-space: nowrap;
    }

    .variant-cart-btn-unique .toto-cart-icon-unique,
    .variant-cart-btn-unique .variant-cart-label-unique {
        line-height: 1 !important;
    }

    .catalog-card-normalized > .card-body {
        min-height: 156px;
    }

    .catalog-price-legacy-fix {
        font-size: 15px;
    }

    .catalog-actions-legacy-fix {
        min-height: 36px;
        gap: 6px;
    }

    .catalog-goto-legacy-fix,
    .catalog-cart-legacy-fix {
        height: 36px;
        padding: 0 3px !important;
        gap: 5px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }

    .catalog-cart-icon-legacy-fix {
        width: 14px;
        flex-basis: 14px;
        font-size: 12px !important;
    }

    .card1 .knop {
        overflow: hidden;
        padding: 7px 9px 8px !important;
    }

    .vitrina + .container-fluid.nav-tov {
        margin-top: 22px;
        margin-bottom: 28px;
        padding-right: 8px;
        padding-left: 8px;
    }

    .container-fluid.nav-tov.catalog-footer-nav {
        margin-top: 26px !important;
        margin-bottom: 4px !important;
    }

    .faq-section-v2 {
        width: calc(100% - 24px);
        margin: 38px 12px;
    }

    .faq-question-v2 {
        min-height: 58px;
    }

    .pricing-contact-panel {
        width: calc(100% - 32px);
        margin: 12px 16px 28px;
        padding: 18px 10px 14px;
    }

    .pricing-contact-panel .knop-card {
        gap: 8px;
    }

    .pricing-contact-panel .knop-card a {
        width: 34px;
        height: 34px;
    }

    .pricing-contact-panel .iconki img {
        width: 30px;
        height: 30px;
    }
}

/* Product descriptions are links on rebuilt cards. Keep their typography
   stable on hover instead of inheriting the old theme's purple link colour. */
.vitrina .card1:not(.card-variant-unique) .card-text > a,
.vitrina .card1:not(.card-variant-unique) .card-text > a:hover,
.vitrina .card1:not(.card-variant-unique) .card-text > a:focus {
    color: #3f3b35 !important;
    text-decoration: none !important;
}

@media (max-width: 520px) {
    .metal-buttons-wrapper {
        width: calc(100% - 28px) !important;
        padding-top: 12px;
    }

    .metal-buttons-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px 7px !important;
        padding-bottom: 7px !important;
    }

    .metal-btn {
        min-height: 46px;
        height: 46px;
        padding: 6px 12px 6px 9px !important;
        gap: 7px !important;
    }

    .metal-btn .btn-icon {
        width: 24px;
        height: 24px;
    }

    .metal-btn .btn-text {
        font-size: 11px !important;
        letter-spacing: 0.01em !important;
    }

    .metal-btn::before,
    .metal-btn:hover::before {
        right: 10px !important;
        left: auto !important;
        width: 2px !important;
        transform: translateY(-50%) !important;
    }

    .variant-actions-unique,
    .catalog-actions-legacy-fix {
        grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    }
}

@media (max-width: 360px) {
    .metal-btn .btn-text {
        font-size: 10px !important;
    }

    .metal-btn .btn-icon {
        width: 22px;
        height: 22px;
    }
}

/* Use the same balanced mobile header on the listing and product pages. */
@media (max-width: 991.98px) {
    body > header .navbar > .container-fluid {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) 52px;
        align-items: center;
        gap: 8px;
        padding: 8px 10px !important;
    }

    body > header .navbar-brand {
        grid-column: 1;
        margin: 0 !important;
        justify-self: start;
    }

    body > header .navbar-brand img {
        display: block;
        width: 52px !important;
        margin: 0 !important;
        transform: none !important;
    }

    body > header .ffffhon {
        grid-column: 2;
        min-width: 0;
        width: 100%;
        height: auto !important;
        margin: 0 !important;
        justify-self: stretch;
    }

    body > header .phone-link {
        width: max-content;
        max-width: 100%;
        margin: 0 auto;
        justify-content: center;
        flex-wrap: nowrap;
        white-space: nowrap;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: clamp(13.5px, 3.8vw, 15px) !important;
        font-weight: 500;
        line-height: 1.2;
    }

    body > header .phone-icon {
        width: 20px;
        height: 20px;
        margin-right: 7px;
        flex: 0 0 20px;
    }

    body > header .navbar-toggler {
        grid-column: 3;
        width: 42px;
        min-width: 42px;
        justify-self: end;
    }

    body > header .navbar-collapse {
        top: 68px !important;
        width: min(86vw, 360px) !important;
        max-width: 100vw;
        height: calc(100dvh - 68px) !important;
        max-height: calc(100dvh - 68px);
    }
}

@media (max-width: 360px) {
    body > header .navbar > .container-fluid {
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        gap: 6px;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    body > header .navbar-brand img {
        width: 48px !important;
    }

    body > header .phone-link {
        font-size: 13px !important;
    }

    body > header .phone-icon {
        width: 18px;
        height: 18px;
        margin-right: 6px;
        flex-basis: 18px;
    }
}

/* Keep the complete navigation and cart visible while the catalog scrolls. */
body > header,
body > header.header-hidden {
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
    transform: none !important;
}

/* The shared menu script writes overflow:hidden on body. On this page that
   changes the sticky containing block and sends the opened menu back to the
   top of the document. Keep the page scroll container stable instead. */
@media (max-width: 991.98px) {
    body[style*="overflow: hidden"] {
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    body > header .navbar-collapse {
        max-height: calc(100dvh - 70px);
        overscroll-behavior: contain;
    }
}

/* Responsive desktop header.  At intermediate widths it becomes a deliberate
   two-row composition instead of squeezing the phone number and menu labels. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    body > header .navbar > .container-fluid {
        flex-wrap: nowrap !important;
        gap: 12px;
        padding-right: 20px;
        padding-left: 20px;
    }

    body > header .navbar-brand {
        flex: 0 0 auto;
        margin-right: 2px !important;
    }

    body > header .navbar-brand img {
        width: 78px !important;
        margin-left: 0 !important;
        transform: none !important;
    }

    body > header .ffffhon {
        flex: 0 0 auto;
        height: auto !important;
        min-width: max-content;
    }

    body > header .phone-link {
        width: max-content;
        min-width: max-content;
        flex-wrap: nowrap;
        white-space: nowrap;
        font-size: 14px !important;
    }

    body > header .phone-icon {
        width: 18px;
        height: 18px;
        margin-right: 6px;
    }

    body > header .navbar.navbar-expand-lg .navbar-collapse {
        display: grid !important;
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) auto;
        min-width: 0;
        flex: 1 1 auto !important;
        align-items: center;
        gap: 14px;
    }

    body > header .navbar .form {
        width: auto !important;
        width: 100% !important;
        min-width: 0;
        max-width: none;
        flex: none;
        margin: 0 !important;
        padding: 0 !important;
    }

    body > header .navbar .search {
        width: 100% !important;
    }

    body > header .navbar-nav {
        flex: 0 1 auto;
        flex-wrap: nowrap;
        justify-self: center;
        margin-right: 0 !important;
    }

    body > header .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 8px !important;
        padding-left: 8px !important;
        white-space: nowrap;
        font-size: 14px !important;
    }

    body > header .navbar-nav .nav-item {
        flex: 0 0 auto;
    }

    body > header .toto-cart-toggle-btn-unique {
        flex: 0 0 auto;
        justify-self: end;
        padding: 10px 16px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body > header .navbar > .container-fluid {
        display: grid !important;
        grid-template-columns: auto auto minmax(220px, 1fr) auto;
        grid-template-rows: 46px 38px;
        column-gap: 14px;
        row-gap: 4px;
        padding: 9px 18px 10px;
        align-items: center;
    }

    body > header .navbar-brand {
        grid-column: 1;
        grid-row: 1 / 3;
        margin: 0 !important;
        align-self: center;
    }

    body > header .navbar-brand img {
        width: 82px !important;
        margin: 0 !important;
        transform: none !important;
    }

    body > header .ffffhon {
        grid-column: 2;
        grid-row: 1;
        height: auto !important;
        min-width: max-content;
    }

    body > header .phone-link {
        width: max-content;
        min-width: max-content;
        flex-wrap: nowrap;
        white-space: nowrap;
        font-size: 14px !important;
    }

    body > header .phone-icon {
        width: 19px;
        height: 19px;
        margin-right: 7px;
    }

    body > header .navbar.navbar-expand-lg .navbar-collapse {
        display: contents !important;
    }

    body > header .navbar .form {
        grid-column: 3;
        grid-row: 1;
        width: 100% !important;
        min-width: 0;
        max-width: 360px;
        margin: 0 !important;
        padding: 0 !important;
        justify-self: start;
    }

    body > header .navbar .search {
        width: 100% !important;
        min-height: 42px;
    }

    body > header .navbar-nav {
        grid-column: 2 / 5;
        grid-row: 2;
        display: flex;
        flex-wrap: nowrap;
        gap: 3px;
        margin: 0 !important;
        justify-self: end;
        align-self: center;
    }

    body > header .navbar-expand-lg .navbar-nav .nav-link {
        padding: 7px 10px !important;
        white-space: nowrap;
        font-size: 14px !important;
        line-height: 1.2;
    }

    body > header .navbar-nav .nav-item {
        flex: 0 0 auto;
    }

    body > header .toto-cart-toggle-btn-unique {
        grid-column: 4;
        grid-row: 1;
        padding: 9px 15px;
        justify-self: end;
    }
}

/* Final catalogue alignment: use one very light cream photograph surface.
   Generated white backgrounds are blended into the same surface without
   redrawing or recompressing the product artwork. */
.variant-image-link-unique,
.catalog-image-link-legacy-fix,
.card1:not(.card-variant-unique) > .card-img-top {
    background: #faf7ef !important;
    isolation: isolate;
}

.variant-image-unique,
.catalog-image-link-legacy-fix > .card-img-top,
.card1:not(.card-variant-unique) > .card-img-top {
    background: #faf7ef !important;
    object-position: 50% 50% !important;
}

.variant-goto-btn-unique,
.variant-cart-btn-unique,
.catalog-goto-legacy-fix,
.catalog-cart-legacy-fix {
    transform: none !important;
    scale: 1 !important;
}

.variant-goto-btn-unique:hover,
.variant-goto-btn-unique:focus,
.variant-goto-btn-unique:active,
.variant-cart-btn-unique:hover,
.variant-cart-btn-unique:focus,
.variant-cart-btn-unique:active,
.catalog-goto-legacy-fix:hover,
.catalog-goto-legacy-fix:focus,
.catalog-goto-legacy-fix:active,
.catalog-cart-legacy-fix:hover,
.catalog-cart-legacy-fix:focus,
.catalog-cart-legacy-fix:active {
    transform: none !important;
    scale: 1 !important;
}

@media (max-width: 767px) {
    .card1:not(.card-variant-unique) > .catalog-image-link-legacy-fix > .card-img-top {
        height: 100% !important;
    }

    .variant-goto-btn-unique,
    .variant-cart-btn-unique,
    .catalog-goto-legacy-fix,
    .catalog-cart-legacy-fix {
        min-height: 38px;
        height: 38px;
        font-size: 12px !important;
    }

    .card1 .knop {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
}

/* Final control rhythm: every catalogue card uses two genuinely equal
   actions, and every variant selector shares the same optical centre. */
.variant-actions-unique,
.catalog-actions-legacy-fix {
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr) !important;
    gap: 8px !important;
}

.variant-goto-btn-unique,
.variant-cart-btn-unique,
.catalog-goto-legacy-fix,
.catalog-cart-legacy-fix {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px;
    padding: 0 9px !important;
    font-size: 13px !important;
}

.variant-cart-btn-unique,
.catalog-cart-legacy-fix {
    padding-right: 11px !important;
    padding-left: 11px !important;
}

.variant-dot-unique {
    width: 8px !important;
    height: 8px !important;
    margin: 0 !important;
    border-radius: 50%;
}

@media (min-width: 768px) {
    .card-variant-nav-unique {
        min-height: 68px;
        padding: 7px !important;
        gap: 6px !important;
    }

    .variant-btn-unique,
    .variant-btn-unique:hover,
    .variant-btn-unique.active {
        min-height: 54px;
        height: 54px;
        padding: 5px 6px !important;
        gap: 6px !important;
    }

    .variant-icon-unique {
        width: 20px !important;
        height: 34px !important;
    }

    .variant-label-unique {
        height: auto;
        font-size: 11.5px !important;
        line-height: 1.1;
    }
}

@media (max-width: 767px) {
    .variant-actions-unique,
    .catalog-actions-legacy-fix {
        grid-template-columns: minmax(62px, .82fr) minmax(0, 1.18fr) !important;
        gap: 8px !important;
    }

    .variant-goto-btn-unique,
    .variant-cart-btn-unique,
    .catalog-goto-legacy-fix,
    .catalog-cart-legacy-fix {
        height: 44px;
        min-height: 44px;
        padding: 0 5px !important;
        gap: 8px !important;
        font-size: 12px !important;
    }

    .variant-cart-btn-unique .toto-cart-icon-unique,
    .catalog-cart-icon-legacy-fix {
        width: 16px;
        flex-basis: 16px;
        font-size: 14px !important;
    }

    .variant-cart-btn-unique,
    .catalog-cart-legacy-fix {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .card1 .card-title {
        font-size: 15px;
        line-height: 1.28;
    }

    .card1 .card-text,
    .card1 .card-text > a {
        font-size: 13px !important;
        line-height: 1.42;
    }

    .variant-label-unique {
        font-size: 9.5px !important;
        line-height: 1.05;
    }
}

/* Final button system: the selector artwork sits above its label, which keeps
   every option visually centred instead of weighting the left edge. */
.vitrina .variant-btn-unique,
.vitrina .variant-btn-unique:hover,
.vitrina .variant-btn-unique.active {
    flex-direction: column !important;
    gap: 3px !important;
}

.vitrina .variant-icon-unique {
    width: 22px !important;
    height: 26px !important;
}

.vitrina .variant-label-unique {
    height: 13px;
    font-size: 11px !important;
}

.vitrina .variant-goto-btn-unique,
.vitrina .variant-cart-btn-unique,
.vitrina .catalog-goto-legacy-fix,
.vitrina .catalog-cart-legacy-fix {
    font-size: 13px !important;
}

.vitrina .variant-cart-btn-unique .toto-cart-icon-unique,
.vitrina .catalog-cart-icon-legacy-fix {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    overflow: hidden;
    background: center / 16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.1 10.1a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 1.9-1.4L21 7H7.7'/%3E%3Ccircle cx='10' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3C/svg%3E") !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

@media (max-width: 767px) {
    .vitrina .variant-icon-unique {
        width: 18px !important;
        height: 21px !important;
    }

    .vitrina .variant-label-unique {
        height: 11px;
        font-size: 9px !important;
    }

    .vitrina .variant-goto-btn-unique,
    .vitrina .variant-cart-btn-unique,
    .vitrina .catalog-goto-legacy-fix,
    .vitrina .catalog-cart-legacy-fix {
        font-size: 12px !important;
    }

    .vitrina .variant-cart-btn-unique,
    .vitrina .catalog-cart-legacy-fix {
        gap: 10px !important;
    }
}

/* Match the lower-card action labels to the first four cards.  The original
   theme has a more specific 12px rule for these links, so this selector must
   intentionally be at least as specific. */
.vitrina .card1:not(.card-variant-unique) .knop .kn > a.catalog-goto-legacy-fix,
.vitrina .card1:not(.card-variant-unique) .knop .kn > button.catalog-cart-legacy-fix {
    font-size: 13px !important;
}

@media (max-width: 767px) {
    .vitrina .card1:not(.card-variant-unique) .knop .kn > a.catalog-goto-legacy-fix,
    .vitrina .card1:not(.card-variant-unique) .knop .kn > button.catalog-cart-legacy-fix {
        font-size: 12px !important;
    }
}

/* Mobile action bar: preserve readable labels and give the cart action enough
   breathing room without increasing the card width or reducing type. */
@media (max-width: 767px) {
    .vitrina .card1 .knop {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .vitrina .variant-actions-unique,
    .vitrina .catalog-actions-legacy-fix {
        grid-template-columns: minmax(58px, .8fr) minmax(0, 1.2fr) !important;
        gap: 7px !important;
    }

    .vitrina .variant-cart-btn-unique,
    .vitrina .catalog-cart-legacy-fix {
        padding-right: 5px !important;
        padding-left: 5px !important;
        gap: 7px !important;
    }

    .vitrina .variant-cart-btn-unique .toto-cart-icon-unique,
    .vitrina .catalog-cart-icon-legacy-fix {
        width: 15px !important;
        height: 15px !important;
        flex-basis: 15px !important;
        background-size: 15px 15px !important;
    }

    .vitrina .card1 .card-title,
    .vitrina .card1 .card-title > a {
        font-size: 15px !important;
        line-height: 1.28 !important;
    }

    .vitrina .card1 .card-text,
    .vitrina .card1 .card-text > a {
        font-size: 12.5px !important;
        line-height: 1.42 !important;
    }
}

@media (max-width: 360px) {
    .vitrina .card1 .knop {
        padding-right: 2px !important;
        padding-left: 2px !important;
    }

    .vitrina .card1 .knop .kn.variant-actions-unique,
    .vitrina .card1 .knop .kn.catalog-actions-legacy-fix {
        grid-template-columns: 48px minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    .vitrina .card1 .knop .kn > .variant-goto-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-goto-legacy-fix {
        padding-right: 2px !important;
        padding-left: 2px !important;
        font-size: 10.5px !important;
    }

    .vitrina .card1 .knop .kn > .variant-cart-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix {
        padding-right: 4px !important;
        padding-left: 4px !important;
        gap: 4px !important;
        font-size: 10.5px !important;
    }

    .vitrina .card1 .knop .kn > .variant-cart-btn-unique .toto-cart-icon-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix .catalog-cart-icon-legacy-fix {
        width: 14px !important;
        height: 14px !important;
        flex-basis: 14px !important;
        background-size: 14px 14px !important;
    }

    .vitrina .card1:not(.card-variant-unique) .knop .kn > a.catalog-goto-legacy-fix,
    .vitrina .card1.card-variant-unique .knop .kn > a.variant-goto-btn-unique {
        padding-right: 2px !important;
        padding-left: 2px !important;
        font-size: 10.5px !important;
    }

    .vitrina .card1:not(.card-variant-unique) .knop .kn > button.catalog-cart-legacy-fix,
    .vitrina .card1.card-variant-unique .knop .kn > button.variant-cart-btn-unique {
        padding-right: 4px !important;
        padding-left: 4px !important;
        gap: 4px !important;
        font-size: 10.5px !important;
    }

    .vitrina .card1:not(.card-variant-unique) .knop .kn > button.catalog-cart-legacy-fix .catalog-cart-icon-legacy-fix,
    .vitrina .card1.card-variant-unique .knop .kn > button.variant-cart-btn-unique .toto-cart-icon-unique {
        width: 13px !important;
        height: 13px !important;
        flex-basis: 13px !important;
        background-size: 13px 13px !important;
    }
}

/* Keep the floating assistance control useful without covering a whole card
   on phones.  Its hit target stays comfortably above 44px. */
@media (max-width: 767px) {
    body #chat-icon {
        right: 12px !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        width: 56px !important;
        height: 56px !important;
        animation: none !important;
    }

    body #chat-icon img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }
}

/* Mobile actions keep the hierarchy of the original site: compact secondary
   link, restrained cart button, and balanced whitespace around both labels. */
@media (min-width: 381px) and (max-width: 767px) {
    .vitrina .card1 .knop {
        padding-right: 4px !important;
        padding-left: 4px !important;
    }

    .vitrina .card1 .knop .kn.variant-actions-unique,
    .vitrina .card1 .knop .kn.catalog-actions-legacy-fix {
        grid-template-columns: 60px minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    .vitrina .card1 .knop .kn > .variant-goto-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-goto-legacy-fix,
    .vitrina .card1 .knop .kn > .variant-cart-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
    }

    .vitrina .card1 .knop .kn > .variant-goto-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-goto-legacy-fix {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .vitrina .card1 .knop .kn > .variant-cart-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix {
        padding-right: 8px !important;
        padding-left: 8px !important;
        gap: 5px !important;
    }

    .vitrina .card1 .knop .kn > .variant-cart-btn-unique .toto-cart-icon-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix .catalog-cart-icon-legacy-fix {
        width: 13px !important;
        height: 13px !important;
        flex-basis: 13px !important;
        background-size: 13px 13px !important;
    }
}

@media (min-width: 361px) and (max-width: 380px) {
    .vitrina .card1 .knop {
        padding-right: 3px !important;
        padding-left: 3px !important;
    }

    .vitrina .card1 .knop .kn.variant-actions-unique,
    .vitrina .card1 .knop .kn.catalog-actions-legacy-fix {
        grid-template-columns: 56px minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    .vitrina .card1 .knop .kn > .variant-goto-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-goto-legacy-fix,
    .vitrina .card1 .knop .kn > .variant-cart-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
    }

    .vitrina .card1 .knop .kn > .variant-goto-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-goto-legacy-fix {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .vitrina .card1 .knop .kn > .variant-cart-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix {
        padding-right: 6px !important;
        padding-left: 6px !important;
        gap: 4px !important;
    }

    .vitrina .card1 .knop .kn > .variant-cart-btn-unique .toto-cart-icon-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix .catalog-cart-icon-legacy-fix {
        width: 12px !important;
        height: 12px !important;
        flex-basis: 12px !important;
        background-size: 12px 12px !important;
    }
}

@media (max-width: 360px) {
    .vitrina .card1 .knop .kn.variant-actions-unique,
    .vitrina .card1 .knop .kn.catalog-actions-legacy-fix {
        grid-template-columns: 54px minmax(0, 1fr) !important;
    }

    .vitrina .card1 .knop .kn > .variant-goto-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-goto-legacy-fix,
    .vitrina .card1 .knop .kn > .variant-cart-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix {
        height: 38px !important;
        min-height: 38px !important;
        font-weight: 600 !important;
    }

    .vitrina .card1 .knop .kn > .variant-goto-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-goto-legacy-fix {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .vitrina .card1 .knop .kn > .variant-cart-btn-unique .toto-cart-icon-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix .catalog-cart-icon-legacy-fix {
        display: none !important;
    }
}

/* Mobile card actions: reserve real breathing room around both labels.
   The two-column catalogue leaves only about 150px for the whole action row,
   so each phone range gets explicit, content-aware proportions. */
@media (min-width: 381px) and (max-width: 767px) {
    .vitrina .card1 .knop .kn.variant-actions-unique,
    .vitrina .card1 .knop .kn.catalog-actions-legacy-fix {
        grid-template-columns: 66px minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    .vitrina .card1 .knop .kn > .variant-goto-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-goto-legacy-fix,
    .vitrina .card1 .knop .kn > .variant-cart-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix {
        font-size: 10.5px !important;
        line-height: 1 !important;
    }

    .vitrina .card1 .knop .kn > .variant-goto-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-goto-legacy-fix {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .vitrina .card1 .knop .kn > .variant-cart-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix {
        padding-right: 7px !important;
        padding-left: 7px !important;
        gap: 4px !important;
    }

    .vitrina .card1:not(.card-variant-unique) .knop .kn > a.catalog-goto-legacy-fix,
    .vitrina .card1:not(.card-variant-unique) .knop .kn > button.catalog-cart-legacy-fix {
        font-size: 10.5px !important;
    }

    .vitrina .card1 .knop .kn > .variant-cart-btn-unique .toto-cart-icon-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix .catalog-cart-icon-legacy-fix {
        width: 12px !important;
        height: 12px !important;
        flex-basis: 12px !important;
        background-size: 12px 12px !important;
    }
}

@media (min-width: 361px) and (max-width: 380px) {
    .vitrina .card1 .knop .kn.variant-actions-unique,
    .vitrina .card1 .knop .kn.catalog-actions-legacy-fix {
        grid-template-columns: 62px minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    .vitrina .card1 .knop .kn > .variant-goto-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-goto-legacy-fix,
    .vitrina .card1 .knop .kn > .variant-cart-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix {
        padding-right: 6px !important;
        padding-left: 6px !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    .vitrina .card1 .knop .kn > .variant-cart-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix {
        gap: 3px !important;
    }

    .vitrina .card1:not(.card-variant-unique) .knop .kn > a.catalog-goto-legacy-fix,
    .vitrina .card1:not(.card-variant-unique) .knop .kn > button.catalog-cart-legacy-fix {
        font-size: 10px !important;
    }

    .vitrina .card1 .knop .kn > .variant-cart-btn-unique .toto-cart-icon-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix .catalog-cart-icon-legacy-fix {
        width: 11px !important;
        height: 11px !important;
        flex-basis: 11px !important;
        background-size: 11px 11px !important;
    }
}

@media (max-width: 360px) {
    .vitrina .card1 .knop .kn.variant-actions-unique,
    .vitrina .card1 .knop .kn.catalog-actions-legacy-fix {
        grid-template-columns: 57px minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    .vitrina .card1 .knop .kn > .variant-goto-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-goto-legacy-fix,
    .vitrina .card1 .knop .kn > .variant-cart-btn-unique,
    .vitrina .card1 .knop .kn > .catalog-cart-legacy-fix {
        padding-right: 5px !important;
        padding-left: 5px !important;
        font-size: 9.5px !important;
        line-height: 1 !important;
    }

    .vitrina .card1:not(.card-variant-unique) .knop .kn > a.catalog-goto-legacy-fix,
    .vitrina .card1:not(.card-variant-unique) .knop .kn > button.catalog-cart-legacy-fix {
        font-size: 9.5px !important;
    }
}