/* ==========================================================================
   Evara London — design system
   Converted from the approved design. Inline styles from the mockup are
   expressed here as reusable classes so markup stays dynamic and readable.
   Tokens live in partials/header-meta.blade.php (admin-editable).
   ========================================================================== */

/* ---------- base ---------- */

body {
    background: var(--ev-navy);
    color: var(--ev-cream);
    font-family: var(--ev-font-body);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .ev-display {
    font-family: var(--ev-font-display);
    font-weight: 400;
    letter-spacing: var(--ev-tracking-wide);
    color: var(--ev-white);
    text-wrap: pretty;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.ev-container { width: 100%; max-width: var(--ev-maxw); margin-inline: auto; padding-inline: var(--ev-gutter); }
.ev-section { padding: clamp(48px, 7vw, 104px) 0; background: var(--ev-navy); }
.ev-section--tight { padding: clamp(26px, 3vw, 40px) 0; }
.ev-center { text-align: center; }
.ev-muted { color: rgba(255, 255, 255, .68); }

/* gold hairline used between major bands */
.ev-hairline { height: 1px; background: linear-gradient(90deg, rgba(152,119,81,0), #987751, var(--ev-gold-bright), #987751, rgba(152,119,81,0)); }
.ev-hairline--thick { height: 2px; background: linear-gradient(90deg, #987751, #987751, var(--ev-gold-bright), #987751, #987751); }

/* ---------- announcement ---------- */

.ev-announce {
    position: relative;
    /* Above the sticky header, which also sits at 60 and would otherwise win
       on document order and swallow the top of the currency list. */
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: linear-gradient(90deg, var(--ev-navy-deep), var(--ev-navy-mid), var(--ev-navy-deep));
    color: var(--ev-cream);
    font-family: var(--ev-font-body);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 10px 16px;
}

.ev-announce__text {
    flex: 1 1 auto;
    text-align: center;
}

/* Matches the switcher's width so the announcement stays optically centred
   rather than sitting slightly left of it. */
.ev-announce__spacer,
.ev-currency {
    flex: 0 0 auto;
    min-width: 74px;
}

/* ---------- currency switcher ---------- */

.ev-currency {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.ev-currency__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 2px 0;
    color: var(--ev-cream);
    font: inherit;
    letter-spacing: .14em;
    cursor: pointer;
    opacity: .82;
    transition: opacity .2s ease;
}

.ev-currency__toggle:hover,
.ev-currency__toggle[aria-expanded="true"] {
    opacity: 1;
    color: var(--ev-gold-bright);
}

.ev-currency__list {
    position: absolute;
    z-index: 71;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 116px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #0d1a34;
    border: 1px solid rgba(212, 175, 122, .3);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .5);
}

.ev-currency__list[hidden] {
    display: none;
}

.ev-currency__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    color: rgba(253, 224, 191, .86);
    text-decoration: none;
    letter-spacing: .1em;
}

.ev-currency__list a:hover,
.ev-currency__list a.is-active {
    background: rgba(212, 175, 122, .14);
    color: var(--ev-gold-bright);
}

.ev-currency__symbol {
    opacity: .7;
    text-transform: none;
}

/* On a narrow screen the announcement wraps to its own line and the switcher
   sits under it, rather than squeezing both into one row. */
@media (max-width: 640px) {
    .ev-announce {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
    }

    .ev-announce__spacer {
        display: none;
    }

    .ev-announce__text,
    .ev-currency {
        flex: 1 0 100%;
        min-width: 0;
    }

    .ev-currency {
        justify-content: center;
    }
}

/* ---------- header ---------- */

.ev-header {
    position: sticky; top: 0; z-index: 60;
    background-color: rgba(5, 13, 31, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(163, 152, 115, .32);
}

.ev-header__inner {
    max-width: var(--ev-maxw); margin: 0 auto;
    padding: 16px clamp(18px, 3vw, 44px);
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: clamp(16px, 3vw, 48px);
}

.ev-header__logo img { height: 54px; width: auto; display: block; }

.ev-nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); flex-wrap: wrap; justify-content: center; }

.ev-nav__link {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--ev-font-display);
    font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ev-cream); padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: border-color .4s ease, color .4s ease;
}

.ev-nav__link:hover, .ev-nav__item:hover > .ev-nav__link { border-bottom-color: var(--ev-gold-bright); color: var(--ev-gold-bright); }
.ev-nav__caret { font-size: 8px; opacity: .7; }

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

.ev-icon-btn {
    position: relative; width: 38px; height: 38px;
    border: 1px solid rgba(163, 152, 115, .42); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .3s ease;
}

.ev-icon-btn:hover { border-color: var(--ev-gold-bright); }
.ev-icon-btn svg { stroke: var(--ev-cream); }

.ev-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 17px; height: 17px; border-radius: 50%;
    background: var(--ev-gold); color: var(--ev-navy);
    font-size: 10px; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
}

/* mega menu */
.ev-nav__item { position: static; }

.ev-mega {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(5, 13, 31, .98);
    border-bottom: 2px solid #987751;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
}

/* JS drives this now (see initMega): a pure :hover rule closes the panel the
   instant the cursor leaves the link, before it can reach the panel. */
.ev-nav__item.is-open .ev-mega { display: block; }

/* invisible bridge so the cursor can travel from link to panel */
.ev-nav__item.is-open .ev-mega::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -14px;
    height: 14px;
}

.ev-mega__inner {
    max-width: var(--ev-maxw); margin: 0 auto;
    padding: clamp(26px, 3vw, 44px) clamp(18px, 3vw, 44px);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(24px, 3vw, 48px); align-items: start;
}

.ev-mega__col { display: flex; flex-direction: column; gap: 14px; }
.ev-mega__label { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--ev-gold); }
.ev-mega__sep { height: 1px; background: rgba(163, 152, 115, .3); }
.ev-mega__link { font-size: 13.5px; font-weight: 300; color: rgba(255, 255, 255, .72); }
.ev-mega__link:hover { color: var(--ev-gold-bright); }
.ev-mega__card { display: flex; flex-direction: column; gap: 12px; }
.ev-mega__card-frame { padding: 6px; border: 1px solid rgba(163, 152, 115, .5); }
.ev-mega__card-frame img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.ev-mega__card-title { font-family: var(--ev-font-display); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ev-cream); }

/* mobile nav toggle */
.ev-burger { display: none; width: 38px; height: 38px; border: 1px solid rgba(163,152,115,.42); border-radius: 50%; align-items: center; justify-content: center; background: none; cursor: pointer; }

@media (max-width: 991px) {
    .ev-burger { display: flex; }
    .ev-header__inner { grid-template-columns: auto 1fr auto; }
    .ev-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: rgba(5,13,31,.99); padding: 18px clamp(18px,3vw,44px); border-bottom: 2px solid #987751; }
    .ev-nav.is-open { display: flex; }
    .ev-mega { position: static; box-shadow: none; border: 0; }
}

/* ---------- hero ---------- */

.ev-hero { position: relative; background: var(--ev-navy); }
.ev-hero__slider { position: relative; width: 100%; aspect-ratio: 2560/900; min-height: 340px; overflow: hidden; }
/* Every slide is stacked in the same place and the inactive ones were hidden
   with opacity alone — which hides them from the eye and from nothing else.
   They stayed clickable, and the last one in the markup sat on top of the pile,
   so whichever image was showing, a click followed the final slide's link.
   Visibility is toggled with it: that takes the hidden slides out of the click
   path and out of the tab order, and delaying it by the length of the fade
   keeps the cross-fade intact. */
.ev-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 1.6s;
}
.ev-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
}
.ev-hero__slide a { display: block; width: 100%; height: 100%; }
.ev-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-hero__vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -90px 120px -60px rgba(5,13,31,.9), inset 0 0 0 1px rgba(163,152,115,.18); }
.ev-hero__dots { position: absolute; left: 0; right: 0; bottom: clamp(16px, 2.4vw, 34px); display: flex; justify-content: center; gap: 14px; }
.ev-hero__dot { width: clamp(38px, 5vw, 72px); height: 2px; border: 0; padding: 0; cursor: pointer; background: rgba(253, 224, 191, .28); transition: background .4s ease; }
.ev-hero__dot.is-active { background: rgba(253, 224, 191, .85); }

/* ---------- assurances ---------- */

.ev-assurances { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(18px, 3vw, 44px); }
.ev-assurance { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; }
.ev-assurance__mark { font-family: var(--ev-font-display); font-size: 22px; color: var(--ev-gold); }
.ev-assurance__text { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .68); line-height: 1.7; }

/* ---------- section heading ---------- */

.ev-head { text-align: center; margin-bottom: clamp(30px, 4vw, 56px); }
.ev-eyebrow { font-size: 10px; letter-spacing: var(--ev-tracking-label); text-transform: uppercase; color: var(--ev-gold); margin-bottom: 12px; }
.ev-heading { font-size: clamp(24px, 3vw, 38px); margin: 0; }
.ev-subheading { margin-top: 14px; font-family: var(--ev-font-accent); font-size: clamp(15px, 1.5vw, 19px); line-height: 1.7; color: rgba(255, 255, 255, .7); max-width: 640px; margin-inline: auto; }
.ev-rule { width: 64px; height: 1px; margin: 18px auto 0; background: linear-gradient(90deg, transparent, var(--ev-gold), transparent); }

/* ---------- buttons ---------- */

.ev-btn {
    display: inline-block; font-family: var(--ev-font-body);
    font-size: 11px; letter-spacing: var(--ev-tracking-label); text-transform: uppercase;
    padding: 14px 34px; border: 1px solid var(--ev-gold); color: var(--ev-gold);
    background: transparent; cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.ev-btn:hover { background: var(--ev-gold); color: var(--ev-navy); }
.ev-btn--solid { background: var(--ev-gold); color: var(--ev-navy); }
.ev-btn--solid:hover { background: var(--ev-gold-bright); border-color: var(--ev-gold-bright); color: var(--ev-navy); }
.ev-btn--block { display: block; width: 100%; text-align: center; }

/* ---------- grid ---------- */

.ev-grid { display: grid; gap: clamp(16px, 2vw, 30px); }
.ev-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ev-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ev-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ev-grid--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1199px) { .ev-grid--6 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991px)  { .ev-grid--4 { grid-template-columns: repeat(3, 1fr); } .ev-grid--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .ev-grid--4, .ev-grid--3, .ev-grid--6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .ev-grid--2 { grid-template-columns: 1fr; } }

/* ---------- product card ---------- */

.ev-product { position: relative; text-align: center; }
.ev-product__media { position: relative; overflow: hidden; background: #0a1428; aspect-ratio: 1/1; border: 1px solid rgba(163,152,115,.18); }
.ev-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.ev-product:hover .ev-product__media img { transform: scale(1.06); }
.ev-product__name { font-family: var(--ev-font-display); font-size: 14px; letter-spacing: .04em; margin: 16px 0 6px; color: var(--ev-white); }
.ev-product__price { font-family: var(--ev-font-accent); font-size: 18px; color: var(--ev-gold); }
.ev-product__price del { color: rgba(253, 224, 191, .45); margin-right: 8px; font-size: 15px; }
.ev-product__flag { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 9px; letter-spacing: var(--ev-tracking-label); text-transform: uppercase; padding: 5px 10px; background: var(--ev-gold); color: var(--ev-navy); }
.ev-product__flag--out { background: rgba(5,13,31,.85); color: var(--ev-cream); border: 1px solid rgba(163,152,115,.5); }

.ev-product__actions { position: absolute; inset-inline: 0; bottom: 0; padding: 12px; display: flex; gap: 8px; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.ev-product:hover .ev-product__actions { opacity: 1; transform: none; }

/* ---------- collection / category card ---------- */

.ev-collection { position: relative; display: block; overflow: hidden; }
.ev-collection__media { aspect-ratio: 3/4; overflow: hidden; background: #0a1428; }
.ev-collection__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.ev-collection:hover .ev-collection__media img { transform: scale(1.07); }
.ev-collection__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 22px; background: linear-gradient(180deg, transparent 45%, rgba(5,13,31,.85)); text-align: center; }
.ev-collection__name { font-family: var(--ev-font-display); font-size: clamp(14px, 1.4vw, 18px); letter-spacing: .12em; text-transform: uppercase; color: var(--ev-white); }
.ev-collection__count { margin-top: 6px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ev-gold); }

/* ---------- editorial / story ---------- */

.ev-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: center; }
@media (max-width: 900px) { .ev-split { grid-template-columns: 1fr; } }
.ev-split__media img { width: 100%; display: block; object-fit: cover; }
.ev-frame { padding: 8px; border: 1px solid rgba(163, 152, 115, .45); }

/* ---------- testimonials ---------- */

/* testimonial styling lives in evara-sections.css (design-exact) */

/* ---------- faq ---------- */

.ev-faq { max-width: 860px; margin-inline: auto; }
.ev-faq__item { border-bottom: 1px solid rgba(163,152,115,.22); }
.ev-faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-family: var(--ev-font-display); font-size: 15px; letter-spacing: .04em; color: var(--ev-white); }
.ev-faq__q::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--ev-gold); font-size: 20px; }
.ev-faq__item.is-open .ev-faq__q::after { content: '−'; }
.ev-faq__a { display: none; padding: 0 0 22px; color: rgba(255,255,255,.7); line-height: 1.8; font-size: 14px; }
.ev-faq__item.is-open .ev-faq__a { display: block; }

/* ---------- newsletter ---------- */

.ev-newsletter { text-align: center; }
.ev-newsletter__form { display: flex; gap: 10px; max-width: 520px; margin: 26px auto 0; }
.ev-newsletter__form input { flex: 1; background: transparent; border: 1px solid rgba(163,152,115,.45); color: var(--ev-cream); padding: 14px 18px; font-family: var(--ev-font-body); font-size: 13px; }
.ev-newsletter__form input::placeholder { color: rgba(253,224,191,.45); }
.ev-newsletter__form input:focus { outline: none; border-color: var(--ev-gold-bright); }
@media (max-width: 560px) { .ev-newsletter__form { flex-direction: column; } }

/* ---------- footer ---------- */

.ev-footer { background: linear-gradient(180deg, var(--ev-navy-deep), var(--ev-navy)); border-top: 1px solid rgba(163,152,115,.28); padding: clamp(48px, 6vw, 86px) 0 0; }
.ev-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 56px); }
@media (max-width: 900px) { .ev-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ev-footer__grid { grid-template-columns: 1fr; } }
.ev-footer__title { font-family: var(--ev-font-display); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--ev-white); margin-bottom: 18px; }
.ev-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ev-footer__list a { font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,.7); }
.ev-footer__list a:hover { color: var(--ev-gold-bright); }
.ev-footer__bottom { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid rgba(163,152,115,.2); padding: 22px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,.55); }

/* ---------- page header (inner pages) ---------- */

.ev-page-head { padding: clamp(48px, 6vw, 96px) 0 clamp(28px, 3vw, 48px); text-align: center; border-bottom: 1px solid rgba(163,152,115,.2); }
.ev-page-head h1 { font-size: clamp(26px, 3.6vw, 46px); margin: 0; }
.ev-breadcrumb { margin-top: 14px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(253,224,191,.6); }
.ev-breadcrumb a:hover { color: var(--ev-gold-bright); }

/* ---------- forms (auth, checkout, account) ---------- */

.ev-form { max-width: 460px; margin-inline: auto; }
.ev-form--wide { max-width: 100%; }
.ev-field { margin-bottom: 18px; }
.ev-label { display: block; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ev-gold); margin-bottom: 8px; }
.ev-input, .ev-select, .ev-textarea {
    width: 100%; background: rgba(11,23,49,.4); border: 1px solid rgba(163,152,115,.35);
    color: var(--ev-cream); padding: 13px 16px; font-family: var(--ev-font-body); font-size: 14px;
}
.ev-input:focus, .ev-select:focus, .ev-textarea:focus { outline: none; border-color: var(--ev-gold); }
.ev-input::placeholder, .ev-textarea::placeholder { color: rgba(253,224,191,.4); }

/* ---------- tables / cart ---------- */

.ev-table { width: 100%; border-collapse: collapse; }
.ev-table th { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ev-gold); text-align: left; padding: 14px 12px; border-bottom: 1px solid rgba(163,152,115,.3); font-weight: 400; }
.ev-table td { padding: 18px 12px; border-bottom: 1px solid rgba(163,152,115,.15); font-size: 14px; color: rgba(255,255,255,.8); }

/* ---------- account layout ---------- */

.ev-account { display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (max-width: 860px) { .ev-account { grid-template-columns: 1fr; } }
.ev-account__nav { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(163,152,115,.25); }
.ev-account__nav a { display: block; padding: 14px 18px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75); border-bottom: 1px solid rgba(163,152,115,.15); }
.ev-account__nav a:hover, .ev-account__nav .is-active a { background: rgba(163,152,115,.12); color: var(--ev-gold-bright); }

/* ---------- reveal animation ---------- */

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal], .ev-hero__slide, .ev-product__media img { transition: none !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Product listing
   ========================================================================== */

.ev-listing { display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 3vw, 52px); align-items: start; }
@media (max-width: 991px) { .ev-listing { grid-template-columns: 1fr; } }

.ev-listing__filters { display: flex; flex-direction: column; gap: 30px; position: sticky; top: 110px; }
.ev-listing__filter-close, .ev-listing__filter-open { display: none; }

.ev-listing__bar {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
    padding-bottom: 20px; margin-bottom: clamp(22px, 3vw, 34px);
    border-bottom: 1px solid rgba(163, 152, 115, .22);
}

.ev-listing__count { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.ev-listing__tools { display: flex; align-items: center; gap: 12px; }
.ev-listing__sort { margin: 0; }
.ev-listing__sort .ev-select { padding: 10px 14px; font-size: 12px; letter-spacing: .1em; }

/* Botble's filter partials, restyled to the Evara palette */
.ev-listing__filters .widget-title,
.ev-listing__filters h4,
.ev-listing__filters .bb-filter-title {
    font-family: var(--ev-font-display); font-size: 12px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--ev-gold); margin-bottom: 14px;
}

.ev-listing__filters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ev-listing__filters li a, .ev-listing__filters label { font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,.72); cursor: pointer; }
.ev-listing__filters li a:hover, .ev-listing__filters label:hover { color: var(--ev-gold-bright); }
.ev-listing__filters input[type="checkbox"], .ev-listing__filters input[type="radio"] { accent-color: var(--ev-gold); width: 14px; height: 14px; margin-right: 8px; }
.ev-listing__filters input[type="range"] { accent-color: var(--ev-gold); width: 100%; }
.ev-listing__filters .widget, .ev-listing__filters .bb-filter-item { padding-bottom: 24px; border-bottom: 1px solid rgba(163,152,115,.18); }

@media (max-width: 991px) {
    .ev-listing__filters {
        position: fixed; inset: 0 30% 0 0; z-index: 80; background: var(--ev-navy-deep);
        padding: 24px; overflow-y: auto; transform: translateX(-100%);
        transition: transform .35s ease; border-right: 1px solid rgba(163,152,115,.3);
    }
    .ev-listing__filters.is-open { transform: none; }
    .ev-listing__filter-close, .ev-listing__filter-open { display: inline-block; }
    .ev-listing__filter-close { margin-bottom: 20px; }
}

/* pagination */
.ev-pagination { margin-top: clamp(32px, 4vw, 56px); display: flex; justify-content: center; }
.ev-pagination .pagination { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.ev-pagination .page-link,
.ev-pagination .page-item span,
.ev-pagination .page-item a {
    display: block; min-width: 40px; padding: 10px 12px; text-align: center;
    border: 1px solid rgba(163,152,115,.35); color: var(--ev-cream);
    font-size: 12px; letter-spacing: .1em; background: transparent;
}
.ev-pagination .page-item.active span,
.ev-pagination .page-item a:hover { background: var(--ev-gold); color: var(--ev-navy); border-color: var(--ev-gold); }
.ev-pagination .page-item.disabled span { opacity: .35; }
.ev-pagination svg { display: none; }

/* empty state */
.ev-empty { text-align: center; padding: clamp(48px, 8vw, 110px) 0; }

/* ==========================================================================
   Product detail
   ========================================================================== */

.ev-pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: start; }
@media (max-width: 900px) { .ev-pdp { grid-template-columns: 1fr; } }

.ev-pdp__stage { border: 1px solid rgba(163,152,115,.28); background: #0a1428; aspect-ratio: 1/1; overflow: hidden; }
.ev-pdp__stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-pdp__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ev-pdp__thumb { width: 74px; height: 74px; padding: 0; border: 1px solid rgba(163,152,115,.3); background: none; cursor: pointer; overflow: hidden; }
.ev-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-pdp__thumb.is-active, .ev-pdp__thumb:hover { border-color: var(--ev-gold-bright); }

.ev-pdp__title { font-size: clamp(24px, 3vw, 40px); margin: 6px 0 14px; }
.ev-pdp__rating { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 0 0 14px; }
.ev-stars { color: var(--ev-gold-bright); letter-spacing: 2px; }

.ev-pdp__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.ev-pdp__price-now { font-family: var(--ev-font-accent); font-size: clamp(24px, 2.6vw, 32px); color: var(--ev-gold); }
.ev-pdp__price del { font-family: var(--ev-font-accent); font-size: 19px; color: rgba(253,224,191,.45); }
.ev-pdp__save { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; padding: 5px 10px; background: var(--ev-gold); color: var(--ev-navy); }

.ev-pdp__intro { color: rgba(255,255,255,.72); line-height: 1.8; font-size: 14.5px; margin-bottom: 24px; }
.ev-pdp__form { margin: 24px 0; padding: 24px 0; border-block: 1px solid rgba(163,152,115,.22); }

/* Botble's cart form controls, restyled */
.ev-pdp__form .btn,
.ev-pdp__form button[type="submit"] {
    display: inline-block; font-family: var(--ev-font-body); font-size: 11px;
    letter-spacing: .28em; text-transform: uppercase; padding: 15px 34px;
    border: 1px solid var(--ev-gold); background: var(--ev-gold); color: var(--ev-navy);
    cursor: pointer; transition: background .25s ease;
}
.ev-pdp__form .btn:hover, .ev-pdp__form button[type="submit"]:hover { background: var(--ev-gold-bright); border-color: var(--ev-gold-bright); }
.ev-pdp__form input[type="number"], .ev-pdp__form .qty { background: rgba(11,23,49,.5); border: 1px solid rgba(163,152,115,.35); color: var(--ev-cream); padding: 12px; }
.ev-pdp__form label { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--ev-gold); }

.ev-pdp__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: rgba(255,255,255,.7); }
.ev-pdp__meta span { display: inline-block; min-width: 110px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ev-gold); }

/* tabs */
.ev-tabs { margin-top: clamp(40px, 5vw, 80px); }
.ev-tabs__nav { display: flex; gap: 28px; border-bottom: 1px solid rgba(163,152,115,.25); }
.ev-tabs__btn { background: none; border: 0; cursor: pointer; padding: 0 0 14px; font-family: var(--ev-font-display); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.ev-tabs__btn.is-active { color: var(--ev-gold-bright); border-bottom-color: var(--ev-gold-bright); }
.ev-tabs__panel { display: none; padding: 28px 0; color: rgba(255,255,255,.75); line-height: 1.85; font-size: 14.5px; }
.ev-tabs__panel.is-active { display: block; }

/* ==========================================================================
   Cart
   ========================================================================== */

.ev-cart { display: grid; grid-template-columns: 1fr 360px; gap: clamp(24px, 3vw, 56px); align-items: start; }
@media (max-width: 900px) { .ev-cart { grid-template-columns: 1fr; } }

.ev-right { text-align: right; }
.ev-cart__table td { vertical-align: middle; }
.ev-cart__thumb img { width: 90px; height: 90px; object-fit: cover; border: 1px solid rgba(163,152,115,.28); display: block; }
.ev-cart__name { font-family: var(--ev-font-display); font-size: 14px; color: var(--ev-white); letter-spacing: .03em; }
.ev-cart__name:hover { color: var(--ev-gold-bright); }
.ev-cart__qty .ev-input { width: 84px; padding: 9px 10px; text-align: center; }
.ev-cart__remove { font-size: 22px; line-height: 1; color: rgba(253,224,191,.5); }
.ev-cart__remove:hover { color: var(--ev-gold-bright); }
.ev-cart__actions { display: flex; gap: 12px; justify-content: space-between; margin-top: 26px; flex-wrap: wrap; }

.ev-cart__summary { border: 1px solid rgba(163,152,115,.3); padding: clamp(20px, 2.4vw, 30px); background: rgba(11,23,49,.4); position: sticky; top: 110px; }
.ev-cart__summary-title { font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--ev-gold); margin: 0 0 20px; }
.ev-cart__coupon { margin-bottom: 22px; }
.ev-cart__coupon-row { display: flex; gap: 8px; }
.ev-cart__totals { margin: 0 0 20px; padding: 20px 0 0; border-top: 1px solid rgba(163,152,115,.22); }
.ev-cart__totals > div { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; font-size: 14px; color: rgba(255,255,255,.78); }
.ev-cart__totals dt, .ev-cart__totals dd { margin: 0; }
.ev-cart__grand { padding-top: 14px; border-top: 1px solid rgba(163,152,115,.22); font-family: var(--ev-font-accent); font-size: 19px; }
.ev-cart__grand dd { color: var(--ev-gold); }
.ev-cart__note { font-size: 12px; margin: 0 0 18px; }

/* ==========================================================================
   Customer account
   Restyles the ecommerce plugin's account markup (bb-customer-*) rather than
   replacing it, so orders, addresses and password logic stay intact.
   ========================================================================== */

.ev-account-wrap { padding: clamp(32px, 5vw, 72px) 0; }
.ev-account-wrap .container, .ev-account-wrap .container-fluid { max-width: var(--ev-maxw); padding-inline: var(--ev-gutter); }

/* sidebar */
.bb-customer-sidebar-wrapper,
.bb-customer-sidebar {
    background: rgba(11, 23, 49, .45) !important;
    border: 1px solid rgba(163, 152, 115, .28);
    border-radius: 0 !important;
}

.bb-customer-sidebar-heading { border-bottom: 1px solid rgba(163, 152, 115, .22); padding-bottom: 16px; }
.bb-customer-sidebar-heading h5, .bb-customer-sidebar-heading .h5 { font-family: var(--ev-font-display); color: var(--ev-white); letter-spacing: .06em; }

.bb-customer-navigation .nav-link {
    border-radius: 0 !important;
    color: rgba(255, 255, 255, .74);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-left: 2px solid transparent;
}

.bb-customer-navigation .nav-link:hover { background: rgba(163, 152, 115, .12); color: var(--ev-gold-bright); }
.bb-customer-navigation .nav-link.active {
    background: rgba(163, 152, 115, .16) !important;
    color: var(--ev-gold-bright) !important;
    border-left-color: var(--ev-gold);
}

.bb-customer-navigation .nav-icon { color: inherit; }

/* content panel */
.bb-customer-content,
.ev-account-wrap .card {
    background: rgba(11, 23, 49, .4) !important;
    border: 1px solid rgba(163, 152, 115, .28) !important;
    border-radius: 0 !important;
    color: var(--ev-cream);
}

.ev-account-wrap .card-header { background: transparent !important; border-bottom: 1px solid rgba(163, 152, 115, .22) !important; }
.ev-account-wrap h1, .ev-account-wrap h2, .ev-account-wrap h3,
.ev-account-wrap h4, .ev-account-wrap h5 { font-family: var(--ev-font-display); color: var(--ev-white); font-weight: 400; }

/* forms */
.ev-account-wrap label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ev-gold); }
.ev-account-wrap .form-control,
.ev-account-wrap .form-select,
.ev-account-wrap input[type="text"],
.ev-account-wrap input[type="email"],
.ev-account-wrap input[type="tel"],
.ev-account-wrap input[type="password"],
.ev-account-wrap textarea,
.ev-account-wrap select {
    background: rgba(5, 13, 31, .6);
    border: 1px solid rgba(163, 152, 115, .35);
    border-radius: 0;
    color: var(--ev-cream);
    padding: 12px 14px;
    font-size: 14px;
}

.ev-account-wrap .form-control:focus,
.ev-account-wrap .form-select:focus,
.ev-account-wrap textarea:focus { background: rgba(5,13,31,.8); border-color: var(--ev-gold); box-shadow: none; color: var(--ev-cream); }
.ev-account-wrap select option { background: var(--ev-navy-deep); color: var(--ev-cream); }
.ev-account-wrap input[type="checkbox"], .ev-account-wrap input[type="radio"] { accent-color: var(--ev-gold); }

/* buttons */
.ev-account-wrap .btn-primary,
.ev-account-wrap button[type="submit"] {
    background: var(--ev-gold); border: 1px solid var(--ev-gold); border-radius: 0;
    color: var(--ev-navy); font-size: 11px; letter-spacing: var(--ev-tracking-label);
    text-transform: uppercase; padding: 13px 30px; font-weight: 400;
}

.ev-account-wrap .btn-primary:hover, .ev-account-wrap button[type="submit"]:hover { background: var(--ev-gold-bright); border-color: var(--ev-gold-bright); color: var(--ev-navy); }
.ev-account-wrap .btn-outline-primary, .ev-account-wrap .btn-secondary, .ev-account-wrap .btn-light {
    background: transparent; border: 1px solid var(--ev-gold); border-radius: 0; color: var(--ev-gold);
    font-size: 11px; letter-spacing: var(--ev-tracking-label); text-transform: uppercase;
}
.ev-account-wrap .btn-outline-primary:hover, .ev-account-wrap .btn-secondary:hover, .ev-account-wrap .btn-light:hover { background: var(--ev-gold); color: var(--ev-navy); }
.ev-account-wrap .btn-danger { border-radius: 0; }

/* tables + badges */
.ev-account-wrap table { color: var(--ev-cream); }
.ev-account-wrap table th { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ev-gold); font-weight: 400; border-color: rgba(163,152,115,.28) !important; }
.ev-account-wrap table td { border-color: rgba(163,152,115,.16) !important; font-size: 14px; }
.ev-account-wrap .badge { border-radius: 0; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
.ev-account-wrap .text-muted, .ev-account-wrap small { color: rgba(255,255,255,.58) !important; }
.ev-account-wrap a { color: var(--ev-gold); }
.ev-account-wrap a:hover { color: var(--ev-gold-bright); }
.ev-account-wrap img { border: 1px solid rgba(163,152,115,.22); }

/* auth pages (login / register / password) */
.ev-account-wrap .alert { border-radius: 0; background: rgba(11,23,49,.7); border: 1px solid rgba(163,152,115,.4); color: var(--ev-cream); }

/* ==========================================================================
   Section backgrounds — from the design. Textured navy behind alternating
   bands, with a gradient scrim so text contrast stays fixed.
   ========================================================================== */

.ev-section--bg1,
.ev-section--bg2,
.ev-section--bg3 { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; }

.ev-section--bg1 { background-image: linear-gradient(180deg, rgba(5,13,31,.82), rgba(5,13,31,.9)), var(--ev-bg-1); }
.ev-section--bg2 { background-image: linear-gradient(180deg, rgba(5,13,31,.86), rgba(5,13,31,.93)), var(--ev-bg-2); }
.ev-section--bg3 { background-image: linear-gradient(180deg, rgba(5,13,31,.84), rgba(5,13,31,.92)), var(--ev-bg-3); }

.ev-section--bg1, .ev-section--bg2, .ev-section--bg3 { border-top: 1px solid rgba(163,152,115,.18); }

.ev-header { background-image: linear-gradient(180deg, rgba(5,13,31,.92), rgba(5,13,31,.86)), var(--ev-bg-1); background-size: cover; background-position: center; }
.ev-mega { background-image: linear-gradient(180deg, rgba(5,13,31,.98), rgba(5,13,31,.99)), var(--ev-bg-1); background-size: cover; background-position: center; }

/* ==========================================================================
   Navigation: keep to a single line
   ========================================================================== */

.ev-nav { flex-wrap: nowrap; overflow: visible; }
.ev-nav__link { white-space: nowrap; font-size: clamp(10px, .82vw, 12.5px); letter-spacing: clamp(.1em, .16vw, .22em); }
.ev-header__inner { gap: clamp(10px, 1.6vw, 32px); }

@media (max-width: 1199px) {
    .ev-nav { gap: clamp(8px, 1.2vw, 18px); }
}

@media (max-width: 991px) {
    .ev-nav { flex-wrap: wrap; }
    .ev-nav__link { font-size: 12.5px; letter-spacing: .18em; white-space: normal; }
}

/* ==========================================================================
   Typography enforcement — Botble's own front-theme.css sets a base font on
   body/headings, so Evara's faces need to win on the storefront.
   ========================================================================== */

body, .ev-section, .ev-container, p, li, td, th, input, select, textarea, button {
    font-family: var(--ev-font-body);
}

h1, h2, h3, h4, h5,
.ev-heading, .ev-display, .ev-pdp__title,
.ev-collection__name, .ev-product__name, .ev-footer__title {
    font-family: var(--ev-font-display) !important;
    font-weight: 400;
}

.ev-pdp__price-now, .ev-subheading, .ev-quote__text, .ev-lead {
    font-family: var(--ev-font-accent) !important;
}

/* ---------- FAQ + prose ---------- */

/* ---------- long-form pages (policies, terms, anything written) ----------

   These were readable but undesigned: body copy at 78% white on navy, no
   rhythm between paragraphs and lists, and headings that sat at the same
   weight as everything else. The words are the whole point of these pages, so
   they get the same care as the rest of the shop. */

.ev-prose {
    max-width: 760px;
    margin-inline: auto;
    color: rgba(253, 224, 191, .84);
    /* Set exactly as the About page sets its prose — the policies are read the
       same way and had been sitting in the UI sans, which made them look like
       small print rather than part of the shop. */
    font-family: var(--ev-font-accent);
    font-size: 19px;
    line-height: 1.9;
    letter-spacing: 0;
}

/* The opening paragraph carries the page, so it is set larger in the accent
   serif — the same voice the About page and the product story blocks use. */
.ev-prose > p:first-of-type {
    font-family: var(--ev-font-accent);
    font-size: clamp(21px, 2.2vw, 28px);
    line-height: 1.6;
    color: var(--ev-cream);
    margin-bottom: 26px;
}

/* The colour has to be restated on the elements themselves, not left to
   inherit from .ev-prose. The parent theme carries a bare `p { color: … }`
   rule, and an element's own declaration beats an inherited value however
   specific the ancestor's selector is — so every paragraph in a policy page
   was rendering in Shofy's dark body grey on navy. */
.ev-prose p,
.ev-prose li,
.ev-prose td,
.ev-prose span:not([class]) { color: inherit; }

.ev-prose p { margin: 0 0 18px; }

.ev-prose h1,
.ev-prose h2,
.ev-prose h3,
.ev-prose h4 {
    font-family: var(--ev-font-display);
    font-weight: 400;
    color: var(--ev-cream);
    letter-spacing: .06em;
    margin: 38px 0 14px;
}

/* The About page's heading scale and tracking. */
.ev-prose h2 { font-size: clamp(20px, 2.4vw, 27px); letter-spacing: .16em; }
.ev-prose h3 { font-size: 17px; letter-spacing: .12em; text-transform: uppercase; }
.ev-prose h4 { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ev-gold-bright); }

/* A hairline under the major headings, as the section headings have. */
.ev-prose h2::after {
    content: '';
    display: block;
    width: 46px;
    height: 1px;
    margin-top: 12px;
    background: linear-gradient(90deg, var(--ev-gold-bright), rgba(163, 152, 115, 0));
}

/* Cormorant has no true bold at this weight — 600 rendered as a synthetic
   smear. About Us emphasises with colour instead, and so does this now. */
.ev-prose strong { color: var(--ev-cream); font-weight: 400; }

.ev-prose a {
    color: var(--ev-gold-bright);
    text-underline-offset: 3px;
}

/* Lists: gold markers, and room to breathe from the text around them. */
.ev-prose ul,
.ev-prose ol {
    margin: 0 0 22px;
    padding-left: 0;
    list-style: none;
}

.ev-prose ul > li,
.ev-prose ol > li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    font-size: 18px;
    line-height: 1.8;
}

.ev-prose ul > li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 15px;
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    background: var(--ev-gold-bright);
}

.ev-prose ol {
    counter-reset: ev-prose-list;
}

.ev-prose ol > li {
    counter-increment: ev-prose-list;
}

.ev-prose ol > li::before {
    content: counter(ev-prose-list) '.';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ev-gold-bright);
    font-size: 15px;
}

/* A paragraph straight after a list was colliding with it. */
.ev-prose ul + p,
.ev-prose ol + p {
    margin-top: 4px;
}

.ev-prose img {
    border: 1px solid rgba(163, 152, 115, .25);
    max-width: 100%;
    height: auto;
}

.ev-prose hr {
    border: 0;
    height: 1px;
    margin: 34px 0;
    background: linear-gradient(90deg, rgba(163, 152, 115, 0), rgba(163, 152, 115, .5), rgba(163, 152, 115, 0));
}

.ev-prose blockquote {
    margin: 26px 0;
    padding-left: 20px;
    border-left: 2px solid var(--ev-gold);
    font-family: var(--ev-font-accent);
    font-size: 19px;
    color: var(--ev-cream);
}

.ev-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 22px;
}

.ev-prose th,
.ev-prose td {
    border-bottom: 1px solid rgba(163, 152, 115, .22);
    padding: 10px 12px;
    text-align: left;
}

.ev-prose th {
    color: var(--ev-gold-bright);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
}

@media (max-width: 640px) {
    .ev-prose { font-size: 17.5px; }
    .ev-prose ul > li,
    .ev-prose ol > li { font-size: 17px; }
    .ev-prose > p:first-of-type { font-size: 20px; }
}

/* ---------- 404 ---------- */

.ev-404 { padding-block: clamp(60px, 9vw, 130px); }
.ev-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ==========================================================================
   Feature banner
   ========================================================================== */

.ev-banner { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 150px) 0; isolation: isolate; }
.ev-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ev-banner__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,13,31,.72), rgba(5,13,31,.86)); }
.ev-banner__inner { position: relative; text-align: center; }
.ev-banner--left .ev-banner__inner { text-align: left; }
.ev-banner--right .ev-banner__inner { text-align: right; }
.ev-banner--left .ev-subheading, .ev-banner--right .ev-subheading { margin-inline: 0; }
.ev-banner__cta { margin-top: 28px; }
.ev-banner .ev-heading { font-size: clamp(26px, 3.4vw, 46px); }

/* ==========================================================================
   Carousel — horizontal scroller for product and collection sections.
   Flex + scroll-snap so it works with no JS; arrows are enhancement.
   --ev-per-view controls how many items are visible at once.
   ========================================================================== */

.ev-carousel { position: relative; }

.ev-carousel__track {
    --ev-gap: clamp(16px, 2vw, 30px);
    --ev-per-view: var(--ev-cols, 4);
    display: flex;
    gap: var(--ev-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.ev-carousel__track::-webkit-scrollbar { display: none; }

.ev-carousel__track > * {
    /* Width follows how many are asked for across, but never past --ev-card-max.
     *
     * Dividing the container by the number across is right until the number is
     * small: a row set to two makes each card half the page, which on a wide
     * screen is a photograph the size of a poster. The ceiling keeps a card the
     * size of a card, and because the track is a scroller the spare width simply
     * shows the next piece instead of being padding. */
    --ev-card: clamp(
        240px,
        calc((100% - (var(--ev-per-view) - 1) * var(--ev-gap)) / var(--ev-per-view)),
        var(--ev-card-max, 380px)
    );
    flex: 0 0 var(--ev-card);
    max-width: var(--ev-card);
    scroll-snap-align: start;
    min-width: 0;
}

/* On a phone the card should fill the screen, so the ceiling is lifted and the
   per-view arithmetic decides on its own. */
@media (max-width: 600px) {
    .ev-carousel__track { --ev-card-max: 100%; }
}

.ev-carousel__nav {
    position: absolute; top: 40%; transform: translateY(-50%);
    width: 46px; height: 46px; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5, 13, 31, .85);
    border: 1px solid rgba(163, 152, 115, .5);
    color: var(--ev-cream);
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}

.ev-carousel__nav:hover { background: var(--ev-gold); border-color: var(--ev-gold); color: var(--ev-navy); }
.ev-carousel__nav[disabled] { opacity: .25; cursor: default; }
.ev-carousel__nav--prev { left: -10px; }
.ev-carousel__nav--next { right: -10px; }

@media (min-width: 1560px) {
    .ev-carousel__nav--prev { left: -56px; }
    .ev-carousel__nav--next { right: -56px; }
}


/* items visible per view, by breakpoint */
/* min(), not a flat number: a carousel asked for 2 across should stay 2 at
   1199px rather than being widened to 3. These cap the desktop intent, they
   do not replace it. */
@media (max-width: 1199px) { .ev-carousel__track { --ev-per-view: min(var(--ev-cols, 4), 3); } }
@media (max-width: 900px)  { .ev-carousel__track { --ev-per-view: min(var(--ev-cols, 4), 2.15); } }
@media (max-width: 600px)  { .ev-carousel__track { --ev-per-view: min(var(--ev-cols, 4), 1.15); } }

/* ---------- floating WhatsApp ----------
   Sits above the page but below any modal, so it never covers a dialog the
   customer is actually using. */

.ev-wa {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 75;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 16px 10px 10px;
    border-radius: 999px;
    background: #1faa54;
    color: #fff;
    text-decoration: none;
    font-family: var(--ev-font-body);
    font-size: 12.5px;
    letter-spacing: .04em;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
    transition: transform .2s ease, box-shadow .2s ease;
}

.ev-wa:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .46);
}

.ev-wa__icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.ev-wa__label {
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    transition: max-width .28s ease, opacity .2s ease, margin .28s ease;
}

.ev-wa__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: opacity .2s ease, max-width .28s ease;
}

.ev-wa__close:hover {
    background: rgba(255, 255, 255, .34);
}

/* Folded: icon only, until hovered. */
.ev-wa.is-collapsed { padding-right: 10px; }

.ev-wa.is-collapsed .ev-wa__label,
.ev-wa.is-collapsed .ev-wa__close {
    max-width: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.ev-wa.is-collapsed:hover { padding-right: 16px; }

.ev-wa.is-collapsed:hover .ev-wa__label {
    max-width: 220px;
    opacity: 1;
}

@media (max-width: 640px) {
    .ev-wa { right: 14px; bottom: 14px; }
    .ev-wa__label { max-width: 150px; }
}

/* The collection tagline, inline after its name in the mega menu. */
.ev-mega__tagline {
    display: inline;
    margin: 0;
    font-family: var(--ev-font-accent);
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    color: rgba(253, 224, 191, .62);
}

/* ---------- announcement bar: several messages, one at a time ----------
   Every message is in the markup so the bar is never empty without
   JavaScript; only the active one is shown. Kept in normal flow rather than
   stacked absolutely, so the bar's height follows its content instead of
   being pinned to whatever the first message happened to need. */

.ev-announce__line { display: none; }
.ev-announce__line.is-active { display: inline; }

/* Fades between messages. The bar itself never resizes, because every
   message is capped at 46 characters — one line at 320px. */
.ev-announce__text[data-ev-announce] .ev-announce__line.is-active {
    animation: ev-announce-in .5s ease both;
}

@keyframes ev-announce-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ev-announce__text[data-ev-announce] .ev-announce__line.is-active { animation: none; }
}

/* The coupon result, said next to the field rather than in a toast that
   floats away from the figure it is talking about. */
.ev-cart__coupon-msg { margin: 8px 0 0; font-size: 12px; color: var(--ev-gold); }
.ev-cart__coupon-msg.is-error { color: #e8927c; }

/* The chosen variation on a cart line — quieter than the piece's name, but
   the thing that tells two otherwise identical rows apart. */
.ev-cart__variant {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 300;
    color: rgba(255, 255, 255, .6);
}
/* The plugin's option extras land right under it and should read as one group. */
.ev-cart__detail p { margin: 2px 0 0; }
.ev-cart__detail p small { font-size: 12px; color: rgba(255, 255, 255, .6); }
.ev-cart__detail p small strong { color: rgba(255, 255, 255, .85); font-weight: 400; }


/* ==========================================================================
   A collection announced but not yet open
   ==========================================================================
   Shown in place of a listing, and in place of any piece inside it, while the
   collection is marked "Coming soon". Deliberately quiet and centred: it is a
   held door, not an error page, and it should read as intent rather than as
   something having gone wrong.
   ========================================================================== */

.ev-soon { padding: clamp(72px, 12vw, 160px) 0; background: var(--ev-navy); }

.ev-soon__inner {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.ev-soon__title {
    margin: 0;
    font-family: var(--ev-font-display);
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--ev-white);
    text-transform: uppercase;
}

.ev-soon__rule { width: min(260px, 60%); }

.ev-soon__text {
    margin: 0;
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.9;
    color: rgba(255, 255, 255, .72);
}

.ev-soon__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
}