/** Shopify CDN: Minification failed Line 54:3 Unexpected "=" **/ /* ============================================================ TREEK MARKET — RESPONSIVE AUDIT FIXES Covers: 320 / 375 / 390 / 414 / 768 / 1024 / 1280 / 1440 / 1920px Zero horizontal-scroll guarantee. Production-ready, no hacks, no overflow:hidden band-aids. /* ── Footer badge numbers: below image, black ─────────────── */ .footer__badge-card { flex-direction: column !important; align-items: center !important; gap: 6px !important; text-align: center !important; } .footer__badge-num { color: #111 !important; font-weight: 700 !important; font-size: 0.75rem !important; letter-spacing: 0.02em !important; direction: ltr !important; } /* ── Cart badge: force orange ─────────────────────────────── */ .icon-btn .badge, .cart-count { background: #ff6600 !important; } /* ── Pagination: visible on white background ──────────────── */ .pagination { border-top: 1px solid #e8e8e8 !important; } .pagination__link { background: #fff !important; border: 1px solid #e0e0e0 !important; color: #333 !important; } .pagination__link:hover { background: #fff7f2 !important; border-color: #ff6600 !important; color: #ff6600 !important; } .pagination__link.is-active { background: #ff6600 !important; border-color: #ff6600 !important; color: #fff !important; font-weight: 700 !important; } ============================================================ */ /* ──────────────────────────────────────────────────────────── 1. GLOBAL OVERFLOW GUARD Prevents any single wide element from creating a horizontal scrollbar. Only the / boundary is protected; individual containers keep their own natural scroll where needed (carousels, tables). ──────────────────────────────────────────────────────────── */ html, body { max-width: 100%; overflow-x: clip; /* clip ≠ hidden — does not change scroll model */ } /* ──────────────────────────────────────────────────────────── 2. CONTAINER — ultrawide cap + side padding max-width 1400px already set; add side padding via container and ensure it never exceeds the viewport. ──────────────────────────────────────────────────────────── */ .container { width: 100%; box-sizing: border-box; } /* On ultrawide (≥1920px) add a little more breathing room in the side padding so the content doesn't feel pinned. */ @media (min-width: 1920px) { .container { max-width: 1600px !important; padding-inline: clamp(40px, 5vw, 80px) !important; } } /* ──────────────────────────────────────────────────────────── 3. HEADER — logo + nav + actions at every breakpoint ISSUE A: Logo min 260px (desktop) / 180px (≤768px) is too wide for 320-375px handsets. With 3 action icon-btns (lang + search/account + cart ≈ 3×36px = 108px), a 180px logo + 108px icons + 32px padding = 320px — exact, zero gap. Any extra border or subpixel rounding breaks the line. FIX: lower the floor to 140px at ≤480px, 160px at ≤600px. ISSUE B: Mobile nav `top: 80px` hard-coded in treekmarket.css but the header is 110px tall → nav appears inside the header. FIX: use `top: 100%` so the nav always opens just below the header regardless of its height. ──────────────────────────────────────────────────────────── */ /* ── Logo scaling ── */ @media (max-width: 600px) { .header .logo img, .header .logo .logo__img, .logo img, .logo .logo__img, .logo__img { width: clamp(140px, 38vw, 200px) !important; } } @media (max-width: 480px) { .header .logo img, .header .logo .logo__img, .logo img, .logo .logo__img, .logo__img { width: clamp(120px, 35vw, 160px) !important; } } /* ── Tighten header inner gap on small screens ── */ @media (max-width: 480px) { .header__inner { gap: 6px !important; } .icon-btn { width: 34px !important; height: 34px !important; } .lang-toggle { padding: 0 8px !important; font-size: 0.75rem !important; } } /* ── Mobile nav: top = 100% so it aligns with header bottom ── */ @media (max-width: 1024px) { .nav { top: 100% !important; } } /* ── Prevent nav items overflowing on small mobile ── */ @media (max-width: 480px) { .nav > ul > li > a { font-size: 0.88rem !important; padding: 11px 6px !important; } } /* ──────────────────────────────────────────────────────────── 4. HERO — treek-hero section ISSUE: At 320-374px the `.treek-left` padding of 20px each side plus the text content causes overflow with `.treek-buttons` having `flex-wrap: wrap` but button `white-space: nowrap` keeping them wide. FIX: shrink padding and allow buttons to shrink. ──────────────────────────────────────────────────────────── */ @media (max-width: 374px) { .treek-left, [dir="rtl"] .treek-left { padding: 32px 14px 16px !important; } .treek-en-headline { font-size: 1.5rem !important; letter-spacing: -0.5px !important; } .treek-btn-primary, .treek-btn-secondary { padding: 10px 16px !important; font-size: 0.88rem !important; } .treek-tags { gap: 10px !important; font-size: 0.72rem !important; } } /* ──────────────────────────────────────────────────────────── 5. TRUST GRID — 4 columns → responsive ISSUE: `.trust-grid { grid-template-columns: repeat(4, 1fr) }` has zero breakpoints. At 480px each column ≈ 68px — too narrow for icons + text. FIX: auto-fit with a sensible minimum. ──────────────────────────────────────────────────────────── */ .trust-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; } @media (max-width: 600px) { .trust-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; } } @media (max-width: 374px) { .trust-grid { grid-template-columns: 1fr !important; } } /* ──────────────────────────────────────────────────────────── 6. REVIEWS GRID — 3 columns → responsive ISSUE: `.reviews-grid { grid-template-columns: repeat(3,1fr) }` has zero breakpoints. At 768px each card ≈ 220px — readable, but at 480px cards drop to ≈ 130px which truncates text. FIX: stack to 1 column on mobile. ──────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 600px) { .reviews-grid { grid-template-columns: 1fr !important; gap: 18px !important; } } /* ──────────────────────────────────────────────────────────── 7. DESIGN-CTA (dcta) STAGE + CHIPS ISSUE A: `.dcta__stage { width: 380px; height: 380px }` and the 900px breakpoint only reduces to 280px × 280px. At 320-480px, the container width is ≈ 281px (88% of 320px). A 280px square still fills the container completely leaving no room for the floating chips. ISSUE B: `.dcta__chip--tr { right: -30px }` and `.dcta__chip--tl { left: -20px }` poke outside the stage. The `.dcta` wrapper has `overflow: hidden` which clips them correctly on desktop, but after flex-direction becomes column the inner is `width: 88%` — the chips now extend beyond the 88% inner into the 6% gutter, which is visually clipped but can still trigger a reflow measurement causing scroll. FIX: Scale stage below 600px; pull chips inside stage bounds. ──────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .dcta__inner { width: 92% !important; gap: 32px !important; padding: 40px 0 !important; } .dcta__stage { width: min(240px, 70vw) !important; height: min(240px, 70vw) !important; } .dcta__orbit { width: min(190px, 54vw) !important; height: min(190px, 54vw) !important; } /* Pull chips inside stage so they never protrude */ .dcta__chip--tl { left: 4px !important; top: 12px !important; } .dcta__chip--tr { right: 4px !important; top: 30px !important; } .dcta__chip--bl { left: 4px !important; bottom: 40px !important; } } @media (max-width: 374px) { .dcta__stage { width: min(200px, 80vw) !important; height: min(200px, 80vw) !important; } .dcta__chip { font-size: 0.7rem !important; padding: 7px 10px !important; } .dcta__title { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; } } /* ──────────────────────────────────────────────────────────── 8. STORY SECTION (treek-story) ISSUE: `.treek-story { display: flex; gap: 80px; padding: 120px 8% }` and `.treek-story-left { width: 46% }` — no mobile collapse. At 768px the two columns are each ~310px at 80px gap — fine. At 480px the two columns are each ~165px — too narrow. FIX: Stack to single column below 768px. ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .treek-story { flex-direction: column !important; gap: 36px !important; padding: 60px 5% !important; } .treek-story-left { width: 100% !important; } .treek-story-right { width: 100% !important; } } @media (max-width: 480px) { .treek-story { padding: 48px 4% !important; gap: 28px !important; } } /* ──────────────────────────────────────────────────────────── 9. COLLECTION PAGE — sidebar + grid ISSUE: At 320px the `product-grid--collection` uses `grid-template-columns: 1fr 1fr` (480px breakpoint). In a 320px viewport with 16px side padding the content width is 288px → each card 128px wide. That's usable but the card images (`min-height: 220px !important`) make cards taller than they are wide, looking awkward. FIX: Single column below 400px; reduce card image min-height. ──────────────────────────────────────────────────────────── */ @media (max-width: 400px) { .product-grid--collection { grid-template-columns: 1fr !important; gap: 16px !important; } .product-card__img, .product-card img { min-height: 160px !important; } } /* ──────────────────────────────────────────────────────────── 10. PRODUCT GRID (homepage / best-sellers) ISSUE: `.product-grid { grid-template-columns: repeat(4,1fr) }` The existing 480px breakpoint sets `1fr 1fr` but the min-height 220px on card images can cause aspect-ratio distortion. FIX: Use auto-fit with a min that makes sense, reduce card image minimum on small screens. ──────────────────────────────────────────────────────────── */ .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; } @media (max-width: 480px) { .product-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; } .product-card__img, .product-card img { min-height: 160px !important; } } @media (max-width: 374px) { .product-grid { grid-template-columns: 1fr !important; } } /* ──────────────────────────────────────────────────────────── 11. CAROUSEL (featured-products) — arrows + slides ISSUE: At 320px the carousel track is `flex: 1` (full container minus 2×arrow-44px + 2×12px gap = 88px) = 232px. Slide `flex: 0 0 calc(80% - 10px)` = 180px at 320px. That works, but arrow buttons at `width: 36px; height: 36px` are usable. ADDITIONAL ISSUE: The "View All" card has `min-height: 280px` which on a 320px screen causes an unwanted tall card. FIX: reduce arrow size further + view-all card min-height. ──────────────────────────────────────────────────────────── */ @media (max-width: 374px) { .fp-carousel { gap: 4px !important; } .fp-carousel__arrow { width: 30px !important; height: 30px !important; flex-shrink: 0 !important; } .fp-carousel__arrow svg { width: 14px !important; height: 14px !important; } .fp-carousel__slide { flex: 0 0 calc(85% - 8px) !important; min-width: 180px !important; } .fp-viewall-card { min-height: 220px !important; } } /* ──────────────────────────────────────────────────────────── 12. FOOTER ISSUE A: `.footer__brand img, .footer__logo-img { width: 300px }` On the mobile breakpoint (≤768px) this correctly reduces to 160px, but on 481-768px with a 2-column footer grid the brand column may be narrower than 160px on tablets. ISSUE B: `.footer__badge-logo { height: 100px }` in a responsive row on small screens → badges too tall. ISSUE C: Footer grid `gap: 48px` is too wide at 768-900px. FIX: tighten gap; scale badge logos; ensure logo fits column. ──────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .footer__grid { gap: 32px !important; } } @media (max-width: 600px) { .footer__grid { gap: 24px !important; } .footer__badge-logo { height: 72px !important; max-height: 72px !important; } .footer__badges-col { gap: 16px !important; } } @media (max-width: 480px) { .footer__brand img, .footer__logo-img { width: 140px !important; } .footer__badge-logo { height: 56px !important; max-height: 56px !important; } } /* ──────────────────────────────────────────────────────────── 13. CART DRAWER — RTL support ISSUE: Cart drawer is anchored `right: 0` and opens with `translateX(0)` (from `translateX(100%)`). In RTL/Arabic mode, drawers conventionally open from the left side. Currently there is no RTL handling. FIX: Mirror the drawer in RTL. ──────────────────────────────────────────────────────────── */ [dir="rtl"] .cart-drawer { right: auto !important; left: 0 !important; transform: translateX(-100%) !important; box-shadow: 4px 0 30px rgba(0,0,0,0.12) !important; } [dir="rtl"] .cart-drawer.is-open { transform: translateX(0) !important; } /* ──────────────────────────────────────────────────────────── 14. PRODUCT PAGE ISSUE A: `.product-page__inner { grid-template-columns: 1fr 1fr }` collapses at 900px (good), but between 900-1024px the two columns at gap: 56px in a constrained viewport can make the right info column quite narrow. ISSUE B: `.specs-tabs` can overflow at 480px when multiple long tab labels are present — the existing `overflow-x: auto` handles it but needs `scrollbar-width: none` to look clean. ISSUE C: `.product-delivery { grid-template-columns: 1fr 1fr }` at ≤480px collapses (good) but at 320-374px the 14px padding inside each item is generous. ──────────────────────────────────────────────────────────── */ @media (max-width: 1024px) and (min-width: 901px) { .product-page__inner { gap: 36px !important; } } .specs-tabs { scrollbar-width: none !important; } .specs-tabs::-webkit-scrollbar { display: none !important; } @media (max-width: 374px) { .product-delivery__item { padding: 10px 10px !important; } .configurator { padding: 14px !important; } .config-opt { min-width: 64px !important; padding: 8px 12px !important; } .qty-tier { min-width: 52px !important; padding: 7px 12px !important; font-size: 0.88rem !important; } } /* ──────────────────────────────────────────────────────────── 15. ANNOUNCEMENT BAR ISSUE: Long announcement copy on a single line can overflow at 320px. The bar has no wrapping or font-size reduction. FIX: allow text to wrap + reduce font size below 480px. ──────────────────────────────────────────────────────────── */ .announcement-bar { white-space: normal !important; word-break: break-word !important; } @media (max-width: 480px) { .announcement-bar { font-size: 0.78rem !important; padding: 7px 16px !important; } } /* ──────────────────────────────────────────────────────────── 16. UTILITY BAR ISSUE: `.utility-bar__inner { display: flex; justify-content: space-between }` with two groups at 320px can overflow. FIX: Stack at 480px, hide right links on very small screens. ──────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .utility-bar__inner { flex-direction: column !important; gap: 4px !important; text-align: center !important; } .utility-bar__right { gap: 10px !important; flex-wrap: wrap !important; justify-content: center !important; } } /* ──────────────────────────────────────────────────────────── 17. COLLECTION FILTERS — mobile drawer ISSUE: Filter drawer `width: 88%; max-width: 360px` — at 320px that is 281px. The filter panel has `padding: 20px` so inner usable width is 241px. Fine, but RTL slide-in direction is correct (already handled: `[dir="rtl"] translateX(100%)`). Minor: the `top: 100px` sticky value for the desktop sidebar assumes 100px header; our header is 110px → sidebar clips behind. FIX: update sticky top. ──────────────────────────────────────────────────────────── */ @media (min-width: 769px) { .collection-filters { top: 120px !important; /* header 110px + 10px breathing room */ } } /* ──────────────────────────────────────────────────────────── 18. HERO--PURPLE (product collection hero) ISSUE: `.hero__box { width: 380px; height: 320px }` is a fixed size. At ≤1024px it reduces to 280×240 (good), but there is no breakpoint below 768px. At 480px the visual column stacks below text and the 280px box in a 480px column is fine, but any box images feel constrained. FIX: Make box fluid on very small screens. ──────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .hero__box { width: min(240px, 70vw) !important; height: auto !important; aspect-ratio: 380 / 320 !important; } .hero__box-bg { width: min(200px, 58vw) !important; height: auto !important; aspect-ratio: 1 !important; } } /* ──────────────────────────────────────────────────────────── 19. 404 PAGE CATEGORY GRID ISSUE: `.not-found__cat-grid { grid-template-columns: repeat(6,1fr) }` The 1024px breakpoint → 3 cols, 600px → 2 cols. At 320-374px 2 cols = 128px each — passable but images at width:64px look correct. No fix needed, but gap can be reduced. ──────────────────────────────────────────────────────────── */ @media (max-width: 374px) { .not-found__cat-grid { gap: 8px !important; } .not-found__cat img { width: 48px !important; height: 48px !important; } } /* ──────────────────────────────────────────────────────────── 20. CONTACT PAGE — grid collapse ISSUE: `.contact-page__body { grid-template-columns: 1fr 1.6fr }` collapses at 768px (good). But form row `grid-template-columns: 1fr 1fr` at 320px in a single-column layout gives two fields at ~120px each — too narrow. ──────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .contact-form__row { grid-template-columns: 1fr !important; } .contact-form-wrap { padding: 20px !important; } } /* ──────────────────────────────────────────────────────────── 21. PRICE / SIZE TABLE — horizontal scroll polish ISSUE: Tables have `overflow-x: auto` on the wrapper which is correct, but no `min-width` on the table itself, causing the table to shrink its columns below readable width. FIX: Give tables a min-width so they always scroll rather than compress. ──────────────────────────────────────────────────────────── */ .size-table, .price-table { min-width: 500px !important; } .size-table-scroll, .price-table-wrap { -webkit-overflow-scrolling: touch !important; } /* ──────────────────────────────────────────────────────────── 22. CATEGORY GRID — maintain 3 cols down to 480px ISSUE: `.cat-grid { grid-template-columns: repeat(3, 1fr) }` collapses to 2 at 640px which is correct. The 380px breakpoint collapses to 1 column, but the range 381-480px shows 2 columns at ~190px each — fine. FIX: none needed, but at 320px (single column) the cat cards should use a square aspect-ratio for the image to avoid very tall cards. ──────────────────────────────────────────────────────────── */ @media (max-width: 380px) { .cat-card__img { aspect-ratio: 4 / 3 !important; /* maintain landscape rather than going square */ } } /* ──────────────────────────────────────────────────────────── 23. FOOTER BADGES — overflow at medium tablet ISSUE: At 768-900px `.footer__grid` is 2 columns. The badges column spans `1 / -1` (full width) and uses `flex-direction: row; flex-wrap: wrap`. With `height: 100px` each badge can cause the row to be very tall on narrow widths. FIX: scale badges proportionally. ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .footer__badge-logo { height: clamp(56px, 12vw, 80px) !important; max-height: clamp(56px, 12vw, 80px) !important; } } /* ──────────────────────────────────────────────────────────── 24. RTL — direction-aware fixes ISSUE A: `.footer__toggle-icon { margin-left: auto }` should be `margin-inline-start: auto` to flip in RTL. ISSUE B: `.form-select { background-position: right 14px }` places the chevron on the wrong side in RTL. ISSUE C: `.product-info__desc ul { padding-left: 1.4rem }` — list indent should flip in RTL. ISSUE D: `.footer__col-toggle { text-align: left }` — wrong in RTL. ──────────────────────────────────────────────────────────── */ .footer__toggle-icon { margin-left: auto !important; margin-inline-start: auto !important; } [dir="rtl"] .form-select { background-position: left 14px center !important; padding-right: 14px !important; padding-left: 36px !important; } [dir="rtl"] .product-info__desc ul { padding-left: 0 !important; padding-right: 1.4rem !important; } [dir="rtl"] .footer__col-toggle { text-align: right !important; } /* ──────────────────────────────────────────────────────────── 25. DCTA BUTTONS — centred in RTL ISSUE: `.dcta__buttons { justify-content: center }` — this is fine for LTR/EN, but in Arabic/RTL the buttons should align to the start (right side). ──────────────────────────────────────────────────────────── */ [dir="rtl"] .dcta__buttons { justify-content: flex-start !important; } /* ──────────────────────────────────────────────────────────── 26. COLLECTION TOOLBAR — wrapping at small widths ISSUE: Toolbar uses `justify-content: space-between` but does not shrink items well. The sort select can overflow at 320px. ──────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .collection-toolbar { flex-direction: column !important; align-items: flex-start !important; } .collection-toolbar__sort select { max-width: 100% !important; width: 100% !important; } } /* ──────────────────────────────────────────────────────────── 27. BOX FINDER INPUTS — cramped at 320px ISSUE: `.box-finder__inputs` has `min-width: 80px` per field. At 320px, 3 fields + button = 3×80 + 120 btn = 360px > 288px. FIX: reduce min-width and allow button to wrap. ──────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .box-finder__field { min-width: 60px !important; flex: 1 1 60px !important; } .box-finder__btn { flex: 0 0 100% !important; justify-content: center !important; } } /* ──────────────────────────────────────────────────────────── 28. ULTRAWIDE (≥1440px) — prevent content looking adrift The container is capped at 1400px (override to 1600px at 1920px). Section backgrounds already fill full width. No horizontal scroll risk at ultrawide. Add max-width to the hero image so it doesn't render at full 1920px size and look stretched. ──────────────────────────────────────────────────────────── */ @media (min-width: 1440px) { .treek-right img { max-width: 760px !important; margin-inline-start: auto !important; } .dcta__stage { width: 420px !important; height: 420px !important; } } /* ──────────────────────────────────────────────────────────── 29. SAMPLE CTA FORM — input min-width at 320px ISSUE: `.sample-form input { min-width: 220px }` inside a flex-wrap layout. At 320px the input alone exceeds the container width (288px available). FIX: reduce min-width. ──────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .sample-form input { min-width: 0 !important; width: 100% !important; flex: 1 1 100% !important; } .sample-form .btn, .sample-form button { flex: 1 1 100% !important; width: 100% !important; } } /* ──────────────────────────────────────────────────────────── 30. PAGINATION — overflow at small widths ISSUE: Many page links in a flex row can overflow 320px. FIX: wrap and allow smaller buttons. ──────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .pagination { flex-wrap: wrap !important; gap: 6px !important; } .pagination__link { min-width: 36px !important; height: 36px !important; font-size: 0.82rem !important; } } /* ──────────────────────────────────────────────────────────── 31. SPECS GRID — auto-fill for responsive card layout ISSUE: `.specs-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) }` — at 320px this would produce a single column of 288px cards, which is correct. But at 480-768px where 2×260px = 520px > available width, it already drops to 1 column. No change needed. Just confirm scrollbar cleanup. ──────────────────────────────────────────────────────────── */ /* (No change needed — auto-fill already handles this correctly) */ /* ──────────────────────────────────────────────────────────── 32. MOBILE MENU — close button & active item colours ISSUE: When nav opens on mobile, active items use the orange background (#ff6600 bg + white text) which is correct but the dropdown sub-items revert to white text on `transparent` bg. On a white mobile nav this makes sub-items invisible. FIX: Already handled by override block, but let's be explicit. ──────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .nav__dropdown li a { color: #444 !important; } .nav > ul > li > a.is-active { background: #ff6600 !important; color: #fff !important; } } /* ──────────────────────────────────────────────────────────── 33. HERO IMAGE MIN-HEIGHT constraint ISSUE: `.treek-hero { min-height: clamp(480px, 50vw, 620px) }` at 768px → min-height is max(480, 384) = 480px. The image stacks behind text content (position: absolute, z-index: 0 on mobile). No issue, just ensure the min height is not too restrictive at very small sizes. ──────────────────────────────────────────────────────────── */ @media (max-width: 374px) { .treek-hero { min-height: 400px !important; } } /* ──────────────────────────────────────────────────────────── 34. STORY SCROLL — scroll-story inner ISSUE: `.scroll-story__inner { gap: 60px }` in a 2-col grid at 1024px+ this is fine; below 1024px it collapses to 1 col with 40px gap (good). The sticky becomes static at 1024px. No additional fix needed. ──────────────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────────────── 35. CART ITEM TITLE OVERFLOW ISSUE: `.cart-item__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }` — correct approach, but the `min-width: 0` must be present on the flex parent for ellipsis to work. The parent `.cart-item__info { flex: 1 }` needs `min-width: 0`. ──────────────────────────────────────────────────────────── */ .cart-item__info { min-width: 0 !important; } /* ──────────────────────────────────────────────────────────── END OF RESPONSIVE FIXES ──────────────────────────────────────────────────────────── */