/* ==========================================================================
   Evara — responsive corrections
   ==========================================================================

   Loaded last, so it can correct the earlier sheets without editing rules
   that are already right at desktop width.

   Most of what is fixed here was not "a bit tight on a phone". It was
   structural:

     - Every carousel kept its desktop item count on a phone, because the
       count was written as an inline custom property and an inline custom
       property beats every media query in the stylesheet. Product cards
       rendered 74px wide. (Fixed at source in carousel-open.blade.php; the
       caps themselves live in evara.css.)

     - The listing and the cart both hand their content column a plain 1fr
       track below their breakpoint, where the desktop rule correctly says
       minmax(0, 1fr). A 1fr track takes its automatic minimum from the
       content, so the column held its desktop width — 763px inside a 375px
       screen — and everything past the screen edge was clipped away.

     - The mega menu is driven by mouseenter/mouseleave. A touchscreen fires
       neither, so on a phone no submenu could be opened at all. (Fixed in
       evara.js; the accordion styling is below.)

     - Several inputs sit below 16px. iOS Safari zooms the whole page when a
       field under 16px is focused, and does not zoom back out — which is
       what makes a site feel like everything went big and broke after a
       single tap into a search box.

   Breakpoints, matching what the rest of the theme already uses:
     1199  small laptop      991  tablet / drawer nav
      900  large phone       700  phone landscape
      600  phone             420  narrow phone
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Page-level guards
   -------------------------------------------------------------------------- */

/* A grid or flex item will not shrink below its content's min-content width
   unless it is told it may. This is the single most common reason a
   desktop-width column survives into a phone layout. */
.ev-listing__main,
.ev-cart__items,
.ev-cart__summary,
.ev-checkout__main,
.ev-checkout__aside,
.ev-acct__main,
.ev-pdp__media,
.ev-pdp__info { min-width: 0; }

/* Long unbroken strings — an order reference, a tracking number, an email
   address in a summary — cannot wrap and will push a column open. */
.ev-cart__name,
.ev-product__name,
.ev-journal__title,
.ev-prose,
td, th { overflow-wrap: break-word; }

img, video, iframe { max-width: 100%; }
img { height: auto; }


/* --------------------------------------------------------------------------
   2. iOS input zoom
   Any focusable field under 16px makes Safari scale the page up on focus and
   leave it there. 16px is a threshold, not a preference.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="number"], input[type="search"],
    input[type="url"], input[type="date"], select, textarea,
    .ev-input, .ev-select, .ev-qty__input {
        font-size: 16px !important;
    }

    /* Two of these are set by two-class rules that already carry !important
       — .ev-listing__sort .ev-select at 12px and the search overlay's input
       at 14px. !important alone does not beat them; the selector has to be
       at least as specific, so they are named here rather than left to lose
       quietly. */
    .ev-listing__sort .ev-select,
    .ev-listing__main select,
    .tp-search-area .tp-search-input input[type="search"],
    .tp-search-input input,
    .ev-cart__table input[type="number"],
    .ev-cart__table input[type="text"],
    .ev-cart__qty .ev-input,
    .ev-qty input.ev-qty__input,
    .ev-pdp__form .tp-cart-input[type="number"],
    .ev-pdp__form input.tp-cart-input {
        font-size: 16px !important;
    }

    /* The visual weight is kept by trimming the padding, so a 16px field does
       not read as heavier than the design intends. */
    .ev-listing__sort .ev-select,
    .ev-listing__main select { padding-block: 11px !important; }
}


/* --------------------------------------------------------------------------
   3. Header and the drawer navigation
   -------------------------------------------------------------------------- */

/* The caret buttons are injected into every nav item on load, whatever the
   width, so that a rotate from desktop to phone finds them already there.
   Above the breakpoint the desktop bar opens its panels on hover and already
   draws its own chevron, so this one must not be shown — unstyled, it would
   render as a second chevron beside the first. */
.ev-nav__sub { display: none; }

@media (max-width: 991px) {
    .ev-header__inner {
        padding: 12px 16px;
        gap: 10px;
        grid-template-columns: auto auto 1fr;
    }

    .ev-header__logo { order: 1; }
    .ev-burger { order: 2; }
    .ev-actions { order: 3; justify-self: end; gap: 6px; }

    .ev-header__logo img { height: 40px; }

    .ev-icon-btn, .ev-burger { width: 40px; height: 40px; }

    /* The drawer itself. It had no height limit, so four collections with
       their submenus open ran off the bottom of the screen with no way to
       reach the rest. */
    .ev-nav {
        /* `flex-wrap: wrap` is inherited from the desktop bar, where wrapping
           onto a second ROW is wanted. In a column-direction flex container
           with a height limit it means something quite different: the items
           wrap into a second COLUMN. Adding the max-height below is what
           triggered it — the drawer split in two, half the collections in a
           right-hand column overlapping the open submenu. Must be nowrap. */
        flex-wrap: nowrap;
        align-items: stretch;

        /* Not `calc(100dvh - 100%)`: a percentage in max-height resolves
           against the containing block's height, which here is the header,
           and it measured 44px past the bottom of a landscape phone. A plain
           viewport fraction cannot be wrong. dvh follows the mobile browser
           chrome as it hides and shows; vh is the fallback for older Safari. */
        max-height: 76vh;
        max-height: 76dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 8px 16px 24px;
        gap: 0;
        box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .8);
    }

    /* Each collection is a row: the link on the left stays a link, the caret
       on the right opens the list. Splitting them means tapping the name
       still opens the collection. */
    .ev-nav__item {
        position: relative;
        border-bottom: 1px solid rgba(163, 152, 115, .18);
    }

    .ev-nav > .ev-nav__link {
        display: block;
        padding: 15px 2px;
        border-bottom: 1px solid rgba(163, 152, 115, .18);
        font-size: 13px;
    }

    .ev-nav__item > .ev-nav__link {
        padding: 15px 46px 15px 2px;
        font-size: 13px;
        border-bottom: 0;
        min-height: 48px;
    }

    /* The desktop caret is decorative and duplicates the button. */
    .ev-nav__item > .ev-nav__link .ev-nav__caret { display: none; }

    .ev-nav__sub {
        display: flex;
        position: absolute;
        top: 0; right: -6px;
        width: 48px; height: 52px;
        align-items: center; justify-content: center;
        background: none; border: 0; padding: 0;
        color: var(--ev-gold);
        cursor: pointer;
    }

    .ev-nav__sub svg { transition: transform .25s ease; }
    .ev-nav__item.is-open > .ev-nav__sub svg { transform: rotate(180deg); }

    /* The panel becomes an accordion drawer rather than a floating mega
       panel: static flow, no shadow, no hover bridge. */
    .ev-mega {
        position: static;
        display: none;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .ev-nav__item.is-open > .ev-mega { display: block; }
    .ev-nav__item.is-open .ev-mega::before { content: none; }

    .ev-mega__inner {
        display: block;
        padding: 0 0 14px 10px;
        max-width: none;
    }

    .ev-mega__col { gap: 0; }

    /* The picture card is desktop merchandising and costs a lot of height,
       so it stays out. "Shop By" now earns its place: its links are scoped to
       the collection, so New Arrivals under AABHAR really does open AABHAR's
       newest. It is set apart from the subcategory list above it rather than
       reading as one long run of links. */
    .ev-mega__card { display: none; }

    .ev-mega__col--shop {
        margin-top: 10px;
        padding-top: 4px;
        border-top: 1px solid rgba(163, 152, 115, .16);
    }

    .ev-mega__label {
        display: block;
        padding: 6px 0 4px;
        font-size: 9px;
    }

    /* The tagline stays with its heading but wraps to its own line here —
       "AABHAR — The Ethnic Edit" does not fit one phone line. */
    .ev-mega__tagline {
        display: block;
        margin-top: 3px;
        font-size: 12.5px;
    }

    .ev-mega__sep { margin-bottom: 6px; }

    .ev-mega__link {
        display: block;
        padding: 11px 2px;
        font-size: 14px;
        min-height: 44px;
        line-height: 22px;
    }

    /* The page behind an open drawer must not scroll — on iOS that reads as
       the menu itself being broken. */
    body.ev-nav-open { overflow: hidden; }
}

@media (max-width: 400px) {
    /* Four 40px circles plus a burger will not fit beside a logo at 320px.
       Wishlist is the one that survives being reached from the account
       page instead. */
    .ev-actions .ev-icon-btn[aria-label="Wishlist"] { display: none; }
    .ev-header__logo img { height: 34px; }
    .ev-actions { gap: 4px; }
    .ev-icon-btn, .ev-burger { width: 36px; height: 36px; }
}


/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    /* The hero images are wide banners — 2172x724, a 3:1 ratio — with the
       wordmark and the line of copy set into the artwork itself. Forcing them
       into a taller box and cropping to fill threw most of that away: at 4/5
       exactly 27% of the image was on screen, which is why it read as cut in
       half.
       
       The box now takes the banner's own ratio, so the whole image is shown
       at whatever width the phone has. `contain` is the safety net for any
       slide uploaded at a different ratio — it letterboxes onto the navy
       behind, which is the same navy as the artwork, rather than cropping. */
    .ev-hero__slider {
        aspect-ratio: 3 / 1;
        min-height: 0;
    }

    .ev-hero__slide img { object-fit: contain; }
}

@media (max-width: 600px) {

    /* A 2px line is not a tap target. The bar stays 2px; the button around
       it grows to a reachable height. */
    .ev-hero__dots { gap: 10px; bottom: 14px; }

    .ev-hero__dot {
        width: 34px;
        height: 22px;
        background: transparent;
        display: flex;
        align-items: center;
    }

    .ev-hero__dot::after {
        content: '';
        display: block;
        width: 100%; height: 2px;
        background: rgba(253, 224, 191, .28);
        transition: background .4s ease;
    }

    .ev-hero__dot.is-active { background: transparent; }
    .ev-hero__dot.is-active::after { background: rgba(253, 224, 191, .85); }
}


/* --------------------------------------------------------------------------
   5. Carousels
   The per-view caps live in evara.css. What is left is the arrows, which sit
   at left/right -10px and so land on top of the cards once the track is the
   full width of a phone.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
    /* The track is swipeable, so the arrows are redundant here and cost
       nothing to remove — unlike overlapping the first and last card. */
    .ev-carousel__nav { display: none; }

    /* Bleed the track to the screen edge so a partly-visible next card reads
       as "there is more" rather than as a cut-off card. */
    .ev-carousel__track {
        padding-inline: 16px;
        margin-inline: -16px;
        scroll-padding-inline: 16px;
    }
}


/* --------------------------------------------------------------------------
   6. Product listing and category pages
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    /* The bug: the desktop rule is `240px minmax(0, 1fr)`, and the mobile
       override drops to a plain `1fr`. A 1fr track takes its automatic
       minimum from the content, so the column held its desktop width — 763px
       inside a 375px screen — and everything past the screen edge was
       clipped. Product photographs rendered 761px wide, 952px tall. */
    .ev-listing { grid-template-columns: minmax(0, 1fr); }

    .ev-listing__filters {
        inset: 0 auto 0 0;
        width: min(88vw, 360px);
        padding: 20px 18px 32px;
        overscroll-behavior: contain;
    }

    body.ev-filters-open { overflow: hidden; }

    /* Nothing dimmed the page behind the filter drawer, so it was not
       obvious the rest of the screen was inert. */
    .ev-filters-backdrop {
        position: fixed;
        inset: 0;
        z-index: 79;
        background: rgba(3, 8, 20, .6);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }

    .ev-filters-backdrop.is-open { opacity: 1; visibility: visible; }

    .ev-listing__bar { gap: 12px; }
    .ev-listing__tools { flex-wrap: wrap; gap: 10px; width: 100%; }
    .ev-listing__filter-open,
    .ev-listing__filter-close { min-height: 46px; }
}

@media (max-width: 767px) {
    .ev-listing__main .ev-grid,
    .ev-grid--4, .ev-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ev-grid { gap: 14px; }
}

/* Two across is kept right down to the narrowest phones. One column makes
   each card a full screen tall and turns browsing into scrolling. */
@media (max-width: 420px) {
    .ev-listing__main .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ev-grid { gap: 10px; }
    .ev-product__name,
    .ev-product__price { font-size: 12.5px; }
}


/* --------------------------------------------------------------------------
   7. Product detail
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .ev-pdp { grid-template-columns: minmax(0, 1fr); }
    .ev-pdp__gallery { position: static; }
}

@media (max-width: 600px) {
    .ev-pdp__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .ev-pdp__title { font-size: clamp(22px, 6vw, 30px); }

    /* Two 170px cards side by side leave no room for the text inside. */
    .ev-service { grid-template-columns: minmax(0, 1fr); gap: 12px; }

    /* A description list at 78px / 249px wraps every value onto three lines. */
    .ev-glance__list { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .ev-glance__list dt { padding-top: 10px; }
    .ev-glance__list dd { padding-bottom: 10px; }

    .ev-pdp__actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .ev-pdp__actions .ev-btn { width: 100%; text-align: center; }

    /* The review summary average was set at 44px. */
    .ev-rsum__avg { font-size: 32px; }
    .ev-rsum { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   8. Cart
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    /* The same 1fr blowout as the listing: the table's min-content is 473px,
       so the column refused to shrink and the Total and Remove columns were
       clipped off the right of the screen. */
    .ev-cart { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
    /* Six columns do not fit a phone. Each row becomes a card:

           [ thumb ]  Name                    (x)
                      Price
                      [- 1 +]           Total

       The headings are dropped, so the two prices carry their own labels
       from the data-label attributes on the cells. */
    .ev-cart__table thead { display: none; }

    .ev-cart__table,
    .ev-cart__table tbody,
    .ev-cart__table tr,
    .ev-cart__table td { display: block; width: 100%; }

    .ev-cart__table tr {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb name   remove"
            "thumb price  price"
            "thumb qty    total";
        gap: 4px 12px;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px solid rgba(163, 152, 115, .18);
    }

    .ev-cart__table td { padding: 0; border: 0; }

    .ev-cart__thumb       { grid-area: thumb; align-self: start; }
    .ev-cart__detail      { grid-area: name; }
    .ev-cart__price       { grid-area: price; }
    .ev-cart__qty         { grid-area: qty; }
    .ev-cart__line        { grid-area: total; text-align: right; }
    .ev-cart__remove-cell { grid-area: remove; text-align: right; }

    .ev-cart__thumb img { width: 76px; height: 76px; }

    /* Without the column headings the bare numbers are ambiguous. */
    .ev-cart__price::before,
    .ev-cart__line::before {
        content: attr(data-label) ' ';
        font-size: 10px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--ev-gold);
        margin-right: 6px;
    }

    .ev-cart__remove { display: inline-block; padding: 4px 8px; font-size: 26px; }

    .ev-cart__actions { flex-direction: column; }
    .ev-cart__actions .ev-btn { width: 100%; text-align: center; }

    /* The coupon field and its button were a nowrap row, so the field was
       squeezed down to a few characters. */
    .ev-cart__coupon-row { flex-wrap: wrap; }
    .ev-cart__coupon-row .ev-input,
    .ev-cart__coupon-row .ev-btn { flex: 1 1 100%; }
    .ev-cart__coupon-row .ev-btn { justify-content: center; }

    .ev-cart__summary { position: static; }
}


/* --------------------------------------------------------------------------
   9. Checkout
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .ev-checkout { grid-template-columns: minmax(0, 1fr); }
    .ev-checkout__aside { position: static; }
}

@media (max-width: 600px) {
    .ev-checkout-head { flex-wrap: wrap; gap: 8px; justify-content: center; text-align: center; }
    .ev-checkout-head img { height: 36px; margin-inline: auto; }

    .ev-checkout .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }

    /* The shipping and payment rows are the plugin's "magic radio": the real
       input is hidden and the circle is drawn on the label. The label needs
       to be tall enough to tap regardless. */
    .payment-checkbox-wrapper label,
    .shipping-method-wrapper label { min-height: 44px; display: flex; align-items: center; }
}


/* --------------------------------------------------------------------------
   10. Account, auth, forms
   -------------------------------------------------------------------------- */

/* The account area's classes are .ev-acct*, not .ev-account* — the latter is
   a legacy name still carrying rules in evara.css that nothing renders. Its
   own sheet already collapses the sidebar at 900px; what it does not do is
   guard the content track, so a wide order row could still push the column
   past the screen the way the listing and cart did. */

@media (max-width: 900px) {
    .ev-acct { grid-template-columns: minmax(0, 1fr); }
    .ev-acct__side { position: static; }
    .ev-acct__main { min-width: 0; }
}

@media (max-width: 991px) {
    .ev-acct__nav a { min-height: 46px; display: flex; align-items: center; }

    /* Invoices and any plugin view that still renders a real table: let it
       scroll inside its own box rather than widen the page. */
    .ev-acct__body .table-responsive,
    .ev-acct__body table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ev-acct-order__meta,
    .ev-acct-order__actions { flex-wrap: wrap; gap: 8px; }

    .ev-acct-chips { flex-wrap: wrap; }
}

@media (max-width: 600px) {
    .ev-acct-head__title { font-size: clamp(24px, 7vw, 32px); }
    .ev-acct-row { flex-wrap: wrap; gap: 10px; }
    .ev-acct-order__actions .ev-acct-btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 700px) {
    .ev-auth { grid-template-columns: minmax(0, 1fr); }
    .ev-auth__aside { display: none; }
    .ev-form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ev-btn--block { width: 100%; }
}


/* --------------------------------------------------------------------------
   11. Typography and section rhythm
   The complaint that everything reads "very big" on a phone is mostly this:
   headings sized in vw units tuned for a desktop viewport, and section
   padding that never comes down far enough.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
    .ev-section { padding: 44px 0; }
    .ev-container { padding-inline: 16px; }

    .ev-heading { font-size: clamp(21px, 5.6vw, 27px); }
    .ev-subheading { font-size: 15px; line-height: 1.65; }
    .ev-eyebrow { font-size: 9px; }
    .ev-head { margin-bottom: 26px; }

    /* Shofy's breadcrumb heading renders at 44px on a phone. */
    .breadcrumb__title,
    .tp-breadcrumb-title { font-size: 26px !important; line-height: 1.25 !important; }
    .breadcrumb__area,
    .tp-breadcrumb-area { padding-block: 34px !important; }

    .ev-prose { font-size: 17px; line-height: 1.8; }
    .ev-prose h2 { font-size: 22px; }
    .ev-prose h3 { font-size: 19px; }

    .ev-post__title { font-size: clamp(24px, 6.5vw, 32px); }
    .ev-journal { grid-template-columns: minmax(0, 1fr); }

    .ev-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

    /* Icon over text rather than beside it, two to a row. Side by side, each
       assurance took a full-width line for two short words and the four of
       them ran to most of a screen. */
    .ev-assurances { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }

    .ev-assurance {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 8px;
    }

    .ev-assurance__text { text-align: center; font-size: 10.5px; letter-spacing: .1em; line-height: 1.6; }
    .ev-assurance__mark { font-size: 19px; }
}

@media (max-width: 420px) {
    .ev-section { padding: 36px 0; }
    .ev-container { padding-inline: 14px; }
    .ev-heading { font-size: clamp(19px, 5.8vw, 24px); }
    .ev-btn { padding: 14px 22px; letter-spacing: .18em; font-size: 10.5px; }
}


/* --------------------------------------------------------------------------
   12. Tap targets
   Anything a thumb has to hit wants roughly 44px. These were 19-20px.
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .ev-footer a { display: inline-block; padding-block: 7px; }

    .ev-pagination .page-link,
    .ev-pagination .page-item a,
    .ev-pagination .page-item span {
        min-width: 44px; min-height: 44px;
        display: flex; align-items: center; justify-content: center;
    }

    .ev-qty__btn {
        min-width: 38px; min-height: 38px;
        display: flex; align-items: center; justify-content: center;
    }

    .ev-faq__q { min-height: 48px; }
}


/* --------------------------------------------------------------------------
   13. Tablet
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {
    .ev-listing__main .ev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ev-journal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ev-pdp { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   14. Landscape phones
   A 390x844 handset turned sideways is 844x390 — wide enough to escape every
   max-width rule above while only 390px tall.
   -------------------------------------------------------------------------- */

@media (max-height: 460px) and (orientation: landscape) {
    .ev-hero__slider { aspect-ratio: auto; height: 78vh; min-height: 240px; }
    .ev-section { padding: 30px 0; }
    .ev-nav { max-height: 74dvh; }
}


/* --------------------------------------------------------------------------
   15. auto-fit grids with a fixed minimum track
   -------------------------------------------------------------------------- */

/* `repeat(auto-fit, minmax(320px, 1fr))` cannot produce a track narrower than
   320px, so on a 320px screen — where the container is 292px after padding —
   the grid overflows by the difference no matter how few items it holds.
   .ev-story__inner is the worst of them: two tracks with a 300px minimum
   each, so it demanded 600px on every phone ever made.

   Each is named rather than fixed with a blanket rule, because the right
   answer differs — some want one column on a phone, some want two. */

@media (max-width: 700px) {
    .ev-story__inner,
    .ev-faq-section__inner,
    .ev-reviews__layout,
    .ev-contact,
    .ev-about__atelier,
    .ev-tabs__split { grid-template-columns: minmax(0, 1fr); }

    .ev-quotes { grid-template-columns: minmax(0, 1fr); }
    .ev-cards { grid-template-columns: minmax(0, 1fr); }

    /* These read fine two-up at phone width and would look sparse stacked. */
    .ev-stats,
    .ev-acct-cards,
    .ev-about__figures-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .ev-stats,
    .ev-acct-cards,
    .ev-about__figures-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}


/* --------------------------------------------------------------------------
   16. Pagination
   Laravel renders the pager inside its own <nav>. As a flex item in a
   centred .ev-pagination it keeps min-width:auto, so it stayed 763px wide
   inside a 347px column and the page numbers ran off the screen.
   -------------------------------------------------------------------------- */

.ev-pagination { min-width: 0; }

.ev-pagination > nav,
.ev-pagination nav {
    min-width: 0;
    max-width: 100%;
}

.ev-pagination .pagination {
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
}

@media (max-width: 600px) {
    /* Laravel's default view ships a "showing x to y of z" paragraph and a
       duplicate small-screen pager. Neither is wanted beside Evara's own. */
    .ev-pagination p.text-sm,
    .ev-pagination .hidden { display: none; }

    .ev-pagination .pagination { gap: 6px; }
}


/* --------------------------------------------------------------------------
   17. Checkout — shipping and payment rows as tap targets
   -------------------------------------------------------------------------- */

/* The real markup is  li.list-group-item > input.magic-radio + label , with
   the input hidden and the ring drawn on the label. The label was 20px tall,
   which is half a usable tap target — and on a phone these two rows are the
   last thing standing between a customer and an order.

   The ring is pinned at top:2px rather than centred, so simply padding the
   label would leave the circle at the top while the text moved down, so the
   ring is re-anchored to the label's middle here.

   The selected dot needs no rule of its own: it is a radial gradient painted
   into the ring (see evara-checkout.css), so it travels with it. */

@media (max-width: 991px) {
    .checkout-page .list-group-item > label,
    .checkout-page input.magic-radio + label,
    .checkout-page input.magic-checkbox + label {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding-block: 8px;
    }

    .checkout-page input.magic-radio + label::before,
    .checkout-page input.magic-checkbox + label::before {
        top: 50%;
        transform: translateY(-50%);
    }

    /* The row's own inner flex layout (name on the left, price on the right)
       must keep the full width now that the label is a flex container. */
    .checkout-page .shipping-method-wrapper .list-group-item label > div,
    .checkout-page .list-group-item label > div { flex: 1 1 auto; }
}


/* --------------------------------------------------------------------------
   18. The header stack on a phone
   Announcement bar plus header measured 171px on a 375x812 screen — a fifth
   of the display gone before any content, on the pages ad traffic lands on.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .ev-announce {
        padding: 7px 12px;
        font-size: 9.5px;
        letter-spacing: .12em;
        row-gap: 4px;
        line-height: 1.5;
    }

    /* The currency switcher takes a whole second row here. It only appears
       when more than one currency is configured, and on a phone it is worth
       less than the height it costs. */
    .ev-announce .ev-currency { display: none; }
}

@media (max-width: 400px) {
    .ev-announce { font-size: 9px; padding: 6px 10px; }
}


/* --------------------------------------------------------------------------
   19. Wishlist
   The same fault the cart had, missed the first time round: six columns in a
   table that measured 583px inside a 360px screen. The page did not scroll
   sideways, so the last two columns — Add to Bag and Remove — were simply
   cut off, which left no way to remove a saved piece on a phone at all.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
    .ev-wishlist thead { display: none; }

    .ev-wishlist,
    .ev-wishlist tbody,
    .ev-wishlist tr,
    .ev-wishlist td { display: block; width: 100%; }

    .ev-wishlist tr {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr) auto;
        grid-template-areas:
            "thumb name   remove"
            "thumb price  price"
            "thumb qty    qty"
            "buy   buy    buy";
        gap: 6px 12px;
        align-items: center;
        padding: 16px 0;
        border-bottom: 1px solid rgba(163, 152, 115, .18);
    }

    .ev-wishlist td { padding: 0; border: 0; }

    .ev-wishlist__thumb       { grid-area: thumb; align-self: start; }
    .ev-wishlist__detail      { grid-area: name; }
    .ev-wishlist__price       { grid-area: price; }
    .ev-wishlist__qty         { grid-area: qty; }
    .ev-wishlist__buy         { grid-area: buy; }
    .ev-wishlist__remove-cell { grid-area: remove; text-align: right; }

    .ev-wishlist__thumb img { width: 76px; height: 76px; }

    /* Without the column headings the bare number is ambiguous. */
    .ev-wishlist__price::before {
        content: attr(data-label) ' ';
        font-size: 10px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--ev-gold);
        margin-right: 6px;
    }

    /* Add to Bag spans the full width on its own row rather than being
       squeezed beside the stepper. */
    .ev-wishlist__buy .ev-btn { width: 100%; text-align: center; }
    .ev-wishlist__buy { margin-top: 6px; }

    .ev-wishlist__actions { flex-direction: column; }
    .ev-wishlist__actions .ev-btn { width: 100%; text-align: center; }
}


/* --------------------------------------------------------------------------
   20. Compactness on phones
   The homepage ran to 8,564px — about ten and a half screens — and the type
   was not the reason: headings were already 21.75px and body text 14px. The
   height was in the imagery. These bring the page down without shrinking
   anything anyone has to read.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
    /* The Women grid dropped to a single column below 560px, so three
       portraits stacked to 1,034px on their own — more than a full screen for
       one section. Two across is still perfectly legible at this size. */
    .ev-women__grid,
    .ev-women__grid--2,
    .ev-women__grid--3,
    .ev-women__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    .ev-women__name { font-size: 12px; letter-spacing: .1em; }

    /* Product imagery is portrait by design (4/5). On a phone that makes each
       card 442px tall — square keeps the whole catalogue readable while
       fitting noticeably more per screen. Desktop keeps the portrait crop. */
    .ev-product__media,
    .ev-collection__media { aspect-ratio: 1 / 1; }

    /* Section rhythm, one more notch down. */
    .ev-section { padding: 34px 0; }
    .ev-head { margin-bottom: 20px; }
    .ev-subheading { font-size: 14px; }
    .ev-rule { margin-top: 12px; }

    .ev-quote { padding: 20px 18px; }
    .ev-quote__text { font-size: 16px; line-height: 1.65; }
}

@media (max-width: 420px) {
    .ev-women__grid,
    .ev-women__grid--2,
    .ev-women__grid--3,
    .ev-women__grid--4 { gap: 10px; }

    .ev-section { padding: 28px 0; }
}


/* --------------------------------------------------------------------------
   21. The Evara Women row swipes on phones
   Every other block on the homepage — Curated Jewels, Featured Pieces, Evara
   Icons, Worn & Remembered — is a carousel you swipe. The Women grid was the
   odd one out: it stacked downward, so three portraits took most of a screen
   and read as a different kind of section than its neighbours.

   Converted in CSS alone, with no change to the markup: `grid-auto-flow:
   column` lays the same grid out as one row, and the overflow plus scroll
   snapping make it swipeable. The cards stay buttons, so tapping one still
   opens her portrait.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
    .ev-women__grid,
    .ev-women__grid--2,
    .ev-women__grid--3,
    .ev-women__grid--4 {
        display: grid;
        /* Cancels the two-column rule above; the row is defined by
           grid-auto-columns instead. */
        grid-template-columns: none;
        grid-auto-flow: column;
        /* Just under two-thirds, so the next portrait is always half in frame
           — that peek is what tells you the row moves. */
        grid-auto-columns: 62%;
        gap: 12px;

        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Stops a horizontal swipe from turning into the browser's
           back-gesture once the row reaches its end. */
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;

        /* Bleed to the screen edge so the row reads as continuing off it
           rather than stopping at a margin. */
        padding-inline: 16px;
        margin-inline: -16px;
        scroll-padding-inline: 16px;

        scrollbar-width: none;
    }

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

    .ev-women__grid > * {
        scroll-snap-align: start;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    /* A little wider on the narrowest phones, or the portrait gets too small
       to read a face in. */
    .ev-women__grid,
    .ev-women__grid--2,
    .ev-women__grid--3,
    .ev-women__grid--4 { grid-auto-columns: 70%; }
}