/* ========================================================================== House of Serene — responsive fixes (mobile / tablet / desktop) Loaded LAST in _Layout.cshtml, after every page's own @section head styles, so these corrections win over the stacked Kalles / Puraali / Riode / serene layers without having to raise specificity on every rule. Breakpoints used here match the rest of the theme: <= 480 small phones · <= 767 phones · 768–991 tablet portrait 992–1199 tablet landscape / small laptop · >= 1200 desktop ========================================================================== */ /* ── Header ────────────────────────────────────────────────────────────────── 1. 992–1199px: styles.css forces `#mobMenuToggle { display:flex !important }` up to 1199px, so the burger appeared (stacked under the search field) while the full desktop menu bar was also showing. The desktop bar wins from 992px. */ @media (min-width: 992px) { .site-header #mobMenuToggle.rd-burger { display: none !important; } } /* 2. Top bar links ("Need Help", "Sign in") wrapped onto two lines on small laptops. */ .rd-top__link, .rd-top__delim { white-space: nowrap; } @media (min-width: 992px) and (max-width: 1199px) { .rd-top__right > * { margin-left: 14px; } .rd-top__right { font-size: 11px; letter-spacing: .03em; } } /* 3. Phones / tablets: header icons were 16–30px tap targets of mismatched visual sizes (phone icon 30px, search 24px, cart 30px drawn smaller). Give every control a 44×44 hit area (WCAG 2.5.5 / Apple HIG) and one consistent icon size. */ @media (max-width: 991px) { .site-header .rd-burger.mob-menu-toggle, .site-header .rd-ico.header-action-btn, .site-header .rd-cart.header-action-btn, .site-header .rd-callbox { min-width: 44px; min-height: 44px; padding: 0; margin: 0; align-items: center; justify-content: center; } .site-header .rd-burger.mob-menu-toggle { margin-left: -10px; margin-right: 6px; } .site-header .rd-burger.mob-menu-toggle svg { width: 22px; height: 15px; } .site-header .rd-mid__right { gap: 2px; } .site-header .rd-mid__right svg { width: 24px; height: 24px; } .site-header .rd-callbox svg { width: 22px; height: 22px; } .site-header .rd-cart.header-action-btn { margin-right: -10px; } .site-header .rd-cart__bag .rd-count, .site-header .rd-ico .rd-count { top: -4px; right: -9px; } } @media (max-width: 767px) { .site-header .rd-ico--search.header-action-btn { margin-right: 0; } /* the 44px hit areas now set the row height, so the old 16px padding isn't needed */ .rd-mid { padding: 8px 0; } } @media (max-width: 360px) { /* 320px phones: logo + 4 icons still fit without crowding */ .rd-logo img { width: 100px; } .site-header .rd-burger.mob-menu-toggle { margin-right: 2px; } } /* ── Mobile menu ───────────────────────────────────────────────────────────── Below 768px the top bar's "Sign in / Register" links are hidden, and below 480px the header's wishlist icon is too — but serene.css also hid the menu's own Wishlist / My Account list, leaving phone users no way to sign in or reach their wishlist. Bring that list back, styled for the dark panel. */ body .lk-mm__extra { display: block; margin: 8px 0 0; padding: 4px 0; list-style: none; border-top: 1px solid #3a2a30; border-bottom: 0; } body .lk-mm__extra a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 10px; color: #e1e1e1; font: 500 14px/1.3 var(--font-body, "Inter", sans-serif); text-decoration: none; } body .lk-mm__extra a:hover, body .lk-mm__extra a:focus-visible { color: #fff; } body .lk-mm__extra svg { flex: none; width: 18px; height: 18px; color: var(--gold, #B8975A); } /* Menu rows: comfortable 44px+ touch rows; contact links were 16px tall */ body .hdt-mb-menu__link, body .hdt-mb-menu .mobmenu-summary { min-height: 46px; } body .lk-mm__contact a { display: block; padding: 8px 0; } /* Close "X" sits outside the panel; on 320px phones the 296px panel left it no room */ @media (max-width: 360px) { body .lk-mm__panel { width: calc(100vw - 56px); } body .lk-mm__close { left: calc(100% + 10px); } } /* Mobile menu search: 16px text stops iOS zooming the page on focus */ .rd-mm-search { height: 44px; } .rd-mm-search input { font-size: 16px; } .rd-mm-search button { flex-basis: 44px; } /* ── Forms: iOS Safari zooms any focused field under 16px. The footer newsletter (14px), contact form (14px) and others slipped under the global rule. ── */ @media (max-width: 767px) { body input[type="text"], body input[type="email"], body input[type="password"], body input[type="tel"], body input[type="search"], body input[type="number"], body input[type="url"], body select, body textarea, body .rd-footer .rd-news-form input[type="email"], body .form-field input, body .form-field textarea { font-size: 16px; } body .rd-footer .rd-news-form input[type="email"]::placeholder { font-size: 15px; } } /* ── Collection / search results ───────────────────────────────────────────── Breadcrumb printed two separators between items ("Home › / House of Serene"): the markup already draws a chevron SVG, and serene.css added a "/" as well. */ body .kc-heading .hdt-breadcrumb-item + .hdt-breadcrumb-item::before { content: none; } body .kc-heading .hdt-breadcrumb-item { display: inline-flex; align-items: center; } body .kc-heading .hdt-breadcrumb-item svg { margin: 0 10px; color: #aaa; flex: none; } /* Sort control drew two outlines (a square wrapper border around the pill select) */ body .kc-sort { border: 0; background: transparent; } /* Toolbar (Filter · layout switch · Sort): at phone width the 180px sort box was pushed left over the third layout button. Let the sort control take the remaining space and shrink instead. */ @media (max-width: 767px) { body .kc-toolbar { grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; } body .kc-toolbar .hdt-control-sorting { justify-self: stretch; justify-content: flex-end; min-width: 0; } body .kc-toolbar .kc-sort { width: 100%; max-width: 170px; min-width: 0; } body .kc-toolbar .kc-sort .sort-select { width: 100%; min-width: 0; max-width: 100%; height: 40px; } body .kc-toolbar .hdt-view-layout-switch { gap: 4px; } body .kc-toolbar .c3-col { min-width: 32px; min-height: 36px; } body .hdt-filter_btn { min-height: 40px; } } @media (max-width: 360px) { /* no room for three layout buttons + sort on 320px screens: drop the list view */ body .kc-toolbar .c3-col.hdt-view-list { display: none; } } /* Title band: 56px + 50px of padding pushed the first products below the fold on phones. Tighter on small screens; title scales with the viewport. */ @media (max-width: 767px) { body .kc-heading__inner { padding: 26px 16px 22px; } body .kc-heading__title { margin-bottom: 6px; font-size: clamp(24px, 7vw, 30px); } body .u-banner .container { padding-top: 26px; padding-bottom: 22px; } body .u-banner h1, body .u-banner .u-banner__title, body .u-banner h1.u-banner__title { font-size: clamp(24px, 7vw, 30px); } body .kc-grid, body #productsGrid.kc-grid { gap: 22px 12px; } } /* ── Product cards ─────────────────────────────────────────────────────────── Card info is a grid: the title centred but the price and product code hugged the left edge, so each card read in two different alignments. */ body .pc.hdt-card-product .hdt-card-product__info { justify-items: center; text-align: center; } body .pc.hdt-card-product .hdt-price-wrapp { width: 100%; } @media (max-width: 767px) { body .pc.hdt-card-product .hdt-card-product__info { padding: 10px 4px 0; } body .pc .hdt-card-product__title, body .pc .hdt-card-product__title a { font-size: 16px; line-height: 1.35; } } /* Sale / New badges: on collection pages kalles-collection.css turned the badge into a fixed 38–46px circle while serene.css made it inline-block with top-left padding, so "-50%" sat in the corner spilling out of the circle. One centred rectangular label everywhere (as on the home page), in the brand sale red instead of the leftover orange. */ body .pc.hdt-card-product .hdt-badge, #productsGrid .pc.hdt-card-product .hdt-badge { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; min-width: 0; padding: 6px 9px 5px; border-radius: 0; font: 600 11px/1 var(--font-body, "Inter", sans-serif); letter-spacing: .04em; white-space: nowrap; } body .pc.hdt-card-product .hdt-badge--sale, #productsGrid .pc.hdt-card-product .hdt-badge--sale { background: var(--sale-red, #8B1E2D); color: #fff; } @media (max-width: 767px) { body .pc.hdt-card-product .hdt-badge, #productsGrid .pc.hdt-card-product .hdt-badge { padding: 5px 7px 4px; font-size: 10.5px; } } /* Slider dots were 6–8px targets. Keep the look, enlarge the tap area. */ .hdt-slider__dot { position: relative; } .hdt-slider__dot::after { content: ""; position: absolute; inset: -10px; } /* ── Product page ──────────────────────────────────────────────────────────── Title was 18px on phones / 22px on desktop — smaller than the price and easy to miss under the gallery. */ body .lk-pdp h1.product-title, body .lk-pdp .hdt-product-title { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; overflow-wrap: anywhere; } /* "ADD TO CART" wrapped onto two lines beside the quantity box on phones. */ body .lk-pdp #addToCartBtn.hdt-btn-atc { white-space: nowrap; min-width: 0; } @media (max-width: 480px) { body .lk-pdp #addToCartBtn.hdt-btn-atc { padding: 0 14px; letter-spacing: .06em; font-size: 13px; } body .qty-btn { width: 36px; } body .qty-input { width: 36px; } body .cta-row { gap: 8px; } } @media (max-width: 767px) { /* scrollable tab strip: keep a visible edge, and full-height tap rows */ body .product-tabs .tab-nav { -webkit-overflow-scrolling: touch; scrollbar-width: none; } body .product-tabs .tab-nav::-webkit-scrollbar { display: none; } body .product-tabs .tab-btn { min-height: 44px; } body .pdp-socials a { width: 38px; height: 38px; } } /* ── Footer ────────────────────────────────────────────────────────────────── Phone layout was one long column of 16px-tall links. Two columns for the link lists (contact column stays full width) and 40px tap rows. */ @media (max-width: 767px) { .rd-footer__middle { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding-top: 36px; } .rd-footer__col:first-child { grid-column: 1 / -1; } .rd-widget-body li { margin: 0; } .rd-widget-body li a { display: inline-flex; align-items: center; min-height: 40px; } .rd-socials a { width: 40px; height: 40px; } .rd-footer__top { padding: 32px 0; } } @media (max-width: 360px) { .rd-footer__middle { grid-template-columns: 1fr; } } /* ── Home page ─────────────────────────────────────────────────────────────── On phones the home page ran to ~19,000px: every brand section stacked its 10 cards as 5 rows (~2,140px each). Each section already ends in a "View all" button, so on phones the cards become one swipeable row (2¼ cards visible, so it's obvious there are more), which brings each section down to roughly a single screen. */ @media (max-width: 767px) { body .kh-section .kh-grid { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: calc((100% - 20px) / 2.25); gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: -15px; padding: 0 15px 6px; scroll-padding-inline: 15px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body .kh-section .kh-grid::-webkit-scrollbar { display: none; } body .kh-section .kh-grid > * { scroll-snap-align: start; min-width: 0; } /* "View all" was 11px text on a ~30px button */ body .kh-more { margin-top: 18px; text-align: center; } body .kh-more .kh-btn-outline { min-height: 44px; padding: 0 28px; font-size: 12.5px; } } /* Tablets show the grid 3 across, so 10 cards left a lone card on a 4th row: show 9 (three full rows); desktop's 5 across still shows all 10. */ @media (min-width: 768px) and (max-width: 1149px) { body .kh-section .kh-grid > .pc:nth-child(n+10) { display: none; } } /* Delivery / payment / support / returns strip: four stacked rows took ~530px on phones. A compact 2×2 grid with the icon above the text. */ @media (max-width: 767px) { body .kh-shipping { padding-block: 0; } body .kh-shipping .kh-shipping__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } body .kh-shipping .kh-ship { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px; text-align: center; border-right: 0; border-bottom: 1px solid var(--line); } body .kh-shipping .kh-ship:nth-child(odd) { border-right: 1px solid var(--line); } body .kh-shipping .kh-ship:nth-last-child(-n+2) { border-bottom: 0; } body .kh-shipping .kh-ship svg { width: 30px; height: 30px; } body .kh-shipping .kh-ship h3 { font-size: 13px; letter-spacing: .03em; } body .kh-shipping .kh-ship p { font-size: 12.5px; line-height: 1.45; } } /* Product-highlight widgets (Best sellers / On sale / …) stacked into one 1,400px column on phones; show the top two of each list there. */ @media (max-width: 575px) { .rd-widget .rd-wprod:nth-of-type(n+3) { display: none; } .rd-widgets { padding-bottom: 24px; } .rd-widget { margin-bottom: 8px; } } /* ── Buttons: one brand style ──────────────────────────────────────────────── The older generic .btn classes (styles.css) still drew rounded pills in near-black or navy on the 404, empty cart and empty wishlist, while the rest of the site uses square burgundy buttons. Bring them onto the brand style; 44px minimum height. */ body main .btn.btn { min-height: 44px; border-radius: 2px; letter-spacing: .08em; text-transform: uppercase; font: 500 13px/1 var(--font-body, "Inter", sans-serif); } body main .btn.btn-primary, body main .btn.btn-gold, body main .btn.btn-dark { background: var(--burgundy, #5A1827); border-color: var(--burgundy, #5A1827); color: #fff; } body main .btn.btn-primary:hover:not([disabled]), body main .btn.btn-gold:hover, body main .btn.btn-dark:hover { background: var(--burgundy-hover, #45101C); border-color: var(--burgundy-hover, #45101C); color: #fff; } body main .btn.btn-outline { background: transparent; border: 1px solid var(--burgundy, #5A1827); color: var(--burgundy, #5A1827); } body main .btn.btn-outline:hover { background: var(--burgundy, #5A1827); color: #fff; } /* 404: search field and button squeezed side by side cut the placeholder off on phones */ body .u-error__search input { border-radius: 2px; } @media (max-width: 575px) { body .u-error__search { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; } body .u-error__search input { width: 100%; min-height: 48px; } body .u-error__search .btn, body .u-error__inner > .btn { width: 100%; justify-content: center; } } /* ── Content pages: comfortable side gutters on phones ───────────────────────── */ @media (max-width: 767px) { body .static-page-body { padding-left: 4px; padding-right: 4px; } .sp-lead { font-size: 16px; } } /* ── Global safety nets ──────────────────────────────────────────────────────── */ img, video { max-width: 100%; } /* Long product codes / emails / URLs can't force a horizontal scroll */ body .cf__facts b, body .mc-item__name, body .static-page-body, body .contact-info-row { overflow-wrap: anywhere; } /* Back-to-top button: keep it off the edge and clear of the iOS home indicator */ @media (max-width: 767px) { .rd-top-btn { right: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 42px; height: 42px; } body.has-sticky-atc .rd-top-btn { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } /* ── Drawers (cart, wishlist, recently viewed, filters) ────────────────────── Close buttons were 28–34px targets; the drawer buttons were rounded pills in the old Kalles style; the free-delivery progress marker was bright red. */ body .mc-close, body #cartClose, body #rvClose, body .filter-drawer-close, body .hdt-dialog-btn__close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } body .mc-btn { min-height: 46px; border-radius: 2px; letter-spacing: .1em; text-transform: uppercase; font: 500 13px/1 var(--font-body, "Inter", sans-serif); } body .mc-btn.mc-btn--dark { background: var(--burgundy, #5A1827); border-color: var(--burgundy, #5A1827); color: #fff; } body .mc-btn.mc-btn--dark:hover { background: var(--burgundy-hover, #45101C); border-color: var(--burgundy-hover, #45101C); color: #fff; } body .mc-btn.mc-btn--light { background: #fff; border: 1px solid var(--burgundy, #5A1827); color: var(--burgundy, #5A1827); } body .mc-btn.mc-btn--light:hover { background: var(--burgundy, #5A1827); color: #fff; } body .mc-title, body #cartDrawer .mc-title { font-family: var(--font-heading, "Cormorant Garamond", serif); font-size: 22px; font-weight: 600; color: var(--text, #241519); } body .mc-empty h4, body .mc-empty__title { font-size: 20px; } body .fsb__fill, body #cartDrawer .fsb__fill { background: repeating-linear-gradient(-45deg, #B8975A 0, #B8975A 8px, #CBB07C 8px, #CBB07C 16px); } body .fsb__truck, body #cartDrawer .fsb__truck { background: var(--burgundy, #5A1827); border-color: var(--burgundy, #5A1827); color: #fff; } body .fsb__text b { color: var(--gold-dark, #8C6F3B); } @media (max-width: 480px) { /* drawers were 340px: leave a visible strip of page so it reads as a panel you can tap away */ body #cartDrawer, body #wishlistDrawer, body #rvDrawer { width: calc(100vw - 36px); max-width: 360px; } } /* ── Quick view ────────────────────────────────────────────────────────────── Gold/black rounded pills and a bright-red "Save" tag — make it match the product page: square burgundy Add to Cart, outlined Buy it now, brand sale-red tag. */ html body #quickViewModal .quick-view-title.quick-view-title { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; } #quickViewModal #quickViewAddToCart.btn { min-height: 46px; border-radius: 2px; background: var(--burgundy, #5A1827); border-color: var(--burgundy, #5A1827); color: #fff; letter-spacing: .1em; text-transform: uppercase; font: 500 13px/1 var(--font-body, "Inter", sans-serif); white-space: nowrap; } #quickViewModal #quickViewAddToCart.btn:hover:not([disabled]) { background: var(--burgundy-hover, #45101C); border-color: var(--burgundy-hover, #45101C); } #quickViewModal #quickViewAddToCart.btn[disabled] { background: #EDE6E1; border-color: #E2D8D1; color: #A39A9B; } #quickViewModal #qvBuyNow { min-height: 46px; border-radius: 2px; background: transparent; border: 1px solid var(--text, #241519); color: var(--text, #241519); letter-spacing: .1em; text-transform: uppercase; font: 500 13px/1 var(--font-body, "Inter", sans-serif); } #quickViewModal #qvBuyNow:hover { background: var(--text, #241519); color: #fff; } /* "Buy it now" stayed clickable when the item was out of stock */ #quickViewModal:has(#quickViewAddToCart[disabled]) #qvBuyNow { display: none; } html body #quickViewModal #quickViewSave.product-price-save { border-radius: 0; background: var(--sale-red, #8B1E2D); padding: 4px 8px; } #quickViewModal .qv-round, #quickViewModal .qv-arrow { min-width: 44px; min-height: 44px; } /* ── Desktop mega-menu ─────────────────────────────────────────────────────── A menu with a single list (e.g. Brands, 7 links) still opened the full 960px panel laid out for three columns, leaving most of it empty. Size it to its content and flow the list into two columns. */ @media (min-width: 992px) { .rd-nav .mega-menu:has(.hdt-menu-col > .mega-col:only-child) { width: min(680px, calc(100vw - 40px)); } .rd-nav .hdt-menu-col:has(> .mega-col:only-child) { grid-template-columns: minmax(0, 1fr); } .rd-nav .mega-col:only-child .hdt-mega-menu-list { columns: 2; column-gap: 30px; } .rd-nav .mega-col:only-child .hdt-mega-menu-list > li { break-inside: avoid; } } /* ── Cart drawer with items ────────────────────────────────────────────────── kalles-chrome.css styles the footer buttons through #cartDrawer (gold + black pills), which outranked the square burgundy rule above; quantity +/− and remove were 22–24px. */ body #cartDrawer .mc-btn, body #cartDrawer .mc-foot .mc-btn { min-height: 48px; border-radius: 2px; letter-spacing: .1em; text-transform: uppercase; font: 500 13px/1 var(--font-body, "Inter", sans-serif); } body #cartDrawer .mc-btn.mc-btn--dark { background: var(--burgundy, #5A1827); border: 1px solid var(--burgundy, #5A1827); color: #fff; } body #cartDrawer .mc-btn.mc-btn--dark:hover { background: var(--burgundy-hover, #45101C); border-color: var(--burgundy-hover, #45101C); } body #cartDrawer .mc-btn.mc-btn--light { background: #fff; border: 1px solid var(--burgundy, #5A1827); color: var(--burgundy, #5A1827); } body #cartDrawer .mc-btn.mc-btn--light:hover { background: var(--burgundy, #5A1827); color: #fff; } body #cartDrawer .mc-qty__btn { width: 34px; height: 34px; } body #cartDrawer .mc-item__remove { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; } /* the terms checkbox was a 16px target: make the whole line tappable */ body #cartDrawer .mc-terms { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; } body #cartDrawer .mc-terms input { width: 20px; height: 20px; flex: none; } /* ── Cart page ─────────────────────────────────────────────────────────────── Totals box was the old Kalles cool grey (#f6f6f8) — off the ivory/white palette. */ body .cart-summary { background: var(--surface, #fff); border: 1px solid var(--border, #E8DFD8); } /* ── Checkout ──────────────────────────────────────────────────────────────── Step links, back link and policy links were ~21px tall tap targets on phones. */ @media (max-width: 767px) { body .co-back { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } body.checkout-mode main footer a, body.checkout-mode .co-policies a, body.checkout-mode main nav[aria-label] button { display: inline-flex; align-items: center; min-height: 36px; } } /* Checkout field errors were drawn in the gold accent (low contrast on ivory, and gold doesn't read as "something's wrong"); the status line too. Use the brand red. */ body .fl.has-error input, body .fl.has-error select { border-color: var(--sale-red, #8B1E2D); box-shadow: 0 0 0 1px var(--sale-red, #8B1E2D); } body .fl .fl-err, body .co-status.err { color: var(--sale-red, #8B1E2D); } /* Phone "Order summary ⌄" bar: the chevron wrapped onto its own line under the text */ body .co-sumbar > span:first-child { display: inline-flex; align-items: center; white-space: nowrap; } /* Checkout review box (Contact / Ship to / Method): on phones the 70px label column left ~160px for the value, so an ordinary email wrapped mid-word ("example.co / m"). Put the label above its value as a small caption and give the value the full width. */ @media (max-width: 480px) { body .co-review__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; } body .co-review__row > span:first-child { grid-column: 1 / -1; font-size: 12px; letter-spacing: .02em; color: var(--text-2, #6B6061); } body .co-review__row > span:nth-child(2) { grid-column: 1; min-width: 0; overflow-wrap: anywhere; } body .co-review__row > button { grid-column: 2; grid-row: 2; align-self: start; min-height: 36px; } } /* Policy tables (Delivery & Returns): the content-page word-wrap safety net above let table headers break mid-word on phones ("Deliver / y time"). Normal wrapping inside tables, and tighter cells so three columns fit a phone. */ body .static-page-body table, body .policy-table { overflow-wrap: normal; word-break: normal; } @media (max-width: 575px) { body .policy-table th, body .policy-table td { padding: 10px 8px; font-size: 13.5px; line-height: 1.5; hyphens: manual; } } /* Cormorant Garamond's default old-style figures make "Section 1" read as "Section ı" in headings; use lining figures everywhere the serif is used for headings. */ h1, h2, h3, h4, h5, h6, .hdt-heading, .quick-view-title, .mc-title { font-variant-numeric: lining-nums !important; } /* !important: many `font:` shorthands on headings reset it */ /* Product photo zoom: on phones the lightbox capped the photo at 90% of the screen — smaller than the photo on the page itself. Use the full screen. */ @media (max-width: 767px) { body .zoom-lightbox-overlay img { max-width: 100vw; max-height: 100svh; width: 100vw; height: auto; } } /* ── Account pages (My Account, Orders, Addresses, Password, Preferences) ───── Phones: the account menu came AFTER the page content, in the left half of a two-column grid (its single