/* Theme Name: ZeroY Starter
   Author: UBLASH Team
   Description: UBLASH Tender Pink & Cocoa Brown B2B Theme
*/

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text-body);
    background-color: var(--color-background);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-dark-cocoa);
    line-height: 1.2;
    margin-top: 0;
    font-weight: 400;
}

/* Title inside the product media box: same look as a heading, without putting a
   second heading (and a duplicate of the product name) above the <h1>. */
.media-box-title {
    font-family: var(--font-heading);
    color: var(--color-dark-cocoa);
    line-height: 1.2;
    font-weight: 400;
    font-size: 1.5rem;
    margin: 0 0 10px;
}

a {
    color: var(--color-dark-cocoa);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-berry-pink);
}

/* ================= Header Navigation ================= */
.site-header {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: 0 1px 0 rgba(75, 48, 45, 0.03), 0 8px 28px rgba(75, 48, 45, 0.04);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: var(--space-container);
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
}

.sub-heading {
    display: inline-block;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-berry-pink);
    margin-bottom: 8px;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-logo .logo-mark {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    letter-spacing: 0.05em;
    color: var(--color-dark-cocoa);
    line-height: 1;
}

.brand-logo .logo-tag {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-berry-pink);
    background: var(--color-bg-blossom-pink);
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    line-height: 1;
}

/* ---------- Top level items ---------- */
.main-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.005em;
    color: var(--color-dark-cocoa);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.nav-link:hover,
.nav-item:focus-within > .nav-link {
    background: var(--color-bg-cherry-milk);
    color: var(--color-berry-pink);
}

.nav-item.is-open > .nav-link {
    background: var(--color-bg-blossom-pink);
    color: var(--color-raspberry);
}

.caret {
    width: 7px;
    height: 7px;
    border-right: 1.75px solid currentColor;
    border-bottom: 1.75px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
    margin-top: -3px;
    opacity: 0.65;
    transition: transform 0.24s ease, opacity 0.18s ease;
}

.nav-link:hover .caret {
    opacity: 1;
}

.nav-item:hover .caret,
.nav-item:focus-within .caret,
.nav-item.is-open .caret {
    transform: rotate(225deg);
    margin-top: 2px;
}

/* ---------- Mobile trigger ---------- */
.nav-toggle {
    display: none;
    align-items: center;
    gap: 9px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 9px 16px;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-dark-cocoa);
    cursor: pointer;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
    display: block;
    width: 14px;
    height: 2px;
    background: var(--color-dark-cocoa);
    border-radius: 2px;
    position: relative;
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bar::before { top: -5px; }
.nav-toggle-bar::after { top: 5px; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.lang-select {
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%234B302D' d='M0 0l5 6 5-6z'/></svg>") no-repeat right 10px center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 8px 28px 8px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-dark-cocoa);
    cursor: pointer;
    outline: none;
    font-family: var(--font-body);
    transition: all 0.2s ease;
}

.lang-select:hover, .lang-select:focus {
    border-color: var(--color-berry-pink);
    box-shadow: 0 0 0 2px rgba(200, 92, 122, 0.15);
}

/* ---------- Panels: shared shell ---------- */
.nav-dropdown,
.mega-panel {
    display: none;
    position: absolute;
    background: var(--color-bg-white);
    border: 1px solid rgba(75, 48, 45, 0.07);
    border-radius: 18px;
    box-shadow: 0 22px 56px rgba(75, 48, 45, 0.16), 0 2px 6px rgba(75, 48, 45, 0.04);
    white-space: normal;
    z-index: 40;
    animation: ublashPanelIn 0.2s ease both;
}

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

/* Invisible bridges so the pointer can travel from the top-level link down into
   the panel without the panel closing on the way. Both panel types hang from
   the header container, so both bridges cover the same gap and stop inside the
   link's bottom padding, never over the clickable label. */
.mega-panel::before,
.nav-dropdown-groups::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -28px;
    height: 28px;
}

.nav-item.has-dropdown:hover > .nav-dropdown,
.nav-item.has-dropdown:focus-within > .nav-dropdown,
.nav-item.is-open > .nav-dropdown,
.nav-item.has-mega:hover > .mega-panel,
.nav-item.has-mega:focus-within > .mega-panel,
.nav-item.is-open > .mega-panel {
    display: block;
}

/* The grouped panels align to the right edge of the header container, so a
   panel can never run off the viewport no matter which item opens it. */
.nav-item.has-dropdown {
    position: static;
}

.nav-dropdown-groups {
    left: auto;
    right: 0;
    top: calc(100% + 12px);
    padding: 24px;
    display: none;
    gap: 26px;
}

.nav-item.has-dropdown:hover > .nav-dropdown-groups,
.nav-item.has-dropdown:focus-within > .nav-dropdown-groups,
.nav-item.has-dropdown.is-open > .nav-dropdown-groups {
    display: flex;
}

.menu-group {
    min-width: 215px;
    max-width: 270px;
}

.menu-group + .menu-group {
    border-left: 1px solid var(--color-border-light);
    padding-left: 30px;
}

.menu-group-title {
    margin: 0 0 14px;
    padding-bottom: 9px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-berry-pink);
    border-bottom: 1px solid var(--color-border-light);
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.menu-row a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.menu-row a:hover,
.menu-row a:focus {
    background: var(--color-bg-cherry-milk);
    transform: translateX(3px);
}

.menu-row-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-bg-blossom-pink);
    color: var(--color-berry-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s ease;
}

.menu-row a:hover .menu-row-icon {
    background: var(--color-berry-pink);
    color: #ffffff;
    transform: scale(1.1);
}

.menu-row-content {
    flex: 1;
}

.menu-row-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-dark-cocoa);
}

.menu-row a:hover .menu-row-label {
    color: var(--color-berry-pink);
}

.menu-row-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 3px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-milk-chocolate);
}

.menu-row-meta {
    display: block;
    margin-top: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-berry-pink);
}

.menu-see-all {
    display: inline-block;
    align-self: flex-start;
    margin-top: 14px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-dark-cocoa);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 2px;
}

.menu-see-all:hover {
    color: var(--color-berry-pink);
    border-bottom-color: var(--color-berry-pink);
}

/* ---------- Mega menu ---------- */
.nav-item.has-mega {
    position: static;
}

.mega-panel {
    left: 0;
    right: 0;
    top: calc(100% + 12px);
    width: 100%;
    padding: 0;
}

.mega-inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr 0.95fr;
    gap: 34px;
    padding: 30px 32px 26px;
}

.mega-panel-wide .mega-inner {
    grid-template-columns: 1fr 1fr 0.95fr;
}

.mega-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mega-col .menu-group-title {
    margin-bottom: 12px;
}

.mega-promo {
    border-left: 1px solid var(--color-border-light);
    padding-left: 34px;
    justify-content: flex-start;
}

.promo-card {
    background: linear-gradient(158deg, var(--color-bg-cherry-milk) 0%, var(--color-bg-blossom-pink) 100%);
    border: 1px solid rgba(200, 92, 122, 0.16);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.promo-card-alt {
    background: linear-gradient(158deg, var(--color-bg-soft-cream) 0%, var(--color-butter-cream) 100%);
    border-color: rgba(75, 48, 45, 0.1);
}

.promo-eyebrow {
    margin: 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-berry-pink);
}

.promo-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.28rem;
    line-height: 1.22;
    color: var(--color-dark-cocoa);
}

.promo-text {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--color-mocha-brown);
}

.promo-card .btn {
    margin-top: 4px;
}

.promo-link {
    font-size: 0.79rem;
    font-weight: 700;
    color: var(--color-dark-cocoa);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(75, 48, 45, 0.28);
}

.promo-link:hover {
    color: var(--color-berry-pink);
    text-decoration-color: currentColor;
}

.mega-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 26px;
    padding: 14px 32px;
    background: var(--color-bg-soft-cream);
    border-top: 1px solid var(--color-border-light);
    border-radius: 0 0 17px 17px;
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--color-milk-chocolate);
}

.mega-foot span::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--color-berry-pink);
    vertical-align: middle;
}

.mega-foot a {
    margin-left: auto;
    color: var(--color-berry-pink);
    font-weight: 700;
}

.mega-foot a:hover {
    color: var(--color-raspberry);
}

/* ---------- Mobile navigation ---------- */
@media (max-width: 1240px) {
    .nav-toggle {
        display: inline-flex;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 20px 24px;
        background: var(--color-bg-white);
        border-top: 1px solid var(--color-border-light);
        box-shadow: 0 22px 56px rgba(75, 48, 45, 0.16);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .main-nav.is-open {
        display: flex;
    }

    .nav-item {
        border-bottom: 1px solid var(--color-border-light);
    }

    .nav-link {
        justify-content: space-between;
        width: 100%;
        padding: 15px 4px;
        border-radius: 0;
        font-size: 0.95rem;
    }

    .nav-link:hover,
    .nav-item.is-open > .nav-link {
        background: transparent;
        color: var(--color-berry-pink);
    }

    .nav-item.has-mega {
        position: relative;
    }

    .nav-dropdown,
    .mega-panel {
        position: static;
        width: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        animation: none;
    }

    .mega-panel::before,
    .nav-dropdown-groups::before {
        display: none;
    }

    .nav-item.is-open > .nav-dropdown,
    .nav-item.is-open > .nav-dropdown-groups,
    .nav-item.is-open > .mega-panel {
        display: block;
    }

    .nav-dropdown-groups {
        flex-direction: column;
        gap: 20px;
        padding: 2px 0 20px;
    }

    .menu-group {
        min-width: 0;
        max-width: none;
    }

    .menu-group + .menu-group {
        border-left: none;
        padding-left: 0;
    }

    .menu-row a {
        padding: 11px 13px;
        background: var(--color-bg-cherry-milk);
    }

    .menu-row-desc {
        -webkit-line-clamp: 3;
    }

    .mega-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 14px 0 20px;
    }

    .mega-promo {
        border-left: none;
        padding-left: 0;
    }

    .mega-foot {
        padding: 16px 0;
        background: transparent;
        border-top: 1px solid var(--color-border-light);
        border-radius: 0;
        margin-bottom: 16px;
    }

    .mega-foot a {
        margin-left: 0;
    }
}
/* ================= Icons & Playful Touches ================= */
.ub-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}
.btn-icon {
    margin-right: 7px;
}
.sub-icon {
    margin-right: 6px;
    vertical-align: -2px;
}
.tag-icon {
    margin-right: 5px;
    vertical-align: -2px;
}

/* --- WhatsApp call-to-action chip ---------------------------------------
   Sits under the inquiry submit button on the contact, sample and quote
   forms. Deep berry gradient marks the fast channel as the highlighted
   action while staying inside the pink and cocoa palette. */
.wa-cta-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    text-align: center;
    background: var(--color-cta-tint);
    border: 1px solid var(--color-cta-line);
    border-radius: var(--radius-pill);
}
.wa-cta-chip .wa-cta-prompt {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-cta-ink);
}
.wa-cta-chip--sm {
    padding: 10px 14px;
    gap: 6px;
}
.wa-cta-chip--sm .wa-cta-prompt {
    font-size: 0.82rem;
}
.wa-cta-chip--center {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Response-time promise shown under a submit button, so the reply window
   reads as a commitment rather than small print. */
.reply-promise {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: fit-content;
    margin: 14px auto 0;
    padding: 9px 22px;
    border-radius: var(--radius-pill);
    background: #ffffff;
    border: 1px solid var(--color-cta-line);
    box-shadow: 0 3px 12px rgba(178, 69, 100, 0.12);
    color: var(--color-dark-cocoa);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}
.reply-promise strong {
    color: var(--color-cta-ink);
    font-weight: 800;
    letter-spacing: 0.01em;
}
.reply-promise .ub-icon {
    color: var(--color-cta-ink);
}
.wa-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 22px;
    font-size: 0.86rem;
    font-weight: 700;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--color-cta-start) 0%, var(--color-cta-end) 100%);
    border: none;
    border-radius: var(--radius-pill);
    text-decoration: none;
    box-shadow: 0 3px 12px var(--color-cta-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wa-cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--color-cta-shadow);
}
.wa-cta-button--lg {
    padding: 12px 26px;
    font-size: 0.94rem;
}

/* Pointing-hand hint placed just before a call-to-action button.
   The base glyph points up, so it is rotated to point right, at the button. */
.wa-point-hint {
    color: var(--color-cta-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: wa-point-nudge 1.6s ease-in-out infinite;
}
.wa-point-hint .ub-icon {
    transform: rotate(90deg);
}
@keyframes wa-point-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
    .wa-point-hint { animation: none; }
}
.stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #ffffff 0%, var(--color-bg-cherry-milk) 100%);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-berry-pink);
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(200, 92, 122, 0.15);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat-card:hover .stat-icon-wrap {
    transform: translateY(-4px) scale(1.12) rotate(6deg);
    background: linear-gradient(135deg, var(--color-bg-blossom-pink) 0%, #FFF0F5 100%);
    color: var(--color-raspberry);
    box-shadow: 0 8px 20px rgba(169, 63, 99, 0.22);
}

/* Playful badge hover animations */
.hero-badge {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(75, 48, 45, 0.08);
}
.badge-dot {
    animation: pulse-dot 2s infinite ease-in-out;
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.75; }
}

/* Micro-interactions for buttons - Aligned with lashmanufacturers.com signature berry rose */
.btn:hover .btn-icon {
    transform: scale(1.18);
}
.btn-primary {
    background: linear-gradient(135deg, #C25975 0%, #A83857 100%);
    box-shadow: 0 4px 14px rgba(194, 89, 117, 0.25);
    color: #ffffff !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #B54A67 0%, #942E4B 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(194, 89, 117, 0.35);
}

.btn-nav-sample {
    padding: 10px 22px;
    font-weight: 700;
    background: linear-gradient(135deg, #B24564 0%, #942E4B 100%) !important;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 14px rgba(178, 69, 100, 0.3) !important;
}
.btn-nav-sample:hover {
    background: linear-gradient(135deg, #9C3853 0%, #7E243D 100%) !important;
    box-shadow: 0 6px 18px rgba(178, 69, 100, 0.4) !important;
}

/* Vivid Accents & Card Tweaks */
.gateway-card {
    position: relative;
    overflow: hidden;
}
.gateway-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-berry-pink), var(--color-butter-cream), var(--color-lilac-milk));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gateway-card:hover::after {
    opacity: 1;
}

.product-item-card {
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.product-item-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(200, 92, 122, 0.12);
    border-color: var(--color-border);
}

.step-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-top: 3px solid transparent;
}
.steps-flow .step-card:nth-child(1) { border-top-color: var(--color-berry-pink); }
.steps-flow .step-card:nth-child(2) { border-top-color: var(--color-soft-coral); }
.steps-flow .step-card:nth-child(3) { border-top-color: var(--color-butter-cream); }
.steps-flow .step-card:nth-child(4) { border-top-color: var(--color-sage-milk); }
.steps-flow .step-card:nth-child(5) { border-top-color: var(--color-lilac-milk); }

.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(75, 48, 45, 0.1);
}
.step-number {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ================= Buttons ================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
}

.btn-primary {
    background: var(--color-dark-cocoa);
    color: #ffffff !important;
}

.btn-primary:hover {
    background: var(--color-berry-pink);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(200, 92, 122, 0.3);
}

.btn-sm {
    padding: 9px 18px;
    font-size: 0.85rem;
}

.btn-secondary {
    background: var(--color-bg-white);
    color: var(--color-dark-cocoa);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover {
    border-color: var(--color-berry-pink);
    color: var(--color-berry-pink);
}

/* ================= Shared Cards & Layout ================= */
.ublash-page {
    max-width: var(--space-container);
    margin: 50px auto 90px;
    padding: 0 24px;
}

.ublash-container {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 48px;
    box-shadow: var(--shadow-soft);
}

.page-intro {
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: 24px;
    margin-bottom: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.page-intro h1 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    margin: 0;
    color: var(--color-dark-cocoa);
}

.planning-badge {
    background: var(--color-butter-cream);
    color: var(--color-dark-cocoa);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.05em;
}

.page-summary p {
    font-size: 1.15rem;
    color: var(--color-mocha-brown);
    line-height: 1.7;
    margin: 0;
}

/* ================= Footer ================= */
.site-footer {
    background: #2E1B19; /* Deep cocoa luxury base */
    color: #D9C3BD;
    padding: 70px 24px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-container {
    max-width: var(--space-container);
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

.footer-brand .brand-logo .logo-mark {
    color: #FFFFFF;
}

.footer-brand .brand-logo .logo-tag {
    background: rgba(255, 255, 255, 0.15);
    color: #FFD9E5;
}

.brand-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 18px 0;
    color: #BA9F97;
    max-width: 320px;
}

.footer-contact-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pill-tag {
    font-size: 0.8rem;
    color: #FFD9E5;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    display: inline-block;
    width: fit-content;
}

.column-title {
    color: #FFFFFF;
    font-size: 1.05rem;
    font-family: var(--font-body);
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 0.02em;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    color: #BA9F97;
    font-size: 0.88rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #FFD9E5;
}

.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: #8C6A63;
    flex-wrap: wrap;
    gap: 16px;
}

.legal-nav a {
    color: #8C6A63;
}

.legal-nav a:hover {
    color: #FFD9E5;
}

.sep {
    margin: 0 8px;
}

/* ================= Category fact bar ================= */
.cat-fact-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 auto 34px;
    max-width: 900px;
}

.cat-fact {
    flex: 1 1 200px;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    box-shadow: var(--shadow-soft);
}

.cat-fact-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-milk-chocolate);
    margin-bottom: 5px;
}

.cat-fact-value {
    display: block;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-dark-cocoa);
    line-height: 1.45;
}

.cat-fact-docs {
    flex: 1 1 100%;
    background: var(--color-bg-soft-cream);
}
.archive-products-page {
    max-width: var(--space-container);
    margin: 40px auto 80px;
    padding: 0 24px;
}
.archive-header-banner {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 36px;
}
.archive-header-banner h1 {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    margin-bottom: 14px;
}
.archive-header-banner p {
    color: var(--color-milk-chocolate);
    font-size: 1.1rem;
    line-height: 1.6;
}
.category-nav-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.cat-pill {
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: #ffffff;
    border: 1px solid var(--color-border);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark-cocoa);
    transition: all 0.2s ease;
}
.cat-pill:hover,
.cat-pill.active {
    background: var(--color-dark-cocoa);
    color: #ffffff;
    border-color: var(--color-dark-cocoa);
}
.archive-products-page .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 960px) {
    .archive-products-page .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .archive-products-page .products-grid {
        grid-template-columns: 1fr;
    }
}
.ublash-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 40px 0 8px;
}
.ublash-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-white);
    color: var(--color-dark-cocoa);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ublash-pagination a.page-numbers:hover,
.ublash-pagination a.page-numbers:focus-visible {
    background: var(--color-bg-tender-pink);
    border-color: var(--color-berry-pink);
    color: var(--color-berry-pink);
}
.ublash-pagination .page-numbers.current {
    background: var(--color-dark-cocoa);
    border-color: var(--color-dark-cocoa);
    color: #ffffff;
}
.ublash-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    min-width: 20px;
}
@media (max-width: 640px) {
    .ublash-pagination .page-numbers {
        min-width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }
}
.archive-products-page .product-item-card {
    background: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
}
.archive-products-page .product-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 14px;
}
.archive-products-page .product-sku {
    color: var(--color-milk-chocolate);
}
.archive-products-page .product-moq {
    color: var(--color-berry-pink);
    background: var(--color-bg-blossom-pink);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}
.archive-products-page .product-title {
    font-size: 1.35rem;
    margin-bottom: 10px;
    color: var(--color-dark-cocoa);
}
.archive-products-page .product-highlight {
    font-size: 0.9rem;
    color: var(--color-milk-chocolate);
    margin-bottom: 20px;
    line-height: 1.5;
}
.archive-products-page .product-specs {
    border-top: 1px dashed var(--color-border-light);
    padding-top: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.88rem;
}
.archive-products-page .spec-row {
    display: flex;
    justify-content: space-between;
}
.archive-products-page .spec-name {
    color: var(--color-milk-chocolate);
}
.archive-products-page .spec-val {
    color: var(--color-dark-cocoa);
    font-weight: 500;
    text-align: right;
}
.archive-products-page .price-highlight {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #f9ebf0;
}
.archive-products-page .price-val {
    font-weight: 700;
    color: var(--color-berry-pink);
    font-family: var(--font-heading);
    font-size: 1.05rem;
}
.product-footer {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.product-footer .btn {
    flex: 1 1 0;
}

/* ---------- Header WhatsApp Button ---------- */
.header-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--color-cta-start) 0%, var(--color-cta-end) 100%);
    border-radius: var(--radius-pill);
    text-decoration: none;
    box-shadow: 0 2px 8px var(--color-cta-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.header-wa-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--color-cta-shadow);
}
/* ---------- Header: keep the whole bar inside the viewport ---------- */
/* Below the width where the full nav still fits, the WhatsApp button keeps its
   icon and drops the label (the link still carries an aria-label and a title),
   so the action cluster stops widening the page. */
@media (max-width: 1240px) {
    .header-wa-text {
        display: none;
    }
    .header-wa-btn {
        padding: 7px 10px;
    }
}

/* Narrow tablets and phones: the action cluster moves onto its own line under
   the logo, which keeps every control visible without a sideways scrollbar. */
@media (max-width: 700px) {
    .header-inner {
        flex-wrap: wrap;
        padding: 10px 16px;
        row-gap: 8px;
    }

    .header-actions {
        flex: 1 1 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .lang-select {
        padding: 7px 24px 7px 10px;
        font-size: 0.76rem;
    }
}

/* Very small phones: the WhatsApp icon leaves the bar (the number stays in the
   footer and on the contact page) and the logo keeps its mark only, so the bar
   stays two tidy lines instead of three. */
@media (max-width: 360px) {
    .header-wa-btn {
        display: none;
    }

    .brand-logo .logo-tag {
        display: none;
    }
}

/* ---------- Footer Contact Interactive Buttons ---------- */
.footer-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    width: fit-content;
}
.footer-contact-btn--wa {
    background: linear-gradient(135deg, var(--color-cta-start) 0%, var(--color-cta-end) 100%);
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.footer-contact-btn--wa:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
}
.footer-contact-btn--mail {
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-dark-cocoa) !important;
    border: 1px solid var(--color-border);
}
.footer-contact-btn--mail:hover {
    background: #ffffff;
    color: var(--color-berry-pink) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ---------- Contact Page Email Action Button ---------- */
.email-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-dark-cocoa) !important;
    background: var(--color-bg-cherry-milk);
    border: 1px solid var(--color-border);
    text-decoration: none;
    transition: all 0.2s ease;
    width: fit-content;
}
.email-cta-button:hover {
    background: #ffffff;
    color: var(--color-berry-pink) !important;
    border-color: var(--color-berry-pink);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(200, 92, 122, 0.15);
}

/* ---------- Global Floating Quick Action Dock ---------- */
.ublash-float-dock {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}
.ublash-float-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.ublash-float-btn--wa {
    background: linear-gradient(135deg, var(--color-cta-start) 0%, var(--color-cta-end) 100%);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.ublash-float-btn--wa:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 24px var(--color-cta-shadow);
}
.ublash-float-btn--mail {
    background: #ffffff;
    color: var(--color-dark-cocoa) !important;
    border: 1px solid var(--color-border);
}
.ublash-float-btn--mail:hover {
    transform: translateY(-3px) scale(1.03);
    color: var(--color-berry-pink) !important;
    border-color: var(--color-berry-pink);
    box-shadow: 0 8px 24px rgba(200, 92, 122, 0.2);
}
@media (max-width: 640px) {
    .ublash-float-dock {
        right: 14px;
        bottom: 16px;
        gap: 8px;
    }
    .ublash-float-label {
        display: none;
    }
    .ublash-float-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
}


/* Product page FAQ, rendered from the product_faq repeater. */
.product-faq-section {
    margin-top: 50px;
}

.product-faq-section > h3 {
    margin: 4px 0 18px;
}

.product-faq-list {
    display: grid;
    gap: 10px;
}

.product-faq-item {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}

.product-faq-item > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-dark-cocoa);
    list-style: none;
}

.product-faq-item > summary::-webkit-details-marker {
    display: none;
}

.product-faq-item > summary::after {
    content: "+";
    float: right;
    font-weight: 700;
    color: var(--color-raspberry);
}

.product-faq-item[open] > summary::after {
    content: "\2013";
}

.product-faq-item > p {
    margin: 12px 0 0;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--color-dark-cocoa);
}