/* =========================================================
   CHĂM SÓC — GLOBAL DESIGN SYSTEM
   Cleaned & Consolidated Edition

   Section map
   01 Brand Tokens
   02 Typography
   03 Buttons
   04 Layout
   05 Information and About
   06 Header
   07 Footer
   08 General Pages
   09 Category and Product Lists
   10 Cart
   11 Checkout
   12 Product Page
   13 Home Page
   ========================================================= */


/* =========================================================
   01. BRAND DESIGN TOKENS
   ========================================================= */

:root {
    /* Brand Colors */
    --cs-orange: #D65F2E;
    --cs-orange-dark: #A94722;

    --cs-green: #626438;
    --cs-green-dark: #454827;

    --cs-brown: #5A2C1B;

    /* Backgrounds */
    --cs-cream: #FFF7EF;
    --cs-cream-light: #FFFCF8;
    --cs-white: #FFFFFF;

    /* Typography */
    --cs-text: #2F2A26;
    --cs-text-muted: #746C66;

    /* Borders */
    --cs-border: #F0E3D8;

    /* Radius */
    --cs-radius-sm: 10px;
    --cs-radius-md: 16px;
    --cs-radius-lg: 24px;

    /* Shadows */
    --cs-shadow-sm: 0 6px 20px rgba(73, 43, 25, 0.06);
    --cs-shadow-md: 0 12px 35px rgba(73, 43, 25, 0.08);

    /* Motion */
    --cs-transition: 0.25s ease;
}


/* =========================================================
   02. GLOBAL TYPOGRAPHY
   ========================================================= */

/* Base text */
body {
    color: var(--cs-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--cs-text);
    line-height: 1.35;
}

/* Paragraphs */
p {
    line-height: 1.8;
}

/* Links */
a {
    transition:
        color var(--cs-transition),
        background-color var(--cs-transition),
        border-color var(--cs-transition),
        opacity var(--cs-transition);
}


/* =========================================================
   03. GLOBAL BUTTON SYSTEM
   ========================================================= */

/* Primary CTA buttons */
.btn-primary,
.s-button-primary {
    background-color: var(--cs-orange) !important;
    border-color: var(--cs-orange) !important;
    color: var(--cs-white) !important;

    border-radius: var(--cs-radius-sm);

    transition:
        background-color var(--cs-transition),
        border-color var(--cs-transition),
        box-shadow var(--cs-transition),
        transform var(--cs-transition);
}

/* Primary CTA hover */
.btn-primary:hover,
.s-button-primary:hover {
    background-color: var(--cs-orange-dark) !important;
    border-color: var(--cs-orange-dark) !important;

    box-shadow: var(--cs-shadow-sm);
    transform: translateY(-1px);
}

/* Secondary / outline buttons */
.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--cs-orange) !important;
    color: var(--cs-orange) !important;

    border-radius: var(--cs-radius-sm);
}

/* Secondary hover */
.btn-outline-primary:hover {
    background-color: var(--cs-orange) !important;
    border-color: var(--cs-orange) !important;
    color: var(--cs-white) !important;
}

/* Keyboard accessibility */
.btn-primary:focus-visible,
.s-button-primary:focus-visible,
.btn-outline-primary:focus-visible {
    outline: 3px solid rgba(214, 95, 46, 0.25);
    outline-offset: 3px;
}


/* =========================================================
   04. GLOBAL LAYOUT & SPACING SYSTEM
   ========================================================= */

:root {
    /* Spacing Scale */
    --cs-space-xs: 8px;
    --cs-space-sm: 16px;
    --cs-space-md: 24px;
    --cs-space-lg: 40px;
    --cs-space-xl: 64px;
    --cs-space-2xl: 88px;

    /* Content Widths */
    --cs-container: 1280px;
    --cs-container-text: 820px;
}

/* Better anchor positioning with sticky header */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* Prevent accidental horizontal overflow */
body {
    overflow-x: hidden;
}

/* Responsive spacing tokens */
@media (max-width: 767px) {
    :root {
        --cs-space-lg: 32px;
        --cs-space-xl: 48px;
        --cs-space-2xl: 64px;
    }
}

/* Respect users who disable animations */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   05. INFORMATION / ABOUT PAGE
   ========================================================= */


/* ---------------------------------------------------------
   05.1 About — Brand Story
   --------------------------------------------------------- */

.s-information-page .s-block--bundle-text-content {
    margin-top: var(--cs-space-xl);
    margin-bottom: 0;
}

.s-information-page .s-block--bundle-text-content .container {
    max-width: var(--cs-container-text);
    margin-inline: auto;
}

.s-information-page .s-block--bundle-text-content h2,
.s-information-page .s-block--bundle-text-content h3 {
    color: var(--cs-text);
    line-height: 1.35;
    margin-top: 0;
    margin-bottom: var(--cs-space-sm);
}

.s-information-page .s-block--bundle-text-content p {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 0;

    color: var(--cs-text-muted);
    line-height: 1.9;
}

/* Brand Story — Mobile */
@media (max-width: 767px) {

    .s-information-page .s-block--bundle-text-content {
        margin-top: var(--cs-space-lg);
    }

    .s-information-page .s-block--bundle-text-content .container {
        padding-inline: 20px;
    }

    .s-information-page .s-block--bundle-text-content p {
        line-height: 1.8;
    }
}


/* ---------------------------------------------------------
   05.2 About — Hero
   --------------------------------------------------------- */

/*
 * The About page is the first information block,
 * so remove Salla's default section top spacing.
 */
.s-information-page > .s-block--bundle-hero-area {
    margin-top: 0;
    margin-bottom: 0;
}

/* Hero surface */
.s-information-page
.s-block--bundle-hero-area
.s-block--hero-area {
    padding-block: 48px;

    background-color: var(--cs-cream) !important;
    color: var(--cs-text) !important;
}

/* Main container */
.s-information-page
.s-block--bundle-hero-area
.lp-container {
    width: 100%;
    max-width: var(--cs-container);
    margin-inline: auto;
    padding-inline: 32px;
}

/* Two-column layout */
.s-information-page
.s-block--bundle-hero-area
.row {
    gap: 56px;
}

/* Text column */
.s-information-page
.s-block--bundle-hero-area
.content {
    max-width: 500px;
    gap: 0;
}

/* Small heading: عن تشام سو */
.s-information-page
.s-block--bundle-hero-area
.sub {
    display: inline-block;

    width: fit-content;

    margin: 0 0 14px;
    padding-bottom: 6px;

    color: var(--cs-orange);

    border-bottom: 2px solid var(--cs-orange);

    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

/* Main Hero heading */
.s-information-page
.s-block--bundle-hero-area
.main {
    margin: 0;

    color: var(--cs-text);

    font-size: clamp(36px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.25;

    letter-spacing: -0.02em;
}

/* Hero description */
.s-information-page
.s-block--bundle-hero-area
.desc {
    max-width: 480px;

    margin: 20px 0 0;

    color: var(--cs-text-muted);
    opacity: 1;

    font-size: 18px;
    line-height: 1.9;
}

/* Image column */
.s-information-page
.s-block--bundle-hero-area
.media {
    width: 54%;
    max-width: 650px;
    min-width: 0;
}

/* Hero image */
.s-information-page
.s-block--bundle-hero-area
.media img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: var(--cs-radius-lg);

    box-shadow: var(--cs-shadow-sm);
}


/* ---------------------------------------------------------
   05.2.1 About Hero — Desktop
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    .s-information-page
    .s-block--bundle-hero-area
    .row {
        min-height: 470px;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .content {
        flex: 1;

        align-items: flex-start;
        text-align: start;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .media {
        flex: 0 1 54%;
    }
}


/* ---------------------------------------------------------
   05.2.2 About Hero — Tablet
   --------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {

    .s-information-page
    .s-block--bundle-hero-area
    .s-block--hero-area {
        padding-block: 40px;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .row {
        gap: 32px;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .content {
        max-width: 620px;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .media {
        width: 80%;
        max-width: 650px;
    }
}


/* ---------------------------------------------------------
   05.2.3 About Hero — Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .s-information-page
    .s-block--bundle-hero-area
    .s-block--hero-area {
        padding-block: 28px 32px;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .lp-container {
        padding-inline: 20px;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .row {
        gap: 28px;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .content {
        width: 100%;
        max-width: 100%;

        align-items: center;
        text-align: center;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .sub {
        margin-bottom: 12px;

        font-size: 14px;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .main {
        font-size: 32px;
        line-height: 1.3;

        letter-spacing: 0;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .desc {
        max-width: 520px;

        margin-top: 16px;

        font-size: 16px;
        line-height: 1.8;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .media {
        width: 100%;
        max-width: 560px;
    }

    .s-information-page
    .s-block--bundle-hero-area
    .media img {
        border-radius: var(--cs-radius-md);
        box-shadow: none;
    }
}
/* ---------------------------------------------------------
   05.3 About — Why Chăm Sóc
   Global wrapper only
   --------------------------------------------------------- */

.s-information-page > .s-block--bundle-features-list {
    margin-top: var(--cs-space-xl);
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .s-information-page > .s-block--bundle-features-list {
        margin-top: var(--cs-space-lg);
    }
}
/* ---------------------------------------------------------
   05.4 About — Customer Testimonials
   Global wrapper only
   --------------------------------------------------------- */

.s-information-page > .s-block--bundle-trust-testimonials {
    margin-top: var(--cs-space-xl);
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .s-information-page > .s-block--bundle-trust-testimonials {
        margin-top: var(--cs-space-lg);
    }
}

/* ---------------------------------------------------------
   05.5 About — FAQ
   Global wrapper only
   --------------------------------------------------------- */

.s-information-page > .s-block--bundle-questions {
    margin-top: var(--cs-space-xl);
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .s-information-page > .s-block--bundle-questions {
        margin-top: var(--cs-space-lg);
    }
}

/* =========================================
   CHĂM SÓC — FAQ
   ========================================= */

/* Main section */
.s-block--faqs {
    background: #FFF7EF !important;
    padding: 64px 0 !important;
}


/* -----------------------------------------
   Section heading
   ----------------------------------------- */

.s-block--faqs .lp-title__overline {
    width: 64px !important;
    border-top: 2px solid #D65F2E !important;
    margin-bottom: 12px !important;
}

.s-block--faqs .lp-title__main {
    color: #2F2A26 !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.s-block--faqs .lp-title__sub {
    max-width: 620px !important;
    margin-bottom: 36px !important;

    color: #746C66 !important;
    opacity: 1 !important;

    line-height: 1.8 !important;
}


/* -----------------------------------------
   FAQ list
   ----------------------------------------- */

.s-block--faqs .list {
    max-width: 1000px;
    margin-inline: auto;

    gap: 14px !important;
}


/* -----------------------------------------
   FAQ card
   ----------------------------------------- */

.s-block--faqs .faq-item__inner {
    background: #FFFFFF !important;

    border: 1px solid #F0E3D8 !important;
    border-radius: 14px !important;

    box-shadow:
        0 5px 18px rgba(73, 43, 25, 0.045) !important;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* Question */
.s-block--faqs .faq-item label {
    padding-block: 20px !important;

    padding-inline-start: 24px !important;
    padding-inline-end: 72px !important;

    color: #2F2A26 !important;

    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;

    transition: color 0.25s ease;
}


/* -----------------------------------------
   Plus button
   ----------------------------------------- */

.s-block--faqs .faq-item label::after {
    top: 50% !important;
    transform: translateY(-50%);

    inset-inline-end: 20px !important;

    width: 34px !important;
    height: 34px !important;

    background: #FFF7EF !important;

    border: 1px solid #F0E3D8;

    color: #D65F2E !important;

    font-size: 22px;
    font-weight: 400;
    line-height: 1;

    box-shadow: none !important;

    transition:
        transform 0.35s ease,
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease !important;
}


/* -----------------------------------------
   Open state
   ----------------------------------------- */

.s-block--faqs .faq-item input:checked ~ .faq-item__inner {
    border-color: rgba(214, 95, 46, 0.35) !important;

    box-shadow:
        0 8px 24px rgba(73, 43, 25, 0.065) !important;
}

.s-block--faqs .faq-item input:checked ~ .faq-item__inner label {
    color: #A94722 !important;
}

.s-block--faqs .faq-item input:checked ~ .faq-item__inner label::after {
    transform:
        translateY(-50%)
        rotate(45deg) !important;

    background: #D65F2E !important;
    border-color: #D65F2E !important;

    color: #FFFFFF !important;
}


/* -----------------------------------------
   Answer
   ----------------------------------------- */

.s-block--faqs .faq-answer {
    transition:
        grid-template-rows 0.4s ease !important;
}

.s-block--faqs .faq-answer__content {
    padding-inline: 24px !important;

    color: #746C66 !important;

    font-size: 15px !important;
    line-height: 1.9 !important;

    transition:
        opacity 0.25s ease,
        padding-block 0.4s ease !important;
}

.s-block--faqs .faq-item input:checked
~ .faq-item__inner
.s-block--faqs .faq-answer__content {
    padding-block: 0 24px !important;
}


/* -----------------------------------------
   Desktop hover
   ----------------------------------------- */

@media (hover: hover) {

    .s-block--faqs .faq-item__inner:hover {
        border-color: rgba(214, 95, 46, 0.25) !important;

        box-shadow:
            0 8px 24px rgba(73, 43, 25, 0.06) !important;
    }

    .s-block--faqs .faq-item label:hover {
        color: #A94722 !important;
    }
}


/* -----------------------------------------
   Mobile
   ----------------------------------------- */

@media (max-width: 767px) {

    .s-block--faqs {
        padding: 48px 0 !important;
    }

    .s-block--faqs .lp-container {
        padding-inline: 20px !important;
    }

    .s-block--faqs .lp-title__overline {
        width: 52px !important;
        margin-bottom: 10px !important;
    }

    .s-block--faqs .lp-title__main {
        font-size: 26px !important;
        line-height: 1.4 !important;
    }

    .s-block--faqs .lp-title__sub {
        margin-bottom: 28px !important;

        font-size: 15px !important;
        line-height: 1.75 !important;
    }

    .s-block--faqs .list {
        gap: 12px !important;
    }

    .s-block--faqs .faq-item__inner {
        border-radius: 12px !important;
    }

    .s-block--faqs .faq-item label {
        padding-block: 18px !important;

        padding-inline-start: 18px !important;
        padding-inline-end: 62px !important;

        font-size: 15px !important;
    }

    .s-block--faqs .faq-item label::after {
        inset-inline-end: 16px !important;

        width: 32px !important;
        height: 32px !important;

        font-size: 20px;
    }

    .s-block--faqs .faq-answer__content {
        padding-inline: 18px !important;

        font-size: 14px !important;
        line-height: 1.85 !important;
    }

    .s-block--faqs .faq-item input:checked
    ~ .faq-item__inner
    .s-block--faqs .faq-answer__content {
        padding-block: 0 20px !important;
    }
}
/* =========================================================
   06. HEADER SYSTEM
   06.1 Base Header + 06.2 Brand Logo
   ========================================================= */

/* ---------------------------------------------------------
   06.1 Base Header
   --------------------------------------------------------- */

.header-components-all {
    background: var(--cs-white);
}

/* Main header */
.store-header {
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--cs-border);
}

/* Main inner container */
.store-header .header-components-inner {
    min-height: 82px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Keep header content vertically centered */
.store-header .header-components-inner > div {
    align-items: center;
}

/* Remove unnecessary heavy effects */
.store-header,
.header-components {
    box-shadow: none;
}

/* ---------------------------------------------------------
   06.2 Brand Logo
   --------------------------------------------------------- */

.store-header .navbar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
}

.store-header .navbar-brand img {
    display: block;
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 62px;
    object-fit: contain;
}

/* ---------------------------------------------------------
   Header spacing
   --------------------------------------------------------- */

.store-header .header-components-inner {
    gap: 32px;
}

.store-header .left-side {
    gap: 6px;
    align-items: center;
}

/* ---------------------------------------------------------
   Header interactive elements — base only
   --------------------------------------------------------- */

.store-header button,
.store-header a {
    -webkit-tap-highlight-color: transparent;
}

.store-header .header-icon-button {
    transition:
        color var(--cs-transition),
        background-color var(--cs-transition),
        border-color var(--cs-transition),
        opacity var(--cs-transition);
}

/* ---------------------------------------------------------
   Sticky / Fixed Header version
   Keep visual identity consistent
   --------------------------------------------------------- */

#mainnav .inner {
    background: var(--cs-white);
    border-bottom: 1px solid var(--cs-border);
}

#mainnav .navbar-brand {
    display: flex;
    align-items: center;
}

#mainnav .navbar-brand img {
    display: block;
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 58px;
    object-fit: contain;
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 1023px) {

    .store-header .header-components-inner {
        min-height: 70px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        gap: 12px;
    }

    .store-header .navbar-brand img {
        max-width: 118px;
        max-height: 52px;
    }

    .store-header .left-side {
        gap: 2px;
    }
}

/* Small phones */
@media (max-width: 480px) {

    .store-header .header-components-inner {
        min-height: 66px;
    }

    .store-header .navbar-brand img {
        max-width: 108px;
        max-height: 48px;
    }
}

/* ---------------------------------------------------------
   06.3 Main Navigation
   --------------------------------------------------------- */

/* Main menu layout */
.store-header .main-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}

/* Menu links */
.store-header .main-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    color: var(--cs-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 8px;
    text-decoration: none;
    transition:
        color var(--cs-transition),
        background-color var(--cs-transition);
}

/* Subtle underline */
.store-header .main-menu > li > a::after {
    content: "";
    position: absolute;
    right: 12px;
    left: 12px;
    bottom: 4px;
    height: 2px;
    background: var(--cs-orange);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--cs-transition);
}

/* Hover */
@media (hover: hover) {
    .store-header .main-menu > li > a:hover {
        color: var(--cs-orange-dark);
        background: var(--cs-cream);
    }

    .store-header .main-menu > li > a:hover::after {
        transform: scaleX(1);
    }
}

/* Keyboard accessibility */
.store-header .main-menu > li > a:focus-visible {
    color: var(--cs-orange-dark);
    background: var(--cs-cream);
    outline: 2px solid rgba(214, 95, 46, 0.25);
    outline-offset: 2px;
}

/* Keep sticky/fixed menu visually consistent */
#mainnav .main-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}

#mainnav .main-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    color: var(--cs-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 8px;
    text-decoration: none;
    transition:
        color var(--cs-transition),
        background-color var(--cs-transition);
}

#mainnav .main-menu > li > a::after {
    content: "";
    position: absolute;
    right: 12px;
    left: 12px;
    bottom: 4px;
    height: 2px;
    background: var(--cs-orange);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--cs-transition);
}

@media (hover: hover) {
    #mainnav .main-menu > li > a:hover {
        color: var(--cs-orange-dark);
        background: var(--cs-cream);
    }

    #mainnav .main-menu > li > a:hover::after {
        transform: scaleX(1);
    }
}

/* Do not apply desktop navigation styling to mobile drawer */
@media (max-width: 1023px) {
    .store-header .main-menu {
        gap: 0;
    }
}

/* ---------------------------------------------------------
   06.4 Header Actions
   Search / Account / Cart
   --------------------------------------------------------- */

/* Actions container */
.store-header .left-side {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Search */
.store-header .search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px !important;
    height: 42px;
    padding: 0;
    color: var(--cs-text);
    border-radius: 50%;
    background: transparent;
    transition:
        color var(--cs-transition),
        background-color var(--cs-transition);
}

.store-header .search-btn .icon,
.store-header .search-btn i {
    font-size: 20px;
}

/* Account */
.store-header .left-side salla-user-menu {
    margin: 0;
}

.store-header .left-side .s-user-menu-trigger {
    min-height: 42px;
    padding: 3px;
    border-radius: 22px;
    transition: background-color var(--cs-transition);
}

/* Keep only avatar visible in desktop header */
.store-header .left-side .s-user-menu-trigger-content,
.store-header .left-side .s-user-menu-trigger-icon {
    display: none !important;
}

.store-header .left-side .s-user-menu-avatar-wrap {
    width: 38px;
    height: 38px;
    margin: 0;
}

.store-header .left-side .s-user-menu-trigger-avatar {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 50%;
}

/* Cart */
.store-header .left-side salla-cart-summary {
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-header .left-side .s-cart-summary-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0;
    color: var(--cs-text);
    border-radius: 50%;
    transition:
        color var(--cs-transition),
        background-color var(--cs-transition);
}

/* Hide cart total in header, keep cart icon + count */
.store-header .left-side .s-cart-summary-content {
    display: none !important;
}

.store-header .left-side #s-cart-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-header .left-side #s-cart-icon .icon {
    font-size: 21px;
}

/* Cart quantity badge */
.store-header .left-side .s-cart-summary-count {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 20px;
    background: var(--cs-orange);
    color: var(--cs-white);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* Desktop hover */
@media (hover: hover) {

    .store-header .search-btn:hover,
    .store-header .left-side .s-cart-summary-wrapper:hover,
    .store-header .left-side .s-user-menu-trigger:hover {
        background: var(--cs-cream);
        color: var(--cs-orange-dark);
    }
}

/* Mobile sizing */
@media (max-width: 1023px) {

    .store-header .search-btn,
    .store-header .left-side .s-cart-summary-wrapper {
        width: 40px !important;
        min-width: 40px;
        height: 40px;
    }

    .store-header .left-side .s-user-menu-avatar-wrap,
    .store-header .left-side .s-user-menu-trigger-avatar {
        width: 36px;
        height: 36px;
    }
}

/* =========================================================
   07. FOOTER SYSTEM
   ========================================================= */


/* ---------------------------------------------------------
   07.1 Footer Base
   --------------------------------------------------------- */

.store-footer {
    background: #FFFCF8 !important;
    color: var(--cs-text);
    padding-top: 0 !important;
}

.store-footer__top {
    padding: 56px 0 46px;
    background: #FFFCF8;
    border-top: 1px solid var(--cs-border);
}

.store-footer .footer-content {
    align-items: flex-start;
    gap: 40px !important;
}


/* ---------------------------------------------------------
   07.2 Brand / About
   --------------------------------------------------------- */

.store-footer .footer-logo {
    display: inline-flex;
    align-items: center;
    margin-bottom: 18px;
}

.store-footer .footer-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 155px;
    max-height: 68px !important;
    object-fit: contain;
}

.store-footer .footer-logo + p,
.store-footer .footer-logo ~ p {
    max-width: 380px;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    color: var(--cs-text-muted);
    font-size: 14px;
    line-height: 1.9;
}


/* ---------------------------------------------------------
   07.3 Footer Titles
   --------------------------------------------------------- */

.store-footer .footer-title,
.store-footer .important-links > h3,
.store-footer .s-contacts-title {
    position: relative;
    margin: 0 0 22px !important;
    padding-bottom: 12px;
    color: var(--cs-text) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.4;
}

.store-footer .footer-title::after,
.store-footer .important-links > h3::after,
.store-footer .s-contacts-title::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    border-radius: 2px;
    background: var(--cs-orange);
}


/* ---------------------------------------------------------
   07.4 Account Links
   --------------------------------------------------------- */

.store-footer .s-user-menu-inline {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.store-footer .s-user-menu-dropdown-item {
    margin: 0;
}

.store-footer .s-user-menu-dropdown-item-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 4px 0;
    color: var(--cs-text-muted) !important;
    font-size: 14px;
    line-height: 1.6;
    transition:
        color var(--cs-transition),
        transform var(--cs-transition);
}

.store-footer .s-user-menu-dropdown-item-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    color: var(--cs-green);
}

.store-footer .s-user-menu-dropdown-item-prefix svg {
    width: 16px;
    height: 16px;
}


/* ---------------------------------------------------------
   07.5 Important Links
   --------------------------------------------------------- */

.store-footer .s-menu-footer-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.store-footer .s-menu-footer-item {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 4px 0;
    color: var(--cs-text-muted) !important;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none !important;
    transition:
        color var(--cs-transition),
        transform var(--cs-transition);
}


/* ---------------------------------------------------------
   07.6 Contact
   --------------------------------------------------------- */

.store-footer .s-contacts-list {
    gap: 4px;
}

.store-footer .s-contacts-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 4px 0;
    color: var(--cs-text-muted) !important;
    font-size: 14px;
    text-decoration: none !important;
    transition:
        color var(--cs-transition),
        transform var(--cs-transition);
}

.store-footer .s-contacts-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    color: var(--cs-orange);
}

.store-footer .s-contacts-icon svg {
    width: 18px;
    height: 18px;
}

/* Better rendering for phone/email inside RTL footer */
.store-footer .s-contacts-item .unicode {
    direction: ltr;
    unicode-bidi: plaintext;
    text-align: right;
}


/* ---------------------------------------------------------
   07.7 Link Hover
   --------------------------------------------------------- */

@media (hover: hover) {

    .store-footer .s-menu-footer-item:hover,
    .store-footer .s-user-menu-dropdown-item-link:hover,
    .store-footer .s-contacts-item:hover {
        color: var(--cs-orange-dark) !important;
        transform: translateX(-3px);
    }
}


/* ---------------------------------------------------------
   07.8 Footer Bottom
   --------------------------------------------------------- */

.store-footer .footer-bottom {
    margin: 0;
    background: #FFF7EF;
    border-top: 1px solid var(--cs-border);
}

.store-footer .footer-bottom .container {
    min-height: 78px;
}

.store-footer .footer-bottom p {
    margin: 0 !important;
    color: var(--cs-text-muted) !important;
    font-size: 13px;
}

.store-footer .footer-bottom a {
    color: var(--cs-text-muted);
    transition: color var(--cs-transition);
}

@media (hover: hover) {
    .store-footer .footer-bottom a:hover {
        color: var(--cs-orange-dark);
    }
}


/* ---------------------------------------------------------
   07.9 Payment Methods
   --------------------------------------------------------- */

.store-footer .s-payments-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
}

.store-footer .s-payments-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ---------------------------------------------------------
   07.10 Social Media
   --------------------------------------------------------- */

.store-footer .s-social-list {
    display: flex;
    align-items: center;
    gap: 8px;
}

.store-footer .s-social-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--cs-border);
    border-radius: 50%;
    background: var(--cs-white);
    color: var(--cs-text);
    transition:
        color var(--cs-transition),
        background-color var(--cs-transition),
        border-color var(--cs-transition),
        transform var(--cs-transition);
}

.store-footer .s-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-footer .s-social-icon svg {
    width: 17px;
    height: 17px;
}

@media (hover: hover) {
    .store-footer .s-social-link a:hover {
        color: var(--cs-white);
        background: var(--cs-orange);
        border-color: var(--cs-orange);
        transform: translateY(-2px);
    }
}


/* ---------------------------------------------------------
   07.11 Mobile Footer
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .store-footer__top {
        padding: 40px 0 32px;
    }

    .store-footer .footer-content {
        gap: 26px !important;
    }

    .store-footer .footer-logo img {
        max-width: 135px;
        max-height: 60px !important;
    }

    .store-footer .footer-logo + p,
    .store-footer .footer-logo ~ p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.85;
    }

    .store-footer .footer-title,
    .store-footer .important-links > h3,
    .store-footer .s-contacts-title {
        margin-bottom: 16px !important;
        font-size: 16px !important;
    }

    .store-footer .footer-bottom .container {
        min-height: auto;
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    .store-footer .footer-bottom .container > div {
        gap: 14px;
    }

    .store-footer .s-social-list {
        justify-content: center;
    }

    .store-footer .s-payments-list {
        justify-content: center;
    }

    .store-footer .footer-bottom p {
        text-align: center;
        line-height: 1.7;
    }
}

/* ---------------------------------------------------------
   07.12 Footer Refinements
   --------------------------------------------------------- */

/* Reduce excessive footer height */
.store-footer__top {
    padding-top: 42px !important;
    padding-bottom: 34px !important;
}

/* Better column distribution */
.store-footer .footer-content {
    gap: 32px !important;
}

/* Brand column */
.store-footer .footer-logo {
    margin-bottom: 14px !important;
}

.store-footer .footer-logo img {
     max-width: 190px !important;
    max-height: 78px !important;
}

.store-footer .footer-logo + p,
.store-footer .footer-logo ~ p {
    max-width: 360px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
}

/* Titles */
.store-footer .footer-title,
.store-footer .important-links > h3,
.store-footer .s-contacts-title {
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
}

/* Account links */
.store-footer .s-user-menu-inline {
    gap: 0 !important;
}

.store-footer .s-user-menu-dropdown-item-link {
    min-height: 30px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.5 !important;
}

/* Important links */
.store-footer .s-menu-footer-list {
    gap: 0 !important;
}

.store-footer .s-menu-footer-item {
    min-height: 30px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.5 !important;
}

/* Contact */
.store-footer .s-contacts-list {
    gap: 0 !important;
}

.store-footer .s-contacts-item {
    min-height: 32px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Bottom area */
.store-footer .footer-bottom .container {
    min-height: 68px !important;
}

/* Mobile */
@media (max-width: 767px) {

    .store-footer__top {
        padding-top: 34px !important;
        padding-bottom: 28px !important;
    }

    .store-footer .footer-content {
        gap: 24px !important;
    }

    .store-footer .footer-logo img {
        max-width: 150px !important;
    }

    .store-footer .footer-bottom .container {
        min-height: auto !important;
    }
}

/* ---------------------------------------------------------
   07.13 Account Menu — Desktop Compact Grid
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    .store-footer .footer-user-menu .s-user-menu-inline {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        column-gap: 26px !important;
        row-gap: 2px !important;
        align-items: start;
    }

    .store-footer .footer-user-menu .s-user-menu-dropdown-item-link {
        min-height: 30px !important;
        white-space: nowrap;
    }
}

/* Keep normal single column on mobile/tablet */
@media (max-width: 1023px) {

    .store-footer .footer-user-menu .s-user-menu-inline {
        display: flex;
        flex-direction: column;
    }
}
/* ---------------------------------------------------------
   07.14 Footer — Mobile Final
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .store-footer__top {
        padding: 30px 0 26px !important;
    }

    .store-footer .footer-content {
        gap: 0 18px !important;
        align-items: flex-start;
    }

    /* Brand area remains full width */
    .store-footer .footer-content > div:first-child {
        width: 100% !important;
        flex-basis: 100% !important;
        margin-bottom: 30px !important;
    }

    .store-footer .footer-logo {
        margin-bottom: 14px !important;
    }

    .store-footer .footer-logo img {
        max-width: 155px !important;
        max-height: 65px !important;
    }

    .store-footer .footer-logo + p,
    .store-footer .footer-logo ~ p {
        max-width: 100% !important;
        margin-bottom: 0 !important;
        font-size: 13.5px !important;
        line-height: 1.9 !important;
    }

    /* Footer section titles */
    .store-footer .footer-title,
    .store-footer .important-links > h3,
    .store-footer .s-contacts-title {
        margin-bottom: 12px !important;
        padding-bottom: 9px !important;
        font-size: 15px !important;
    }

    /* Account links */
    .store-footer .s-user-menu-dropdown-item-link {
        min-height: 32px !important;
        padding: 2px 0 !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* Important links */
    .store-footer .s-menu-footer-item {
        min-height: 32px !important;
        padding: 3px 0 !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* Contact section */
    .store-footer .s-contacts-item {
        min-height: 34px !important;
        padding: 2px 0 !important;
        font-size: 13px !important;
    }

    .store-footer .s-contacts-icon svg {
        width: 17px;
        height: 17px;
    }
}


/* Very small phones */
@media (max-width: 340px) {

    .store-footer .footer-content {
        gap: 0 12px !important;
    }

    .store-footer .s-user-menu-dropdown-item-link,
    .store-footer .s-menu-footer-item {
        font-size: 12.5px !important;
    }
}
/* ---------------------------------------------------------
   07.15 Footer — Mobile Structure Final
   Stacked sections for clearer mobile UX
   --------------------------------------------------------- */

@media (max-width: 767px) {

    /* One-column mobile footer */
    .store-footer .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* Every footer block spans full width */
    .store-footer .footer-content > div {
        width: 100% !important;
        max-width: none !important;
        flex: 0 0 100% !important;
        margin: 0 !important;
        padding: 20px 0 !important;
    }

    /* Brand block */
    .store-footer .footer-content > div:first-child {
        padding-top: 0 !important;
        padding-bottom: 24px !important;
        border-bottom: 1px solid var(--cs-border);
    }

    .store-footer .footer-logo {
        display: flex !important;
        justify-content: flex-start !important;
        margin-bottom: 12px !important;
    }

    .store-footer .footer-logo img {
        max-width: 150px !important;
        max-height: 62px !important;
    }

    .store-footer .footer-logo + p,
    .store-footer .footer-logo ~ p {
        max-width: 100% !important;
        margin: 0 !important;
        color: var(--cs-text-muted) !important;
        font-size: 13.5px !important;
        line-height: 1.9 !important;
    }

    /* Account, important links and contact become separate stacked sections */
    .store-footer .footer-content > div:nth-child(2),
    .store-footer .footer-content > div:nth-child(3),
    .store-footer .footer-content > div:nth-child(4) {
        border-bottom: 1px solid var(--cs-border);
    }

    /* Apps block if rendered */
    .store-footer .footer-content > div:nth-child(5) {
        padding-bottom: 0 !important;
    }

    /* Section headings */
    .store-footer .footer-title,
    .store-footer .important-links > h3,
    .store-footer .s-contacts-title {
        margin: 0 0 14px !important;
        padding: 0 0 9px !important;
        color: var(--cs-brown) !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        line-height: 1.4 !important;
    }

    .store-footer .footer-title::after,
    .store-footer .important-links > h3::after,
    .store-footer .s-contacts-title::after {
        width: 32px !important;
        height: 2px !important;
    }

    /* Account menu: one item per row */
    .store-footer .footer-user-menu .s-user-menu-inline,
    .store-footer .s-user-menu-inline {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        width: 100% !important;
    }

    .store-footer .s-user-menu-dropdown-item {
        width: 100% !important;
    }

    .store-footer .s-user-menu-dropdown-item-link {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 38px !important;
        padding: 5px 0 !important;
        color: var(--cs-text) !important;
        font-size: 13.5px !important;
        line-height: 1.6 !important;
    }

    /* Keep Salla account icons hidden in footer if theme already hides them */
    .store-footer .s-user-menu-dropdown-item-prefix {
        flex: 0 0 auto;
    }

    /* Important links: one link per row */
    .store-footer .s-menu-footer-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        width: 100% !important;
    }

    .store-footer .s-menu-footer-item {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 38px !important;
        padding: 5px 0 !important;
        color: var(--cs-text-muted) !important;
        font-size: 13.5px !important;
        line-height: 1.6 !important;
    }

    /* Contacts: clear vertical list */
    .store-footer .s-contacts-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .store-footer .s-contacts-item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 40px !important;
        padding: 5px 0 !important;
        color: var(--cs-text-muted) !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    .store-footer .s-contacts-icon {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid var(--cs-border) !important;
        border-radius: 10px !important;
        background: var(--cs-white) !important;
        color: var(--cs-orange) !important;
    }

    .store-footer .s-contacts-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .store-footer .s-contacts-item .unicode {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 360px) {
    .store-footer .footer-content > div {
        padding-block: 18px !important;
    }

    .store-footer .s-user-menu-dropdown-item-link,
    .store-footer .s-menu-footer-item,
    .store-footer .s-contacts-item {
        font-size: 12.5px !important;
    }
}

/* ---------------------------------------------------------
   07.16 Footer Bottom — Mobile Final
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .store-footer .footer-bottom {
        margin-top: 0 !important;
    }

    .store-footer .footer-bottom .container {
        padding-top: 22px !important;
        padding-bottom: 20px !important;
    }

    .store-footer .footer-bottom .container > div {
        gap: 18px !important;
    }

    /* Social */
    .store-footer .footer-bottom .s-social-list {
        justify-content: center !important;
        gap: 8px !important;
    }

    .store-footer .footer-bottom .s-social-link a {
        width: 38px !important;
        height: 38px !important;
    }

    /* Payments */
    .store-footer .footer-bottom .s-payments-list {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
        max-width: 290px;
        margin: 0 auto !important;
    }

    .store-footer .footer-bottom .s-payments-list-item {
        margin: 0 !important;
    }

    /* Copyright */
    .store-footer .footer-bottom .text-sm {
        width: 100%;
        padding: 0 !important;
        text-align: center;
    }

    .store-footer .footer-bottom p {
        margin: 0 !important;
        text-align: center !important;
        font-size: 12px !important;
        line-height: 1.7 !important;
    }
}

@media (max-width: 360px) {

    .store-footer .footer-bottom .s-payments-list {
        max-width: 270px;
        gap: 6px !important;
    }
}

/* =========================================================
   08. GENERAL PAGES
   Informational / Policy Pages
   ========================================================= */


/* ---------------------------------------------------------
   08.1 Page Base
   --------------------------------------------------------- */

.page-container {
    padding-bottom: var(--cs-space-xl);
}


/* ---------------------------------------------------------
   08.2 Breadcrumbs
   --------------------------------------------------------- */

.page-container > .breadcrumbs {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.page-container .s-breadcrumb-wrapper {
    font-size: 13px;
}

.page-container .s-breadcrumb-item,
.page-container .s-breadcrumb-item a {
    color: var(--cs-text-muted);
    transition: color var(--cs-transition);
}

.page-container .s-breadcrumb-item:last-child {
    color: var(--cs-text);
    font-weight: 500;
}

@media (hover: hover) {
    .page-container .s-breadcrumb-item a:hover {
        color: var(--cs-orange);
    }
}


/* ---------------------------------------------------------
   08.3 Main Content Card
   --------------------------------------------------------- */

.page-container .content--single-page {
    width: 100% !important;
    max-width: 980px;
    margin-top: 20px !important;
    margin-left: auto;
    margin-right: auto;

    padding: 48px 54px !important;

    background: var(--cs-white);
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius-lg) !important;

    box-shadow: var(--cs-shadow-sm);
}


/* ---------------------------------------------------------
   08.4 Page Main Title
   --------------------------------------------------------- */

.page-container .content--single-page > h1 {
    position: relative;

    margin: 0 0 34px !important;
    padding: 0 0 18px !important;

    color: var(--cs-text);
    font-size: clamp(25px, 3vw, 34px) !important;
    font-weight: 700 !important;
    line-height: 1.4;
}

.page-container .content--single-page > h1::after {
    content: "";
    position: absolute;

    right: 0;
    bottom: 0;

    width: 48px;
    height: 3px;

    background: var(--cs-orange);
    border-radius: 20px;
}


/* ---------------------------------------------------------
   08.5 Article Typography
   --------------------------------------------------------- */

.page-container .content-entry {
    max-width: 100%;
    color: var(--cs-text);
    font-size: 15px;
    line-height: 2;
}

.page-container .content-entry p {
    margin: 0 0 16px;
    color: var(--cs-text-muted);
    font-size: 15px;
    line-height: 2;
}


/* First paragraph / intro */
.page-container .content-entry > p:first-child {
    margin-bottom: 26px;

    color: var(--cs-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.9;
}


/* ---------------------------------------------------------
   08.6 Article Headings
   --------------------------------------------------------- */

.page-container .content-entry h2 {
    position: relative;

    margin: 38px 0 18px !important;
    padding-right: 16px;

    color: var(--cs-brown);
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.5;
}

.page-container .content-entry h2::before {
    content: "";
    position: absolute;

    right: 0;
    top: 6px;

    width: 4px;
    height: calc(100% - 12px);

    background: var(--cs-orange);
    border-radius: 10px;
}


.page-container .content-entry h3 {
    margin: 28px 0 12px !important;

    color: var(--cs-text);
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   08.7 Lists
   --------------------------------------------------------- */

.page-container .content-entry ul,
.page-container .content-entry ol {
    margin: 14px 0 24px;
    padding-right: 24px;
}

.page-container .content-entry li {
    margin-bottom: 9px;

    color: var(--cs-text-muted);
    font-size: 15px;
    line-height: 1.9;
}

.page-container .content-entry ul li::marker {
    color: var(--cs-orange);
}

.page-container .content-entry ol li::marker {
    color: var(--cs-orange);
    font-weight: 700;
}


/* ---------------------------------------------------------
   08.8 Links
   --------------------------------------------------------- */

.page-container .content-entry a {
    color: var(--cs-orange-dark);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(169, 71, 34, 0.28);
    text-underline-offset: 4px;

    transition:
        color var(--cs-transition),
        text-decoration-color var(--cs-transition);
}

@media (hover: hover) {

    .page-container .content-entry a:hover {
        color: var(--cs-orange);
        text-decoration-color: var(--cs-orange);
    }
}


/* ---------------------------------------------------------
   08.9 Strong Text
   --------------------------------------------------------- */

.page-container .content-entry strong,
.page-container .content-entry b {
    color: var(--cs-text);
    font-weight: 700;
}


/* ---------------------------------------------------------
   08.10 Tables
   --------------------------------------------------------- */

.page-container .content-entry table {
    width: 100%;
    margin: 26px 0;

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;

    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
}

.page-container .content-entry th,
.page-container .content-entry td {
    padding: 14px 16px;

    border-bottom: 1px solid var(--cs-border);

    text-align: right;
    font-size: 14px;
    line-height: 1.7;
}

.page-container .content-entry th {
    background: var(--cs-cream);
    color: var(--cs-text);
    font-weight: 700;
}

.page-container .content-entry td {
    color: var(--cs-text-muted);
}

.page-container .content-entry tr:last-child td {
    border-bottom: 0;
}


/* ---------------------------------------------------------
   08.11 Comments Area
   --------------------------------------------------------- */

.page-container .s-comments-page {
    margin-top: 46px;
    padding-top: 34px;

    border-top: 1px solid var(--cs-border);
}

.page-container .s-comment-form-wrapper {
    align-items: flex-start;
}

.page-container .s-comment-form-input {
    min-height: 110px;

    padding: 14px 16px !important;

    background: var(--cs-cream-light);
    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius-md) !important;

    color: var(--cs-text);

    transition:
        border-color var(--cs-transition),
        box-shadow var(--cs-transition),
        background-color var(--cs-transition);
}

.page-container .s-comment-form-input:focus {
    background: var(--cs-white);

    border-color: rgba(214, 95, 46, 0.55) !important;

    box-shadow: 0 0 0 3px rgba(214, 95, 46, 0.08);

    outline: none;
}

.page-container .s-comment-form-action .s-button-btn {
    min-width: 120px;

    border-radius: 12px !important;

    font-weight: 600;
}


/* ---------------------------------------------------------
   08.12 Empty Comments
   --------------------------------------------------------- */

.page-container .no-content-placeholder--comments {
    padding: 34px 20px;

    color: var(--cs-text-muted);
    text-align: center;
}


/* ---------------------------------------------------------
   08.13 Tablet
   --------------------------------------------------------- */

@media (max-width: 1023px) {

    .page-container .content--single-page {
        max-width: 900px;

        padding: 40px 36px !important;
    }
}


/* ---------------------------------------------------------
   08.14 Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .page-container {
        padding-bottom: 40px;
    }

    .page-container > .breadcrumbs {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .page-container .content--single-page {
        margin-top: 6px !important;

        padding: 28px 20px !important;

        border-radius: 18px !important;
    }

    .page-container .content--single-page > h1 {
        margin-bottom: 26px !important;
        padding-bottom: 14px !important;

        font-size: 24px !important;
    }

    .page-container .content--single-page > h1::after {
        width: 40px;
    }

    .page-container .content-entry,
    .page-container .content-entry p,
    .page-container .content-entry li {
        font-size: 14px;
    }

    .page-container .content-entry p {
        line-height: 1.95;
    }

    .page-container .content-entry > p:first-child {
        margin-bottom: 22px;

        font-size: 15px;
    }

    .page-container .content-entry h2 {
        margin-top: 30px !important;

        font-size: 19px !important;
    }

    .page-container .content-entry h3 {
        margin-top: 24px !important;

        font-size: 16px !important;
    }

    .page-container .s-comments-page {
        margin-top: 36px;
        padding-top: 28px;
    }
}


/* ---------------------------------------------------------
   08.15 Very Small Phones
   --------------------------------------------------------- */

@media (max-width: 360px) {

    .page-container .content--single-page {
        padding: 24px 16px !important;
    }

    .page-container .content--single-page > h1 {
        font-size: 22px !important;
    }
}

/* =========================================================
   09. CATEGORY / PRODUCTS LIST PAGES
   ========================================================= */


/* ---------------------------------------------------------
   09.1 Category Header
   --------------------------------------------------------- */

#main-content > .page-header {
    min-height: 72px !important;
    height: auto !important;

    display: flex;
    align-items: center;

    background-color: var(--cs-cream) !important;
    color: var(--cs-brown) !important;

    border-bottom: 1px solid var(--cs-border);
}


/* ---------------------------------------------------------
   09.2 Category Breadcrumbs
   --------------------------------------------------------- */

#main-content > .page-header .breadcrumbs {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

#main-content > .page-header .s-breadcrumb-wrapper {
    display: flex;
    align-items: center;

    font-size: 13px;
    line-height: 1.5;
}

#main-content > .page-header .s-breadcrumb-item,
#main-content > .page-header .s-breadcrumb-item a {
    color: var(--cs-text-muted) !important;
}

#main-content > .page-header .s-breadcrumb-item:last-child {
    color: var(--cs-brown) !important;
    font-weight: 600;
}

#main-content > .page-header .s-breadcrumb-arrow {
    opacity: .45;
}

#main-content > .page-header .s-breadcrumb-arrow svg {
    width: 18px;
    height: 18px;
}

@media (hover: hover) {
    #main-content > .page-header .s-breadcrumb-item a:hover {
        color: var(--cs-orange) !important;
    }
}


/* ---------------------------------------------------------
   09.3 Products Container
   --------------------------------------------------------- */

#main-content .container--products-list {
    margin-top: 36px !important;
}


/* ---------------------------------------------------------
   09.4 Category Toolbar
   Title + Sorting
   --------------------------------------------------------- */

#main-content .container--products-list .main-content > div:first-child {
    min-height: 54px;

    margin-bottom: 26px !important;
    padding-bottom: 18px;

    border-bottom: 1px solid var(--cs-border);
}


/* Category title */
#main-content .container--products-list .main-content > div:first-child > h1 {
    position: relative;

    margin: 0 !important;
    padding-right: 16px !important;
    padding-left: 12px !important;

    color: var(--cs-text);

    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1.4;
}

#main-content .container--products-list .main-content > div:first-child > h1::before {
    content: "";

    position: absolute;
    right: 0;
    top: 5px;

    width: 4px;
    height: calc(100% - 10px);

    border-radius: 10px;

    background: var(--cs-orange);
}


/* ---------------------------------------------------------
   09.5 Sort Control
   --------------------------------------------------------- */

#main-content .container--products-list label[for="product-filter"] {
    margin-left: 10px !important;

    color: var(--cs-text-muted);

    font-size: 13px;
    font-weight: 500;
}


#main-content #product-filter {
    min-width: 190px;
    height: 42px;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    background-color: var(--cs-white);

    border: 1px solid var(--cs-border) !important;
    border-radius: 12px !important;

    color: var(--cs-text);

    font-size: 13px;

    cursor: pointer;

    transition:
        border-color var(--cs-transition),
        box-shadow var(--cs-transition),
        background-color var(--cs-transition);
}


#main-content #product-filter:hover {
    border-color: rgba(214, 95, 46, .35) !important;
}


#main-content #product-filter:focus {
    background-color: var(--cs-white);

    border-color: rgba(214, 95, 46, .65) !important;

    box-shadow: 0 0 0 3px rgba(214, 95, 46, .08);

    outline: none;
}


/* ---------------------------------------------------------
   09.6 Mobile Category Header
   --------------------------------------------------------- */

@media (max-width: 767px) {

    #main-content > .page-header {
        min-height: 58px !important;
    }

    #main-content > .page-header .breadcrumbs {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }

    #main-content .container--products-list {
        margin-top: 24px !important;
    }


    /* Toolbar */
    #main-content .container--products-list .main-content > div:first-child {
        min-height: auto;

        margin-bottom: 20px !important;
        padding-bottom: 16px;

        gap: 14px;
    }


    /* Category title */
    #main-content .container--products-list .main-content > div:first-child > h1 {
        padding-right: 12px !important;
        padding-left: 8px !important;

        font-size: 21px !important;
    }

    #main-content .container--products-list .main-content > div:first-child > h1::before {
        top: 4px;

        width: 3px;
        height: calc(100% - 8px);
    }


    /* Sort */
    #main-content #product-filter {
        min-width: 145px;
        max-width: 160px;
        height: 40px;

        font-size: 12px;
    }
}


/* ---------------------------------------------------------
   09.7 Very Small Phones
   --------------------------------------------------------- */

@media (max-width: 360px) {

    #main-content .container--products-list .main-content > div:first-child {
        align-items: center;
    }

    #main-content .container--products-list .main-content > div:first-child > h1 {
        font-size: 19px !important;
    }

    #main-content #product-filter {
        min-width: 135px;
        max-width: 145px;
    }
}
/* ---------------------------------------------------------
   09.8 Product Card — Premium Stable Hover
   Chăm Sóc
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   1. Base Card
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry {
    position: relative !important;
    overflow: hidden !important;

    background: var(--cs-white) !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 15px !important;

    transform: none !important;

    box-shadow:
        0 2px 10px rgba(73, 43, 25, .05) !important;

    transition:
        box-shadow .35s cubic-bezier(.2, .65, .3, 1),
        background-color .35s ease !important;
}


/* ---------------------------------------------------------
   2. Disable Salla Card Border Effect
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry
> .card-border {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

    width: 0 !important;
    height: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    pointer-events: none !important;
}


/* ---------------------------------------------------------
   3. Disable Salla Border Pseudo Elements
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry
> .card-border::before,

body.products_is_rounded
#main-content custom-salla-product-card.product-entry
> .card-border::after {
    content: none !important;

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    border: 0 !important;
    background: transparent !important;

    transform: none !important;
    transition: none !important;

    opacity: 0 !important;
}


/* ---------------------------------------------------------
   4. Disable Card Pseudo Effects
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry::before,

body.products_is_rounded
#main-content custom-salla-product-card.product-entry::after {
    content: none !important;

    display: none !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    transform: none !important;
    opacity: 0 !important;
}


/* ---------------------------------------------------------
   5. Preserve Card Shape
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry:hover,

body.products_is_rounded
#main-content custom-salla-product-card.product-entry.card-effect:hover {
    transform: none !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 15px !important;
}


/* ---------------------------------------------------------
   6. Product Image Area
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry
.product-entry__image {
    position: relative !important;

    overflow: hidden !important;

    background: var(--cs-cream-light);
}


/* ---------------------------------------------------------
   7. Soft Image Overlay
   Gives hover depth without moving the card
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry
.product-entry__image::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 60%,
            rgba(90, 44, 27, .035) 100%
        );

    opacity: 0;

    transition:
        opacity .35s ease !important;
}


/* ---------------------------------------------------------
   8. Product Image
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry
.product-entry__image img {
    display: block;

    transform: scale(1) !important;

    transition:
        transform .55s cubic-bezier(.2, .65, .3, 1),
        filter .35s ease !important;

    will-change: transform;
}


/* ---------------------------------------------------------
   9. Content
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry
.content-wrap {
    position: relative;

    background: var(--cs-white) !important;

    transition:
        background-color .35s ease !important;
}


/* ---------------------------------------------------------
   10. Product Title
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry
.s-product-card-content-title a {
    color: var(--cs-text);

    transition:
        color .28s ease !important;
}


/* ---------------------------------------------------------
   11. Wishlist
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry
.btn--wishlist .s-button-element {
    transition:
        transform .28s cubic-bezier(.2, .65, .3, 1),
        color .25s ease,
        border-color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease !important;
}


/* ---------------------------------------------------------
   12. Add To Cart
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry
salla-add-product-button .s-button-element {
    transition:
        transform .28s cubic-bezier(.2, .65, .3, 1),
        color .25s ease,
        background-color .25s ease,
        box-shadow .25s ease !important;
}


/* ---------------------------------------------------------
   13. Desktop Hover
   Card remains completely stationary
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    /* Card */
    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry:hover,

    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry.card-effect:hover {
        transform: none !important;

        border: 0 !important;
        outline: 0 !important;

        border-radius: 15px !important;

        box-shadow:
            0 4px 10px rgba(73, 43, 25, .035),
            0 14px 32px rgba(73, 43, 25, .10) !important;
    }


    /* Image zoom */
    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry:hover
    .product-entry__image img {
        transform: scale(1.025) !important;
    }


    /* Soft image depth */
    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry:hover
    .product-entry__image::after {
        opacity: 1;
    }


    /* Product title */
    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry:hover
    .s-product-card-content-title a {
        color: var(--cs-orange-dark) !important;
    }


    /* Wishlist interaction */
    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry
    .btn--wishlist:hover .s-button-element {
        transform: scale(1.08);

        color: var(--cs-orange) !important;

        border-color:
            rgba(214, 95, 46, .25) !important;

        background:
            var(--cs-white) !important;

        box-shadow:
            0 5px 14px rgba(73, 43, 25, .10) !important;
    }


    /* Cart interaction */
    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry
    salla-add-product-button:hover
    .s-button-element {
        transform: scale(1.08);

        color: var(--cs-orange) !important;
    }
}


/* ---------------------------------------------------------
   14. Completely Disable Salla Card Effect On Hover
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    body.products_is_rounded
    #main-content .card-effect:hover::before,

    body.products_is_rounded
    #main-content .card-effect:hover::after,

    body.products_is_rounded
    #main-content .card-effect:hover .card-border::before,

    body.products_is_rounded
    #main-content .card-effect:hover .card-border::after {
        content: none !important;

        display: none !important;

        width: 0 !important;
        height: 0 !important;

        border: 0 !important;

        background: transparent !important;

        transform: none !important;

        transition: none !important;

        opacity: 0 !important;
    }
}


/* ---------------------------------------------------------
   15. Keyboard Accessibility
   --------------------------------------------------------- */

body.products_is_rounded
#main-content custom-salla-product-card.product-entry:focus-within {
    transform: none !important;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 15px !important;

    box-shadow:
        0 0 0 3px rgba(214, 95, 46, .07),
        0 12px 28px rgba(73, 43, 25, .08) !important;
}


/* ---------------------------------------------------------
   16. Touch Devices
   --------------------------------------------------------- */

@media (hover: none) {

    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry,

    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry:hover {
        transform: none !important;

        border: 0 !important;
        outline: 0 !important;

        border-radius: 15px !important;
    }


    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry
    .product-entry__image img {
        transform: none !important;
    }


    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry
    .product-entry__image::after {
        opacity: 0;
    }
}


/* ---------------------------------------------------------
   17. Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry,

    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry
    .product-entry__image img,

    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry
    .product-entry__image::after,

    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry
    .s-product-card-content-title a,

    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry
    .btn--wishlist .s-button-element,

    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry
    salla-add-product-button .s-button-element {
        transition: none !important;
    }


    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry:hover {
        transform: none !important;
    }


    body.products_is_rounded
    #main-content custom-salla-product-card.product-entry:hover
    .product-entry__image img {
        transform: none !important;
    }
}

/* ---------------------------------------------------------
   09.9 Add To Cart Toast — Chăm Sóc
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   1. Toast Container
   --------------------------------------------------------- */

.s-add-product-toast {
    overflow: hidden !important;

    width: min(400px, calc(100vw - 32px)) !important;

    background: var(--cs-white) !important;

    border: 1px solid rgba(90, 44, 27, .07) !important;
    border-radius: 18px !important;

    box-shadow:
        0 18px 50px rgba(73, 43, 25, .14) !important;
}


/* ---------------------------------------------------------
   2. Progress
   --------------------------------------------------------- */

.s-add-product-toast__progress {
    height: 4px !important;

    background:
        rgba(98, 100, 56, .10) !important;
}


.s-add-product-toast__progress-bar {
    height: 100% !important;

    background:
        linear-gradient(
            90deg,
            var(--cs-green),
            var(--cs-orange)
        ) !important;

    border-radius: 0 !important;

    transition:
        width .25s linear !important;
}


/* ---------------------------------------------------------
   3. Header
   --------------------------------------------------------- */

.s-add-product-toast__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    min-height: 58px;

    padding: 14px 18px !important;
}


.s-add-product-toast__header-content {
    display: flex !important;
    align-items: center !important;

    gap: 9px !important;
}


/* Success icon */
.s-add-product-toast__icon {
    width: 20px !important;
    height: 20px !important;
}


/* Title */
.s-add-product-toast__title {
    color: var(--cs-text) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}


/* Close */
.s-add-product-toast__close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--cs-text-muted) !important;

    background:
        var(--cs-cream-light) !important;

    border: 0 !important;
    border-radius: 50% !important;

    transition:
        color .22s ease,
        background-color .22s ease,
        transform .22s ease !important;
}


/* ---------------------------------------------------------
   4. Divider
   --------------------------------------------------------- */

.s-add-product-toast__divider {
    height: 1px !important;

    margin: 0 18px !important;

    background:
        var(--cs-border) !important;
}


/* ---------------------------------------------------------
   5. Product Body
   --------------------------------------------------------- */

.s-add-product-toast__body {
    display: grid !important;

    grid-template-columns:
        70px minmax(0, 1fr) auto !important;

    align-items: center !important;

    gap: 13px !important;

    padding: 16px 18px !important;
}


/* ---------------------------------------------------------
   6. Product Image
   --------------------------------------------------------- */

.s-add-product-toast__image {
    display: block !important;

    width: 70px !important;
    height: 82px !important;

    overflow: hidden !important;

    background:
        var(--cs-cream) !important;

    border-radius: 12px !important;
}


.s-add-product-toast__image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    transition:
        transform .35s ease !important;
}


/* ---------------------------------------------------------
   7. Product Details
   --------------------------------------------------------- */

.s-add-product-toast__details {
    min-width: 0 !important;

    text-align: right !important;
}


.s-add-product-toast__name {
    display: -webkit-box !important;

    overflow: hidden !important;

    color: var(--cs-text) !important;

    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;

    text-decoration: none !important;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    transition:
        color .22s ease !important;
}


/* ---------------------------------------------------------
   8. Price
   --------------------------------------------------------- */

.s-add-product-toast__price {
    align-self: center !important;

    color: var(--cs-brown) !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
}


.s-add-product-toast__price > div {
    display: flex !important;
    align-items: center !important;

    gap: 4px !important;
}


/* ---------------------------------------------------------
   9. Actions
   --------------------------------------------------------- */

.s-add-product-toast__actions {
    display: grid !important;

    grid-template-columns:
        1fr 1fr !important;

    gap: 10px !important;

    padding:
        0 18px 18px !important;
}


/* Both buttons */
.s-add-product-toast__actions
.s-button-element {
    min-height: 44px !important;

    border-radius: 11px !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease !important;
}


/* ---------------------------------------------------------
   10. Checkout Button
   --------------------------------------------------------- */

.s-add-product-toast__actions
.s-button-primary {
    color: var(--cs-white) !important;

    background:
        var(--cs-orange) !important;

    border-color:
        var(--cs-orange) !important;

    box-shadow:
        0 6px 16px rgba(214, 95, 46, .18) !important;
}


/* ---------------------------------------------------------
   11. View Cart Button
   --------------------------------------------------------- */

.s-add-product-toast__actions
.s-button-gray-outline {
    color: var(--cs-text) !important;

    background:
        var(--cs-white) !important;

    border:
        1px solid var(--cs-border) !important;
}


/* Button icons */
.s-add-product-toast__actions svg {
    width: 18px !important;
    height: 18px !important;
}


/* ---------------------------------------------------------
   12. Desktop Interactions
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    /* Product */
    .s-add-product-toast__image:hover img {
        transform: scale(1.04);
    }


    .s-add-product-toast__name:hover {
        color:
            var(--cs-orange-dark) !important;
    }


    /* Close */
    .s-add-product-toast__close:hover {
        color:
            var(--cs-orange-dark) !important;

        background:
            var(--cs-cream) !important;

        transform: rotate(6deg);
    }


    /* Checkout */
    .s-add-product-toast__actions
    .s-button-primary:hover {
        background:
            var(--cs-orange-dark) !important;

        border-color:
            var(--cs-orange-dark) !important;

        box-shadow:
            0 8px 20px rgba(169, 71, 34, .22) !important;

        transform: translateY(-1px);
    }


    /* Cart */
    .s-add-product-toast__actions
    .s-button-gray-outline:hover {
        color:
            var(--cs-orange-dark) !important;

        background:
            var(--cs-cream-light) !important;

        border-color:
            rgba(214, 95, 46, .22) !important;

        transform: translateY(-1px);
    }
}


/* ---------------------------------------------------------
   13. Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .s-add-product-toast {
        width:
            calc(100vw - 24px) !important;

        max-width: 390px !important;

        border-radius: 16px !important;
    }


    .s-add-product-toast__header {
        min-height: 54px;

        padding:
            12px 14px !important;
    }


    .s-add-product-toast__title {
        font-size: 13px !important;
    }


    .s-add-product-toast__divider {
        margin:
            0 14px !important;
    }


    .s-add-product-toast__body {
        grid-template-columns:
            62px minmax(0, 1fr) auto !important;

        gap: 10px !important;

        padding:
            14px !important;
    }


    .s-add-product-toast__image {
        width: 62px !important;
        height: 72px !important;

        border-radius: 10px !important;
    }


    .s-add-product-toast__name {
        font-size: 12.5px !important;
    }


    .s-add-product-toast__price {
        font-size: 14px !important;
    }


    .s-add-product-toast__actions {
        gap: 8px !important;

        padding:
            0 14px 14px !important;
    }


    .s-add-product-toast__actions
    .s-button-element {
        min-height: 42px !important;

        padding-inline:
            10px !important;

        font-size: 12.5px !important;

        border-radius: 10px !important;
    }


    .s-add-product-toast__actions svg {
        width: 17px !important;
        height: 17px !important;
    }
}


/* ---------------------------------------------------------
   14. Very Small Mobile
   --------------------------------------------------------- */

@media (max-width: 360px) {

    .s-add-product-toast__body {
        grid-template-columns:
            56px minmax(0, 1fr) !important;
    }


    .s-add-product-toast__image {
        width: 56px !important;
        height: 66px !important;
    }


    .s-add-product-toast__price {
        grid-column: 2;

        justify-self: start;

        margin-top: 4px;
    }


    .s-add-product-toast__actions {
        grid-template-columns:
            1fr !important;
    }
}


/* ---------------------------------------------------------
   15. Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .s-add-product-toast *,
    .s-add-product-toast *::before,
    .s-add-product-toast *::after {
        transition: none !important;
        transform: none !important;
    }
}

/* =========================================================
   10. CART PAGE — CHĂM SÓC
   ========================================================= */


/* ---------------------------------------------------------
   10.1 Page
   --------------------------------------------------------- */

#main-content .page-container {
    padding-bottom: 60px;
}


/* ---------------------------------------------------------
   10.2 Cart Product Cards
   --------------------------------------------------------- */

#main-content .cart-item {
    position: relative;

    padding: 24px !important;
    margin-bottom: 16px !important;

    background: var(--cs-white) !important;

    border: 1px solid var(--cs-border) !important;
    border-radius: var(--cs-radius-md) !important;

    box-shadow:
        0 5px 20px rgba(73, 43, 25, .035);

    transition:
        border-color .25s ease,
        box-shadow .25s ease !important;
}


/* Desktop hover — no movement */
@media (hover: hover) and (pointer: fine) {

    #main-content .cart-item:hover {
        border-color:
            rgba(214, 95, 46, .18) !important;

        box-shadow:
            0 10px 28px rgba(73, 43, 25, .07);
    }
}


/* ---------------------------------------------------------
   10.3 Product Image
   --------------------------------------------------------- */

#main-content .cart-item
a.relative.overflow-hidden.shrink-0 {
    display: block;

    border-radius: 13px !important;

    background:
        var(--cs-cream-light);

    overflow: hidden !important;
}


#main-content .cart-item
a.relative.overflow-hidden.shrink-0 > img {
    width: 96px !important;
    height: 96px !important;

    border: 0 !important;
    border-radius: 13px !important;

    object-fit: cover !important;

    background:
        var(--cs-cream-light) !important;

    transition:
        transform .35s ease !important;
}


@media (hover: hover) and (pointer: fine) {

    #main-content .cart-item
    a.relative.overflow-hidden.shrink-0:hover > img {
        transform: scale(1.035);
    }
}


/* ---------------------------------------------------------
   10.4 Product Name
   --------------------------------------------------------- */

#main-content .cart-item h3 {
    margin: 2px 0 5px !important;

    line-height: 1.65 !important;
}


#main-content .cart-item h3 a {
    color:
        var(--cs-text) !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    text-decoration: none !important;

    transition:
        color .2s ease !important;
}


@media (hover: hover) and (pointer: fine) {

    #main-content .cart-item h3 a:hover {
        color:
            var(--cs-orange-dark) !important;
    }
}


/* ---------------------------------------------------------
   10.5 Unit Price
   --------------------------------------------------------- */

#main-content .cart-item .item-price {
    color:
        var(--cs-text-muted) !important;

    font-size: 13px !important;
    font-weight: 500 !important;
}


#main-content .cart-item .item-regular-price {
    color:
        #AAA29C !important;

    font-size: 12px !important;
}


/* ---------------------------------------------------------
   10.6 Quantity Area
   --------------------------------------------------------- */

#main-content .cart-item
.s-quantity-input-container {
    height: 40px !important;

    overflow: hidden !important;

    background:
        var(--cs-white) !important;

    border:
        1px solid var(--cs-border) !important;

    border-radius:
        11px !important;
}


/* Buttons */
#main-content .cart-item
.s-quantity-input-button {
    width: 38px !important;
    height: 38px !important;

    color:
        var(--cs-text) !important;

    background:
        transparent !important;

    border: 0 !important;

    transition:
        background-color .2s ease,
        color .2s ease !important;
}


/* Icons */
#main-content .cart-item
.s-quantity-input-button svg {
    width: 15px !important;
    height: 15px !important;

    fill:
        currentColor !important;
}


/* Input */
#main-content .cart-item
.s-quantity-input-input {
    width: 42px !important;
    height: 38px !important;

    color:
        var(--cs-text) !important;

    background:
        transparent !important;

    border: 0 !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    text-align: center !important;
}


@media (hover: hover) and (pointer: fine) {

    #main-content .cart-item
    .s-quantity-input-button:hover {
        color:
            var(--cs-orange-dark) !important;

        background:
            var(--cs-cream) !important;
    }
}


/* ---------------------------------------------------------
   10.7 Product Total
   --------------------------------------------------------- */

#main-content .cart-item
p.text-primary {
    color:
        var(--cs-text-muted) !important;

    font-size: 13px !important;
    font-weight: 500 !important;
}


#main-content .cart-item
.item-total {
    margin-inline-start: 5px;

    color:
        var(--cs-orange-dark) !important;

    font-size: 16px !important;
    font-weight: 800 !important;
}


/* ---------------------------------------------------------
   10.8 Delete Button
   --------------------------------------------------------- */

#main-content .cart-item
.btn--delete .s-button-element {
    width: 32px !important;
    height: 32px !important;

    min-width: 32px !important;

    color:
        #A65D52 !important;

    background:
        #FFF8F6 !important;

    border:
        1px solid #F6E5E1 !important;

    border-radius:
        50% !important;

    box-shadow:
        none !important;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease !important;
}


#main-content .cart-item
.btn--delete .s-button-element i {
    font-size: 11px !important;
}


@media (hover: hover) and (pointer: fine) {

    #main-content .cart-item
    .btn--delete .s-button-element:hover {
        color:
            #8F3F32 !important;

        background:
            #FFF1ED !important;

        border-color:
            #EFCFC7 !important;
    }
}


/* =========================================================
   10.9 Related Products
   ========================================================= */

#main-content .s-basket-gap-entry {
    display: block;

    margin-top: 38px !important;
}


/* Title */
#main-content .s-basket-gap-title {
    position: relative;

    margin-bottom: 18px !important;
    padding-inline-start: 14px;

    color:
        var(--cs-text) !important;

    font-size: 20px !important;
    font-weight: 800 !important;
}


#main-content .s-basket-gap-title::before {
    content: "";

    position: absolute;

    top: 50%;
    inset-inline-start: 0;

    width: 4px;
    height: 24px;

    background:
        var(--cs-orange);

    border-radius: 10px;

    transform:
        translateY(-50%);
}


/* Products list */
#main-content .s-basket-gap-list {
    gap: 12px !important;
}


/* Product Card */
#main-content .s-basket-gap-card {
    overflow: hidden !important;

    background:
        var(--cs-white) !important;

    border:
        1px solid var(--cs-border) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 4px 16px rgba(73, 43, 25, .035) !important;

    transition:
        border-color .25s ease,
        box-shadow .25s ease !important;
}


@media (hover: hover) and (pointer: fine) {

    #main-content .s-basket-gap-card:hover {
        border-color:
            rgba(214, 95, 46, .20) !important;

        box-shadow:
            0 9px 24px rgba(73, 43, 25, .07) !important;
    }
}


/* Product Image */
#main-content .s-basket-gap-card-image {
    overflow:
        hidden !important;

    background:
        var(--cs-cream-light) !important;
}


#main-content .s-basket-gap-card-image img {
    width: 100% !important;

    object-fit:
        cover !important;

    transition:
        transform .35s ease !important;
}


@media (hover: hover) and (pointer: fine) {

    #main-content
    .s-basket-gap-card:hover
    .s-basket-gap-card-image img {
        transform:
            scale(1.035);
    }
}


/* Product info */
#main-content .s-basket-gap-card-info {
    padding:
        12px 12px 8px !important;
}


/* Product Name */
#main-content .s-basket-gap-card-name {
    margin-bottom:
        7px !important;

    line-height:
        1.55 !important;
}


#main-content .s-basket-gap-card-name a {
    color:
        var(--cs-text) !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;

    text-decoration:
        none !important;
}


/* Sale price */
#main-content
.s-basket-gap-card-sale-price span,

#main-content
.s-basket-gap-card-price {
    color:
        var(--cs-orange-dark) !important;

    font-size:
        14px !important;

    font-weight:
        800 !important;
}


/* Old price */
#main-content
.s-basket-gap-card-sale-price del {
    color:
        #AAA29C !important;

    font-size:
        11px !important;
}


/* ---------------------------------------------------------
   10.10 Related Product Actions
   --------------------------------------------------------- */

#main-content
.s-basket-gap-card-actions {
    padding:
        8px 12px 12px !important;
}


/* Discount badge */
#main-content
.s-basket-gap-card-offer {
    color:
        var(--cs-green-dark) !important;

    background:
        rgba(98, 100, 56, .08) !important;

    border:
        1px solid rgba(98, 100, 56, .10) !important;

    border-radius:
        8px !important;

    font-size:
        11px !important;
    font-weight:
        600 !important;
}


/* Add Button */
#main-content
.s-basket-gap-card-btn
.s-button-element {
    min-height:
        38px !important;

    color:
        var(--cs-white) !important;

    background:
        var(--cs-orange) !important;

    border-color:
        var(--cs-orange) !important;

    border-radius:
        9px !important;

    box-shadow:
        none !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    transition:
        background-color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease !important;
}


@media (hover: hover) and (pointer: fine) {

    #main-content
    .s-basket-gap-card-btn
    .s-button-element:hover {
        background:
            var(--cs-orange-dark) !important;

        border-color:
            var(--cs-orange-dark) !important;

        box-shadow:
            0 6px 15px rgba(169, 71, 34, .16) !important;
    }
}


/* =========================================================
   10.11 Cart Summary
   ========================================================= */

#main-content .s-cart-summary-card {
    overflow:
        hidden !important;

    background:
        var(--cs-white) !important;

    border:
        1px solid var(--cs-border) !important;

    border-radius:
        var(--cs-radius-md) !important;

    box-shadow:
        0 10px 32px rgba(73, 43, 25, .065) !important;
}


/* Summary inner */
#main-content
.s-cart-summary-card-sheet {
    background:
        var(--cs-white) !important;
}


/* Header */
#main-content
.s-cart-summary-card-sheet-header {
    padding-bottom:
        15px !important;

    border-bottom:
        1px solid var(--cs-border) !important;
}


/* Title */
#main-content
.s-cart-summary-card-sheet-title {
    color:
        var(--cs-text) !important;

    font-size:
        17px !important;

    font-weight:
        800 !important;
}


/* Summary line */
#main-content
.s-cart-summary-card-line {
    color:
        var(--cs-text-muted) !important;

    font-size:
        13px !important;
}


#main-content
.s-cart-summary-card-line b {
    color:
        var(--cs-text) !important;

    font-weight:
        700 !important;
}


/* ---------------------------------------------------------
   10.12 Cart Total
   --------------------------------------------------------- */

#main-content
.s-cart-summary-card-bar {
    background:
        var(--cs-cream-light) !important;

    border-top:
        1px solid var(--cs-border) !important;
}


#main-content
.s-cart-summary-card-bar-label-text {
    color:
        var(--cs-text) !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;
}


#main-content
.s-cart-summary-card-bar-count {
    color:
        var(--cs-text-muted) !important;

    font-size:
        11px !important;
}


#main-content
.s-cart-summary-card-bar-total {
    color:
        var(--cs-orange-dark) !important;

    font-size:
        20px !important;

    font-weight:
        800 !important;
}


/* ---------------------------------------------------------
   10.13 Checkout Button
   --------------------------------------------------------- */

#main-content
.s-cart-summary-card-action {
    padding:
        14px !important;

    background:
        var(--cs-white) !important;
}


#main-content
#s-cart-summary-card-submit
.s-button-element {
    min-height:
        48px !important;

    color:
        var(--cs-white) !important;

    background:
        var(--cs-orange) !important;

    border-color:
        var(--cs-orange) !important;

    border-radius:
        11px !important;

    box-shadow:
        0 7px 18px rgba(214, 95, 46, .18) !important;

    font-size:
        14px !important;

    font-weight:
        800 !important;

    transition:
        background-color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease !important;
}


@media (hover: hover) and (pointer: fine) {

    #main-content
    #s-cart-summary-card-submit
    .s-button-element:hover {
        background:
            var(--cs-orange-dark) !important;

        border-color:
            var(--cs-orange-dark) !important;

        box-shadow:
            0 9px 22px rgba(169, 71, 34, .22) !important;
    }
}


/* =========================================================
   10.14 Mobile
   ========================================================= */

@media (max-width: 767px) {

    #main-content .page-container {
        padding-inline:
            14px !important;

        padding-bottom:
            35px !important;
    }


    /* Cart Card */
    #main-content .cart-item {
        padding:
            16px !important;

        margin-bottom:
            12px !important;

        border-radius:
            14px !important;
    }


    /* Product Image */
    #main-content .cart-item
    a.relative.overflow-hidden.shrink-0 > img {
        width:
            78px !important;

        height:
            88px !important;

        border-radius:
            11px !important;
    }


    /* Product name */
    #main-content .cart-item h3 a {
        font-size:
            14px !important;
    }


    /* Quantity row */
    #main-content .cart-item
    .border-t.border-b {
        margin-top:
            16px !important;

        padding-top:
            12px !important;

        padding-bottom:
            12px !important;

        border-color:
            var(--cs-border) !important;
    }


    /* Quantity */
    #main-content .cart-item
    .s-quantity-input-container {
        height:
            38px !important;
    }


    #main-content .cart-item
    .s-quantity-input-button {
        width:
            36px !important;

        height:
            36px !important;
    }


    #main-content .cart-item
    .s-quantity-input-input {
        height:
            36px !important;
    }


    /* Total */
    #main-content .cart-item
    .item-total {
        font-size:
            15px !important;
    }


    /* Related */
    #main-content .s-basket-gap-entry {
        margin-top:
            30px !important;
    }


    #main-content .s-basket-gap-title {
        font-size:
            18px !important;
    }


    /* Summary */
    #main-content .s-cart-summary-card {
        border-radius:
            14px !important;
    }


    #main-content
    #s-cart-summary-card-submit
    .s-button-element {
        min-height:
            46px !important;

        border-radius:
            10px !important;
    }
}


/* =========================================================
   10.15 Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #main-content .cart-item,
    #main-content .cart-item *,
    #main-content .s-basket-gap-card,
    #main-content .s-basket-gap-card *,
    #main-content .s-cart-summary-card,
    #main-content .s-cart-summary-card * {
        transition:
            none !important;

        transform:
            none !important;
    }
}

/* =========================================================
   11. CHECKOUT — CHĂM SÓC
   ========================================================= */


/* ---------------------------------------------------------
   11.1 Checkout — Visual Foundation
   --------------------------------------------------------- */

:root {
    --checkout-orange: #D65F2E;
    --checkout-orange-dark: #A94722;
    --checkout-cream: #FFF7EF;
    --checkout-soft: #FFFCF8;
    --checkout-text: #2F2A26;
    --checkout-muted: #746C66;
    --checkout-border: #F0E3D8;
    --checkout-radius: 16px;
}


/* Main checkout width */

#app.container--margined {
    max-width: 980px;
}


/* ---------------------------------------------------------
   Order Summary
   --------------------------------------------------------- */

.cart-summary-main {
    background: #fff;
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-radius);
    overflow: hidden;
    box-shadow:
        0 2px 5px rgba(73, 43, 25, 0.02),
        0 10px 30px rgba(73, 43, 25, 0.045);
}


/* Store logo */

.store-logo-summary {
    border-radius: 50%;
    border: 1px solid var(--checkout-border);
}


/* Total */

.cart-summary--total {
    color: var(--checkout-text);
}

.cart-summary--total b {
    font-weight: 700;
}


/* Coupon trigger */

.btn--coupon {
    color: var(--checkout-orange) !important;
    font-weight: 500;
    transition:
        color .2s ease,
        opacity .2s ease;
}

.btn--coupon:hover {
    color: var(--checkout-orange-dark) !important;
}


/* Details button */

.cart-summary--toggle .btn {
    background: #fff !important;
    border: 1px solid var(--checkout-border) !important;
    color: var(--checkout-text) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(73, 43, 25, .05);
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        color .2s ease;
}

.cart-summary--toggle .btn:hover {
    border-color: rgba(214, 95, 46, .35) !important;
    color: var(--checkout-orange) !important;
    box-shadow: 0 6px 18px rgba(73, 43, 25, .08);
}


/* ---------------------------------------------------------
   Main Checkout Card
   --------------------------------------------------------- */

.sections-wrapper {
    background: #fff;
    border: 1px solid var(--checkout-border);
    border-radius: var(--checkout-radius);
    overflow: hidden;
    box-shadow:
        0 2px 5px rgba(73, 43, 25, .02),
        0 12px 34px rgba(73, 43, 25, .045);
}


/* ---------------------------------------------------------
   Checkout Steps
   --------------------------------------------------------- */

.checkout-step {
    position: relative;
}


/* Step separator */

.checkout-step + .checkout-step {
    border-top: 1px solid var(--checkout-border);
}


/* Step headings */

.title--step h3 {
    color: var(--checkout-text);
    font-weight: 700;
}

.title--step small {
    color: var(--checkout-muted);
    line-height: 1.7;
}


/* Icons */

.title--step > .d-flex > span {
    color: var(--checkout-muted);
    transition:
        color .2s ease,
        background-color .2s ease;
}

.title--step > .d-flex > span.active {
    color: var(--checkout-orange);
}


/* Current/active step */

.title--step:has(.active) h3 {
    color: var(--checkout-text);
}


/* ---------------------------------------------------------
   Form Controls
   --------------------------------------------------------- */

.form-control {
    min-height: 46px;
    border: 1px solid #E7DDD5 !important;
    border-radius: 10px !important;
    background-color: #fff;
    color: var(--checkout-text);
    box-shadow: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.form-control:hover {
    border-color: #D8C9BD !important;
}

.form-control:focus {
    border-color: var(--checkout-orange) !important;
    box-shadow:
        0 0 0 3px rgba(214, 95, 46, .10) !important;
    background: #fff;
}


/* Placeholder */

.form-control::placeholder {
    color: #AAA19A;
}


/* Labels */

.form-group label {
    color: var(--checkout-text);
    font-weight: 500;
}


/* ---------------------------------------------------------
   Primary Actions
   --------------------------------------------------------- */

.btn--primary {
    background: var(--checkout-orange) !important;
    border-color: var(--checkout-orange) !important;
    color: #fff !important;
    border-radius: 10px !important;

    box-shadow:
        0 5px 14px rgba(214, 95, 46, .16);

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.btn--primary:hover {
    background: var(--checkout-orange-dark) !important;
    border-color: var(--checkout-orange-dark) !important;

    box-shadow:
        0 7px 18px rgba(169, 71, 34, .20);
}


/* No movement on checkout buttons */

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


/* ---------------------------------------------------------
   Secondary / Edit Buttons
   --------------------------------------------------------- */

.btn-edit {
    border-color: var(--checkout-border) !important;
    color: var(--checkout-text) !important;
    border-radius: 9px !important;
}

.btn-edit:hover {
    border-color: rgba(214, 95, 46, .35) !important;
    color: var(--checkout-orange) !important;
}


/* ---------------------------------------------------------
   Map Area
   --------------------------------------------------------- */

.map-container {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--checkout-border);
}


/* ---------------------------------------------------------
   Checkbox
   --------------------------------------------------------- */

.ui.checkbox label {
    color: var(--checkout-text);
}

.ui.checkbox input:checked ~ label:before {
    border-color: var(--checkout-orange) !important;
}


/* ---------------------------------------------------------
   Coupon Form
   --------------------------------------------------------- */

.coupon-full-width .coupon-section {
    border-radius: var(--checkout-radius);
}

.form--coupon fieldset {
    border-radius: 10px;
}


/* ---------------------------------------------------------
   Footer Message
   --------------------------------------------------------- */

.footer-text-wrapper {
    color: var(--checkout-muted);
    font-size: 13px;
    line-height: 1.8;
}

.footer-text-wrapper .list--brands {
    background: var(--checkout-cream);
    border: 1px solid var(--checkout-border);
    border-radius: 12px;
    padding: 14px 20px;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

    #app.container--margined {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .cart-summary-main,
    .sections-wrapper {
        border-radius: 14px;
    }

    .title--step h3 {
        font-size: 15px;
    }

    .title--step small {
        font-size: 12px;
    }

    .form-control {
        min-height: 44px;
        font-size: 14px;
    }

    .map-container {
        border-radius: 10px;
    }

    .footer-text-wrapper .list--brands {
        border-radius: 10px;
        padding: 12px 16px;
    }
}


/* ---------------------------------------------------------
   Accessibility — Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .btn,
    .form-control,
    .title--step > .d-flex > span {
        transition: none !important;
    }
}

/* =========================================================
   11.2 CHECKOUT — ORDER DETAILS DRAWER
   Chăm Sóc
   ========================================================= */


/* ---------------------------------------------------------
   Drawer Container
   --------------------------------------------------------- */

.cart-drawer-cont {
    display: flex !important;
    flex-direction: column !important;

    width: min(420px, 100vw) !important;
    height: 100% !important;

    background: #fff !important;

    border-inline-end:
        1px solid var(--checkout-border) !important;

    box-shadow:
        18px 0 55px rgba(47, 42, 38, .13) !important;
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.cart-drawer__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    min-height: 70px !important;

    padding:
        0 20px !important;

    background:
        #fff !important;

    border-bottom:
        1px solid var(--checkout-border) !important;
}


/* Title */

.cart-drawer__title {
    margin: 0 !important;

    color:
        var(--checkout-text) !important;

    font-size:
        17px !important;

    font-weight:
        800 !important;

    line-height:
        1.5 !important;
}


/* Close Button */

.cart-drawer__close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 36px !important;
    height: 36px !important;

    padding: 0 !important;

    color:
        var(--checkout-muted) !important;

    background:
        var(--checkout-soft) !important;

    border:
        1px solid transparent !important;

    border-radius:
        50% !important;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease !important;
}


@media (hover: hover) and (pointer: fine) {

    .cart-drawer__close:hover {
        color:
            var(--checkout-orange-dark) !important;

        background:
            var(--checkout-cream) !important;

        border-color:
            rgba(214, 95, 46, .12) !important;
    }
}


/* ---------------------------------------------------------
   Content Area
   --------------------------------------------------------- */

.cart-drawer__content {
    flex: 1 1 auto !important;

    min-height: 0 !important;

    background:
        #fff !important;
}


.cart-drawer__items {
    height: 100% !important;
}


.cart-drawer__scroll-content {
    padding:
        6px 20px 22px !important;

    overflow-y:
        auto !important;
}


/* ---------------------------------------------------------
   Product Item
   --------------------------------------------------------- */

.cart-drawer__content .cart-item {
    display: grid !important;

    grid-template-columns:
        66px minmax(0, 1fr) auto !important;

    align-items:
        center !important;

    column-gap:
        13px !important;

    position:
        relative !important;

    min-height:
        96px !important;

    padding:
        15px 0 !important;

    margin:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-bottom:
        1px solid var(--checkout-border) !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;
}


.cart-drawer__content .cart-item:last-child {
    border-bottom:
        0 !important;
}


/* ---------------------------------------------------------
   Product Image
   --------------------------------------------------------- */

.cart-drawer__content .cart-item__image {
    position:
        relative !important;

    width:
        66px !important;

    height:
        76px !important;

    overflow:
        visible !important;

    background:
        var(--checkout-cream) !important;

    border-radius:
        11px !important;
}


.cart-drawer__content .cart-item__image img {
    display:
        block !important;

    width:
        66px !important;

    height:
        76px !important;

    object-fit:
        cover !important;

    border-radius:
        11px !important;
}


/* ---------------------------------------------------------
   Quantity Badge
   --------------------------------------------------------- */

.cart-drawer__content .cart-item__quantity-badge {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    position:
        absolute !important;

    top:
        -7px !important;

    inset-inline-start:
        -7px !important;

    min-width:
        24px !important;

    height:
        24px !important;

    padding:
        0 6px !important;

    color:
        #fff !important;

    background:
        var(--checkout-orange) !important;

    border:
        2px solid #fff !important;

    border-radius:
        999px !important;

    box-shadow:
        0 3px 9px rgba(169, 71, 34, .18) !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    z-index:
        2 !important;
}


/* ---------------------------------------------------------
   Product Details
   --------------------------------------------------------- */

.cart-drawer__content .cart-item__details {
    min-width:
        0 !important;
}


.cart-drawer__content .cart-item__info {
    min-width:
        0 !important;
}


.cart-drawer__content .cart-item__name {
    display:
        -webkit-box !important;

    overflow:
        hidden !important;

    margin:
        0 0 5px !important;

    color:
        var(--checkout-text) !important;

    font-size:
        13.5px !important;

    font-weight:
        700 !important;

    line-height:
        1.65 !important;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}


/* Product options/specifications */

.cart-drawer__content .cart-item__meta {
    color:
        var(--checkout-muted) !important;

    font-size:
        11.5px !important;

    line-height:
        1.6 !important;
}


.cart-drawer__content .cart-item__specs:empty {
    display:
        none !important;
}


/* ---------------------------------------------------------
   Product Price
   --------------------------------------------------------- */

.cart-drawer__content .cart-item__bottom {
    align-self:
        center !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.cart-drawer__content .cart-item__price {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        4px !important;

    color:
        var(--checkout-text) !important;

    font-size:
        14px !important;

    font-weight:
        800 !important;

    white-space:
        nowrap !important;
}


.cart-drawer__content .cart-item__currency {
    color:
        inherit !important;

    font-size:
        12px !important;
}


/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.cart-drawer__footer {
    flex:
        0 0 auto !important;

    padding:
        0 !important;

    background:
        #fff !important;

    border-top:
        1px solid var(--checkout-border) !important;

    box-shadow:
        0 -10px 30px rgba(73, 43, 25, .035) !important;
}


/* ---------------------------------------------------------
   Summary Wrapper
   --------------------------------------------------------- */

.cart-drawer__footer .cart-summary-wrapper {
    padding:
        15px 20px 18px !important;

    background:
        #fff !important;
}


.cart-drawer__footer .cart-summary--drawer {
    width:
        100% !important;
}


/* Remove default list spacing */

.cart-drawer__footer .cart-summary {
    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


/* ---------------------------------------------------------
   Summary Row
   --------------------------------------------------------- */

.cart-drawer__footer .cart-summary > li {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        16px !important;

    padding:
        8px 0 !important;
}


.cart-drawer__footer .cart-summary h4 {
    margin:
        0 !important;

    color:
        var(--checkout-muted) !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;
}


/* Summary price */

.cart-drawer__footer .cart-summary .currency {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        4px !important;

    color:
        var(--checkout-text) !important;

    white-space:
        nowrap !important;
}


.cart-drawer__footer .cart-summary .currency b {
    font-size:
        14px !important;

    font-weight:
        700 !important;
}


/* ---------------------------------------------------------
   Grand Total
   --------------------------------------------------------- */

.cart-drawer__footer
.cart-summary--total {
    position:
        relative !important;

    margin-top:
        8px !important;

    padding-top:
        9px !important;

    border-top:
        1px solid var(--checkout-border) !important;
}


.cart-drawer__footer
.cart-summary--total > li {
    padding:
        10px 0 2px !important;
}


.cart-drawer__footer
.total-title-wrapper b {
    color:
        var(--checkout-text) !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;
}


.cart-drawer__footer
.cart-summary--total .currency {
    color:
        var(--checkout-orange-dark) !important;
}


.cart-drawer__footer
.cart-summary--total .currency b {
    font-size:
        18px !important;

    font-weight:
        800 !important;
}


/* ---------------------------------------------------------
   Scrollbar — Desktop
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .cart-drawer__scroll-content {
        scrollbar-width:
            thin;

        scrollbar-color:
            #D8CEC6 transparent;
    }


    .cart-drawer__scroll-content::-webkit-scrollbar {
        width:
            5px;
    }


    .cart-drawer__scroll-content::-webkit-scrollbar-track {
        background:
            transparent;
    }


    .cart-drawer__scroll-content::-webkit-scrollbar-thumb {
        background:
            #D8CEC6;

        border-radius:
            999px;
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

    .cart-drawer-cont {
        width:
            min(92vw, 390px) !important;
    }


    .cart-drawer__header {
        min-height:
            62px !important;

        padding:
            0 16px !important;
    }


    .cart-drawer__title {
        font-size:
            16px !important;
    }


    .cart-drawer__close {
        width:
            34px !important;

        height:
            34px !important;
    }


    .cart-drawer__scroll-content {
        padding:
            4px 16px 18px !important;
    }


    .cart-drawer__content .cart-item {
        grid-template-columns:
            58px minmax(0, 1fr) auto !important;

        column-gap:
            11px !important;

        min-height:
            88px !important;

        padding:
            13px 0 !important;
    }


    .cart-drawer__content .cart-item__image,
    .cart-drawer__content .cart-item__image img {
        width:
            58px !important;

        height:
            68px !important;

        border-radius:
            10px !important;
    }


    .cart-drawer__content .cart-item__quantity-badge {
        min-width:
            22px !important;

        height:
            22px !important;

        top:
            -6px !important;

        inset-inline-start:
            -6px !important;

        font-size:
            10px !important;
    }


    .cart-drawer__content .cart-item__name {
        font-size:
            12.5px !important;
    }


    .cart-drawer__content .cart-item__price {
        font-size:
            13px !important;
    }


    .cart-drawer__footer .cart-summary-wrapper {
        padding:
            13px 16px 16px !important;
    }


    .cart-drawer__footer
    .total-title-wrapper b {
        font-size:
            14px !important;
    }


    .cart-drawer__footer
    .cart-summary--total
    .currency b {
        font-size:
            17px !important;
    }
}


/* ---------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .cart-drawer-cont *,
    .cart-drawer-cont *::before,
    .cart-drawer-cont *::after {
        transition:
            none !important;
    }
}

/* =========================================================
   12. PRODUCT PAGE
   Chăm Sóc — Consolidated Final Edition
   ========================================================= */

/* ---------------------------------------------------------
   12.1 Page & Gallery Layout
   --------------------------------------------------------- */

#main-content .page-container.product-has-options {
    margin-top: 0 !important;
    padding-top: 32px;
    padding-bottom: 72px;
}

#main-content .container--product-details {
    width: 100%;
    max-width: var(--cs-container);
    margin-inline: auto;
    padding-inline: 20px;
}

#main-content .container--product-details > .s-block {
    border-radius: 0;
}

#main-content .container--product-details .sidebar {
    position: relative;
}

#main-content .container--product-details .details-slider-wrapper {
    position: relative;
    overflow: hidden;
    background: var(--cs-cream-light);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
}

#main-content .container--product-details .details-slider {
    overflow: hidden;
    border-radius: inherit;
    background: var(--cs-cream-light);
}

/* =========================================================
   PRODUCT GALLERY — FINAL HEIGHT FIX
   ========================================================= */

/* Outer wrapper */
#main-content .container--product-details .details-slider-wrapper {
    position: relative;
    overflow: hidden;
    background: var(--cs-cream-light);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);
    box-shadow: var(--cs-shadow-sm);
}

/* Salla slider custom element itself */
#main-content .container--product-details
salla-slider.details-slider {
    display: block !important;
    width: 100% !important;
    height: clamp(500px, 48vw, 640px) !important;
    min-height: 0 !important;
    max-height: 640px !important;

    overflow: hidden !important;
    border-radius: inherit;
    background: var(--cs-cream-light);
}

/* Main swiper container */
#main-content .container--product-details
.details-slider > .swiper.s-slider-container,

#main-content .container--product-details
.details-slider .s-slider-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

/* Swiper wrapper */
#main-content .container--product-details
.details-slider .swiper-wrapper {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
}

/* Every slide */
#main-content .container--product-details
.details-slider .swiper-slide {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

/* Link / picture */
#main-content .container--product-details
.details-slider .swiper-slide > a,
#main-content .container--product-details
.details-slider .swiper-slide > picture,
#main-content .container--product-details
.details-slider .swiper-slide > a > picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* Main image */
#main-content .container--product-details
.details-slider .swiper-slide > img,
#main-content .container--product-details
.details-slider .swiper-slide > a > img,
#main-content .container--product-details
.details-slider .swiper-slide > picture > img,
#main-content .container--product-details
.details-slider .swiper-slide > a > picture > img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;
    max-height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;
}

/* Prevent loading layer from affecting layout */
#main-content .container--product-details
.details-slider .loading-effect {
    max-height: 100% !important;
}


/* Desktop thumbnails */
@media (min-width: 768px) {

    #main-content .container--product-details
    .details-slider .s-slider-thumbs,
    #main-content .container--product-details
    .details-slider .s-slider-thumbs-container {
        height: 100% !important;
        max-height: 640px !important;
    }

    #main-content .container--product-details
    .details-slider .s-slider-thumbs .swiper-slide {
        height: 110px !important;
        min-height: 110px !important;
        overflow: hidden;
        border: 1px solid var(--cs-border);
        border-radius: 14px;
        background: var(--cs-cream-light);
    }

    #main-content .container--product-details
    .details-slider .s-slider-thumbs .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
}


/* Gallery controls */
#main-content .container--product-details .details-slider .s-slider-prev,
#main-content .container--product-details .details-slider .s-slider-next {
    width: 42px;
    height: 42px;
    border: 1px solid var(--cs-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--cs-brown);
    box-shadow: 0 5px 18px rgba(73, 43, 25, .08);
    transition:
        background-color var(--cs-transition),
        color var(--cs-transition),
        border-color var(--cs-transition),
        transform var(--cs-transition);
}

@media (hover: hover) {
    #main-content .container--product-details .details-slider .s-slider-prev:hover,
    #main-content .container--product-details .details-slider .s-slider-next:hover {
        background: var(--cs-orange);
        border-color: var(--cs-orange);
        color: var(--cs-white);
        transform: scale(1.04);
    }
}

/* ---------------------------------------------------------
   12.2 Product Form & Two-column Area
   --------------------------------------------------------- */

.single-product-form-page {
    width: 100%;
    max-width: var(--cs-container);
    margin-inline: auto;
    padding-inline: 20px;
}

.single-product-form-page .main-content {
    margin-top: 30px;
    margin-bottom: 48px;
}

.single-product-form-page .main-content > .w-full.grid {
    gap: 26px !important;
    align-items: start;
}

/* ---------------------------------------------------------
   12.3 Product Information Card & Hierarchy
   --------------------------------------------------------- */

#single-product-form .main-content-data,
.single-product-form-page .main-content-data {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    min-width: 0;
    padding: 28px;
    background: var(--cs-white);
    border: 1px solid var(--cs-border);
    border-radius: 22px;
    box-shadow: var(--cs-shadow-sm);
}

/* Default all secondary blocks below the main description */
.single-product-form-page .main-content-data > * {
    order: 15;
}

/* 1. Title + short subtitle */
.single-product-form-page .main-content-data > .flex.flex-col {
    order: 1 !important;
}

/* 2. Main product description */
.single-product-form-page .main-content-data > .product__description {
    order: 2 !important;
}

/* 3. Product accordions / reviews / customization */
.single-product-form-page .main-content-data > .tab-accordion,
.single-product-form-page .main-content-data > [class*="accordion"] {
    order: 10 !important;
}

/* 4. Similar keywords */
.single-product-form-page .main-content-data > .tags,
.single-product-form-page .main-content-data > .product-tags {
    order: 20 !important;
}

/* 5. Model/SKU */
.single-product-form-page .main-content-data > .product-sku-wrapper {
    order: 25 !important;
}

/* 6. Share + wishlist */
.single-product-form-page .main-content-data > .share-wishlist-data {
    order: 30 !important;
}

/* Product title */
#single-product-form .product-title {
    margin: 0 0 8px !important;
    color: var(--cs-text);
    font-size: clamp(27px, 2.2vw, 36px) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

/* Short subtitle beneath product title */
#single-product-form .product-title + p,
#single-product-form .main-content-data > .flex.flex-col > p {
    margin: 0 0 18px !important;
    color: var(--cs-text-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.8 !important;
}

/* Share + wishlist: intentionally secondary */
#single-product-form .share-wishlist-data {
    display: flex !important;
    align-items: center;
    gap: 9px;
    margin: 18px 0 0 !important;
    padding-top: 16px;
    border-top: 1px solid var(--cs-border);
}

#single-product-form .share-wishlist-data .s-button-element,
#single-product-form .share-wishlist-data .s-social-share-btn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: 12px !important;
    background: var(--cs-cream-light) !important;
    color: var(--cs-brown) !important;
    box-shadow: none !important;
    transition:
        background-color var(--cs-transition),
        border-color var(--cs-transition),
        color var(--cs-transition),
        box-shadow var(--cs-transition),
        transform var(--cs-transition) !important;
}

/* Wishlist active state — clearly selected */
#single-product-form .share-wishlist-data button.btn--wishlist.is-active,
#single-product-form .share-wishlist-data .btn--wishlist.is-active .s-button-element,
#single-product-form .share-wishlist-data .s-button-element.btn--wishlist.is-active {
    background: var(--cs-cream) !important;
    border-color: rgba(214, 95, 46, .55) !important;
    color: var(--cs-orange) !important;
    box-shadow:
        0 0 0 3px rgba(214, 95, 46, .08),
        0 5px 14px rgba(73, 43, 25, .07) !important;
}

#single-product-form .share-wishlist-data button.btn--wishlist.is-active i,
#single-product-form .share-wishlist-data .btn--wishlist.is-active .s-button-element i,
#single-product-form .share-wishlist-data .s-button-element.btn--wishlist.is-active i {
    color: var(--cs-orange) !important;
}

@media (hover: hover) {
    #single-product-form .share-wishlist-data .s-button-element:hover,
    #single-product-form .share-wishlist-data .s-social-share-btn:hover {
        border-color: rgba(214, 95, 46, .30) !important;
        background: var(--cs-cream) !important;
        color: var(--cs-orange) !important;
        transform: translateY(-1px);
    }

    #single-product-form .share-wishlist-data button.btn--wishlist.is-active:hover,
    #single-product-form .share-wishlist-data .btn--wishlist.is-active .s-button-element:hover,
    #single-product-form .share-wishlist-data .s-button-element.btn--wishlist.is-active:hover {
        background: #FFF1E8 !important;
        border-color: var(--cs-orange) !important;
        color: var(--cs-orange-dark) !important;
        box-shadow:
            0 0 0 3px rgba(214, 95, 46, .10),
            0 7px 18px rgba(73, 43, 25, .09) !important;
    }
}

/* SKU */
#single-product-form .product-sku-wrapper {
    margin: 18px 0 0 !important;
    padding: 12px 15px !important;
    background: var(--cs-cream-light) !important;
    border: 1px solid var(--cs-border) !important;
    border-radius: 12px !important;
    color: var(--cs-text-muted) !important;
    font-size: 13px !important;
}

#single-product-form .product-sku-wrapper.hidden,
#single-product-form .product-sku-wrapper:empty {
    display: none !important;
}

/* ---------------------------------------------------------
   12.4 Product Description
   --------------------------------------------------------- */

#single-product-form .product__description {
    margin: 0 !important;
    padding: 10px 0 4px !important;
    border: 0 !important;
    color: var(--cs-text);
}

#single-product-form .product__description .article--main {
    direction: rtl;
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
    color: var(--cs-text);
    font-size: 16px;
    line-height: 1.9;
}

#single-product-form .product__description .article--main p {
    margin: 0 0 16px !important;
    color: #4F4843 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 2 !important;
}

#single-product-form .product__description .article--main h2 {
    position: relative;
    margin: 36px 0 17px !important;
    padding: 14px 20px 14px 18px !important;
    color: var(--cs-brown) !important;
    background: var(--cs-cream) !important;
    border: 1px solid var(--cs-border) !important;
    border-right: 4px solid var(--cs-orange) !important;
    border-radius: 12px !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
}

#single-product-form .product__description .article--main h2:first-child {
    margin-top: 6px !important;
}

#single-product-form .product__description .article--main h3 {
    position: relative;
    margin: 24px 0 9px !important;
    padding-right: 17px !important;
    color: var(--cs-green-dark) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.6 !important;
}

#single-product-form .product__description .article--main h3::before {
    content: "";
    position: absolute;
    right: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    background: var(--cs-orange);
    border-radius: 50%;
}

#single-product-form .product__description .article--main ul {
    display: grid;
    gap: 9px;
    margin: 14px 0 24px !important;
    padding: 0 !important;
    list-style: none !important;
}

#single-product-form .product__description .article--main ul li {
    position: relative;
    margin: 0 !important;
    padding: 12px 42px 12px 15px !important;
    color: #3F3935 !important;
    background: var(--cs-cream-light);
    border: 1px solid var(--cs-border);
    border-radius: 11px;
    line-height: 1.75;
}

#single-product-form .product__description .article--main ul li::before {
    content: "✓";
    position: absolute;
    right: 15px;
    top: 11px;
    color: var(--cs-green);
    font-weight: 900;
}

#single-product-form .product__description .article--main ul + h2 {
    margin-top: 40px !important;
}

/* ---------------------------------------------------------
   12.5 Secondary Product Blocks
   --------------------------------------------------------- */

/* Similar keywords */
#single-product-form .main-content-data > .tags,
#single-product-form .main-content-data > .product-tags {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 22px 0 0 !important;
    padding-top: 18px;
    border-top: 1px solid var(--cs-border);
}

#single-product-form .main-content-data > .tags a,
#single-product-form .main-content-data > .product-tags a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 11px;
    background: var(--cs-cream-light);
    border: 1px solid var(--cs-border);
    border-radius: 999px;
    color: var(--cs-text-muted) !important;
    font-size: 12.5px;
    line-height: 1.4;
    text-decoration: none !important;
}

/* Reviews / customization accordions */
#single-product-form .main-content-data > .tab-accordion,
#single-product-form .main-content-data > [class*="accordion"] {
    margin-top: 20px !important;
    padding-top: 16px;
    border-top: 1px solid var(--cs-border);
}

/* ---------------------------------------------------------
   12.6 Purchase Card
   Clean CTA system — Add to cart / Buy now / Apple Pay
   --------------------------------------------------------- */

#single-product-form .product-fixed-bar,
.single-product-form-page .product-fixed-bar {
    width: 100%;
    padding: 22px;
    overflow: hidden;
    background: var(--cs-white);
    border: 1px solid var(--cs-border);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(73, 43, 25, .055);
}

#single-product-form .product-fixed-bar .product-form > h4 {
    margin-bottom: 12px;
    color: var(--cs-brown);
    font-size: 16px;
    font-weight: 800;
}

#single-product-form .product-fixed-bar .product-form > .flex.justify-between,
#single-product-form .product-fixed-bar .product-form > .flex.justify-center {
    gap: 14px;
}

#single-product-form .s-quantity-input-container {
    height: 48px !important;
    overflow: hidden;
    background: var(--cs-cream-light);
    border: 1px solid var(--cs-border) !important;
    border-radius: 12px !important;
}

#single-product-form .s-quantity-input-button {
    width: 44px !important;
    color: var(--cs-brown) !important;
}

#single-product-form .s-quantity-input-input {
    min-width: 44px !important;
    color: var(--cs-text) !important;
    font-weight: 700;
}

#single-product-form .price_is_on_sale,
#single-product-form .starting-or-normal-price {
    align-items: baseline !important;
    gap: 8px !important;
}

#single-product-form .price_is_on_sale .total-price,
#single-product-form .starting-or-normal-price .total-price {
    color: var(--cs-orange) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

#single-product-form .before-price {
    color: var(--cs-text-muted) !important;
    font-size: 12px !important;
    opacity: .72;
}

/* Purchase controls */
#single-product-form .product-fixed-bar .grow.sm\:grow-0.w-full {
    width: 100% !important;
    margin-top: 18px !important;
}

#single-product-form #add-to-cart-btn {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Two equal actions on wide screens */
#single-product-form #add-to-cart-btn .s-add-product-button-main {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
}

#single-product-form #add-to-cart-btn .s-add-product-button-main > salla-button,
#single-product-form #add-to-cart-btn .s-add-product-button-main > salla-mini-checkout-widget {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
}

/* Primary CTA: add to cart */
#single-product-form #add-to-cart-btn .s-add-product-button-main > salla-button .s-button-element {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cs-green) !important;
    border: 1px solid var(--cs-green) !important;
    border-radius: 12px !important;
    color: var(--cs-white) !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

/* Secondary CTA host. The actual button lives in Shadow DOM,
   so use Salla's exposed CSS custom properties. */
#single-product-form #add-to-cart-btn salla-mini-checkout-widget.s-add-product-button-mini-checkout {
    --salla-fast-checkout-button-width: 100%;
    --salla-fast-checkout-button-height: 52px;
    --salla-fast-checkout-button-border-radius: 12px;
    --color-primary: var(--cs-orange);

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: var(--cs-orange) !important;
    box-sizing: border-box !important;
}

/* Slotted label inside the fast-checkout Shadow DOM button */
#single-product-form #add-to-cart-btn .s-add-product-button-mini-checkout-content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

#single-product-form #add-to-cart-btn .s-add-product-button-mini-checkout-content svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

/* Apple Pay remains visually separate */
#single-product-form #add-to-cart-btn > salla-quick-buy {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 14px !important;
}

#single-product-form #add-to-cart-btn .s-quick-buy-apple-pay,
#single-product-form #add-to-cart-btn apple-pay-button {
    width: 180px !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

@media (hover: hover) {
    #single-product-form #add-to-cart-btn .s-add-product-button-main > salla-button .s-button-element:hover {
        background: var(--cs-green-dark) !important;
        border-color: var(--cs-green-dark) !important;
    }
}

/* Narrow desktop, tablet and mobile: stack both CTAs */
@media (max-width: 1180px) {
    #single-product-form #add-to-cart-btn .s-add-product-button-main {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #single-product-form #add-to-cart-btn .s-add-product-button-main > salla-button,
    #single-product-form #add-to-cart-btn .s-add-product-button-main > salla-mini-checkout-widget,
    #single-product-form #add-to-cart-btn .s-add-product-button-main > salla-button .s-button-element {
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
    }

    #single-product-form #add-to-cart-btn salla-mini-checkout-widget.s-add-product-button-mini-checkout {
        --salla-fast-checkout-button-width: 100%;
        --salla-fast-checkout-button-height: 52px;
        --salla-fast-checkout-button-border-radius: 12px;
    }
}

@media (max-width: 767px) {
    #single-product-form #add-to-cart-btn .s-add-product-button-main {
        gap: 8px !important;
    }

    #single-product-form #add-to-cart-btn .s-add-product-button-main > salla-button,
    #single-product-form #add-to-cart-btn .s-add-product-button-main > salla-mini-checkout-widget,
    #single-product-form #add-to-cart-btn .s-add-product-button-main > salla-button .s-button-element {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }

    #single-product-form #add-to-cart-btn salla-mini-checkout-widget.s-add-product-button-mini-checkout {
        --salla-fast-checkout-button-width: 100%;
        --salla-fast-checkout-button-height: 50px;
        --salla-fast-checkout-button-border-radius: 11px;
        height: 50px !important;
        min-height: 50px !important;
    }

    #single-product-form #add-to-cart-btn .s-add-product-button-mini-checkout-content {
        font-size: 14px !important;
    }
}

/* ---------------------------------------------------------
   12.7 Tamara / Installments
   --------------------------------------------------------- */

#single-product-form .pay-installment {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
}

#single-product-form .pay-installment salla-installment {
    display: block;
    margin: 0 !important;
}

#single-product-form .pay-installment .tamara-product-widget {
    min-height: 72px !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    border-color: var(--cs-border) !important;
    border-radius: 14px !important;
    background: var(--cs-cream-light) !important;
    color: var(--cs-text) !important;
    font-size: 13px !important;
    line-height: 1.8 !important;
}

/* ---------------------------------------------------------
   12.8 Desktop
   --------------------------------------------------------- */

@media (min-width: 1024px) {
    #main-content .page-container.product-has-options {
        padding-top: 36px;
        padding-bottom: 80px;
    }

    #main-content .container--product-details,
    .single-product-form-page {
        padding-inline: 16px;
    }

    .single-product-form-page .main-content {
        margin-top: 30px;
    }

    .single-product-form-page .main-content > .w-full.grid {
        gap: 24px !important;
    }

    #single-product-form .product-fixed-bar {
        position: relative;
    }
}

/* ---------------------------------------------------------
   12.9 Tablet
   --------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
    #main-content .page-container.product-has-options {
        padding-top: 24px;
        padding-bottom: 56px;
    }

    #main-content .container--product-details,
    .single-product-form-page {
        padding-inline: 14px;
    }

    #main-content .container--product-details
    .details-slider .swiper-wrapper > .swiper-slide > img,
    #main-content .container--product-details
    .details-slider .swiper-wrapper > .swiper-slide > a > img,
    #main-content .container--product-details
    .details-slider .swiper-wrapper > .swiper-slide > picture > img,
    #main-content .container--product-details
    .details-slider .swiper-wrapper > .swiper-slide > a > picture > img {
        height: 520px !important;
    }

    #single-product-form .main-content-data {
        padding: 24px;
    }

    #single-product-form .product-fixed-bar {
        padding: 20px;
    }
}

/* ---------------------------------------------------------
   12.10 Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {
    #main-content .page-container.product-has-options {
        padding-top: 14px;
        padding-bottom: 42px;
    }

    #main-content .container--product-details,
    .single-product-form-page {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
        padding-inline: 7px !important;
    }

    #main-content .container--product-details .details-slider-wrapper {
        border-radius: 16px;
        box-shadow: none;
    }

    /* Mobile gallery height fix */
    #main-content .container--product-details
    .details-slider .s-slider-container,

    #main-content .container--product-details
    .details-slider .swiper-wrapper,

    #main-content .container--product-details
    .details-slider .swiper-slide {
        height: clamp(360px, 110vw, 480px) !important;
        min-height: 0 !important;
    }

    #main-content .container--product-details
    .details-slider .swiper-wrapper > .swiper-slide > a,
    #main-content .container--product-details
    .details-slider .swiper-wrapper > .swiper-slide > picture,
    #main-content .container--product-details
    .details-slider .swiper-wrapper > .swiper-slide > a > picture {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    #main-content .container--product-details
    .details-slider .swiper-wrapper > .swiper-slide > img,
    #main-content .container--product-details
    .details-slider .swiper-wrapper > .swiper-slide > a > img,
    #main-content .container--product-details
    .details-slider .swiper-wrapper > .swiper-slide > picture > img,
    #main-content .container--product-details
    .details-slider .swiper-wrapper > .swiper-slide > a > picture > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    #main-content .container--product-details
    .details-slider .s-slider-thumbs {
        display: none !important;
    }



    #main-content .container--product-details .details-slider .s-slider-prev,
    #main-content .container--product-details .details-slider .s-slider-next {
        width: 36px;
        height: 36px;
    }

    .single-product-form-page .main-content {
        width: 100% !important;
        margin-top: 12px !important;
        margin-bottom: 26px !important;
    }

    .single-product-form-page .main-content > .w-full.grid {
        width: 100% !important;
        gap: 12px !important;
        margin: 0 !important;
    }

    #single-product-form .main-content-data,
    #single-product-form .product-fixed-bar {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
        border-radius: 16px !important;
        box-shadow: none !important;
    }

    #single-product-form .main-content-data {
        padding: 18px 14px !important;
    }

    #single-product-form .product-fixed-bar {
        padding: 16px 14px !important;
    }

    #single-product-form .product-title {
        font-size: 24px !important;
        line-height: 1.45 !important;
    }

    #single-product-form .main-content-data > .flex.flex-col > p {
        margin-bottom: 12px !important;
        font-size: 13px !important;
    }

    #single-product-form .product__description {
        padding-top: 4px !important;
    }

    #single-product-form .product__description .article--main {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.85;
    }

    #single-product-form .product__description .article--main p {
        margin-bottom: 14px !important;
        font-size: 15px !important;
        line-height: 1.9 !important;
    }

    #single-product-form .product__description .article--main h2 {
        margin: 29px 0 14px !important;
        padding: 12px 15px !important;
        font-size: 18px !important;
        line-height: 1.55 !important;
        border-radius: 10px !important;
    }

    #single-product-form .product__description .article--main h2:first-child {
        margin-top: 4px !important;
    }

    #single-product-form .product__description .article--main h3 {
        margin: 21px 0 7px !important;
        font-size: 16px !important;
    }

    #single-product-form .product__description .article--main ul {
        gap: 7px;
        margin-bottom: 21px !important;
    }

    #single-product-form .product__description .article--main ul li {
        padding: 11px 38px 11px 12px !important;
        font-size: 14px;
    }

    #single-product-form .share-wishlist-data {
        gap: 8px;
        margin-top: 15px !important;
        padding-top: 14px;
    }

    #single-product-form .share-wishlist-data .s-button-element,
    #single-product-form .share-wishlist-data .s-social-share-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        border-radius: 10px !important;
    }

    #single-product-form .price_is_on_sale .total-price,
    #single-product-form .starting-or-normal-price .total-price {
        font-size: 24px !important;
    }

    #single-product-form #add-to-cart-btn .s-add-product-button-main {
        gap: 8px !important;
    }

    #single-product-form #add-to-cart-btn .s-add-product-button-main > salla-button,
    #single-product-form #add-to-cart-btn .s-add-product-button-main > .s-add-product-button-mini-checkout,
    #single-product-form #add-to-cart-btn .s-add-product-button-main > salla-button .s-button-element {
        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }

    #single-product-form #add-to-cart-btn .s-add-product-button-mini-checkout-content {
        min-height: 48px !important;
        font-size: 14px !important;
    }

    #single-product-form #add-to-cart-btn .s-add-product-button-main > salla-button .s-button-element {
        font-size: 14px !important;
        border-radius: 11px !important;
    }

    #single-product-form #add-to-cart-btn .s-add-product-button-mini-checkout {
        border-radius: 11px !important;
    }

    #single-product-form #add-to-cart-btn .s-quick-buy-apple-pay,
    #single-product-form #add-to-cart-btn apple-pay-button {
        width: 164px !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 11px !important;
    }

    #single-product-form .pay-installment {
        margin-top: 10px !important;
    }

    #single-product-form .pay-installment .tamara-product-widget {
        min-height: 68px !important;
        border-radius: 12px !important;
        font-size: 12.5px !important;
    }
}

/* ---------------------------------------------------------
   12.11 Very Small Phones
   --------------------------------------------------------- */

@media (max-width: 360px) {
    #main-content .container--product-details,
    .single-product-form-page {
        padding-inline: 5px !important;
    }

    #single-product-form .main-content-data,
    #single-product-form .product-fixed-bar {
        padding-inline: 12px !important;
    }

    #single-product-form .product-title {
        font-size: 22px !important;
    }

    #single-product-form #add-to-cart-btn .s-add-product-button-main {
        gap: 7px !important;
    }

    #single-product-form #add-to-cart-btn .s-add-product-button-main > salla-button .s-button-element,
    #single-product-form #add-to-cart-btn .s-add-product-button-mini-checkout-content {
        padding-inline: 7px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   13. HOME PAGE
   Chăm Sóc
   ========================================================= */


/* ---------------------------------------------------------
   13.1 Home Hero
   --------------------------------------------------------- */

#s-block--fixed-banner-0 {
    margin-top: 0;
    padding-top: 24px;
    padding-bottom: 0;
}

#s-block--fixed-banner-0 > .container {
    /* max-width: var(--cs-container); */
}

#s-block--fixed-banner-0 .banner--fixed {
    display: block;
    overflow: hidden;
    border-radius: 24px;
    background: var(--cs-cream);
    box-shadow: 0 8px 30px rgba(73, 43, 25, .06);
}

#s-block--fixed-banner-0 .banner--fixed picture {
    display: block;
}

#s-block--fixed-banner-0 .banner--fixed img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform .5s ease;
}

@media (hover: hover) {
    #s-block--fixed-banner-0 .banner--fixed:hover img {
        transform: scale(1.01);
    }
}


/* ---------------------------------------------------------
   13.2 Products Section
   --------------------------------------------------------- */

#fixed-products-with-background-1 {
    margin-top: 48px;
    margin-bottom: 64px;
}

#fixed-products-with-background-1 > .relative {
    /* max-width: var(--cs-container); */
    margin-inline: auto;
    padding-inline: 20px;
}


/* ---------------------------------------------------------
   13.3 Products Grid
   --------------------------------------------------------- */

#fixed-products-with-background-1 .s-products-list-wrapper {
    gap: 22px;
}


/* ---------------------------------------------------------
   13.4 Product Card
   --------------------------------------------------------- */

#fixed-products-with-background-1 custom-salla-product-card.product-entry {
    position: relative;
    overflow: hidden;
    background: var(--cs-white);
    border: 1px solid var(--cs-border);
    border-radius: 20px;
    box-shadow: 0 5px 18px rgba(73, 43, 25, .045);
    transition:
        transform var(--cs-transition),
        box-shadow var(--cs-transition),
        border-color var(--cs-transition);
}

@media (hover: hover) {

    #fixed-products-with-background-1 custom-salla-product-card.product-entry:hover {
        transform: translateY(-4px);
        border-color: rgba(214, 95, 46, .22);
        box-shadow: 0 14px 34px rgba(73, 43, 25, .09);
    }
}


/* ---------------------------------------------------------
   13.5 Product Image
   --------------------------------------------------------- */

#fixed-products-with-background-1 .product-entry__image {
    position: relative;
    overflow: hidden;
    background: var(--cs-cream-light);
    border-radius: 20px 20px 0 0;
}

#fixed-products-with-background-1 .product-entry__image > a {
    display: block;
    overflow: hidden;
}

#fixed-products-with-background-1 .product-entry__image img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .45s ease;
}

@media (hover: hover) {

    #fixed-products-with-background-1 .product-entry:hover .product-entry__image img {
        transform: scale(1.025);
    }
}


/* ---------------------------------------------------------
   13.6 Promotion Badge
   --------------------------------------------------------- */

#fixed-products-with-background-1 .promotion-badge {
    top: 14px;
    right: 14px;
    max-width: calc(100% - 72px);
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--cs-orange);
    color: var(--cs-white);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}


/* ---------------------------------------------------------
   13.7 Wishlist
   --------------------------------------------------------- */

#fixed-products-with-background-1 .product-entry__image > salla-button.btn--wishlist {
    top: 14px;
    left: 14px;
}

#fixed-products-with-background-1 .btn--wishlist .s-button-element {
    width: 38px;
    height: 38px;
    min-height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(90, 44, 27, .10);
    color: var(--cs-text-muted);
    box-shadow: 0 4px 12px rgba(73, 43, 25, .06);
}

#fixed-products-with-background-1 .btn--wishlist .s-button-element:hover {
    color: var(--cs-orange);
    border-color: rgba(214, 95, 46, .28);
}


/* ---------------------------------------------------------
   13.8 Card Content
   --------------------------------------------------------- */

#fixed-products-with-background-1 .content-wrap {
    padding: 18px 18px 16px;
}

#fixed-products-with-background-1 .s-product-card-content {
    min-height: 128px;
}

#fixed-products-with-background-1 .s-product-card-content-title {
    margin: 0 0 7px;
    color: var(--cs-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
}

#fixed-products-with-background-1 .s-product-card-content-title > a {
    color: inherit;
    transition: color var(--cs-transition);
}

#fixed-products-with-background-1 .s-product-card-content-title > a:hover {
    color: var(--cs-orange);
}


/* ---------------------------------------------------------
   13.9 Rating
   --------------------------------------------------------- */

#fixed-products-with-background-1 .s-product-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-inline-start: 6px;
    color: var(--cs-text-muted);
    font-size: 12px;
}


/* ---------------------------------------------------------
   13.10 Subtitle
   --------------------------------------------------------- */

#fixed-products-with-background-1 .s-product-card-content-subtitle {
    margin: 0;
    color: var(--cs-text-muted);
    font-size: 13px;
    line-height: 1.6;
}


/* ---------------------------------------------------------
   13.11 Price + Add to cart
   --------------------------------------------------------- */

#fixed-products-with-background-1
.s-product-card-content > .flex.justify-between.items-center {
    gap: 12px;
    margin-top: 18px !important;
}

#fixed-products-with-background-1 .price-wrapper {
    gap: 7px !important;
}

#fixed-products-with-background-1 .total-price {
    color: var(--cs-text) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

#fixed-products-with-background-1 .price_is_on_sale .total-price {
    color: var(--cs-orange) !important;
}

#fixed-products-with-background-1 .before-price {
    color: var(--cs-text-muted) !important;
    font-size: 12px;
    opacity: .7;
}


/* Cart button */

#fixed-products-with-background-1 salla-add-product-button .s-button-element {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    background: var(--cs-cream-light);
    color: var(--cs-orange);
    transition:
        background-color var(--cs-transition),
        color var(--cs-transition),
        border-color var(--cs-transition),
        transform var(--cs-transition);
}

#fixed-products-with-background-1 salla-add-product-button .s-button-element:hover {
    background: var(--cs-orange);
    border-color: var(--cs-orange);
    color: var(--cs-white);
    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   13.12 Show All
   --------------------------------------------------------- */

#fixed-products-with-background-1 .display-all-url {
    width: 210px !important;
    min-height: 48px;
    margin: 32px auto 0;
    border: 1px solid var(--cs-orange) !important;
    border-radius: 14px !important;
    background: var(--cs-white);
    color: var(--cs-orange);
    transition:
        background-color var(--cs-transition),
        color var(--cs-transition),
        box-shadow var(--cs-transition);
}

#fixed-products-with-background-1 .display-all-url:hover {
    background: var(--cs-orange);
    color: var(--cs-white);
    box-shadow: 0 8px 20px rgba(214, 95, 46, .15);
}

/* ---------------------------------------------------------
   13.13 Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

    #s-block--fixed-banner-0 {
        padding-top: 12px;
    }

    #s-block--fixed-banner-0 > .container {
        padding-inline: 12px;
    }

    #s-block--fixed-banner-0 .banner--fixed {
        border-radius: 16px;
        box-shadow: none;
    }

    #fixed-products-with-background-1 {
        margin-top: 32px;
        margin-bottom: 48px;
    }

    #fixed-products-with-background-1 > .relative {
        padding-inline: 12px;
    }

    #fixed-products-with-background-1 .s-products-list-wrapper {
        gap: 12px;
    }

    #fixed-products-with-background-1 custom-salla-product-card.product-entry {
        border-radius: 16px;
        box-shadow: none;
    }

    #fixed-products-with-background-1 .product-entry__image {
        border-radius: 16px 16px 0 0;
    }

    #fixed-products-with-background-1 .content-wrap {
        padding: 12px 11px 12px;
    }

    #fixed-products-with-background-1 .s-product-card-content {
        min-height: 118px;
    }

    #fixed-products-with-background-1 .s-product-card-content-title {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 5px;
    }

    #fixed-products-with-background-1 .s-product-card-content-subtitle {
        font-size: 11px;
    }

    #fixed-products-with-background-1 .promotion-badge {
        top: 9px;
        right: 9px;
        padding: 5px 8px;
        font-size: 9px;
    }

    #fixed-products-with-background-1 .product-entry__image > salla-button.btn--wishlist {
        top: 9px;
        left: 9px;
    }

    #fixed-products-with-background-1 .btn--wishlist .s-button-element {
        width: 32px;
        height: 32px;
        min-height: 32px;
    }

    #fixed-products-with-background-1
    .s-product-card-content > .flex.justify-between.items-center {
        gap: 7px;
        margin-top: 12px !important;
    }

    #fixed-products-with-background-1 .total-price {
        font-size: 14px !important;
    }

    #fixed-products-with-background-1 .before-price {
        font-size: 10px;
    }

    #fixed-products-with-background-1 salla-add-product-button .s-button-element {
        width: 36px;
        height: 36px;
        min-height: 36px;
        border-radius: 10px;
    }

    #fixed-products-with-background-1 .display-all-url {
        min-width: 150px;
        height: 44px !important;
        margin-top: 24px;
    }
}

/* =========================================================
   13.14 PRODUCT CARDS — premium divided layout
   Equal heights, aligned actions, distinctive borders
   ========================================================= */

#fixed-products-with-background-1 .s-products-list-wrapper {
    align-items: stretch !important;
    gap: 20px !important;
}

#fixed-products-with-background-1 custom-salla-product-card.product-entry {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    background: var(--cs-white) !important;
    border: 1px solid #ead9cc !important;
    border-radius: 20px !important;
    box-shadow: 0 7px 22px rgba(73, 43, 25, .055) !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

/* image becomes a clear visual section */
#fixed-products-with-background-1 custom-salla-product-card.product-entry .product-entry__image {
    flex: 0 0 auto !important;
    border-radius: 19px 19px 0 0 !important;
    border-bottom: 1px solid #ead9cc !important;
    background: var(--cs-cream-light) !important;
}

#fixed-products-with-background-1 custom-salla-product-card.product-entry .product-entry__image img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

/* content fills the remaining card height */
#fixed-products-with-background-1 custom-salla-product-card.product-entry > form.content-wrap,
#fixed-products-with-background-1 custom-salla-product-card.product-entry .content-wrap.product-form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    padding: 14px 14px 0 !important;
    background: var(--cs-white) !important;
}

#fixed-products-with-background-1 custom-salla-product-card.product-entry .s-product-card-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
}

/* title — consistent two-line zone */
#fixed-products-with-background-1 .s-product-card-content-title {
    min-height: 46px !important;
    margin: 0 0 3px !important;
    color: var(--cs-text) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.6 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
}

#fixed-products-with-background-1 .s-product-card-content-title > a {
    color: inherit !important;
}

/* compact rating row */
#fixed-products-with-background-1 .s-product-card-rating {
    min-height: 18px !important;
    margin: 0 0 4px !important;
    font-size: 11px !important;
}

/* subtitle — consistent two-line zone */
#fixed-products-with-background-1 .s-product-card-content-subtitle {
    min-height: 40px !important;
    margin: 0 !important;
    color: var(--cs-text-muted) !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
}

/* Footer action strip — always pinned to the bottom */
#fixed-products-with-background-1 .s-product-card-content > .flex.justify-between.items-center {
    width: calc(100% + 28px) !important;
    min-height: 62px !important;
    margin-top: auto !important;
    margin-inline: -14px !important;
    margin-bottom: 0 !important;
    padding: 10px 14px 12px !important;
    gap: 10px !important;
    align-items: center !important;
    background: linear-gradient(180deg, #fffdfb 0%, var(--cs-cream-light) 100%) !important;
    border-top: 1px solid #ead9cc !important;
}

#fixed-products-with-background-1 .price-wrapper,
#fixed-products-with-background-1 .price_is_on_sale,
#fixed-products-with-background-1 .starting-or-normal-price {
    align-items: baseline !important;
    gap: 6px !important;
}

#fixed-products-with-background-1 .total-price {
    color: var(--cs-brown) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

#fixed-products-with-background-1 .price_is_on_sale .total-price {
    color: var(--cs-orange) !important;
}

#fixed-products-with-background-1 .before-price {
    color: var(--cs-text-muted) !important;
    font-size: 10px !important;
    opacity: .68 !important;
}

/* compact, distinctive cart control */
#fixed-products-with-background-1 salla-add-product-button .s-button-element {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid rgba(214, 95, 46, .34) !important;
    border-radius: 11px !important;
    background: var(--cs-white) !important;
    color: var(--cs-orange) !important;
    box-shadow: 0 3px 10px rgba(73, 43, 25, .045) !important;
}

/* badge and wishlist belong to the image, not the content */
#fixed-products-with-background-1 .promotion-badge {
    box-shadow: 0 4px 12px rgba(73, 43, 25, .12) !important;
}

@media (hover: hover) {
    #fixed-products-with-background-1 custom-salla-product-card.product-entry:hover {
        transform: translateY(-5px) !important;
        border-color: rgba(214, 95, 46, .40) !important;
        box-shadow: 0 16px 34px rgba(73, 43, 25, .10) !important;
    }

    #fixed-products-with-background-1 custom-salla-product-card.product-entry:hover .product-entry__image {
        border-bottom-color: rgba(214, 95, 46, .28) !important;
    }

    #fixed-products-with-background-1 salla-add-product-button .s-button-element:hover {
        background: var(--cs-orange) !important;
        border-color: var(--cs-orange) !important;
        color: var(--cs-white) !important;
        transform: translateY(-1px) !important;
    }
}

@media (max-width: 767px) {
    #fixed-products-with-background-1 .s-products-list-wrapper {
        gap: 12px !important;
    }

    #fixed-products-with-background-1 custom-salla-product-card.product-entry {
        border-radius: 16px !important;
        box-shadow: 0 4px 14px rgba(73, 43, 25, .045) !important;
    }

    #fixed-products-with-background-1 custom-salla-product-card.product-entry .product-entry__image {
        border-radius: 15px 15px 0 0 !important;
    }

    #fixed-products-with-background-1 custom-salla-product-card.product-entry > form.content-wrap,
    #fixed-products-with-background-1 custom-salla-product-card.product-entry .content-wrap.product-form {
        padding: 11px 10px 0 !important;
    }

    #fixed-products-with-background-1 .s-product-card-content-title {
        min-height: 40px !important;
        font-size: 12.5px !important;
        line-height: 1.55 !important;
    }

    #fixed-products-with-background-1 .s-product-card-content-subtitle {
        min-height: 34px !important;
        font-size: 10.5px !important;
        line-height: 1.6 !important;
    }

    #fixed-products-with-background-1 .s-product-card-content > .flex.justify-between.items-center {
        width: calc(100% + 20px) !important;
        min-height: 54px !important;
        margin-inline: -10px !important;
        padding: 8px 10px 10px !important;
    }

    #fixed-products-with-background-1 .total-price {
        font-size: 14px !important;
    }

    #fixed-products-with-background-1 salla-add-product-button .s-button-element {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 10px !important;
    }
}


/* =========================================================
   HOME FEATURES — TRUST STRIP
   ========================================================= */

#s-home--features-2 {
    margin-top: 52px;
    margin-bottom: 52px;
}

#s-home--features-2 .features-home-grid {
    gap: 16px !important;
}

#s-home--features-2 .s-block--features__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    min-height: 185px;
    padding: 28px 22px 24px;

    background: var(--cs-white) !important;

    border: 1px solid var(--cs-border) !important;
    border-radius: 18px !important;

    box-shadow:
        0 4px 16px rgba(73, 43, 25, .045) !important;

    text-align: center;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

/* Disable old decorative border */
#s-home--features-2 .s-block--features__item .card-border {
    display: none !important;
}

/* Icon container */
#s-home--features-2 .feature-icon-div {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 18px;

    background: var(--cs-cream);

    border: 1px solid rgba(214, 95, 46, .14);
    border-radius: 15px;
}

/* Icon */
#s-home--features-2 .feature-icon {
    color: var(--cs-orange) !important;
    font-size: 26px !important;
}

/* Text wrapper */
#s-home--features-2 .feature-text {
    width: 100%;
}

/* Title */
#s-home--features-2 .feature-text h4 {
    margin: 0 0 8px !important;

    color: var(--cs-brown) !important;

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}

/* Description */
#s-home--features-2 .feature-text p {
    max-width: 230px;
    margin: 0 auto !important;

    color: var(--cs-text-muted) !important;

    font-size: 13.5px !important;
    line-height: 1.75 !important;
}

/* Desktop hover */
@media (hover: hover) and (pointer: fine) {
    #s-home--features-2 .s-block--features__item:hover {
        transform: translateY(-3px);

        border-color: rgba(214, 95, 46, .22) !important;

        box-shadow:
            0 10px 28px rgba(73, 43, 25, .075) !important;
    }

    #s-home--features-2 .s-block--features__item:hover .feature-icon-div {
        background: var(--cs-orange);
        border-color: var(--cs-orange);
    }

    #s-home--features-2 .s-block--features__item:hover .feature-icon {
        color: var(--cs-white) !important;
    }
}

/* Tablet */
@media (max-width: 1023px) {
    #s-home--features-2 .features-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #s-home--features-2 {
        margin-top: 36px;
        margin-bottom: 36px;
    }

    #s-home--features-2 .features-home-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #s-home--features-2 .s-block--features__item {
        min-height: 0;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: center;

        padding: 16px;

        text-align: right;
        border-radius: 14px !important;
    }

    #s-home--features-2 .feature-icon-div {
        width: 46px;
        height: 46px;

        margin: 0 0 0 14px;

        border-radius: 12px;
    }

    #s-home--features-2 .feature-icon {
        font-size: 22px !important;
    }

    #s-home--features-2 .feature-text h4 {
        margin-bottom: 3px !important;
        text-align: right !important;
        font-size: 14px !important;
    }

    #s-home--features-2 .feature-text p {
        max-width: none;
        margin: 0 !important;

        text-align: right;
        font-size: 12.5px !important;
        line-height: 1.65 !important;
    }
}