/* Hide the injected mobile-only filters close button outside of mobile */
.filters-close {display: none;}

/* Hide the JS-injected mobile menu hamburger on desktop (mobile breakpoints
   re-show it via display: inline-flex !important). */
.mobile-menu-toggle {display: none;}

/* =====================================================================
 * Vista Readers — mobile / responsive overrides
 * Breakpoints:
 *   ≤1100px  small desktop / large tablet
 *   ≤900px   tablet — nav collapses to hamburger
 *   ≤600px   mobile
 * Loaded after main.css/shop.css/cart.css/checkout.css/accounts.css so all
 * rules in here win the cascade.
 * ===================================================================== */

/* Wrappers: keep padding inside viewport on phones only — without this width:100%
   + padding overflows, pushing content off the right edge of the screen. Scoped
   to ≤768px so the desktop wrapper sizes (e.g. .wrapper-sml's max-width) aren't
   capped to 100% and the page can centre properly. */
@media (max-width: 768px) {
    .wrapper, .wrapper-sml, .wrapper-lrg, .wrapper-content {box-sizing: border-box; max-width: 100%;}
    .wrapper *, .wrapper-sml *, .wrapper-lrg *, .wrapper-content * {box-sizing: border-box;}
    body {overflow-x: hidden;}
}

/* Content pages (terms, about, faq, etc.) — matches .wrapper-sml on desktop */
.wrapper-content {max-width: 900px; margin: 0 auto; padding: 0 32px; box-sizing: border-box;}

/* Category showcase — clean sequential animation.
   Forward pass (0-7.5s):  tile 1→2→3→4→5 each slides side→front, no overlap.
   Hold all front (7.5-8.5s).
   Reverse pass (8.5-16s): tile 1→2→3→4→5 each slides front→side, no overlap.
   Hold all side (16-17s).
   Total cycle: 17s, each tile delayed 1.5s after the previous.
   Hover pauses. Overrides the "rollover disabled" rule in main.css. */
.product-tile figure img:nth-child(2) {display: block !important;}
/* Kill the 0.3s `left` transition that main.css applies — otherwise the
   `:hover` rule's static left value triggers a transition that overrides
   the animation. With transitions off, the animation's keyframe values
   win the cascade and hover has no visible effect. */
.grid-5 > .product-tile figure img {transition: none !important;}
/* Neutralise the legacy :hover left swaps for these animated tiles. */
.grid-5 > .product-tile:hover figure img:nth-child(1),
.grid-5 > .product-tile:hover figure img:nth-child(2),
.grid-5 > .product-tile:hover figure img:only-child {left: inherit;}
@keyframes tile-side-slide {
    0%      {left: 50%;}
    8.823%  {left: -50%;}   /* 1.5s into 17s = front showing */
    50%     {left: -50%;}   /* hold */
    58.823% {left: 50%;}    /* slide back to side */
    100%    {left: 50%;}
}
@keyframes tile-front-slide {
    0%      {left: 150%;}
    8.823%  {left: 50%;}
    50%     {left: 50%;}
    58.823% {left: 150%;}
    100%    {left: 150%;}
}
.grid-5 > .product-tile figure img:nth-child(1) {animation: tile-side-slide  17s ease-in-out infinite;}
.grid-5 > .product-tile figure img:nth-child(2) {animation: tile-front-slide 17s ease-in-out infinite;}
.grid-5 > .product-tile:nth-child(2) figure img {animation-delay: 1.5s;}
.grid-5 > .product-tile:nth-child(3) figure img {animation-delay: 3s;}
.grid-5 > .product-tile:nth-child(4) figure img {animation-delay: 4.5s;}
.grid-5 > .product-tile:nth-child(5) figure img {animation-delay: 6s;}
/* Animation keeps running even on hover — keyframe `left` values override the
   default `.product-tile:hover` rules so the auto-cycle isn't interrupted. */
@media (prefers-reduced-motion: reduce) {
    .grid-5 > .product-tile figure img {animation: none;}
}

/* NOTE: previous mask-image edge fade on the swipers was removed — it conflicted
   with Swiper's loop-mode transforms and made the slides disappear. .productSwiper
   already has its own white-gradient fade via main.css ::before/::after, and
   .similarSwiper relies on overflow:hidden as a clean cut. */

/* Touch devices: disable the hover image-swap on product cards.
   On phones a tap leaves the card in hover state, sliding the first image off
   and showing the second — which on cards without a true second image leaves
   a blank space. Hide the second image and keep the first centred. */
@media (hover: none) {
    .product-card figure img:nth-child(2) {display: none;}
    .product-card:hover figure img:nth-child(1),
    .product-card:hover figure img:only-child {left: 50%;}
}


/* ─── 1400px ─────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
    /* Product gallery: shrink the thumbnail column so the main image gets more room. */
    .product-images {grid-template-columns: 100px 1fr;}
}


/* ─── 1100px ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .wrapper, .wrapper-sml, .wrapper-lrg {padding-inline: 24px;}
    header .wrapper {padding: 0 24px;}
    .grid-5 {grid-template-columns: repeat(3, 1fr) !important; gap: 20px;}
    .grid-4, .shop-grid:not(.grid-3):not(.grid-5) {grid-template-columns: repeat(3, 1fr) !important; gap: 20px;}
    .dropdown-columns {gap: 2vw;}
    .auth-grid {gap: 32px;}
    .checkout-grid {grid-template-columns: 1.4fr 1fr; gap: 32px;}
    .shop-banner h1 {font-size: 36px;}
    .banner article h1 {font-size: 5vw; line-height: 1.05;}
}


/* ─── 900px — tablet / hamburger nav ─────────────────────────────────── */
@media (max-width: 900px) {

    /* ──── Header top strip ──── */
    .header-top {padding: 6px 12px;}
    .header-top p {font-size: 10px; letter-spacing: 1px;}

    /* ──── Home page: stop header overlaying the banner on mobile ──── */
    .home header {position: relative !important; background: #fff; color: #2C2C2C;}
    .home header nav > ul > li > a,
    .home header .right p {color: #2C2C2C;}
    .home header .left .logo img:nth-child(1) {opacity: 0;}
    .home header .left .logo img.scroll {opacity: 1;}
    .home header .search::after,
    .home header .cart::after {background: #292929;}
    .home header .wrapper {border-bottom: 1px solid #EFEFEF;}

    /* ──── Logo / header layout ──── */
    header .wrapper {padding: 0 18px; min-height: 64px; justify-content: space-between;}
    header .left .logo {width: 110px; height: 48px;}
    header .left, header .right {flex: 0 0 auto;}
    /* Pin the icon group to the right edge regardless of how many items it has. */
    header .right {gap: 18px; margin-left: auto;}
    header .right p {display: none;} /* "New Zealand" label */
    header .header-action-account svg {display: block;}

    /* ──── Hamburger button (injected by mobile-menu.js) ──── */
    .mobile-menu-toggle {
        display: inline-flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 28px;
        height: 28px;
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
        order: 99; /* always rightmost in the icon group */
    }
    .mobile-menu-toggle span {
        display: block;
        width: 22px;
        height: 1.5px;
        background: #2C2C2C;
        transition: transform .25s, opacity .25s;
        transform-origin: center;
    }
    body.menu-open .mobile-menu-toggle span:nth-child(1) {transform: translateY(6.5px) rotate(45deg);}
    body.menu-open .mobile-menu-toggle span:nth-child(2) {opacity: 0;}
    body.menu-open .mobile-menu-toggle span:nth-child(3) {transform: translateY(-6.5px) rotate(-45deg);}

    /* ──── Collapse nav into drawer ──── */
    header nav {
        position: fixed;
        top: 96px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        padding: 24px;
        margin: 0;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .3s ease;
        z-index: 998;
    }
    body.menu-open header nav {transform: translateX(0);}
    body.menu-open {overflow: hidden;}

    header nav > ul {flex-direction: column; gap: 0;}
    header nav > ul > li {width: 100%; padding: 0; border-bottom: 1px solid #ececea;}
    header nav > ul > li > a {
        display: block;
        width: 100%;
        padding: 18px 0;
        font-size: 15px;
        letter-spacing: 1px;
    }
    header nav > ul > li > a::after {display: none;}

    /* Mega-dropdown becomes inline content under each parent */
    .dropdown {
        position: static !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
        z-index: auto;
    }
    li.parent.open > .dropdown {max-height: 2000px;}
    .dropdown-container {
        padding: 0 0 18px;
        background: transparent;
        box-shadow: none;
    }
    .dropdown-layout, .dropdown-columns, .dropdown-left, .dropdown-featured {
        display: block !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .dropdown-col {margin-bottom: 18px;}
    .dropdown-col .title {font-size: 13px; margin: 12px 0 8px; color: var(--blue);}
    .dropdown-col ul li {margin-bottom: 6px;}
    .dropdown-col ul li a {font-size: 14px;}
    .dropdown-featured {display: none !important;} /* hide promo tiles in burger menu */
    .dropdown-left .button {display: inline-block; margin-top: 14px;}
    /* Mega-menu lens-power picker — stack vertically, one per row */
    .lens-filter-dropdown {display: block !important;}
    .lens-filter-dropdown .lens-options {display: flex !important; flex-direction: column; justify-content: flex-start; gap: 0;}
    .lens-filter-dropdown .lens-options a {display: block; width: 100%; padding: 14px 0; border-bottom: 1px solid #ececea; font-size: 14px; color: #2c2c2c; text-align: left;}
    .lens-filter-dropdown .lens-options a::before,
    .lens-filter-dropdown .lens-options a::after {display: none !important;}
    .lens-filter-dropdown .lens-options a:last-child {border-bottom: 0;}
    .lens-filter-dropdown .title {font-size: 13px; margin: 12px 0 8px; color: var(--blue); text-align: left;}

    /* Home banner lens-power picker (homepage under hero) — 3 per row */
    section.lens-filter:not(.lens-filter-dropdown) .lens-options {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        max-width: 420px;
        margin: 0 auto;
    }
    section.lens-filter:not(.lens-filter-dropdown) .lens-options a {
        padding: 12px 8px;
        text-align: center;
        font-size: 14px;
    }
    section.lens-filter:not(.lens-filter-dropdown) .lens-options a::before,
    section.lens-filter:not(.lens-filter-dropdown) .lens-options a:last-child::after {
        display: none !important;
    }

    /* "Browse our reading glasses" section — tighter vertical rhythm + half-size heading */
    .browse {margin: 40px 0;}
    .browse h4 {font-size: 10px;}

    /* Featured product tiles — square aspect on mobile (was 150% tall) + tighter title */
    .product-tile figure {padding-bottom: 100%;}
    .product-tile .title {font-size: 13px; line-height: 16px; bottom: 18px; padding: 0 8px;}

    /* Browse-reading-glasses Swiper: always show product names on touch + smaller font */
    .productSwiper .swiper-slide p {
        opacity: 1 !important;
        font-size: 12px;
        line-height: 1.3;
        max-width: 100%;
        margin-top: 8px;
        padding: 0 6px;
    }

    /* ──── Body content ──── */
    .wrapper, .wrapper-sml, .wrapper-lrg {padding-inline: 18px;}
    /* Category collection grid: first tile full-width, remaining 4 in a 2-col grid below */
    .grid-5 {grid-template-columns: 1fr 1fr !important; gap: 16px;}
    .grid-5 > :first-child {grid-column: 1 / -1;}
    .shop-grid .grid-item.large {grid-column: span 1 !important;}

    /* Featured Vista Readers: View-Collection promo full-width, 4 product cards 2-up below */
    .featured-readers {grid-template-columns: 1fr 1fr !important; gap: 16px; margin-top: 20px;}
    .featured-readers .collection-promo {grid-column: 1 / -1 !important; grid-row: auto !important;}
    .featured-readers .collection-promo .button {bottom: 18px;}

    /* Product-feature panel (e.g. "Vista Plastic" feature): article was white text
       absolutely positioned over a light image — illegible. Stack vertically. */
    .product-feature {display: block;}
    .product-feature figure {width: 100%;}
    .product-feature article {
        position: static !important;
        color: #2c2c2c;
        padding: 30px 0;
    }
    .product-feature article h2 {color: #2c2c2c; font-size: 22px; margin-bottom: 6px;}
    .product-feature article p {color: #6b6b6b; font-size: 13px;}
    .product-feature .button {
        position: static !important;
        display: inline-block;
        margin: 0;
    }

    /* Highlight panel (e.g. "Whether you're looking for…"): same treatment */
    .highlight {display: block; padding: 0;}
    .highlight figure img {width: 100%; height: auto; display: block;}
    .highlight article {
        position: static !important;
        transform: none !important;
        max-width: 100%;
        padding: 22px 18px 28px;
        color: #2c2c2c;
    }
    .highlight h3 {font-size: 24px; margin-bottom: 8px;}
    .highlight p {font-size: 15px; line-height: 1.5; color: #2c2c2c;}
    .highlight article .button {margin-top: 18px;}

    /* Info-blocks ("Free shipping… / 12 month warranty") — keep 2-up on tablet,
       stack on phones (handled at ≤600px) */
    .info-blocks {grid-template-columns: 1fr 1fr; padding: 0;}
    .info-blocks p {font-size: 13px; padding: 20px 0;}
    .grid-4, .shop-grid:not(.grid-3):not(.grid-5) {grid-template-columns: repeat(2, 1fr) !important; gap: 18px;}
    .grid-3 {grid-template-columns: repeat(2, 1fr) !important; gap: 18px;}

    /* ──── Hero banner ──── */
    .banner figure {height: 60vh;}
    .banner article {margin-left: 24px; max-width: 80vw;}
    .banner article h1 {font-size: 36px; line-height: 1.1;}

    /* ──── Shop banner ──── */
    .shop-banner {margin: 18px 0;}
    .shop-banner h1 {font-size: 22px; margin: 0;}
    .shop-banner .flex-row {flex-direction: column; align-items: flex-start; gap: 4px; padding: 0;}
    .shop-banner .category-description {width: 100%;}
    .shop-banner .category-description h1 {font-size: 22px;}
    .shop-banner .category-description p {font-size: 14px; line-height: 1.4;}
    /* Hide CMS-content images that get embedded in the category description on mobile */
    .shop-banner .category-description img,
    .shop-banner .category-description iframe {display: none !important;}

    /* Hide the 5-category showcase grid on /shop landing — the product grid
       below it covers the same browsing need on mobile without the duplication. */
    .shop-banner .shop-grid {display: none !important;}

    /* ──── Filter header row on shop / category pages ──── */
    .filter-row {
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        gap: 12px;
        padding: 14px 0 12px;
        flex-wrap: nowrap;
    }
    .filter-row p {display: none;}
    .filter-icon {
        flex: 0 0 auto;
        padding: 10px 16px !important;
        font-size: 11px !important;
    }
    .filter-icon-label {white-space: nowrap;}

    /* ──── Filter sidebar → mobile drawer ──── */
    .shop-layout {flex-direction: column;}
    .filters {
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: min(360px, 92vw);
        background: #fff;
        z-index: 1100;
        padding: 64px 22px 28px;
        overflow-y: auto;
        box-shadow: -8px 0 32px rgba(0,0,0,.18);
        transform: translateX(100%);
        transition: transform .3s ease;
        box-sizing: border-box;
    }
    .filters.active {transform: translateX(0);}

    /* Drawer header + close button (rendered via the existing .filter-icon click) */
    .filters::before {
        content: 'Filter';
        position: absolute;
        top: 22px;
        left: 22px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: #1c2b46;
    }
    .filters-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f5f5f5;
        border: 0;
        font-size: 20px;
        line-height: 1;
        color: #2c2c2c;
        cursor: pointer;
        z-index: 2;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    /* Tighter spacing inside the drawer */
    .filters .filter-group {margin-bottom: 24px;}
    .filters .filter-label {margin-bottom: 12px;}
    .filters .filter-pills {gap: 10px;}

    /* Dim the page behind the open drawer */
    body.no-scroll::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 1050;
    }

    /* ──── Product detail page ──── */
    .shop-wrapper {max-width: 90vw; margin: 0 auto; padding: 15px 0;}
    /* Show the gallery pagination dots only on mobile — desktop has thumbs */
    .product-gallery-pagination {display: block;}
    .product-gallery-main {position: relative;}
    .shop-content {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-gap: 24px !important;
        margin-top: 12px;
    }
    .product-images {
        display: block !important;
        width: 100%;
    }
    /* Hide thumbs column on mobile (use swipe on main gallery instead) */
    .product-gallery-thumbs {display: none !important;}
    .product-gallery-main {width: 100% !important;}
    .product-images .swiper-slide {padding-bottom: 95%;}

    /* Product info column */
    .product-content {padding: 0 4px;}
    .product-content h1 {font-size: 22px !important; margin-bottom: 14px;}
    .product-content .flex-row {margin-bottom: 14px;}
    .product-content .flex-row span {font-size: 12px;}
    .product-content .price {font-size: 16px; padding: 7px 10px;}
    .product-content .summary {font-size: 14px; margin: 12px 0;}
    .product-content .specifications {margin: 10px 0 18px;}
    .product-content .specifications h4 {margin-bottom: 8px;}
    .product-content .specifications ul li {font-size: 14px;}
    .product-content .description {font-size: 14px;}

    /* Lens power picker — 3-up on mobile */
    .lens-power {margin: 16px 0;}
    .lens-power h4 {margin-bottom: 10px;}
    .lens-power-options {grid-template-columns: repeat(3, 1fr) !important; gap: 8px 12px !important;}
    .lens-power-option {font-size: 14px;}
    .lens-power-option input,
    .lens-power-option input::after {border-radius: 50%;}

    /* Add to cart / Enquire buttons — full width */
    .product-content .button-wrap {width: 100%; margin-top: 16px;}
    .product-content .button-wrap .button {display: block; width: 100%; text-align: center;}

    /* Breadcrumbs */
    .breadcrumbs {font-size: 11px; padding: 8px 0;}

    /* ──── Similar / featured swipers ──── */
    .custom-prev, .custom-next {display: none !important;}
    .productSwiper figure, .similarSwiper figure {margin-top: 0;}
    /* Edge fade moved out of the media query, see top of file */
    section.content h3 {font-size: 24px;}
    section.content .flex-row {flex-direction: column; align-items: flex-start; gap: 4px;}

    /* ──── Cart ──── */
    .cart__blocks {grid-template-columns: 1fr !important; gap: 24px;}
    .cart__right {position: static;}
    .cart__item {grid-template-columns: 80px 1fr !important;}

    /* ──── Checkout ──── */
    .checkout-grid, .checkout-layout {grid-template-columns: 1fr !important; gap: 24px;}
    .form-grid {grid-template-columns: 1fr !important;}
    /* Summary column on top, form below — better mobile flow */
    .checkout-summary, .cart__right, .checkout-right {order: -1; position: static;}
    .checkout-form, .cart__left, .checkout-left {order: 1;}

    /* ──── Account ──── */
    .dashboard {padding: 24px 16px 60px;}
    .grid-steps {grid-template-columns: 1fr !important; gap: 24px;}
    .account-sticky {position: static;}
    .account-nav ul {flex-direction: row; flex-wrap: wrap; gap: 0; overflow-x: auto;}
    .account-nav ul li {flex: 0 0 auto; border-right: 1px solid #ececea;}
    .account-nav ul li a {padding: 10px 14px; font-size: 13px; white-space: nowrap;}
    .dashboard-content {grid-template-columns: 1fr !important;}
    .dashboard-content h3 {font-size: 1.1rem;}
    /* Stack label/value rows when they don't fit side-by-side */
    .dashboard-content > article {flex-wrap: wrap; gap: 8px 16px;}
    .dashboard-content > article > * {min-width: 0;}
    /* Slide-out edit panel: full width with tighter padding so inputs fit */
    .details-pop {width: 100vw !important; padding: 48px 20px 24px !important;}
    .details-pop h3 {font-size: 1.4rem; margin-bottom: 14px;}
    /* Tables → mobile cards on phones */
    .desktop-table {display: none;}
    .mobile-table {display: block;}
    /* Address cards: single column on phones for easier reading/tap targets */
    .address-cards {grid-template-columns: 1fr; gap: 12px;}
    /* Auth (login / register / forgot / reset) */
    .auth-page {padding: 32px 16px 60px;}
    .auth-grid {grid-template-columns: 1fr; gap: 28px;}
    .auth-divider {display: none;}
    .auth-grid-2 {grid-template-columns: 1fr; gap: 14px;}

    /* ──── Forms ──── */
    .contact-layout {grid-template-columns: 1fr !important; gap: 32px;}
    .cf-grid {grid-template-columns: 1fr !important;}
    .newsletter-form .newsletter-form-inner {flex-direction: column; align-items: stretch;}
    .newsletter-form input[type="email"] {width: 100%;}

    /* ──── Footer ──── */
    footer {padding: 32px 0 0;}
    footer .footer-grid {display: flex; flex-direction: column; gap: 24px; padding: 0 0 32px; max-width: 90%;}
    footer .footer-nav {display: flex; flex-direction: column; gap: 24px; width: 100%;}
    footer .footer-nav ul {margin: 0;}
    footer .footer-logo {width: 110px; margin: 0;}
    footer h4 {margin-bottom: 14px; font-size: 12px;}
    footer .footer-nav ul li {margin-bottom: 8px;}
    footer .footer-nav ul li a {font-size: 14px;}
    /* Newsletter / social column: full width, no max-width, no overflow */
    footer .footer-grid .social {max-width: none; width: 100%;}
    footer .newsletter-form {width: 100%;}
    footer .newsletter-form input {padding: 16px 14px; font-size: 14px;}
    footer .newsletter-form .form-button {right: 14px;}
    footer .social-row {gap: 18px; margin-top: 20px;}
    footer .payment-icons {justify-content: flex-start; margin-top: 24px;}
    footer .copyright {flex-direction: column; gap: 6px; padding: 16px 18px; text-align: center;}
    footer .copyright .left, footer .copyright .right {text-align: center;}

    /* ──── Article / static-content pages ──── */
    article.page {padding: 18px 0 40px;}
    article.page h1, article.page h2 {font-size: 26px; margin: 24px 0 10px;}
    article.page h3 {font-size: 18px; margin: 22px 0 8px;}
    article.page h4 {margin: 18px 0 8px; font-size: 1rem;}
    article.page p, article.page li {line-height: 1.55; word-break: break-word; overflow-wrap: anywhere;}
    article.page li {margin-bottom: 12px;}
    article.page ul, article.page ol {margin: 0 0 14px;}
    .info-blocks {flex-direction: column; gap: 8px; padding: 24px 0;}

    /* ──── Modals / popups ──── */
    .cart-wrapper, .account-wrapper {width: 100vw !important;}

    /* ──── Hide desktop-only assets ──── */
    img.desktop {display: none !important;}

    /* Force the shop / category product grid to 2-up on mobile no matter
       what ancestor flex/grid rules try to do. */
    .shop-layout {flex-direction: column !important; gap: 16px;}
    .shop-layout > .filters {flex: none !important;}
    .shop-layout > .shop-grid,
    .shop-layout > .grid-4,
    .shop-layout > .grid-4.shop-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Product cards: fixed height image area on mobile (was % aspect) */
    .product-card figure,
    .shop-grid .product-card figure,
    .swiper-slide.product-card figure {height: 200px !important; padding-bottom: 0 !important;}

    /* Product card title — sit at bottom with side padding, allow 2-line wrap */
    .product-card .title {
        bottom: 0 !important;
        padding: 14px 12px;
        font-size: 13px;
        line-height: 1.3;
        box-sizing: border-box;
        word-break: break-word;
    }
}


/* ─── 600px — mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .wrapper, .wrapper-sml, .wrapper-lrg {padding-inline: 14px;}
    .wrapper-content {max-width: 90%; margin: 0 auto; padding: 20px 0;}
    header .wrapper {padding: 0 14px;}

    .header-top {gap: 8px; padding: 6px 8px;}
    .header-top p {font-size: 7px; padding: 5px 0; border-right: none;}

    /* Keep .grid-4 / .shop-grid at 2-up on phones (was 1-up which felt empty);
       .grid-5 keeps its 1-then-2x2 layout from ≤900px. */
    .grid-4, .shop-grid:not(.grid-3):not(.grid-5) {grid-template-columns: 1fr 1fr !important; gap: 12px;}
    .grid-3 {grid-template-columns: 1fr !important; gap: 16px;}

    /* Hero */
    .banner figure {height: 50vh; min-height: 320px;}
    .banner article {position: absolute; top: auto; bottom: 4vw; margin-left: 14px; max-width: calc(100vw - 28px);}
    .banner article h1 {font-size: 28px;}

    /* Shop banner */
    .shop-banner h1 {font-size: 22px;}

    /* Product detail */
    .product-info h1 {font-size: 22px;}
    .lens-power-options {grid-template-columns: repeat(2, 1fr) !important;}
    .lens-power-option {font-size: 14px;}

    /* Cart */
    .cart__item {grid-template-columns: 64px 1fr !important; gap: 12px;}
    .cart__item figure img {width: 64px; height: auto;}

    /* Footer */
    footer .footer-col {border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 16px;}
    footer .footer-col:last-child {border-bottom: 0;}

    /* Cards / similar swipers */
    .product-card .title {font-size: 13px;}

    /* Info-blocks stack on phones */
    .info-blocks {grid-template-columns: 1fr; gap: 4px; padding: 0;}
    .product-card .price, .product-card .sku {font-size: 12px;}

    /* Buttons */
    .button {padding: 14px 28px; font-size: 11px;}
    .auth-btn {padding: 14px 0;}

    /* Forms */
    .form-input input, .cf-field input, .cf-field textarea, .auth-field input {font-size: 16px; /* prevents iOS auto-zoom */}

    /* Article body */
    article.page p, article.page li {font-size: 15px;}
}


/* ─── Tiny screens (≤380px) ──────────────────────────────────────────── */
@media (max-width: 380px) {
    .banner article h1 {font-size: 24px;}
    .shop-banner h1 {font-size: 20px;}
    header .left .logo {width: 96px; height: 42px;}
    .lens-power-options {grid-template-columns: 1fr !important;}
}