:root {
    --color-bg: #fffaf3;
    --color-green-dark: #17372b;
    --color-green: #2f6b4f;
    --color-gold: #f26a2e;
    --color-gold-hover: #d94f17;
    --summer-coral: #f26a2e;
    --summer-sun: #ffbf47;
    --summer-cream: #fff3df;
    --summer-ink: #17372b;
    --summer-sand: #eadcc7;
}

html { scroll-behavior: smooth; }

.brand-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(10, 45, 31, .16));
}

footer .brand-logo { width: 48px; height: 48px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--summer-sun);
    outline-offset: 3px;
}

body {
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 191, 71, .12), transparent 27rem),
        radial-gradient(circle at 92% 34%, rgba(242, 106, 46, .08), transparent 30rem),
        var(--color-bg);
}

::selection { background: var(--summer-sun); color: var(--summer-ink); }

.summer-sale-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 9999;
    min-height: 42px;
    color: #fff;
    background: linear-gradient(95deg, #d94f17 0%, #f26a2e 52%, #ff8a3d 100%);
    box-shadow: 0 8px 30px rgba(103, 42, 18, .22);
}

.summer-sale-bar__inner {
    width: min(1180px, calc(100% - 32px));
    min-height: 42px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .035em;
}

.summer-sale-bar__tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    color: var(--summer-ink);
    background: var(--summer-sun);
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: .14em;
    white-space: nowrap;
}

.summer-sale-bar__copy { white-space: nowrap; }

.summer-sale-bar__timer {
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,.35);
    color: #fff8ea;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.summer-sale-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
    white-space: nowrap;
}

.summer-sale-bar__link:hover { background: #fff; color: var(--summer-coral); transform: translateY(-1px); }

.glass-nav { top: 42px; }
#mobileMenu { z-index: 10000 !important; }

.glass-nav.scrolled {
    background: rgba(255, 250, 243, .94) !important;
    border-bottom-color: rgba(23, 55, 43, .08) !important;
    box-shadow: 0 14px 40px rgba(42, 55, 39, .1) !important;
}

.hero-overlay {
    background:
        linear-gradient(90deg, rgba(12, 38, 29, .9) 0%, rgba(12, 38, 29, .54) 48%, rgba(12, 38, 29, .2) 100%),
        linear-gradient(0deg, rgba(12, 38, 29, .42), transparent 55%) !important;
}

.hero-slide, header > .absolute.bg-cover { filter: saturate(.92) contrast(1.04) sepia(.08); }

.campaign-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: #fff;
    background: rgba(242, 106, 46, .92);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(135, 49, 17, .25);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.campaign-hero-title .campaign-accent {
    color: var(--summer-sun);
    font-style: italic;
    text-shadow: 0 8px 32px rgba(255, 191, 71, .22);
}

.campaign-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

.campaign-primary,
.campaign-secondary {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 25px;
    border-radius: 999px;
    font-weight: 850;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.campaign-primary {
    color: #fff;
    background: var(--summer-coral);
    box-shadow: 0 16px 34px rgba(185, 67, 21, .33);
}

.campaign-primary:hover { background: var(--color-gold-hover); transform: translateY(-2px); box-shadow: 0 20px 38px rgba(185, 67, 21, .4); }
.campaign-secondary { color: #fff; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.1); backdrop-filter: blur(12px); }
.campaign-secondary:hover { background: #fff; color: var(--summer-ink); transform: translateY(-2px); }

.campaign-trust-row { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-top: 24px; color: rgba(255,255,255,.82); font-size: 12px; font-weight: 700; }
.campaign-trust-row i { color: var(--summer-sun); margin-right: 6px; }

.filter-panel-home,
.filter-panel {
    border: 1px solid rgba(242, 106, 46, .12) !important;
    box-shadow: 0 26px 70px rgba(46, 57, 43, .13) !important;
}

.quick-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    padding: 18px 4px 10px;
    scrollbar-width: none;
}

.quick-filter-row::-webkit-scrollbar { display: none; }

.quick-filter-btn {
    min-width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 17px;
    color: #5f665f;
    background: rgba(255,255,255,.9);
    border: 1px solid #eadfce;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(39,62,48,.06);
    transition: all .2s ease;
}

.quick-filter-btn:hover,
.quick-filter-btn.active {
    color: #fff;
    background: var(--summer-coral);
    border-color: var(--summer-coral);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(205,74,21,.2);
}

.faq-item {
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(23,55,43,.1);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(39,62,48,.06);
    overflow: hidden;
}

.faq-item summary {
    position: relative;
    padding: 22px 58px 22px 24px;
    color: var(--summer-ink);
    cursor: pointer;
    font-weight: 850;
    list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--summer-coral);
    font-size: 26px;
    font-weight: 500;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p { padding: 0 24px 24px; color: #68716b; line-height: 1.75; }

.input-clean { border-color: #f0e5d7 !important; background: rgba(255,255,255,.92) !important; }
.input-clean:focus { border-color: var(--summer-coral) !important; box-shadow: 0 0 0 4px rgba(242,106,46,.1) !important; }

.btn-gold,
button.bg-\[var\(--color-gold\)\],
a.bg-\[var\(--color-gold\)\] {
    background: linear-gradient(135deg, var(--summer-coral), #ec581b) !important;
    box-shadow: 0 12px 26px rgba(205, 74, 21, .24);
}

.card-hover {
    border-color: rgba(31, 67, 52, .09) !important;
    box-shadow: 0 12px 34px rgba(39, 62, 48, .07) !important;
}

.card-hover:hover { transform: translateY(-8px) !important; box-shadow: 0 24px 58px rgba(39, 62, 48, .14) !important; }
.card-hover img { transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease !important; }
.card-hover:hover img { filter: saturate(1.08); }

.sale-price { color: var(--summer-coral); font-weight: 900; line-height: 1; }
.sale-old-price { color: #9c958b; font-size: .78em; font-weight: 700; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.sale-price-label { color: var(--summer-coral); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.sale-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    color: #fff;
    background: var(--summer-coral);
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(180, 66, 22, .25);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.campaign-note {
    padding: 14px 16px;
    color: #7a3b1d;
    background: #fff2df;
    border: 1px solid #ffd6ae;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
}

.campaign-note i { color: var(--summer-coral); margin-right: 7px; }

section { position: relative; }
.sticky.top-32 { top: 160px !important; }
footer { background: #10281f !important; }
.wa-float { bottom: 24px !important; right: 24px !important; border: 4px solid rgba(255,255,255,.9); }

@media (max-width: 900px) {
    .summer-sale-bar__inner { width: calc(100% - 20px); gap: 8px; justify-content: space-between; }
    .summer-sale-bar__copy { overflow: hidden; text-overflow: ellipsis; }
    .summer-sale-bar__timer { display: none; }
    .summer-sale-bar__link { padding: 5px 9px; font-size: 0; }
    .summer-sale-bar__link i { font-size: 12px; }
}

@media (max-width: 640px) {
    .summer-sale-bar { min-height: 48px; }
    .summer-sale-bar__inner { min-height: 48px; }
    .summer-sale-bar__tag { font-size: 9px; padding: 5px 8px; }
    .summer-sale-bar__copy { font-size: 10px; letter-spacing: 0; }
    .glass-nav { top: 48px; }
    .glass-nav > div { height: 76px !important; }
    .brand-logo { width: 36px; height: 36px; }
    body > header { min-height: 680px !important; height: auto !important; padding-top: 170px !important; padding-bottom: 76px !important; }
    .campaign-hero-title { font-size: clamp(3.2rem, 17vw, 5rem) !important; }
    .campaign-primary, .campaign-secondary { width: 100%; }
    .filter-panel-home, .filter-panel { border-radius: 1.5rem !important; padding: 1.1rem !important; }
    .wa-float { width: 54px !important; height: 54px !important; font-size: 25px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
