/* ==========================================================================
   Evara London — refinements
   Values taken directly from the approved design rather than approximated.
   Loaded last so it settles anything the base sheet got close-but-wrong.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */

.ev-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 72px);
}

.ev-eyebrow {
    margin: 0;
    font-family: var(--ev-font-body);
    font-size: 11px;
    letter-spacing: .42em;          /* the design runs much wider than a default */
    text-transform: uppercase;
    color: var(--ev-gold);
}

.ev-heading {
    margin: 0;
    font-family: var(--ev-font-display);
    font-weight: 400;
    font-size: clamp(30px, 4.4vw, 56px);
    letter-spacing: .05em;
    color: var(--ev-white);
    text-wrap: pretty;
}

.ev-subheading {
    margin: 0;
    max-width: 560px;
    font-family: var(--ev-font-accent);
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, .62);
}

/* ornament: hairline · lozenge · hairline */
/* inline-flex, not flex: as a block it filled the row and ignored the
   parent's text-align, so on centred sections (404, empty states) the
   hairline sat hard left under a centred heading. */
.ev-ornament { display: inline-flex; align-items: center; justify-content: center; gap: 14px; vertical-align: middle; }

.ev-ornament__line {
    display: block;
    width: clamp(48px, 8vw, 120px);
    height: 1px;
}

.ev-ornament__line:first-child { background: linear-gradient(90deg, rgba(152, 119, 81, 0), var(--ev-gold)); }
.ev-ornament__line:last-child  { background: linear-gradient(90deg, var(--ev-gold), rgba(152, 119, 81, 0)); }
.ev-ornament__mark { font-size: 11px; line-height: 1; color: var(--ev-gold-bright); }

/* left-aligned variant for split sections */
.ev-head--left { align-items: flex-start; text-align: left; }
.ev-head--left .ev-subheading { margin-inline: 0; }

/* --------------------------------------------------------------------------
   Product card — design spec: 4/5 portrait, Cinzel cream name, muted price
   -------------------------------------------------------------------------- */

.ev-product {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.ev-product__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;                       /* portrait, not square */
    border: 1px solid rgba(163, 152, 115, .34);
    background: var(--ev-navy-deep);
    display: block;
}

.ev-product__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

.ev-product:hover .ev-product__media img { transform: scale(1.07); }

.ev-product__flag {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    font-family: var(--ev-font-body);
    font-size: 9px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ev-navy);
    background: var(--ev-cream);
    padding: 5px 10px;
}

.ev-product__flag--out { background: rgba(5, 13, 31, .85); color: var(--ev-cream); border: 1px solid rgba(163, 152, 115, .5); }

.ev-product__name {
    margin: 0;
    font-family: var(--ev-font-display) !important;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ev-cream) !important;
    line-height: 1.5;
}

.ev-product__name a { color: inherit; }
.ev-product__name a:hover { color: var(--ev-gold-bright); }

.ev-product__price {
    margin: 7px 0 0;
    font-family: var(--ev-font-body) !important;   /* design uses the sans here */
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, .6) !important;
}

.ev-product__price del { color: rgba(255, 255, 255, .35); margin-right: 8px; }

/* --------------------------------------------------------------------------
   Collection card — matched to the same portrait proportion
   -------------------------------------------------------------------------- */

.ev-collection__media { aspect-ratio: 4 / 5; border: 1px solid rgba(163, 152, 115, .34); }
.ev-collection__media img { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.ev-collection:hover .ev-collection__media img { transform: scale(1.07); }

.ev-collection__name {
    font-family: var(--ev-font-display);
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ev-cream);
}

.ev-collection__count {
    margin-top: 7px;
    font-family: var(--ev-font-body);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* --------------------------------------------------------------------------
   Carousel controls — hairline lozenge, not a chunky button
   -------------------------------------------------------------------------- */

.ev-carousel { position: relative; padding-inline: 0; }

.ev-carousel__nav {
    position: absolute;
    top: 42%;
    transform: translateY(-50%) rotate(45deg);   /* diamond, echoing the ornament */
    width: 46px;
    height: 46px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(5, 13, 31, .55);
    border: 1px solid rgba(163, 152, 115, .45);
    border-radius: 0;
    color: var(--ev-gold);
    cursor: pointer;
    backdrop-filter: blur(3px);
    transition: border-color .35s ease, background .35s ease, color .35s ease, opacity .35s ease;
}

.ev-carousel__nav svg { transform: rotate(-45deg); width: 15px; height: 15px; }

.ev-carousel__nav:hover {
    background: var(--ev-gold);
    border-color: var(--ev-gold);
    color: var(--ev-navy);
}

.ev-carousel__nav[disabled] { opacity: .18; cursor: default; }
.ev-carousel__nav[disabled]:hover { background: rgba(5, 13, 31, .55); border-color: rgba(163, 152, 115, .45); color: var(--ev-gold); }

.ev-carousel__nav--prev { left: -23px; }
.ev-carousel__nav--next { right: -23px; }

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

@media (max-width: 991px) {
    .ev-carousel__nav { width: 40px; height: 40px; }
    .ev-carousel__nav--prev { left: -12px; }
    .ev-carousel__nav--next { right: -12px; }
}

/* --------------------------------------------------------------------------
   Buttons — a touch more air, hairline weight
   -------------------------------------------------------------------------- */

.ev-btn {
    font-size: 11px;
    letter-spacing: .28em;
    padding: 16px 40px;
    border-color: rgba(163, 152, 115, .55);
}

.ev-btn:hover { border-color: var(--ev-gold); }


/* --------------------------------------------------------------------------
   Overflow guards
   The carousel arrows sit outside their container (left/right: -23px), which
   can widen the page and push right-hand columns past the viewport edge.
   -------------------------------------------------------------------------- */

html, body { overflow-x: clip; max-width: 100%; }

.ev-container, .ev-story__inner, .ev-faq-section__inner, .ev-deal__inner { min-width: 0; }

/* grid children need min-width:0 or long words refuse to wrap and blow out
   the column instead */
.ev-story__copy,
.ev-story__media,
.ev-faq-section__intro,
.ev-deal__copy,
.ev-deal__media { min-width: 0; }

.ev-story__title,
.ev-deal__title,
.ev-heading {
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* ---------- empty states: keep the whole block centred ---------- */

.ev-empty .ev-subheading,
.ev-empty p { margin-inline: auto; }
.ev-empty .ev-eyebrow, .ev-empty .ev-heading { text-align: center; }


/* --------------------------------------------------------------------------
   Centred blocks: .ev-subheading has a max-width but margin:0, so inside a
   text-align:center parent the text centres while the BLOCK still hugs the
   left. Give it auto side margins wherever the section is centred.
   -------------------------------------------------------------------------- */

.ev-newsletter .ev-subheading,
.ev-head .ev-subheading,
.ev-center .ev-subheading,
.ev-empty .ev-subheading,
.ev-404 .ev-subheading,
.ev-auth .ev-subheading { margin-inline: auto !important; }

.ev-newsletter { text-align: center; }
.ev-newsletter .ev-eyebrow,
.ev-newsletter .ev-heading { text-align: center; }
.ev-newsletter__form { margin-inline: auto; justify-content: center; }