/* Farmacia Fernández — brand palette + Manrope (single-family for both heading/body) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* Theme Overrides */

/* ==========================================================================
   Design Tokens (CSS Custom Properties) — Farmacia Fernández
   Palette: bg #fffefd · accent #eef0f5 · text #1d1c34 · CTA #f25256
   ========================================================================== */
:root {
    /* Colors - Primary palette (deep navy as primary brand color) */
    --t-primary: #1d1c34;
    --t-primary-light: #2a2849;
    --t-secondary: #eef0f5;
    --t-secondary-hover: #d4d8e3;
    --t-accent: #f25256;
    --t-accent-hover: #d63f43;

    /* Neutrals */
    --t-bg-main: #fffefd;
    --t-bg-surface: #ffffff;
    --t-bg-secondary: #f4f6fb;
    --t-text-main: #1d1c34;
    --t-text-muted: #5a5870;
    --t-text-inverse: #ffffff;

    /* Functional */
    --t-error: #f25256;
    --t-warning: #f59e0b;
    --t-border: #e4e6f0;
    --t-border-light: #eef0f7;

    /* Typography — Manrope single-family */
    --t-font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
    --t-font-body: 'Manrope', system-ui, -apple-system, sans-serif;

    /* Shadows */
    --t-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --t-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --t-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --t-shadow-premium: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Radius */
    --t-radius-sm: 0.25rem;
    --t-radius-md: 0.5rem;
    --t-radius-lg: 0.75rem;
    --t-radius-xl: 1rem;
    --t-radius-2xl: 1.5rem;
    --t-radius-pill: 9999px;

    /* Transitions */
    --t-transition-fast: 150ms ease;
    --t-transition-normal: 300ms ease;

    /* Layout */
    --t-container-max: 1280px;
    --t-nav-height: 72px;
}

/* Bonus pills badge — Fernández accent label inside quantity cards */
.bonus-pills {
    display: inline-block !important;
    background-color: #f25256 !important;
    color: #fff !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    margin-top: 4px !important;
}

/* ==========================================================================
   Global Overrides
   ========================================================================== */
html {
    font-size: 16px !important;
    scrollbar-gutter: stable !important;
}

body {
    font-family: var(--t-font-body) !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--t-text-main);
    background-color: var(--t-bg-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide page scrollbar when categories/search/nav overlays are open */
.st-copen body,
.st-sopen body,
.st-nopen body {
    overflow: hidden !important;
}

/* Offset for fixed top bar (36px height) — desktop only, hidden on mobile */
@media (min-width: 992px) {
    .app {
        padding-top: 36px;
    }

    .hd__sticky {
        top: 36px !important;
    }

    .st-pin .hd__sticky {
        top: 36px !important;
    }

    .st-fixed .hd__sticky {
        top: 36px !important;
    }
}

/* ==========================================================================
   Structural size fixes — use px to avoid rem scaling from 10px→16px root
   top-bar=36px, header section-02=56px mobile / 72px desktop
   total fixed height: 92px mobile / 108px desktop
   ========================================================================== */

/* Main content padding to clear fixed header + top-bar
   .app has padding-top:36px for topbar, header is fixed at top:36px
   header height: 56px mobile / 72px desktop
   .main padding = header height (since .app already offsets for topbar) */
.main {
    padding: 56px 0 0 !important;
}

@media (min-width: 992px) {
    .main {
        padding: 72px 0 0 !important;
    }
}

/* Header section 02 — explicit px height */
.hd__section--02 {
    height: 56px !important;
}

@media (min-width: 992px) {
    .hd__section--02 {
        height: 72px !important;
    }
}

.hd__section--02 .container-fluid {
    height: 56px;
}

@media (min-width: 992px) {
    .hd__section--02 .container-fluid {
        height: 72px;
    }
}

/* Search bar — match reference 39px height, pill shape */
.hd__search-offcanvas {
    height: 40px !important;
    border-radius: 9999px !important;
}

.hd__search-input {
    height: 40px !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    padding: 0.5rem 3rem 0.5rem 1rem !important;
    font-family: var(--t-font-body) !important;
    border-radius: 9999px !important;
}

.hd__search-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
}

.hd__search-dropdown {
    top: 42px !important;
    max-height: calc(100vh - 120px) !important;
}

/* Categories toggle — compact sizing */
.hd__categories-toggle {
    height: 40px !important;
}

.hd__categories-toggle-icon {
    width: 20px !important;
    height: 20px !important;
    margin: 0 8px 0 0 !important;
}

/* Nav offcanvas positioning */
.hd__nav-offcanvas {
    top: 56px !important;
    padding: 16px !important;
}

@media (min-width: 992px) {
    .hd__nav-offcanvas {
        top: auto !important;
        padding: 0 !important;
    }
}

/* Mobile bottom controls */
.hd__control {
    height: calc(56px + var(--safe-area-inset-bottom)) !important;
}

.hd__nav-action {
    min-height: auto !important;
    height: auto !important;
}

@media (max-width: 991px) {
    .hd__nav-offcanvas {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .hd__nav-action {
        height: 20px !important;
        margin-top: auto !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid rgba(255,255,255,0.12) !important;
        width: calc(100% + 32px) !important;
        display: flex !important;
        align-items: center !important;
    }

    .hd__nav-action > li {
        flex: 1 1 0 !important;
        display: flex !important;
        align-items: center !important;
    }

}

/* Categories offcanvas positioning */
.hd__categories-offcanvas {
    top: 108px !important;
    height: calc(100vh - 108px) !important;
    padding: 0 !important;
}

/* Force offcanvas inner containers to fill the offcanvas height */
.hd__categories-offcanvas > .container-fluid {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.hd__categories-offcanvas-body {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.hd__categories-aside {
    height: 100% !important;
    overflow-y: auto !important;
}

@media (max-width: 991px) {
    /* Hide top bar on mobile — keep header compact */
    .el-top-bar {
        display: none !important;
    }

    /* Show section-01 on mobile for nav-toggle (hamburger) */
    .hd__section--01 {
        display: block !important;
        height: 0 !important;
        overflow: visible !important;
        position: relative;
    }

    /* Nav-toggle: fix rem inflation (2.4rem=38.4px→24px, 1.6rem=25.6px→16px, 1.2rem=19.2px→12px) */
    .hd__nav-toggle {
        width: 24px !important;
        height: 24px !important;
        right: 16px !important;
        margin: -12px 0 0 !important;
        color: var(--t-primary) !important;
        background: transparent !important;
        z-index: 101;
    }

    .hd__nav-toggle svg {
        width: 24px !important;
        height: 24px !important;
        margin: -12px 0 0 -12px !important;
    }

    /* Position toggle at vertical center of section-02 (56px tall) */
    .hd__nav-toggle {
        top: 28px !important;
    }

    /* Mobile header layout */
    .hd__section--02 .container-fluid {
        height: 56px !important;
        padding: 0 16px !important;
    }

    /* Categories offcanvas container must fill the offcanvas, not inherit 56px from section-02 */
    .hd__categories-offcanvas > .container-fluid {
        height: 100% !important;
        padding: 0 !important;
    }

    .hd__logo img {
        height: 36px !important;
    }

    /* Hide search & cart in header on mobile (available in bottom bar) */
    .hd__search {
        display: none !important;
    }

    /* Show search when activated from bottom bar */
    .st-sopen .hd__search {
        display: block !important;
    }

    .st-sopen .hd__search-offcanvas {
        height: 48px !important;
    }

    .st-sopen .hd__search-input {
        height: 48px !important;
        font-size: 1rem !important;
    }

    .st-sopen .hd__search-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .hd__cart {
        display: none !important;
    }

    /* Hide categories toggle button on mobile (hamburger uses nav-toggle instead)
       Keep the nav element visible so the categories offcanvas works from bottom bar */
    .hd__categories-toggle {
        display: none !important;
    }

    .hd__categories-offcanvas {
        top: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
        padding: 56px 0 0 !important;
    }

    .hd__categories-offcanvas-head {
        height: 56px !important;
    }

    .hd__categories-dropdown {
        padding: 56px 0 0 !important;
    }

    .hd__categories-dropdown-head {
        height: 56px !important;
    }

    .hd__categories-link,
    .hd__categories-loadmore-link {
        min-height: 48px !important;
    }

    /* Hide nav-toggle (hamburger/X) when categories or search are open.
       Prevents confusion: app.min.css turns hamburger into X when categories open,
       but clicking it fires nav-toggle (opens nav menu) instead of closing categories.
       Categories offcanvas has its own close button. */
    .st-copen .hd__nav-toggle,
    .st-sopen .hd__nav-toggle {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .st-pin .hd__categories-offcanvas {
        top: 72px !important;
        height: calc(100vh - 72px) !important;
        max-height: calc(100vh - 72px) !important;
    }
}

/* Sticky header hide/show offsets */
.st-pin .hd__sticky {
    top: -56px !important;
}

@media (min-width: 992px) {
    .st-pin .hd__sticky {
        top: -108px !important;
    }
}

@media (max-width: 991px) {
    .st-fixed .hd__sticky {
        top: 0px !important;
    }
}

/* Cart head */
.hd__cart-head {
    min-height: 48px !important;
    padding: 12px 16px !important;
}

/* SVG icon sizes in header — fix absolute positioning (rem inflation: -1.2rem = -19.2px, should be -10px for 20px icon) */
.hd__categories-toggle svg,
.hd__categories-toggle-icon svg {
    width: 20px !important;
    height: 20px !important;
    margin: -10px 0 0 -10px !important;
}

.hd__cart-toggle svg {
    width: 24px !important;
    height: 24px !important;
}

.hd__control-btn svg {
    width: 22px !important;
    height: 22px !important;
}

.hd__search-item-image {
    width: 40px !important;
    height: 40px !important;
}

.hd__categories-cards-link-image {
    width: 48px !important;
    height: 48px !important;
}

.hd__cart-item-image {
    width: 48px !important;
    height: 48px !important;
}

/* Logo img — constrain height */
.hd__logo img {
    height: 36px !important;
    width: auto !important;
}

/* Inline SVG logo (icon + domain text) */
.el-logo-inline {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none !important;
}

.el-logo-inline i {
    font-size: 2rem;
    color: var(--t-accent);
    flex-shrink: 0;
}

.el-logo-text {
    font-family: var(--t-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--t-primary);
    letter-spacing: -0.02em;
    line-height: 1;
}

.el-logo-dot {
    color: var(--t-accent);
}

/* White version (footer) */
.el-logo-white .el-logo-text {
    color: white;
}

/* Footer bottom padding fix */
.footer {
    padding-bottom: 0 !important;
}

/* Form elements — px heights */
.ui-placeholder__input,
.ui-placeholder__textarea {
    height: 48px !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    padding: 18px 16px 8px !important;
}

.ui-placeholder__label {
    height: 48px !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    padding: 14px 16px !important;
}

.ui-placeholder__select .selectric {
    height: 48px !important;
    font-size: 1rem !important;
    padding: 18px 48px 8px 16px !important;
}

.ui-placeholder.is-open .ui-placeholder__select .selectric .label,
.ui-placeholder.is-changed .ui-placeholder__select .selectric .label {
    padding-top: 10px !important;
}

.ui-select .selectric {
    height: 48px !important;
    padding: 0 36px 0 16px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
}

.ui-btn--56 {
    min-height: 48px !important;
    font-size: 1.125rem !important;
    padding: 10px 16px !important;
}

/* Product images in listings */
.cat__item-image {
    height: 96px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--t-font-heading) !important;
    color: var(--t-primary);
    line-height: 1.2;
    font-weight: 700;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
}

h4 {
    font-size: 1.25rem !important;
}

a {
    color: var(--t-accent);
    transition: color var(--t-transition-fast);
}

a:hover {
    color: var(--t-accent-hover);
}

.container-fluid {
    max-width: var(--t-container-max);
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .container-fluid {
        padding: 0 2rem;
    }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.ui-btn {
    font-family: var(--t-font-heading) !important;
    font-weight: 600;
    border-radius: var(--t-radius-pill) !important;
    transition: all var(--t-transition-normal);
}

.ui-btn--blue {
    background-color: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    box-shadow: 0 4px 14px 0 rgba(216, 58, 62, 0.25);
}

.ui-btn--blue:hover {
    background-color: var(--t-accent-hover) !important;
    border-color: var(--t-accent-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(216, 58, 62, 0.35);
}

.el-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-family: var(--t-font-heading);
    font-weight: 600;
    border-radius: var(--t-radius-pill);
    border: none;
    cursor: pointer;
    transition: all var(--t-transition-normal);
    text-decoration: none;
    line-height: 1;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.el-btn-primary {
    background-color: var(--t-accent);
    color: var(--t-text-inverse);
    box-shadow: 0 4px 14px 0 rgba(216, 58, 62, 0.3);
}

.el-btn-primary:hover {
    background-color: var(--t-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(216, 58, 62, 0.4);
    color: var(--t-text-inverse);
}

.el-btn-outline {
    background-color: transparent;
    color: var(--t-primary);
    border: 1px solid var(--t-border);
}

.el-btn-outline:hover {
    border-color: var(--t-primary);
    background-color: var(--t-bg-secondary);
    color: var(--t-primary);
}

.el-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* ==========================================================================
   Top Bar (NEW element)
   ========================================================================== */
.el-top-bar {
    background-color: var(--t-primary);
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    padding: 8px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2100;
    line-height: 1.4;
}

.el-top-bar-inner {
    max-width: var(--t-container-max);
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (min-width: 768px) {
    .el-top-bar-inner {
        padding: 0 32px;
    }
}

.el-top-bar-left,
.el-top-bar-right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.el-top-bar-ssl {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.el-top-bar-ssl i {
    color: var(--t-accent);
    font-size: 16px;
}

.el-top-bar-nav {
    display: none;
    align-items: center;
    gap: 16px;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

@media (min-width: 768px) {
    .el-top-bar-nav {
        display: flex;
    }
}

.el-top-bar-nav a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 13px;
    transition: color var(--t-transition-fast);
}

.el-top-bar-nav a:hover {
    color: #fff;
}

.el-top-bar-right {
    display: none;
}

@media (min-width: 768px) {
    .el-top-bar-right {
        display: flex;
    }
}

.el-top-bar-info {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.75);
}

.el-top-bar-info i {
    color: var(--t-accent);
    font-size: 16px;
}

.el-top-bar-info img {
    height: 11px;
    filter: brightness(0) invert(1);
    opacity: 0.75;
    vertical-align: middle;
}

/* Language/currency selectors in top bar */
.el-selectors {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.el-selectors select,
.el-selectors .selectric-wrapper {
    font-size: 13px;
}

.el-top-bar .el-selectors .ui-select {
    margin: 0 !important;
    padding: 0 !important;
}

.el-top-bar .el-selectors .selectric-wrapper {
    margin: 0 !important;
    vertical-align: middle;
}

.el-top-bar .el-selectors .selectric {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.el-top-bar .el-selectors .selectric .label {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    height: auto !important;
}

/* Style Selectric arrow (uses .arrow with inline SVG, not .button) */
.el-top-bar .el-selectors .selectric .arrow {
    color: rgba(255, 255, 255, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    width: 14px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    position: static !important;
}

.el-top-bar .el-selectors .selectric .arrow svg {
    width: 12px !important;
    height: 12px !important;
    stroke: rgba(255, 255, 255, 0.6) !important;
}

/* Separator between phone and selectors */
.el-top-bar-right .el-selectors {
    margin-left: 0;
}

/* Hide list bullets on selector li items */
.el-top-bar .el-selectors > li {
    list-style: none !important;
    display: inline-block !important;
}

/* Separator between lang and currency */
.el-top-bar .el-selectors > li + li {
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

/* Selectric dropdown items — fix rem inflation (1.6rem = 25.6px → 14px) */
.ui-select .selectric-items {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-family: var(--t-font-body), Arial, Helvetica, sans-serif !important;
}

.ui-select .selectric-items li {
    padding: 8px 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.ui-select .selectric-items .selectric-scroll {
    max-height: 300px !important;
}


/* ==========================================================================
   Header Overrides
   ========================================================================== */
.header {
    background-color: var(--t-bg-surface);
    position: sticky;
    top: 0;
    z-index: 100;
}

.hd__sticky {
    border-bottom: 1px solid var(--t-border);
    transition: box-shadow var(--t-transition-normal);
}

.st-pin .hd__sticky {
    box-shadow: var(--t-shadow-md);
    border-bottom-color: transparent;
}

/* Hide old section 01 on desktop - replaced by el-top-bar.
   On mobile, section-01 provides the nav-toggle (hamburger) and nav-offcanvas. */
@media (min-width: 992px) {
    .hd__section--01 {
        display: none !important;
    }
}

/* Section 02 - Main header bar */
.hd__section--02 {
    background-color: var(--t-bg-surface) !important;
    padding: 0;
}

.hd__section--02 .container-fluid {
    height: var(--t-nav-height);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Logo */
.hd__logo {
    flex-shrink: 0;
}

.hd__logo img {
    height: 40px;
    width: auto;
}

/* Categories toggle — override app.min.css 1.6rem font and rem padding */
.hd__categories-toggle {
    border-radius: var(--t-radius-lg) !important;
    background-color: var(--t-bg-secondary) !important;
    border: 1px solid var(--t-border) !important;
    padding: 8px 16px !important;
    min-width: auto !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    transition: all var(--t-transition-fast);
}

.hd__categories-toggle:hover {
    border-color: var(--t-accent) !important;
    background-color: rgba(216, 58, 62, 0.05) !important;
}

.hd__categories-toggle-text {
    color: var(--t-primary) !important;
    font-family: var(--t-font-heading) !important;
    font-weight: 600;
    font-size: 0.9rem;
}

.hd__categories-toggle-icon svg {
    color: var(--t-accent) !important;
}

/* Search */
.hd__search {
    flex: 1;
    max-width: 420px;
}

.hd__search-offcanvas {
    border-radius: var(--t-radius-pill) !important;
    border: 1px solid var(--t-border) !important;
    background-color: var(--t-bg-secondary) !important;
    overflow: visible;
    transition: border-color var(--t-transition-fast);
}

.hd__search-offcanvas:focus-within {
    border-color: var(--t-accent) !important;
    box-shadow: 0 0 0 3px rgba(216, 58, 62, 0.1);
}

.hd__search-input {
    background: transparent !important;
    border: none !important;
    font-family: var(--t-font-body) !important;
    font-size: 0.9rem;
    color: var(--t-text-main);
}

.hd__search-input::placeholder {
    color: var(--t-text-muted);
}

.hd__search-btn {
    background: transparent !important;
    border: none !important;
    color: var(--t-text-muted);
}

.hd__search-btn:hover {
    color: var(--t-accent);
}

/* Search dropdown */
.hd__search-dropdown {
    border-radius: var(--t-radius-lg) !important;
    box-shadow: var(--t-shadow-lg) !important;
    border: 1px solid var(--t-border);
}

.hd__search-item {
    border-radius: var(--t-radius-md);
    transition: background-color var(--t-transition-fast);
}

.hd__search-item:hover {
    background-color: var(--t-bg-secondary);
}

.hd__search-item-title {
    color: var(--t-primary);
    font-weight: 600;
}

.hd__search-item-price {
    color: var(--t-accent);
    font-weight: 700;
    font-family: var(--t-font-heading);
}

/* Cart — override app.min.css 1.4rem font */
.hd__cart-toggle {
    font-family: var(--t-font-heading) !important;
    font-weight: 600;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    color: var(--t-primary);
    display: flex !important;
}

.hd__cart-toggle svg {
    color: var(--t-primary);
}

.hd__cart-toggle:hover,
.hd__cart-toggle:hover svg {
    color: var(--t-accent);
}

.hd__cart-toggle mark {
    background-color: var(--t-accent) !important;
    color: white !important;
    font-size: 0.65rem !important;
    font-weight: 700;
    min-width: 16px !important;
    height: 16px !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px !important;
    margin: -2px 0 0 6px !important;
    line-height: 1 !important;
}

.hd__cart-offcanvas {
    border-radius: var(--t-radius-xl) !important;
    box-shadow: var(--t-shadow-premium) !important;
    border: 1px solid var(--t-border);
}

/* Cart empty text — fix rem inflation (1.6rem = 25.6px → 16px) */
.hd__cart-empty {
    font-size: 16px !important;
    padding: 16px 24px !important;
}

.hd__cart-head {
    border-bottom: 1px solid var(--t-border);
}

.hd__cart-title {
    font-family: var(--t-font-heading) !important;
    font-weight: 700;
    color: var(--t-primary);
}

.hd__cart-item-title {
    font-weight: 600;
    color: var(--t-primary);
}

.hd__cart-item-price {
    color: var(--t-accent);
    font-weight: 700;
    font-family: var(--t-font-heading);
    font-size: 1rem;
}

.hd__cart-total {
    font-family: var(--t-font-heading);
    font-weight: 700;
    color: var(--t-primary);
    font-size: 1.4rem;
}
.hd__cart-total small {
    font-size: 1.3rem;
}
.ic-del {
    width: 1.5rem;
    height: 1.5rem;
}
.hd__cart-item {
    font-size: 1rem;
}

/* Categories offcanvas */
.hd__categories-offcanvas {
    box-shadow: var(--t-shadow-premium) !important;
    border-top: 1px solid var(--t-border);
    background: var(--t-bg-surface) !important;
}

.v-mobclr .hd__categories-offcanvas {
    background: var(--t-bg-surface) !important;
}

/* Categories sidebar — was 26.5rem (265px at 10px root, now 424px) */
.hd__categories-aside {
    flex: 0 0 265px !important;
    max-width: 265px !important;
    padding: 16px 16px 16px 0 !important;
}

/* Categories main content area — no scroll, only sidebar scrolls */
.hd__categories-main {
    padding: 24px 16px 24px 40px !important;
    overflow: hidden !important;
}

/* Categories menu font & spacing — was 1.6rem (16px at 10px) */
.hd__categories-menu {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    max-height: calc(100vh - 140px) !important;
}

.hd__categories-link,
.hd__categories-loadmore-link {
    padding: 10px 32px 10px 16px !important;
    min-height: 44px !important;
    font-size: 0.95rem !important;
}

.hd__categories-link svg.ic-ar-ct,
.hd__categories-loadmore-link svg.ic-ar-ct {
    width: 20px !important;
    height: 20px !important;
    right: 12px !important;
    margin: -10px 0 0 !important;
}

.hd__categories-title {
    font-family: var(--t-font-heading) !important;
    font-weight: 700;
    color: var(--t-primary);
    font-size: 1.25rem !important;
    margin: 0 0 16px !important;
}

/* Submenu/subcategory links */
.hd__categories-sublink {
    color: var(--t-text-main) !important;
    font-size: 0.95rem !important;
    padding: 8px 16px !important;
    transition: color var(--t-transition-fast);
}

.hd__categories-link {
    color: var(--t-text-main) !important;
    font-weight: 500;
    border-radius: var(--t-radius-md);
    transition: all var(--t-transition-fast);
}

.hd__categories-link:hover,
.hd__categories-link.st-dact {
    color: var(--t-accent) !important;
    background-color: rgba(216, 58, 62, 0.05);
}

.hd__categories-sublink:hover {
    color: var(--t-accent) !important;
}

.hd__categories-cards-link-title {
    font-weight: 600;
    color: var(--t-primary);
    font-size: 0.95rem !important;
}

/* Categories product cards — fix rem inflation (8rem=128px→80px, etc) */
.hd__categories-cards {
    margin: 0 -8px -16px !important;
}

.hd__categories-cards > li {
    padding: 0 8px 16px !important;
}

.hd__categories-cards-link {
    min-height: 80px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
}

.hd__categories-cards-link-image {
    width: 64px !important;
    height: 64px !important;
    margin: 0 16px 0 0 !important;
}

.hd__categories-cards-link-title {
    font-size: 0.875rem !important;
}

.hd__categories-cards-link-text {
    font-size: 0.8125rem !important;
}

/* Prevent scrollbar-related shifting in categories */
.hd__categories-aside {
    scrollbar-gutter: stable !important;
}

.hd__categories-main {
    scrollbar-gutter: stable !important;
    position: relative !important;
}

/* Categories dropdown — desktop is position:absolute, no padding needed */
@media (min-width: 992px) {
    .hd__categories-dropdown {
        padding: 0 !important;
    }
    .hd__categories-dropdown-body {
        padding: 16px !important;
    }
}

/* Categories dropdown (mobile deep nav) */
@media (max-width: 991px) {
    .hd__categories-dropdown {
        padding: 56px 0 0 !important;
    }
    .hd__categories-dropdown-head {
        height: 56px !important;
        padding: 0 16px !important;
    }
    .hd__categories-dropdown-body {
        padding: 16px !important;
    }
}

/* Categories close/back buttons */
.hd__categories-close,
.hd__categories-back {
    font-size: 0.95rem !important;
}

.hd__categories-close svg,
.hd__categories-back svg {
    width: 20px !important;
    height: 20px !important;
}

/* Mobile header controls */
.hd__control {
    background-color: var(--t-bg-surface) !important;
    border-top: 1px solid var(--t-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.hd__control-btn {
    color: var(--t-text-muted) !important;
    font-family: var(--t-font-body) !important;
    font-size: 0.75rem;
}

.hd__control-btn:hover,
.hd__control-btn.st-on {
    color: var(--t-accent) !important;
}

.hd__control-btn svg {
    color: inherit !important;
}

.hd__control-btn mark {
    background-color: var(--t-accent) !important;
}

/* Mobile nav offcanvas — dark theme like original */
.hd__nav-offcanvas {
    background-color: #242D33 !important;
    color: #fff !important;
}

.hd__nav-link {
    color: #fff !important;
    font-weight: 600;
    font-family: var(--t-font-body) !important;
}

.hd__nav-link:hover {
    color: var(--t-accent) !important;
}

.hd__nav-menu--useful > li:first-child {
    color: #fff !important;
    font-weight: 700;
}

.hd__nav-menu--useful .hd__nav-link {
    color: #8E9EA8 !important;
    font-weight: 400;
}

.hd__nav-menu--useful .hd__nav-link:hover {
    color: #fff !important;
}

.hd__nav-menu--additional li {
    color: #8E9EA8 !important;
}

.hd__nav-menu--additional img {
    filter: brightness(0) invert(0.7);
}

/* Language/currency selectors in mobile nav */

.hd__nav-menu--additional {
    color: var(--t-text-muted);
}

.hd__nav-menu--additional svg {
    color: var(--t-accent) !important;
}

/* Mobile nav — fix rem-inflated font sizes and paddings */
@media (max-width: 991px) {
    .hd__nav-menu {
        columns: unset !important;
        display: flex !important;
        flex-wrap: wrap !important;
        flex: 0 0 auto !important;
        gap: 0 16px !important;
        padding: 0 0 8px !important;
        margin: 0 !important;
    }

    .hd__nav-menu > li {
        display: block !important;
        flex: 0 0 calc(50% - 8px) !important;
        padding: 0 !important;
    }

    .hd__nav-link {
        font-size: 15px !important;
        line-height: 1.3 !important;
        padding: 12px 0 !important;
        display: block !important;
    }

    /* Useful info — visual separator + proper spacing */
    .hd__nav-menu--useful {
        flex: 0 0 auto !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        margin: 4px 0 0 !important;
        padding: 12px 0 12px !important;
        gap: 0 !important;
    }

    .hd__nav-menu--useful > li {
        padding: 0 0 0 16px !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .hd__nav-menu--useful > li:first-of-type {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .hd__nav-menu--useful > li:first-child {
        font-size: 11px !important;
        line-height: 1.3 !important;
        padding: 0 0 8px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        color: rgba(255,255,255,0.45) !important;
    }

    .hd__nav-menu--useful .hd__nav-link {
        font-size: 13px !important;
        line-height: 1.4 !important;
        padding: 10px 0 !important;
        display: block !important;
    }

    /* Additional items — aligned row */
    .hd__nav-menu--additional {
        padding: 8px 0 0 !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }

    .hd__nav-menu--additional li {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        min-height: 44px !important;
        padding: 0 0 4px !important;
    }

    .hd__nav-line {
        display: none !important;
    }
}

/* ==========================================================================
   Hero Section (main page)
   ========================================================================== */
.el-hero {
    position: relative;
    padding: 3rem 0 4rem;
    overflow: hidden;
    background: linear-gradient(135deg, var(--t-bg-secondary) 0%, var(--t-bg-main) 100%);
}

@media (min-width: 1024px) {
    .el-hero {
        padding: 4rem 0 6rem;
    }
}

.el-hero-title {
    margin-top: 0 !important;
}

.el-hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.el-hero-shapes .shape-1 {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background-color: rgba(216, 58, 62, 0.15);
    border-radius: 50%;
    filter: blur(80px);
}

.el-hero-shapes .shape-2 {
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background-color: rgba(216, 58, 62, 0.1);
    border-radius: 50%;
    filter: blur(80px);
}

.el-hero-container {
    position: relative;
    z-index: 1;
    max-width: var(--t-container-max);
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 768px) {
    .el-hero-container {
        padding: 0 2rem;
    }
}

@media (min-width: 1024px) {
    .el-hero-container {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.el-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--t-radius-pill);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--t-accent-hover);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.el-hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.el-hero-desc {
    font-size: 1.125rem;
    color: var(--t-text-muted);
    max-width: 540px;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.el-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.el-hero-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    border-top: 1px solid var(--t-border);
    padding-top: 1.5rem;
}

.el-hero-features .feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--t-primary);
}

.el-hero-features .feature-item i {
    color: var(--t-accent);
    font-size: 1.2rem;
}

/* Hero visual card */
.el-hero-visual {
    position: relative;
}

.el-glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--t-radius-xl);
    box-shadow: var(--t-shadow-lg);
}

.el-hero-card {
    padding: 2rem;
    position: relative;
    z-index: 2;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.el-hero-card .card-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--t-warning);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: var(--t-radius-pill);
}

.el-hero-card .card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.el-hero-card .card-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--t-radius-lg);
}

.el-hero-card .pill-visual {
    width: 140px;
    height: 80px;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--t-font-heading);
    font-weight: 800;
    color: var(--t-accent-hover);
    box-shadow: var(--t-shadow-md), inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.el-hero-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.el-hero-card p {
    color: var(--t-text-muted);
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.drift-animing-card {
    position: absolute;
    bottom: -3rem;
    right: 1.5rem;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 3;
    animation: drift-anim 6s ease-in-out infinite;
    background: white;
    border-radius: var(--t-radius-xl);
    box-shadow: var(--t-shadow-lg);
}

.drift-animing-card strong {
    display: block;
    color: var(--t-primary);
    font-size: 0.95rem;
}

.drift-animing-card span {
    font-size: 0.8rem;
    color: var(--t-text-muted);
}

@keyframes drift-anim {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@media (max-width: 640px) {
    .drift-animing-card {
        top: auto;
        bottom: 1rem;
        right: 1rem;
        transform: scale(0.8);
        transform-origin: bottom right;
        padding: 0.75rem 1rem;
        animation: none;
    }
}

/* ==========================================================================
   Trust Band
   ========================================================================== */
.el-trust-band {
    background-color: var(--t-primary);
    padding: 2rem 0;
    color: white;
}

.el-trust-band-inner {
    max-width: var(--t-container-max);
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .el-trust-band-inner {
        padding: 0 2rem;
    }
}

.el-trust-title {
    text-align: center;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

.el-trust-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .el-trust-logos {
        gap: 3rem;
    }
}

.el-trust-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
}

.el-trust-logo i {
    font-size: 1.5rem;
    color: var(--t-accent);
}

/* ==========================================================================
   Benefits Section (override existing)
   ========================================================================== */
.benefits {
    display: block !important;
    padding: 4rem 0;
    background-color: var(--t-bg-surface);
}

.adv__title {
    font-family: var(--t-font-heading) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    color: var(--t-primary);
    text-align: center;
    margin-bottom: 2.5rem;
}

.adv__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.adv__grid > li {
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .adv__grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }
}

.adv__item {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-xl) !important;
    padding: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    transition: all var(--t-transition-normal);
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.adv__item:hover {
    box-shadow: var(--t-shadow-lg);
    border-color: var(--t-accent);
    transform: translateY(-4px);
}

.adv__item-icon-wrap {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: rgba(216, 58, 62, 0.08);
    border-radius: var(--t-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.adv__item-icon-wrap i {
    font-size: 1.75rem;
    color: var(--t-accent);
}

.adv__item:hover .adv__item-icon-wrap {
    background: rgba(216, 58, 62, 0.15);
}

.adv__item-icon {
    margin: 0 auto 1rem;
}

.adv__item-icon svg {
    width: 48px;
    height: 48px;
}

.adv__item-title {
    font-family: var(--t-font-heading) !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    color: var(--t-primary);
    margin-bottom: 0.35rem;
    display: block !important;
    width: 100%;
}

.adv__item-text {
    font-size: 0.95rem !important;
    color: var(--t-text-muted);
    display: block !important;
    width: 100%;
    margin: 0;
}

/* ==========================================================================
   Products Section (override existing)
   ========================================================================== */
.el-products-section {
    padding: 4rem 0;
    background-color: var(--t-bg-surface);
}

.el-section-header {
    margin-bottom: 2.5rem;
}

.el-section-title {
    font-family: var(--t-font-heading) !important;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    color: var(--t-primary);
    margin-bottom: 0.75rem;
}

.el-section-desc {
    font-size: 1.05rem;
    color: var(--t-text-muted);
    max-width: 600px;
    margin: 0 auto;
}

.products {
    padding: 4rem 0;
    background-color: var(--t-bg-main);
}

.pf__title {
    font-family: var(--t-font-heading) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    color: var(--t-primary);
    text-align: center;
    margin-bottom: 2.5rem;
}

/* Product cards from BestsellersWidget */
/* CRITICAL: app.min.css sets .pf__grid as display:flex with
   > li { flex: 0 0 50%; max-width: 50%; padding: 0 0.8rem 1.6rem }.
   Switching to display:grid alone is not enough — the li items retain their
   flex sizing properties which collapse them inside grid cells.
   Must reset ALL li box-model properties so grid takes full control. */
.pf__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
    margin: 0 !important;         /* undo app.min.css negative margin */
    padding: 0 !important;
    list-style: none !important;
}

.pf__grid > li {
    /* Reset every flex-child property app.min.css applies */
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;        /* gap on the grid handles spacing */
    margin: 0 !important;
    display: block !important;    /* let the grid track size it */
    box-sizing: border-box !important;
    min-width: 0 !important;      /* allow shrinking below content size */
}

/* The card anchor must fill the li/grid cell completely */
.pf__grid > li > .el-product-card {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    min-width: 0 !important;
}

@media (min-width: 768px) {
    .pf__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .pf__grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Product Card */
.el-product-card {
    display: flex !important;
    flex-direction: column;
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-xl) !important;
    padding: 1.25rem !important;
    transition: all var(--t-transition-normal);
    position: relative;
    text-decoration: none !important;
    color: inherit !important;
}

.el-product-card:hover {
    box-shadow: var(--t-shadow-lg);
    border-color: var(--t-accent);
    transform: translateY(-5px);
}

/* Hide legacy badges on product pages */
.sku__badges {
    display: none !important;
}

.el-product-labels {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
}

.el-product-labels .cat__badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: var(--t-radius-sm);
    letter-spacing: 0.03em;
}

.el-product-image {
    height: 160px;
    border-radius: var(--t-radius-md);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.el-product-image img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
    transition: transform var(--t-transition-normal);
}

.el-product-card:hover .el-product-image img {
    transform: scale(1.05);
}

.el-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.el-product-brand {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--t-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}

.el-product-name {
    font-family: var(--t-font-heading) !important;
    font-size: 1.15rem !important;
    font-weight: 700;
    color: var(--t-primary) !important;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.el-product-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--t-border-light);
    margin-bottom: 0.75rem;
}

.el-meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--t-accent);
    font-weight: 500;
}

.el-meta-item i {
    font-size: 0.9rem;
}

.el-meta-item--accent {
    color: #d97706;
    background: rgba(217, 119, 6, 0.1);
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Check Price frame on product page quantity selector */
.selection-group--check-price {
    border: 1px solid var(--t-border, #e2e8f0);
    border-radius: 10px;
    padding: 1rem;
}

.check-price-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--t-text-muted, #94a3b8);
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* Category page sidebar & nav fixes */
@media (min-width: 992px) {
    .page__sidebar {
        width: 18rem;
    }

    .nav-aside {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .nav-aside__link {
        padding: 0.6rem 1rem;
    }

    .nav-aside__toggle {
        padding: 0.6rem 3rem 0.6rem 1rem;
        font-size: 0.9rem;
    }
}

/* Test pack product list fixes (rem correction for 16px root) */
.cat__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cat__list > li {
    margin-bottom: 1.5rem;
}

.cat__horizontal-title {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

.cat__horizontal-info {
    font-size: 0.9rem;
    line-height: 1.5;
}

.cat__horizontal-info li {
    padding: 0.2rem 0;
}

.cat__horizontal-price {
    font-size: 1.35rem;
}

.cat__horizontal-price ins span,
.cat__horizontal-price del span {
    font-size: inherit;
}

.cat__horizontal-instock {
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.cat__horizontal-action .ui-btn {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

.cat__horizontal-action .ui-number {
    transform: scale(0.85);
    transform-origin: center;
}

@media (min-width: 1200px) {
    .cat__horizontal .row {
        align-items: center;
    }

    .cat__horizontal .row > .col-md-6.col-xl:first-child {
        flex: 0 0 220px;
        max-width: 220px;
    }
}

.el-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    overflow: hidden;
}

.el-product-price {
    display: flex;
    flex-direction: column;
}

.el-price-from {
    font-size: 0.75rem;
    color: var(--t-text-muted);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.el-price-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--t-font-heading);
    color: var(--t-primary);
    line-height: 1.2;
}

.el-product-btn {
    padding: 0.4rem 0.85rem !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    border-radius: var(--t-radius-pill) !important;
    min-height: unset !important;
    height: auto !important;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .el-product-card {
        padding: 0.75rem !important;
    }

    .el-product-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .el-product-btn {
        width: 100% !important;
        text-align: center !important;
    }

    .el-price-value {
        font-size: 1.25rem !important;
    }
}

/* Hide old product card inner elements when inside new card */
.el-product-card .cat__item-image,
.el-product-card .cat__item-title,
.el-product-card .cat__item-text,
.el-product-card .cat__item-price,
.el-product-card .cat__item-instock,
.el-product-card .cat__item-action {
    display: none !important;
}

/* ==========================================================================
   How to Buy Section (override existing)
   ========================================================================== */
.how-buy {
    padding: 4rem 0;
    background-color: var(--t-bg-surface);
}

.how-buy__steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.how-buy__steps > li {
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .how-buy__steps {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    .how-buy__steps {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

.how-buy__steps-item {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--t-radius-xl) !important;
    transition: all var(--t-transition-normal);
}

.how-buy__steps-item:hover {
    box-shadow: var(--t-shadow-md);
    border-color: var(--t-accent);
}

.how-buy__steps-item-icon {
    margin: 0 auto 1rem;
}

.how-buy__steps-item-icon img {
    width: 56px;
    height: 56px;
}

.how-buy__steps-item-title {
    font-family: var(--t-font-heading) !important;
    font-weight: 700 !important;
    color: var(--t-primary);
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem;
}

.how-buy__steps-item-text {
    font-size: 0.95rem !important;
    color: var(--t-text-muted);
    line-height: 1.6;
}

.how-buy__benefits {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.how-buy__benefits-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: rgba(216, 58, 62, 0.05);
    border-radius: var(--t-radius-pill);
    border: 1px solid rgba(216, 58, 62, 0.1);
}

.how-buy__benefits-item-icon {
    flex-shrink: 0;
}

.how-buy__benefits-item-icon img {
    width: 32px;
    height: 32px;
}

.how-buy__benefits-item-text {
    font-weight: 600;
    color: var(--t-primary);
    font-size: 0.95rem;
}

.how-buy__wysiwyg {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--t-bg-secondary);
    border-radius: var(--t-radius-xl);
}

.how-buy__wysiwyg h3 {
    font-family: var(--t-font-heading) !important;
    color: var(--t-primary);
    margin-bottom: 0.75rem;
}

.how-buy__wysiwyg p {
    color: var(--t-text-muted);
    font-size: 0.95rem;
}

/* ==========================================================================
   Info / Why Choose Us (new section for main page)
   ========================================================================== */
.el-info-section {
    padding: 5rem 0;
    background: var(--t-bg-main);
}

.el-info-inner {
    max-width: var(--t-container-max);
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 768px) {
    .el-info-inner {
        padding: 0 2rem;
    }
}

@media (min-width: 1024px) {
    .el-info-inner {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

.el-info-content h2 {
    margin-bottom: 1.5rem;
    font-size: clamp(2rem, 4vw, 3rem) !important;
}

.el-info-content>p {
    color: var(--t-text-muted);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.el-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.el-feature-list li {
    display: flex;
    gap: 1rem;
}

.el-feature-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    background-color: rgba(216, 58, 62, 0.1);
    color: var(--t-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.el-feature-list li strong {
    display: block;
    color: var(--t-primary);
    font-size: 1.1rem;
    font-family: var(--t-font-heading);
    margin-bottom: 0.25rem;
}

.el-feature-list li p {
    font-size: 0.9rem;
    color: var(--t-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Certificate mockup */
.el-certificate {
    padding: 3rem;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    position: relative;
    overflow: hidden;
}

.el-certificate i.ph-fill {
    font-size: 4rem;
    color: var(--t-primary);
    margin-bottom: 1rem;
    display: block;
}

.el-certificate h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.el-certificate p {
    font-size: 0.9rem;
    color: var(--t-text-muted);
    margin-bottom: 0;
}

.el-cert-stamp {
    position: absolute;
    bottom: -1rem;
    right: -1rem;
    width: 100px;
    height: 100px;
    border: 4px solid var(--t-accent);
    color: var(--t-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
    text-transform: uppercase;
    transform: rotate(-15deg);
    opacity: 0.3;
}

/* ==========================================================================
   SEO Text Section (override existing .txt)
   ========================================================================== */
.txt {
    padding: 3rem 0;
    background: var(--t-bg-main);
}

.txt__wysiwyg {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1rem !important;
}

.txt__wysiwyg h1 {
    font-family: var(--t-font-heading) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    color: var(--t-primary);
    margin-bottom: 1.5rem;
}

.txt__wysiwyg p {
    color: var(--t-text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
}

/* ==========================================================================
   Blog Featured (override existing)
   ========================================================================== */
.blog-featured {
    padding: 4rem 0;
    background: var(--t-bg-surface);
}

.bf__title {
    font-family: var(--t-font-heading) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    color: var(--t-primary);
}

.ui-link--dark {
    color: var(--t-primary) !important;
    font-weight: 600;
}

.ui-link--dark:hover {
    color: var(--t-accent) !important;
}

.ui-link--dark svg {
    color: var(--t-accent) !important;
}

.art__item {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-xl) !important;
    overflow: hidden;
    transition: all var(--t-transition-normal);
}

.art__item:hover {
    box-shadow: var(--t-shadow-lg);
    transform: translateY(-4px);
    border-color: var(--t-accent);
}

.art__item-title {
    font-family: var(--t-font-heading) !important;
    font-size: 1.25rem !important;
    color: var(--t-primary);
    padding: 1rem;
}

/* ==========================================================================
   Customers / Reviews (override existing)
   ========================================================================== */
.customers {
    padding: 4rem 0;
    background: var(--t-bg-surface);
}

.rev__title {
    font-family: var(--t-font-heading) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    color: var(--t-primary);
    text-align: center;
    margin-bottom: 2rem;
}

.rev__item {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-xl) !important;
    padding: 1.5rem !important;
    transition: all var(--t-transition-normal);
}

.rev__item:hover {
    box-shadow: var(--t-shadow-md);
}

.rev__item-text {
    font-size: 0.95rem !important;
    color: var(--t-text-main);
    line-height: 1.6;
}

.rev__item-author span {
    font-weight: 600;
    color: var(--t-primary);
}

/* ==========================================================================
   Customer Feedback / Reviews
   ========================================================================== */
.rev__item {
    padding-bottom: 3.5rem !important;
}

.rev__item-letters {
    width: 3rem !important;
    height: 3rem !important;
    font-size: 1rem !important;
    bottom: -1.5rem !important;
    margin-left: -1.5rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 0 0 4px #fff !important;
}

/* ==========================================================================
   Footer (completely restyled)
   ========================================================================== */
.footer {
    background-color: var(--t-primary) !important;
    color: rgba(255, 255, 255, 0.7);
}

/* Section 01 - Logotypes band */
.ft__section--01 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2rem 0;
}

.ft__logotypes-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 3rem;
    align-items: center;
}

.ft__logotypes-menu li {
    opacity: 0.5;
    transition: opacity var(--t-transition-fast);
    flex-shrink: 0;
}

.ft__logotypes-menu li:hover {
    opacity: 0.8;
}

.ft__logotypes-menu img {
    height: 32px !important;
    width: auto !important;
    max-width: 100px !important;
    display: block;
    filter: brightness(0) invert(1) opacity(0.6);
}

/* Section 02 - Main footer grid */
.ft__section--02 {
    padding: 3rem 0;
    background-color: transparent !important;
}

.ft__group-title {
    color: white !important;
    font-family: var(--t-font-heading) !important;
    font-size: 1.1rem !important;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: block;
}

.ft__group-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    columns: unset !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ft__group-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: block !important;
    width: 100% !important;
}

.ft__group-link {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.9rem !important;
    transition: all var(--t-transition-fast);
    line-height: 1.4 !important;
}

.ft__group-link:hover {
    color: white !important;
    padding-left: 0.25rem;
}

.ft__group-logotypes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    margin: 0 0 1.5rem !important;
    padding: 0 !important;
}

.ft__group-logotypes > li {
    flex: 0 0 auto !important;
    max-width: none !important;
    padding: 0.3rem 0.5rem !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--t-radius-md);
    min-width: 64px;
}

.ft__group-logotypes img {
    height: 28px !important;
    width: auto !important;
    max-width: 64px !important;
    display: block !important;
    filter: brightness(0) invert(1) opacity(0.8);
}

.ft__group-list li {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* Section 03 - Bottom nav */
.ft__section--03 {
    background-color: rgba(0, 0, 0, 0.15) !important;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ft__section--03 .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.ft__section--03 .row {
    display: flex !important;
    align-items: center !important;
    width: 100%;
}

.ft__logo img {
    height: 36px;
    width: auto;
    opacity: 0.8;
}

.ft__section--03 .row {
    align-items: center !important;
}

.ft__logo {
    margin: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center;
}

.ft__logo img {
    height: 36px !important;
    width: auto !important;
}

.ft__nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    columns: unset !important;
    gap: 0 2rem !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

.ft__nav-menu li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

@media (max-width: 991px) {
    .ft__section--03 .container-fluid {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }
    .ft__section--03 .row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    .ft__section--03 .col-lg,
    .ft__section--03 .col-lg-auto {
        width: auto !important;
        flex: none !important;
        padding: 0 !important;
    }
    .ft__nav {
        margin: 0 !important;
        padding: 0 !important;
    }
    .ft__nav-menu {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.15rem 1.25rem !important;
        font-size: 0.875rem !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
        columns: unset !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .ft__nav-menu > li {
        display: inline !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
    }
    .ft__nav-link {
        padding: 0.2rem 0 !important;
    }
}

.ft__nav-link {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.85rem !important;
    transition: color var(--t-transition-fast);
}

.ft__nav-link:hover {
    color: white !important;
}

/* Section 04 - Copyright */
.ft__section--04 {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1.25rem 0;
    background-color: transparent !important;
}

.ft__copyright {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    margin: 0;
}

.ft__section--05 {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1.25rem 0;
}

.ft__disclaimer {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 0;
}

.ft__disclaimer i {
    margin-right: 0.3rem;
    vertical-align: -1px;
}

/* ==========================================================================
   Team / Pharmacist Page
   ========================================================================== */

.team-intro {
    max-width: 720px;
    margin: 0 0 2.5rem;
    color: var(--t-text-secondary);
    font-size: 1rem;
    line-height: 1.7;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.team-card {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: box-shadow var(--t-transition-fast);
}

.team-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.team-card__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1.25rem;
    display: block;
    border: 3px solid var(--t-accent);
}

.team-card__photo--placeholder {
    background: linear-gradient(135deg, var(--t-accent), var(--t-accent-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    border: 3px solid var(--t-accent);
}

.team-card__name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--t-text-primary);
    margin: 0 0 0.25rem;
}

.team-card__title {
    font-size: 0.85rem;
    color: var(--t-accent);
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.team-card__license {
    display: inline-block;
    background: rgba(13, 150, 104, 0.08);
    color: var(--t-accent);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    margin: 0 0 1rem;
}

.team-card__bio {
    font-size: 0.875rem;
    color: var(--t-text-secondary);
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

.team-card__credentials {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    text-align: left;
}

.team-card__credentials li {
    font-size: 0.8rem;
    color: var(--t-text-secondary);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--t-border);
}

.team-card__credentials li:last-child {
    border-bottom: none;
}

.team-card__credentials li i {
    color: var(--t-accent);
    margin-right: 0.4rem;
}

.team-notice {
    background: rgba(13, 150, 104, 0.05);
    border: 1px solid rgba(13, 150, 104, 0.15);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    margin: 0;
}

.team-notice p {
    font-size: 0.9rem;
    color: var(--t-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.team-notice p i {
    color: var(--t-accent);
    margin-right: 0.3rem;
}

/* Homepage Pharmacists Section */
.el-pharmacists-section {
    padding: 4rem 0;
    background: var(--t-bg-surface);
}

.el-pharmacists-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
}

@media (min-width: 600px) {
    .el-pharmacists-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.el-pharmacist-card {
    text-align: center;
    background: var(--t-bg-main);
    border: 1px solid var(--t-border);
    border-radius: 12px;
    padding: 2rem 1.5rem;
}

.el-pharmacist-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--t-accent);
    margin-bottom: 1rem;
}

.el-pharmacist-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--t-primary);
    margin: 0 0 0.25rem;
}

.el-pharmacist-title {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--t-accent);
    background: rgba(13, 150, 104, 0.08);
    padding: 0.2rem 0.75rem;
    border-radius: 20px;
    margin-bottom: 0.75rem;
}

.el-pharmacist-bio {
    font-size: 0.85rem;
    color: var(--t-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Contacts Page Layout */
.contacts__layout {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .contacts__layout {
        flex-direction: row;
        gap: 3rem;
    }

    .contacts__info {
        flex: 0 0 340px;
    }

    .contacts__form {
        flex: 1;
    }
}

.contacts__intro {
    font-size: 1rem;
    color: var(--t-text-secondary);
    line-height: 1.7;
    margin: 0 0 2rem;
}

.contacts__details {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contacts__detail-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.contacts__detail-item > i {
    font-size: 1.25rem;
    color: var(--t-accent);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.contacts__detail-item strong {
    display: block;
    font-size: 0.9rem;
    color: var(--t-text-primary);
    margin-bottom: 0.15rem;
}

.contacts__detail-item span {
    font-size: 0.85rem;
    color: var(--t-text-secondary);
}

/* Medical Questionnaire Modal */
.phu-quiz-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.phu-quiz-overlay.is-open {
    display: flex;
}

.phu-quiz-modal {
    background: white;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    position: relative;
    animation: phu-fadeIn 0.2s ease;
}

.phu-quiz-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--t-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
}

.phu-quiz-header {
    padding: 1.5rem 2rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--t-primary);
    border-bottom: 1px solid var(--t-border, #e2e8f0);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.phu-quiz-header i {
    font-size: 1.25rem;
    color: var(--t-accent);
}

.phu-quiz-body {
    padding: 1.5rem 2rem;
}

.phu-quiz-question {
    font-size: 0.95rem;
    color: var(--t-text-primary);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.phu-quiz-progress {
    background: var(--t-border, #e2e8f0);
    border-radius: 4px;
    height: 4px;
    overflow: hidden;
}

.phu-quiz-progress span {
    display: block;
    height: 100%;
    background: var(--t-accent);
    border-radius: 4px;
    transition: width 0.3s;
}

.phu-quiz-fail {
    font-size: 0.95rem;
    color: #dc2626;
    line-height: 1.6;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.phu-quiz-fail i {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.phu-quiz-footer {
    padding: 0 2rem 1.5rem;
    display: flex;
    gap: 0.75rem;
}

.phu-quiz-btn {
    flex: 1;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.phu-quiz-btn:active {
    transform: scale(0.98);
}

.phu-quiz-btn--yes {
    background: var(--t-accent);
    color: white;
}

.phu-quiz-btn--yes:hover {
    background: var(--t-accent-hover, #0b8457);
}

.phu-quiz-btn--no {
    background: var(--t-bg-surface, #f1f5f9);
    color: var(--t-text-primary);
}

.phu-quiz-btn--no:hover {
    background: #e2e8f0;
}

.phu-quiz-btn--close {
    background: var(--t-bg-surface, #f1f5f9);
    color: var(--t-text-primary);
}

/* Reviewed By badge */
.reviewed-by {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-top: 1rem;
    background: rgba(13, 150, 104, 0.04);
    border: 1px solid rgba(13, 150, 104, 0.12);
    border-radius: 10px;
}

.reviewed-by__photo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.reviewed-by__info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.reviewed-by__label {
    font-size: 0.7rem;
    color: var(--t-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.reviewed-by__name {
    font-size: 0.85rem;
    color: var(--t-text-primary);
}

.reviewed-by__title {
    font-size: 0.75rem;
    color: var(--t-accent);
    font-weight: 500;
}

.ft__ssl {
    max-width: 5rem !important;
}

.ft__ssl img {
    opacity: 0.5;
    width: 100% !important;
    height: auto !important;
}

/* ==========================================================================
   Cookie Consent (override existing)
   ========================================================================== */
.cookies {
    background-color: var(--t-bg-surface) !important;
    border-top: 1px solid var(--t-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}
.is-cookies-accept .cookies {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
}

/* On mobile, raise cookies banner above the bottom bar so it doesn't block clicks */
@media (max-width: 991px) {
    .cookies {
        bottom: calc(56px + var(--safe-area-inset-bottom) + 16px) !important;
    }
}

.cookies__desc strong {
    color: var(--t-primary);
    font-family: var(--t-font-heading);
}

.cookies__desc p {
    color: var(--t-text-muted);
    font-size: 0.9rem;
}

/* ==========================================================================
   Scroll to Top (override existing)
   ========================================================================== */
.scrolltop {
    background-color: var(--t-accent) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    box-shadow: var(--t-shadow-md);
    transition: all var(--t-transition-normal);
}

.scrolltop:hover {
    background-color: var(--t-accent-hover) !important;
    transform: translateY(-3px);
    box-shadow: var(--t-shadow-lg);
}

/* ==========================================================================
   Reveal on Scroll Animation
   ========================================================================== */
.el-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.el-reveal.st-vis {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Pagination (keep existing fix)
   ========================================================================== */
.pagination__menu .hidden {
    display: none !important;
}

/* ==========================================================================
   General Overrides for inner pages
   ========================================================================== */
.page__title {
    font-family: var(--t-font-heading) !important;
    color: var(--t-primary);
}

/* SKU page */
.sku__title {
    font-family: var(--t-font-heading) !important;
}

.sku__price ins {
    color: var(--t-primary);
    font-family: var(--t-font-heading);
}

/* ==========================================================================
   Product Page — Redesign (matching demo/product.html)
   ========================================================================== */

/* Glass panel effect */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--t-radius-xl);
    box-shadow: var(--t-shadow-lg);
}

/* ---------- Breadcrumbs: fix rem scaling ---------- */
.breadcrumbs {
    font-size: 0.8125rem !important;
    padding: 0.75rem 0 0.25rem !important;
    line-height: 1.5 !important;
}
.breadcrumbs__menu > li {
    padding-right: 1.125rem !important;
}
.breadcrumbs__menu > li:after {
    right: 0.5rem !important;
    width: 4px !important;
    height: 4px !important;
}
.breadcrumbs__link {
    font-size: 0.8125rem !important;
}

/* Product 2-column grid layout */
.product-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 0;
}

@media (min-width: 992px) {
    .product-layout {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

/* Product Gallery (Left Column) */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    overflow: visible;
    padding: 0 12px;
    margin: 0 -12px;
}

.product-gallery .swiper-container {
    overflow: hidden;
}

.gallery-main {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(145deg, var(--t-bg-surface) 0%, var(--t-bg-secondary) 100%);
    border-radius: var(--t-radius-2xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: visible;
}

.gallery-main .swiper-container {
    width: 100%;
    overflow: hidden;
}

/* Safety Banner */
.safety-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background-color: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--t-radius-xl);
    color: var(--t-text-main);
    font-size: 0.9rem;
    line-height: 1.45;
}

.safety-banner i {
    font-size: 1.5rem;
    color: var(--t-warning);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.safety-banner strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #92400e;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Product Info Panel (Right Column) */
.product-info-panel {
    display: flex;
    flex-direction: column;
    min-width: 0; /* prevent right column overflowing its 1fr grid cell */
}

.product-header {
    margin-bottom: 1.5rem;
}

.product-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

h1.product-title,
.product-title {
    margin: 0 !important;
    font-size: 2rem !important;
    font-family: var(--t-font-heading) !important;
    color: var(--t-primary) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
}

/* Labels / Badges */
.label {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.875rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--t-radius-pill);
    white-space: nowrap;
}

.label-discreet {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* Rating */
.product-review-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.product-review-summary .stars {
    display: flex;
    gap: 0.15rem;
    color: var(--t-warning);
}

.product-review-summary .stars svg {
    width: 18px !important;
    height: 18px !important;
}

.review-count {
    font-size: 0.9rem;
    color: var(--t-text-muted);
}

.review-count a {
    color: var(--t-text-muted);
    text-decoration: none;
}

.review-count a:hover {
    color: var(--t-accent);
}

/* Short description */
.product-description-short {
    font-size: 1rem;
    color: var(--t-text-muted);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Selection Form */
.product-selection-form {
    margin-bottom: 0;
}

.selection-group {
    margin-bottom: 1.75rem;
}

.selection-label {
    display: block;
    font-weight: 600;
    font-family: var(--t-font-heading);
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: var(--t-primary);
}

.selection-label span {
    color: var(--t-text-muted);
    font-weight: 400;
    font-size: 0.85rem;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
}

.options-grid.dosage-options {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

.options-grid.quantity-options {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

/* Dosage tab buttons styled as radio cards */
.custom-radio-btn {
    cursor: pointer;
    position: relative;
    border: 2px solid var(--t-border);
    border-radius: var(--t-radius-xl);
    padding: 0.875rem 0.75rem;
    text-align: center;
    transition: all var(--t-transition-fast);
    background-color: var(--t-bg-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--t-font-heading);
    height: auto !important;
    line-height: normal !important;
}

.custom-radio-btn:hover {
    border-color: var(--t-accent);
    background-color: var(--t-bg-secondary);
}

.custom-radio-btn.st-on,
.custom-radio-btn.is-active {
    border-color: var(--t-accent);
    background-color: rgba(216, 58, 62, 0.05);
    box-shadow: 0 4px 14px rgba(216, 58, 62, 0.15);
    color: var(--t-accent);
}

.custom-radio-btn .val {
    font-size: 1.1rem;
    font-weight: 700;
    color: inherit;
}

.custom-radio-btn .desc {
    font-size: 0.8rem;
    color: var(--t-text-muted);
    margin-top: 0.2rem;
}

/* Quantity radio cards */
.custom-radio {
    display: block;
    
    cursor: pointer;
    position: relative;
    
}

.custom-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.radio-content {
    position: relative;
    border: 2px solid var(--t-border);
    border-radius: var(--t-radius-xl);
    padding: 0.875rem 0.5rem;
    text-align: center;
    transition: all var(--t-transition-fast);
    background-color: var(--t-bg-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 72px;
}

.custom-radio:hover .radio-content {
    border-color: var(--t-accent);
    background-color: var(--t-bg-secondary);
}

.custom-radio input:checked ~ .radio-content,
.custom-radio.is-checked .radio-content {
    border-color: var(--t-accent) !important;
    background-color: rgba(216, 58, 62, 0.05) !important;
    box-shadow: 0 4px 14px rgba(216, 58, 62, 0.15) !important;
}
/* Remove double border on is-checked label */
.custom-radio.is-checked {
    border: none !important;
    background: transparent !important;
}

.radio-content .val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--t-primary);
    font-family: var(--t-font-heading);
    line-height: 1.2;
}

.radio-content .price-calc {
    font-size: 0.8rem;
    color: var(--t-text-muted);
    margin-top: 0.15rem;
}

.save-badge {
    position: absolute;
    top: -9px;
    right: -4px;
    background: var(--t-accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--t-radius-pill);
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Hidden native select */
.phu-hidden-select {
    display: none !important;
}

/* Action Box */
.product-action-box {
    padding: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    border: 2px solid var(--t-border-light);
    background: var(--t-bg-surface);
}

.price-display {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--t-border);
    padding-bottom: 1rem;
}

.price-main {
    line-height: 1;
}

.price-main .sku__price {
    margin: 0;
}

.price-main .sku__price ins {
    font-size: 2.25rem;
    font-weight: 700;
    text-decoration: none;
}

.price-main .sku__price del {
    font-size: 1.25rem;
    color: var(--t-text-muted);
    margin-left: 0.5rem;
}

.price-shipping {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--t-accent);
    font-weight: 600;
    font-size: 0.85rem;
}

.price-shipping i {
    font-size: 1.1rem;
}

/* Action button */
.action-buttons {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.action-buttons .ui-number--48 {
    width: 100px !important;
    height: 42px !important;
    padding: 0 25px !important;
    background: var(--t-bg-secondary);
    border-radius: var(--t-radius-lg);
    border: 1px solid var(--t-border);
    flex: 0 0 100px;
}
.action-buttons .ui-number--48 .ui-number__minus,
.action-buttons .ui-number--48 .ui-number__plus {
    height: 42px !important;
    width: 36px !important;
    color: var(--t-text-muted);
}
.action-buttons .ui-number--48 .ui-number__minus:hover,
.action-buttons .ui-number--48 .ui-number__plus:hover {
    color: var(--t-primary);
}
.action-buttons .ui-number--48 .ui-number__input {
    font-size: 0.9375rem !important;
    line-height: 42px !important;
    height: 42px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    font-family: var(--t-font-heading);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: var(--t-radius-lg);
    font-family: var(--t-font-heading);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-transition-fast);
    text-decoration: none;
    line-height: normal;
}

.btn-primary {
    background-color: var(--t-accent);
    color: white;
}

.btn-primary:hover {
    background-color: var(--t-accent-hover);
    color: white;
    box-shadow: var(--t-shadow-md);
}

.btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: 1.05rem;
}

.action-btn-full {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 1.05rem;
    min-height: 42px;
}

.action-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--t-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

/* Trust List */
.product-trust-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.product-trust-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--t-text-main);
}

.product-trust-list i {
    font-size: 1.35rem;
    margin-top: -0.1rem;
    flex-shrink: 0;
}

/* Product Tabs Section */
.product-tabs-section {
    padding: 3rem 0;
    background-color: var(--t-bg-secondary);
}

/* ---------- Sidebar: fix rem-based sizes (base theme uses 10px root) ---------- */
.details__sidebar {
    width: 260px !important;
    flex: 0 0 260px !important;
    margin-right: 1.5rem !important;
}

.details__categories-title {
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
    padding: 0.7rem 1rem !important;
    font-family: var(--t-font-heading) !important;
    background: var(--t-primary) !important;
    border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0 !important;
}

.details__categories-menu {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    border: 1px solid var(--t-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--t-radius-lg) var(--t-radius-lg) !important;
}

.details__categories-link {
    font-size: 0.875rem !important;
    padding: 0.55rem 1rem !important;
    line-height: 1.4 !important;
    color: var(--t-text-main) !important;
    transition: all 150ms ease !important;
}

.details__categories-link:hover {
    background: var(--t-bg-secondary) !important;
    color: var(--t-accent) !important;
}

.details__categories-link.is-active,
.details__categories-link.st-on {
    background: rgba(216, 58, 62, 0.06) !important;
    color: var(--t-accent) !important;
    font-weight: 600 !important;
}

/* ---------- Description / testimonials body text ---------- */
.details__content .article.ui-wysiwyg,
.tab-pane .article.ui-wysiwyg {
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: var(--t-text-main) !important;
}

.details__content .article.ui-wysiwyg h1,
.tab-pane .article.ui-wysiwyg h1 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    font-family: var(--t-font-heading) !important;
    color: var(--t-primary) !important;
    margin: 2rem 0 0.75rem !important;
    line-height: 1.3 !important;
}

.details__content .article.ui-wysiwyg h2,
.tab-pane .article.ui-wysiwyg h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    font-family: var(--t-font-heading) !important;
    color: var(--t-primary) !important;
    margin: 1.75rem 0 0.625rem !important;
    line-height: 1.35 !important;
}

.details__content .article.ui-wysiwyg h3,
.tab-pane .article.ui-wysiwyg h3 {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    font-family: var(--t-font-heading) !important;
    color: var(--t-primary) !important;
    margin: 1.5rem 0 0.5rem !important;
    line-height: 1.4 !important;
}

.details__content .article.ui-wysiwyg h1:first-child,
.details__content .article.ui-wysiwyg h2:first-child,
.details__content .article.ui-wysiwyg h3:first-child,
.tab-pane .article.ui-wysiwyg h1:first-child,
.tab-pane .article.ui-wysiwyg h2:first-child,
.tab-pane .article.ui-wysiwyg h3:first-child {
    margin-top: 0 !important;
}

.details__content .article.ui-wysiwyg p,
.tab-pane .article.ui-wysiwyg p {
    margin-bottom: 1rem !important;
}

.details__content .article.ui-wysiwyg strong,
.tab-pane .article.ui-wysiwyg strong {
    color: var(--t-text-primary);
    font-weight: 600;
}

/* Fix ul/li alignment (rem correction for 16px root) */
.ui-ul > li,
.ui-wysiwyg ul > li,
.faq__accordion ul > li {
    padding: 0.1rem 0 0.25rem 1.5rem !important;
    margin: 0 0 0.25rem !important;
}

.ui-ul > li:before,
.ui-wysiwyg ul > li:before,
.faq__accordion ul > li:before {
    top: 0.85rem !important;
    left: 0.25rem !important;
    width: 6px !important;
    height: 6px !important;
}

/* Review form rating section (rem correction for 16px root) */
.ui-vote {
    padding: 1rem;
    margin: 0 0 1.5rem;
}

.ui-vote .row {
    margin: 0 -0.75rem -0.625rem;
}

.ui-vote .row > [class^="col"] {
    padding: 0 0.75rem 0.625rem;
}

.ui-vote__rating {
    margin-right: 0.75rem;
}

.ui-vote__star svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ui-vote__mark {
    font-size: 0.85rem;
    line-height: 1.4;
}

.ui-label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Blog article body text — override base theme large sizes */
.article {
    font-size: 1.2rem !important;
    line-height: 1.8 !important;
    font-weight: 400 !important;
    color: var(--t-text-main) !important;
}
.article p {
    margin: 0 0 1.25rem !important;
}
.article h1 {
    font-size: 4rem !important;
    font-family: var(--t-font-heading) !important;
    font-weight: 700 !important;
    color: var(--t-primary) !important;
    margin: 0 0 1.5rem !important;
    line-height: 1.15 !important;
}
.article h2 {
    font-size: 2.5rem !important;
    font-family: var(--t-font-heading) !important;
    font-weight: 600 !important;
    color: var(--t-primary) !important;
    margin: 2.5rem 0 1rem !important;
    line-height: 1.2 !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid var(--t-border) !important;
}
.article h3 {
    font-size: 1.75rem !important;
    font-family: var(--t-font-heading) !important;
    font-weight: 600 !important;
    color: var(--t-primary) !important;
    margin: 2rem 0 0.75rem !important;
    line-height: 1.25 !important;
}
.article h4 {
    font-size: 1.35rem !important;
    font-family: var(--t-font-heading) !important;
    font-weight: 600 !important;
    color: var(--t-primary) !important;
    margin: 1.5rem 0 0.5rem !important;
    line-height: 1.3 !important;
}

/* Back to blog link */
.article #goBackToBlog {
    font-size: 0.9rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin-top: 1rem !important;
    font-weight: 500 !important;
}
.article #goBackToBlog svg {
    width: 1rem !important;
    height: 1rem !important;
}
.article hr {
    margin: 2rem 0 1rem !important;
    border: none !important;
    border-top: 1px solid var(--t-border) !important;
}

/* Fix oversized margins from base theme rem scaling */
.details,
.article {
    margin-bottom: 2rem !important;
}

.details__section {
    margin-bottom: 1.5rem !important;
}

/* Reviews list — fix rem scaling */
.reviews__list {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
}
.reviews__list > li {
    margin-bottom: 1.25rem !important;
}
.reviews__item-body {
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
    margin: 0 0 0.75rem !important;
}
.reviews__item-name {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    display: block !important;
}
.reviews__item-verified {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
}
.reviews__item-verified svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    margin-right: 4px !important;
}
.reviews__item-helpful {
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    margin: 0 -0.5rem -0.5rem !important;
}
.reviews__item-helpful > li {
    padding: 0 0.5rem 0.5rem !important;
}
.reviews__item-letters {
    width: 40px !important;
    height: 40px !important;
    font-size: 1rem !important;
}
.reviews__item-head {
    margin-bottom: 0.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
.reviews__item-head > * {
    margin: 0 0.75rem 0 0 !important;
}
.reviews__item-rating {
    flex: 0 0 100% !important;
    margin-top: 0.25rem !important;
}
.reviews__item .row {
    margin: 0 -0.5rem -0.75rem !important;
}
.reviews__item .row > [class^="col"] {
    padding: 0 0.5rem 0.75rem !important;
}

.tabs-container {
    padding: 0;
    overflow: hidden;
    background: var(--t-bg-surface);
}

.tabs-header {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--t-border);
    background-color: var(--t-bg-secondary);
    scrollbar-width: none;
}

.tabs-header::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    background: none;
    border: none;
    padding: 1.125rem 1.75rem;
    font-family: var(--t-font-heading);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--t-text-muted);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all var(--t-transition-fast);
}

.tab-btn:hover {
    color: var(--t-primary);
    background-color: rgba(255, 255, 255, 0.5);
}

.tab-btn.is-active {
    color: var(--t-accent);
    border-bottom-color: var(--t-accent);
    background-color: var(--t-bg-surface);
}

.tabs-content {
    padding: 2rem;
}

@media (min-width: 768px) {
    .tabs-content {
        padding: 2.5rem;
    }
}

.tab-pane {
    display: none;
    animation: phu-fadeIn 0.3s ease-in-out;
}

.tab-pane.is-active {
    display: block;
}

/* Fix: flex child must shrink within .details__wrapper */
.details__content {
    min-width: 0;
}

/* Write a review link */
.phu-write-review {
    margin-bottom: 1.25rem;
    text-align: right;
}

.phu-write-review__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--t-accent);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid var(--t-accent);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.phu-write-review__link:hover {
    background: var(--t-accent);
    color: white;
}

.phu-write-review__link i {
    font-size: 1rem;
}

/* Review form inside product tab */
.tab-pane .request {
    margin: 2rem 0 0;
    overflow: hidden;
}

.tab-pane .request__form .row > [class*="col-"]:last-child {
    padding-right: 0;
}

@keyframes phu-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fix: sku__tabs-content visibility for dosage tabs (st-on class) */
.sku__tabs-content.st-on {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix: rating stars sizing */
.ui-rating svg,
.ic-str {
    width: 20px !important;
    height: 20px !important;
}

/* Fix: In Stock icon sizing */
.ic-stk {
    width: 18px !important;
    height: 18px !important;
}

/* Hide the readmore block in product panel */
.sku__desc .sku__readmore {
    display: none !important;
}

/* ==========================================================================
   Legacy class support (old phu-* names for cached HTML)
   ========================================================================== */

/* Override base theme blue border on tabs content */
.sku__tabs-content {
    border: none !important;
    background: transparent !important;
}

.sku__tabs-content.is-active,
.sku__tabs-content.st-on {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
}

/* Ensure sku__tabs-wrapper has layout flow */
.product-selection-form .sku__tabs-wrapper {
    position: relative !important;
    overflow: visible !important;
}
.product-selection-form .sku__tabs-content {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.product-selection-form .sku__tabs-content:not(.is-active):not(.st-on) {
    display: none !important;
}

/* Dosage buttons — old phu-dose-btn classes */
.phu-dose-control {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
}

.phu-selection-label {
    display: block !important;
    width: 100% !important;
    font-weight: 600 !important;
    font-family: var(--t-font-heading) !important;
    font-size: 1rem !important;
    color: var(--t-primary) !important;
    margin-bottom: 0.75rem !important;
}

.phu-selection-label span {
    color: var(--t-text-muted) !important;
    font-weight: 400 !important;
    font-size: 0.85rem !important;
}

button.phu-dose-btn.sku__tabs-btn {
    border: 2px solid var(--t-border) !important;
    border-radius: var(--t-radius-xl) !important;
    background: var(--t-bg-surface) !important;
    color: var(--t-primary) !important;
    font-weight: 700 !important;
    font-family: var(--t-font-heading) !important;
    padding: 0.875rem 1rem !important;
    font-size: 1.1rem !important;
    height: auto !important;
    line-height: normal !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
}

button.phu-dose-btn.sku__tabs-btn:hover {
    border-color: var(--t-accent) !important;
    background: var(--t-bg-secondary) !important;
}

button.phu-dose-btn.sku__tabs-btn.st-on,
button.phu-dose-btn.sku__tabs-btn.is-active {
    border-color: var(--t-accent) !important;
    background: rgba(216, 58, 62, 0.05) !important;
    box-shadow: 0 4px 14px rgba(216, 58, 62, 0.15) !important;
    color: var(--t-accent) !important;
}

/* Dosage tabs — override base theme blue to markeu green */
.sku__tabs-btn {
    background: var(--t-bg-surface) !important;
    border: 2px solid var(--t-border) !important;
    border-bottom: 2px solid var(--t-border) !important;
    border-radius: var(--t-radius-lg) !important;
    color: var(--t-text-primary) !important;
    font-family: var(--t-font-heading) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 0.75rem 1.5rem !important;
    height: auto !important;
    margin: 0 0.35rem 0 0 !important;
    transition: all 150ms ease !important;
}
.sku__tabs-btn:after { display: none !important; }
.sku__tabs-btn:hover {
    border-color: var(--t-accent) !important;
    background: var(--t-bg-secondary) !important;
}
.sku__tabs-btn.is-active {
    border-color: var(--t-accent) !important;
    background: rgba(216, 58, 62, 0.06) !important;
    color: var(--t-accent) !important;
    box-shadow: 0 2px 8px rgba(216, 58, 62, 0.15) !important;
}
.sku__tabs-control {
    display: flex !important;
    gap: 0.25rem !important;
    margin-bottom: 1.25rem !important;
    border-bottom: none !important;
}

/* Quantity section — old phu-qty-* classes */
.phu-qty-section {
    margin-bottom: 1.5rem !important;
}

.phu-qty-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 0.75rem !important;
}

label.phu-qty-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    cursor: pointer !important;
    position: relative !important;
    border: 2px solid var(--t-border) !important;
    border-radius: var(--t-radius-xl) !important;
    padding: 0.875rem 0.5rem !important;
    background: var(--t-bg-surface) !important;
    transition: all 150ms ease !important;
    min-height: 72px !important;
    box-sizing: border-box !important;
}

label.phu-qty-card:hover {
    border-color: var(--t-accent) !important;
    background: var(--t-bg-secondary) !important;
}

label.phu-qty-card.is-checked {
    border-color: var(--t-accent) !important;
    background: rgba(216, 58, 62, 0.05) !important;
    box-shadow: 0 4px 14px rgba(216, 58, 62, 0.15) !important;
}

label.phu-qty-card input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

.phu-qty-val {
    display: block !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--t-primary) !important;
    font-family: var(--t-font-heading) !important;
    line-height: 1.2 !important;
}

.phu-qty-price-ea {
    display: block !important;
    font-size: 0.8rem !important;
    color: var(--t-text-muted) !important;
    margin-top: 0.15rem !important;
}

.phu-save-badge {
    position: absolute !important;
    top: -9px !important;
    right: -4px !important;
    background: var(--t-accent) !important;
    color: #fff !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: var(--t-radius-pill) !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* Action box — old phu-action-box */
.phu-action-box {
    background: var(--t-bg-surface) !important;
    border: 2px solid var(--t-border-light) !important;
    border-radius: var(--t-radius-xl) !important;
    padding: 1.5rem !important;
    box-shadow: var(--t-shadow-lg) !important;
    margin: 1rem 0 1.5rem !important;
}

.phu-price-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid var(--t-border) !important;
}

.phu-price-main {
    margin: 0 !important;
}

.phu-price-main ins {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: var(--t-primary) !important;
    font-family: var(--t-font-heading) !important;
}

.phu-price-main del {
    font-size: 1.25rem !important;
    color: var(--t-text-muted) !important;
    margin-left: 0.5rem !important;
}

.phu-free-delivery {
    display: flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    color: var(--t-accent) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
}

.phu-free-delivery svg {
    color: var(--t-accent) !important;
}

.phu-action-btn-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}

.phu-instock {
    margin: 0 !important;
    font-size: 0.875rem !important;
    color: var(--t-text-muted) !important;
}

.phu-atc-btn {
    flex: 1 !important;
    justify-content: center !important;
    min-width: 140px !important;
}

/* Trust list — old phu-trust-list */
.phu-trust-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.phu-trust-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.625rem !important;
    font-size: 0.9375rem !important;
    color: var(--t-text-main) !important;
    line-height: 1.4 !important;
}

.phu-trust-icon {
    flex-shrink: 0 !important;
    color: var(--t-accent) !important;
    margin-top: 1px !important;
}

/* Payment logos — old phu-payment-logos */
.phu-payment-logos {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
}

.phu-payment-logos img {
    height: 24px !important;
    width: auto !important;
    opacity: 0.75 !important;
}

/* Tabs — old phu-tabs classes */
.phu-tabs {
    overflow: hidden !important;
    background: var(--t-bg-surface) !important;
    border-radius: var(--t-radius-xl) !important;
    box-shadow: var(--t-shadow-lg) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.phu-tabs-header {
    display: flex !important;
    overflow-x: auto !important;
    border-bottom: 1px solid var(--t-border) !important;
    background-color: var(--t-bg-secondary) !important;
    scrollbar-width: none !important;
}

.phu-tabs-header::-webkit-scrollbar {
    display: none !important;
}

.phu-tab-btn {
    background: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 1.125rem 1.75rem !important;
    font-family: var(--t-font-heading) !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    color: var(--t-text-muted) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.phu-tab-btn:hover {
    color: var(--t-primary) !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.phu-tab-btn.is-active {
    color: var(--t-accent) !important;
    border-bottom-color: var(--t-accent) !important;
    background-color: var(--t-bg-surface) !important;
}

.phu-tabs-body {
    padding: 2rem !important;
}

.phu-tab-pane {
    display: none !important;
}

.phu-tab-pane.is-active {
    display: block !important;
}

/* Short description — old class */
.phu-product-short-desc {
    font-size: 1rem !important;
    color: var(--t-text-muted) !important;
    line-height: 1.6 !important;
    margin: 0.5rem 0 1rem !important;
}

/* Badge — old class */
.phu-badge-row {
    margin-bottom: 0.75rem !important;
}

.phu-badge-discreet {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.25rem 0.875rem !important;
    background: #dcfce7 !important;
    color: #15803d !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: var(--t-radius-pill) !important;
    border: 1px solid #bbf7d0 !important;
}

/* Safety banner — old class */
.phu-safety-banner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
    background-color: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
    border-radius: var(--t-radius-xl) !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    margin-top: 1.5rem !important;
}

.phu-safety-icon {
    color: #d97706 !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
}

.phu-safety-banner strong {
    display: block !important;
    color: #92400e !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
    font-size: 0.875rem !important;
}

/* sku__sticky bar — fix rem scaling */
.sku__sticky {
    height: 48px !important;
    bottom: calc(3.4rem + var(--safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 992px) {
    .sku__sticky {
        top: 36px !important;
        bottom: auto !important;
        height: 48px !important;
        transform: none !important;
    }
    .is-sticky-active .sku__sticky,
    .st-fixed .sku__sticky {
        transform: none !important;
        top: 36px !important;
    }
}
.sku__sticky .container-fluid {
    height: 100% !important;
    padding: 0 12px !important;
}
.sku__sticky-item {
    gap: 8px !important;
}
.sku__sticky-item-image {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    flex: 0 0 32px !important;
}
@media (min-width: 992px) {
    .sku__sticky-item-image {
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        flex: 0 0 36px !important;
    }
}
.sku__sticky-item-title {
    font-size: 0.8125rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 0 !important;
}
.sku__sticky-item-title small {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
}
.sku__sticky-price {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 0 8px 0 0 !important;
}
.sku__sticky-control .ui-btn {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    padding: 0 14px !important;
    border-radius: 6px !important;
}
.sku__sticky-control .ui-btn svg.icon-cart {
    width: 14px !important;
    height: 14px !important;
}
.sku__sticky-control .ui-number {
    height: 34px !important;
    width: 88px !important;
    margin: 0 8px 0 0 !important;
    border-radius: 6px !important;
}
.sku__sticky-control .ui-number .ui-number__minus,
.sku__sticky-control .ui-number .ui-number__plus {
    height: 34px !important;
    width: 30px !important;
}
.sku__sticky-control .ui-number .ui-number__input {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 6px 0 !important;
}

/* ==========================================================================
   Blog Page
   ========================================================================== */
.blog-header {
    background: var(--t-primary);
    padding: 3rem 0;
    color: #fff;
    margin-bottom: 2.5rem;
}
.blog-header__title {
    color: #fff !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-family: var(--t-font-heading) !important;
    font-weight: 800 !important;
    margin: 0 0 0.75rem !important;
    line-height: 1.15 !important;
}
.blog-header__desc {
    color: rgba(255,255,255,0.7);
    font-size: 1.05rem;
    max-width: 600px;
    line-height: 1.5;
}
.blog-header__desc p { margin: 0; color: inherit; }

/* Blog breadcrumbs inside dark header */
.blog-header .breadcrumbs {
    padding: 0 0 1rem !important;
}
.blog-header .breadcrumbs__link,
.blog-header .breadcrumbs__menu > li,
.blog-header .breadcrumbs__menu > li:after {
    color: rgba(255,255,255,0.5) !important;
    border-color: rgba(255,255,255,0.3) !important;
}
.blog-header .breadcrumbs__link:hover {
    color: rgba(255,255,255,0.8) !important;
}

/* Featured Article */
.blog-featured {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-xl, 16px);
    overflow: hidden;
    background: var(--t-bg-surface);
    margin-bottom: 2.5rem;
    transition: all 0.25s ease;
}
.blog-featured:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    border-color: var(--t-accent);
}
.blog-featured__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.blog-featured__link:hover {
    text-decoration: none;
    color: inherit;
}
.blog-featured__image {
    height: 240px;
    overflow: hidden;
    background: var(--t-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.blog-featured:hover .blog-featured__image img {
    transform: scale(1.05);
}
.blog-featured__content {
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-featured__title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    font-family: var(--t-font-heading) !important;
    line-height: 1.25 !important;
    margin: 0 0 1rem !important;
    color: var(--t-primary) !important;
}
.blog-featured:hover .blog-featured__title {
    color: var(--t-accent) !important;
}
.blog-featured__readmore {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--t-accent);
}
@media (min-width: 768px) {
    .blog-featured__link {
        flex-direction: row;
    }
    .blog-featured__image {
        width: 45%;
        min-width: 45%;
        height: auto;
        min-height: 280px;
    }
    .blog-featured__content {
        flex: 1;
        padding: 2rem 2.5rem;
    }
    .blog-featured__title {
        font-size: 1.75rem !important;
    }
}

/* Section Header */
.blog-section-header {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--t-border);
}
.blog-section-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    font-family: var(--t-font-heading) !important;
    color: var(--t-primary) !important;
    margin: 0 !important;
}

.blog-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
@media (min-width: 640px) {
    .blog-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .blog-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.blog-card {
    background: var(--t-bg-surface);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-xl, 16px);
    overflow: hidden;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}
.blog-card:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    transform: translateY(-4px);
    border-color: var(--t-accent);
}

.blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.blog-card__link:hover {
    text-decoration: none;
    color: inherit;
}

.blog-card__image {
    height: 200px;
    overflow: hidden;
    background: var(--t-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.blog-card:hover .blog-card__image img {
    transform: scale(1.05);
}
.blog-card__image--placeholder {
    background: var(--t-bg-secondary);
}

.blog-card__body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.blog-card__title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    font-family: var(--t-font-heading) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    color: var(--t-primary) !important;
}
.blog-card:hover .blog-card__title {
    color: var(--t-accent) !important;
}

/* Override base theme blog styles that conflict */
.blog { padding: 0 !important; }
.blog__title { display: none !important; }
.blog__grid { display: none !important; }

/* Pagination styling */
.pagination {
    padding: 1.5rem 0 3rem !important;
}
.pagination__menu {
    display: flex !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.pagination__menu > li {
    flex-grow: 0 !important;
    flex-basis: auto !important;
    width: auto !important;
    margin: 0 !important;
}
.pagination__menu li a,
.pagination__menu li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 0.75rem !important;
    border-radius: var(--t-radius-lg) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--t-text-primary) !important;
    border: 1px solid var(--t-border) !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.pagination__menu li a:hover {
    border-color: var(--t-accent) !important;
    color: var(--t-accent) !important;
}
.pagination__menu li.is-active a,
.pagination__menu li.is-active span {
    background: var(--t-secondary) !important;
    color: #fff !important;
    border-color: var(--t-accent) !important;
}

/* ==========================================================================
   Cart Page — Fix rem inflation
   ========================================================================== */

/* Cart title: 3.2rem = 51.2px at 16px root → fix to 2rem */
.cart__title {
    font-size: 2rem !important;
    margin-bottom: 1.5rem !important;
}

/* Cart action buttons: ui-btn--48 min-height 4.8rem = 76.8px → fix */
.cart__action {
    display: flex !important;
    gap: 1rem !important;
}
.cart__action .ui-btn {
    min-height: 48px !important;
    height: 48px !important;
    font-size: 1rem !important;
    padding: 0 2rem !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}
.cart__action .ui-btn--blue {
    background: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    color: #ffffff !important;
}
.cart__action .ui-btn--blue * {
    color: #ffffff !important;
    fill: #ffffff !important;
}
.cart__action .ui-btn--blue:hover {
    background: #b3262a !important;
}
.cart__action .ui-btn--light {
    background: var(--t-bg-secondary) !important;
    color: var(--t-text-primary) !important;
    border-color: var(--t-border) !important;
}
.ui-btn svg {
    top: 0 !important;
}
.cart__action .ui-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    margin: 6px !important;
}

/* Cart table — fix rem inflation */
.cart__table {
    font-size: 0.9375rem !important;
}
.cart__table thead th {
    font-size: 0.8125rem !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
}
.cart__table td {
    padding: 16px !important;
    vertical-align: middle !important;
}
.cart__table-item-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
}
.cart__table-shipping,
.cart__table-qty,
.cart__table-price,
.cart__table-total {
    font-size: 1rem !important;
    font-weight: 700 !important;
}
.cart__table-total {
    font-size: 1.2rem !important;
}
.cart__table-total small {
    font-size: 1.1rem !important;
}
.cart__table-item-image img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
}

/* Cart quantity stepper — fix rem inflation + center */
.cart__table-qty .ui-number {
    max-width: 130px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.cart__table-qty .ui-number__minus,
.cart__table-qty .ui-number__plus {
    width: 38px !important;
    height: 42px !important;
    min-height: auto !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.cart__table-qty .ui-number__input {
    height: 42px !important;
    font-size: 1rem !important;
    width: 100% !important;
    min-width: 48px !important;
    padding: 0 38px !important;
    text-align: center !important;
    line-height: 42px !important;
    box-sizing: border-box !important;
}
/* Center the qty cell itself */
.cart__table-qty {
    text-align: center !important;
    vertical-align: middle !important;
}
/* ui-number--56 variant (cart) — override inflated 56px sizing */
.ui-number--56 {
    height: 42px !important;
    width: 124px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
.ui-number--56 .ui-number__minus,
.ui-number--56 .ui-number__plus {
    width: 38px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.ui-number--56 .ui-number__input {
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 38px !important;
    text-align: center !important;
    font-size: 1rem !important;
    width: 124px !important;
    box-sizing: border-box !important;
}

/* Cart delete button */
.cart__table-delete {
    font-size: 0 !important;
}
.cart__table-delete svg {
    width: 20px !important;
    height: 20px !important;
}

/* Cart total row */
.cart__table-total.summ {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
}

/* Cart upgrade upsell — fix sizes */
.cart__table-text {
    font-size: 0.9375rem !important;
    padding: 12px 16px !important;
}
.cart__table-text .ui-btn {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 0.875rem !important;
    padding: 0 1.25rem !important;
}

/* Mobile cart adjustments */
@media (max-width: 767px) {
    .cart__action {
        flex-direction: column !important;
    }
    .cart__action .ui-btn {
        width: 100% !important;
    }
    .cart__table-qty .ui-number {
        max-width: 140px !important;
    }
}

/* ==========================================================================
   Checkout Page — Fix rem inflation
   ========================================================================== */

/* Checkout title */
.checkout__title,
.checkout .cart__title {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
}

/* Checkout section titles (h2s) */
.checkout__section .checkout__title {
    font-size: 1.375rem !important;
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
}

/* Checkout order summary table */
.checkout .cart__table {
    font-size: 0.875rem !important;
}
.checkout .cart__table td {
    padding: 10px 12px !important;
}
.checkout .cart__table-item-title {
    font-size: 0.875rem !important;
}
.checkout .cart__table-total {
    font-size: 1.125rem !important;
    font-weight: 800 !important;
}
.checkout .cart__table-shipping {
    font-size: 0.875rem !important;
}
.checkout .cart__table-discount {
    font-size: 0.875rem !important;
}

/* Discount code input — fix 4rem = 64px → 40px */
.ui-discount {
    height: 40px !important;
    border-radius: 6px !important;
}
.ui-discount__icon {
    width: 40px !important;
}
.ui-discount__icon svg {
    width: 18px !important;
    height: 18px !important;
}
.ui-discount__input {
    font-size: 0.875rem !important;
    padding: 8px 12px !important;
    font-family: var(--t-font-body) !important;
}
.ui-discount__btn {
    font-size: 0.875rem !important;
    padding: 5px 16px !important;
    font-family: var(--t-font-body) !important;
}

/* Shipping method cards — fix rem inflation and style */
.checkout__shipping .ui-check {
    display: flex !important;
    gap: 0.75rem !important;
}
.ui-check__shipping {
    padding: 25px 16px !important;
    border-radius: 8px !important;
    min-height: 44px !important;
}
.ui-check__title {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
}
.ui-check__shipping .ui-check__text {
    font-size: 0.75rem !important;
    color: var(--t-text-muted) !important;
    padding-top: 8px !important;
}
.ui-check__text {
    padding-top: 8px !important;
}
.ui-check__shipping .ui-check__price {
    font-size: 1rem !important;
    font-weight: 700 !important;
}
/* Theme color for selected shipping */
.ui-check__input:checked ~ .ui-check__shipping {
    border-color: var(--t-accent) !important;
}
.ui-check__input:checked ~ .ui-check__shipping:after {
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 0C4.925 0 0 4.925 0 11C0 17.075 4.925 22 11 22C17.075 22 22 17.075 22 11C22 4.925 17.075 0 11 0ZM15.768 9.14C15.8558 9.03964 15.9226 8.92274 15.9646 8.79617C16.0065 8.6696 16.0227 8.53591 16.0123 8.40298C16.0018 8.27005 15.9648 8.14056 15.9036 8.02213C15.8423 7.90369 15.758 7.79871 15.6555 7.71334C15.5531 7.62798 15.4346 7.56396 15.3071 7.52506C15.1796 7.48616 15.0455 7.47316 14.9129 7.48683C14.7802 7.50049 14.6517 7.54055 14.5347 7.60463C14.4178 7.66872 14.3149 7.75554 14.232 7.86L9.932 13.019L7.707 10.793C7.5184 10.6108 7.2658 10.51 7.0036 10.5123C6.7414 10.5146 6.49059 10.6198 6.30518 10.8052C6.11977 10.9906 6.0146 11.2414 6.01233 11.5036C6.01005 11.7658 6.11084 12.0184 6.293 12.207L9.293 15.207C9.39126 15.3052 9.50889 15.3818 9.63842 15.4321C9.76794 15.4823 9.9065 15.505 10.0453 15.4986C10.184 15.4923 10.32 15.4572 10.4444 15.3954C10.5688 15.3337 10.6791 15.2467 10.768 15.14L15.768 9.14Z' fill='%230EA5E9'/%3E%3C/svg%3E%0A") !important;
}

/* Delivery/billing form inputs — fix sizes */
.checkout__delivery input[type="text"],
.checkout__delivery input[type="email"],
.checkout__delivery input[type="tel"],
.checkout__delivery select {
    height: 48px !important;
    font-size: 0.9375rem !important;
    border-radius: 6px !important;
    border: 1px solid #ECF0F3 !important;
    font-family: var(--t-font-body) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Text inputs use floating-label padding — top offset keeps text below the label */
.checkout__delivery input[type="text"],
.checkout__delivery input[type="email"],
.checkout__delivery input[type="tel"] {
    padding: 18px 16px 8px !important;
}
/* Select uses selectric (no floating label), so compact padding is fine */
.checkout__delivery select {
    padding: 0 12px !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

/* Delivery insurance checkbox */
.checkout__shipping .delivery-insurance,
.checkout__shipping label {
    font-size: 0.875rem !important;
}

/* Payment method tabs — fix heights and theme color */
.ui-payment__check-btn {
    height: 48px !important;
    padding: 8px 16px !important;
}
.ui-payment__check-input:checked ~ .ui-payment__check-btn {
    border-color: var(--t-accent) !important;
}
.ui-payment__check-input:not(:checked) ~ .ui-payment__check-btn:hover svg path {
    fill: var(--t-accent) !important;
}

/* Credit card form — fix sizes */
/* select/number inputs: compact padding (no floating label) */
.checkout__card input[type="number"],
.checkout__card select {
    height: 44px !important;
    font-size: 0.9375rem !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    font-family: var(--t-font-body) !important;
}
/* text inputs use ui-placeholder floating label — need top padding so text clears the label */
.checkout__card input[type="text"] {
    height: 48px !important;
    font-size: 0.9375rem !important;
    padding: 18px 16px 8px !important;
    border-radius: 6px !important;
    font-family: var(--t-font-body) !important;
}
.checkout__card label {
    font-size: 0.8125rem !important;
    margin-bottom: 4px !important;
}
.checkout__card .ui-check__title {
    font-size: 1rem !important;
}

/* Card expiration separator line height */
.ui-expiration__group .row > [class^="col"]:after {
    height: 2.6rem !important;
}

/* Complete Order button — fix from 4rem/64px to proper size */
.checkout__complete .ui-btn {
    min-height: 48px !important;
    height: 48px !important;
    font-size: 1rem !important;
    padding: 0 2rem !important;
    border-radius: 8px !important;
    background: var(--t-secondary) !important;
    border-color: var(--t-accent) !important;
    max-width: 280px !important;
}
.checkout__complete .ui-btn:hover {
    background: #b3262a !important;
}

/* Terms/agreement text — fix giant heading style */
.checkout__complete label,
.checkout__complete a {
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-decoration: underline !important;
    color: var(--t-text-muted) !important;
}
.checkout__complete label a {
    color: var(--t-accent) !important;
}
.checkout__complete input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

/* All blue CTA buttons → theme green */
.ui-btn--blue {
    background: var(--t-secondary) !important;
    border-color: var(--t-accent) !important;
}
.ui-btn--blue:hover {
    background: #b3262a !important;
    border-color: #b3262a !important;
}

/* ==========================================================================
   Product Page — Quantity card selected state
   ========================================================================== */
.custom-radio:has(.phu-qty-radio:checked) {
    border: none !important;
    background: transparent !important;
}
.custom-radio:has(.phu-qty-radio:checked) .radio-content {
    border-color: var(--t-accent) !important;
    background-color: rgba(216, 58, 62, 0.05) !important;
    box-shadow: 0 4px 14px rgba(216, 58, 62, 0.15) !important;
}

/* Active dose tab — use theme blue */
.sku__tabs-btn.is-active {
    color: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    background: rgba(216, 58, 62, 0.06) !important;
}

/* Dose tabs mobile — scroll indicator */
@media (max-width: 767px) {
    .sku__tabs-control {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        mask-image: linear-gradient(to right, black 85%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important;
    }
    .sku__tabs-control::-webkit-scrollbar {
        display: none !important;
    }
    .sku__tabs-control .sku__tabs-list {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   Remaining Fixes — Country select, Cookie banner, Checkout button sizes
   ========================================================================== */

/* Country select — collapsed to 26px width, needs full width */
select#bcountry,
.checkout__delivery select {
    width: 100% !important;
    min-width: 100px !important;
    box-sizing: border-box !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

/* Cookie banner — constrain Accept button on mobile */
.cookies .ui-btn {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 1rem !important;
    padding: 0 2rem !important;
    max-width: 160px !important;
}
@media (max-width: 767px) {
    .cookies {
        padding: 16px !important;
    }
    .cookies__desc img,
    .cookies__desc svg,
    .cookies img {
        max-height: 48px !important;
        width: auto !important;
    }
    .cookies__desc strong {
        font-size: 1rem !important;
    }
    .cookies__desc p {
        font-size: 0.8125rem !important;
    }
}

/* Checkout order summary — "Checkout" button inside summary still oversized */
.checkout .cart__table ~ .ui-btn,
.checkout .ui-btn--40 {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 0.9375rem !important;
    padding: 0 1.5rem !important;
}
.ui-btn--40 {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 1rem !important;
    padding: 0 2rem !important;
    line-height: 1.2 !important;
}

/* Complete Order button — full width on mobile */
@media (max-width: 767px) {
    .checkout__complete .ui-btn {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Fix blue box-shadow references */
.ui-btn--blue {
    box-shadow: 0 4px 14px 0 rgba(216, 58, 62, 0.25) !important;
}
.ui-btn--blue:hover {
    box-shadow: 0 6px 20px rgba(216, 58, 62, 0.35) !important;
}

/* ==========================================================================
   Global ui-number stepper — fix rem inflation everywhere
   ========================================================================== */
.ui-number {
    max-width: 130px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: var(--t-radius-lg) !important;
}
.ui-number__minus,
.ui-number__plus {
    width: 38px !important;
    height: 42px !important;
    min-height: auto !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.ui-number__input {
    height: 42px !important;
    font-size: 1rem !important;
    width: 100% !important;
    min-width: 48px !important;
    padding: 0 38px !important;
    text-align: center !important;
    line-height: 42px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Cart page — fix oversized elements
   ========================================================================== */

/* "Empty cart" link */
.hd__cart-reset,
.cart-reset,
a[href*="cart/clear"] {
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
}

/* Cart item title */
.hd__cart-item-title,
.cart__table-item-title {
    font-size: 0.9375rem !important;
}

/* Checkout button in cart */
.cart__action .ui-btn--blue,
a.ui-btn--blue[href*="checkout"] {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 1rem !important;
    padding: 0 2rem !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   Checkout page — fix country select & selectric widgets
   ========================================================================== */

/* Force selectric wrappers to full width */
.checkout__delivery .selectric-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}
.checkout__delivery .selectric {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #ECF0F3 !important;
    border-radius: 6px !important;
    padding: 0 12px !important;
    font-size: 0.9375rem !important;
    font-family: var(--t-font-body) !important;
    background: var(--t-bg-surface) !important;
}
.checkout__delivery .selectric .label {
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
    padding: 0 12px !important;
    line-height: 48px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: var(--t-text-main) !important;
}
.checkout__delivery .selectric .button {
    height: 48px !important;
    width: 38px !important;
}
/* Selectric dropdown items — fix rem inflation */
.checkout__delivery .selectric-items {
    font-size: 0.9375rem !important;
}
.checkout__delivery .selectric-items li {
    font-size: 0.9375rem !important;
    padding: 8px 12px !important;
}

/* Card month/year selects — match input styling */
.checkout__card .selectric-wrapper {
    width: 100% !important;
}
.checkout__card .selectric {
    height: 44px !important;
    border: 1px solid #ECF0F3 !important;
    border-radius: 6px !important;
    font-size: 0.9375rem !important;
    font-family: var(--t-font-body) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
}
.checkout__card .selectric .label {
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 0 12px !important;
    line-height: 44px !important;
}

/* Insurance checkbox — use theme blue instead of default blue */
.delivery-insurance input[type="checkbox"]:checked,
.checkout__shipping input[type="checkbox"]:checked {
    accent-color: var(--t-accent) !important;
}

/* Payment tab selected border — use theme blue */
.ui-payment__check-input:checked ~ .ui-payment__check-btn {
    border-color: var(--t-accent) !important;
}

/* Tab containers — neutralise body 1.6rem inheritance (25.6px at 16px root) */
.tabs-container,
.tabs-content,
.tab-pane {
    font-size: 1rem !important;
}

/* Product description tables — fix rem inflation from app.min.css (10px root) */
.ui-wysiwyg table,
.article table,
.delivery-table {
    font-size: 0.875rem !important;
}
/* === Thankyou page: print button fix === */
#print .ui-btn {
    min-height: 48px !important;
    height: 48px !important;
    font-size: 1rem !important;
    padding: 0 2rem !important;
    line-height: 48px !important;
}
.h3 { font-size: 1.75rem !important; }



/* === Fix: card number & CVV labels always float up (masked inputs) === */
.ui-placeholder:has(.js-mask-cardnumber) .ui-placeholder__label,
.ui-placeholder:has(.js-mask-cvv) .ui-placeholder__label,
.js-mask-cardnumber ~ .ui-placeholder__label,
.js-mask-cvv ~ .ui-placeholder__label {
    transform: scale(0.75) translate(0, -8px) !important;
    color: #A9B3BF !important;
}

/* === Fix: floating label moves up when input has value === */
.ui-placeholder__input:focus + .ui-placeholder__label,
.ui-placeholder__input:not(:placeholder-shown) + .ui-placeholder__label,
.ui-placeholder__textarea:focus + .ui-placeholder__label,
.ui-placeholder__textarea:not(:placeholder-shown) + .ui-placeholder__label {
    transform: scale(0.75) translate(0, -8px) !important;
    color: #A9B3BF !important;
}
.ui-placeholder.is-changed .ui-placeholder__label {
    transform: scale(0.75) translate(0, -8px) !important;
    color: #A9B3BF !important;
}

/* Prevent validation error red from leaking into card type buttons */
.ui-payment__check.is-error .ui-payment__check-btn,
.is-error .ui-payment__check-btn {
    border-color: #ECF0F3 !important;
    box-shadow: none !important;
}
.is-error .ui-payment__check-input:checked ~ .ui-payment__check-btn {
    border-color: var(--t-accent) !important;
    box-shadow: 0 0 0 1px var(--t-secondary) !important;
}


/* ==========================================================================
   QA Fix — 2026-05-07 (post-launch audit)
   ========================================================================== */

/* Blog hub H1 must not render white on near-white bg */
.bl-hero h1, .blog-hero h1, .articles-hero h1, h1.bl-hero__title {
    color: var(--t-text-main) !important;
}

/* Categories toggle — give it a Fernandez-palette background instead of off-palette grey */
.hd__categories-toggle {
    background-color: var(--t-primary) !important;
    color: var(--t-text-inverse) !important;
    font-family: var(--t-font-body) !important;
}
.hd__categories-toggle:hover {
    background-color: var(--t-primary-light) !important;
}

/* Force Manrope on the categories toggle text + svg-text */
.hd__categories-toggle, .hd__categories-toggle * {
    font-family: var(--t-font-heading) !important;
}

/* Lazy-load fallback — show product hero img immediately if Swiper hasn't initialised */
.swiper-lazy[data-src] {
    background: var(--t-bg-secondary);
    min-height: 200px;
}
.swiper-lazy[data-src]:not([src=""]) {
    background: transparent;
}

/* Make CTA rotation clear — confirm coral red is the accent CTA across all primary buttons */
.el-btn-primary, .btn-primary, button.btn-primary {
    background-color: var(--t-accent) !important;
}
.el-btn-primary:hover, .btn-primary:hover, button.btn-primary:hover {
    background-color: var(--t-accent-hover) !important;
}

/* ==========================================================================
   QA Pass 2 — UX audit fixes 2026-05-07
   ========================================================================== */

/* M-01 — fix .ui-btn--blue contrast (white on #eef0f5 → 1.29:1).
   Use deep navy text + slightly darker bg so AA passes (~9:1). */
.ui-btn--blue,
.js-cookies-accept,
button.ui-btn--blue {
    background-color: var(--t-primary) !important;
    color: var(--t-text-inverse) !important;
    border-color: var(--t-primary) !important;
}
.ui-btn--blue:hover,
button.ui-btn--blue:hover {
    background-color: var(--t-primary-light) !important;
    color: var(--t-text-inverse) !important;
}

/* M-02 — active dose-pill tab: fix invisible text */
.sku__tabs-btn.is-active,
.sku__tabs-btn.active {
    background-color: var(--t-primary) !important;
    color: var(--t-text-inverse) !important;
    border-color: var(--t-primary) !important;
}

/* M-03 — secondary Cancelar-style button — bump contrast */
.ui-btn--light {
    color: var(--t-primary) !important;
    background-color: var(--t-bg-secondary) !important;
    border: 1px solid var(--t-border) !important;
}

/* M-04 — coral CTA: darken to clear AA-normal (4.5:1) */
:root {
    --t-accent: #d83a3e;          /* was #f25256 — darkened to reach 4.5:1 with white */
    --t-accent-hover: #b3262a;    /* hover state */
}
.el-btn-primary, .btn-primary, button.btn-primary,
.action-btn-full, button.action-btn-full {
    background-color: var(--t-accent) !important;
    color: #ffffff !important;
}
.el-btn-primary:hover, .btn-primary:hover, .action-btn-full:hover {
    background-color: var(--t-accent-hover) !important;
}

/* M-08 — global focus ring (keyboard nav visibility) */
:focus-visible {
    outline: 2px solid var(--t-primary) !important;
    outline-offset: 3px !important;
    border-radius: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--t-primary) !important;
    outline-offset: 3px !important;
}

/* M-09 — mobile hamburger min 44×44 tap target */
.hd__nav-toggle, .j-nv-tog {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* m-01 — Manrope on Categories/search/nav buttons (Nunito leak) */
.hd__search-btn,
.nav-aside__toggle,
.hd__categories-toggle,
.hd__nav-toggle,
.j-nv-tog {
    font-family: var(--t-font-heading) !important;
}

/* m-03 — readable footer nav font-size on mobile */
@media (max-width: 480px) {
    footer li, footer a, .ft-bottom li, .ft-nav__link {
        font-size: 14px !important;
    }
}

/* m-13 — header nav hover affordance */
header nav a:hover,
.hd__nav-link:hover {
    color: var(--t-accent) !important;
}

/* m-10 — Skip-to-content link (visible only on focus) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--t-primary);
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus {
    top: 0;
}

/* Team page card avatars (M-10) — make sure .team-card__photo + .pharmacist-avatar render */
.team-card__photo, .pharmacist-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--t-secondary);
    margin-bottom: 1rem;
}

/* m-09 — contacts submit button visibility (override .ui-btn--blue locally) */
.contacts__form .ui-btn,
form.js-validate button[type="submit"],
form.js-validate .ui-btn--56 {
    background-color: var(--t-accent) !important;
    color: #ffffff !important;
    border-color: var(--t-accent) !important;
    min-height: 48px !important;
}
.contacts__form .ui-btn:hover {
    background-color: var(--t-accent-hover) !important;
}

/* ==========================================================================
   QA Pass 3 — User feedback fixes 2026-05-07
   ========================================================================== */

/* User: 'black CTAs on main page not working well' — primary CTAs use coral red, not navy */
.ui-btn--blue,
.js-cookies-accept,
button.ui-btn--blue,
.hd__categories-toggle {
    background-color: var(--t-accent) !important;
    color: #ffffff !important;
    border-color: var(--t-accent) !important;
}
.ui-btn--blue:hover,
.js-cookies-accept:hover,
button.ui-btn--blue:hover,
.hd__categories-toggle:hover {
    background-color: var(--t-accent-hover) !important;
    color: #ffffff !important;
}

/* Fix #d4d8e3 secondary-hover (too light) — use a properly contrasting shade */
:root {
    --t-secondary-hover: #d4d8e3;  /* darker-than-bg blue, AA-passing on white */
}

/* User: 'main categories menu is black box with black text' — force white bg + dark text on offcanvas */
.hd__categories-offcanvas,
.hd__nav-offcanvas,
.hd__categories-offcanvas-body,
.hd__categories-aside,
.hd__categories-menu,
.hd__categories-pin {
    background-color: #ffffff !important;
}
.hd__categories-offcanvas a,
.hd__categories-link,
.hd__categories-loadmore-link,
.hd__nav-offcanvas a,
.hd__nav-link {
    color: var(--t-text-main) !important;
}
.hd__categories-link:hover,
.hd__categories-link:focus,
.hd__categories-loadmore-link:hover,
.hd__nav-link:hover {
    background-color: var(--t-bg-secondary) !important;
    color: var(--t-accent) !important;
}
.hd__categories-link.is-active,
.hd__categories-link[aria-current="page"] {
    background-color: var(--t-secondary) !important;
    color: var(--t-text-main) !important;
}
/* Categories title in panel header */
.hd__categories-title {
    color: var(--t-text-main) !important;
}
.hd__categories-close {
    color: var(--t-text-main) !important;
}
.hd__categories-close:hover {
    color: var(--t-accent) !important;
}

/* Mobile: app.min.css forces #242D33 dark bg on offcanvas — override to white */
@media (max-width: 991px) {
    .hd__categories-offcanvas,
    .hd__nav-offcanvas {
        background-color: #ffffff !important;
    }
    .hd__categories-link,
    .hd__nav-link {
        color: var(--t-text-main) !important;
        border-bottom: 1px solid var(--t-border-light);
    }
}

/* Featured product 'Comprar Ahora' header CTA in product page — coral, not navy */
.j-goto, .ui-btn.j-goto {
    background-color: var(--t-accent) !important;
    color: #ffffff !important;
    border-color: var(--t-accent) !important;
}
.j-goto:hover {
    background-color: var(--t-accent-hover) !important;
}

/* Skip link visible on focus only */
.skip-link {
    background-color: var(--t-primary) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   QA Pass 4 — Color contrast + residual blue removal 2026-05-07
   ========================================================================== */

/* C-1 — scroll-to-top button: invisible white-on-grey → coral */
.scrolltop, .scrolltop.j-gotop, button.scrolltop {
    background-color: var(--t-accent) !important;
    color: #ffffff !important;
    border-color: var(--t-accent) !important;
}
.scrolltop:hover {
    background-color: var(--t-accent-hover) !important;
}

/* C-2 / C-3 — mobile offcanvas dark-on-dark panel: force white bg + navy text */
.hd__categories-offcanvas,
.hd__categories-offcanvas-head,
.hd__categories-offcanvas-body,
.hd__categories-dropdown,
.hd__categories-dropdown-head,
.hd__categories-pin,
.hd__categories-aside,
.hd__nav-offcanvas {
    background-color: #ffffff !important;
    color: var(--t-text-main) !important;
}
.hd__categories-offcanvas-head *,
.hd__categories-dropdown-head *,
.hd__categories-title,
.hd__nav-offcanvas-title {
    color: var(--t-text-main) !important;
}
.hd__categories-link,
.hd__categories-loadmore-link,
.hd__nav-link {
    color: var(--t-text-main) !important;
}

/* C-4 — product tabs: active tab text should be navy + coral underline (was #eef0f5 on white) */
.tab-btn, .sku__tabs-btn, .details__tabs-btn {
    color: var(--t-text-muted) !important;
}
.tab-btn.is-active, .tab-btn.active,
.sku__tabs-btn.is-active, .sku__tabs-btn.active,
.details__tabs-btn.is-active, .details__tabs-btn.active {
    color: var(--t-text-main) !important;
    border-bottom-color: var(--t-accent) !important;
    border-bottom-width: 3px !important;
    background-color: transparent !important;
}

/* C-5 / B-4 — product sidebar 'current' link: was near-white-on-blue-tint, now navy on neutral */
.details__categories-link.st-on,
.details__categories-link.is-active,
.details__categories-link[aria-current="page"] {
    background-color: var(--t-secondary) !important;  /* #eef0f5 neutral */
    color: var(--t-text-main) !important;
    border-left: 3px solid var(--t-accent) !important;
}

/* C-6 / B-5 — category aside active link: was #b3262a on #eef0f5 (both blue, fails AA) */
.nav-aside__link.st-on,
.nav-aside__link.is-active,
.nav-aside__link[aria-current="page"] {
    background-color: #ffffff !important;
    color: var(--t-accent) !important;
    border-left: 3px solid var(--t-accent) !important;
    font-weight: 600 !important;
}

/* C-7 — swiper arrows: faint grey → readable */
.swiper-prev, .swiper-next,
.swiper-button-prev, .swiper-button-next,
.bf__swiper-prev, .bf__swiper-next {
    color: var(--t-text-main) !important;
    background-color: var(--t-bg-surface) !important;
    border: 1px solid var(--t-border) !important;
}
.swiper-prev:hover, .swiper-next:hover {
    color: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
}

/* C-8 — homepage el-badge: red text on green tint → switch to neutral surface */
.el-badge {
    background-color: var(--t-secondary) !important;
    color: var(--t-text-main) !important;
    border: 1px solid var(--t-border) !important;
}

/* B-1 — hero decorative shapes: blue blobs → coral/navy tints */
.el-hero-shapes .shape-1,
.shape-1 {
    background-color: rgba(216, 58, 62, 0.08) !important;
    background-image: none !important;
    border-color: rgba(216, 58, 62, 0.15) !important;
}
.el-hero-shapes .shape-2,
.shape-2 {
    background-color: rgba(29, 28, 52, 0.06) !important;
    background-image: none !important;
    border-color: rgba(29, 28, 52, 0.12) !important;
}

/* B-2 — advantage icon backgrounds: blue tint → coral tint */
.adv__item-icon-wrap,
.advantages__item-icon-wrap,
.el-feature-icon,
.feature-item i {
    background-color: rgba(216, 58, 62, 0.10) !important;
    color: var(--t-accent) !important;
}

/* B-3 — dose-quantity radio rows: kill blue tint */
.radio-content,
.qty-card,
.qty-card.is-active {
    background-color: var(--t-secondary) !important;
}

/* Forbidden-color blanket: neutralise any remaining cyan-ish blue */
[style*="#d83a3e"], [style*="#d83a3e"],
[style*="#b3262a"], [style*="#b3262a"],
[style*="#eef0f5"], [style*="#eef0f5"] {
    background-color: var(--t-accent) !important;
    color: var(--t-text-main) !important;
}

/* For any element that still uses --t-secondary-rgb-blue (legacy) — override with neutral RGB */
:root {
    --t-secondary-rgb: 238, 240, 245;       /* matches #eef0f5 */
    --t-accent-rgb:    216, 58, 62;          /* matches #d83a3e */
    --t-primary-rgb:   29, 28, 52;
}

/* ==========================================================================
   QA Pass 5 — Final residual blue cleanup on product pages 2026-05-08
   ========================================================================== */

/* C-2/C-3 strengthen: explicit white bg on offcanvas links to resolve transparent ambiguity */
.hd__categories-link,
.hd__categories-loadmore-link,
.hd__nav-link,
.hd__categories-offcanvas li {
    background-color: #ffffff !important;
}

/* C-6 darken aside active text to clear AA-normal (was #d83a3e on #eef0f5 = 4.01:1) */
.nav-aside__link.st-on,
.nav-aside__link.is-active {
    color: #b3262a !important;       /* darker coral, ~4.6:1 on #eef0f5 */
    background-color: #ffffff !important;  /* even higher contrast on pure white */
    border-left: 3px solid var(--t-accent) !important;
    font-weight: 600 !important;
}

/* Kill remaining product-page blues — variant selector + review vote links */

/* .radio-content — dose/quantity radio rows (was rgba(216, 58, 62,0.05) sky-blue tint) */
.radio-content,
.radio-content.is-active,
.qty-card .radio-content {
    background-color: var(--t-secondary) !important;  /* #eef0f5 neutral */
}
.radio-content:hover {
    background-color: var(--t-secondary-hover) !important;
}

/* Selectric / native dropdown selected state (was #b3262a on #eef0f5 — both forbidden) */
.selectric-items li.selected,
.selectric-items li:hover,
ul.selectric-options li.selected,
.selectric-scroll li.selected {
    color: var(--t-text-main) !important;
    background-color: var(--t-secondary) !important;
}
.selectric-items li.highlighted {
    background-color: var(--t-secondary-hover) !important;
}

/* Price label inside selectric dropdown (was #b3262a forbidden blue) */
.selectric-price,
.selectric .price,
.selectric span.price {
    color: var(--t-accent) !important;
    font-weight: 700 !important;
}

/* Review vote links (was .ui-link--blue with #b3262a) */
.ui-link--blue, a.ui-link--blue,
.vote-yes, .vote-no, .j-vote-yes, .j-vote-no {
    color: var(--t-text-main) !important;
}
.ui-link--blue:hover, .vote-yes:hover, .vote-no:hover {
    color: var(--t-accent) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   QA Pass 6 — Add soft teal tertiary accent #86cacb (2026-05-08)
   Role: subtle medical/trust accent on decorative tints + icon surfaces.
   CTAs stay coral; body/text stays navy.
   ========================================================================== */

:root {
    --t-tertiary:        #86cacb;       /* soft teal — calm medical tone */
    --t-tertiary-hover:  #5fb0b1;       /* darker teal for interactive states */
    --t-tertiary-tint-08: rgba(134, 202, 203, 0.08);
    --t-tertiary-tint-15: rgba(134, 202, 203, 0.15);
    --t-tertiary-tint-25: rgba(134, 202, 203, 0.25);
}

/* Hero decorative shapes — was coral 8% / navy 6%, now coral 8% + teal 15% (warm/cool balance) */
.el-hero-shapes .shape-2,
.shape-2 {
    background-color: var(--t-tertiary-tint-15) !important;
    border-color: rgba(134, 202, 203, 0.30) !important;
}

/* Advantage/feature icon backgrounds — soft teal tint instead of coral (calmer pharmacy feel) */
.adv__item-icon-wrap,
.advantages__item-icon-wrap,
.el-feature-icon,
.feature-item i {
    background-color: var(--t-tertiary-tint-15) !important;
    color: var(--t-primary) !important;
}

/* Trust badge background callouts (working hours, email/phone support cards) */
.contacts__detail-item i,
.contacts__detail-item .ph,
.el-pharmacist-card .ph,
.team-card__license,
.bf__icon-wrap {
    background-color: var(--t-tertiary-tint-15) !important;
    color: var(--t-primary) !important;
}
.team-card__license {
    border-radius: 999px;
    padding: 4px 12px;
}

/* Bonus pills (inside dose tiles) — was coral; teal feels less aggressive on dose grid */
.bonus-pills {
    background-color: var(--t-tertiary) !important;
    color: var(--t-primary) !important;
}

/* 'Mejor oferta' best-deal badge on top dose tile */
.save-badge {
    background-color: var(--t-tertiary) !important;
    color: var(--t-primary) !important;
}

/* Subtle info callouts in body content */
.info-callout, .ui-alert--info, .ui-callout--info {
    background-color: var(--t-tertiary-tint-15) !important;
    border-left: 3px solid var(--t-tertiary) !important;
    color: var(--t-text-main) !important;
}

/* Pharmacist team-card photo border — teal ring instead of coral (warmer) */
.team-card__photo, img.team-card__photo {
    border: 3px solid var(--t-tertiary) !important;
}

/* ==========================================================================
   QA Pass 7 — Logo text + categories button restyle (2026-05-08)
   ========================================================================== */

/* Logo: SVG icon + brand text inline */
.hd__logo, .ft__logo {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}
.hd__logo .logo-icon, .ft__logo .logo-icon {
    flex-shrink: 0;
}
.el-logo-text {
    font-family: var(--t-font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--t-primary);
    white-space: nowrap;
}
.ft__logo .el-logo-text, .el-logo-white .el-logo-text {
    color: #ffffff !important;
}
@media (max-width: 480px) {
    .el-logo-text { font-size: 0.95rem; }
}



/* Logo accent — 'Farmacia' word styled lighter to make 'Fernández' the lead */
.el-logo-accent {
    font-weight: 400;
    color: var(--t-text-muted);
    margin-left: 4px;
}
.ft__logo .el-logo-accent, .el-logo-white .el-logo-accent {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ==========================================================================
   QA Pass 8 — Logo size + categories button (coral with white icon+text)
   ========================================================================== */

/* Logo — larger SVG icon and prevent clipping */
.hd__logo {
    height: auto !important;
    line-height: 1 !important;
    overflow: visible !important;
}
.hd__logo .logo-icon, .ft__logo .logo-icon {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
}
.el-logo-text {
    font-size: 1.35rem !important;
    line-height: 1.1 !important;
}
@media (max-width: 768px) {
    .hd__logo .logo-icon, .ft__logo .logo-icon {
        width: 36px !important;
        height: 36px !important;
    }
    .el-logo-text { font-size: 1.05rem !important; }
}

/* Categories toggle — coral bg with WHITE icon AND text (force currentColor cascade) */
.hd__categories-toggle,
button.hd__categories-toggle {
    background-color: var(--t-accent) !important;
    color: #ffffff !important;
    border: 2px solid var(--t-accent) !important;
    border-radius: var(--t-radius-md) !important;
    padding: 8px 16px !important;
    height: 44px !important;
    min-width: 140px !important;
    font-family: var(--t-font-heading) !important;
    font-weight: 600 !important;
}
.hd__categories-toggle:hover,
.hd__categories-toggle:focus-visible {
    background-color: var(--t-accent-hover) !important;
    border-color: var(--t-accent-hover) !important;
    color: #ffffff !important;
}

/* Force every descendant — text + icons + svg use elements — to render WHITE */
.hd__categories-toggle,
.hd__categories-toggle *,
.hd__categories-toggle .hd__categories-toggle-text,
.hd__categories-toggle .hd__categories-toggle-icon,
.hd__categories-toggle svg,
.hd__categories-toggle svg *,
.hd__categories-toggle .ic-tog,
.hd__categories-toggle .ic-cls,
.hd__categories-toggle .ic-tog use,
.hd__categories-toggle .ic-cls use {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Hover keeps white */
.hd__categories-toggle:hover *,
.hd__categories-toggle:hover svg,
.hd__categories-toggle:hover svg * {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* About-us page specific blocks (2026-05-08) */
.aboutus-team-mini {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: grid;
    gap: 0.75rem;
}
.aboutus-team-mini li {
    background-color: var(--t-secondary);
    border-left: 3px solid var(--t-tertiary);
    padding: 0.85rem 1rem;
    border-radius: 0 var(--t-radius-md) var(--t-radius-md) 0;
    line-height: 1.5;
}
.aboutus-team-mini li b {
    color: var(--t-primary);
    display: inline-block;
    margin-right: 4px;
}
.aboutus-cta-box {
    background-color: var(--t-tertiary-tint-15);
    border: 1px solid var(--t-tertiary);
    padding: 1.25rem 1.5rem;
    border-radius: var(--t-radius-lg);
    margin-top: 2rem;
    text-align: center;
}
.aboutus-cta-box a {
    color: var(--t-accent);
}
.aboutus-cta-box a:hover { color: var(--t-accent-hover); }

/* ==========================================================================
   QA Pass 9 — Pagination on-brand (2026-05-08)
   ========================================================================== */

.pagination__link a {
    border: 1px solid var(--t-border) !important;
    background: var(--t-bg-surface) !important;
    color: var(--t-text-main) !important;
    border-radius: var(--t-radius-md) !important;
    font-family: var(--t-font-heading) !important;
    transition: all var(--t-transition-fast) !important;
}

.pagination__link:hover a,
.pagination__link a:hover {
    background: var(--t-secondary) !important;
    border-color: var(--t-secondary-hover) !important;
    color: var(--t-text-main) !important;
}

.pagination__link:active a,
.pagination__link a:active {
    background: var(--t-secondary-hover) !important;
    border-color: var(--t-text-main) !important;
}

/* Active page: coral bg + white text */
.pagination__link.is-active a,
.pagination__link.st-on a,
.pagination__link.active a,
.pagination__link[aria-current="page"] a {
    background: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    pointer-events: none;
    cursor: default;
}

.pagination__link.is-active a:hover,
.pagination__link.st-on a:hover {
    background: var(--t-accent-hover) !important;
    border-color: var(--t-accent-hover) !important;
}

/* Disabled / ellipsis state */
.pagination__link.is-disabled a,
.pagination__link.disabled a {
    opacity: 0.4;
    pointer-events: none;
}