@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap');

:root {
    --df-primary: #008744;
    --df-primary-dark: #006f37;
    --df-primary-light: #eaf5ee;
    --df-secondary: #e53935;
    --df-secondary-dark: #c62828;
    --df-accent: #ffc107;
    --df-dark: #1a202c;
    --df-dark-muted: #4a5568;
    --df-gray-100: #f8fafc;
    --df-gray-200: #edf2f7;
    --df-gray-300: #e2e8f0;
    --df-white: #ffffff;
    --df-font-heading: 'Roboto', sans-serif;
    --df-font-body: 'Roboto', sans-serif;
    --df-font-weight-regular: 400;
    --df-font-weight-medium: 500;
    --df-font-weight-semibold: 600;
    --df-font-weight-bold: 700;
    --df-font-weight-extrabold: 800;
    --df-line-height-tight: 1.2;
    --df-line-height-heading: 1.25;
    --df-line-height-compact: 1.35;
    --df-line-height-body: 1.6;
    --df-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --df-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --df-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --df-transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body, html, input, button, select, textarea, optgroup {
    font-family: var(--df-font-body) !important;
    color: var(--df-dark);
    background-color: var(--df-gray-100);
    line-height: var(--df-line-height-body);
    -webkit-font-smoothing: antialiased;
}

body, html {
    background-color: var(--df-white);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--df-font-heading) !important;
    font-weight: var(--df-font-weight-bold);
    color: var(--df-dark);
}

.header__topbar {
    background: var(--df-primary) !important;
    padding: 6px 0 !important;
    min-height: 36px !important;
}

.header__topbar--inner {
    min-height: 24px;
}

.header__topbar .wellcome__text {
    font-size: 1.35rem !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px;
}

.header__widget--social {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.header__widget--social__list {
    margin: 0 !important;
}

.header__topbar .header__widget--social__icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background-color: var(--df-primary, #008744) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

.header__topbar .header__widget--social__icon:hover {
    background-color: var(--df-primary-dark, #006f37) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.header__topbar .header__widget--social__icon i,
.header__topbar .header__widget--social__icon svg {
    font-size: 16px !important;
    color: #ffffff !important;
}

.main__header,
.main__header2 {
    padding: 2px 0 !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: padding 0.3s ease, box-shadow 0.3s ease !important;
}

.main__header--inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 60px;
}

.main__logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
}

.main__logo--title {
    margin: 0 !important;
    line-height: 1 !important;
}

.main__logo--link {
    display: inline-flex !important;
    align-items: center !important;
}

.main__logo--img,
.main__logo img {
    height: 47px !important;
    max-height: 47px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: height 0.3s ease, max-height 0.3s ease !important;
}

.header__menu {
    padding-left: 25px !important;
}

.header__menu--items {
    margin-right: 22px !important;
}

.header__menu--items:last-child {
    margin-right: 0 !important;
}

.header__account--btn{position:relative;width:3.8rem;height:3.8rem;text-align:center;background:var(--df-primary);line-height:3.8rem;border-radius:50%;color:var(--df-white);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}

/* Keep large cart quantities inside the counter badge. */
.items__count {
    width: auto;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    border-radius: 999px;
}

.breadcrumb__section.breadcrumb__bg {
    position: relative;
    background: url('../img/banner/breadcrumb-bg.jpg') no-repeat center center / cover !important;
    padding: 70px 0 65px !important;
    overflow: hidden;
}

.breadcrumb__section.breadcrumb__bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -15%;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.breadcrumb__section.breadcrumb__bg::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.breadcrumb__content--title {
    font-size: 2.7rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.5px;
    margin-bottom: 16px !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.breadcrumb__content--menu {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px;
    background: rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 8px 24px !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    list-style: none !important;
    margin: 0 auto !important;
}

.breadcrumb__content--menu__items a,
.breadcrumb__content--menu__items span {
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    color: #ffffff !important;
    transition: all 0.25s ease !important;
}

.breadcrumb__content--menu__items a:hover {
    color: #ffd700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

a {
    color: var(--df-dark);
    text-decoration: none;
    transition: var(--df-transition);
}

a:hover {
    color: var(--df-primary);
}

.text-primary-df { color: #008744 !important; }
.text-secondary-df { color: var(--df-secondary) !important; }
.bg-primary-df { background-color: var(--df-primary) !important; }

.header-wrapper {
    background-color: var(--df-white);
    box-shadow: var(--df-shadow-sm);
    position: relative;
    z-index: 100;
}

.topbar-container {
    background: linear-gradient(90deg, #008744 0%, #006f37 100%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    position: relative;
    z-index: 101;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 12px 0 !important;
}

.topbar-pill {
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    border-radius: 50px;
    padding: 6px 16px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    transition: var(--df-transition);
}

.topbar-pill:hover {
    background: rgba(255, 255, 255, 0.3);
}

.topbar-lang-badge {
    background: rgba(0, 0, 0, 0.16);
    border-radius: 50px;
    padding: 5px 14px !important;
    font-size: 13px !important;
    font-weight: 500;
}

.topbar-social-link {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--df-transition);
    text-decoration: none !important;
    font-size: 15px !important;
}

.topbar-social-link:hover {
    background: #ffffff !important;
    color: #008744 !important;
    transform: translateY(-2px);
}

.header-main-middle {
    background-color: #ffffff !important;
    position: relative;
    z-index: 100;
    padding: 10px 0 !important;
}

.dofi-logo-box {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
}

.dofi-logo-title {
    display: block;
    font-family: var(--df-font-heading) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #008744 !important;
    letter-spacing: -0.5px;
    line-height: 1;
}

.dofi-logo-slogan {
    display: block;
    font-size: 12.5px !important;
    color: #008744 !important;
    font-weight: 500;
    margin-top: 3px;
    font-style: italic;
    letter-spacing: 0.5px;
}

.dofi-search-box {
    display: flex;
    align-items: center;
    background: #f4f6f8;
    border: 1px solid #e1e5eb;
    border-radius: 50px;
    overflow: hidden;
    max-width: 580px;
    width: 100%;
    height: 46px !important;
    transition: var(--df-transition);
    padding: 3px;
}

.dofi-search-box:focus-within {
    border-color: #008744;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(0, 135, 68, 0.12);
}

.dofi-search-input {
    border: none;
    outline: none;
    background: transparent;
    padding: 0 20px;
    font-size: 14.5px !important;
    width: 100%;
    color: #2d3748;
}

.dofi-search-input::placeholder {
    color: #8fa0b2;
    font-size: 14px !important;
}

.dofi-search-button {
    background: #008744 !important;
    color: #ffffff !important;
    border: none;
    border-radius: 50px;
    padding: 0 24px !important;
    font-weight: 500;
    font-size: 14px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--df-transition);
    height: 100%;
}

.dofi-search-button:hover {
    background: #006f37 !important;
    box-shadow: 0 4px 12px rgba(0, 135, 68, 0.25);
}

.dofi-icon-btn {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    background: #f4f6f8;
    color: #2d3748 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--df-transition);
    text-decoration: none !important;
    border: none;
    cursor: pointer;
}

.dofi-icon-btn:hover {
    background: #eaf5ee;
    color: #008744 !important;
    transform: translateY(-2px);
}

.dofi-badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    background: #008744 !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.dofi-cart-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px;
    background: #eaf5ee;
    padding: 4px 16px 4px 4px !important;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--df-transition);
}

.dofi-cart-pill:hover {
    background: #d5ebd9;
    transform: translateY(-2px);
}

.dofi-cart-icon-bg {
    position: relative;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    background: #008744;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dofi-action-icon-btn {
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    background: #008744 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--df-transition);
    text-decoration: none !important;
    border: none;
    cursor: pointer;
}

.dofi-action-icon-btn:hover {
    background: #006f37 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 135, 68, 0.3);
}

.dofi-action-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: #ffffff !important;
    color: #008744 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid #008744;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.cart-label {
    font-size: 11px !important;
    color: #718096;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

.cart-total {
    font-size: 14px !important;
    color: #008744;
    font-weight: 700;
    line-height: 1.2;
}

.dofi-navbar-wrapper {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 4px 0 !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease,
                background-color 0.3s ease;
}

.dofi-nav-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 6px !important;
}

.dofi-nav-item {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: relative !important;
}

.dofi-nav-link {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #2d3748 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 13px 22px !important;
    transition: var(--df-transition);
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: 8px;
}

.dofi-nav-link:hover {
    color: #008744 !important;
    background-color: #f4f6f8;
}

.dofi-nav-link.active {
    background-color: #eaf5ee !important;
    color: #008744 !important;
}

/* Chống rớt dòng chữ & Icon trong Menu Header chính */
.header__menu--navigation > ul {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.header__menu--items {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.header__menu--link {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.header__menu--link .menu__arrowdown--icon {
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 3px !important;
}

.header__menu--link:hover, .header__menu--items:hover > .header__menu--link {
    color: var(--df-secondary) !important;
}

.header__menu--link.active,
.header__menu--items.active > .header__menu--link {
    color: var(--df-primary, #008744) !important;
    font-weight: 700 !important;
}

.header__menu--link.hover .menu__arrowdown--icon{
    color: var(--df-secondary) !important;
    opacity: 1 !important;
}
.header__menu--link.active .menu__arrowdown--icon {
    color: var(--df-primary, #008744) !important;
    opacity: 1 !important;
}


.dofi-hotline-badge {
    background: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 50px;
    padding: 6px 18px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--df-transition);
}

.dofi-hotline-badge:hover {
    background: #ffe3e3;
}

.hotline-icon-circle {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    background: #e53935;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hotline-number-text {
    color: #e53935;
    font-weight: 700;
    font-size: 15px !important;
    letter-spacing: 0.2px;
}

.dofi-nav-item .dropdown-menu {
    border-radius: 12px;
    padding: 8px 0;
    min-width: 210px;
    margin-top: 6px !important;
}

.dofi-nav-item .dropdown-item {
    font-size: 14.5px !important;
    padding: 10px 20px !important;
    font-weight: 500;
    color: #2d3748;
    transition: var(--df-transition);
}

.dofi-nav-item .dropdown-item:hover {
    background-color: #eaf5ee;
    color: #008744 !important;
    padding-left: 24px !important;
}

.header__sticky {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, box-shadow 0.35s ease, padding 0.3s ease !important;
}

.header__sticky.sticky,
.header__sticky.is-sticky,
.dofi-navbar-wrapper.is-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1050 !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    padding: 2px 0 !important;
    will-change: transform, opacity;
    animation: stickySlideDown 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes stickySlideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.dofi-navbar-wrapper.is-sticky .sticky-brand-logo {
    display: flex !important;
}

.dofi-navbar-wrapper.is-sticky .sticky-actions {
    display: flex !important;
}

.dofi-navbar-wrapper.is-sticky .sticky-hide {
    display: none !important;
}

/* Predictive Search Panel & Modal styling */
.predictive-search-panel,
.predictive__search--box {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: linear-gradient(180deg, #f0faf4 0%, #ffffff 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 20px 60px rgba(0, 100, 50, 0.12), 0 4px 16px rgba(0,0,0,0.08) !important;
    z-index: 99999 !important;
    padding: 40px 20px 36px !important;
    border-bottom: 4px solid #008744 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-105%) !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.35s !important;
}

.search__open--btn *,
.minicart__open--btn *,
[data-header-panel-toggle] * {
    pointer-events: none !important;
}

@media (max-width: 991px) {
    .offcanvas__stikcy--toolbar {
        z-index: 100001 !important;
    }

    [data-header-panel-toggle].is-active .offcanvas__stikcy--toolbar__icon {
        background: #ffffff !important;
        color: #008744 !important;
        box-shadow: inset 0 0 0 1px #008744;
    }
}

.predictive-search-panel.active,
.predictive__search--box.active,
body.predictive__search--box_active .predictive-search-panel,
body.predictive__search--box_active .predictive__search--box {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Only one header panel may be visible at a time. These guards also neutralize
   legacy handlers that may add an old active class after another panel opens. */
body[data-active-header-panel="search"] .offCanvas__minicart {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
    transition: none !important;
}

body[data-active-header-panel="cart"] .predictive-search-panel,
body[data-active-header-panel="cart"] .predictive__search--box,
body[data-active-header-panel="menu"] .predictive-search-panel,
body[data-active-header-panel="menu"] .predictive__search--box {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-105%) !important;
    transition: none !important;
}

body[data-active-header-panel="menu"] .offCanvas__minicart {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
    transition: none !important;
}

.predictive__search--box__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.search-modal-title,
.predictive__search--title {
    font-family: var(--df-font-heading) !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.3px !important;
}

.search-modal-title .text-primary-df {
    background: linear-gradient(135deg, #009e50, #006f37) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.search-modal-sub {
    font-size: 1.25rem !important;
    color: #64748b !important;
    font-weight: 400 !important;
    margin-bottom: 28px !important;
}

.dofi-modal-search-form,
.predictive__search--form {
    max-width: 780px !important;
    margin: 0 auto !important;
    width: 100% !important;
    position: relative !important;
}

.dofi-modal-search-box {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 2.5px solid #008744 !important;
    border-radius: 50px !important;
    padding: 0 6px 0 24px !important;
    box-shadow: 0 4px 22px rgba(0, 135, 68, 0.12) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    overflow: hidden !important;
    height: 58px !important;
    gap: 8px !important;
}

.dofi-modal-search-box:focus-within {
    box-shadow: 0 6px 26px rgba(0, 135, 68, 0.22) !important;
    border-color: #006f37 !important;
}

.dofi-modal-search-input,
.predictive__search--input {
    font-family: var(--df-font-body) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 1.55rem !important;
    font-weight: 400 !important;
    color: #1e293b !important;
    width: 100% !important;
    flex: 1 !important;
    height: 100% !important;
    min-height: unset !important;
    margin: 0 !important;
}

.dofi-modal-search-input::placeholder,
.predictive__search--input::placeholder {
    font-family: var(--df-font-body) !important;
    color: #94a3b8 !important;
    font-size: 1.45rem !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.dofi-modal-search-btn,
.predictive__search--button {
    font-family: var(--df-font-body) !important;
    background: linear-gradient(135deg, #009e50 0%, #008744 100%) !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    border-radius: 50px !important;
    padding: 0 32px !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    transition: background 0.25s ease, box-shadow 0.25s ease !important;
    height: 46px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 135, 68, 0.25) !important;
}

.dofi-modal-search-btn:hover,
.predictive__search--button:hover {
    background: linear-gradient(135deg, #00b85d 0%, #006f37 100%) !important;
    box-shadow: 0 6px 20px rgba(0, 135, 68, 0.4) !important;
}

.predictive__search--close__btn {
    position: absolute !important;
    top: 20px !important;
    right: 24px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.predictive__search--close__btn:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
    transform: rotate(90deg) !important;
}

.search-popular-tags {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.search-tag-label {
    font-size: 1.15rem !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.search-tag-chip {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #008744 !important;
    background: #eaf5ee !important;
    border: 1px solid #c8e6d3 !important;
    border-radius: 50px !important;
    padding: 6px 18px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

.search-tag-chip:hover {
    background: #008744 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 135, 68, 0.25) !important;
}


.search-panel-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: #f4f6f8;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--df-dark);
    cursor: pointer;
    transition: var(--df-transition);
}

.search-panel-close:hover {
    background: var(--df-secondary);
    color: var(--df-white);
    transform: rotate(90deg);
}

/* ── Search chips loading ─────────────────────────────── */
.search-chips-loading {
    font-size: 1rem;
    color: #94a3b8;
    font-style: italic;
}

/* ── Predictive Suggest Dropdown ─────────────────────── */
.search-suggest-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 135, 68, 0.08);
    z-index: 100000;
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: #c8e6d3 transparent;
}

.search-suggest-dropdown.open {
    display: block;
    animation: suggestFadeIn 0.18s ease;
}

@keyframes suggestFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Each product item */
.search-suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}

.search-suggest-item:last-child {
    border-bottom: none;
}

.search-suggest-item:hover,
.search-suggest-item.active {
    background: #f0faf4;
}

.search-suggest-item__img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.search-suggest-item__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
}

.search-suggest-item__info {
    flex: 1;
    min-width: 0;
}

.search-suggest-item__name {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.search-suggest-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.search-suggest-item__cat {
    font-size: 1.1rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 7px;
    border-radius: 20px;
    white-space: nowrap;
}

.search-suggest-item__price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #008744;
}

.search-suggest-item__arrow {
    flex-shrink: 0;
    color: #cbd5e1;
    transition: color 0.15s, transform 0.15s;
}

.search-suggest-item:hover .search-suggest-item__arrow,
.search-suggest-item.active .search-suggest-item__arrow {
    color: #008744;
    transform: translateX(2px);
}

/* Empty state */
.search-suggest-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 20px;
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 500;
}

/* Loading state */
.search-suggest-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: #64748b;
    font-size: 0.95rem;
}

.search-suggest-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid #c8e6d3;
    border-top-color: #008744;
    border-radius: 50%;
    animation: searchSpin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes searchSpin {
    to { transform: rotate(360deg); }
}

/* ── Search Results Page ─────────────────────────────── */
.search-results-page {
    background: #f8fafc;
    min-height: 60vh;
}

.search-results-hero {
    background: linear-gradient(135deg, #f0faf4 0%, #ffffff 100%);
    border-bottom: 2px solid #e2efe8;
    padding: 48px 0 40px;
}

.search-results-hero__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.search-results-hero__title {
    font-family: var(--df-font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 10px;
}

.search-results-hero__keyword {
    color: #008744;
}

.search-results-hero__sub {
    font-size: 1.4rem;
    color: #64748b;
    margin-bottom: 28px;
}

.search-results-hero__form {
    max-width: 640px;
    margin: 0 auto;
}

.search-results-hero__box {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #008744;
    border-radius: 50px;
    padding: 0 6px 0 22px;
    height: 52px;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(0, 135, 68, 0.1);
    transition: box-shadow 0.3s, border-color 0.3s;
}

.search-results-hero__box:focus-within {
    box-shadow: 0 6px 24px rgba(0, 135, 68, 0.2);
    border-color: #006f37;
}

.search-results-hero__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.4rem;
    color: #1e293b;
    font-family: var(--df-font-body);
}

.search-results-hero__input::placeholder {
    color: #94a3b8;
}

.search-results-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #009e50 0%, #008744 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 0 22px;
    height: 40px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s, box-shadow 0.25s;
}

.search-results-hero__btn:hover {
    background: linear-gradient(135deg, #00b85d 0%, #006f37 100%);
    box-shadow: 0 4px 14px rgba(0, 135, 68, 0.35);
}

.search-results-section {
    padding-top: 40px;
    padding-bottom: 60px;
}

/* Empty / No results */
.search-results-empty {
    padding: 80px 0;
}

.search-results-empty__icon {
    font-size: 4rem;
    margin-bottom: 20px;
    display: block;
}

.search-results-empty__title {
    font-family: var(--df-font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
}

.search-results-empty__sub {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 28px;
}

.search-results-empty__btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #009e50 0%, #008744 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.25s, box-shadow 0.25s;
}

.search-results-empty__btn:hover {
    background: linear-gradient(135deg, #00b85d 0%, #006f37 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 135, 68, 0.35);
}

.footer__section3 {
    margin-top: 0 !important;
}

.footer__section3.footer__bg {
    margin-top: 0 !important;
    background: #f3f6fb !important;
    padding-top: 40px !important;
    color: #333333 !important;  
    position: relative !important;
    overflow: hidden !important;
}

.footer__widget--logo {
    margin-top: 0 !important;
    margin-bottom: 9px !important;
    display: block !important;
    line-height: 1 !important;
}

.footer__logo-img {
    max-height: 52px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.footer__nav-group {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    gap: 90px !important;
    padding-top: 28px !important;
}

.footer__widget--inner {
    margin-top: 0 !important;
    padding-left: 0 !important;
}

@media (min-width: 992px) {
    .footer__widget--inner,
    .footer__widget--intro .footer__widget--inner {
        padding-left: 0 !important;
    }
}

.footer__widget--title {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: var(--df-primary, #008744) !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.2px !important;
    line-height: 1.3 !important;
    font-family: var(--df-font-heading) !important;
    white-space: nowrap !important;
}

.footer__widget--button {
    display: none !important;
}

.footer__widget--desc {
    font-size: 1.45rem !important;
    color: #334155 !important;
    line-height: 1.6 !important;
    margin-bottom: 22px !important;
    max-width: clamp(260px, 24vw, 350px) !important;
    text-align: justify !important;
}

.footer__widget--menu {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: block !important;
}

.footer__widget--menu__list {
    margin-bottom: 12px !important;
}

.footer__widget--menu__text {
    font-size: 1.45rem !important;
    font-weight: 400 !important;
    color: #334155 !important;
    line-height: 1.5 !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

.footer__widget--menu__text:hover {
    color: var(--df-contact-primary) !important;
    transform: translateX(5px) !important;
}

.footer__widget--social {
    display: flex !important;
    gap: 12px !important;
    padding: 0 !important;
    margin-top: 22px !important;
    margin-bottom: 0 !important;
    list-style: none !important;
}

.footer__widget--social .footer__widget--social__icon,
.footer__widget--social .header__widget--social__icon,
.footer__widget--social__icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background-color: var(--df-primary, #008744) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.4rem !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(0, 135, 68, 0.2) !important;
}

.footer__widget--social .footer__widget--social__icon:hover,
.footer__widget--social .header__widget--social__icon:hover,
.footer__widget--social__icon:hover {
    background-color: var(--df-primary-dark, #006f37) !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0, 135, 68, 0.35) !important;
}

.footer__widget--social .footer__widget--social__icon i,
.footer__widget--social .header__widget--social__icon i,
.footer__widget--social__icon i {
    font-size: 15px !important;
    color: #ffffff !important;
}

.newsletter__subscribe--form {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 50px !important;
    padding: 4px 4px 4px 24px !important;
    max-width: 380px !important;
    margin-top: 18px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
}

.newsletter__subscribe--input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 1.2rem !important;
    color: #1e293b !important;
    width: 100% !important;
    height: auto !important;
    padding: 10px 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.newsletter__subscribe--input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}


.newsletter__subscribe--button {
    background: linear-gradient(135deg, #0fa33c 0%, #137527 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 25px !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(255, 87, 34, 0.35) !important;
}

.newsletter__subscribe--button:hover {
    background: linear-gradient(135deg, #f44336 0%, #e63900 100%) !important;
    box-shadow: 0 6px 18px rgba(255, 87, 34, 0.5) !important;
    transform: translateY(-1px) !important;
}

.footer__top {
    border-bottom:1px solid rgba(174,174,191,.5);
    padding:30px 0 50px
}

.footer__section3--topbar,
.footer__top--row,
.main__footer--wrapper {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
}

/* Desktop (>= 1200px): Unified balanced 5-column layout with closer, equal visual gaps */
@media (min-width: 1200px) {
    .main__footer--wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: clamp(24px, 3vw, 48px) !important;
        align-items: flex-start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main__footer--wrapper > .col-lg-3 {
        width: auto !important;
        max-width: clamp(260px, 24vw, 350px) !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
    }

    .main__footer--wrapper > .col-lg-9 {
        display: contents !important;
    }

    .footer__nav-group--four-cols {
        display: contents !important;
    }

    .footer__widget--nav-item {
        width: auto !important;
        flex: 0 0 auto !important;
        max-width: none !important;
        padding: 0 !important;
    }
}

/* Tablet Landscape (992px - 1199px): Intro on left, 4 nav items in balanced 2x2 grid on right */
@media (min-width: 992px) and (max-width: 1199px) {
    .main__footer--wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 30px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main__footer--wrapper > .col-lg-3 {
        display: block !important;
        flex: 0 0 280px !important;
        max-width: 280px !important;
        padding: 0 !important;
    }

    .main__footer--wrapper > .col-lg-3 .footer__widget--desc {
        max-width: 280px !important;
    }

    .main__footer--wrapper > .col-lg-9 {
        display: block !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
    }

    .footer__nav-group--four-cols {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 30px 40px !important;
    }

    .footer__widget--nav-item {
        width: 100% !important;
        padding: 0 !important;
    }
}

/* Tablet Portrait (768px - 991px): Intro on top, 4 nav items in 2x2 grid below */
@media (min-width: 768px) and (max-width: 991px) {
    .main__footer--wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main__footer--wrapper > .col-lg-3 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .main__footer--wrapper > .col-lg-3 .footer__widget--desc {
        max-width: 520px !important;
    }

    .main__footer--wrapper > .col-lg-9 {
        width: 100% !important;
        padding: 0 !important;
    }

    .footer__nav-group--four-cols {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 25px 20px !important;
    }

    .footer__widget--nav-item {
        width: 100% !important;
        padding: 0 !important;
    }
}

/* Footer Contact Column (Liên hệ với chúng tôi) */
.footer__widget--contact-col {
    min-width: 0;
}

.footer__contact-inner,
.footer__widget--contact-col .footer__widget--inner {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.footer__contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    line-height: 1.5 !important;
    min-height: 22px !important;
}

.footer__contact-icon {
    color: var(--df-primary, #008744) !important;
    font-size: 1.7rem !important;
    line-height: 1.3 !important;
    width: 20px !important;
    display: flex !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.footer__contact-text {
    max-width: 250px;
    min-width: 0;
    font-size: 1.45rem !important;
    color: #334155 !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
}

.footer__contact-text > div:not(:last-child) {
    margin-bottom: 12px !important;
}

.footer__contact-link {
    color: #334155 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-size: 1.45rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    display: inline-block !important;
}

.footer__contact-link:hover {
    color: var(--df-primary, #008744) !important;
    text-decoration: none !important;
    transform: translateX(3px) !important;
}

.footer__bottom {
    border-top: 1px solid #cbd5e1 !important;
    border-bottom: none !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    margin-top: 20px !important;
}

.footer__bottom .copyright__content,
.footer__bottom p {
    font-size: 1.3rem !important;
    color: #475569 !important;
    margin: 0 !important;
}

.copyright__content--link,
.copyright__content--link.text-primary-df,
.text-primary-df {
    color: var(--df-primary) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.copyright__content--link:hover,
.text-primary-df:hover {
    color: #006f37 !important;
    text-decoration: underline !important;
}

.footer__payment--inner {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.footer__payment--list img {
    height: 26px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Background Vector Illustrations */
.footer__position--shape__one {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    max-width: 220px !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.footer__position--shape__two {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    max-width: 220px !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.dofi-footer-wrapper {
    background: linear-gradient(rgba(18, 24, 28, 0.78), rgba(18, 24, 28, 0.85)), 
                url('https://images.unsplash.com/photo-1542838132-92c53300491e?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat !important;
    color: #e2e8f0 !important;
    position: relative;
    margin-top: 90px !important;
    padding-top: 0 !important;
}

.dofi-features-pill {
    background: #008744 !important;
    border-radius: 50px !important;
    box-shadow: 0 15px 40px rgba(0, 135, 68, 0.35) !important;
    border: none !important;
    padding: 36px 40px !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    position: relative;
    z-index: 100;
}

.feature-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.feature-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    font-family: var(--df-font-heading) !important;
}

.feature-desc {
    font-size: 13.5px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 400;
}

.dofi-footer-body {
    padding-bottom: 50px !important;
}

.footer-about-text {
    font-size: 14px !important;
    color: #cbd5e1 !important;
    line-height: 1.65;
    margin-bottom: 16px;
}

.footer-social-title {
    font-family: 'Dancing Script', cursive !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-top: 18px !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.footer-social-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    background: #008744 !important;
    color: #ffffff !important;
    font-size: 19px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--df-transition);
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.footer-social-btn:hover {
    background: #ffffff !important;
    color: #008744 !important;
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 6px 15px rgba(0, 135, 68, 0.4);
}

.footer-column-heading {
    font-size: 17.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 22px !important;
    font-family: var(--df-font-heading) !important;
    position: relative;
    padding-bottom: 8px !important;
}

.footer-column-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background-color: #008744;
    border-radius: 2px;
}

.footer-menu-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

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

.footer-menu-links a {
    font-size: 14.5px !important;
    color: #cbd5e1 !important;
    font-weight: 400 !important;
    transition: var(--df-transition);
    display: inline-block;
    text-decoration: none !important;
}

.footer-menu-links a:hover {
    color: #008744 !important;
    transform: translateX(4px);
}

.footer-newsletter-sub {
    font-size: 13.5px !important;
    color: #cbd5e1 !important;
    margin-bottom: 16px;
    line-height: 1.5;
}

.app-download-btn-dark {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px;
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    min-width: 175px;
    text-decoration: none !important;
    transition: var(--df-transition);
}

.app-download-btn-dark:hover {
    background: #008744 !important;
    border-color: #008744 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 135, 68, 0.3);
}

.app-btn-sub {
    display: block;
    font-size: 9.5px !important;
    text-transform: uppercase;
    color: #cbd5e1;
    letter-spacing: 0.5px;
}

.app-btn-title {
    display: block;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff;
    margin-top: 2px;
}

.dofi-footer-bottom {
    background: rgba(10, 14, 17, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 0 !important;
    font-size: 14px !important;
    font-family: var(--df-font-body) !important;
    color: #cbd5e1 !important;
}

.footer-copyright-text, .footer-designer-text {
    font-family: var(--df-font-body) !important;
    font-size: 14px !important;
    color: #cbd5e1 !important;
}

.footer-copyright-text strong.text-primary-df,
.footer-designer-text strong.text-primary-df {
    color: #008744 !important;
    font-weight: 700 !important;
}

#btn-scroll-top {
    position: fixed;
    bottom: 35px;
    right: 35px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #008744 0%, #006f37 100%) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 8px 25px rgba(0, 135, 68, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px) scale(0.6) rotate(-20deg);
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.35s ease,
                background 0.3s ease,
                box-shadow 0.3s ease;
    will-change: transform, opacity;
}

#btn-scroll-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1) rotate(0deg);
    pointer-events: auto;
}

#btn-scroll-top:hover {
    background: linear-gradient(135deg, #009e4f 0%, #007d3e 100%) !important;
    transform: translateY(-6px) scale(1.1) rotate(0deg);
    box-shadow: 0 14px 32px rgba(0, 135, 68, 0.55), 0 0 20px rgba(0, 135, 68, 0.35) !important;
}

#btn-scroll-top:active {
    transform: translateY(-2px) scale(0.96);
    box-shadow: 0 6px 18px rgba(0, 135, 68, 0.4) !important;
}

.btn-scroll-top-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#btn-scroll-top:hover .btn-scroll-top-icon {
    transform: translateY(-3px);
}

.dofi-slidebar-hero {
    padding: 95px 0 !important;
    min-height: 420px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(10, 14, 17, 0.78), rgba(0, 135, 68, 0.88)), 
                url('https://images.unsplash.com/photo-1542838132-92c53300491e?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat !important;
}

.slidebar-title {
    font-size: 3.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -1px;
    line-height: 1.15;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.slidebar-subtitle {
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.94) !important;
}

.slidebar-badge {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.dofi-breadcrumb-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
    font-size: 1.35rem !important;
    letter-spacing: 0.3px;
    padding: 14px 42px !important;
    margin: 0 auto !important;
}

.dofi-breadcrumb-pill .breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
}

.dofi-breadcrumb-pill .breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    color: #00ff76 !important;
    font-weight: 900 !important;
    font-size: 26px !important;
    padding: 0 20px !important;
    text-shadow: 0 0 16px rgba(0, 255, 118, 0.9) !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    height: 100% !important;
}

.breadcrumb-link {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 700 !important;
    font-size: 1.35rem !important;
    text-decoration: none !important;
    transition: var(--df-transition);
    display: inline-flex !important;
    align-items: center !important;
}

.breadcrumb-link:hover {
    color: #00ff76 !important;
    text-shadow: 0 0 10px rgba(0, 255, 118, 0.6);
}

.text-success-light {
    color: #00ff76 !important;
    font-size: 1.35rem !important;
}

.branch-grid-row {
    row-gap: 10px !important;
}

.branch-title {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.35;
}

.branch-item-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
}

.branch-icon-circle {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
}

.badge-pastel-red {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
}

.icon-circle-pastel-red {
    background-color: #fee2e2 !important;
    border: 1.5px solid #fca5a5 !important;
}

.icon-text-red {
    color: #dc2626 !important;
}

.branch-card-red:hover {
    border-color: #fca5a5 !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(220, 38, 38, 0.12) !important;
}

.badge-pastel-green {
    background-color: #d1fae5 !important;
    color: #047857 !important;
    border: 1px solid #6ee7b7 !important;
}

.icon-circle-pastel-green {
    background-color: #d1fae5 !important;
    border: 1.5px solid #6ee7b7 !important;
}

.icon-text-green {
    color: #047857 !important;
}

.branch-card-green:hover {
    border-color: #6ee7b7 !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(4, 120, 87, 0.12) !important;
}

.badge-pastel-blue {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
    border: 1px solid #93c5fd !important;
}

.icon-circle-pastel-blue {
    background-color: #dbeafe !important;
    border: 1.5px solid #93c5fd !important;
}

.icon-text-blue {
    color: #1d4ed8 !important;
}

.branch-card-blue:hover {
    border-color: #93c5fd !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(29, 78, 216, 0.12) !important;
}

.badge-pastel-cyan {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #7dd3fc !important;
}

.icon-circle-pastel-cyan {
    background-color: #e0f2fe !important;
    border: 1.5px solid #7dd3fc !important;
}

.icon-text-cyan {
    color: #0369a1 !important;
}

.branch-card-cyan:hover {
    border-color: #7dd3fc !important;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(3, 105, 161, 0.12) !important;
}

.badge-pastel-amber {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

.badge-pastel-rose {
    background-color: #ffe4e6 !important;
    color: #be123c !important;
    border: 1px solid #fecdd3 !important;
}

.text-warning-dark { color: #d97706 !important; }
.text-info-dark { color: #0284c7 !important; }

.mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f6f8;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mobile-menu-btn:hover {
    background: #eaf5ee;
}


.dofi-mobile-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dofi-mobile-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.dofi-mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background: #ffffff;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 6px 0 30px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
}

.dofi-mobile-drawer.active {
    transform: translateX(0);
}

.mobile-menu-link {
    display: flex !important;
    align-items: center !important;
    padding: 12px 18px !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: var(--df-transition);
}

.mobile-menu-link:hover {
    background-color: #f1f5f9 !important;
    color: #008744 !important;
}

.mobile-menu-link.active {
    background-color: #eaf5ee !important;
    color: #008744 !important;
    font-weight: 700 !important;
    border-left: 4px solid #008744 !important;
}

.product-box--purchase {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #e9eeea;
    border-radius: 1.2rem;
    background: var(--df-white);
    box-shadow: 0 2px 6px rgba(19, 61, 36, 0.08);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-box--purchase:hover {
    border-color: rgba(0, 135, 68, 0.3) !important;
    box-shadow: 0 16px 36px rgba(19, 61, 36, 0.14) !important;
}

.product-box--purchase .product__items--thumbnail {
    position: relative;
    height: 26rem;
    padding: 10px;
    overflow: hidden;
    background: var(--df-white);
}

.product-box__discount-badge {
    position: absolute;
    z-index: 2;
    top: 1.2rem;
    left: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.6rem;
    min-height: 2.8rem;
    padding: .4rem .8rem;
    border-radius: .4rem;
    background: var(--df-secondary);
    color: var(--df-white);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.product-box--purchase .product__items--link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.8rem;
}

.product-box--purchase .product__items--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.product-box--purchase:hover .product__primary--img {
    transform: scale(1.04);
}

.product-box--purchase .product__items2--content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 14.5rem;
    padding: 10px;
    border-top: 1px solid #f0f3f1;
    background: var(--df-white);
}

.product-box--purchase .product-box__specification {
    min-height: 1.9rem;
    margin: 0;
    color: var(--df-dark-muted);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
}

.product-box--purchase .product-box__specification.is-empty {
    visibility: hidden;
}

.product-box--purchase .product__items--content__title,
.product-box--purchase:hover .product__items--content__title {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: static;
    min-height: 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}

.product-box--purchase .product__items--content__title a {
    color: #17241c;
}

.product-box--purchase .product__items--content__title a:hover {
    color: var(--df-primary);
}

.product-box--purchase .product__items--link:focus-visible {
    box-shadow: inset 0 0 0 3px rgba(0, 135, 68, 0.32);
}

.product-box--purchase .product__items--content__title a:focus-visible {
    outline: 3px solid rgba(0, 135, 68, 0.32);
    outline-offset: 2px;
}

.product-box__purchase-selector {
    position: relative;
    min-height: 2.4rem;
    margin: 0 0 0.6rem;
}

.product-box--purchase .product__items--price {
    position: static;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.8rem;
    margin: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.product-box--purchase .current__price {
    color: var(--df-primary);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.product-box--purchase .old__price {
    color: var(--df-dark-muted);
    font-size: 1.4rem;
}

.product-box--purchase .product-box__quantity {
    position: absolute;
    z-index: 3;
    right: auto;
    bottom: 1rem;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10.8rem;
    height: 3.4rem;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--df-gray-300);
    border-radius: 999px;
    background: var(--df-white);
    box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0.7rem);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.product-box--purchase:hover .product-box__quantity {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.product-box__quantity button {
    width: 3.4rem;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--df-dark-muted);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1;
}

.product-box__quantity button:hover,
.product-box__quantity button:focus-visible {
    background: var(--bg-gray-color);
    color: var(--df-primary);
}

.product-box__quantity label {
    flex: 1;
    height: 100%;
    margin: 0;
    border-right: 1px solid var(--df-gray-300);
    border-left: 1px solid var(--df-gray-300);
    background: var(--df-white);
}

.product-box__quantity input {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--df-dark);
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
}

.product-box__quantity input::-webkit-inner-spin-button,
.product-box__quantity input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.product-box__quantity input:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(26, 32, 44, 0.12);
}

.product-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 4.4rem;
    margin-top: auto;
    padding: 0 1.8rem;
    border: 0;
    border-radius: 999px;
    background: var(--df-primary);
    color: var(--df-white);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 7px 16px rgba(0, 135, 68, 0.18);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-box--purchase .product-action-button,
.home-promotion-compact-card .product-action-button {
    align-self: stretch;
    width: 100% !important;
    max-width: none;
    min-height: 3.8rem;
    padding: 0 1.4rem;
    border-radius: 0.6rem;
    font-size: 1.4rem;
}

.product-action-button:hover,
.product-action-button:focus-visible {
    background: var(--df-primary-dark);
    color: var(--df-white);
    box-shadow: 0 9px 20px rgba(0, 135, 68, 0.24);
    transform: translateY(-0.1rem);
}

.product-action-button i {
    font-size: 1.4rem;
}

.product-detail-showcase {
    padding: 4rem 0 5rem !important;
}

.product-detail-layout {
    --bs-gutter-x: 4.8rem;
    align-items: flex-start;
}

.product-detail-layout__media,
.product-detail-layout__info {
    display: flex;
}

.product-detail-layout .product__details--media,
.product-detail-info {
    width: 100%;
}

.product-detail-layout .product__details--media {
    position: sticky;
    top: 2rem;
}

.product-detail-layout .product__media--preview {
    position: relative;
    height: 47.2rem;
    padding: 2px;
    overflow: hidden;
    border: 1px solid var(--df-gray-300);
    border-radius: 1.6rem;
    background: var(--df-white);
}

.product-detail-layout .product__media--preview__items,
.product-detail-layout .product__media--preview__items--link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.product-detail-layout .product__media--preview__items--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-detail-badge {
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    z-index: 5;
    min-height: 2.4rem;
    padding: 0.4rem 1.2rem;
    border-radius: 999px;
    background: var(--df-primary);
    color: var(--df-white);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.6rem;
}

.product-detail-layout .product__media--nav {
    margin-top: 1.6rem;
}

.product-detail-layout .product__media--nav .swiper-slide {
    height: 8.6rem;
    padding: 2px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 1.2rem;
    background: var(--df-white);
}

.product-detail-layout .product__media--nav .swiper-slide-thumb-active {
    border-color: var(--df-primary);
}

.product-detail-layout .product__media--nav__items,
.product-detail-layout .product__media--nav__items--img {
    width: 100%;
    height: 100%;
}

.product-detail-layout .product__media--nav__items--img {
    border-radius: 0.5rem;
    object-fit: cover;
}

.product-detail-layout .swiper__nav--btn {
    display: none;
}

/* Related products: keep both navigation buttons outside the product cards. */
.product-related-slider-shell {
    position: relative;
    padding-inline: 9rem;
}

.product-related-slider-shell > .swiper__nav--btn {
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    margin-top: -2.4rem;
    padding: 0;
    border: 2px solid var(--df-primary);
    background: var(--df-white);
    color: var(--df-primary);
    opacity: 1;
    visibility: visible;
}

.product-related-slider-shell > .swiper__nav--btn::after {
    display: none;
}

.product-related-slider-shell > .swiper__nav--btn i {
    display: block;
    font-size: 1.6rem;
    line-height: 1;
    pointer-events: none;
}

.product-related-slider-shell > .swiper__nav--btn:hover,
.product-related-slider-shell > .swiper__nav--btn:focus-visible {
    border-color: var(--df-primary);
    background: var(--df-primary);
    color: var(--df-white);
}

.product-related-slider-shell > .swiper-button-prev {
    left: 0.8rem;
}

.product-related-slider-shell > .swiper-button-next {
    right: 0.8rem;
}

/* Balance related-products slider so all cards have equal height */
.product-related-swiper .swiper-wrapper {
    align-items: stretch;
}

.product-related-swiper .swiper-slide {
    display: flex;
    height: auto;
}

.product-related-swiper .swiper-slide .product__items,
.product-related-swiper .swiper-slide .product-box--purchase.product-box--unified {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.product-related-swiper .swiper-slide .product__items2--content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.product-related-swiper .product-box__purchase-selector {
    margin-top: auto;
}

@media only screen and (max-width: 1199px) {
    .product-related-slider-shell {
        padding-inline: 5.6rem;
    }

    .product-related-slider-shell > .swiper__nav--btn {
        width: 4.2rem;
        height: 4.2rem;
        margin-top: -2.1rem;
    }

    .product-related-slider-shell > .swiper-button-prev {
        left: 0.6rem;
    }

    .product-related-slider-shell > .swiper-button-next {
        right: 0.6rem;
    }
}

@media only screen and (max-width: 767px) {
    .product-related-slider-shell {
        padding-inline: 4.6rem;
    }

    .product-related-slider-shell > .swiper__nav--btn {
        width: 3.6rem;
        height: 3.6rem;
        margin-top: -1.8rem;
    }

    .product-related-slider-shell > .swiper-button-prev {
        left: 0.4rem;
    }

    .product-related-slider-shell > .swiper-button-next {
        right: 0.4rem;
    }

    .product-related-swiper .product-box--purchase .product-action-button {
        width: 100% !important;
        min-height: 3.8rem;
        gap: 0.5rem;
        padding: 0 0.7rem;
        font-size: 1.2rem;
    }

    .product-related-swiper .product-action-button span {
        white-space: nowrap;
    }
}

.product-detail-info {
    min-height: 57.4rem;
}

.product-detail-info .product__details--info__title {
    margin: 0 0 1.2rem;
    color: var(--df-dark);
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1.2;
}

.product-detail-unit {
    margin-left: 0.6rem;
    color: var(--df-dark-muted);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    vertical-align: 0.25rem;
    white-space: nowrap;
}

.product-details-rating {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 2.6rem;
}

.product-details-rating__stars {
    display: inline-flex;
    gap: 0.15rem;
    color: #ffb800;
    font-size: 1.5rem;
    line-height: 1;
}

.product-details-rating__score,
.product-details-rating__sold {
    color: var(--df-dark-muted);
    font-size: 1.4rem;
    font-weight: 500;
}

.product-details-rating__divider {
    color: #c2c8d0;
    font-size: 1.3rem;
}

.product-details-rating__sold strong {
    color: var(--df-dark);
    font-weight: 800;
}

.product-detail-price-panel {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-height: 8.2rem;
    margin-bottom: 1.6rem;
    padding: 1.6rem 2.2rem;
    border: 1px solid #eceff2;
    border-radius: 1.4rem;
    background: #f7f8fa;
}

.product-detail-info .product-detail-price-panel .current__price {
    color: var(--df-primary);
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1;
}

.product-detail-info .product-detail-price-panel .old__price {
    margin: 0;
    color: #9aa2ad;
    font-size: 1.6rem;
}

.product-detail-discount {
    padding: 0.4rem 0.8rem;
    border-radius: 0.4rem;
    background: #fee4e2;
    color: #e52222;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.6rem;
}

.product-detail-info .product__details--info__meta {
    padding: 0;
    border: 0;
}

.product-detail-info .product__details--info__meta--list {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: center;
    min-height: 4.1rem;
    margin: 0;
    padding: 0.8rem 0;
    border-bottom: 1px dashed #dfe3e8;
    font-size: 1.45rem;
}

.product-detail-info .product__details--info__meta--list:last-child {
    border-bottom: 0;
}

.product-detail-info .product__details--info__meta--list strong {
    color: var(--df-dark-muted);
    font-weight: 400;
}

.product-detail-info .product__details--info__meta--list > span {
    color: var(--df-dark);
    font-weight: 600;
}

.product-details-brand,
.product-details-stock {
    color: var(--df-primary);
    font-weight: 700;
}

.product-details-stock::before {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.8rem;
    border-radius: 50%;
    background: var(--df-primary);
    content: "";
    vertical-align: 0.1rem;
}

.product-detail-variant {
    margin-top: 2rem;
}

.product-detail-variant__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.product-detail-variant__label {
    color: var(--df-dark);
    font-size: 1.6rem;
    font-weight: 600;
}

.product-detail-variant__selected {
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    background: #eaf9f1;
    color: var(--df-primary);
    font-size: 1.4rem;
    line-height: 1.2;
}

.product-detail-variant__options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.product-detail-variant__option {
    min-height: 4.2rem;
    padding: 0.8rem 1.8rem;
    border: 2px solid #dfe5eb;
    border-radius: 999px;
    background: var(--df-white);
    color: var(--df-dark-muted);
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.2;
}

.product-detail-variant__option:hover,
.product-detail-variant__option:focus-visible,
.product-detail-variant__option.is-active {
    border-color: var(--df-primary);
    background: #f1fbf5;
    color: var(--df-primary);
}

.product-detail-actions {
    margin-top: 2.4rem;
    padding-bottom: 1.8rem;
}

.product-detail-actions__row {
    display: grid;
    grid-template-columns: 12.8rem minmax(0, 1fr);
    gap: 1.6rem;
}

.product-detail-actions .quantity__box {
    display: flex;
    width: 12.8rem;
    height: 4.8rem;
    overflow: hidden;
    border: 2px solid #e0e4e8;
    border-radius: 1.2rem;
}

.product-detail-actions .product-detail-quantity__button {
    width: 4rem;
    height: 4.4rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--df-white);
    color: var(--df-dark-muted);
    font-size: 2rem;
    line-height: 4.4rem;
}

.product-detail-actions .product-detail-quantity__input {
    width: 4.8rem;
    height: 4.4rem;
    border: 0;
    border-left: 1px solid #e0e4e8;
    background: var(--df-white);
    color: var(--df-dark);
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
}

.product-detail-actions .product-detail-quantity__button.increase {
    border-left: 1px solid #e0e4e8;
}

.product-detail-actions .product-action-button {
    min-height: 4.8rem;
    border-radius: 1.2rem;
    font-size: 1.5rem;
}

.product-detail-add-button {
    border: 2px solid var(--df-primary);
    background: var(--df-primary);
    color: var(--df-white);
    box-shadow: 0 0.6rem 1.6rem rgba(0, 135, 68, 0.18);
}

.product-detail-add-button:hover,
.product-detail-add-button:focus-visible {
    border-color: var(--df-primary-dark);
    background: var(--df-primary-dark);
    color: var(--df-white);
}

.product-detail-add-button i {
    color: var(--df-white);
}

.product-detail-wholesale {
    display: flex;
    gap: 1.4rem;
    margin-top: 1.6rem;
    padding: 1.8rem;
    border: 1px solid #f1cc75;
    border-radius: 1.2rem;
    background: #fff8e7;
}

.product-detail-wholesale__icon {
    display: flex;
    flex: 0 0 4rem;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #ffe7ad;
    color: #a85d10;
    font-size: 1.8rem;
}

.product-detail-wholesale__content {
    min-width: 0;
    color: #704112;
    font-size: 1.45rem;
    line-height: 1.6;
}

.product-detail-wholesale__content > strong {
    display: block;
    margin-bottom: 0.3rem;
    color: #61360c;
    font-size: 1.6rem;
}

.product-detail-wholesale__content p {
    margin: 0 0 0.7rem;
}

.product-detail-wholesale__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
}

.product-detail-wholesale__contacts a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #7b4310;
    font-size: 1.55rem;
    font-weight: 700;
    text-decoration: none;
}

.product-detail-wholesale__contacts a:hover,
.product-detail-wholesale__contacts a:focus-visible {
    color: #4f2908;
}

@media (max-width: 991px) {
    .product-detail-layout {
        --bs-gutter-x: 3rem;
    }

    .product-detail-layout .product__media--preview {
        height: 42rem;
    }

    .product-detail-info .product__details--info__title {
        font-size: 3rem;
    }

    .product-detail-info .product-detail-price-panel .current__price {
        font-size: 3.2rem;
    }

    .product-detail-info .product__details--info__meta--list {
        grid-template-columns: 13rem minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .product-detail-showcase {
        padding: 3rem 0 4rem !important;
    }

    .product-detail-layout {
        row-gap: 3.2rem;
    }

    .product-detail-layout .product__details--media {
        position: static;
    }

    .product-detail-layout .product__media--preview {
        height: 40rem;
    }

    .product-detail-layout .product__media--nav .swiper-slide {
        height: 7.8rem;
    }

    .product-detail-info {
        min-height: 0;
    }
}

@media (max-width: 575px) {
    .product-detail-layout .product__media--preview {
        height: 34rem;
        padding: 1.2rem;
    }

    .product-detail-badge {
        top: 1.2rem;
        left: 1.2rem;
    }

    .product-detail-info .product__details--info__title {
        font-size: 2.8rem;
    }

    .product-details-rating {
        flex-wrap: wrap;
        margin-bottom: 2rem;
    }

    .product-detail-price-panel {
        min-height: 7rem;
        padding: 1.4rem 1.6rem;
    }

    .product-detail-info .product-detail-price-panel .current__price {
        font-size: 2.8rem;
    }

    .product-detail-info .product-detail-price-panel .old__price {
        font-size: 1.4rem;
    }

    .product-detail-info .product__details--info__meta--list {
        grid-template-columns: 12rem minmax(0, 1fr);
        font-size: 1.3rem;
    }

    .product-detail-actions__row {
        grid-template-columns: 12rem minmax(0, 1fr);
        gap: 1.2rem;
    }

    .product-detail-actions .quantity__box {
        width: 12rem;
    }

    .product-detail-actions .product-detail-quantity__button {
        width: 3.6rem;
    }

    .product-detail-actions .product-action-button {
        min-height: 4.8rem;
        padding: 0 0.8rem;
        font-size: 1.3rem;
    }

    .product-detail-wholesale {
        padding: 1.4rem;
    }

    .product-detail-wholesale__contacts {
        flex-direction: column;
        gap: 0.5rem;
    }
}

.product-breadcrumb {
    background: linear-gradient(90deg, #ecf9f1 0%, #f4fbf6 30%, #ffffff 75%, #ffffff 100%) !important;
    border-bottom: 1px solid #e7f2ec;
    margin-top: 0;
}

.product-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.9rem;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
    white-space: nowrap;
}

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

.product-breadcrumb__list::before {
    display: none;
    content: none;
}

.product-breadcrumb__item,
.product-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    color: #556960;
    font-size: 1.48rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-breadcrumb__link:hover {
    color: var(--df-primary, #008744);
}

.product-breadcrumb__current {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    color: #008744;
    font-size: 1.42rem;
    font-weight: 600;
    padding: 0;
    line-height: 1.35;
    letter-spacing: 0.1px;
}

.product-breadcrumb__home-icon {
    flex-shrink: 0;
    width: 1.6rem;
    margin-right: 0.7rem;
    color: var(--df-primary, #008744);
    font-size: 1.55rem;
    text-align: center;
    transition: color 0.2s ease;
}

.product-breadcrumb__link:hover .product-breadcrumb__home-icon {
    color: var(--df-primary-dark, #006f37);
}

.product-breadcrumb__separator {
    display: inline-flex;
    align-items: center;
    color: #94a3b8;
    font-size: 1.05rem;
}

.catalog-filter-sidebar {
    position: sticky;
    top: 11rem;
    padding: 2rem;
    border: 1px solid var(--df-gray-300);
    border-radius: 1rem;
    background: var(--df-white);
    box-shadow: 0 0.4rem 1.6rem rgba(25, 52, 39, 0.06);
}

.catalog-filter-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.8rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--df-gray-300);
}

.catalog-filter-sidebar__title {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    color: var(--df-dark);
    font-family: var(--font-lato);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.3;
}

.catalog-filter-sidebar__title i {
    color: var(--df-primary);
    font-size: 1.4rem;
}

.catalog-filter-sidebar__clear {
    color: var(--df-primary);
    font-size: 1.2rem;
    white-space: nowrap;
}

.catalog-filter-sidebar__controls {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.catalog-filter-sidebar__field {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.catalog-filter-sidebar__field label {
    margin: 0;
    color: var(--df-dark);
    font-size: 1.4rem;
    font-weight: 700;
}

.catalog-filter-sidebar__field .select {
    width: 100%;
}

.catalog-filter-sidebar__select,
.catalog-filter-sidebar__input {
    width: 100%;
    min-width: 0;
    height: 4.6rem;
    border: 1px solid var(--df-gray-300);
    border-radius: 0.6rem;
    background: var(--df-white);
    color: var(--df-dark);
    font-size: 1.4rem;
}

.catalog-filter-sidebar__select {
    padding: 0 3.6rem 0 1.2rem;
    cursor: pointer;
    appearance: none;
}

.catalog-filter-sidebar__input {
    padding: 0 1rem;
}

.catalog-filter-sidebar__select:focus,
.catalog-filter-sidebar__input:focus {
    border-color: var(--df-primary);
}

.catalog-filter-sidebar__price-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
}

.catalog-filter-sidebar__price-range span {
    color: var(--df-dark-muted);
}

.catalog-filter-sidebar__actions {
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--df-gray-300);
}

.catalog-filter-sidebar__submit {
    width: 100%;
    height: 4.6rem;
    line-height: 4.6rem;
}

.catalog-filter-sidebar__submit i {
    margin-right: 0.6rem;
}

.catalog-group-results {
    min-width: 0;
}

.catalog-group-results__toolbar {
    display: flex;
    align-items: center;
    min-height: 5.8rem;
    margin-bottom: 2rem;
    padding: 1.2rem 1.6rem;
    border: 1px solid var(--df-gray-300);
    border-radius: 1rem;
    background: var(--df-white);
}

.catalog-group-results__toolbar p {
    margin: 0;
    color: var(--df-dark-muted);
    font-size: 1.4rem;
}

.catalog-group-results__toolbar strong {
    color: var(--df-dark);
}

.catalog-group-results__toolbar label {
    color: var(--df-dark-muted);
    font-size: 1.4rem;
}

.catalog-group-results__sort {
    width: auto;
    min-width: 17rem;
    height: 4.2rem;
    border-color: var(--df-gray-300);
    border-radius: .8rem;
    color: var(--df-dark);
    font-size: 1.4rem;
}

.catalog-group-products__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    align-items: stretch;
}

.catalog-group-products__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

.catalog-group-products__item > .product__items {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

@media (max-width: 991px) {
    .promotion-detail-page .catalog-group-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .promotion-detail-page .catalog-group-products__item {
        justify-content: center;
    }
}

@media (max-width: 479px) {
    .promotion-detail-page .catalog-group-products__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .promotion-detail-page .catalog-group-products__item {
        justify-content: center;
    }

    .promotion-product-card {
        width: 100%;
        height: auto;
    }
}

.catalog-group-results__empty {
    margin: 5rem 0;
}

.catalog-group-results .pagination__area {
    margin-top: 4rem;
}

/* Home - latest news cards */
.home-latest-news .swiper-wrapper {
    align-items: stretch;
}

.home-latest-news .swiper-slide {
    display: flex;
    height: auto;
}

.home-latest-news .blog__items {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.home-latest-news .blog__items--thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--df-gray-100, #f5f7f6);
}

.home-latest-news .blog__items--link {
    width: 100%;
    height: 100%;
}

.home-latest-news .blog__items--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-latest-news .blog__items--content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.home-latest-news .blog__items--title {
    min-height: 5.2rem;
}

.home-latest-news .blog__items--desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.home-latest-news .blog__items--readmore {
    margin-top: auto;
}

@media (max-width: 767px) {
    .home-latest-news .blog__items--title {
        min-height: 0;
    }
}

.offCanvas__minicart {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1051;
}

.offCanvas__minicart_active::before {
    cursor: pointer;
}

.minicart__header,
.minicart__footer {
    flex: 0 0 auto;
}

.minicart__header {
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--border-color2);
}

.minicart__header--top {
    margin-bottom: 1rem;
}

.minicart__product {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-bottom: 0;
    padding-right: 0.4rem;
    overflow-y: auto;
}

.minicart__product--items:first-child {
    margin-top: 0;
    border-top: 0;
}

.minicart__product--items {
    padding-bottom: 2.2rem;
}

.minicart__thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.minicart__price .current__price {
    margin-right: 0.8rem;
    color: var(--secondary-color);
    font-weight: 700;
}

.minicart__price .old__price {
    font-size: 1.2rem;
}

.minicart__quantity .quantity__number {
    width: 3.8rem;
}

.minicart__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    color: var(--dofi-green-dark);
    text-align: center;
}

.minicart__empty--icon {
    margin-bottom: 1.2rem;
    color: var(--dofi-green-dark);
    font-size: 4rem;
}

.minicart__empty p {
    margin: 0;
    color: var(--dofi-green-dark);
    font-weight: 600;
}

.minicart__footer {
    padding-top: 1.2rem;
    background: var(--white-color);
}

.minicart__amount {
    border-bottom: 0;
}

.minicart__amount_list strong {
    color: var(--black-color);
}

.minicart__button {
    padding-top: 1.4rem;
}

.minicart__button--link {
    width: 100%;
    height: 4.4rem;
    margin-right: 0;
    line-height: 4.4rem;
    text-align: center;
}

.minicart__button--link.is-disabled {
    pointer-events: none;
    opacity: 0.55;
}

.dogifood-checkout {
    padding: 4rem 0 10rem;
    background: var(--df-white);
}

.dogifood-order-success {
    padding: 4rem 0 13rem;
    background: var(--df-white);
}

.dogifood-checkout__shell,
.dogifood-order-success__shell {
    overflow: hidden;
    border: 1px solid var(--df-gray-300);
    border-radius: 1.6rem;
    background: var(--df-white);
    box-shadow: 0 1.6rem 4rem rgba(26, 32, 44, 0.08);
}

.dogifood-checkout__grid,
.dogifood-order-success__shell {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(36rem, 1fr);
}

.dogifood-checkout__form-column,
.dogifood-order-success__content {
    min-width: 0;
    padding: 5rem 5.5rem;
}

.dogifood-checkout__heading,
.dogifood-order-success__hero {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-bottom: 3.2rem;
}

.dogifood-checkout__brand-mark {
    display: block;
    flex: 0 0 11rem;
    width: 11rem;
    height: auto;
    object-fit: contain;
}

.dogifood-checkout__eyebrow,
.dogifood-order-success__summary-heading > div > span {
    color: var(--df-primary);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.dogifood-checkout__heading h1,
.dogifood-order-success__hero h1 {
    margin: 0.3rem 0 0;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.25;
}

.dogifood-checkout__fields,
.dogifood-checkout__invoice-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem;
}

.dogifood-checkout__field--full {
    grid-column: 1 / -1;
}

.dogifood-checkout__field label {
    margin-bottom: 0.8rem;
    color: var(--df-dark);
    font-size: 1.5rem;
    font-weight: 600;
}

.dogifood-checkout__field label span {
    color: #75808f;
    font-size: 1.2rem;
    font-weight: 400;
}

.dogifood-checkout__field label .dogifood-checkout__required {
    color: #d92d20;
    font-size: 1.5rem;
    font-weight: 800;
}

.dogifood-checkout__field input,
.dogifood-checkout__field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #d8dee7;
    border-radius: 0.7rem;
    background: var(--df-white);
    color: var(--df-dark);
    font-size: 1.6rem;
}

.dogifood-checkout__field input {
    height: 5.4rem;
    padding: 0 1.7rem;
}

.dogifood-checkout__field textarea {
    min-height: 11rem;
    padding: 1.4rem 1.7rem;
    resize: vertical;
}

.dogifood-checkout__field input:focus,
.dogifood-checkout__field textarea:focus,
.dogifood-checkout__invoice summary:focus-visible,
.dogifood-checkout__back:focus-visible,
.dogifood-checkout__submit:focus-visible,
.dogifood-order-success__continue:focus-visible {
    outline: 3px solid rgba(0, 135, 68, 0.18);
    outline-offset: 2px;
    border-color: var(--df-primary);
}

.dogifood-checkout__validation-summary,
.dogifood-checkout__client-error {
    margin-bottom: 2rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid #f1b8b4;
    border-radius: 0.7rem;
    background: #fff5f4;
    color: #b42318;
    font-size: 1.4rem;
}

.dogifood-checkout__validation-summary:empty,
.dogifood-checkout__field-error:empty {
    display: none;
}

.dogifood-checkout__validation-summary ul {
    margin: 0;
    padding-left: 1.8rem;
}

.dogifood-checkout__validation-summary li {
    list-style: disc;
    line-height: 1.5;
}

.dogifood-checkout__field-error {
    display: block;
    margin-top: 0.5rem;
    color: #b42318;
    font-size: 1.25rem;
    line-height: 1.45;
}

.dogifood-checkout__invoice {
    margin-top: 2.4rem;
    border: 1px solid var(--df-gray-300);
    border-radius: 0.8rem;
    background: var(--bg-gray-color);
}

.dogifood-checkout__invoice summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 1.6rem;
    color: var(--df-dark);
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 700;
}

.dogifood-checkout__invoice[open] summary i {
    transform: rotate(180deg);
}

.dogifood-checkout__invoice-fields {
    padding: 0 1.6rem 1.6rem;
}

.dogifood-checkout__section,
.dogifood-checkout__security {
    margin-top: 3rem;
}

.dogifood-checkout__section-heading,
.dogifood-order-success__section-heading,
.dogifood-checkout__summary-heading,
.dogifood-order-success__summary-heading {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.dogifood-checkout__section-heading {
    margin-bottom: 1.5rem;
}

.dogifood-checkout__section-icon,
.dogifood-order-success__section-heading > span {
    display: inline-flex;
    flex: 0 0 3.8rem;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    background: var(--df-primary-light);
    color: var(--df-primary);
    font-size: 1.5rem;
}

.dogifood-checkout__section h2,
.dogifood-checkout__security h2,
.dogifood-order-success__customer h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
}

.dogifood-checkout__section-heading p {
    margin: 0.2rem 0 0;
    color: #667085;
    font-size: 1.3rem;
}

.dogifood-checkout__method {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    width: 100%;
    min-height: 10rem;
    padding: 1.6rem 4.8rem 1.6rem 1.6rem;
    border: 1px solid var(--df-gray-300);
    border-radius: 0.8rem;
    background: var(--df-white);
    cursor: pointer;
    transition: var(--df-transition);
}

.dogifood-checkout__methods {
    row-gap: 1.6rem;
}

.dogifood-checkout__method-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dogifood-checkout__method:hover,
.dogifood-checkout__method-input:checked + .dogifood-checkout__method {
    border-color: var(--df-primary);
    background: var(--df-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(0, 135, 68, 0.08);
}

.dogifood-checkout__method-input:focus-visible + .dogifood-checkout__method {
    outline: 2px solid var(--df-primary);
    outline-offset: 2px;
}

.dogifood-checkout__method-icon {
    display: inline-flex;
    flex: 0 0 4rem;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 0.8rem;
    background: var(--df-primary-light);
    color: var(--df-primary);
    font-size: 1.7rem;
}

.dogifood-checkout__method-check {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--df-gray-300);
    border-radius: 50%;
    background: var(--df-white);
    color: transparent;
    font-size: 1.1rem;
}

.dogifood-checkout__method-input:checked + .dogifood-checkout__method .dogifood-checkout__method-check {
    border-color: var(--df-primary);
    background: var(--df-primary);
    color: var(--df-white);
}

.dogifood-checkout__method strong,
.dogifood-checkout__method small {
    display: block;
}

.dogifood-checkout__method strong {
    font-size: 1.5rem;
}

.dogifood-checkout__method small {
    margin-top: 0.2rem;
    color: #596579;
    font-size: 1.25rem;
}

.dogifood-checkout__security h2 {
    margin-bottom: 1.2rem;
}

.dogifood-checkout__terms {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.4rem;
}

.dogifood-checkout__terms input {
    flex: 0 0 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
    accent-color: var(--df-primary);
}

.dogifood-checkout__terms label {
    margin: 0;
    color: #4f5b6b;
    font-size: 1.35rem;
    line-height: 1.6;
}

.dogifood-checkout__terms a,
.account-modal__terms a {
    color: var(--df-primary);
    font-weight: 700;
    text-decoration: none;
}

.dogifood-checkout__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3.2rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--df-gray-300);
}

.dogifood-checkout__back {
    color: var(--df-primary);
    font-size: 1.4rem;
    font-weight: 700;
}

.dogifood-checkout__back i {
    margin-right: 0.6rem;
    font-size: 1.1rem;
}

.dogifood-checkout__submit,
.dogifood-order-success__continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 5rem;
    padding: 0 2.5rem;
    border: 1px solid var(--df-primary);
    border-radius: 0.7rem;
    background: var(--df-primary);
    color: var(--df-white);
    font-size: 1.5rem;
    font-weight: 700;
}

.dogifood-checkout__submit:hover,
.dogifood-order-success__continue:hover {
    border-color: var(--df-primary-dark);
    background: var(--df-primary-dark);
    color: var(--df-white);
}

.dogifood-checkout__submit:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.dogifood-checkout__summary-column,
.dogifood-order-success__summary-column {
    min-width: 0;
    padding: 5rem 4.2rem;
    border-left: 1px solid var(--df-gray-300);
    background: var(--bg-gray-color);
}

.dogifood-checkout__summary,
.dogifood-order-success__summary {
    position: sticky;
    top: 2rem;
}

.dogifood-checkout__summary-heading,
.dogifood-order-success__summary-heading {
    justify-content: space-between;
    margin-bottom: 2.2rem;
}

.dogifood-checkout__summary-heading h2,
.dogifood-order-success__summary-heading h2 {
    margin-top: 0.3rem;
    font-size: 2.2rem;
    font-weight: 700;
}

.dogifood-checkout__summary-heading > i,
.dogifood-order-success__summary-heading > i {
    color: var(--df-primary);
    font-size: 2.2rem;
}

.dogifood-checkout__items,
.dogifood-order-success__items {
    display: grid;
    gap: 0;
}

.dogifood-checkout .checkout__product {
    display: grid;
    grid-template-columns: 6.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.2rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--df-gray-300);
}

.dogifood-checkout .checkout__product:last-child {
    border-bottom: 0;
}

.dogifood-checkout .checkout__product--image {
    width: 6.4rem;
    height: 6.4rem;
    border: 1px solid var(--df-gray-300);
    border-radius: 0.8rem;
    background: var(--df-white);
    object-fit: cover;
}

.dogifood-checkout .checkout__product--content {
    min-width: 0;
}

.dogifood-checkout .checkout__product--name,
.dogifood-checkout .checkout__product--meta {
    display: block;
}

.dogifood-checkout .checkout__product--name {
    overflow: hidden;
    color: var(--df-dark);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.45;
    text-overflow: ellipsis;
}

.dogifood-checkout .checkout__product--meta {
    margin-top: 0.3rem;
    color: #75808f;
    font-size: 1.2rem;
}

.dogifood-checkout .checkout__product--price {
    color: var(--df-dark);
    font-size: 1.35rem;
    font-weight: 700;
    white-space: nowrap;
}

.dogifood-checkout__empty {
    padding: 4rem 1rem;
    text-align: center;
}

.dogifood-checkout__empty i {
    color: #a3acb9;
    font-size: 3.6rem;
}

.dogifood-checkout__empty p {
    margin: 1rem 0 0.3rem;
    color: #667085;
}

.dogifood-checkout__empty a {
    color: var(--df-primary);
    font-weight: 700;
}

.dogifood-checkout__totals {
    margin-top: 2rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--df-gray-300);
}

.dogifood-checkout__totals > div,
.dogifood-order-success__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    color: #536072;
    font-size: 1.4rem;
}

.dogifood-checkout__totals strong {
    color: var(--df-dark);
}

.dogifood-checkout__total-row {
    margin-top: 1.6rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--df-gray-300);
}

.dogifood-checkout__total-row span,
.dogifood-checkout__total-row strong {
    color: var(--df-dark);
    font-size: 1.9rem;
    font-weight: 800;
}

.dogifood-order-success__confirmed-note {
    display: flex;
    gap: 0.8rem;
    margin-top: 1.8rem;
    padding: 1.2rem;
    border-radius: 0.7rem;
    background: var(--df-white);
    color: #667085;
    font-size: 1.2rem;
    line-height: 1.55;
}

.dogifood-order-success__confirmed-note i {
    margin-top: 0.3rem;
    color: var(--df-primary);
}

.dogifood-order-success__check {
    display: inline-flex;
    flex: 0 0 6.4rem;
    align-items: center;
    justify-content: center;
    width: 6.4rem;
    height: 6.4rem;
    border: 2px solid var(--df-primary);
    border-radius: 50%;
    color: var(--df-primary);
    font-size: 2.5rem;
}

.dogifood-order-success__order-code {
    color: #667085;
    font-size: 1.4rem;
}

.dogifood-order-success__order-code strong {
    color: var(--df-primary);
}

.dogifood-order-success__hero p {
    margin: 0.5rem 0 0;
    color: var(--df-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.dogifood-order-success__notice,
.dogifood-order-success__customer {
    border: 1px solid var(--df-gray-300);
    border-radius: 1rem;
    background: var(--df-white);
}

.dogifood-order-success__notice {
    display: flex;
    gap: 1.4rem;
    padding: 2.4rem;
    background: var(--df-primary-light);
}

.dogifood-order-success__notice > i {
    margin-top: 0.3rem;
    color: var(--df-primary);
    font-size: 2rem;
}

.dogifood-order-success__notice h2,
.dogifood-order-success__customer h2 {
    font-size: 2rem;
}

.dogifood-order-success__notice p {
    margin: 0.5rem 0 0;
    color: #536072;
    font-size: 1.5rem;
}

.dogifood-order-success__customer {
    margin-top: 2.4rem;
    padding: 2.6rem;
}

.dogifood-order-success__section-heading {
    margin-bottom: 2rem;
}

.dogifood-order-success__customer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem 2.4rem;
    margin: 0;
}

.dogifood-order-success__customer-grid div {
    min-width: 0;
}

.dogifood-order-success__customer-grid dt {
    margin-bottom: 0.4rem;
    color: #75808f;
    font-size: 1.35rem;
    font-weight: 600;
}

.dogifood-order-success__customer-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--df-dark);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.5;
}

.dogifood-order-success__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3rem;
}

.dogifood-order-success__item {
    display: grid;
    grid-template-columns: 3.8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--df-gray-300);
}

.dogifood-order-success__item-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    border: 1px solid var(--df-gray-300);
    border-radius: 0.7rem;
    background: var(--df-white);
    color: var(--df-primary);
    font-size: 1.3rem;
    font-weight: 800;
}

.dogifood-order-success__item-content {
    min-width: 0;
}

.dogifood-order-success__item h3 {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--df-dark);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.4;
}

.dogifood-order-success__item p {
    margin: 0.25rem 0 0;
    overflow-wrap: anywhere;
    color: #75808f;
    font-size: 1.3rem;
    line-height: 1.4;
}

.dogifood-order-success__item > strong {
    color: var(--df-dark);
    font-size: 1.5rem;
    white-space: nowrap;
}

.dogifood-order-success__confirmed-note {
    font-size: 1.35rem;
}

.dogifood-order-success__total {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--df-gray-300);
}

.dogifood-order-success__total span,
.dogifood-order-success__total strong {
    color: var(--df-dark);
    font-size: 2rem;
    font-weight: 800;
}

.dogifood-cart {
    padding: 4rem 0 14rem;
    background: var(--df-gray-100);
}

.dogifood-cart__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.8rem;
}

.dogifood-cart__heading span {
    color: var(--df-primary);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.dogifood-cart__heading h1 {
    margin-top: 0.4rem;
    font-size: 3rem;
}

.dogifood-cart__heading > a,
.dogifood-cart__actions a {
    color: var(--df-primary);
    font-weight: 700;
}

.dogifood-cart__empty {
    padding: 7rem 2rem;
    border: 1px solid var(--df-gray-300);
    border-radius: 1.2rem;
    background: var(--df-white);
    text-align: center;
    box-shadow: var(--df-shadow-sm);
}

.dogifood-cart__empty > i {
    color: var(--df-primary);
    font-size: 5rem;
}

.dogifood-cart__empty h2 {
    margin-top: 1.8rem;
}

.dogifood-cart__empty p {
    margin: 0.8rem 0 2rem;
    color: var(--df-dark-muted);
}

.dogifood-cart__empty-btn {
    background: var(--df-primary);
}

.dogifood-cart__table,
.dogifood-cart__summary {
    border: 1px solid var(--df-gray-300);
    background: var(--df-white);
    box-shadow: var(--df-shadow-sm);
}

.dogifood-cart__table {
    overflow: hidden;
    border-radius: 1rem;
}

.dogifood-cart .cart__table--inner {
    width: 100%;
}

.dogifood-cart .cart__table--header {
    background: var(--df-primary-light);
}

.dogifood-cart .cart__table--header__list,
.dogifood-cart .cart__table--body__list {
    border-color: var(--df-gray-300);
    vertical-align: middle;
}

.dogifood-cart .cart__table--header__list {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (min-width: 992px) {
    .dogifood-cart .cart__table--inner {
        table-layout: fixed;
    }

    .dogifood-cart__col-product {
        width: 52%;
    }

    .dogifood-cart__col-price,
    .dogifood-cart__col-quantity,
    .dogifood-cart__col-total {
        width: 16%;
    }

    .dogifood-cart .cart__table--header__list:first-child {
        padding-right: 1.6rem;
        padding-left: 1.6rem;
        text-align: center;
    }

    .dogifood-cart .cart__table--body__list:first-child {
        padding-left: 1.6rem;
    }

    .dogifood-cart .cart__table--header__list:nth-child(n + 2),
    .dogifood-cart .cart__table--body__list:nth-child(n + 2) {
        text-align: center;
    }

    .dogifood-cart .quantity__box {
        justify-content: center;
    }
}

.dogifood-cart .cart__remove--btn {
    display: inline-flex;
    flex: 0 0 3rem;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dogifood-cart .quantity__number {
    width: 4.6rem;
    min-width: 4.6rem;
    padding: 0 0.3rem;
    font-variant-numeric: tabular-nums;
}

.dogifood-cart .cart__thumbnail img {
    width: 8rem;
    height: 8rem;
    border: 1px solid var(--df-gray-300);
    object-fit: cover;
}

.dogifood-cart .cart__content {
    min-width: 0;
}

.dogifood-cart .cart__content--title {
    overflow-wrap: anywhere;
}

.dogifood-cart .cart__content--title a,
.dogifood-cart .cart__price {
    color: var(--df-dark);
    font-weight: 700;
}

.dogifood-cart .cart__content--variant {
    color: var(--df-dark-muted);
}

.dogifood-cart .cart__remove--btn {
    color: var(--df-secondary);
}

.dogifood-cart__actions {
    align-items: center;
    padding: 2rem;
}

.dogifood-cart__actions button {
    border: 0;
    background: transparent;
    color: var(--df-secondary);
    font-weight: 700;
}

.dogifood-cart__summary {
    position: sticky;
    top: 2rem;
    padding: 2.6rem;
}

.dogifood-cart__summary h2 {
    margin-bottom: 2rem;
    font-size: 2rem;
}

.dogifood-cart__summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.2rem 0;
    color: var(--df-dark-muted);
}

.dogifood-cart__summary-row--total {
    margin-top: 0.8rem;
    padding-top: 2rem;
    border-top: 1px solid var(--df-gray-300);
    color: var(--df-dark);
    font-size: 1.8rem;
}

.dogifood-cart__summary-row--total strong {
    color: var(--df-primary);
    font-size: 2rem;
}

.dogifood-cart__summary > p {
    margin: 1.6rem 0 2rem;
    color: var(--df-dark-muted);
    font-size: 1.25rem;
    line-height: 1.5;
}

.dogifood-cart__checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 4.8rem;
    padding: 0 2rem;
    border-radius: 0.7rem;
    background: var(--df-primary);
    color: var(--df-white);
    font-weight: 700;
}

.dogifood-cart__checkout:hover {
    background: var(--df-primary-dark);
    color: var(--df-white);
}

.dogifood-cart__checkout.is-disabled {
    pointer-events: none;
    opacity: 0.55;
}

.dogifood-cart__actions a:focus-visible,
.dogifood-cart__actions button:focus-visible,
.dogifood-cart__checkout:focus-visible,
.dogifood-cart__empty-btn:focus-visible {
    outline: 3px solid rgba(0, 135, 68, 0.2);
    outline-offset: 3px;
}

/* ==========================================================================
   404 Error Page Styles (Cat Lottie Theme)
   ========================================================================== */
.error__404--section {
    background: radial-gradient(circle at 50% 30%, rgba(0, 135, 68, 0.05) 0%, rgba(248, 250, 252, 0.6) 70%);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.error__404--card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 135, 68, 0.12);
    border-radius: 28px;
    padding: 3.5rem 2.5rem;
    box-shadow: 0 20px 50px rgba(0, 87, 44, 0.07), 0 1px 3px rgba(0, 0, 0, 0.02);
    position: relative;
}

.error__illustration--wrapper,
.error__cat--wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.error__404--svg {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.svg-digit {
    user-select: none;
}

.svg-anim-float {
    animation: svgFloatAnim 3.2s ease-in-out infinite alternate;
}

.svg-anim-float-slow {
    animation: svgFloatAnimSlow 4.5s ease-in-out infinite alternate;
}

.svg-anim-shadow {
    transform-origin: 270px 256px;
    animation: svgShadowScale 3.2s ease-in-out infinite alternate;
}

@keyframes svgFloatAnim {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-10px); }
}

@keyframes svgFloatAnimSlow {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-6px) rotate(2deg); }
}

@keyframes svgShadowScale {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(0.9); opacity: 0.4; }
}

.error__cat--glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0, 135, 68, 0.15) 0%, rgba(255, 193, 7, 0.08) 50%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    animation: catGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes catGlowPulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.error__cat--badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 135, 68, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--df-primary);
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
}

.badge__dot {
    width: 8px;
    height: 8px;
    background-color: var(--df-primary);
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(0, 135, 68, 0.2);
    animation: badgeDotPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes badgeDotPing {
    0% { box-shadow: 0 0 0 0 rgba(0, 135, 68, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(0, 135, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 135, 68, 0); }
}

.lottie-box {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.error__code--pill {
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    color: var(--df-white);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 6px 20px;
    border-radius: 50px;
    display: inline-block;
    box-shadow: 0 4px 14px rgba(0, 135, 68, 0.3);
}

.error__code--heading {
    font-size: 2.6rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 0.8rem;
    margin-bottom: 0.4rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.error__subtitle {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--df-dark);
    margin-bottom: 0.8rem;
}

.error__subtitle--large {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--df-dark);
    margin-top: 1.2rem;
    margin-bottom: 1rem;
    letter-spacing: -0.3px;
}

.error__title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--df-dark);
    margin-top: 1rem;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.error__desc {
    color: var(--df-dark-muted);
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.error__desc--large {
    color: var(--df-dark-muted);
    font-size: 1.4rem;
    max-width: 680px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

.error__404--fullscreen {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

.min-vh-80 {
    min-height: 75vh;
}

.dofi-search-form {
    max-width: 640px;
    margin: 0 auto;
}

.dofi-search-pill-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    padding: 5px 6px 5px 20px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dofi-search-pill-box:focus-within {
    border-color: var(--df-primary);
    box-shadow: 0 8px 30px rgba(0, 135, 68, 0.18);
}

.dofi-search-icon {
    color: #64748b;
    margin-right: 14px;
    flex-shrink: 0;
}

.dofi-search-input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.95rem;
    color: #1e293b;
    background: transparent;
}

.dofi-search-input::placeholder {
    color: #94a3b8;
}

.dofi-search-submit-btn {
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    color: #ffffff;
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.dofi-search-submit-btn:hover {
    background: var(--df-primary-dark);
    transform: translateX(2px);
    box-shadow: 0 4px 14px rgba(0, 135, 68, 0.35);
}

/* Action Buttons */
.error__action--btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.btn-404 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none !important;
}

.btn-404-primary {
    background: linear-gradient(135deg, var(--df-primary) 0%, var(--df-primary-dark) 100%);
    color: var(--df-white) !important;
    box-shadow: 0 6px 18px rgba(0, 135, 68, 0.25);
}

.btn-404-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 135, 68, 0.35);
    color: var(--df-white) !important;
}

.btn-404-secondary {
    background: linear-gradient(135deg, #ff6f00 0%, #e65100 100%);
    color: var(--df-white) !important;
    box-shadow: 0 6px 18px rgba(255, 111, 0, 0.25);
}

.btn-404-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 111, 0, 0.35);
    color: var(--df-white) !important;
}

.btn-404-outline {
    background: transparent;
    color: var(--df-primary) !important;
    border: 2px solid var(--df-primary);
}

.btn-404-outline:hover {
    background: var(--df-primary-light);
    transform: translateY(-3px);
    color: var(--df-primary-dark) !important;
}

/* Quicklinks Section */
.error__quicklinks--section {
    border-top: 1px solid var(--df-gray-300);
    padding-top: 2.2rem;
}

.quicklinks__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--df-dark);
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quicklink__card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--df-gray-100);
    border: 1px solid var(--df-gray-300);
    border-radius: 16px;
    padding: 14px 16px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    height: 100%;
}

.quicklink__card:hover {
    background: var(--df-white);
    border-color: var(--df-primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 135, 68, 0.12);
}

.quicklink__icon {
    font-size: 1.8rem;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--df-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.quicklink__card:hover .quicklink__icon {
    background: var(--df-primary-light);
}

.quicklink__info h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--df-dark);
    margin-bottom: 2px;
    transition: color 0.2s ease;
}

.quicklink__card:hover .quicklink__info h5 {
    color: var(--df-primary);
}

.quicklink__info span {
    font-size: 0.8rem;
    color: var(--df-dark-muted);
}

@media (max-width: 767px) {
    .error__404--card {
        padding: 2rem 1.2rem;
        border-radius: 20px;
    }
    .error__title {
        font-size: 1.6rem;
    }
    .error__desc {
        font-size: 0.95rem;
    }
    .error__action--btns {
        flex-direction: column;
        width: 100%;
    }
    .btn-404 {
        width: 100%;
    }
}

/* Restored feature styles after resolving the SVN conflict. */
.home-content-section {
    padding: 7rem 0;
}

.home-content-section + .home-content-section {
    border-top: 1px solid #edf1ee;
}

.dogifood-order-success__item-image {
    width: 3.8rem;
    height: 3.8rem;
    border: 1px solid var(--df-gray-300);
    border-radius: 0.6rem;
    object-fit: cover;
    background: var(--df-white);
}

.home-buffet-services {
    background: #ffffff;
    padding: 60px 0 70px;
}

.home-buffet-services__swiper {
    padding: 0 !important;
    overflow: hidden !important;
    touch-action: pan-y;
}

.home-buffet-services__swiper img,
.home-buffet-services__swiper a {
    -webkit-user-drag: none;
    user-select: none;
}

.home-buffet-services__swiper .swiper-wrapper {
    align-items: stretch;
}

.home-buffet-services__swiper .swiper-slide {
    height: auto;
    display: flex;
}

.home-buffet-services__card {
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.home-buffet-services__thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f1f5f9;
}

.home-buffet-services__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-buffet-services__card:hover .home-buffet-services__image {
    transform: scale(1.05);
}

.home-buffet-services__card:hover {
    background: #ffffff !important;
    border-color: #008744 !important;
    box-shadow: 0 10px 28px rgba(0, 135, 68, 0.12) !important;
    transform: translateY(-4px);
}

.home-buffet-services .product__items--content {
    flex: 1;
    min-height: 0;
    padding: 28px 18px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

.home-buffet-services .product__items--content__title {
    min-height: 0;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    margin-bottom: 8px !important;
    line-height: 1.35;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
}

.home-buffet-services .product__items--content__title a {
    color: #1a202c !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: color 0.25s ease;
}

/* Guarantee title text is strictly visible and turns green on hover */
.home-buffet-services__card:hover .product__items--content__title,
.home-buffet-services__card:hover .product__items--content__title a {
    opacity: 1 !important;
    visibility: visible !important;
    color: #008744 !important;
}

.home-buffet-services .product__categories--content__subtitle {
    min-height: 0;
    font-size: 1.35rem !important;
    color: #64748b !important;
    line-height: 1.5;
    margin: 0;
    opacity: 1 !important;
    visibility: visible !important;
    transition: color 0.25s ease;
}

.home-buffet-services__card:hover .product__categories--content__subtitle {
    color: #334155 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.home-buffet-services__action-box {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-buffet-services__price {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #008744 !important;
    margin: 10px 0 !important;
    text-transform: uppercase !important;
    line-height: 1.3;
}

.home-buffet-services__readmore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    width: auto;
    min-height: 38px;
    margin-top: 0 !important;
    padding: 6px 22px !important;
    border: 1px solid #008744 !important;
    border-radius: 30px !important;
    background: #ffffff !important;
    color: #008744 !important;
    font-size: 1.35rem !important;
    font-weight: 400 !important;
    line-height: 1.5;
    white-space: nowrap !important;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.home-buffet-services__readmore svg,
.home-buffet-services__readmore .blog__items--readmore__icon {
    width: 7px;
    height: 7px;
    transition: transform 0.25s ease;
}

.home-buffet-services__card:hover .home-buffet-services__readmore,
.home-buffet-services__readmore:hover,
.home-buffet-services__readmore:focus-visible {
    padding: 6px 22px !important;
    background: #008744 !important;
    color: #ffffff !important;
    border-color: #008744 !important;
    box-shadow: 0 6px 16px rgba(0, 135, 68, 0.28) !important;
    transform: translateY(-2px);
}


.home-buffet-services__card:hover .home-buffet-services__readmore svg,
.home-buffet-services__readmore:hover svg {
    transform: translateX(4px);
}






.home-products-section {
    background: #f7faf8;
}

.home-promotion-section {
    padding-top: 3.6rem !important;
    padding-bottom: 4rem !important;
}

.home-promotion-period-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(245, 158, 11, .5);
    color: #92400e;
    padding: .8rem 1.5rem .8rem 1rem;
    border-radius: 1.4rem;
    margin-top: 1.8rem;
    box-shadow: 0 8px 22px rgba(146, 64, 14, .09);
    backdrop-filter: blur(8px);
}

.home-promotion-period-badge__icon {
    flex: 0 0 auto;
    width: 3.4rem;
    height: 3.4rem;
    padding: .65rem;
    border-radius: 1rem;
    background: linear-gradient(145deg, #fff1cf, #ffe0a0);
    color: #c96700;
    fill: rgba(255, 255, 255, .65);
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: home-promotion-clock-glow 2.4s ease-in-out infinite;
}

.home-promotion-period-badge {
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.home-promotion-period-badge:hover {
    border-color: rgba(245, 158, 11, .8);
    box-shadow: 0 1rem 2.6rem rgba(146, 64, 14, .14);
    transform: translateY(-.2rem);
}

@keyframes home-promotion-clock-glow {
    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 .55rem rgba(245, 158, 11, .42));
        transform: scale(1.06);
    }
}

.home-promotion-period-badge__content {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    line-height: 1.25;
}

.home-promotion-period-badge__content small {
    color: #a16207;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.home-promotion-period-badge__content strong {
    color: #78350f;
    font-size: 1.25rem;
    font-weight: 700;
}

.home-slider-nav-shell {
    position: relative;
    padding: 0 2.6rem;
}

.home-slider-nav-shell > .swiper-button-next,
.home-slider-nav-shell > .swiper-button-prev {
    top: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    margin-top: 0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #008744 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #e2e8f0 !important;
    opacity: .92 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(-50%);
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, opacity .25s ease, transform .25s ease !important;
    z-index: 30 !important;
}

.home-slider-nav-shell > .swiper-button-next::after,
.home-slider-nav-shell > .swiper-button-prev::after {
    color: currentColor !important;
    font-size: 1.6rem !important;
    font-weight: 800;
}

.home-slider-nav-shell:hover > .swiper-button-next,
.home-slider-nav-shell:hover > .swiper-button-prev {
    opacity: 1 !important;
}

.home-slider-nav-shell > .swiper-button-next:focus-visible,
.home-slider-nav-shell > .swiper-button-prev:focus-visible,
.home-slider-nav-shell > .swiper-button-next:hover,
.home-slider-nav-shell > .swiper-button-prev:hover {
    background: #008744 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(0, 135, 68, .28) !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.08);
}

.home-slider-nav-shell > .swiper-button-prev {
    left: 0 !important;
}

.home-slider-nav-shell > .swiper-button-next {
    right: 0 !important;
}

.home-slider-nav-shell--single > .swiper-button-next,
.home-slider-nav-shell--single > .swiper-button-prev {
    display: none !important;
}

.home-product-slider-pagination {
    display: none;
}

.home-product-slider-nav-shell > .swiper-button-next,
.home-product-slider-nav-shell > .swiper-button-prev,
.home-blog-slider-nav-shell > .swiper-button-next,
.home-blog-slider-nav-shell > .swiper-button-prev {
    border: 1px solid #008744 !important;
    background: #ffffff !important;
    color: #008744 !important;
    opacity: 1 !important;
}

.home-product-slider-nav-shell > .swiper-button-next,
.home-product-slider-nav-shell > .swiper-button-prev {
    top: var(--product-nav-center-y, 50%) !important;
}

.home-product-slider-nav-shell > .swiper-button-prev,
.home-blog-slider-nav-shell > .swiper-button-prev {
    left: -2.4rem !important;
}

.home-product-slider-nav-shell > .swiper-button-next,
.home-blog-slider-nav-shell > .swiper-button-next {
    right: -2.4rem !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .home-product-slider-nav-shell,
    .home-blog-slider-nav-shell {
        padding-right: 5.6rem;
        padding-left: 5.6rem;
    }

    .home-product-slider-nav-shell > .swiper-button-prev,
    .home-blog-slider-nav-shell > .swiper-button-prev {
        left: .6rem !important;
    }

    .home-product-slider-nav-shell > .swiper-button-next,
    .home-blog-slider-nav-shell > .swiper-button-next {
        right: .6rem !important;
    }

    .home-promotion-pages-wrapper > .swiper-button-prev {
        left: max(.8rem, calc((100% - var(--promotion-grid-width)) / 4 - var(--promotion-nav-size) / 2)) !important;
    }

    .home-promotion-pages-wrapper > .swiper-button-next {
        right: max(.8rem, calc((100% - var(--promotion-grid-width)) / 4 - var(--promotion-nav-size) / 2)) !important;
    }
}

@media (min-width: 1200px) {
    .home-product-slider-nav-shell,
    .home-blog-slider-nav-shell {
        padding-right: 5.6rem;
        padding-left: 5.6rem;
    }

    .home-product-slider-nav-shell > .swiper-button-prev {
        left: .6rem !important;
    }

    .home-product-slider-nav-shell > .swiper-button-next {
        right: .6rem !important;
    }

    .home-blog-slider-nav-shell > .swiper-button-prev {
        left: -2.4rem !important;
    }

    .home-blog-slider-nav-shell > .swiper-button-next {
        right: -2.4rem !important;
    }
}

/* On wide screens, centre the product arrows in the free space outside the cards. */
@media (min-width: 1600px) {
    .home-product-slider-nav-shell > .swiper-button-prev,
    .home-blog-slider-nav-shell > .swiper-button-prev {
        left: -3.8rem !important;
    }

    .home-product-slider-nav-shell > .swiper-button-next,
    .home-blog-slider-nav-shell > .swiper-button-next {
        right: -3.8rem !important;
    }
}

.home-product-slider-nav-shell > .swiper-button-next:hover,
.home-product-slider-nav-shell > .swiper-button-next:focus-visible,
.home-product-slider-nav-shell > .swiper-button-prev:hover,
.home-product-slider-nav-shell > .swiper-button-prev:focus-visible,
.home-blog-slider-nav-shell > .swiper-button-next:hover,
.home-blog-slider-nav-shell > .swiper-button-next:focus-visible,
.home-blog-slider-nav-shell > .swiper-button-prev:hover,
.home-blog-slider-nav-shell > .swiper-button-prev:focus-visible {
    border-color: #008744 !important;
    background: #008744 !important;
    color: #ffffff !important;
}

@media (max-width: 575px) {
    .home-slider-nav-shell {
        padding: 0 2rem;
    }

    .home-slider-nav-shell > .swiper-button-next,
    .home-slider-nav-shell > .swiper-button-prev {
        width: 36px !important;
        height: 36px !important;
    }

    .home-product-slider-nav-shell > .swiper-button-prev,
    .home-blog-slider-nav-shell > .swiper-button-prev {
        left: -1rem !important;
    }

    .home-product-slider-nav-shell > .swiper-button-next,
    .home-blog-slider-nav-shell > .swiper-button-next {
        right: -1rem !important;
    }
}

@media (max-width: 767px) {
    .home-product-slider-nav-shell,
    .home-blog-slider-nav-shell {
        padding-right: 0;
        padding-left: 0;
    }

    .home-product-slider-nav-shell > .swiper-button-next,
    .home-product-slider-nav-shell > .swiper-button-prev,
    .home-blog-slider-nav-shell > .swiper-button-next,
    .home-blog-slider-nav-shell > .swiper-button-prev {
        display: none !important;
    }

    .home-product-slider-pagination {
        position: static !important;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 1.2rem;
        margin-top: 1.5rem;
        transform: none !important;
    }

    .home-product-slider-pagination .swiper-pagination-bullet {
        width: .8rem;
        height: .8rem;
        margin: 0 .4rem !important;
        background: #a9b9b0;
        opacity: .65;
    }

    .home-product-slider-pagination .swiper-pagination-bullet-active {
        width: 1rem;
        height: 1rem;
        background: var(--df-primary);
        opacity: 1;
    }

    .home-buffet-services__swiper {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* Keep home sliders at their final card size before Swiper finishes initializing. */
.home-featured-products--activation,
.home-today-products--activation,
.home-buffet-services__swiper {
    --home-preinit-columns: 5;
    --home-preinit-column-width: 20%;
    --home-preinit-gap: 2.4rem;
}

.home-buffet-services__swiper {
    --home-preinit-columns: 5;
    --home-preinit-column-width: 20%;
}

.home-blog-posts--activation {
    --home-preinit-columns: 3;
    --home-preinit-column-width: 33.3333%;
    --home-preinit-gap: 3rem;
}

.home-featured-products--activation:not(.swiper-initialized),
.home-today-products--activation:not(.swiper-initialized),
.home-buffet-services__swiper:not(.swiper-initialized),
.home-blog-posts--activation:not(.swiper-initialized) {
    overflow: hidden;
}

.home-featured-products--activation:not(.swiper-initialized) > .swiper-wrapper,
.home-today-products--activation:not(.swiper-initialized) > .swiper-wrapper,
.home-buffet-services__swiper:not(.swiper-initialized) > .swiper-wrapper,
.home-blog-posts--activation:not(.swiper-initialized) > .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(var(--home-preinit-columns), minmax(0, 1fr));
    grid-template-rows: minmax(0, auto);
    grid-auto-flow: column;
    grid-auto-columns: var(--home-preinit-column-width);
    gap: var(--home-preinit-gap);
    transform: none !important;
}

.home-featured-products--activation:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide,
.home-today-products--activation:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide,
.home-buffet-services__swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide,
.home-blog-posts--activation:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
    width: auto !important;
    margin: 0 !important;
}

@media (max-width: 1599px) {
    .home-today-products--activation {
        --home-preinit-columns: 4;
        --home-preinit-column-width: 25%;
    }
}

@media (max-width: 1199px) {
    .home-featured-products--activation {
        --home-preinit-columns: 4;
        --home-preinit-column-width: 25%;
    }

    .home-buffet-services__swiper {
        --home-preinit-columns: 4;
        --home-preinit-column-width: 25%;
    }

    .home-today-products--activation {
        --home-preinit-columns: 3;
        --home-preinit-column-width: 33.3333%;
    }

    .home-blog-posts--activation {
        --home-preinit-columns: 2;
        --home-preinit-column-width: 50%;
        --home-preinit-gap: 2rem;
    }
}

@media (max-width: 991px) {
    .home-featured-products--activation,
    .home-buffet-services__swiper {
        --home-preinit-columns: 3;
        --home-preinit-column-width: 33.3333%;
    }

    .home-today-products--activation {
        --home-preinit-columns: 2;
        --home-preinit-column-width: 50%;
        --home-preinit-gap: 1.8rem;
    }
}

@media (max-width: 767px) {
    .home-featured-products--activation,
    .home-buffet-services__swiper {
        --home-preinit-columns: 2;
        --home-preinit-column-width: 50%;
        --home-preinit-gap: 1.6rem;
    }

    .home-today-products--activation {
        --home-preinit-columns: 1;
        --home-preinit-column-width: 100%;
    }
}

@media (max-width: 575px) {
    .home-blog-posts--activation {
        --home-preinit-columns: 1;
        --home-preinit-column-width: 100%;
    }
}

@media (max-width: 479px) {
    .home-featured-products--activation {
        --home-preinit-columns: 1;
        --home-preinit-column-width: 100%;
    }
}

@media (max-width: 479px) {
    .home-buffet-services__swiper {
        --home-preinit-columns: 1;
        --home-preinit-column-width: 100%;
        --home-preinit-gap: 1.4rem;
    }

    .home-buffet-services .home-buffet-services__product-tile {
        width: 100%;
        aspect-ratio: 1 / 1;
    }
}

.home-promotion-feature__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1.4rem;
    color: #b45309;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.home-promotion-feature__eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .9rem;
    background: linear-gradient(145deg, #ffb000, #ef5a2f);
    color: #fff;
    box-shadow: 0 .5rem 1.2rem rgba(217, 119, 6, .2);
}

.home-promotion-feature__title {
    position: relative;
    margin: 0;
    padding-bottom: 1.6rem;
    background: linear-gradient(120deg, #102a22 0%, #075f3a 48%, #d97706 76%, #e43c32 100%);
    background-clip: text;
    color: #12382c;
    font-size: clamp(3.4rem, 3.2vw, 4.8rem);
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -.04em;
    text-wrap: balance;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-promotion-feature__title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 5.6rem;
    height: .4rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
    content: "";
}

.home-promotion-feature__description {
    display: -webkit-box;
    max-width: 35rem;
    margin: 1.6rem 0 0;
    overflow: hidden;
    color: #59645e;
    font-size: 1.45rem;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.home-promotion-feature__link {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-height: 4.2rem;
    margin-top: 2rem;
    padding: .8rem 1.8rem;
    border: 1px solid var(--df-primary);
    border-radius: 2.4rem;
    background: var(--df-primary);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 400;
}

.home-promotion-feature__link svg {
    width: 1.6rem;
    height: 1.6rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-promotion-feature__link:hover,
.home-promotion-feature__link:focus-visible {
    background: #fff;
    color: var(--df-primary);
}

.home-products-section__heading {
    display: flex;
    flex-direction: column;
    margin-bottom: 3.6rem;
}

.home-products-section__heading > .text-center {
    min-width: 0;
    padding: 0;
}

.home-products-section__all {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: auto;
    min-width: 0;
    height: auto;
    margin-top: 1.4rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--df-primary);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.5;
    white-space: nowrap;
}

.home-products-section__all-icon {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.home-products-section__all:hover,
.home-products-section__all:focus-visible {
    background: transparent;
    color: var(--df-primary-dark);
}

.home-products-section__all:hover .home-products-section__all-icon,
.home-products-section__all:focus-visible .home-products-section__all-icon {
    transform: translateX(.25rem);
}

.home-products-section .swiper-wrapper,
.home-showcase-products .swiper-wrapper,
.home-today-delicious-products .swiper-wrapper {
    align-items: stretch;
}

.home-products-section .swiper-slide,
.home-showcase-products .swiper-slide,
.home-today-delicious-products .swiper-slide {
    display: flex;
    height: auto;
}

.home-products-section .product__items,
.home-showcase-products .product__items,
.home-today-delicious-products .product__items {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid #dfe9e3;
    border-radius: 1.2rem;
    background: #fff;
    box-shadow: 0 .4rem 1.6rem rgba(14, 76, 43, .06);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.home-products-section .product__items:hover,
.home-showcase-products .product__items:hover,
.home-today-delicious-products .product__items:hover {
    border-color: rgba(0, 152, 74, .45);
    box-shadow: 0 .8rem 2.2rem rgba(14, 76, 43, .11);
}

.home-products-section .product__items--thumbnail,
.home-showcase-products .product__items--thumbnail,
.home-today-delicious-products .product__items--thumbnail {
    aspect-ratio: 1 / 1;
    padding: 2px;
    overflow: hidden;
    background: #fff;
}

.home-product__discount-badge {
    position: absolute;
    z-index: 3;
    top: 1.2rem;
    left: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    min-height: 3.4rem;
    padding: .5rem .9rem;
    border-radius: .6rem;
    background: #fee2e2;
    color: #e11d2e;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.home-products-section .product__items--link,
.home-showcase-products .product__items--link,
.home-today-delicious-products .product__items--link {
    display: block;
    width: 100%;
    height: 100%;
}

.home-products-section .product__items--img,
.home-showcase-products .product__items--img,
.home-today-delicious-products .product__items--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-products-section .product__items--action,
.home-showcase-products .product__items--action,
.home-today-delicious-products .product__items--action {
    top: 1.6rem;
    right: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
}

.home-products-section .product__items:hover .product__items--action,
.home-showcase-products .product__items:hover .product__items--action,
.home-today-delicious-products .product__items:hover .product__items--action {
    right: 1.6rem;
}

.home-products-section .product__items--action__list,
.home-showcase-products .product__items--action__list,
.home-today-delicious-products .product__items--action__list {
    margin: 0;
    line-height: 1;
}

.home-products-section .product__items--action__btn,
.home-showcase-products .product__items--action__btn,
.home-today-delicious-products .product__items--action__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem !important;
    min-width: 3.5rem !important;
    height: 3.5rem !important;
    padding: .7rem !important;
    line-height: 1 !important;
}

.home-products-section .product__items--action__btn--svg,
.home-showcase-products .product__items--action__btn--svg,
.home-today-delicious-products .product__items--action__btn--svg {
    display: block;
    width: 2rem !important;
    height: 2rem !important;
    margin: 0;
}

.home-products-section .product__items--content,
.home-showcase-products .product__items--content,
.home-today-delicious-products .product__items--content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.4rem 1.5rem 1.6rem;
}

.home-products-section .product__items--content__title,
.home-showcase-products .product__items--content__title,
.home-today-delicious-products .product__items--content__title {
    display: -webkit-box;
    min-height: 5.4rem;
    margin: 0 0 0.8rem;
    overflow: hidden;
    line-height: 2.4rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-products-section .product__items--content__title,
.home-showcase-products .product__items--content__title,
.home-today-delicious-products .product__items--content__title {
    position: static;
    opacity: 1;
    visibility: visible;
}

.home-products-section .home-product-title-swap,
.home-showcase-products .home-product-title-swap,
.home-today-delicious-products .home-product-title-swap {
    display: grid;
    height: 4.8rem;
    margin-bottom: 0.3rem;
    place-items: center;
}

.home-products-section .home-product-title-swap > .product__items--content__title,
.home-products-section .home-product-title-swap > .add__to--cart__btn,
.home-showcase-products .home-product-title-swap > .product__items--content__title,
.home-showcase-products .home-product-title-swap > .add__to--cart__btn,
.home-today-delicious-products .home-product-title-swap > .product__items--content__title,
.home-today-delicious-products .home-product-title-swap > .add__to--cart__btn {
    grid-area: 1 / 1;
    width: 100%;
    min-height: 0;
    margin: 0;
}

.home-products-section .product__items:hover .product__items--content__title,
.home-showcase-products .product__items:hover .product__items--content__title,
.home-today-delicious-products .product__items:hover .product__items--content__title {
    opacity: 0;
    visibility: hidden;
}

.home-products-section .product__items--price,
.home-showcase-products .product__items--price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    min-height: 2.7rem;
    margin: 0;
}

.home-today-delicious-products .product__items--content__title {
    min-height: 0;
    margin-bottom: 0;
}

.home-products-section button.add__to--cart__btn,
.home-showcase-products button.add__to--cart__btn,
.home-today-delicious-products button.add__to--cart__btn {
    position: static;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.6rem);
}

.home-products-section .product__items:hover button.add__to--cart__btn,
.home-showcase-products .product__items:hover button.add__to--cart__btn,
.home-today-delicious-products .product__items:hover button.add__to--cart__btn,
.home-products-section button.add__to--cart__btn:focus-visible,
.home-showcase-products button.add__to--cart__btn:focus-visible,
.home-today-delicious-products button.add__to--cart__btn:focus-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.home-today-delicious-products {
    background: #fff;
}

.home-today-products--activation.swiper-locked .swiper-wrapper {
    justify-content: center;
}

.home-today-products--activation .swiper-wrapper {
    transition-timing-function: ease-in-out;
}

.home-latest-news .swiper-wrapper {
    align-items: stretch;
}

.home-latest-news .swiper-slide {
    display: flex;
    height: auto;
}

.home-latest-news .blog__items {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.home-latest-news .blog__items--thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f5f7f6;
}

.home-latest-news .blog__items--link {
    width: 100%;
    height: 100%;
}

.home-latest-news .blog__items--img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-latest-news .blog__items--content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.home-latest-news .blog__items--title {
    display: -webkit-box;
    height: 5.4rem;
    overflow: hidden;
    line-height: 2.7rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-latest-news .blog__items--desc {
    display: -webkit-box;
    height: auto;
    margin-bottom: 1.4rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3 !important;
}

.home-latest-news .blog__items--readmore {
    margin-top: auto;
}

.media-gallery__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.media-gallery .portfolio__items--thumbnail,
.media-gallery .portfolio__items--thumbnail__link {
    width: 100%;
    aspect-ratio: 4 / 3;
}

.media-gallery .portfolio__items--thumbnail__link {
    height: 100%;
}

.media-gallery .portfolio__items--thumbnail__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-gallery .portfolio__items--content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.2rem 1rem 0;
}

.media-gallery .portfolio__items--title {
    display: -webkit-box;
    height: 5.4rem;
    margin: 0;
    overflow: hidden;
    font-weight: 700;
    line-height: 2.7rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.media-gallery .portfolio__items--desc {
    display: -webkit-box;
    height: 8.1rem;
    margin: .8rem 0 0;
    overflow: hidden;
    line-height: 2.7rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.hero__api-banner,
.hero__api-banner picture {
    display: block;
    width: 100%;
}

.hero__api-banner {
    overflow: hidden;
    background: var(--bg-gray-color);
}

.hero__api-banner--image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 767.98px) {
    .hero__slider--section {
        min-height: unset !important;
        height: auto !important;
    }
    .hero__api-banner,
    .hero__api-banner picture {
        width: 100% !important;
        height: auto !important;
    }
    .hero__api-banner--image {
        min-height: unset !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

.hero__slider--section .slider__pagination {
    bottom: 1.8rem;
}

.cart-remove-confirm {
    width: min(52rem, calc(100vw - 3.2rem));
    padding: 2.8rem 3rem 2.6rem;
    border-radius: 1.2rem;
    font-size: 1.6rem;
}

/* Giữ hộp xác nhận xóa nằm trên mini-cart và các thanh nổi. */
body > .swal2-container {
    z-index: 200000 !important;
}

body.swal2-shown {
    overflow: hidden !important;
}

.cart-remove-confirm .swal2-icon {
    margin: 1.5rem auto 1rem;
}

.cart-remove-confirm .swal2-title {
    padding: 0;
    font-size: 2.6rem;
}

.cart-remove-confirm .swal2-html-container {
    margin: 1.2rem 0 0;
    font-size: 1.55rem;
    line-height: 1.5;
}

.cart-remove-confirm .swal2-actions {
    margin: 2rem auto 0;
}

.cart-remove-confirm .swal2-styled {
    min-width: 8.5rem;
    padding: 1rem 1.8rem;
    font-size: 1.45rem;
}

.account-modal {
    display: none;
    padding: 8rem 0 2rem;
    background: transparent;
    cursor: default;
    visibility: visible;
    opacity: 1;
    z-index: 1060;
}

.account-modal.modal-dialog-centered,
.account-modal .modal-dialog-centered {
    min-height: calc(100vh - 10.5rem);
    align-items: center;
}

.account-modal .modal-dialog {
    width: calc(100% - 3.2rem);
    max-width: 52rem;
    max-height: calc(100vh - 10.5rem);
    margin: 0 auto;
}

.account-modal.account-modal--register .modal-dialog {
    max-width: 80rem;
}

.account-modal .modal-content {
    position: relative;
    max-height: calc(100vh - 10.5rem);
    overflow: hidden;
    border: 1px solid var(--df-gray-300);
    border-radius: 1.4rem;
    background: var(--df-white);
    box-shadow: var(--df-shadow-lg);
}

.account-modal .modal-body {
    padding: 2.2rem 3.6rem;
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
}

.account-modal__close {
    position: absolute;
    z-index: 2;
    top: 1.4rem;
    right: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--df-gray-100);
    color: var(--df-dark-muted);
    font-size: 2.4rem;
    line-height: 1;
}

.account-modal__close:hover,
.account-modal__close:focus-visible {
    background: var(--df-primary-light);
    color: var(--df-primary-dark);
}

.account-modal__header {
    margin-bottom: 1.4rem;
    padding-right: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--df-gray-200);
}

.account-modal__title {
    margin: 0 0 0.8rem;
    color: var(--df-dark);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.25;
}

.account-modal__subtitle {
    margin: 0;
    color: var(--df-dark-muted);
    font-size: 1.45rem;
    line-height: 1.6;
}

.account-modal__field {
    margin-bottom: 2rem;
}

.account-modal__form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 2rem;
}

.account-modal__field--full {
    grid-column: 1 / -1;
}

.account-modal__field label {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--df-dark);
    font-size: 1.45rem;
    margin-bottom: 0.3rem;
    color: var(--df-dark);
    font-size: 1.35rem;
    font-weight: 500;
}

.account-modal__field input,
.account-modal__field select,
.account-modal__field textarea {
    width: 100%;
    border: 1px solid var(--df-gray-300);
    border-radius: 0.6rem;
    background: var(--df-white);
    color: var(--df-dark);
    font-size: 1.35rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-modal__field input,
.account-modal__field select {
    height: 3.8rem;
    padding: 0 1.2rem;
}

.account-modal__field textarea {
    min-height: 5.4rem;
    padding: 0.7rem 1.2rem;
    resize: vertical;
}

.account-modal__field input::placeholder,
.account-modal__field textarea::placeholder {
    color: #9aa4b2;
}

.account-modal__field input:focus,
.account-modal__field select:focus,
.account-modal__field textarea:focus {
    border-color: var(--df-primary);
    box-shadow: 0 0 0 0.3rem rgba(0, 135, 68, 0.12);
    outline: 0;
}

.account-modal__field select:disabled {
    background: var(--df-gray-100);
    cursor: not-allowed;
    opacity: 0.75;
}

.account-modal__options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin: 0.4rem 0 1.4rem;
}

.account-modal__checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-height: 2rem;
    margin: 0;
    color: var(--df-dark-muted);
    font-size: 1.35rem;
    line-height: 1.4;
    cursor: pointer;
}

.account-modal__checkbox input {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.1rem;
    accent-color: var(--df-primary);
}

.account-modal__switch,
.account-modal__return button {
    min-height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--df-primary);
    font-size: 1.35rem;
    font-weight: 600;
}

.account-modal__switch:hover,
.account-modal__switch:focus-visible,
.account-modal__return button:hover,
.account-modal__return button:focus-visible {
    color: var(--df-primary-dark);
    text-decoration: underline;
}

.account-modal__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 4rem;
    padding: 0.7rem 1.6rem;
    border: 1px solid var(--df-primary);
    border-radius: 0.6rem;
    background: var(--df-primary);
    color: var(--df-white);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.account-modal__submit:hover,
.account-modal__submit:focus-visible {
    border-color: var(--df-primary-dark);
    background: var(--df-primary-dark);
    color: var(--df-white);
}

.account-modal__submit:disabled {
    cursor: wait;
    opacity: 0.7;
}

.account-modal__submit--outline {
    background: var(--df-white);
    color: var(--df-primary);
}

.account-modal__terms {
    margin: 0.2rem 0 1.2rem;
}

.account-modal__return {
    color: var(--df-dark-muted);
    font-size: 1.4rem;
    text-align: center;
    margin-top: 1.2rem;
}

.account-modal__authenticated {
    padding: 1.5rem 0 0;
    text-align: center;
}

.account-modal__identity {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.6rem;
}

.account-modal__identity-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    background: var(--df-primary-light);
    color: var(--df-primary);
    font-size: 2.2rem;
    font-weight: 700;
}

.account-modal__identity .account-modal__title {
    margin-bottom: 0;
}

.account-modal__identity .account-modal__subtitle {
    margin-bottom: 1.8rem;
}

.account-modal__account-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6.4rem;
    height: 6.4rem;
    margin-bottom: 2rem;
    border-radius: 50%;
    background: var(--df-primary-light);
    color: var(--df-primary);
    font-size: 2.4rem;
}

.account-modal__authenticated .account-modal__subtitle {
    max-width: 36rem;
    margin: 0 auto 2.5rem;
}

.header-account {
    position: relative;
}

.header-account__trigger {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--df-dark);
    text-align: left;
}

.header-account__avatar {
    display: inline-flex;
    flex: 0 0 3.6rem;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: var(--df-primary);
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
}

.header-account__greeting {
    display: flex;
    min-width: 0;
    max-width: 12rem;
    flex-direction: column;
    line-height: 1.25;
}

.header-account__greeting small {
    color: #6b7280;
    font-size: 1.3rem;
}

.header-account__greeting strong {
    overflow: hidden;
    color: #111827;
    font-size: 1.5rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header__sticky.sticky .header-account__greeting small {
    color: var(--df-dark-muted);
}

.header__sticky.sticky .header-account__greeting strong {
    color: var(--df-dark);
}

.header__sticky.sticky .header-account__trigger {
    color: var(--df-dark);
}

.header-account__dropdown {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 1.2rem);
    right: 0;
    width: 23rem;
    overflow: hidden;
    border: 1px solid #edf1ed;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 1.2rem 3rem rgba(27, 54, 34, 0.16);
}

.header-account__identity {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.5rem 1.7rem;
    border-bottom: 1px solid #edf1ed;
}

.header-account__identity strong,
.header-account__identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account__identity strong {
    color: var(--df-dark);
    font-size: 1.5rem;
}

.header-account__identity span {
    color: var(--df-dark-muted);
    font-size: 1.3rem;
}

.header-account__logout {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 1.3rem 1.7rem;
    border: 0;
    background: #ffffff;
    color: var(--df-primary);
    font-size: 1.4rem;
    font-weight: 600;
    text-align: left;
}

.header-account__logout:hover {
    background: var(--df-primary-light);
}

.account-toast-container {
    z-index: 100000 !important;
    pointer-events: none;
}

.account-toast {
    min-width: 34rem;
    overflow: hidden;
    border: 0;
    border-radius: 0.9rem;
    color: var(--df-white);
    box-shadow: 0 1rem 3rem rgba(17, 41, 27, 0.22);
    pointer-events: none;
}

.account-toast--success {
    background: #087443;
}

.account-toast--warning {
    background: #b36b00;
}

.account-toast--error {
    background: #c23934;
}

.account-toast__body {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.3rem 1.4rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.45;
}

.account-toast__icon {
    flex: 0 0 auto;
    font-size: 1.8rem;
}

.account-toast__close {
    flex: 0 0 auto;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    pointer-events: auto;
}

.account-toast__close:hover {
    opacity: 1;
}

.home-feedback .testimonial__section--inner {
    padding: 0 4rem;
}

.home-feedback .swiper-wrapper {
    align-items: stretch;
}

.home-feedback .swiper-slide {
    display: flex;
    height: auto;
}

.home-feedback .testimonial__items {
    align-items: flex-start;
    width: 100%;
    height: 100%;
    min-height: 32rem;
    padding: 2.4rem;
}

.home-feedback .testimonial__items--thumbnail {
    flex: 0 0 9.6rem;
    width: 9.6rem;
    height: 9.6rem;
    margin: 0;
    overflow: hidden;
    border-radius: 1rem;
    background: #f5f7f5;
}

.home-feedback .testimonial__items--thumbnail__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-feedback .testimonial__items--content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
}

.home-feedback .testimonial__items--title {
    display: -webkit-box;
    min-height: 4.8rem;
    overflow: hidden;
    line-height: 2.4rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-feedback .testimonial__items--subtitle {
    display: -webkit-box;
    min-height: 4rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-feedback .testimonial__items--desc {
    display: -webkit-box;
    min-height: 15.4rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
}

.home-feedback .testimonial__ratting {
    margin-top: auto;
}

/* Keep the image-lightbox close action obvious on both desktop and mobile. */
.glightbox-container.glightbox-clean .gclose {
    top: max(1.6rem, env(safe-area-inset-top));
    right: max(1.6rem, env(safe-area-inset-right));
    display: flex !important;
    width: 4.8rem;
    height: 4.8rem;
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
    background: #fff !important;
    box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .35);
    opacity: 1 !important;
}

.glightbox-container.glightbox-clean .gclose svg {
    width: 2rem;
    height: 2rem;
}

.glightbox-container.glightbox-clean .gclose path {
    fill: #183227 !important;
}

.glightbox-container.glightbox-clean .gclose:hover,
.glightbox-container.glightbox-clean .gclose:focus-visible {
    border-color: #fff;
    background: var(--df-primary) !important;
    transform: rotate(90deg);
}

.glightbox-container.glightbox-clean .gclose:hover path,
.glightbox-container.glightbox-clean .gclose:focus-visible path {
    fill: #fff !important;
}

.glightbox-container .gslide-description {
    display: none !important;
}

.product__items--action button.product__items--action__btn {
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    padding: .5rem;
    border: 0;
    border-radius: 50%;
    line-height: 2.7rem;
    background: var(--white-color);
}

.product__items--action button.product__items--action__btn .product__items--action__btn--svg {
    width: 1.8rem;
    height: 1.8rem;
}

.product__items--action button.product__items--action__btn:hover,
.product__items--action button.product__items--action__btn:focus-visible {
    color: var(--white-color);
    background: var(--secondary-color);
}

@media (max-width: 767px) {
    .home-content-section {
        padding: 5rem 0;
    }

    .home-products-section__heading {
        display: flex;
        flex-direction: column;
        margin-bottom: 3rem;
    }

    .home-products-section__heading > .text-center {
        padding: 0;
    }

    .home-products-section__all {
        position: static;
        align-self: center;
        margin: 1.5rem auto 0;
        transform: none;
    }

    .home-buffet-services .product__items--content,
    .home-buffet-services .product__categories--content__subtitle {
        min-height: 0;
    }

    .home-buffet-services__grid {
        --bs-gutter-x: 3rem;
    }

    .home-latest-news .blog__items--title,
    .home-latest-news .blog__items--desc {
        height: auto;
        min-height: 0;
    }

    .media-gallery .portfolio__items--content {
        padding-right: .4rem;
        padding-left: .4rem;
    }

    .media-gallery .portfolio__items--title {
        height: 4.8rem;
        font-size: 1.4rem;
        line-height: 2.4rem;
    }

    .media-gallery .portfolio__items--desc {
        height: 7.2rem;
        font-size: 1.3rem;
        line-height: 2.4rem;
    }

    .home-feedback .testimonial__section--inner {
        padding: 0 1.5rem;
    }

    .home-feedback .testimonial__items {
        flex-direction: column;
        min-height: 0;
        padding: 2rem;
    }

    .home-feedback .testimonial__items--thumbnail {
        align-self: center;
        margin-bottom: 1.5rem;
    }

    .home-feedback .testimonial__items--content {
        width: 100%;
        padding-left: 0;
    }

    .home-feedback .testimonial__items--desc {
        min-height: 13.2rem;
        -webkit-line-clamp: 6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__api-banner--image {
        transition: none;
    }
}

/* ==========================================================================
   Feedback Carousel - Style as Image 1
   ========================================================================== */
.home-feedback {
    background-color: #f8fafc;
    padding: 20px 0;
    overflow: hidden;
}

/* Shared typography for every Home section heading. */
.home-page .home-section-title {
    font-size: 2.6rem;
    font-weight: var(--df-font-weight-bold);
    line-height: var(--df-line-height-heading);
}

.home-page :is(.home-section-description, .home-body-copy) {
    font-family: var(--df-font-body) !important;
    font-size: 1.5rem;
    font-weight: var(--df-font-weight-regular);
    line-height: var(--df-line-height-body);
}

/* Keep newly added Home components on the same Roboto typography system. */
.home-page :is(
    .home-trust-bar,
    .home-b2b,
    .home-category-directory,
    .home-product-block,
    .home-b2b-cta,
    .home-business-stats
) {
    font-family: var(--df-font-body) !important;
}

.home-page :is(
    .home-trust-bar,
    .home-b2b,
    .home-category-directory,
    .home-product-block,
    .home-b2b-cta,
    .home-business-stats
) :is(h1, h2, h3, h4, h5, h6, strong, button, a) {
    font-family: var(--df-font-heading) !important;
}

@media (max-width: 575px) {
    .home-page .home-section-title {
        font-size: 2.2rem;
    }

    .home-page :is(.home-section-description, .home-body-copy) {
        font-size: 1.4rem;
    }
}

/* Swiper Container */
.testimonial__swiper--activation {
    padding: 35px 10px 45px !important;
    overflow: visible !important;
}

.testimonial__swiper--activation .swiper-wrapper {
    align-items: center;
}

/* Base Card Style */
.testimonial__card {
    background: #ffffff;
    border-radius: 16px;
    padding: 34px 30px 28px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    border: 1px solid #edf2f7;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, box-shadow 0.4s ease;
    transform: scale(0.9);
    opacity: 0.6;
    cursor: pointer;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    user-select: none;
}

/* Active Center Card Highlight Style (Image 1) */
.testimonial__swiper--activation .swiper-slide-active .testimonial__card {
    transform: scale(1.05);
    opacity: 1;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.04);
    border-color: #e2e8f0;
    z-index: 10;
    cursor: default;
}

/* Card Header: Avatar + Author Info */
.testimonial__card--header {
    gap: 16px;
    margin-bottom: 18px;
}

.testimonial__card--avatar {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border: 2px solid #ffffff;
    background: #edf2f7;
}

.testimonial__card--avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial__card--author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial__card--name {
    font-size: 1.4rem !important;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    line-height: 1.3;
}

.testimonial__card--role {
    font-size: 1.1rem !important;
    color: #a0aec0;
    font-weight: 500;
}

.testimonial__card--author .testimonial__ratting {
    margin-top: 6px;
}

.testimonial__card--author .testimonial__ratting--icon {
    color: #ffc107;
    font-size: 1.1rem;
    margin-right: 3px;
}


/* Card Body Text */
.testimonial__card--body {
    flex-grow: 1;
    margin-bottom: 18px;
}

.testimonial__card--text {
    font-size: 1.4rem !important;
    line-height: 1.6;
    color: #4a5568;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Footer: Star Rating & Icon */
.testimonial__card--footer {
    padding-top: 14px;
    border-top: 1px dashed #edf2f7;
}

.testimonial__card--footer .ratting--icon {
    color: #ffc107;
    font-size: 1.1rem;
    margin-right: 3px;
}

.testimonial__chat--icon {
    font-size: 1.3rem;
    color: #cbd5e0;
}

/* Custom Pagination Bar (< 1 từ N >) */
.testimonial__pagination--container {
    gap: 16px;
    margin-top: 24px;
}

.testimonial__nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #4a5568;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem !important;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.testimonial__nav-btn:hover {
    background: #008744;
    color: #ffffff;
    border-color: #008744;
    box-shadow: 0 4px 12px rgba(0, 135, 68, 0.25);
    transform: translateY(-1px);
}

.testimonial__counter {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 1.4rem !important;
    color: #718096;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    user-select: none;
}

.testimonial__current {
    color: #1a202c;
    font-weight: 700;
}

@media (max-width: 767px) {
    .testimonial__card {
        padding: 24px 20px 20px;
        transform: scale(0.95);
        opacity: 0.7;
    }

    .testimonial__swiper--activation .swiper-slide-active .testimonial__card {
        transform: scale(1);
    }
}

/* Temporarily hide language & currency switcher until API integration */
.language__currency {
    display: none !important;
}

/* Company introduction page */
.company-about {
    --company-green: #009f4d;
    --company-green-dark: #08743e;
    --company-ink: #17231d;
    --company-muted: #647069;
    --company-soft: #f4f8f5;
}

.company-about__overview-row {
    --bs-gutter-x: 7rem;
}

.company-about__content--flow::after {
    display: block;
    clear: both;
    content: "";
}

.company-about__content--flow .company-about__figure {
    float: left;
    width: calc(50% - 3.5rem);
    margin: .4rem 7rem 2.4rem 0;
}

.company-about__figure {
    position: relative;
    margin: 0;
    padding: 0 2rem 2rem 0;
}

.company-about__figure::before {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 68%;
    height: 68%;
    border-radius: 1.4rem;
    background: rgba(0, 159, 77, .12);
    content: "";
}

.company-about__image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 1.4rem;
    box-shadow: 0 1.6rem 4rem rgba(16, 56, 38, .14);
    object-fit: cover;
}

.company-about__figure-caption {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    min-width: 25rem;
    padding: 1.7rem 2.2rem;
    border-radius: 1rem;
    background: var(--company-green);
    color: #fff;
    box-shadow: 0 1rem 2.8rem rgba(0, 159, 77, .24);
}

.company-about__figure-caption strong {
    font-size: 1.5rem;
}

.company-about__figure-caption span {
    margin-top: .3rem;
    font-size: 1.3rem;
}

.company-about__eyebrow {
    margin-bottom: 1rem;
    color: var(--company-green);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.company-about__title,
.company-about__section-heading h2,
.company-about__commitment h2 {
    color: var(--company-ink);
    font-weight: 700;
}

.company-about__title {
    margin-bottom: 2rem;
    font-size: clamp(2.6rem, 3vw, 4rem);
    line-height: 1.25;
}

.company-about__content p {
    margin-bottom: 1.4rem;
    color: var(--company-muted);
    line-height: 1.85;
    text-align: justify;
}

.company-about__link {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    margin-top: .8rem;
    color: var(--company-green);
    font-weight: 400;
}

.company-about__link i {
    transition: transform .25s ease;
}

.company-about__link:hover i {
    transform: translateX(.4rem);
}

.company-about__capability {
    padding: 7rem 0 2.4rem;
    background: var(--company-soft);
}

.company-about__section-heading {
    width: min(74rem, 100%);
    margin: 0 auto 4rem;
}

.company-about__section-heading h2 {
    margin-bottom: 1.2rem;
    font-size: clamp(2.4rem, 2.5vw, 3.2rem);
}

.company-about__section-heading p {
    color: var(--company-muted);
    line-height: 1.75;
}

.company-about__section-heading p a {
    color: var(--company-green);
    font-weight: 700;
}

.company-about__benefit-grid {
    --bs-gutter-x: 2.4rem;
    --bs-gutter-y: 2.4rem;
}

.company-about__benefit {
    height: 100%;
    padding: 2.6rem;
    border: 1px solid #e3ece6;
    border-radius: 1.2rem;
    background: #fff;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.company-about__benefit:hover {
    border-color: rgba(0, 159, 77, .3);
    box-shadow: 0 1rem 2.8rem rgba(25, 75, 52, .09);
    transform: translateY(-.4rem);
}

.company-about__benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 5.6rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(0, 159, 77, .16);
    border-radius: 1.6rem;
    background: linear-gradient(145deg, #f2fff8 0%, #dcf8e8 100%);
    box-shadow: 0 .8rem 2rem rgba(0, 132, 65, .11), inset 0 1px 0 rgba(255, 255, 255, .85);
    color: var(--company-green);
    transition: color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.company-about__benefit-icon svg {
    width: 2.8rem;
    height: 2.8rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.company-about__benefit:hover .company-about__benefit-icon {
    border-color: var(--company-green);
    background: var(--company-green);
    box-shadow: 0 1rem 2.2rem rgba(0, 159, 77, .25);
    color: #fff;
    transform: translateY(-.2rem) rotate(-3deg);
}

.company-about__benefit h3 {
    margin-bottom: .8rem;
    color: var(--company-ink);
    font-size: 1.8rem;
    font-weight: 700;
}

.company-about__benefit p {
    color: var(--company-muted);
    line-height: 1.7;
}

.company-about__catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem;
}

.company-about__catalog-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 8rem;
    padding: 1.8rem 2.2rem;
    border: 1px solid #e2e9e4;
    border-radius: 1rem;
    color: var(--company-ink);
    font-weight: 700;
    box-shadow: 0 .5rem 1.8rem rgba(20, 63, 45, .05);
}

.company-about__catalog-item i {
    flex: 0 0 auto;
    color: var(--company-green);
    transition: transform .25s ease;
}

.company-about__catalog-item:hover {
    border-color: var(--company-green);
    color: var(--company-green-dark);
}

.company-about__catalog-item:hover i {
    transform: translateX(.4rem);
}

.company-about__commitment {
    padding: 2.4rem 0;
}

.company-about__commitment-inner {
    padding: 5rem clamp(2rem, 8vw, 10rem);
    border-radius: 1.6rem;
    background: linear-gradient(135deg, #eef8f1 0%, #f8fbf9 100%);
}

.company-about__commitment h2 {
    margin-bottom: 2.4rem;
    font-size: clamp(2.4rem, 3vw, 3.4rem);
}

.company-about__commitment p {
    max-width: 76rem;
    margin: 0 auto 2.4rem;
    color: var(--company-muted);
    line-height: 1.75;
}

.company-about__contact {
    min-height: 4.4rem;
    padding: .4rem 2.4rem;
    background: var(--company-green);
    line-height: 3.6rem;
}

.company-about__api-content {
    width: 100%;
    color: var(--df-dark-muted);
    line-height: 1.85;
    font-size: 1.6rem !important;
}

.company-about__api-content,
.company-about__api-content p,
.company-about__api-content span,
.company-about__api-content em,
.company-about__api-content li {
    font-size: 1.6rem !important;
    line-height: 1.85 !important;
}

.company-about__api-content h1,
.company-about__api-content h2,
.company-about__api-content h3,
.company-about__api-content h4 {
    font-family: var(--df-font-heading) !important;
    font-weight: 600 !important;
    color: var(--df-dark) !important;
    margin: 1.5rem 0 2rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.company-about__api-content h1 { font-size: 3.2rem !important; }
.company-about__api-content h2 { font-size: 2.8rem !important; }
.company-about__api-content h3 { font-size: 2.2rem !important; }
.company-about__api-content h4 { font-size: 1.8rem !important; }

.company-about__api-content p {
    margin-bottom: 1.4rem;
    color: #374151;
}

.company-about__api-content figure,
.company-about__api-content .image,
.company-about__api-content p:has(img) {
    text-align: center !important;
    margin: 2rem auto !important;
}

.company-about__api-content img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 1rem !important;
    margin: 2rem auto !important;
    box-shadow: var(--df-shadow-md) !important;
}

.company-about__api-content ul,
.company-about__api-content ol {
    padding-left: 2.5rem !important;
    margin: 1.2rem 0 1.8rem !important;
}

.company-about__api-content li {
    margin-bottom: 0.6rem !important;
    color: #374151;
}

.company-about__api-content a {
    color: var(--df-primary);
    text-decoration: none;
    transition: color .2s;
}

.company-about__api-content a:hover {
    color: var(--df-primary-dark);
    text-decoration: underline;
}

.company-about__api-content strong,
.company-about__api-content b {
    color: var(--df-dark);
    font-weight: 700;
}

.promotion-page {
    background: #fff;
}

.promotion-page__heading {
    margin-bottom: 3.2rem;
}

.promotion-page__heading h1 {
    margin-bottom: .8rem;
    color: var(--df-dark);
    font-size: clamp(2.8rem, 3vw, 4rem);
    font-weight: 800;
}

.promotion-page__heading p {
    max-width: 72rem;
    color: var(--df-dark-muted);
    line-height: 1.7;
}

.promotion-program + .promotion-program {
    margin-top: 6rem;
    padding-top: 6rem;
    border-top: 1px solid var(--df-gray-300);
}

.promotion-programs-slider-shell {
    position: relative;
    width: 100%;
    min-width: 0;
}

.promotion-programs-slider {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.promotion-programs-slider .swiper-wrapper {
    align-items: flex-start;
    transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

.promotion-programs-slider .swiper-slide {
    display: block;
    width: 100%;
    height: auto;
}

.promotion-programs-slider .promotion-program__banner {
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 5.6rem;
}

.promotion-programs-slider__pagination.swiper-pagination {
    position: absolute;
    z-index: 4;
    bottom: 4.4rem;
    left: 50%;
    display: flex;
    width: auto;
    justify-content: center;
    gap: 1rem;
    min-height: 1.2rem;
    margin: 0;
    transform: translateX(-50%);
}

.promotion-programs-slider__pagination .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    opacity: 1;
    transition: width .25s ease, background-color .25s ease;
}

.promotion-programs-slider__pagination .swiper-pagination-bullet-active {
    width: 3.2rem;
    background: #fff;
}

.promotion-program--product-list {
    margin-top: 3.2rem;
}

.promotion-program__banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    min-height: 17rem;
    margin-bottom: 2.6rem;
    padding: 3.2rem 4rem;
    overflow: hidden;
    border-radius: 1.6rem;
    color: #fff;
    box-shadow: 0 1.2rem 3rem rgba(17, 79, 49, .14);
}

.promotion-program__banner::before,
.promotion-program__banner::after {
    position: absolute;
    content: "";
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.promotion-program__banner::before {
    top: -8rem;
    right: 8rem;
    width: 22rem;
    height: 22rem;
}

.promotion-program__banner::after {
    right: -4rem;
    bottom: -9rem;
    width: 18rem;
    height: 18rem;
}

.promotion-program__pattern {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 4.8rem,
        rgba(255, 255, 255, .035) 4.9rem,
        transparent 5rem,
        transparent 9.8rem
    );
    pointer-events: none;
}

.promotion-program__pattern::before,
.promotion-program__pattern::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    content: "";
}

.promotion-program__pattern::before {
    top: -11rem;
    right: 7%;
    width: 28rem;
    height: 28rem;
    box-shadow: 0 0 0 5rem rgba(255, 255, 255, .025);
}

.promotion-program__pattern::after {
    right: -5rem;
    bottom: -8rem;
    width: 20rem;
    height: 20rem;
    box-shadow: 0 0 0 3.5rem rgba(255, 255, 255, .025);
}

.promotion-program__banner--dealer,
.promotion-program__banner--detail {
    background: linear-gradient(120deg, var(--df-primary-dark) 0%, var(--df-primary) 62%, #1ea965 100%);
}

.promotion-program__banner--customer {
    background: linear-gradient(120deg, #27633f 0%, #183f2a 100%);
}

.promotion-program__banner--listing {
    display: block;
    min-height: 26.8rem;
    padding: 3.2rem;
}

.promotion-program__banner-row {
    z-index: 1;
    min-height: 20.4rem;
}

.promotion-program__content {
    position: relative;
    z-index: 1;
    max-width: 78rem;
}

.promotion-program__scope {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.3rem;
    padding: .6rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10rem;
    background: rgba(255, 255, 255, .14);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.promotion-program__content h1,
.promotion-program__content h2 {
    margin-bottom: 1rem;
    color: #fff;
    font-size: clamp(2.4rem, 3vw, 3.5rem);
    font-weight: 800;
    line-height: 1.25;
}

.promotion-program__content p {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-weight: 600;
}

.promotion-countdown {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-top: 1.8rem;
}

.promotion-countdown__item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 6.4rem;
    height: 6.6rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 1.2rem;
    background: rgba(4, 65, 34, .52);
    box-shadow: inset 0 .1rem .2rem rgba(0, 0, 0, .12);
}

.promotion-countdown__item strong {
    color: #fff;
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
}

.promotion-countdown__item span {
    margin-top: .5rem;
    color: rgba(255, 255, 255, .78);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.promotion-countdown__item .promotion-countdown__seconds {
    color: #ffe43b;
}

.promotion-countdown__separator {
    padding-top: 1.3rem;
    color: rgba(255, 255, 255, .48);
    font-size: 2.4rem;
    font-weight: 900;
}

.promotion-program__document,
.promotion-detail-page__button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 4.6rem;
    padding: 1rem 2rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 10rem;
    background: #fff;
    color: var(--df-primary-dark);
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 .8rem 1.8rem rgba(8, 62, 34, .16);
}

.promotion-program__document:hover,
.promotion-detail-page__button--light:hover {
    color: var(--df-primary);
    transform: translateY(-.2rem);
}

.promotion-product__flash-sale {
    position: absolute;
    z-index: 4;
    top: 1.2rem;
    right: 1.2rem;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.4rem;
    margin: 0;
    padding: .4rem .8rem;
    border-radius: .4rem;
    background: var(--df-secondary-dark);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1;
    text-transform: uppercase;
    animation: promotion-flash-sale-pulse 2.8s ease-in-out infinite;
}

.promotion-product__flash-sale i {
    color: #ffe43b;
    font-size: 1rem;
}

.promotion-program__banner--image {
    background-image:
        linear-gradient(90deg, rgba(0, 45, 26, .9) 0%, rgba(0, 70, 40, .72) 42%, rgba(0, 70, 40, .2) 78%, rgba(0, 70, 40, .08) 100%),
        var(--promotion-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.promotion-program__banner--image::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(0, 30, 18, .16) 0%, transparent 100%);
}

.promotion-program__banner--image::after {
    display: none;
}

@keyframes promotion-flash-sale-pulse {
    0%,
    100% {
        opacity: .72;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.03);
    }
}

@media (prefers-reduced-motion: reduce) {
    .promotion-product__flash-sale {
        animation: none;
    }
}

.promotion-detail-page .promotion-program__banner {
    min-height: 27rem;
    margin-bottom: 3rem;
    padding: 4.5rem 5rem;
}

.promotion-product-card {
    width: 100%;
    height: auto;
    align-self: start;
}

.promotion-program__gift {
    position: relative;
    z-index: 1;
    margin-right: 4rem;
    color: rgba(255, 255, 255, .25);
    font-size: 12rem;
}

.promotion-detail-page__actions {
    display: flex;
    gap: 1.2rem;
    margin-top: 2.4rem;
    flex-wrap: wrap;
}

.promotion-detail-page__button {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(0, 70, 35, .24);
    color: #fff;
}

.promotion-detail-page__button--light {
    background: #fff;
    color: var(--df-primary-dark);
}

.promotion-filter__search {
    position: relative;
}

.promotion-filter__search i {
    position: absolute;
    top: 50%;
    left: 1.3rem;
    color: #94a3b8;
    transform: translateY(-50%);
}

.promotion-filter__search input {
    padding-left: 3.8rem;
}

.promotion-filter__check-list {
    max-height: 24rem;
    overflow-y: auto;
    padding-right: .4rem;
}

.promotion-filter__check {
    display: flex !important;
    align-items: center;
    gap: .9rem;
    margin: 0 0 1rem !important;
    color: var(--df-dark-muted) !important;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 500 !important;
}

.promotion-filter__check:last-child {
    margin-bottom: 0 !important;
}

.promotion-filter__check input {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    margin: -1px;
    padding: 0 !important;
    border: 1px solid #cbd5d0;
    opacity: 0;
    pointer-events: none;
}

.promotion-filter__check span {
    position: relative;
    padding-left: 2.4rem;
    line-height: 1.45;
}

.promotion-filter__check span::before {
    position: absolute;
    top: .05rem;
    left: 0;
    display: grid;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid #cbd5d0;
    border-radius: .35rem;
    background: #fff;
    content: "";
    place-items: center;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
}

.promotion-filter__check input:checked + span::before {
    border-color: var(--df-primary);
    background: var(--df-primary);
    color: #fff;
    content: "\2713";
}

.promotion-filter__check input:focus-visible + span::before {
    outline: 2px solid rgba(0, 135, 68, .28);
    outline-offset: 2px;
}

.promotion-results__empty {
    padding: 6rem 2rem;
    color: var(--df-dark-muted);
    font-size: 1.7rem;
    text-align: center;
}

.promotion-results__empty i {
    display: block;
    margin-bottom: 1.5rem;
    color: var(--df-primary);
    font-size: 4rem;
}

.shared-pagination {
    margin-top: 3.5rem;
}

.shared-pagination .pagination__item--current {
    background: var(--df-primary);
    color: #fff;
}

@media (max-width: 991px) {
    .company-about__overview-row {
        --bs-gutter-x: 3rem;
        --bs-gutter-y: 4rem;
    }

    .company-about__content--flow .company-about__figure {
        float: none;
        width: 100%;
        margin: .4rem 0 4rem;
    }

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

@media (max-width: 575px) {
    .company-about__figure {
        padding: 0 1rem 5.5rem 0;
    }

    .company-about__figure-caption {
        right: 1rem;
        min-width: 0;
        max-width: calc(100% - 2rem);
    }

    .company-about__catalog-grid {
        grid-template-columns: 1fr;
    }

    .company-about__benefit {
        height: auto;
        padding: 2.2rem;
    }

    .company-about__commitment-inner {
        padding: 4rem 2rem;
    }
}

.company-about__benefit-icon i {
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    display: inline-block;
}

.product-detail-rich-content {
    color: var(--df-dark-muted);
    font-family: var(--df-font-body);
    font-size: 1.5rem;
    line-height: 2.6rem;
    overflow-wrap: anywhere;
}

.product-detail-rich-content > :first-child {
    margin-top: 0;
}

.product-detail-rich-content > :last-child {
    margin-bottom: 0;
}

.product-detail-rich-content h1,
.product-detail-rich-content h2,
.product-detail-rich-content h3,
.product-detail-rich-content h4,
.product-detail-rich-content h5,
.product-detail-rich-content h6 {
    color: var(--df-dark);
    font-family: var(--df-font-heading);
    font-weight: 700;
    line-height: 1.35;
    margin: 2.4rem 0 1rem;
}

.product-detail-rich-content h1 { font-size: 2.8rem; }
.product-detail-rich-content h2 { font-size: 2.4rem; }
.product-detail-rich-content h3 { font-size: 2.1rem; }
.product-detail-rich-content h4 { font-size: 1.8rem; }
.product-detail-rich-content h5 { font-size: 1.6rem; }
.product-detail-rich-content h6 { font-size: 1.5rem; }

.product-detail-rich-content p {
    margin: 0 0 1.4rem;
}

.product-detail-rich-content strong,
.product-detail-rich-content b {
    color: var(--df-dark);
    font-weight: 700;
}

.product-detail-rich-content em,
.product-detail-rich-content i {
    font-style: italic;
}

.product-detail-rich-content sup,
.product-detail-rich-content sub {
    font-size: .75em;
    line-height: 0;
}

.product-detail-rich-content mark {
    padding: .1rem .3rem;
    background: #fff3cd;
    color: var(--df-dark);
}

.product-detail-rich-content ul,
.product-detail-rich-content ol {
    margin: 0 0 1.6rem;
    padding-left: 2.6rem;
}

.product-detail-rich-content li {
    margin-bottom: .5rem;
}

.product-detail-rich-content li:last-child {
    margin-bottom: 0;
}

.product-detail-rich-content a {
    color: var(--df-primary);
    text-decoration: underline;
    text-underline-offset: .2rem;
}

.product-detail-rich-content a:hover {
    color: var(--df-primary-dark);
}

.product-detail-rich-content img,
.product-detail-rich-content video,
.product-detail-rich-content iframe {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.8rem auto;
}

.product-detail-rich-content figure {
    max-width: 100%;
    margin: 2rem 0;
    text-align: center;
}

.product-detail-rich-content figcaption {
    margin-top: .8rem;
    color: var(--df-dark-muted);
    font-size: 1.3rem;
    line-height: 2rem;
}

.product-detail-rich-content table {
    display: block;
    max-width: 100%;
    width: 100%;
    margin: 2rem 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 1.4rem;
}

.product-detail-rich-content th,
.product-detail-rich-content td {
    padding: 1rem 1.2rem;
    border: 1px solid var(--df-gray-300);
    text-align: left;
    vertical-align: top;
}

.product-detail-rich-content th {
    color: var(--df-dark);
    background: var(--df-gray-100);
    font-weight: 700;
}

.product-detail-rich-content blockquote {
    margin: 2rem 0;
    padding: 1.2rem 1.8rem;
    border-left: .4rem solid var(--df-primary);
    background: var(--df-primary-light);
    color: var(--df-dark);
}

.product-detail-rich-content pre {
    max-width: 100%;
    margin: 2rem 0;
    padding: 1.4rem 1.6rem;
    overflow-x: auto;
    border-radius: .5rem;
    background: var(--df-dark);
    color: var(--df-white);
    font-size: 1.35rem;
    line-height: 2.2rem;
}

.product-detail-rich-content code {
    padding: .15rem .4rem;
    border-radius: .3rem;
    background: var(--df-gray-200);
    color: var(--df-dark);
    font-size: .9em;
}

.product-detail-rich-content pre code {
    padding: 0;
    background: transparent;
    color: inherit;
}

.product-detail-rich-content hr {
    margin: 2.4rem 0;
    border: 0;
    border-top: 1px solid var(--df-gray-300);
}

@media (max-width: 575px) {
    .product-detail-rich-content {
        font-size: 1.4rem;
        line-height: 2.4rem;
    }

    .product-detail-rich-content h1 { font-size: 2.3rem; }
    .product-detail-rich-content h2 { font-size: 2rem; }
    .product-detail-rich-content h3 { font-size: 1.8rem; }

    .product-detail-rich-content th,
    .product-detail-rich-content td {
        padding: .8rem;
    }
}

/* Certificates */
.certificate-page {
    --certificate-green: #008744;
    --certificate-ink: #17241c;
    --certificate-muted: #607067;
    background: #f7faf8;
}

.certificate-page__section {
    background: radial-gradient(circle at 8% 10%, rgba(0, 135, 68, .07), transparent 24rem), #f7faf8;
}

.certificate-page__heading {
    max-width: 82rem;
    margin: 0 auto 3.5rem;
}

.certificate-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
    color: var(--certificate-green);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.certificate-page__eyebrow svg {
    width: 2rem;
    height: 2rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.certificate-page__heading p {
    margin: 1.2rem auto 0;
    color: var(--certificate-muted);
    font-size: 1.5rem;
    line-height: 1.75;
}

.certificate-page__summary {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2.4rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid #d9e8df;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .5rem 1.8rem rgba(20, 63, 45, .05);
}

.certificate-page__summary-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 4.2rem;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: rgba(0, 135, 68, .1);
    color: var(--certificate-green);
    font-size: 1.8rem;
    line-height: 1;
}

.certificate-page__summary-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1.8rem;
    margin: 0;
    padding: 0;
}

.certificate-page__summary div > strong,
.certificate-page__summary div > span {
    display: block;
}

.certificate-page__summary div > strong {
    color: var(--certificate-ink);
    font-size: 1.5rem;
}

.certificate-page__summary div > span {
    margin-top: .2rem;
    color: var(--certificate-muted);
    font-size: 1.25rem;
}

.certificate-page__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
}

.certificate-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #dde8e1;
    border-radius: 1.2rem;
    background: #fff;
    box-shadow: 0 .8rem 2.4rem rgba(20, 63, 45, .07);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.certificate-card:hover {
    border-color: rgba(0, 135, 68, .45);
    box-shadow: 0 1.4rem 3.2rem rgba(20, 63, 45, .13);
    transform: translateY(-.5rem);
}

.certificate-card__image-link {
    position: relative;
    display: grid;
    height: 35rem;
    overflow: hidden;
    padding: 1.5rem;
    place-items: center;
    background: #f1f5f2;
}
.offcanvas__account--items,
.offcanvas__account-card {
    padding: 20px 16px !important;
    margin: 24px 14px 28px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.offcanvas__account-card-header {
    margin-bottom: 16px !important;
    text-align: left !important;
}

.offcanvas__account-card-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #475569 !important;
}

.offcanvas__account-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    width: 100% !important;
}

.dofi-account-box {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 10px !important;
    min-height: 38px !important;
    width: 100% !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    outline: none !important;
    border: none !important;
    background: #ffffff !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.dofi-account-box__label {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* Nút Đăng Nhập - Green Accent Fill */
.dofi-account-box--login {
    background: linear-gradient(135deg, #00984a 0%, #007d3c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 152, 74, 0.28) !important;
    border: 1.5px solid transparent !important;
}

.dofi-account-box--login .dofi-account-box__icon {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.dofi-account-box--login .dofi-account-box__label {
    color: #ffffff !important;
}

.dofi-account-box--login:hover,
.dofi-account-box--login:active,
.dofi-account-box--login:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0, 152, 74, 0.4) !important;
    background: linear-gradient(135deg, #008742 0%, #006a33 100%) !important;
}

/* Nút Đăng Ký Đại Lý - Clean White Card with Green Border Accent */
.dofi-account-box--register {
    background: #ffffff !important;
    color: #00984a !important;
    border: 1.5px solid #00984a !important;
    box-shadow: 0 4px 14px rgba(0, 152, 74, 0.08) !important;
}

.dofi-account-box--register .dofi-account-box__icon {
    background: #e6f5ed !important;
    color: #00984a !important;
}

.dofi-account-box--register .dofi-account-box__label {
    color: #00984a !important;
}

.dofi-account-box--register:hover,
.dofi-account-box--register:active,
.dofi-account-box--register:focus {
    transform: translateY(-2px) !important;
    background: #00984a !important;
    border-color: #00984a !important;
    box-shadow: 0 6px 18px rgba(0, 152, 74, 0.3) !important;
}

.dofi-account-box--register:hover .dofi-account-box__icon,
.dofi-account-box--register:active .dofi-account-box__icon,
.dofi-account-box--register:focus .dofi-account-box__icon {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.dofi-account-box--register:hover .dofi-account-box__label,
.dofi-account-box--register:active .dofi-account-box__label,
.dofi-account-box--register:focus .dofi-account-box__label {
    color: #ffffff !important;
}

/* Icon Container */
.dofi-account-box__icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}

.certificate-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}

.certificate-card:hover .certificate-card__image {
    transform: scale(1.025);
}

.certificate-card__view {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    display: grid;
    width: 4rem;
    height: 4rem;
    border: 1px solid var(--certificate-green);
    border-radius: 50%;
    place-items: center;
    background: var(--certificate-green);
    color: #fff;
    box-shadow: 0 .6rem 1.6rem rgba(0, 135, 68, .24);
    transition: background-color .2s ease, color .2s ease;
}

.certificate-card__image-link:hover .certificate-card__view {
    background: #fff;
    color: var(--certificate-green);
}

.certificate-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.8rem 2rem 2rem;
}

.certificate-card__badge {
    align-self: flex-start;
    color: var(--certificate-green);
    font-size: 1.15rem;
    font-weight: 500;
}

.certificate-card__content h3 {
    margin: .8rem 0 1.6rem;
    color: var(--certificate-ink);
    font-size: 1.65rem;
    line-height: 1.45;
}

.certificate-card__open {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    align-self: flex-start;
    margin-top: auto;
    color: var(--certificate-green);
    font-size: 1.3rem;
    font-weight: 400;
}

.certificate-card__open i {
    font-size: 1.1rem;
    transition: transform .2s ease;
}

.certificate-card__open:hover i {
    transform: translateX(.3rem);
}

@media (max-width: 991px) {
    .certificate-page__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .certificate-page__heading {
        margin-bottom: 2.5rem;
    }

    .certificate-page__grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .certificate-card__image-link {
        height: 32rem;
    }
}

/* Home page section color rhythm */
.home-buffet-services {
    background: #ffffff !important;
}

.home-products-section {
    border-top: 1px solid #e2eee6;
    border-bottom: 1px solid #e2eee6;
    background: #f2f8f4 !important;
}

.home-promotion-section {
    border-bottom: 1px solid #e6eee9;
    background: #ffffff !important;
}

.home-today-delicious-products {
    border-bottom: 1px solid #deebe2;
    background: #f3f6f4 !important;
}

.home-latest-news {
    border-bottom: 1px solid #e4ebe7;
    background: #ffffff !important;
}

.home-feedback {
    border-top: 0;
    background: #f3f6f4 !important;
}

/* DOGI FOOD product listing */
.dogifood-products-section {
    background: var(--df-gray-100);
}

.dogifood-products-page .pagination__area {
    margin-top: 4rem;
}

.header__sub--menu {
    background: #ffffff !important;
    padding: 1.8rem 2.2rem !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #eef2f6 !important;
    z-index: 99 !important;
}

.header__sub--menu {
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 200px !important;
    width: max-content !important;
}

.header__sub--menu__link {
    font-size: 1.6rem !important;
    font-weight: 500 !important;
    color: var(--text-gray-color, #4b5563) !important;
    padding: 0.6rem 1rem !important;
    border-radius: 6px !important;
    display: block !important;
    line-height: 1.4 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.header__sub--menu__link:hover {
    color: var(--secondary-color, #00984a) !important;
    background-color: #f0fdf4 !important;
    transform: translateX(3px) !important;
}

.footer__widget--logo img {
    height: 55px !important;
    width: auto;
    object-fit: contain;
    display: block;
}

.ctn-preloader .animation-preloader .preloader-logo {
    display: block;
    width: min(240px, 58vw);
    height: auto;
    animation: dogifoodPreloaderPulse 1.2s ease-in-out infinite;
}

@keyframes dogifoodPreloaderPulse {
    50% {
        opacity: 0.65;
        transform: scale(0.96);
    }
}

/* ── Mobile Responsive (< 768px) ── */
@media (max-width: 768px) {
    .footer__nav-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
        padding-top: 0 !important;
    }

    .footer__widget--nav-item {
        width: 100% !important;
    }

    .footer__widget--intro {
        padding-left: 0 !important;
    }
}

@media (min-width: 992px) {
    .footer__widget--intro {
        padding-left: 0px !important;
        margin-top: -14px !important;
    }
}

.home-promotion-feature__illustration {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    pointer-events: none;
}

.home-promotion-feature__food-icon {
    --food-icon-rotation: 0deg;
    position: absolute;
    width: 7rem;
    height: 7rem;
    color: #008744;
    fill: none;
    opacity: .19;
    filter: drop-shadow(0 .6rem 1rem rgba(50, 92, 58, .12));
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: home-promotion-food-icon-float 5s ease-in-out infinite;
}

.home-promotion-feature__food-icon-accent {
    color: #d97706;
    stroke: currentColor;
}

.home-promotion-feature__food-icon--utensils {
    --food-icon-rotation: 7deg;
    right: 1rem;
    bottom: 1rem;
    width: 10rem;
    height: 10rem;
    opacity: .17;
    animation-delay: -.8s;
}

.home-promotion-feature__food-icon--pizza {
    --food-icon-rotation: -13deg;
    top: 1.5rem;
    right: 1.8rem;
    width: 7.8rem;
    height: 7.8rem;
    animation-delay: -2.1s;
}

.home-promotion-feature__food-icon--bread {
    --food-icon-rotation: 10deg;
    top: 47%;
    right: -.8rem;
    width: 7rem;
    height: 7rem;
    opacity: .1;
    animation-delay: -3.3s;
}

.home-promotion-feature__food-icon--cookie {
    --food-icon-rotation: 14deg;
    bottom: 1.2rem;
    left: 1rem;
    width: 7.2rem;
    height: 7.2rem;
    opacity: .17;
    animation-delay: -1.5s;
}

@keyframes home-promotion-food-icon-float {
    0%, 100% {
        transform: translateY(0) rotate(var(--food-icon-rotation));
    }

    50% {
        transform: translateY(-.7rem) rotate(var(--food-icon-rotation));
    }
}

@media (max-width: 575px) {
    .home-promotion-feature__food-icon--utensils {
        width: 8rem;
        height: 8rem;
    }

    .home-promotion-feature__food-icon--pizza {
        top: 1rem;
        right: .4rem;
    }

    .home-promotion-feature__food-icon--bread {
        top: 48%;
        right: -2rem;
        opacity: .07;
    }
}

/* Promotion layout: text panel beside an eight-product paged gallery. */
.home-promotion-grid {
    display: grid;
    grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
    gap: 2rem;
    align-items: stretch;
}

.home-promotion-info-col {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(217, 119, 6, .14);
    border-radius: 2rem;
    box-shadow: 0 12px 30px rgba(86, 55, 23, .08);
}

.home-promotion-info-col {
    position: relative;
    background:
        radial-gradient(circle at 12% 12%, rgba(245, 158, 11, .12) 0, rgba(245, 158, 11, 0) 32%),
        radial-gradient(circle at 88% 86%, rgba(0, 135, 68, .12) 0, rgba(0, 135, 68, 0) 36%),
        linear-gradient(145deg, #fffdf8 0%, #fff7e8 58%, #effaf3 100%);
}

.home-promotion-info-col__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: clamp(2.6rem, 3vw, 4rem);
}

@media (max-width: 991px) {
    .home-promotion-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 575px) {
    .home-promotion-grid {
        gap: 1.6rem;
    }

    .home-promotion-info-col__content {
        padding: 2.8rem 2rem;
    }
}

/* Product text overlays the image inside an eight-product paged gallery. */
.home-promotion-info-col--text-only {
    display: flex;
    min-height: 39rem;
}

.home-promotion-info-col--text-only .home-promotion-info-col__content {
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 768px) {
    .home-promotion-info-col--text-only .home-promotion-feature__eyebrow {
        position: absolute;
        top: clamp(3.2rem, 3.5vw, 4.8rem);
        left: clamp(2.6rem, 3vw, 4rem);
        margin-bottom: 0;
    }
}

@media (max-width: 575px) {
    .media-gallery .portfolio__items--content {
        flex: 0 0 auto;
        padding: 1.2rem 1.2rem 0;
    }

    .media-gallery .portfolio__items--title {
        height: auto;
        min-height: 0;
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

    .media-gallery .portfolio__items--desc {
        height: auto;
        min-height: 0;
        margin-top: .6rem;
        font-size: 1.4rem;
        line-height: 2.3rem;
    }
}

.home-promotion-gallery-col {
    display: flex;
    min-width: 0;
    min-height: 39rem;
    overflow: hidden;
    border: 1px solid rgba(217, 119, 6, .14);
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 12px 30px rgba(86, 55, 23, .08);
    flex-direction: column;
}

.home-promotion-gallery-col__heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    flex: 0 0 auto;
    min-height: 6.8rem;
    overflow: hidden;
    padding: .9rem 1.6rem;
    border-bottom: 1px solid rgba(224, 132, 28, .16);
    background:
        radial-gradient(circle at 82% 20%, rgba(255, 190, 70, .2), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, .98) 0%, rgba(255, 248, 237, .96) 58%, rgba(255, 239, 215, .94) 100%);
}

.home-promotion-gallery-col__heading::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: .35rem;
    background: linear-gradient(90deg, #f5a300 0%, #ee3c32 52%, #008744 100%);
    content: "";
}

.home-promotion-gallery-col__heading-title {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.home-promotion-gallery-col__heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 4.2rem;
    width: 4.2rem;
    height: 4.2rem;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 1.3rem;
    background: linear-gradient(145deg, #ffb000 0%, #ef4b2f 100%);
    color: #ffffff;
    box-shadow: 0 7px 18px rgba(226, 86, 38, .24);
    font-size: 1.8rem;
    transform: rotate(-5deg);
}

.home-promotion-gallery-col__heading-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.15;
}

.home-promotion-gallery-col__heading-copy small {
    margin-bottom: .3rem;
    color: #b56614;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-promotion-gallery-col__heading-copy strong {
    overflow: hidden;
    color: #d92e2e;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .015em;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-promotion-gallery-col__heading-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: .55rem;
    min-height: 3.2rem;
    padding: .55rem 1.15rem;
    border: 1px solid rgba(0, 135, 68, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #008744;
    box-shadow: 0 4px 12px rgba(0, 96, 50, .08);
    font-size: 1.1rem;
    font-weight: 700;
}

.home-promotion-product-grid {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(2, minmax(0, 250px));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    justify-content: center;
    align-content: center;
    gap: 1.2rem;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 1.4rem;
    background: #f4f7f5;
    border-radius: 0 0 2rem 2rem;
}

.home-promotion-product-tile {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-top: 3.5px solid #008744 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.home-promotion-product-tile:hover,
.home-promotion-product-tile:focus-within {
    border: 1.5px solid #008744 !important;
    box-shadow: 0 8px 24px rgba(0, 135, 68, 0.2) !important;
}

.home-promotion-product-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease, filter .4s ease;
}

.home-promotion-product-tile__link {
    display: block;
    width: 100%;
    height: 100%;
}

.home-promotion-product-tile::after {
    display: none !important;
}

.home-promotion-product-tile__overlay {
    position: absolute;
    z-index: 2;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 5.8rem;
    padding: .8rem 1.2rem;
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 135, 68, 0.32);
    box-shadow: 0 6px 20px rgba(28, 78, 51, 0.16);
    color: #008744;
    text-align: center;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.home-promotion-product-tile__overlay strong {
    display: -webkit-box;
    width: 100%;
    overflow: hidden;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-promotion-product-tile__overlay strong a {
    max-width: 100%;
    color: inherit;
    white-space: normal;
}

.home-promotion-product-tile__overlay small {
    margin-top: .3rem;
    color: #00723a;
    font-size: 1.25rem;
    font-weight: 600;
}

.home-promotion-product-tile__prices {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: .25rem .55rem;
    line-height: 1.2;
}

.home-promotion-product-tile__prices del {
    color: #718078;
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration-thickness: 1px;
}

.home-products-section .swiper-slide,
.home-today-delicious-products .swiper-slide,
.home-buffet-services__swiper .swiper-slide {
    flex-direction: column;
}

.home-products-section .home-promotion-product-tile,
.home-today-delicious-products .home-promotion-product-tile,
.home-buffet-services .home-promotion-product-tile {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    height: auto !important;
}

.home-product-tile__outside-price {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: .7rem;
    min-height: 3.8rem;
    margin-top: .5rem;
    padding: .6rem .8rem;
    color: #008744;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.home-product-tile__outside-price::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid rgba(0, 135, 68, .2);
    border-radius: .9rem;
    background: rgba(0, 135, 68, .12);
    box-shadow: 0 .4rem 1rem rgba(0, 87, 45, .06);
    content: "";
    pointer-events: none;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.home-products-section .swiper-slide:hover .home-product-tile__outside-price::before,
.home-today-delicious-products .swiper-slide:hover .home-product-tile__outside-price::before,
.home-buffet-services .swiper-slide:hover .home-product-tile__outside-price::before {
    border-color: rgba(0, 135, 68, .35);
    background: rgba(0, 135, 68, .22);
    box-shadow: 0 .55rem 1.2rem rgba(0, 87, 45, .12);
}

.home-product-tile__outside-price del {
    color: #718078;
    font-size: 1.15rem;
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

@media (max-width: 767px) {
    .home-product-tile__outside-price::before {
        right: 0;
        left: 0;
        border-radius: .85rem;
    }
}

.home-products-section .home-promotion-product-tile__overlay,
.home-today-delicious-products .home-promotion-product-tile__overlay,
.home-buffet-services .home-promotion-product-tile__overlay {
    right: .8rem;
    bottom: .8rem;
    left: .8rem;
    min-height: 4.8rem;
    padding: .5rem .9rem;
}

.home-products-section .home-promotion-product-tile__title-swap,
.home-today-delicious-products .home-promotion-product-tile__title-swap,
.home-buffet-services .home-promotion-product-tile__title-swap {
    min-height: 3.7rem;
}

.home-products-section .home-promotion-product-tile__overlay strong,
.home-today-delicious-products .home-promotion-product-tile__overlay strong,
.home-buffet-services .home-promotion-product-tile__overlay strong {
    font-size: 1.35rem;
}

.home-promotion-product-tile__discount {
    position: absolute;
    z-index: 4;
    top: .8rem;
    left: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: .35rem .75rem;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 999px;
    background: #e93535;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(185, 28, 28, .28);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.home-promotion-product-tile__title-swap {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 4.1rem;
}

.home-promotion-product-tile__title-swap > strong,
.home-promotion-product-tile__title-swap > .home-promotion-product-tile__cart {
    grid-area: 1 / 1;
    width: 100%;
    margin: 0;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.home-promotion-product-tile__title-swap > strong {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.home-promotion-product-tile__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #008744;
    font-size: 1.35rem;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(.5rem);
    transition: opacity .25s ease, transform .25s ease, color .2s ease, visibility .25s ease;
}

.home-promotion-product-tile:hover .home-promotion-product-tile__title-swap > strong,
.home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__title-swap > strong {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-.5rem);
}

.home-promotion-product-tile:hover .home-promotion-product-tile__cart,
.home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__cart {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    color: #ffffff;
}

.home-promotion-product-tile__cart:hover,
.home-promotion-product-tile__cart:focus-visible {
    border: none;
    background: transparent;
    color: #ffffff;
}

.home-promotion-pages-wrapper {
    --promotion-grid-width: 51.2rem;
    --promotion-nav-size: 4.4rem;
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    min-width: 0;
    background: #f4f7f5;
}

.home-promotion-pages--activation {
    width: 100%;
    height: 100%;
    min-width: 0;
}

.home-promotion-pages--activation > .swiper-wrapper,
.home-promotion-pages--activation > .swiper-wrapper > .swiper-slide {
    height: 100%;
    min-width: 0;
}

.home-promotion-pages--activation > .swiper-wrapper > .swiper-slide {
    display: block;
}

@media (min-width: 1200px) {
    .home-promotion-pages-wrapper {
        --promotion-grid-width: 55.2rem;
    }

    .home-promotion-product-grid {
        grid-template-columns: repeat(2, minmax(0, 270px));
    }

    .home-promotion-pages-wrapper > .swiper-button-prev {
        left: calc((100% - var(--promotion-grid-width)) / 4 - var(--promotion-nav-size) / 2) !important;
    }

    .home-promotion-pages-wrapper > .swiper-button-next {
        right: calc((100% - var(--promotion-grid-width)) / 4 - var(--promotion-nav-size) / 2) !important;
    }
}

.home-promotion-pages-wrapper > .swiper-button-next::before,
.home-promotion-pages-wrapper > .swiper-button-prev::before {
    position: absolute;
    inset: -.45rem;
    border: 1px solid rgba(0, 135, 68, .3);
    border-radius: 50%;
    content: "";
    pointer-events: none;
    animation: home-promotion-nav-ring 2.2s ease-out infinite;
}

.home-promotion-pages-wrapper > .swiper-button-next::before {
    animation-delay: -1.1s;
}

@keyframes home-promotion-nav-ring {
    0%, 100% {
        opacity: 0;
        transform: scale(.88);
    }

    45% {
        opacity: .65;
    }

    80% {
        opacity: 0;
        transform: scale(1.12);
    }
}

@media (min-width: 768px) {
    .home-promotion-product-grid .home-promotion-product-tile img {
        box-sizing: border-box;
        padding: .5rem;
        object-fit: contain;
    }
}

.home-promotion-product-tile:hover img,
.home-promotion-product-tile:focus-visible img {
    filter: saturate(1.08);
    transform: scale(1.06);
}

.home-promotion-product-tile:hover .home-promotion-product-tile__overlay,
.home-promotion-product-tile:focus-visible .home-promotion-product-tile__overlay,
.home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__overlay {
    background: rgba(0, 135, 68, 0.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 24px rgba(0, 135, 68, 0.45);
    transform: translateY(-.2rem);
}

.home-promotion-product-tile:hover .home-promotion-product-tile__overlay,
.home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__overlay,
.home-promotion-product-tile:hover .home-promotion-product-tile__overlay small,
.home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__overlay small,
.home-promotion-product-tile:hover .home-promotion-product-tile__old-price,
.home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__old-price {
    color: #ffffff;
}

.home-promotion-product-tile:hover .home-promotion-product-tile__prices del,
.home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__prices del {
    color: rgba(255, 255, 255, .78);
}

@media (hover: hover) and (pointer: fine) {
    .home-promotion-product-tile:hover .home-promotion-product-tile__title-swap > strong {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-.5rem);
    }

    .home-promotion-product-tile:hover .home-promotion-product-tile__title-swap > .home-promotion-product-tile__cart {
        position: static;
        display: inline-flex;
        width: auto;
        min-width: 0;
        min-height: 2.8rem;
        height: auto;
        padding: .25rem .9rem;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: #ffffff;
        font-size: 1.35rem;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
    }

    .home-promotion-product-tile:hover .home-promotion-product-tile__title-swap > .home-promotion-product-tile__cart:hover,
    .home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__title-swap > .home-promotion-product-tile__cart:focus-visible {
        border-color: rgba(255, 255, 255, .78);
        background: rgba(255, 255, 255, .16);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 2px rgba(255, 255, 255, .05);
        color: #ffffff;
        transform: none;
    }
}

@media (hover: none) and (pointer: coarse) {
    .home-promotion-product-tile:hover img,
    .home-promotion-product-tile:has(:focus-visible) img {
        filter: none;
        transform: none;
    }

    .home-promotion-product-tile:hover .home-promotion-product-tile__overlay,
    .home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__overlay {
        border-color: rgba(0, 135, 68, .32);
        background: rgba(255, 255, 255, .78);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        box-shadow: 0 6px 20px rgba(28, 78, 51, .16);
        color: #008744;
        transform: none;
    }

    .home-promotion-product-tile:hover .home-promotion-product-tile__title-swap > strong,
    .home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__title-swap > strong {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .home-promotion-product-tile:hover .home-promotion-product-tile__overlay small,
    .home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__overlay small,
    .home-promotion-product-tile:hover .home-promotion-product-tile__old-price,
    .home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__old-price {
        color: #00723a;
    }

    .home-promotion-product-tile:hover .home-promotion-product-tile__prices del,
    .home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__prices del {
        color: #718078;
    }

    .home-promotion-product-tile__overlay {
        min-height: 4.6rem;
        padding: .55rem .7rem;
    }

    .home-promotion-product-tile__title-swap {
        position: relative;
        min-height: 3.5rem;
        padding-right: 2.9rem;
    }

    .home-promotion-product-tile__title-swap > strong,
    .home-promotion-product-tile:has(:focus-visible) .home-promotion-product-tile__title-swap > strong {
        display: -webkit-box;
        overflow: hidden;
        font-size: 1.15rem;
        line-height: 1.25;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .home-promotion-product-tile__title-swap > .home-promotion-product-tile__cart {
        position: absolute;
        top: 50%;
        right: 0;
        display: inline-flex;
        width: 2.6rem;
        height: 2.6rem;
        min-width: 2.6rem;
        min-height: 2.6rem;
        padding: 0;
        border-radius: 50%;
        background: #008744;
        color: #ffffff;
        font-size: 0;
        line-height: 1;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(-50%) !important;
    }

    .home-promotion-product-tile__cart i {
        position: absolute;
        inset: 0;
        display: grid;
        width: 100%;
        height: 100%;
        place-items: center;
        margin: 0;
        font-size: 1.1rem;
        line-height: 1;
    }

    .home-promotion-product-tile__cart i::before {
        display: block;
        line-height: 1;
    }

    .home-promotion-product-tile__overlay small {
        margin-top: .15rem;
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .home-promotion-product-tile__discount {
        top: .55rem;
        left: .55rem;
        min-height: 2.2rem;
        padding: .3rem .55rem;
        font-size: 1rem;
    }
}

@media (max-width: 991px) {
    .home-promotion-info-col--text-only,
    .home-promotion-gallery-col {
        min-height: 38rem;
    }
}

@media (max-width: 767px) {
    .home-promotion-pages-wrapper > .swiper-button-next,
    .home-promotion-pages-wrapper > .swiper-button-prev {
        display: none !important;
    }

    .home-promotion-gallery-col {
        height: auto !important;
        min-height: 0 !important;
    }

    .home-promotion-pages-wrapper {
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .home-promotion-pages--activation,
    .home-promotion-pages--activation > .swiper-wrapper,
    .home-promotion-pages--activation > .swiper-wrapper > .swiper-slide {
        height: auto !important;
        min-height: 0 !important;
    }

    .home-promotion-product-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none !important;
        grid-auto-rows: auto;
        align-content: start;
        height: auto !important;
        min-height: 0 !important;
        gap: 1.6rem;
        padding: 1.6rem;
    }

    .home-promotion-product-grid .home-promotion-product-tile {
        width: 100%;
        max-width: 42rem;
        margin-right: auto;
        margin-left: auto;
        height: auto !important;
    }

    .home-today-delicious-products .home-product-slider-nav-shell {
        width: 100%;
        max-width: 42rem;
        margin-right: auto;
        margin-left: auto;
    }

    .home-promotion-product-grid .home-promotion-product-tile__overlay {
        min-height: 6.4rem;
        padding: .85rem 1rem;
    }

    .home-promotion-product-grid .home-promotion-product-tile__title-swap {
        min-height: 3.8rem;
        padding-right: 3.8rem;
    }

    .home-promotion-product-grid .home-promotion-product-tile__title-swap > strong {
        font-size: 1.45rem;
    }

    .home-promotion-product-grid .home-promotion-product-tile__title-swap > .home-promotion-product-tile__cart {
        width: 3.3rem;
        height: 3.3rem;
        min-width: 3.3rem;
        min-height: 3.3rem;
    }

    .home-promotion-product-grid .home-promotion-product-tile__overlay small {
        font-size: 1.25rem;
    }
}

@media (max-width: 575px) {
    .home-promotion-info-col--text-only,
    .home-promotion-gallery-col {
        border-radius: 1.4rem;
    }

    .home-promotion-feature__title {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .home-promotion-info-col--text-only {
        min-height: 42rem;
    }

    .home-promotion-gallery-col__heading {
        min-height: 6.6rem;
        padding: .9rem 1.1rem;
    }

    .home-promotion-gallery-col__heading-title {
        gap: .8rem;
    }

    .home-promotion-gallery-col__heading-icon {
        flex-basis: 3.6rem;
        width: 3.6rem;
        height: 3.6rem;
        border-radius: 1.1rem;
        font-size: 1.5rem;
    }

    .home-promotion-gallery-col__heading-copy small {
        font-size: .9rem;
    }

    .home-promotion-gallery-col__heading-copy strong {
        font-size: 1.55rem;
    }

    .home-promotion-gallery-col__heading-badge {
        display: none;
    }

    .home-promotion-product-tile__overlay {
        right: .6rem;
        bottom: .6rem;
        left: .6rem;
        min-height: 4.6rem;
        padding: .55rem .7rem;
    }

    .home-promotion-product-tile__overlay strong {
        display: -webkit-box;
        font-size: 1.15rem;
        line-height: 1.25;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

/* Swiper slide tile adaptation for home products */
.swiper-slide .home-promotion-product-tile {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    border-radius: 0.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.home-promotion-product-tile .product__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 3;
}

@media (max-width: 575px) {
    .home-promotion-period-badge {
        width: 100%;
        padding-right: 1rem;
    }

    .home-promotion-period-badge__content strong {
        font-size: 1.15rem;
    }
}

.home-promotion-product-tile__old-price {
    margin-left: .5rem;
    color: #6b7f74;
    font-size: 1.15rem;
    font-weight: 400;
    text-decoration: line-through;
}

/* ── Global Contact Redirect CTA Section ── */
.contact-redirect-cta-section {
    padding: 4.2rem 0 !important;
    background-color: #f8fafc !important;
}

@media (max-width: 768px) {
    .contact-redirect-cta-section {
        padding: 2.8rem 0 !important;
    }
}

.contact-redirect-cta-card {
    background: #eef8f3 !important;
    border: 1.5px solid #ccecd7 !important;
    border-radius: 2.2rem !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 3rem 2.4rem !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
    box-shadow: 0 6px 20px rgba(0, 135, 68, 0.05) !important;
}

    .contact-redirect-cta-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 18px 40px rgba(0, 135, 68, 0.14) !important;
        border-color: #008744 !important;
    }

.contact-redirect-cta-title {
    font-size: 2.1rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1e293b !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.contact-redirect-cta-desc {
    font-size: 1.48rem !important;
    line-height: 1.68 !important;
    color: #475569 !important;
    max-width: 660px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.contact-redirect-cta-btn {
    background-color: #008744 !important;
    border-color: #008744 !important;
    color: #ffffff !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 16px rgba(0, 135, 68, 0.22) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
}

    .contact-redirect-cta-btn:hover {
        transform: translateY(-3px) scale(1.03) !important;
        box-shadow: 0 12px 28px rgba(0, 135, 68, 0.38) !important;
        background-color: #00723a !important;
        color: #ffffff !important;
    }

@media (max-width: 768px) {
    .contact-redirect-cta-card {
        border-radius: 1.6rem !important;
        padding: 2.2rem 1.4rem !important;
    }

    .contact-redirect-cta-title {
        font-size: 1.65rem !important;
    }

    .contact-redirect-cta-desc {
        font-size: 1.25rem !important;
        max-width: 100% !important;
    }

    .contact-redirect-cta-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ── Sidebar Blog Search Box ── */
.sidebar-search-form {
    margin-top: 0.8rem;
}

.sidebar-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 50px !important;
    padding: 4px 4px 4px 18px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

    .sidebar-search-box:focus-within {
        border-color: #008744 !important;
        box-shadow: 0 0 0 3.5px rgba(0, 135, 68, 0.14) !important;
    }

.sidebar-search-input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 1.35rem !important;
    color: #1e293b !important;
    width: 100%;
    padding: 8px 10px 8px 0 !important;
}

    .sidebar-search-input::placeholder {
        color: #94a3b8 !important;
        font-size: 1.3rem !important;
    }

.sidebar-search-btn {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    background-color: #008744 !important;
    border: none !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 10px rgba(0, 135, 68, 0.25) !important;
    cursor: pointer;
}

.sidebar-search-btn:hover {
    background-color: #00723a !important;
    transform: scale(1.06) !important;
    box-shadow: 0 6px 14px rgba(0, 135, 68, 0.35) !important;
}

/* Home deals: campaign panel with three compact product cards. */

.home-deals__view-all {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
    color: #16834d;
    font-size: 1.35rem;
    font-weight: var(--df-font-weight-semibold);
}

.home-deals__view-all:hover,
.home-deals__view-all:focus-visible {
    color: #e85d18;
}

.home-deals__campaign strong {
    margin-top: 1.2rem;
    color: var(--df-primary, #008744);
    font-size: 2rem;
    font-weight: 800;
    line-height: var(--df-line-height-compact);
    text-transform: uppercase;
}

.home-deals__campaign p {
    display: block;
    max-width: 34rem;
    margin: 1.6rem 0 0;
    overflow: visible;
    color: var(--df-dark-muted, #4a5568);
    font-size: 1.35rem;
    font-weight: var(--df-font-weight-regular);
    line-height: var(--df-line-height-body);
    overflow-wrap: anywhere;
}

.home-deals__campaign-decoration--one {
    top: -6rem;
    right: -5rem;
    width: 17rem;
    height: 17rem;
}

.home-deals__campaign-decoration--two {
    right: 2rem;
    bottom: -5.5rem;
    width: 12rem;
    height: 12rem;
}

.home-promotion-compact-card:hover,
.home-promotion-compact-card:focus-within {
    border-color: rgba(0, 135, 68, .45);
    box-shadow: 0 .8rem 2rem rgba(24, 73, 48, .12);
    transform: translateY(-.2rem);
}

.home-promotion-compact-card:hover .home-promotion-compact-card__image {
    transform: scale(1.035);
}

.home-promotion-compact-card__content h3 a:hover,
.home-promotion-compact-card__content h3 a:focus-visible {
    color: #008744;
}

.home-promotion-compact-card__promotion.is-empty {
    visibility: hidden;
}

.home-promotion-compact-card__prices del {
    color: #98a29d;
    font-size: 1.4rem;
}


/* Home flash sale presentation. */
.home-deals {
    padding: 3.2rem 0;
    border-bottom: 1px solid #edf1ee;
}

.home-deals__shell {
    padding: 2.4rem;
    border: 1px solid #f1f5f9;
    border-radius: 1.8rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.home-deals__heading-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.6rem;
    min-width: 0;
    margin-bottom: 2.4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.home-deals__heading-row .home-deals__heading {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.home-deals__view-all--fixed {
    padding-right: .5rem;
    transform-origin: right center;
    white-space: nowrap;
}

.home-deals__heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2rem;
    margin-bottom: 2.4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.home-deals__heading-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.home-deals__heading-main {
    gap: 1.6rem;
    min-width: 0;
}

.home-deals__heading-actions {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 1.6rem;
    min-width: 0;
}

.home-deals__heading-actions .home-deals__view-all {
    margin-left: auto;
}

.home-deals__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 0;
    color: #0f172a;
    font-size: 2.4rem;
    font-weight: var(--df-font-weight-extrabold);
    letter-spacing: -.03em;
    line-height: 1.2;
    text-transform: uppercase;
}

.home-deals__title-icon {
    color: #ef4444;
    font-size: 2.6rem;
    line-height: 1;
}

.home-deals__flash-sale-tag {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    margin-left: .2rem;
    padding: .55rem 1rem;
    border-radius: .6rem;
    background: var(--df-secondary);
    color: #fff;
    font-size: 1.15rem;
    font-weight: var(--df-font-weight-extrabold);
    letter-spacing: .02em;
    line-height: 1;
    text-transform: uppercase;
}

.home-deals__countdown {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 4rem;
    padding: .65rem 1rem;
    border-radius: .9rem;
    background: #f1f5f9;
    color: #64748b;
    font-size: 1.3rem;
    font-weight: var(--df-font-weight-semibold);
    white-space: nowrap;
}

.home-deals__countdown-label {
    font-weight: var(--df-font-weight-regular);
}

.home-deals__countdown-unit {
    margin-left: -.25rem;
    font-size: 1.1rem;
    font-weight: var(--df-font-weight-semibold);
    text-transform: lowercase;
}

.home-deals__countdown strong {
    min-width: 3.1rem;
    padding: .35rem .55rem;
    border-radius: .55rem;
    background: #1e293b;
    color: #fff;
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    text-align: center;
}

.home-deals__heading-title-stage {
    display: grid;
    min-width: 0;
}

.home-deals__heading-title-stage > .home-deals__heading-title,
.home-deals__campaign-copy-stage > .home-deals__campaign-copy,
.home-deals__offer-stage > .home-deals__text-panel {
    grid-area: 1 / 1;
}

.home-deals__campaign-copy-stage,
.home-deals__offer-stage {
    display: grid;
    min-width: 0;
}

.home-deals__campaign-copy-stage {
    position: relative;
    z-index: 3;
}

.home-deals__text-panel {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(.8rem);
    transition: opacity .58s ease, transform .58s ease, visibility 0s linear .58s;
}

.home-deals__text-panel.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
}

.home-deals__slider-controls {
    position: absolute;
    z-index: 4;
    bottom: 1rem;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.2rem;
    margin: 0;
    transform: translateX(-50%);
}

.home-deals__slider-pagination {
    position: static;
    display: flex;
    width: auto !important;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.home-deals__slider-dot {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cfd8d4;
    opacity: 1;
    transition: width .25s ease, background-color .25s ease;
}

.home-deals__slider-dot.is-active {
    width: 3.2rem;
    background: var(--df-primary);
}

.home-deals__slider-dot:focus-visible {
    outline: .2rem solid #fff;
    outline-offset: .2rem;
}

.home-deals__layout {
    display: grid;
    grid-template-columns: minmax(34rem, 1.3fr) minmax(0, 2.7fr);
    align-items: stretch;
    gap: 2rem;
}

.home-deals__campaign-column {
    position: relative;
    display: flex;
    min-width: 0;
}

.home-deals__campaign-column .home-deals__campaign {
    width: 100%;
    height: 100%;
}

.home-deals__campaign {
    --discount-center-top: 7.45rem;
    --discount-center-right: 4.65rem;
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(217, 119, 6, .42);
    border-radius: 1.8rem;
    background: linear-gradient(145deg, #fffdf1 0%, #fff3bf 46%, #ffe27d 100%);
    box-shadow: 0 .8rem 2.2rem rgba(180, 105, 18, .12);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.home-deals__campaign.is-dragging {
    cursor: grabbing;
}

.home-deals__campaign-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    padding: 2.8rem 2.4rem;
}

.home-deals__badge {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    min-height: 0;
    margin-bottom: 1.8rem;
    padding: .65rem 1.2rem;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 1.15rem;
    font-weight: var(--df-font-weight-extrabold);
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 .45rem 1.2rem rgba(220, 38, 38, .2);
}

.home-deals__campaign h3 {
    margin: 0;
    color: var(--df-dark);
    font-size: 2rem;
    font-weight: var(--df-font-weight-extrabold);
    line-height: 1.3;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.home-deals__campaign-description {
    margin-top: 1rem !important;
    color: var(--df-dark-muted) !important;
    font-size: 1.3rem !important;
    line-height: 1.45 !important;
}

.home-deals__offer {
    position: relative;
    z-index: 2;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: 0;
    padding: 1.4rem;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, .78);
    box-shadow:
        .7rem .65rem 0 rgba(255, 248, 218, .48),
        0 .9rem 2rem rgba(180, 105, 18, .14),
        inset 0 1px 0 rgba(255, 255, 255, .8);
    backdrop-filter: blur(.7rem);
}

.home-deals__offer::after {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 8%;
    width: 38%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 247, 214, .08));
    clip-path: polygon(14% 0, 100% 0, 84% 100%, 0 100%);
    content: "";
    pointer-events: none;
}

.home-deals__offer > span,
.home-deals__offer-stage {
    position: relative;
    z-index: 1;
}

.home-deals__offer > span {
    color: var(--df-primary-dark);
    font-size: 1.2rem;
    font-weight: var(--df-font-weight-bold);
    text-transform: uppercase;
}

.home-deals__offer > span i {
    margin-right: .45rem;
    color: #ef4444;
}

.home-deals__offer strong {
    display: -webkit-box;
    max-height: 8.7rem;
    margin: 0;
    overflow: hidden;
    color: #dc2626;
    font-size: 1.6rem;
    line-height: 1.35;
    text-transform: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.home-deals__benefits {
    display: grid;
    gap: 1.1rem;
    margin: 2rem 0 0;
    padding: 0;
    color: var(--df-dark-muted);
    font-size: 1.25rem;
    list-style: none;
}

.home-deals__benefits li {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.home-deals__benefits i {
    flex: 0 0 auto;
    color: var(--df-primary);
    font-size: 1.45rem;
}

.home-deals__campaign-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    width: 100%;
    min-height: 5rem;
    margin-top: 2.4rem;
    padding: 1rem 1.6rem;
    border: 0;
    border-radius: 1.2rem;
    background: var(--df-primary);
    color: #fff;
    box-shadow: 0 .4rem .9rem rgba(0, 135, 68, .2);
    font-size: 1.45rem;
    font-weight: var(--df-font-weight-bold);
}

.home-deals__campaign-link:hover,
.home-deals__campaign-link:focus-visible {
    background: var(--df-primary-dark);
    color: #fff;
    transform: translateY(-.15rem);
}

.home-deals__gift-stage {
    position: relative;
    z-index: 1;
    width: min(32rem, 94%);
    height: 17.5rem;
    margin: .8rem auto -3.6rem;
    pointer-events: none;
}

.home-deals__campaign-decoration {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    filter: drop-shadow(0 1rem 1.4rem rgba(217, 119, 6, .16));
    animation: home-deals-gift-float 2.8s ease-in-out infinite;
    transform: translate3d(0, .4rem, 0) rotate(-2deg);
    will-change: transform;
}

@keyframes home-deals-gift-float {
    0%, 100% {
        transform: translate3d(0, .4rem, 0) rotate(-2deg);
    }

    50% {
        transform: translate3d(0, -1.4rem, 0) rotate(-.5deg);
    }
}

.home-deals__discount-decoration {
    position: absolute;
    z-index: 2;
    top: calc(var(--discount-center-top) - 2.65rem);
    right: calc(var(--discount-center-right) - 2.65rem);
    display: grid;
    width: 5.3rem;
    height: 5.3rem;
    place-items: center;
    border: 1px solid rgba(234, 88, 12, .2);
    border-radius: 1.2rem;
    background: linear-gradient(145deg, rgba(255, 235, 183, .94), rgba(251, 146, 60, .5));
    box-shadow: 0 .7rem 1.6rem rgba(194, 94, 14, .17);
    color: rgba(234, 88, 12, .72);
    font-size: 2.2rem;
    pointer-events: none;
    transform: rotate(12deg);
    animation: home-deals-discount-float 3s ease-in-out infinite;
}

@keyframes home-deals-discount-float {
    0%, 100% {
        transform: translate3d(.4rem, .9rem, 0) rotate(16deg);
    }

    50% {
        transform: translate3d(-.4rem, -.9rem, 0) rotate(4deg);
    }
}

.home-deals__confetti {
    --confetti-rotation: 0deg;
    position: absolute;
    z-index: 2;
    display: block;
    width: .65rem;
    height: 2.1rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #fbbf24, #f97316);
    box-shadow: 0 .2rem .5rem rgba(194, 94, 14, .16);
    transform: rotate(var(--confetti-rotation));
    animation: home-deals-confetti-float 3s ease-in-out infinite;
}

.home-deals__confetti--one {
    --confetti-rotation: -34deg;
    top: 1.6rem;
    left: 1rem;
    animation-delay: -.5s;
}

.home-deals__confetti--two {
    --confetti-rotation: 42deg;
    top: 5.6rem;
    right: 1.8rem;
    height: 1.6rem;
    background: #fb923c;
    animation-duration: 3.6s;
    animation-delay: -1.8s;
}

.home-deals__confetti--three {
    --confetti-rotation: 28deg;
    bottom: 1.4rem;
    left: 2rem;
    width: .55rem;
    height: 1.7rem;
    background: #fdba74;
    animation-duration: 3.2s;
    animation-delay: -1s;
}

@keyframes home-deals-confetti-float {
    0%, 100% {
        transform: translate3d(-.4rem, .8rem, 0) rotate(calc(var(--confetti-rotation) - 12deg));
    }

    50% {
        transform: translate3d(.4rem, -.8rem, 0) rotate(calc(var(--confetti-rotation) + 12deg));
    }
}

.home-deals__campaign-pattern {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    background-color: transparent;
    background-image:
        radial-gradient(ellipse at 52% 48%, rgba(255, 255, 255, .46) 0, rgba(255, 255, 255, 0) 38%),
        radial-gradient(ellipse at 10% 88%, rgba(251, 191, 36, .22) 0, rgba(251, 191, 36, 0) 36%),
        url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%23d97706' fill-opacity='0.11'/%3E%3Cpath d='M8 8 L10 8 M9 7 L9 9' stroke='%23ffffff' stroke-width='1.1' stroke-opacity='0.8' stroke-linecap='round'/%3E%3Ccircle cx='31' cy='11' r='2.2' stroke='%23d97706' stroke-width='0.9' stroke-opacity='0.1' fill='none'/%3E%3Cpath d='M30 30 L32 30 M31 29 L31 31' stroke='%23d97706' stroke-width='0.9' stroke-opacity='0.11' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='30' r='1.4' fill='%23ffffff' fill-opacity='0.75'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: auto, auto, 40px 40px;
    pointer-events: none;
}

.home-deals__pattern-circle-svg {
    position: absolute;
    top: var(--discount-center-top);
    right: var(--discount-center-right);
    width: 51rem;
    height: 51rem;
    max-width: none;
    transform: translate(50%, -50%);
    pointer-events: none;
}

.home-deals__pattern-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.home-deals__campaign-pattern::before,
.home-deals__campaign-pattern::after {
    position: absolute;
    border: 0;
    content: "";
}

.home-deals__campaign-pattern::before {
    top: -8rem;
    right: -10rem;
    width: 27rem;
    height: 22rem;
    border-radius: 46% 0 58% 52%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .24), rgba(245, 158, 11, .07));
    transform: rotate(-14deg);
}

.home-deals__campaign-pattern::after {
    right: -8rem;
    bottom: -5rem;
    width: 25rem;
    height: 15rem;
    border-radius: 60% 42% 0 0;
    background: linear-gradient(145deg, rgba(245, 158, 11, .08), rgba(255, 255, 255, .18));
    transform: rotate(-8deg);
}

.home-deals__products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.6rem;
    min-width: 0;
}

.home-deals__products .home-promotion-compact-card {
    width: 100%;
    height: 100%;
    justify-self: center;
    align-self: stretch;
}

.home-promotion-compact-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    height: 100%;
    padding: 1.4rem;
    border: 1px solid rgba(203, 213, 225, .8);
    border-radius: 1.6rem;
    background: #fff;
    box-shadow: none;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.home-promotion-compact-card__image-link {
    position: relative;
    display: block;
    height: 16rem;
    aspect-ratio: 1 / .82;
    margin-bottom: 1.2rem;
    overflow: hidden;
    border: 0;
    border-radius: 1.2rem;
    background: #f8fafc;
}

.home-promotion-compact-card__image {
    display: block;
    width: 100%;
    height: 100%;
    padding: .8rem;
    object-fit: contain;
    transition: transform .3s ease;
}

.home-promotion-compact-card__discount {
    position: absolute;
    z-index: 2;
    top: .7rem;
    left: .7rem;
    min-width: 4rem;
    padding: .5rem .85rem;
    border-radius: .8rem;
    background: #dc2626;
    color: #fff;
    font-size: 1.2rem;
    font-weight: var(--df-font-weight-bold);
    line-height: 1;
    text-align: center;
}

.home-promotion-compact-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .6rem;
    padding: 0;
    text-align: left;
}

.home-promotion-compact-card__specification {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 1.4rem;
    overflow: hidden;
    color: var(--df-primary);
    font-size: 1.15rem;
    font-weight: var(--df-font-weight-bold);
    letter-spacing: .06em;
    line-height: 1.3;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.home-promotion-compact-card__specification i {
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.home-promotion-compact-card__specification.is-empty {
    visibility: hidden;
}

.home-promotion-compact-card__content h3 {
    display: -webkit-box;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    color: #27332d;
    font-size: 1.7rem;
    font-weight: var(--df-font-weight-semibold);
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-promotion-compact-card__promotion {
    display: -webkit-box;
    height: 3.8rem;
    min-height: 3.8rem;
    max-height: 3.8rem;
    margin: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 1.3rem;
    font-weight: var(--df-font-weight-regular);
    line-height: var(--df-line-height-compact);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-promotion-compact-card__stock-area {
    min-height: 4.4rem;
}

.home-promotion-compact-card__stock {
    margin-top: 1.2rem;
}

.home-promotion-compact-card__stock > div {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .55rem;
    color: #64748b;
    font-size: 1.15rem;
}

.home-promotion-compact-card__stock strong {
    color: #ea580c;
}

.home-promotion-compact-card__stock-track {
    display: block;
    height: .8rem;
    overflow: hidden;
    border-radius: 999px;
    background: #f1f5f9;
}

.home-promotion-compact-card__stock-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.home-promotion-compact-card__footer {
    margin-top: auto;
    padding-top: 1.6rem;
    border-top: 1px solid #f1f5f9;
}

.home-promotion-compact-card__prices {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    min-height: 0;
    margin: 0 0 1.3rem;
}

.home-promotion-compact-card__prices-left {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
}

.home-promotion-compact-card__price {
    color: #dc2626;
    font-size: 2rem;
    font-weight: var(--df-font-weight-extrabold);
}

.home-promotion-compact-card__price.is-contact-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #047857;
}

.home-promotion-compact-card .product-box__unit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #b45309;
    background: #fffbeb;
    padding: 0.2rem 0.6rem;
    border-radius: 0.375rem;
    border: 1px solid #fde68a;
    white-space: nowrap;
    line-height: 1.2;
    margin-left: auto;
    text-transform: capitalize;
}


@media (min-width: 1200px) {
    .home-deals__campaign h3 {
        font-size: 2.4rem;
    }
}

@media (min-width: 992px) {
    .home-deals__campaign-copy-stage {
        padding-right: 5.8rem;
    }

    .home-deals .home-promotion-compact-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* Product image expands naturally to fill card height without empty bottom space */
    .home-deals .home-promotion-compact-card__image-link {
        flex: 1 1 auto;
        height: auto;
        min-height: 18rem;
        max-height: none;
        aspect-ratio: auto;
        margin-bottom: 1.2rem;
    }

    .home-deals .home-promotion-compact-card__content {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
    }

    /* Standardize title area to exactly 2 lines so all subsequent text aligns across cards */
    .home-deals .home-promotion-compact-card__content h3 {
        height: 4.6rem;
        min-height: 4.6rem;
        max-height: 4.6rem;
        line-height: 1.35;
    }

    .home-deals .home-promotion-compact-card__footer {
        margin-top: 1rem;
        padding-top: 0.8rem;
    }
}

@media (max-width: 1199px) {
    .home-deals__layout {
        grid-template-columns: minmax(28rem, 1.1fr) minmax(0, 2.4fr);
    }

    .home-deals__campaign-content {
        padding: 2.4rem 2rem;
    }

    .home-deals__gift-stage {
        width: min(27rem, 88%);
        height: 14.5rem;
        margin: .5rem auto -2.8rem;
    }

    .home-deals__discount-decoration {
        top: calc(var(--discount-center-top) - 2.25rem);
        right: calc(var(--discount-center-right) - 2.25rem);
        width: 4.5rem;
        height: 4.5rem;
        font-size: 1.9rem;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    /* Make campaign column and product cards stretch to same height */
    .home-deals__campaign-column,
    .home-deals__campaign {
        height: 100%;
    }

    .home-deals__products {
        padding: 0;
        align-items: stretch;
    }

    .home-deals .home-promotion-compact-card {
        padding: 1rem;
    }

    .home-deals .home-promotion-compact-card__image-link {
        min-height: 15rem;
    }

    .home-deals .home-promotion-compact-card__prices {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.3rem;
        margin-bottom: 0.8rem;
    }

    .home-deals .home-promotion-compact-card__prices-left {
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;
        gap: 0.3rem;
        min-width: 0;
    }

    .home-deals .home-promotion-compact-card__price {
        font-size: 1.45rem;
        white-space: nowrap;
    }

    .home-deals .home-promotion-compact-card del {
        font-size: 1.1rem;
        white-space: nowrap;
    }

    .home-deals .product-box__unit {
        font-size: 1rem;
        padding: 0.15rem 0.35rem;
        flex-shrink: 0;
        margin-left: auto;
    }

    /* Enough bottom padding so slider dots don't overlap the CTA button */
    .home-deals__campaign-content {
        padding: 2rem 1.8rem 3.6rem;
    }

    .home-deals__slider-controls {
        bottom: 1rem;
    }
}

@media (max-width: 991px) {
    .home-deals__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-deals__heading-row {
        align-items: start;
    }

    .home-deals__heading,
    .home-deals__heading-main {
        align-items: flex-start;
    }

    .home-deals__heading {
        flex-direction: column;
        gap: 1.2rem;
    }

    .home-deals__heading-main,
    .home-deals__heading-actions {
        width: 100%;
        min-width: 0;
    }

    .home-deals__heading-main {
        flex-direction: column;
        gap: 1.2rem;
    }

    .home-deals__heading-actions {
        align-items: center;
        justify-content: flex-start;
    }

    .home-deals__campaign {
        min-height: 0;
    }

    .home-deals__campaign-content {
        padding-bottom: 5rem;
    }

    .home-deals__campaign-content > div,
    .home-deals__offer {
        width: 100%;
    }

    .home-deals__offer {
        margin-top: 1.8rem;
    }

    .home-deals__slider-controls {
        bottom: 1.4rem;
    }
}

@media (max-width: 767px) {
    .home-deals__shell {
        padding: 1.6rem;
    }

    .home-deals__campaign {
        min-height: 0;
    }

}

@media (max-width: 575px) {
    .home-deals__gift-stage {
        width: min(24rem, 84%);
        height: 13rem;
        margin-bottom: -2.2rem;
    }

    .home-deals__discount-decoration {
        width: 4.2rem;
        height: 4.2rem;
        font-size: 1.7rem;
    }

    .home-deals__heading-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem;
    }

    .home-deals__view-all--fixed {
        justify-self: end;
    }

    .home-deals__view-all {
        font-size: 1.2rem;
    }

    .home-deals__title {
        font-size: 1.8rem;
    }

    .home-deals__title-icon {
        font-size: 2rem;
    }

    .home-deals__countdown {
        max-width: 100%;
    }

    .home-deals__campaign-content {
        padding: 2.2rem 1.8rem 5rem;
    }
}

@media (max-width: 359px) {
    .home-deals__countdown-label {
        display: none;
    }
}

/* Home category directory: modern card showcase with green accent indicator and interactive hover. */
.home-category-directory {
    padding: 4.6rem 0 5.2rem;
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
}

.home-category-directory__panel {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 2.4rem;
    padding: 3.2rem 3.6rem 3.8rem;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
}

.home-category-directory__heading {
    margin-bottom: 2.8rem;
    text-align: left;
}

.home-category-directory__heading h2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}

.home-category-directory__heading h2::before {
    content: "";
    display: inline-block;
    width: 0.6rem;
    height: 2.2rem;
    background: #008744;
    border-radius: 0.4rem;
    flex-shrink: 0;
}

.home-category-directory__heading p {
    margin: 0.8rem 0 0;
    color: #64748b;
    font-size: 1.4rem;
}

.home-category-directory__grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 6rem) / 4);
    grid-auto-flow: column;
    align-items: stretch;
    gap: 2rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.6rem 0.4rem 1.2rem;
    cursor: grab;
    scroll-padding-inline: 0.4rem;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.home-category-directory__grid::-webkit-scrollbar {
    display: none;
}

.home-category-directory__grid.is-mouse-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.home-category-directory__grid > * {
    scroll-snap-align: start;
}

.home-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 21rem;
    padding: 2.8rem 1.6rem 2.2rem;
    border: 1.5px solid #edf2f7;
    border-radius: 1.8rem;
    background: #f8fafc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    color: #1e293b;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-category-card:hover,
.home-category-card:focus-visible {
    background: #f0fdf4;
    border-color: #22c55e;
    box-shadow: 0 12px 28px -4px rgba(34, 197, 94, 0.18), 0 6px 12px -2px rgba(34, 197, 94, 0.08);
    color: #008744;
    transform: translateY(-0.4rem);
}

.home-category-card__image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9.6rem;
    height: 9.6rem;
    margin-bottom: 1.6rem;
    overflow: hidden;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 0.8rem;
    transition: all 0.3s ease;
}

.home-category-card:hover .home-category-card__image-wrap,
.home-category-card:focus-visible .home-category-card__image-wrap {
    border-color: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}

.home-category-card__image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.home-category-card:hover .home-category-card__image,
.home-category-card:focus-visible .home-category-card__image {
    transform: scale(1.08);
}

.home-category-card__name {
    display: -webkit-box;
    margin: 0 0 0.8rem;
    overflow: hidden;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    color: #1e293b;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    transition: color 0.3s ease;
}

.home-category-card:hover .home-category-card__name,
.home-category-card:focus-visible .home-category-card__name {
    color: #008744;
}

.home-category-card__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.4rem 1.2rem;
    border-radius: 9999px;
    background: #edf7f0;
    color: #059669;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.home-category-card__count::before {
    content: "•";
    font-size: 1.4rem;
    line-height: 1;
    color: #10b981;
}

.home-category-card:hover .home-category-card__count,
.home-category-card:focus-visible .home-category-card__count {
    background: #dcfce7;
    color: #15803d;
}

@media (max-width: 1199px) {
    .home-category-directory__panel {
        padding: 2.8rem 2.4rem 3.2rem;
        border-radius: 2rem;
    }

    .home-category-directory__grid {
        grid-auto-columns: calc((100% - 4.8rem) / 3.5);
    }
}

@media (max-width: 991px) {
    .home-category-directory__panel {
        padding: 2.4rem 2rem 2.8rem;
        border-radius: 1.8rem;
    }

    .home-category-directory__grid {
        grid-auto-columns: calc((100% - 3.2rem) / 3);
        gap: 1.6rem;
    }
}

@media (max-width: 767px) {
    .home-category-directory {
        padding: 3.2rem 0 3.6rem;
    }

    .home-category-directory__panel {
        padding: 2rem 1.6rem 2.4rem;
        border-radius: 1.6rem;
    }

    .home-category-directory__heading {
        margin-bottom: 2rem;
    }

    .home-category-directory__heading h2 {
        font-size: 1.9rem;
    }

    .home-category-directory__grid {
        grid-auto-columns: calc((100% - 1.6rem) / 2);
        gap: 1.2rem;
    }

    .home-category-card {
        min-height: 17rem;
        padding: 2rem 1.2rem 1.6rem;
        border-radius: 1.4rem;
    }

    .home-category-card__image-wrap {
        width: 7.6rem;
        height: 7.6rem;
        margin-bottom: 1.2rem;
    }

    .home-category-card__name {
        font-size: 1.35rem;
    }

    .home-category-card__count {
        font-size: 1.15rem;
        padding: 0.3rem 0.9rem;
    }
}

@media (max-width: 479px) {
    .home-category-directory__grid {
        grid-auto-columns: calc((100% - 1.2rem) / 1.4);
    }
}

/* Home news: three editorial cards matching the supplied desktop reference. */
.home-news-showcase {
    padding: 5.4rem 0 6rem;
    border-top: 1px solid #eef0f2;
    border-bottom: 1px solid #e7e9ec;
}

.home-news-showcase__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.8rem;
}

.home-news-showcase__heading h2 {
    margin: 0;
    color: #222925;
}

.home-news-showcase__heading > a {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    color: #16844b;
    font-size: 1.25rem;
    font-weight: var(--df-font-weight-medium);
}

.home-news-showcase__heading > a:hover,
.home-news-showcase__heading > a:focus-visible {
    color: #086f3a;
}

/* Consistent hover feedback for homepage "view all" links and arrows. */
.home-deals__view-all,
.home-news-showcase__heading > a {
    font-weight: var(--df-font-weight-regular);
    transform-origin: center;
    transition: color .22s ease, transform .22s ease;
}

.home-deals__view-all i,
.home-news-showcase__heading > a i {
    transition: transform .22s ease;
}

.home-deals__view-all:hover,
.home-deals__view-all:focus-visible,
.home-news-showcase__heading > a:hover,
.home-news-showcase__heading > a:focus-visible {
    transform: scale(1.06);
}

.home-deals__view-all:hover i,
.home-deals__view-all:focus-visible i,
.home-news-showcase__heading > a:hover i,
.home-news-showcase__heading > a:focus-visible i {
    transform: translateX(.3rem) scale(1.1);
}

.home-news-showcase__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 2rem;
}

.home-news-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e7e9e8;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .4rem 1.5rem rgba(37, 55, 46, .045);
    flex-direction: column;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.home-news-card:hover,
.home-news-card:focus-within {
    border-color: rgba(0, 135, 68, .3);
    box-shadow: 0 .9rem 2.2rem rgba(28, 68, 46, .1);
    transform: translateY(-.25rem);
}

.home-news-card__image-link {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f0f2f1;
}

.home-news-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.home-news-card:hover .home-news-card__image {
    transform: scale(1.035);
}

.home-news-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.7rem 1.8rem 2rem;
}

.home-news-card__date {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
    color: #8b938f;
    font-size: 1.15rem;
    font-weight: var(--df-font-weight-regular);
    line-height: var(--df-line-height-compact);
}

.home-news-card__content h3 {
    display: -webkit-box;
    min-height: 4.6rem;
    margin: 0;
    overflow: hidden;
    color: #252d29;
    font-size: 1.55rem;
    font-weight: var(--df-font-weight-bold);
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-news-card__content h3 a:hover,
.home-news-card__content h3 a:focus-visible {
    color: #008744;
}

.home-news-card__content p {
    display: -webkit-box;
    margin: 1rem 0 0;
    overflow: hidden;
    color: #747e79;
    font-size: 1.3rem;
    font-weight: var(--df-font-weight-regular);
    line-height: var(--df-line-height-body);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-news-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #dfe5e1;
}

.home-business-stats {
    padding-top: 3.6rem;
    padding-bottom: 3.6rem;
    border-top: 1px solid #dfe5e1;
    border-bottom: 1px solid #dfe5e1;
}

.home-business-stats .home-news-stats {
    gap: 2.4rem;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.home-business-stats .home-news-stats__item {
    padding: 0 1.2rem;
}

.home-business-stats .home-news-stats__item::after {
    display: none;
}

.home-business-stats .home-news-stats__item strong {
    color: var(--df-primary-dark);
    font-size: clamp(4rem, 4.5vw, 6rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
}

.home-business-stats .home-news-stats__item span {
    max-width: 28rem;
    margin-top: 1rem;
    color: #37413c;
    font-size: clamp(1.4rem, 1.35vw, 1.8rem);
    font-weight: var(--df-font-weight-regular);
    line-height: var(--df-line-height-compact);
    text-transform: none;
}

.home-news-stats__item {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    padding: 0 2rem;
    flex-direction: column;
    text-align: center;
}

.home-news-stats__item:not(:last-child)::after {
    position: absolute;
    top: 10%;
    right: 0;
    width: 1px;
    height: 80%;
    background: #e0e7e3;
    content: "";
}

.home-news-stats__item strong {
    display: block;
    color: var(--df-primary);
    font-size: clamp(3rem, 3.2vw, 4.4rem);
    font-weight: var(--df-font-weight-extrabold);
    letter-spacing: -0.035em;
    line-height: 1.1;
}

.home-news-stats__item span {
    display: block;
    max-width: 23rem;
    margin-top: 0.8rem;
    color: #68736d;
    font-size: 1.3rem;
    font-weight: var(--df-font-weight-semibold);
    line-height: var(--df-line-height-compact);
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .home-business-stats {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .home-news-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.8rem 0;
        margin-top: 3.2rem;
        padding-top: 2.6rem;
    }

    .home-business-stats .home-news-stats {
        gap: 2.8rem 1.2rem;
        margin-top: 0;
        padding-top: 0;
    }

    .home-business-stats .home-news-stats__item {
        padding: 0 .8rem;
        border-top: 0;
    }

    .home-business-stats .home-news-stats__item strong {
        font-size: clamp(3.2rem, 10vw, 4.5rem);
    }

    .home-business-stats .home-news-stats__item span {
        margin-top: .7rem;
        font-size: 1.3rem;
    }

    .home-news-stats__item:nth-child(2)::after {
        display: none;
    }

    .home-news-stats__item:nth-child(n + 3) {
        padding-top: 2.4rem;
        border-top: 1px solid #e5eae7;
    }

    .home-business-stats .home-news-stats__item:nth-child(n + 3) {
        padding-top: 0;
        border-top: 0;
    }
}

@media (max-width: 399px) {
    .home-news-stats__item {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .home-news-stats__item span {
        font-size: 1.15rem;
    }
}

/* Home customer voices: draggable, autoplaying customer feedback carousel. */
.home-customer-voices {
    padding: 5.2rem 0;
    border-bottom: 1px solid #e8ece9;
}

.home-customer-voices__panel {
    padding: 6.4rem 6rem 5.6rem;
    border: 1px solid #e2e8e4;
    border-radius: 3.2rem;
    background: #fff;
    box-shadow: 0 .4rem 1.8rem rgba(29, 57, 42, .035);
}

.home-customer-voices__heading {
    margin-bottom: 4.8rem;
    text-align: center;
}

.home-customer-voices__eyebrow {
    display: block;
    margin-bottom: .9rem;
    color: var(--df-primary);
    font-size: 1.5rem;
    font-weight: var(--df-font-weight-bold);
    letter-spacing: .08em;
    line-height: var(--df-line-height-compact);
    text-transform: uppercase;
}

.home-customer-voices__heading h2 {
    margin: 0;
    color: var(--df-dark);
    font-size: clamp(2.8rem, 3vw, 4rem);
    font-weight: var(--df-font-weight-bold);
    letter-spacing: -.035em;
}

.home-customer-voices__slider-shell {
    position: relative;
}

.home-customer-voices__slider {
    overflow: hidden;
    padding: .4rem;
    touch-action: pan-y;
}

.home-customer-voices__slider .swiper-wrapper {
    align-items: stretch;
}

.home-customer-voices__slider .swiper-slide {
    display: flex;
    height: auto;
}

.home-customer-voices__slider .home-customer-voice-card {
    width: 100%;
}

.home-customer-voice-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 28rem;
    padding: 3.4rem 3.6rem 3.2rem;
    border: 1px solid #dfe6e2;
    border-radius: 2.2rem;
    background: #f8fafb;
    box-shadow: none;
    flex-direction: column;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.home-customer-voice-card:hover {
    border-color: rgba(0, 135, 68, .25);
    box-shadow: 0 .8rem 2rem rgba(28, 68, 46, .08);
    transform: translateY(-.2rem);
}

.home-customer-voice-card__top {
    display: flex;
    align-items: flex-start;
}

.home-customer-voice-card__stars {
    display: flex;
    gap: .65rem;
    color: var(--df-accent);
    font-size: 1.7rem;
}

.home-customer-voice-card blockquote {
    display: -webkit-box;
    margin: 2rem 0 1.6rem;
    overflow: hidden;
    color: #46566a;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: var(--df-font-weight-regular);
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.home-customer-voice-card__author {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    min-height: 8.3rem;
    margin-top: auto;
    padding-top: 2.2rem;
    border-top: 1px solid #dfe6e2;
}

.home-customer-voice-card__avatar {
    display: block;
    width: 6rem;
    height: 6rem;
    flex: 0 0 6rem;
    border-radius: 50%;
    border: 2px solid #d8f1e3;
    background: var(--df-primary-light);
    object-fit: cover;
}

.home-customer-voice-card__author span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.home-customer-voice-card__author strong {
    display: -webkit-box;
    overflow: hidden;
    color: #111827;
    font-size: 1.55rem;
    font-weight: var(--df-font-weight-bold);
    line-height: var(--df-line-height-compact);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-customer-voice-card__author small {
    display: block;
    margin-top: .7rem;
    overflow: hidden;
    color: #66758a;
    font-size: 1.35rem;
    font-weight: var(--df-font-weight-regular);
    line-height: var(--df-line-height-compact);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-customer-voices__pagination {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    width: 100% !important;
    min-height: 1rem;
    margin-top: 2rem;
    transform: none !important;
}

.home-customer-voices__pagination .swiper-pagination-bullet {
    width: .8rem;
    height: .8rem;
    margin: 0 !important;
    background: #9ca9a2;
    opacity: .55;
    transition: width .22s ease, background-color .22s ease, opacity .22s ease;
}

.home-customer-voices__pagination .swiper-pagination-bullet-active {
    width: 2.2rem;
    border-radius: 999px;
    background: #15904e;
    opacity: 1;
}

@media (max-width: 991px) {
    .home-customer-voices__panel {
        padding: 4.8rem 3rem 4.2rem;
    }
}

@media (max-width: 767px) {
    .home-news-showcase__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .home-news-showcase,
    .home-customer-voices {
        padding: 4.2rem 0 4.8rem;
    }

    .home-news-showcase__heading {
        align-items: flex-end;
        margin-bottom: 2.3rem;
    }

    .home-news-showcase__heading > a {
        flex: 0 0 auto;
        font-size: 1.15rem;
    }

    .home-news-showcase__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-customer-voices__heading {
        margin-bottom: 3rem;
    }

    .home-customer-voices__panel {
        padding: 4rem 1.8rem 3.6rem;
        border-radius: 2.4rem;
    }

    .home-customer-voices__eyebrow {
        font-size: 1.3rem;
    }

    .home-customer-voices__heading h2 {
        font-size: 2.5rem;
    }

    .home-customer-voice-card {
        min-height: 0;
        padding: 2.8rem 2.4rem 2.4rem;
    }

    .home-customer-voice-card blockquote {
        font-size: 1.2rem;
    }

}

/* Keep homepage collections on one swipeable row on tablet and smaller screens. */
@media (max-width: 1199px) {
    .home-deals__products,
    .home-category-directory__grid,
    .home-news-showcase__grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        padding: .3rem .2rem 1rem;
        scroll-padding-inline: .2rem;
        scroll-snap-type: inline mandatory;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .home-deals__products,
    .home-category-directory__grid,
    .home-news-showcase__grid {
        cursor: grab;
    }

    .home-deals__products.is-mouse-dragging,
    .home-category-directory__grid.is-mouse-dragging,
    .home-news-showcase__grid.is-mouse-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
        user-select: none;
    }

    .home-deals__products img,
    .home-category-directory__grid img,
    .home-news-showcase__grid img {
        -webkit-user-drag: none;
        user-select: none;
    }

    .home-deals__products {
        grid-auto-columns: calc((100% - 3.2rem) / 3);
    }

    .home-category-directory__grid {
        grid-auto-columns: calc((100% - 4.8rem) / 4);
    }

    .home-news-showcase__grid {
        grid-auto-columns: calc((100% - 4rem) / 3);
    }

    .home-deals__products::-webkit-scrollbar,
    .home-category-directory__grid::-webkit-scrollbar,
    .home-news-showcase__grid::-webkit-scrollbar {
        display: none;
    }

    .home-deals__products > *,
    .home-category-directory__grid > *,
    .home-news-showcase__grid > * {
        scroll-snap-align: start;
    }

    .home-deals__products:focus-visible,
    .home-category-directory__grid:focus-visible,
    .home-news-showcase__grid:focus-visible {
        outline: 2px solid rgba(0, 135, 68, .55);
        outline-offset: .3rem;
    }
}

@media (max-width: 767px) {
    .home-deals__products {
        grid-auto-columns: calc((100% - 1.6rem) / 2);
    }

    .home-deals__products > * {
        width: 100%;
        justify-self: center;
    }

    .home-category-directory__grid {
        grid-auto-columns: calc((100% - 3.2rem) / 3);
    }

    .home-news-showcase__grid {
        grid-auto-columns: calc((100% - 2rem) / 2);
    }
}

@media (max-width: 575px) {
    .home-deals__products {
        grid-auto-columns: calc((100% - 1.6rem) / 2);
    }

    .home-category-directory__grid {
        grid-auto-columns: calc((100% - 1.6rem) / 2);
    }

    .home-news-showcase__grid {
        grid-auto-columns: 100%;
    }
}

@media (max-width: 359px) {
    .home-deals__products,
    .home-category-directory__grid {
        grid-auto-columns: 100%;
    }
}

/* Center category cards whenever the current row has fewer items than its visible capacity. */
.home-category-directory__grid[data-item-count="1"],
.home-category-directory__grid[data-item-count="2"],
.home-category-directory__grid[data-item-count="3"],
.home-category-directory__grid[data-item-count="4"] {
    justify-content: center;
}

@media (max-width: 1199px) {
    .home-category-directory__grid[data-item-count="4"] {
        justify-content: start;
    }
}

@media (max-width: 767px) {
    .home-category-directory__grid[data-item-count="3"] {
        justify-content: start;
    }
}

@media (max-width: 575px) {
    .home-category-directory__grid[data-item-count="2"] {
        justify-content: start;
    }
}

.home-product-block {
    padding: 5.2rem 0 6rem;
    border-bottom: 1px solid #e8eeea;
}

.home-section--white {
    background: #fff;
}

.home-section--muted {
    background: #f8f8fb;
}

.home-product-block__heading {
    margin-bottom: 2.8rem;
    text-align: left;
}

.home-product-block__heading h2 {
    margin: 0;
    color: #222b27;
}

@media (max-width: 479px) {
    .home-deals__products {
        grid-auto-columns: 100%;
    }
}

.home-product-block__eyebrow {
    display: block;
    margin-bottom: .6rem;
    color: var(--df-primary);
    font-size: 1.25rem;
    font-weight: var(--df-font-weight-bold);
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.home-product-block__heading p {
    margin: .7rem 0 0;
    color: #7b8680;
}

.home-product-block__slider-shell {
    position: relative;
}

.home-product-block__slider {
    overflow: hidden;
    padding: 0.8rem 0.4rem 1.4rem;
    margin: -0.8rem -0.4rem -1.4rem;
}

.home-product-block__slider .swiper-slide {
    display: flex;
    height: auto;
}

.home-product-block__slider .swiper-wrapper { align-items: stretch; }

.home-product-block__slider .product__items { width: 100%; height: 100%; display: flex; flex-direction: column; }

.home-product-block__banner {
    margin-top: 3.2rem;
    overflow: hidden;
    border-radius: 1.2rem;
    background: #f7f9f8;
}

.home-product-block__banner a,
.home-product-block__banner img {
    display: block;
    width: 100%;
}

.home-product-block__banner img {
    max-height: 28rem;
    object-fit: cover;
}

@media (max-width: 767px) {
    .home-product-block {
        padding: 4.2rem 0 4.8rem;
    }

    .home-product-block__heading,
    .home-product-block__topbar .home-product-block__heading {
        margin-bottom: 2rem;
        text-align: center;
    }

    .home-product-block__banner {
        margin-top: 2.4rem;
    }
}

/* Floating customer-care shortcuts. */
.customer-support-float {
    position: fixed;
    z-index: 100;
    bottom: 2.4rem;
    right: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.5rem;
}

.customer-support-float a {
    text-decoration: none;
}

.customer-support-float__zalo,
.customer-support-float__messenger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 1.2rem;
    position: relative;
}

.customer-support-float__zalo {
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 1.2rem;
    background: transparent;
    box-shadow: 0 0.6rem 1.8rem rgba(8, 104, 220, 0.18);
}

.customer-support-float__zalo img {
    display: block;
    width: 112%;
    max-width: none;
    height: 112%;
    flex: 0 0 112%;
    object-fit: contain;
    filter: drop-shadow(0 0.5rem 0.9rem rgba(8, 104, 220, 0.2));
}

.customer-support-float__messenger {
    z-index: 1;
    border: 0;
    background: #0878e8;
    color: #fff;
    font-size: 2.4rem;
    box-shadow: 0 0.6rem 1.8rem rgba(8, 120, 232, 0.28);
    animation: customer-support-nudge 4.8s ease-in-out infinite;
    isolation: isolate;
    overflow: visible;
}

.customer-support-float__messenger > i,
.customer-support-float__phone-icon > svg {
    position: relative;
    z-index: 2;
}

.customer-support-ripples {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    border-radius: 1.5rem;
    pointer-events: none;
}

.customer-support-ripples > span {
    position: absolute;
    inset: 0;
    display: block;
    border: 2px solid currentColor;
    border-radius: 1.5rem;
    opacity: 0;
    animation: customer-support-wave 4.8s ease-out infinite;
}

.customer-support-ripples > span:nth-child(2) {
    animation-delay: 0.42s;
}

.customer-support-ripples > span:nth-child(3) {
    animation-delay: 0.84s;
}

.customer-support-ripples--blue {
    color: rgba(8, 120, 232, 0.45);
}

.customer-support-ripples--red {
    color: rgba(239, 41, 41, 0.42);
}

@keyframes customer-support-wave {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }

    3% {
        opacity: 0.62;
    }

    32%, 100% {
        opacity: 0;
        transform: scale(1.75);
    }
}

@keyframes customer-support-nudge {
    0%, 10%, 100% {
        transform: scale(1);
    }

    3% {
        transform: scale(1.08);
    }

    6% {
        transform: scale(0.97);
    }
}

.customer-support-float__phone {
    display: inline-flex;
    align-items: center;
    height: 3.8rem;
    padding-left: 1.5rem;
    border-radius: 999px;
    background: #ef2929;
    color: #fff;
    box-shadow: 0 0.6rem 1.8rem rgba(239, 41, 41, 0.28);
    overflow: visible;
}

.customer-support-float__phone strong {
    padding-right: 1.6rem;
    font-size: 1.3rem;
    font-weight: var(--df-font-weight-extrabold);
    line-height: 1;
    white-space: nowrap;
}

.customer-support-float__phone-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.6rem;
    min-width: 4.6rem;
    height: 4.6rem;
    border-radius: 1.2rem;
    background: #dc1717;
    isolation: isolate;
    overflow: visible;
    animation: customer-support-nudge 4.8s 0.15s ease-in-out infinite;
}

.customer-support-float__phone-icon svg {
    width: 2.1rem;
    height: 2.1rem;
}

.customer-support-float__zalo:hover,
.customer-support-float__zalo:focus-visible,
.customer-support-float__messenger:hover,
.customer-support-float__messenger:focus-visible {
    color: #fff;
    transform: translateY(-0.2rem);
}


.customer-support-float__zalo:hover,
.customer-support-float__zalo:focus-visible {
    background: transparent;
    box-shadow: 0 0.8rem 2rem rgba(8, 104, 220, 0.28);
}

.customer-support-float__zalo:hover img,
.customer-support-float__zalo:focus-visible img {
    filter: drop-shadow(0 0.7rem 1.1rem rgba(8, 104, 220, 0.3));
}

.customer-support-float__messenger:hover,
.customer-support-float__messenger:focus-visible {
    background: #006ad1;
    box-shadow: 0 0.8rem 2rem rgba(8, 120, 232, 0.28);
}

.customer-support-float__phone:hover,
.customer-support-float__phone:focus-visible {
    color: #fff;
    background: #d91f1f;
    transform: translateY(-0.2rem);
    box-shadow: 0 0.8rem 2rem rgba(239, 41, 41, 0.3);
}

.customer-support-float a:focus-visible {
    outline: none;
}

@media (max-width: 991px) {
    .customer-support-float {
        bottom: calc(11.5rem + env(safe-area-inset-bottom, 0px));
        right: 1rem;
    }
}

/* Keep the scroll control aligned above Zalo, Messenger and phone. */
.customer-support-float #scroll__top {
    position: static;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 1.2rem;
    transform: translateY(1rem);
}

.customer-support-float #scroll__top.active {
    transform: translateY(0);
}

.customer-support-float #scroll__top:hover,
.customer-support-float #scroll__top:focus-visible {
    outline: 1px solid rgba(0, 135, 68, 0.4);
    outline-offset: 0.55rem;
    box-shadow: 0 0.8rem 2rem rgba(0, 135, 68, 0.26);
    transform: translateY(-0.2rem);
}

@media (max-width: 575px) {
    .customer-support-float__zalo,
    .customer-support-float__messenger {
        width: 4.2rem;
        height: 4.2rem;
    }

    .customer-support-float__messenger {
        font-size: 2.1rem;
    }

    .customer-support-float__phone {
        height: 3.6rem;
        padding-left: 1.2rem;
    }

    .customer-support-float__phone strong {
        padding-right: 1.3rem;
        font-size: 1.2rem;
    }

    .customer-support-float__phone-icon {
        width: 4.2rem;
        min-width: 4.2rem;
        height: 4.2rem;
    }

    .customer-support-float #scroll__top {
        width: 4.2rem;
        height: 4.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .customer-support-float a {
        transition: none;
    }
}

/* Persistent sales advisory bar shown across the website. */
body {
    padding-bottom: 6.2rem;
}

.sales-support-bar {
    position: fixed;
    z-index: 98;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    background: linear-gradient(90deg, #006f37 0%, #008744 48%, #009d50 100%);
    color: #fff;
    box-shadow: 0 -0.5rem 1.8rem rgba(0, 75, 38, 0.2);
}

.sales-support-bar__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 144rem;
    height: 100%;
    margin: 0 auto;
    padding: 0 1.6rem;
}

.sales-support-bar__title {
    display: inline-flex;
    flex: 0 0 18rem;
    align-items: center;
    gap: 0.8rem;
    height: 4.2rem;
    margin-right: 1.6rem;
    padding: 0 1.2rem 0 2rem;
    font-size: 1.25rem;
    font-weight: var(--df-font-weight-extrabold);
    text-transform: uppercase;
    white-space: nowrap;
}

.sales-support-bar__title i {
    font-size: 1.8rem;
}

.sales-support-bar__contacts {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    height: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.sales-support-bar__contacts::-webkit-scrollbar {
    display: none;
}

.sales-contact {
    display: flex;
    flex: 1 0 15.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-width: 0;
    height: 100%;
    padding: 0 0.8rem;
}

.sales-contact__avatar {
    display: inline-flex;
    flex: 0 0 4.2rem;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    border: none;
    border-radius: 50%;
    background: #e9ecef;
    gap: 0.35rem;
    line-height: 1;
    overflow: hidden;
}

.sales-contact__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.sales-contact__details > strong {
    overflow: hidden;
    font-size: 1.2rem;
    font-weight: var(--df-font-weight-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-contact__actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.sales-contact__zalo-icon {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    object-fit: contain;
}

.customer-support-float {
    bottom: 8.4rem;
}

@media (max-width: 1199px) {
    .sales-support-bar__title {
        flex-basis: 5rem;
        justify-content: center;
        margin-right: 0.6rem;
        padding: 0;
    }

    .sales-support-bar__title span {
        display: none;
    }
}

@media (max-width: 991px) {
    body {
        padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
    }

    .sales-support-bar {
        display: none;
    }

    .sales-support-bar__inner {
        padding: 0 0.8rem;
    }

    .sales-contact {
        flex-basis: 16.5rem;
        justify-content: flex-start;
    }

    .sales-contact__avatar {
        flex-basis: 3.8rem;
        width: 3.8rem;
        height: 3.8rem;
    }

    .customer-support-float {
        bottom: calc(11.5rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 575px) {
    .sales-support-bar__title {
        display: none;
    }

    .sales-contact {
        flex-basis: 15.8rem;
    }

    .sales-contact__details > strong {
        font-size: 1.1rem;
    }

    .sales-contact__phone {
        font-size: 1.2rem;
    }
}

/* Mobile-only sales contact list at the end of the homepage. */
.home-sales-team {
    display: none;
}

/* On desktop the mobile sales list remains last in the DOM but is hidden.
   Give its preceding visible homepage section the footer clearance instead. */
@media (min-width: 992px) {
    .home-page > :has(+ .home-sales-team:last-child) {
        padding-bottom: 9.5rem !important;
    }
}

.home-sales-team__heading {
    margin: 0 auto 2.4rem;
    text-align: center;
}

.home-sales-team__heading h2 {
    margin: 0.4rem 0 0.6rem;
}

.home-sales-team__eyebrow {
    color: #009b58;
    font-size: 1.1rem;
    font-weight: var(--df-font-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-sales-team__heading p {
    max-width: 58rem;
    margin: 0 auto;
    color: #737f89;
    font-size: 1.25rem;
    line-height: 1.55;
}

.home-sales-team__slider {
    overflow: hidden;
    padding: 0.2rem;
}

.home-sales-team__slider .swiper-wrapper {
    align-items: stretch;
}

.home-sales-team__slider .swiper-slide {
    display: flex;
    height: auto;
}

.home-sales-card {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 20.4rem;
    align-items: center;
    flex-direction: column;
    padding: 1.8rem 1.2rem;
    border: 1px solid #dce5e0;
    border-radius: 2rem;
    background: #fff;
    text-align: center;
    box-shadow: 0 0.5rem 1.6rem rgba(28, 68, 46, 0.05);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.home-sales-card:hover {
    border-color: rgba(0, 135, 68, 0.32);
    box-shadow: 0 0.9rem 2rem rgba(28, 68, 46, 0.12);
    transform: translateY(-0.2rem);
}

.home-sales-card__avatar {
    display: inline-flex;
    flex: 0 0 7.2rem;
    align-items: center;
    justify-content: center;
    width: 7.2rem;
    height: 7.2rem;
    margin-bottom: 1.3rem;
    overflow: hidden;
    border: 0.2rem solid #0bb47b;
    border-radius: 50%;
    background: #f1f5f4;
    color: #087353;
    font-size: 2.8rem;
}

.home-sales-card__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.home-sales-card__avatar i {
    transform: translateY(0.4rem);
}

.home-sales-card__content {
    display: flex;
    min-width: 0;
    width: 100%;
    flex: 1;
    align-items: center;
    flex-direction: column;
}

.home-sales-card__content h3 {
    display: -webkit-box;
    min-height: 3.6rem;
    margin: 0 0 0.2rem;
    overflow: hidden;
    color: #101827;
    font-size: 1.35rem;
    font-weight: var(--df-font-weight-bold);
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-sales-card__role {
    display: block;
    margin-bottom: 1.2rem;
    color: #919bab;
    font-size: 1.15rem;
    line-height: var(--df-line-height-compact);
}

.home-sales-card__phone {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.8rem;
    margin-top: auto;
    padding: 0.7rem 0.8rem;
    border-radius: 999px;
    background: #eef5ff;
    color: #2161ee;
    font-size: 1.15rem;
    font-weight: var(--df-font-weight-bold);
    line-height: 1;
    white-space: nowrap;
}

.home-sales-card__phone:hover,
.home-sales-card__phone:focus-visible {
    background: #2161ee;
    color: #fff;
    text-decoration: none;
}

.home-sales-team__pagination.swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
    margin-top: 1.8rem;
}

.home-sales-team__pagination .swiper-pagination-bullet {
    width: 0.7rem;
    height: 0.7rem;
    margin: 0 0.35rem !important;
    background: #c6ceca;
    opacity: 1;
}

.home-sales-team__pagination .swiper-pagination-bullet-active {
    width: 2.2rem;
    border-radius: 999px;
    background: #009b58;
}

@media (max-width: 575px) {
    .home-sales-team__heading {
        margin-bottom: 2.2rem;
    }

    .home-sales-card {
        min-height: 20rem;
        padding: 1.6rem 1rem;
    }

    .home-sales-card__content h3 {
        font-size: 1.25rem;
    }

    .home-sales-card__phone {
        padding-inline: 0.55rem;
        font-size: 1.05rem;
    }
}

@media (max-width: 991px) {
    .home-sales-team {
        display: block;
    }
}

/* Home video showcase. */
.home-videos__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.4rem;
}

.home-videos__heading .home-section-description {
    margin: 0.7rem 0 0;
}

.home-videos__view-all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.8rem;
    color: #16844b;
    font-size: 1.25rem;
    font-weight: var(--df-font-weight-regular);
    white-space: nowrap;
    transform-origin: center;
    transition: color 0.22s ease, transform 0.22s ease;
}

.home-videos__view-all:hover,
.home-videos__view-all:focus-visible {
    color: #086f3a;
    transform: scale(1.06);
}

.home-videos__view-all i {
    transition: transform 0.2s ease;
}

.home-videos__view-all:hover i,
.home-videos__view-all:focus-visible i {
    transform: translateX(0.3rem) scale(1.1);
}

.home-videos__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

.home-video-card {
    min-width: 0;
    overflow: hidden;
    border-radius: 1rem;
    background: #eaf7ef;
    box-shadow: 0 0.6rem 1.8rem rgba(30, 68, 48, 0.1);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.home-video-card:hover {
    box-shadow: 0 1rem 2.4rem rgba(30, 68, 48, 0.16);
    transform: translateY(-0.3rem);
}

.home-video-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #eaf7ef, #d7f0e1);
}

.home-video-card__media::after {
    position: absolute;
    inset: 0;
    content: "";
    z-index: 1;
    background: linear-gradient(180deg, transparent 38%, rgba(5, 24, 14, 0.08) 54%, rgba(5, 24, 14, 0.88) 100%);
    pointer-events: none;
}

.home-video-card__media img,
.home-video-card__placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.home-video-card__placeholder {
    color: rgba(0, 135, 68, 0.35);
    font-size: 5rem;
}

.home-video-card:hover .home-video-card__media img {
    transform: scale(1.04);
}

.home-video-card__play {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    padding-left: 0.2rem;
    border: 0.3rem solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: var(--df-primary);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 0.6rem 1.6rem rgba(0, 50, 25, 0.3);
    transform: translate(-50%, -50%);
    transition: background 0.2s ease, transform 0.2s ease;
}

.home-video-card:hover .home-video-card__play {
    background: var(--df-primary-dark);
    transform: translate(-50%, -50%) scale(1.08);
}

.home-video-card__caption {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2.8rem 1.5rem 1.3rem;
}

.home-video-card__title {
    display: -webkit-box;
    overflow: hidden;
    color: #fff;
    font-size: 1.5rem;
    font-weight: var(--df-font-weight-bold);
    line-height: var(--df-line-height-compact);
    text-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.35);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-videos__empty {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    min-height: 12rem;
    padding: 2.4rem;
    border: 1px dashed rgba(0, 135, 68, 0.32);
    border-radius: 1.2rem;
    background: rgba(234, 247, 239, 0.65);
}

.home-videos__empty > span {
    display: inline-flex;
    flex: 0 0 5.6rem;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    background: var(--df-primary);
    color: #fff;
    font-size: 2rem;
}

.home-videos__empty div {
    flex: 1;
}

.home-videos__empty h3 {
    margin: 0 0 0.4rem;
    color: #1d2c24;
    font-size: 1.7rem;
}

.home-videos__empty p {
    margin: 0;
    color: #6d7c74;
}

.home-videos__empty > a {
    flex: 0 0 auto;
    color: var(--df-primary);
    font-weight: var(--df-font-weight-bold);
}

@media (max-width: 991px) {
    .home-videos__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .home-videos__heading {
        align-items: flex-end;
        margin-bottom: 2rem;
    }

    .home-videos__view-all {
        font-size: 1.15rem;
    }

    .home-videos__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.6rem;
    }

    .home-videos__empty {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 1.8rem;
    }

    .home-videos__empty > a {
        width: 100%;
        padding-left: 7.2rem;
    }
}

/* Stronger primary navigation and scannable submenu icons. */
.main__header .header__menu--link {
    color: #202923;
    font-weight: 600 !important;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.main__header .header__menu--link:hover,
.main__header .header__menu--items:hover > .header__menu--link,
.main__header .header__menu--link:focus-visible {
    color: var(--df-primary) !important;
}

.main__header .header__menu--link.active,
.main__header .header__menu--items.active > .header__menu--link {
    color: var(--df-primary) !important;
    font-weight: 700 !important;
}

.header__sub--menu__link,
.offcanvas__sub_menu_item {
    display: flex !important;
    align-items: center;
    gap: 0.9rem;
}

.menu-child-icon {
    display: inline-flex !important;
    flex: 0 0 2.6rem;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.65rem;
    background: #eaf7ef;
    color: var(--df-primary);
    font-size: 1.2rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.menu-child-icon--category {
    flex-basis: 2.3rem;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid rgba(0, 135, 68, 0.14);
    border-radius: 50%;
    background: #f4fbf7;
    font-size: 1.05rem;
}

.header__sub--menu__link:hover .menu-child-icon,
.header__sub--menu__link:focus-visible .menu-child-icon,
.offcanvas__sub_menu_item:hover .menu-child-icon,
.offcanvas__sub_menu_item:focus-visible .menu-child-icon {
    background: var(--df-primary);
    color: #fff;
    transform: scale(1.06);
}

.offcanvas__sub_menu_item {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main__header .header__menu {
        padding-left: 0.6rem !important;
    }

    .main__header .header__menu--items {
        margin-right: 0.8rem !important;
    }

    .main__header .header__menu--link {
        font-size: 1.35rem !important;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .main__header .header__menu--link {
        font-size: 1.6rem !important;
    }
}

@media only screen and (min-width: 1400px) {
    .main__header .header__menu--link {
        font-size: 1.7rem !important;
    }
}


/* === Sales contact avatar photo override === */
.sales-contact__avatar {
    color: #7b8085;
    font-size: 2rem;
    box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.sales-contact__avatar i {
    transform: translateY(0.3rem);
}

.sales-contact__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.sales-contact__details {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.35rem;
    line-height: 1;
}

/* === sales-contact__phone fix === */
.sales-contact__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    font-size: 1.3rem;
    font-weight: var(--df-font-weight-regular);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.sales-contact__phone:hover,
.sales-contact__phone:focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* Home B2B distributor bento section. */
.home-b2b {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
}

.home-b2b__heading {
    max-width: 100rem;
    margin: 0 auto 3.6rem;
}

.home-b2b__eyebrow {
    display: inline-flex;
    margin-bottom: 1.2rem;
    padding: 0.45rem 1.6rem;
    border: 1px solid #a7efd0;
    border-radius: 999px;
    background: #ecfdf5;
    color: var(--df-primary);
    font-size: 1.25rem;
    font-weight: var(--df-font-weight-semibold);
    letter-spacing: 0.06em;
    line-height: var(--df-line-height-compact);
    text-transform: uppercase;
}

.home-b2b__title {
    margin: 0;
    color: #202733;
}

.home-b2b__subtitle {
    margin: 0.8rem 0 0;
    color: var(--df-dark-muted);
}

.home-b2b__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2.4rem;
}

.home-b2b__feature {
    position: relative;
    display: flex;
    min-height: 42rem;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 3.6rem 3.4rem 3.2rem;
    border-radius: 2.4rem;
    background:
        radial-gradient(circle at 94% 18%, rgba(194, 255, 54, 0.88) 0 0.7%, rgba(82, 227, 79, 0.36) 2.5%, transparent 6%),
        radial-gradient(circle at 2% 0%, rgba(35, 183, 75, 0.34) 0 18%, transparent 18.4%),
        radial-gradient(circle at 55% 44%, rgba(36, 194, 72, 0.22), transparent 42%),
        linear-gradient(135deg, #00623d 0%, #007a43 52%, #12ad50 100%);
    box-shadow: 0 1.4rem 3.4rem rgba(0, 111, 55, 0.14);
    color: #fff;
    isolation: isolate;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.4s ease;
}

.home-b2b__feature:hover {
    transform: scale(1.025);
    box-shadow: 0 2.4rem 4.8rem rgba(0, 111, 55, 0.26);
}

.home-b2b__feature::before {
    position: absolute;
    z-index: -1;
    top: -9rem;
    right: -7rem;
    width: 22rem;
    height: 22rem;
    border: 0.2rem solid rgba(214, 255, 72, 0.72);
    border-radius: 50%;
    box-shadow:
        0 0 0 2.5rem rgba(48, 205, 74, 0.18),
        0 0 0 5rem rgba(62, 218, 76, 0.1),
        0 0 3rem rgba(187, 255, 63, 0.12);
    content: "";
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-b2b__feature:hover::before {
    transform: translate(-1.2rem, 1rem) scale(1.04) rotate(5deg);
}

.home-b2b__feature::after {
    position: absolute;
    z-index: -1;
    right: -12%;
    bottom: -28%;
    left: -12%;
    height: 48%;
    border-top: 0.22rem solid rgba(221, 246, 66, 0.72);
    border-radius: 50% 50% 0 0 / 42% 42% 0 0;
    background: linear-gradient(180deg, rgba(55, 213, 77, 0.72), rgba(0, 104, 57, 0.88));
    box-shadow:
        0 -2.6rem 0 rgba(38, 180, 73, 0.26),
        0 -5.2rem 0 rgba(38, 169, 72, 0.14);
    content: "";
    opacity: 0.78;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-b2b__feature:hover::after {
    opacity: 0.92;
    transform: translateY(-0.6rem) scaleX(1.02);
}

.home-b2b__badge {
    display: inline-flex;
    margin-bottom: 2rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    background: var(--df-accent);
    color: #202733;
    font-size: 1.25rem;
    font-weight: var(--df-font-weight-semibold);
    line-height: var(--df-line-height-tight);
}

.home-b2b__number {
    display: block;
    margin-bottom: 1.2rem;
    color: #ffd34d;
    font-family: var(--df-font-heading) !important;
    font-size: clamp(3.8rem, 4vw, 5.2rem);
    font-weight: var(--df-font-weight-bold);
    letter-spacing: -0.02em;
    line-height: 1;
}

.home-b2b__feature h3,
.home-b2b__feature-title {
    margin: 0 0 1.2rem;
    color: #fff;
    font-size: 2.1rem;
    font-weight: var(--df-font-weight-bold);
    line-height: var(--df-line-height-heading);
}

.home-b2b__feature p {
    max-width: 54rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
}

.home-b2b__primary-action {
    display: inline-flex;
    width: 100%;
    min-height: 4.8rem;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    align-self: stretch;
    margin-top: 2rem;
    padding: 1.2rem 2.4rem;
    border: 0;
    border-radius: 1.4rem;
    background: #ffd34d;
    color: #202733;
    font-size: 1.4rem;
    font-weight: var(--df-font-weight-bold);
    letter-spacing: 0.03em;
    line-height: var(--df-line-height-compact);
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-b2b__primary-action i {
    transition: transform 0.3s ease;
}

.home-b2b__feature:hover .home-b2b__primary-action i {
    transform: translateX(5px);
}

.home-b2b__primary-action:hover,
.home-b2b__primary-action:focus-visible {
    color: var(--df-primary-dark) !important;
    background: #ffd34d !important;
    box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.22) !important;
    transform: translateY(-2px) !important;
}

.home-b2b__cards {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
}

.home-b2b__card {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr);
    align-items: start;
    gap: 1.8rem;
    min-width: 0;
    padding: 2.2rem;
    border: 1px solid #e1e7e4;
    border-radius: 2rem;
    background: #fff;
    box-shadow: 0 0.8rem 2.4rem rgba(26, 43, 34, 0.035);
    cursor: pointer;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.35s ease,
                box-shadow 0.35s ease,
                background-color 0.35s ease;
}

.home-b2b__card:hover {
    border-color: rgba(0, 152, 74, 0.4);
    box-shadow: 0 16px 32px -8px rgba(0, 135, 68, 0.12), 0 4px 16px rgba(0, 0, 0, 0.04);
    transform: translateY(-6px);
    background: #ffffff;
}

.home-b2b__icon-box {
    display: inline-flex;
    width: 5.6rem;
    height: 5.6rem;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 1.6rem;
    font-size: 2.6rem;
    line-height: 1;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.home-b2b__card:hover .home-b2b__icon-box {
    transform: scale(1.1) rotate(6deg);
}

.home-b2b__icon-box--green { border-color: #c9f2de; background: #ecfdf5; color: #05a568; }
.home-b2b__icon-box--yellow { border-color: #fde9ae; background: #fffbeb; color: #df8500; }
.home-b2b__icon-box--blue { border-color: #d5ebf9; background: #eff8ff; color: #1487ca; }

.home-b2b__card:hover .home-b2b__icon-box--green {
    box-shadow: 0 8px 18px rgba(5, 165, 104, 0.25);
    border-color: #05a568;
}

.home-b2b__card:hover .home-b2b__icon-box--yellow {
    box-shadow: 0 8px 18px rgba(223, 133, 0, 0.25);
    border-color: #df8500;
}

.home-b2b__card:hover .home-b2b__icon-box--blue {
    box-shadow: 0 8px 18px rgba(20, 135, 202, 0.25);
    border-color: #1487ca;
}

.home-b2b__card-content { min-width: 0; }

.home-b2b__card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.4rem;
}

.home-b2b__card h3 {
    margin: 0 0 0.8rem;
    color: #202733;
    font-size: 1.8rem;
    font-weight: var(--df-font-weight-bold);
    line-height: var(--df-line-height-compact);
    transition: color 0.3s ease, transform 0.3s ease;
}

.home-b2b__card:hover h3 {
    color: var(--df-primary, #008744);
    transform: translateX(2px);
}

.home-b2b__card p {
    color: var(--df-dark-muted);
    margin: 0;
}

.home-b2b__tag {
    flex: 0 0 auto;
    padding: 0.35rem 1rem;
    border-radius: 0.7rem;
    font-size: 1.2rem;
    font-weight: var(--df-font-weight-semibold);
    line-height: var(--df-line-height-compact);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-b2b__card:hover .home-b2b__tag {
    transform: scale(1.06);
}

.home-b2b__tag--green { background: #d9f8e8; color: #087a4e; }
.home-b2b__tag--yellow { background: #fff1bd; color: #a55c00; }

.home-b2b__support-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.home-b2b__support-list li {
    display: flex;
    min-height: 5.8rem;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 0.8rem;
    border: 1px solid #edf1ef;
    border-radius: 1.2rem;
    background: #f8faf9;
    color: #37413c;
    font-size: 1.25rem;
    font-weight: var(--df-font-weight-medium);
    line-height: var(--df-line-height-compact);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.home-b2b__support-list li:hover {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 135, 68, 0.1);
}

.home-b2b__support-list i {
    flex: 0 0 auto;
    color: var(--df-primary);
    transition: transform 0.25s ease;
}

.home-b2b__support-list li:hover i {
    transform: scale(1.2);
}

@media (min-width: 768px) {
    .home-b2b__card {
        align-items: center;
    }
}

@media (max-width: 991px) {
    .home-b2b__grid {
        grid-template-columns: 1fr;
    }

    .home-b2b__feature {
        min-height: 38rem;
    }

    .home-b2b__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .home-b2b__card--support {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .home-b2b__cards { grid-template-columns: minmax(0, 1fr); }
    .home-b2b__card--support { grid-column: auto; }
    .home-b2b__support-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
    .home-b2b { padding-top: 4.2rem; padding-bottom: 4.2rem; }
    .home-b2b__heading { margin-bottom: 3rem; }
    .home-b2b__feature {
        min-height: 0;
        padding: 3rem 2.2rem;
        border-radius: 1.6rem;
    }
    .home-b2b__feature::before {
        top: -9rem;
        right: -9rem;
        opacity: 0.72;
    }
    .home-b2b__feature::after {
        right: -2rem;
        bottom: 1rem;
        opacity: 0.24;
    }
    .home-b2b__feature h3,
    .home-b2b__feature-title { font-size: 1.8rem; }
    .home-b2b__card {
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: 1.4rem;
        min-height: 0;
        padding: 2rem 1.6rem;
        border-radius: 1.6rem;
    }
    .home-b2b__icon-box { width: 5rem; height: 5rem; font-size: 2.2rem; }
    .home-b2b__card-heading { flex-direction: column; gap: 0; }
    .home-b2b__tag { margin-bottom: 0.8rem; }
}

/* Service assurances trust bar above footer. */
.home-trust-bar {
    position: relative;
    z-index: 2;
    padding: 2.2rem 0;
    border-top: 1px solid #e4ebe7;
    border-bottom: 1px solid #e4ebe7;
    background: #fff;
    box-shadow: 0 0.5rem 1.8rem rgba(29, 57, 42, 0.035);
    font-family: var(--df-font-body) !important;
}

.home-trust-bar :is(h1, h2, h3, h4, h5, h6, strong, button, a) {
    font-family: var(--df-font-heading) !important;
}

.home-trust-bar__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.8rem;
    align-items: center;
}

.home-trust-bar__item {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}

.home-trust-bar__icon {
    display: inline-flex;
    width: 4.4rem;
    height: 4.4rem;
    flex: 0 0 4.4rem;
    align-items: center;
    justify-content: center;
    border-radius: 1.1rem;
    background: #eaf6f0;
    color: #23805a;
    font-size: 1.8rem;
}

.home-trust-bar__item div {
    min-width: 0;
}

.home-trust-bar__item h2 {
    overflow: hidden;
    margin: 0 0 0.25rem;
    color: #26312b;
    font-size: 1.45rem;
    font-weight: var(--df-font-weight-bold);
    line-height: var(--df-line-height-compact);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-trust-bar__item p {
    overflow: hidden;
    margin: 0;
    color: #7b827e;
    font-size: 1.25rem;
    font-weight: var(--df-font-weight-regular);
    line-height: var(--df-line-height-compact);
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1199px) {
    .home-trust-bar__grid {
        gap: 1.2rem;
    }

    .home-trust-bar__item {
        gap: 0.8rem;
    }

    .home-trust-bar__icon {
        width: 3.8rem;
        height: 3.8rem;
        flex-basis: 3.8rem;
        font-size: 1.55rem;
    }

    .home-trust-bar__item h2 { font-size: 1.25rem; }
    .home-trust-bar__item p { font-size: 1.1rem; }
}

@media (max-width: 991px) {
    .home-trust-bar__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.8rem 2.4rem;
    }
}

@media (max-width: 575px) {
    .home-trust-bar {
        padding: 1.8rem 0;
    }

    .home-trust-bar__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem 1rem;
    }

    .home-trust-bar__item h2 { font-size: 1.2rem; }
    .home-trust-bar__item p { font-size: 1.05rem; }
}

/* Consolidated home product blocks with API-powered tabs. */
.home-product-block__topbar {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 3rem;
    align-items: center;
    margin-bottom: 2.2rem;
}

.home-product-block__topbar .home-product-block__heading {
    min-width: 0;
    margin-bottom: 0;
}

.home-product-block__tabs {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.home-product-block__tabs::-webkit-scrollbar {
    display: none;
}

.home-product-block__tab {
    min-height: 3.8rem;
    flex: 0 0 auto;
    padding: .7rem 1.8rem;
    border: 1px solid #dce5e0;
    border-radius: 1.2rem;
    background: #fff;
    color: #253029;
    font-size: 1.35rem;
    font-weight: var(--df-font-weight-semibold);
    line-height: var(--df-line-height-compact);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.home-product-block__tab:first-child {
    border-radius: 1.2rem;
}

.home-product-block__tab:last-child {
    border-radius: 1.2rem;
}

.home-product-block__tab:only-child {
    border-radius: 1.2rem;
}

.home-product-block__tab:hover,
.home-product-block__tab:focus-visible {
    background: var(--df-primary-light);
}

.home-product-block__tab.is-active {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: #fff;
}

.product-box--purchase.product-box--unified {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1rem;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-box--purchase.product-box--unified:hover {
    border-color: #059669 !important;
    box-shadow: none !important;
    transform: none;
}

.product-box--purchase.product-box--unified .product__items--thumbnail {
    position: relative;
    width: 100%;
    height: 19rem;
    background: #f8fafc;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    flex: 0 0 auto;
}

.product-box--purchase.product-box--unified .product__items--link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.product-box--purchase.product-box--unified .product__items--img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.product-box--purchase.product-box--unified:hover .product__items--img {
    transform: scale(1.05);
}

.product-box--purchase.product-box--unified .product__items2--content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0;
    min-height: 0;
    gap: 0;
    border-top: 0;
}

.product-box--purchase.product-box--unified .product-box__specification {
    font-size: 1.15rem;
    font-weight: 700;
    color: #059669;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
    margin-bottom: 0.2rem;
    min-height: 1.6rem;
}

.product-box--purchase.product-box--unified .product-box__specification i {
    flex: 0 0 auto;
    font-size: 1.05rem;
}

.product-box--purchase.product-box--unified .product__items--content__title,
.product-box--purchase.product-box--unified:hover .product__items--content__title {
    font-weight: 700;
    color: #1e293b;
    font-size: 1.7rem;
    line-height: 1.35;
    margin: 0 0 0.25rem;
    min-height: 4.6rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.product-box--purchase.product-box--unified .product__items--content__title a {
    color: #1e293b;
    transition: color 0.2s ease;
}

.product-box--purchase.product-box--unified .product__items--content__title a:hover {
    color: #047857;
}

.product-box--purchase.product-box--unified .product-box__description {
    font-size: 1.2rem;
    font-weight: 400;
    color: #64748b;
    line-height: 1.45;
    margin: 0 0 0.8rem;
    height: 3.5rem;
    min-height: 3.5rem;
    max-height: 3.5rem;
    padding: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.product-box--purchase.product-box--unified .product-box__purchase-selector {
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid #f1f5f9;
    min-height: 0;
}

.product-box--purchase.product-box--unified .product__items--price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    min-height: 2.6rem;
    width: 100%;
}

.product-box--purchase.product-box--unified .product__items--price-left {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.product-box--purchase.product-box--unified .current__price {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
}

.product-box--purchase.product-box--unified .current__price.is-contact-price {
    font-size: 1.35rem;
    font-weight: 700;
    color: #047857;
}

.product-box--purchase.product-box--unified .old__price {
    font-size: 1.2rem;
    color: #94a3b8;
    text-decoration: line-through;
    margin-left: 0.25rem;
    font-weight: 400;
}

.product-box--purchase.product-box--unified .product-box__unit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #b45309;
    background: #fffbeb;
    padding: 0.2rem 0.6rem;
    border-radius: 0.375rem;
    border: 1px solid #fde68a;
    white-space: nowrap;
    line-height: 1.2;
    margin-left: auto;
    text-transform: capitalize;
}

.product-box--purchase.product-box--unified .product-box__unit.is-discount {
    font-size: 1.15rem;
    font-weight: 800;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 0.2rem 0.6rem;
    border-radius: 0.375rem;
}

.product-box--unified .product-box__actions {
    display: flex;
    align-items: stretch;
    gap: 0.8rem;
    margin-top: 0.6rem;
}

.product-box--unified .product-box__actions .product-action-button {
    flex: 1 1 auto;
    background: var(--df-primary, #008744);
    color: #fff;
    font-weight: 700;
    padding: 0 1.2rem;
    border-radius: 0.8rem;
    font-size: 1.4rem;
    transition: background 0.2s ease, opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border: 0;
    min-height: 4rem;
    height: 4rem;
    white-space: nowrap;
    box-shadow: none;
}

.product-box--unified .product-box__actions .product-action-button:hover {
    background: var(--df-primary-dark, #006f37);
    color: #fff;
}

.product-box--unified .product-action-button--contact {
    width: 100% !important;
    flex: 1 1 100%;
    background: var(--df-primary, #008744);
    color: #fff;
    font-weight: 700;
    padding: 0 1.4rem;
    border-radius: 0.8rem;
    font-size: 1.4rem;
    transition: background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 4rem;
    height: 4rem;
    white-space: nowrap;
    text-decoration: none;
    border: 0;
}

.product-box--unified .product-action-button--contact:hover {
    background: var(--df-primary-dark, #006f37);
    color: #fff;
}

.product-box--unified .product-box__wholesale-link {
    flex: 0 0 auto;
    padding: 0 1.2rem;
    min-width: 6.8rem;
    border-radius: 0.8rem;
    border: 1px solid #d1d5db;
    color: #374151;
    font-size: 1.35rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
    transition: all 0.2s ease;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4rem;
    height: 4rem;
}

.product-box--unified .product-box__wholesale-link:hover,
.product-box--unified .product-box__wholesale-link:focus-visible {
    border-color: var(--df-primary, #008744);
    color: var(--df-primary, #008744);
    background: #f0fdf4;
}

.home-product-block__content {
    transition: opacity 0.2s ease;
}

.home-product-block.is-loading .home-product-block__content {
    min-height: 34rem;
    opacity: 0.25;
    pointer-events: none;
}

.home-product-block__loading {
    position: absolute;
    z-index: 2;
    top: 55%;
    left: 50%;
    gap: 0.7rem;
    transform: translate(-50%, -50%);
}

.home-product-block__loading:not([hidden]) {
    display: flex;
}

.home-product-block__loading span {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--df-primary);
    animation: homeBlockLoading 0.9s ease-in-out infinite alternate;
}

.home-product-block__loading span:nth-child(2) { animation-delay: 0.18s; }
.home-product-block__loading span:nth-child(3) { animation-delay: 0.36s; }

@keyframes homeBlockLoading {
    from { opacity: 0.35; transform: translateY(0); }
    to { opacity: 1; transform: translateY(-0.6rem); }
}

.home-product-block__shell {
    position: relative;
}

.home-product-block__error,
.home-product-block__empty {
    margin: 2.5rem 0 0;
    padding: 3rem;
    border: 1px dashed #cddbd3;
    border-radius: 1.2rem;
    background: #f8fbf9;
    color: #6f7b74;
    font-size: 1.5rem;
    font-weight: var(--df-font-weight-regular);
    line-height: var(--df-line-height-body);
    text-align: center;
}

.home-product-block__empty i {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--df-primary);
    font-size: 3rem;
}

.home-product-block__empty p {
    margin: 0;
}

@media (max-width: 1199px) {
    .home-product-block__topbar {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .home-product-block__tabs {
        width: 100%;
        justify-content: flex-start;
        padding-bottom: 0.3rem;
    }
}

@media (min-width: 640px) and (max-width: 1199px) {
    .home-product-block .product-box--purchase.product-box--unified .product__items--content__title,
    .home-product-block .product-box--purchase.product-box--unified:hover .product__items--content__title {
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .home-product-block .product-box--purchase.product-box--unified .product__items--content__title a {
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .home-deals .home-promotion-compact-card__content h3,
    .home-deals .home-promotion-compact-card__content h3 a {
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media (max-width: 575px) {
    .home-product-block__tab {
        min-height: 0;
        padding: .65rem 1.3rem;
        font-size: 1.2rem;
    }

    .product-box--purchase.product-box--unified .product__items--thumbnail {
        height: clamp(19rem, 52vw, 22rem);
        padding: .8rem;
    }

    .product-box--purchase.product-box--unified .product__items--link {
        padding: .6rem;
        border-radius: 1.2rem;
    }

    .product-box--purchase.product-box--unified .product__items2--content {
        min-height: 0;
        padding: 1rem;
    }

    .product-box--purchase.product-box--unified .product__items--content__title,
    .product-box--purchase.product-box--unified:hover .product__items--content__title {
        min-height: 4.6rem;
        font-size: 1.7rem;
    }

    .product-box--purchase.product-box--unified .product-box__description {
        min-height: 3.5rem;
        font-size: 1.15rem;
    }

    .product-box--purchase.product-box--unified .product-box__unit {
        width: auto;
        max-width: 100%;
        margin-top: .2rem;
        margin-left: auto;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
    }

    .product-box--unified .product-box__actions {
        gap: .5rem;
    }

    .product-box--unified .product-box__actions .product-action-button {
        padding: 0 .6rem;
        font-size: 1.15rem;
    }

    .product-box--unified .product-box__wholesale-link {
        padding: 0 .7rem;
        font-size: 1.1rem;
    }
}

@media (max-width: 639px) {
    .home-product-block__slider .swiper-slide {
        justify-content: center;
    }

    .home-product-block__slider .product__items {
        width: 100%;
    }

    .home-promotion-compact-card {
        padding: 1.4rem;
    }

    .home-promotion-compact-card__image-link {
        height: clamp(19rem, 52vw, 22rem);
        aspect-ratio: auto;
        margin-bottom: 1.2rem;
    }

    .home-promotion-compact-card__content h3 {
        min-height: 0;
        font-size: 1.7rem;
    }

    .home-promotion-compact-card__footer {
        padding-top: 1.6rem;
    }

    .home-promotion-compact-card__prices {
        margin-bottom: 1.3rem;
    }

    .home-promotion-compact-card__price {
        font-size: 2rem;
    }
}

/* Wholesale quote CTA below the home product catalogue. */
.home-b2b-cta {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.home-b2b-cta__banner {
    position: relative;
    overflow: hidden;
    padding: 4rem 5rem;
    border-radius: 2.4rem;
    background:
        radial-gradient(circle at 88% 12%, rgba(0, 135, 68, 0.2), transparent 30%),
        linear-gradient(135deg, #0f172a 0%, #08252a 52%, #022c22 100%);
    box-shadow: 0 1.8rem 4rem rgba(15, 23, 42, 0.2);
    color: #fff;
    isolation: isolate;
}

.home-b2b-cta__banner::before {
    position: absolute;
    z-index: 0;
    right: -12rem;
    bottom: -16rem;
    width: 42rem;
    height: 42rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    box-shadow: 0 0 0 7rem rgba(255, 255, 255, 0.015);
    content: "";
    pointer-events: none;
}

.home-b2b-cta__content {
    position: relative;
    z-index: 2;
    max-width: 100rem;
}

.home-b2b-cta__eyebrow {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--df-accent);
    font-size: 1.1rem;
    font-weight: var(--df-font-weight-semibold);
    letter-spacing: 0.08em;
    line-height: var(--df-line-height-compact);
    text-transform: uppercase;
}

.home-b2b-cta__title,
.home-b2b-cta__content h2 {
    margin: 0;
    color: #fff;
    font-size: 2.8rem;
    line-height: 1.2;
}

.home-b2b-cta__subtitle,
.home-b2b-cta__content p {
    max-width: 90rem;
    margin: 0.8rem 0 0;
    color: #cbd5e1;
    font-size: 1.25rem;
    line-height: 1.5;
}

.home-b2b-cta__steps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 3.2rem;
}

.home-b2b-cta__step {
    min-width: 0;
    min-height: 17rem;
    padding: 2.2rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.8rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.5rem);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease;
}

.home-b2b-cta__step::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--df-accent, #fbbf24), transparent);
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.home-b2b-cta__step:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.45), 0 0 20px rgba(251, 191, 36, 0.12);
}

.home-b2b-cta__step:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

.home-b2b-cta__step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    margin-bottom: 1.2rem;
}

.home-b2b-cta__step-number {
    display: block;
    color: var(--df-accent);
    font-family: var(--df-font-heading) !important;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.3s ease;
}

.home-b2b-cta__step:hover .home-b2b-cta__step-number {
    transform: scale(1.05);
}

.home-b2b-cta__step-icon {
    display: inline-flex;
    width: 4rem;
    height: 4rem;
    flex: 0 0 4rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: rgba(251, 191, 36, 0.14);
    color: var(--df-accent);
    font-size: 1.8rem;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.3s ease,
                color 0.3s ease,
                box-shadow 0.3s ease;
}

.home-b2b-cta__step:hover .home-b2b-cta__step-icon {
    transform: scale(1.1) rotate(6deg);
    background: var(--df-accent, #fbbf24);
    color: #0b2e1b;
    box-shadow: 0 6px 16px rgba(251, 191, 36, 0.35);
}

.home-b2b-cta__step h3 {
    margin: 0 0 0.8rem;
    color: #fff;
    font-size: 1.55rem;
    font-weight: 600;
    line-height: var(--df-line-height-compact);
    transition: color 0.3s ease, transform 0.3s ease;
}

.home-b2b-cta__step:hover h3 {
    color: #ffffff;
    font-weight: 600;
    transform: translateX(2px);
}

.home-b2b-cta__step p {
    margin: 0;
    color: #cbd5e1;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.55;
    transition: color 0.3s ease;
}

.home-b2b-cta__step:hover p {
    color: #e2e8f0;
    font-weight: 400;
}

.home-b2b-cta__footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
    margin-top: 3.2rem;
    padding-top: 2.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.home-b2b-cta__support {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 0.6rem 1.2rem;
    border-radius: 1.2rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.home-b2b-cta__support:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.home-b2b-cta__support-icon {
    display: inline-flex;
    width: 4.8rem;
    height: 4.8rem;
    flex: 0 0 4.8rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(52, 211, 153, 0.35);
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    font-size: 2rem;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, color 0.3s ease;
}

.home-b2b-cta__support:hover .home-b2b-cta__support-icon {
    transform: scale(1.12) rotate(-8deg);
    background: rgba(251, 191, 36, 0.25);
    color: var(--df-accent, #fbbf24);
    border-color: rgba(251, 191, 36, 0.4);
}

.home-b2b-cta__support-copy {
    display: flex;
    flex-direction: column;
    color: #94a3b8;
    font-size: 1.2rem;
    line-height: var(--df-line-height-compact);
}

.home-b2b-cta__support-copy strong {
    margin-bottom: 0.3rem;
    color: #fff;
    font-size: 1.3rem;
}

.home-b2b-cta__support-copy a {
    color: var(--df-accent);
    font-weight: var(--df-font-weight-bold);
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.home-b2b-cta__support-copy a:hover {
    color: #ffd044;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.45);
    text-decoration: none;
}

.home-b2b-cta__button {
    display: inline-flex;
    min-height: 5.2rem;
    align-items: center;
    justify-content: center;
    padding: 1.3rem 3rem;
    border: 0;
    border-radius: 1.2rem;
    font-size: 1.3rem;
    font-weight: var(--df-font-weight-bold);
    line-height: var(--df-line-height-compact);
    text-transform: uppercase;
    transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.home-b2b-cta__button--primary {
    background: var(--df-accent);
    color: #243028;
}

.home-b2b-cta__button--primary:hover,
.home-b2b-cta__button--primary:focus-visible {
    background: #ffd044;
    color: #17221b;
    box-shadow: 0 0.8rem 2rem rgba(17, 44, 29, 0.22);
    transform: translateY(-2px);
}

@media (max-width: 991px) {
    .home-b2b-cta__banner {
        padding: 3.4rem;
    }

    .home-b2b-cta__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-b2b-cta__step {
        min-height: 16rem;
    }
}

@media (max-width: 575px) {
    .home-b2b-cta {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .home-b2b-cta__banner {
        padding: 2.8rem 2.2rem;
        border-radius: 1.6rem;
    }

    .home-b2b-cta__steps {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 2.6rem;
    }

    .home-b2b-cta__step {
        min-height: 0;
        padding: 2rem;
    }

    .home-b2b-cta__footer {
        align-items: stretch;
        flex-direction: column;
        margin-top: 2.6rem;
        padding-top: 2rem;
    }

    .home-b2b-cta__button {
        width: 100%;
        font-size: 1.3rem;
    }
}

/* Shared promotion showcase used by the Home and promotion-page sliders. */
.promotion-showcase-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 2.4rem;
    box-shadow: 0 1.4rem 3.2rem rgba(5, 75, 39, .16);
}

.promotion-showcase-slider .swiper-wrapper {
    align-items: stretch;
    transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

.promotion-showcase-slider .swiper-slide {
    display: flex;
    height: auto;
}

.promotion-showcase {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 100%;
    min-height: 35rem;
    grid-template-columns: minmax(0, 1.05fr) minmax(42rem, .95fr);
    align-items: center;
    gap: 3rem;
    padding: 4.8rem 6rem 6.4rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 2.4rem;
    background-color: #00733a;
    background-image: 
        radial-gradient(circle at 90% 15%, rgba(255, 215, 0, 0.16) 0%, transparent 42%),
        radial-gradient(circle at 10% 90%, rgba(0, 42, 20, 0.5) 0%, transparent 45%),
        radial-gradient(circle at 75% 80%, rgba(76, 175, 80, 0.22) 0%, transparent 36%),
        linear-gradient(135deg, #014d25 0%, #006b36 35%, #008744 70%, #05a052 100%);
    color: #fff;
    isolation: isolate;
    box-shadow: 0 1.6rem 3.6rem rgba(0, 68, 34, 0.18);
}

.promotion-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px),
        radial-gradient(rgba(255, 255, 255, 0.06) 1.5px, transparent 1.5px);
    background-size: 28px 28px;
    background-position: 0 0, 14px 14px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.promotion-showcase::after {
    content: "";
    position: absolute;
    right: -4rem;
    bottom: -6rem;
    width: 36rem;
    height: 36rem;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, rgba(0, 135, 68, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.promotion-showcase__decor {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.promotion-showcase__decor-glow {
    position: absolute;
    top: -25%;
    right: 5%;
    width: 44rem;
    height: 44rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.13) 0%, rgba(0, 135, 68, 0) 65%);
    filter: blur(20px);
}

.promotion-showcase__decor-gift {
    position: absolute;
    right: 3rem;
    bottom: 1.5rem;
    font-size: 13rem;
    color: rgba(255, 255, 255, 0.07);
    transform: rotate(-12deg);
    line-height: 1;
}


.promotion-showcase__decor-wave {
    position: absolute;
    left: -5%;
    right: -5%;
    bottom: 0;
    height: 6rem;
    background: linear-gradient(to top, rgba(0, 42, 20, 0.25), transparent);
}

.promotion-showcase__content,
.promotion-showcase__countdown-panel {
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: 100%;
}

.promotion-showcase__scope {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: .8rem;
    margin-bottom: 2.2rem;
    padding: .8rem 1.6rem;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.3rem;
    font-weight: var(--df-font-weight-extrabold);
    letter-spacing: .035em;
    line-height: 1.25;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.promotion-showcase__scope i {
    color: #ffd700;
}

.promotion-showcase__content h2 {
    max-width: 75rem;
    margin: 0;
    color: #fff;
    font-size: clamp(3rem, 3.1vw, 4.6rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.12;
    text-shadow: 0 2px 12px rgba(0, 35, 18, 0.5);
    overflow-wrap: anywhere;
}

.promotion-showcase__date {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.3rem 0 0;
    color: rgba(255, 255, 255, .95);
    font-size: 1.7rem;
    font-weight: var(--df-font-weight-medium);
    line-height: 1.4;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.promotion-showcase__date i {
    flex: 0 0 auto;
    color: #ffd700;
    font-size: 2rem;
}

.promotion-showcase__quote {
    display: inline-flex;
    min-height: 5.2rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem;
    padding: 1.2rem 3rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #fff;
    color: #00733a;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    transition: all .25s ease;
    cursor: pointer;
}

.promotion-showcase__quote:hover,
.promotion-showcase__quote:focus-visible {
    background: #ffd700;
    border-color: #ffd700;
    color: #004724;
    transform: translateY(-.2rem);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.promotion-showcase__quote i {
    color: #00733a;
    transition: color .25s ease;
}

.promotion-showcase__quote:hover i {
    color: #004724;
}

.promotion-showcase__countdown-panel {
    padding: 3.4rem 3rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 2.6rem;
    background: linear-gradient(135deg, rgba(0, 50, 24, .72), rgba(0, 95, 46, .52));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1.4rem 3.4rem rgba(0, 36, 18, .3);
    backdrop-filter: blur(12px);
}

.promotion-showcase__countdown-title {
    display: grid;
    grid-template-columns: minmax(2rem, 1fr) auto minmax(2rem, 1fr);
    align-items: center;
    gap: 1.6rem;
    color: rgba(255, 255, 255, .95);
    font-size: 1.35rem;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
}

.promotion-showcase__countdown-title > span {
    height: 1px;
    background: rgba(255, 255, 255, .38);
}

.promotion-showcase__countdown-title i {
    margin-right: .65rem;
    font-size: 1.8rem;
    color: #ffd700;
}

.promotion-showcase__countdown.promotion-countdown {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    margin-top: 2.6rem;
}

.promotion-showcase__countdown .promotion-countdown__item {
    width: auto;
    height: 9.6rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 1.8rem;
    background: rgba(0, 38, 18, .65);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 4px 14px rgba(0, 0, 0, 0.18);
}

.promotion-showcase__countdown .promotion-countdown__item strong {
    font-size: 3.8rem;
    font-weight: 900;
    color: #fff;
}

.promotion-showcase__countdown .promotion-countdown__item strong.promotion-countdown__seconds {
    color: #ffd700;
}

.promotion-showcase__countdown .promotion-countdown__item span {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, .84);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.promotion-showcase__countdown .promotion-countdown__separator {
    padding: 0;
    font-size: 2.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .7);
}

.promotion-showcase-slider > .promotion-programs-slider__pagination.swiper-pagination,
.promotion-showcase-slider > .home-deals__slider-pagination.swiper-pagination {
    position: absolute;
    z-index: 5;
    right: auto;
    bottom: 2.2rem;
    left: 50%;
    display: flex;
    width: auto !important;
    min-height: 1.2rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0;
    transform: translateX(-50%);
}

.promotion-showcase-slider .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, .42);
    opacity: 1;
    transition: width .25s ease, background-color .25s ease;
}

.promotion-showcase-slider .swiper-pagination-bullet-active {
    width: 3.4rem;
    background: #fff;
}

.home-deals__shell > .home-deals__products {
    margin-top: 2.4rem;
}

@media (max-width: 1199px) {
    .promotion-showcase {
        grid-template-columns: minmax(0, 1fr) minmax(36rem, .9fr);
        gap: 3rem;
        padding: 4rem 4rem 6rem;
    }

    .promotion-showcase__countdown-panel {
        padding: 2.8rem 2.2rem;
    }

    .promotion-showcase__countdown .promotion-countdown__item {
        height: 8.2rem;
    }

    .promotion-showcase__countdown .promotion-countdown__item strong {
        font-size: 3.1rem;
    }
}

@media (max-width: 991px) {
    .promotion-showcase {
        min-height: 32rem;
        grid-template-columns: minmax(0, 1fr) minmax(31rem, .8fr);
        gap: 2.4rem;
        padding: 3.2rem 3.2rem 5.8rem;
    }

    .promotion-showcase__content h2 {
        font-size: clamp(2.6rem, 4vw, 3.8rem);
    }

    .promotion-showcase__date {
        font-size: 1.45rem;
    }

    .promotion-showcase__countdown-title {
        grid-template-columns: 1fr;
    }

    .promotion-showcase__countdown-title > span {
        display: none;
    }
}

@media (max-width: 767px) {
    .promotion-showcase-slider,
    .promotion-showcase {
        border-radius: 1.8rem;
    }

    .promotion-showcase {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 2.8rem;
        padding: 2.8rem 2.2rem 6rem;
    }

    .promotion-showcase__scope {
        margin-bottom: 1.6rem;
        font-size: 1.1rem;
    }

    .promotion-showcase__content h2 {
        font-size: 2.8rem;
    }

    .promotion-showcase__date {
        margin-top: 1.6rem;
    }

    .promotion-showcase__quote {
        min-height: 4.8rem;
        margin-top: 2rem;
        font-size: 1.4rem;
    }

    .promotion-showcase__countdown-panel {
        padding: 2.2rem 1.6rem;
        border-radius: 1.8rem;
    }

    .promotion-showcase__countdown.promotion-countdown {
        gap: .45rem;
        margin-top: 1.8rem;
    }

    .promotion-showcase__countdown .promotion-countdown__item {
        min-width: 0;
        height: 6.8rem;
    }

    .promotion-showcase__countdown .promotion-countdown__item strong {
        font-size: 2.4rem;
    }

    .promotion-showcase__countdown .promotion-countdown__item span {
        font-size: .9rem;
    }

    .promotion-showcase__countdown .promotion-countdown__separator {
        font-size: 1.8rem;
    }

}

@media (max-width: 575px) {
    .promotion-showcase__content h2 {
        font-size: 2.35rem;
    }

    .promotion-showcase__date {
        align-items: flex-start;
        font-size: 1.3rem;
    }

    .promotion-showcase__quote {
        width: 100%;
    }

    .promotion-showcase__countdown-title {
        font-size: 1.15rem;
    }

    .promotion-showcase__countdown .promotion-countdown__item {
        width: auto;
        height: 6.2rem;
    }

    .promotion-showcase__countdown .promotion-countdown__item strong {
        font-size: 2rem;
    }

    .promotion-showcase__countdown .promotion-countdown__separator {
        padding-top: 0;
        font-size: 1.5rem;
    }

}

/* ==========================================================================
   Promotion Showcase Background Image (API promotions banner)
   ========================================================================== */
.promotion-showcase__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.promotion-programs-slider-shell .swiper-pagination-bullet {
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.promotion-programs-slider-shell .swiper-pagination-bullet-active {
    background: #008744;
    border-color: #008744;
}