/* ========================================================================== Gadgets4Geeks — mobile + tablet layer -------------------------------------------------------------------------- Loaded last, after g4g.css and ui.css. Every rule in here lives inside a max-width or coarse-pointer query, so the desktop rendering is byte-for-byte what it was before this file existed. Three things it is here to fix: 1. The page was wider than the phone. The header bar, the deal timer and a few flex rows could not shrink, so the layout ran off the right edge and `overflow-x: hidden` on simply clipped it out of reach. 2. Product photos leaned on `:has()` for their frame padding and were laid out in normal flow, so on any browser without it the image sat inside a 26px pad in a 16/11 box and read as a thumbnail with a border. 3. Everything that only appeared on :hover — the wishlist heart, the "View details" peek — was unreachable on a touch screen, and every hover lift stuck after a tap. ========================================================================== */ /* ========================================================================== 1. Viewport, rhythm and overflow containment (phone + tablet) ========================================================================== */ @media (max-width: 1024px) { /* The notch eats into the inline padding in landscape, so the gutter is whichever is larger: the design pad, or the space the hardware needs. */ .wrap { padding-inline: max(var(--pad), env(safe-area-inset-left, 0px)) max(var(--pad), env(safe-area-inset-right, 0px)); } /* A stray wide child used to widen the whole document. Nothing in the page column may out-measure it now. */ .page, .section, .wrap > * { max-width: 100%; } /* The page itself must not scroll sideways — only the product rails may, and they declare their own overflow-x below. `clip` rather than `hidden` on purpose. `hidden` turns the element into a scroll container, so putting it on would make a scrollport and break every position: sticky on the site (the header, the shop filters, the cart summary); on iOS it also leaves the document pannable even while the bar is hidden. `clip` refuses the scroll without creating a scrollport at all. overflow-y stays visible next to it, which is legal only for `clip` — that is the whole reason for the pairing. */ html { overflow-x: clip; overflow-y: visible; } body { overflow-x: clip; overflow-y: visible; } body { -webkit-tap-highlight-color: transparent; } /* Long unbroken strings — SKUs, order ids, emails — were the other way a narrow column got pushed open. */ .card__name, .cline__name, .acct-hero__mail, .crumbs span:last-child, .spec-table td, .spec-table th, .summary__row, .receipt__grid dd { overflow-wrap: anywhere; } } @media (max-width: 640px) { /* Desktop rhythm is built for a 1240px column; on a phone the same clamp() bottoms out at 64px and the page reads as mostly air. */ .section { padding-block: 46px; } .section--tight { padding-block: 34px; } .section-head { gap: 14px; margin-bottom: 22px; } .h1 { font-size: clamp(2.05rem, 8.6vw, 2.9rem); } .h2 { font-size: clamp(1.6rem, 6.4vw, 2rem); } .lede { font-size: .95rem; } } /* ========================================================================== 2. Header — the main horizontal overflow -------------------------------------------------------------------------- .brand and .header__tools were both `flex: none`, so on a 360px screen the 38px mark, the wordmark and six 42px buttons added up to ~470px inside a 320px column and neither side would give. The brand may now shrink and ellipsise; the two tools that have a twin in the drawer step out. ========================================================================== */ @media (max-width: 940px) { .header__bar { gap: 10px; } .header__tools { gap: 7px; } .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; } .brand > span:last-child { min-width: 0; } .brand__name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 640px) { :root { --header-h: 60px; } /* Colour mode and the account link both live in the drawer, and the drawer is one tap away — the four that stay are the ones with no other route in: search, saved items, basket, menu. */ .header__tools .hide-mob { display: none !important; } .icon-btn { width: 38px; height: 38px; border-radius: 12px; } .icon-btn svg { width: 18px; height: 18px; } .brand__mark { width: 33px; height: 33px; border-radius: 11px; } .brand__mark svg { width: 18px; height: 18px; } .brand__name { font-size: .97rem; } .brand__sub { font-size: 8px; letter-spacing: .22em; } /* Stuck or not, the bar sits on live content the whole way down a phone page, so it keeps its own ground rather than borrowing the hero's. */ .header.is-stuck { backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); } .rail__group { gap: 30px; padding: 7px 16px; } .rail__item { font-size: 10.5px; letter-spacing: .1em; } } @media (max-width: 380px) { .header__tools { gap: 5px; } .icon-btn { width: 35px; height: 35px; } .brand__sub { display: none; } } /* ========================================================================== 3. Mobile drawer ========================================================================== */ @media (max-width: 940px) { .mnav { padding-block: calc(var(--header-h) + 30px) calc(40px + env(safe-area-inset-bottom, 0px)); padding-inline: max(var(--pad), env(safe-area-inset-left, 0px)) max(var(--pad), env(safe-area-inset-right, 0px)); } .mnav__link { font-size: 1.5rem; padding: 15px 0; } .mnav__close { top: 16px; } /* Colour mode reads as one more row of the menu rather than a stray control, so it inherits the link's type, rule and stagger. */ .mnav__theme { width: 100%; text-align: left; color: inherit; } .mnav__theme .theme-toggle { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--brand); } .mnav__theme .theme-toggle svg { width: 17px; height: 17px; } } /* ========================================================================== 4. Touch affordances -------------------------------------------------------------------------- A tap on a touch screen leaves :hover latched on the element until the next tap lands somewhere else, so every hover lift in the sheet stayed stuck. And anything that only existed on hover had no way in at all. ========================================================================== */ @media (hover: none), (pointer: coarse) { /* --- nothing lifts, tilts or shines on a finger --- */ .card:hover, .tile:hover, .perk:hover, .review:hover, .cline:hover, .btn:hover, .icon-btn:hover, .add:hover, .rail-btn:hover, .pill:hover, .pdp__thumb:hover, .pdp__play:hover, .link-arrow:hover svg { transform: none; } .card:hover { border-color: var(--line); box-shadow: none; } .card:hover::after { opacity: 0; } .card:hover .card__media svg, .card:hover .card__media .card__photo { transform: none; } .card:hover .card__media::before { animation: none; } .card:hover .cardopts__dots i { transform: none; } .tile:hover .tile__art { transform: none; } .btn:hover::after { transform: translateX(-120%); } .footer__links a:hover { padding-left: 0; } .tile:hover .tile__go { transform: none; background: var(--surface); color: var(--ink-2); border-color: var(--line); } /* --- a press should still say something, so the feedback moves to :active --- */ .card:active { transform: scale(.985); } .btn:active, .add:active, .icon-btn:active, .pill:active, .tile:active { transform: scale(.97); } /* --- the heart is the card's only save control; it cannot be hover-only --- */ .wish { opacity: 1; transform: none; } /* --- "View details" duplicated the tap the whole tile already performs --- */ .card__peek { display: none; } /* --- the marquees pause on hover, which a finger cannot express --- */ .rail:hover .rail__track, .strip:hover .strip__track { animation-play-state: running; } } /* ========================================================================== 5. Product cards and their photography -------------------------------------------------------------------------- The photo used to be an in-flow grid item whose frame padding was removed by `.card__media:has(.card__photo)`. Where `:has()` is missing that padding stayed and the shot rendered inset and letterboxed. Taking the photo out of flow makes the fill unconditional: the frame's aspect-ratio holds the box open, the image covers it edge to edge, and the illustration fallback keeps its breathing room from its own width instead of the parent's padding. ========================================================================== */ @media (max-width: 1024px) { .card__media { padding: 0; overflow: hidden; background-color: var(--surface-2); } /* The catalogue mixes square packshots, tall boxed shots and wide lifestyle frames. `cover` filled the frame by cropping to it, which sliced the top off a tall console and cut the ends from a wide shot — the product stopped being the thing you could actually see, and it looked worst on the narrowest cards. `contain` keeps the whole product, centred, at whatever ratio it was shot in, and the fixed frame means a row of cards still lines up even though the photos behind them never will. The inset stops a full-bleed shot from touching the frame edge. */ .card__media > .card__photo { position: absolute; inset: 0; width: 100%; height: 100%; padding: 8%; object-fit: contain; object-position: center; border-radius: 0; } /* Only the illustration is a direct-child here — the badge is a span and the peek's icon is a grandchild — so it can be inset on its own. */ .card__media > svg { width: 74%; height: auto; margin-inline: auto; } /* A slightly deeper frame than the desktop 16/11: phone cards are narrow, and a wide letterbox crops the top and bottom off a product shot. */ .card__media { aspect-ratio: 4 / 3; } .wish { opacity: 1; transform: none; width: 36px; height: 36px; top: 10px; right: 10px; } .wish svg { width: 17px; height: 17px; } /* Price beside button needs ~245px of card body. A grid column gives 152px on a phone and 212px on a tablet, and even a three-up rail card at 1024px only gives 273px once the compare price is set — so .card's own overflow:hidden was quietly slicing the Add button down the middle. Stack the two, and let the struck-through price fall to its own line instead of pushing the row wider. Every card, not just the grid: the rails run the same component at very similar widths. */ .card__foot { flex-direction: column; align-items: stretch; gap: 9px; } .price { flex-wrap: wrap; gap: 0 7px; } .add { justify-content: center; padding: 11px 12px; } } /* ---------- Two-up grid, compact card ------------------------------------ One card per row wastes half a phone screen and makes the shelf feel empty. Two-up is the shape every store app uses, so the card sheds what will not survive a 154px column: the tagline, the three-cell spec strip, and the price-beside-button footer that would collide at that width. */ @media (max-width: 640px) { .grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .grid-products .card__media { aspect-ratio: 1 / 1; } .grid-products .card__body { padding: 12px 12px 14px; gap: 9px; } /* Rating first, name under it: side by side, the star chip took a third of the line and left the name two words per row. */ .grid-products .card__top { flex-direction: column-reverse; align-items: flex-start; gap: 5px; } .grid-products .card__name { font-size: .89rem; line-height: 1.3; } .grid-products .card__tag, .grid-products .specstrip, .grid-products .cardopts__more { display: none; } .grid-products .price b { font-size: 1.05rem; } .grid-products .price s { font-size: .76rem; } .grid-products .stock { font-size: 9px; } .grid-products .wish { width: 32px; height: 32px; border-radius: 10px; } .grid-products .wish svg { width: 15px; height: 15px; } .grid-products .badge { top: 9px; left: 9px; padding: 4px 8px; font-size: 9px; } } /* Below this the two columns get too narrow to hold a price and a button. */ @media (max-width: 330px) { .grid-products { grid-template-columns: 1fr; } } /* ---------- Rail cards keep the full sheet ------------------------------- A rail card is ~86% of the screen, so it has the room the grid card does not; the compact rules above are scoped to .grid-products for that reason. */ @media (max-width: 640px) { .rail-track .card__body { padding: 15px 15px 17px; } .rail-track .card__name { font-size: 1rem; } } /* ========================================================================== 6. Rails — full-bleed swipe lanes -------------------------------------------------------------------------- Inside the page gutter a rail looks like a clipped grid. Bled to the screen edge, with the snap line pulled back to the gutter, it reads as something to swipe — and the half-card at the edge says there is more. ========================================================================== */ @media (max-width: 940px) { .rail-wrap__head { flex-wrap: wrap; } .rail-wrap__head .stack { flex: 1 1 100%; } } @media (max-width: 640px) { .rail-track { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad); } /* `mandatory` re-snaps the rail on any scroll that touches it, so a swipe down the page that starts a few degrees off vertical got answered by the shelf yanking itself to the next card. `proximity` snaps when the finger was clearly going sideways and otherwise leaves the gesture alone. */ .rail-track { scroll-snap-type: x proximity; } .rail-wrap::after { right: calc(var(--pad) * -1); width: 30px; } .rail-track--cards, .rail-track--tiles { grid-auto-columns: 84%; } .rail-btn { width: 38px; height: 38px; } /* Bigger than the desktop 8px, because a dot is also a tap target. */ .rail-dots { gap: 9px; margin-top: 16px; padding-block: 4px; } .rail__dotbtn { width: 9px; height: 9px; } .rail__dotbtn.is-on { width: 26px; } .tile--rail { height: 190px; } } /* ========================================================================== 7. Home — hero, perks, deal, collections, newsletter ========================================================================== */ @media (max-width: 640px) { .hero { padding-block: 30px 44px; } .hero__grid { gap: 32px; } .hero h1 { margin-block: 16px 14px; } .hero__cta { margin-top: 22px; gap: 10px; } .hero__cta .btn { flex: 1 1 100%; } .hero__stats { margin-top: 30px; } .hero__stat { padding: 14px 12px; } .showcase__stage { padding: 20px; } .showcase__price { top: 12px; right: 12px; padding: 9px 12px; } .showcase__price b { font-size: 1.05rem; } .showcase__meta { margin-top: 20px; gap: 10px; } .showcase__meta h3 { font-size: 1rem; } .strip { padding-block: 15px; } .strip__track { gap: 38px; } .strip__logo { font-size: 1rem; } /* --- the deal timer was the second hard overflow --- Four 74px minimums plus three 10px gaps needed 326px inside a panel that only had ~279px to give. Sharing the row instead of demanding a floor lets it fit any phone. */ .deal { padding: 24px 18px 26px; } .timer { gap: 7px; margin-top: 22px; } .timer__unit { min-width: 0; flex: 1 1 0; padding: 11px 4px; } .timer__unit b { font-size: 1.4rem; } .perk { padding: 20px 18px 22px; } .news { padding: 30px 20px 34px; } .news__form { flex-direction: column; border-radius: 20px; } .news__form button { width: 100%; } } /* Filter pills scroll rather than stack into four ragged rows. */ @media (max-width: 640px) { .filters { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); padding-block: 2px 4px; margin-bottom: 20px; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .pill { flex: none; padding: 10px 16px; } } /* ========================================================================== 8. Shop ========================================================================== */ @media (max-width: 940px) { /* Sticking a full-height filter panel to the top of a single-column page pins a screen of controls over the results the shopper came for. */ .filters-card { position: static; } .shop { gap: 18px; } /* Wrapped, the count keeps line one and the sort form gets line two — so give the select the whole line rather than leaving it half-stranded. */ .shop__bar { gap: 10px; } .shop__sort { flex: 1 1 100%; } .shop__sort .p-select { flex: 1; } } /* On a tablet the filter card is one wide band, so its four groups sit side by side instead of stacking into a column of mostly empty rows. */ @media (min-width: 641px) and (max-width: 940px) { .filters-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .filters-card__group { border-bottom: 1px solid var(--line); } .filters-card__group:nth-of-type(odd) { border-right: 1px solid var(--line); } .filters-card__group:nth-last-of-type(-n+2) { border-bottom: 0; } } /* Categories become a swipe row of chips: the radio list was the tallest thing between the page heading and the first product. */ @media (max-width: 640px) { .filters-card__group:first-of-type .stack { /* !important only because the gap is set inline on the element, where the desktop radio list wants it tight and a chip row does not. */ display: flex; gap: 8px !important; overflow-x: auto; overscroll-behavior-x: contain; margin-inline: -18px; padding-inline: 18px; padding-block: 2px; scrollbar-width: none; } .filters-card__group:first-of-type .stack::-webkit-scrollbar { display: none; } .filters-card__group:first-of-type .fopt { flex: none; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; } /* Hidden, not removed: the label still toggles it and it still takes focus. */ .filters-card__group:first-of-type .fopt input { position: absolute; opacity: 0; pointer-events: none; } .filters-card__group:first-of-type .fopt em { margin-left: 0; } .filters-card__group:first-of-type .fopt:has(input:checked) { border-color: var(--brand-line); } .filters-card__group { padding: 16px 18px; } } /* ========================================================================== 9. Product page ========================================================================== */ @media (max-width: 940px) { .pdp { gap: 22px; } /* 4/3 on a phone leaves a wide, short stage; square gives the product another ~25% of height without pushing the buy box off the screen. */ .pdp__stage { aspect-ratio: 1 / 1; padding: 18px; } /* Same reasoning as the card photo: the buy decision is made off this image, so it shows the whole product rather than a crop of it. The magnifier still works — zoom scales the element, not the fit. */ .pdp__shot { padding: 6%; object-fit: contain; object-position: center; } .pdp__thumb img { padding: 8%; object-fit: contain; } /* Basket, summary and search thumbnails are the shopper checking they picked the right thing, which a crop can genuinely get wrong. */ .cline__art img, .citem__art img, .sumline__art img, .shit__art img, .p-thumb img, .pop__art img { padding: 7%; object-fit: contain; } .pdp__thumbs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px; } .pdp__thumbs::-webkit-scrollbar { display: none; } .pdp__thumb { flex: none; width: 66px; height: 54px; } } @media (max-width: 640px) { .pdp__price b { font-size: 2rem; } .pdp__actions { gap: 9px; margin-top: 18px; } /* Three controls on one row at 320px used to clip "Add to cart" to "Add to ca". Trimming the stepper and the heart hands the width back to the button that matters. */ .qty button { width: 34px; height: 42px; } .qty input { width: 36px; height: 42px; } .wish--big { width: 42px; height: 42px; } .tabs__head { scrollbar-width: none; } .tabs__head::-webkit-scrollbar { display: none; } .tabs__btn { padding: 10px 14px; font-size: .86rem; } .tabs__panel { padding: 18px 16px; font-size: .9rem; } .spec-table th { width: 40%; font-size: 10px; } .spec-table td { font-size: .85rem; } /* A long product name would otherwise wrap the trail onto three lines. */ .crumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); margin-bottom: 18px; } .crumbs::-webkit-scrollbar { display: none; } .crumbs > * { flex: none; } .crumbs span:last-child { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; } .emi-peek__grid { grid-template-columns: 1fr; } } /* ========================================================================== 10. Cart, checkout, receipt ========================================================================== */ @media (max-width: 940px) { /* Below the lines in a single column there is nothing left to stick to. */ .summary.p-sticky, .p-sticky { position: static; } .cartpage { gap: 18px; } } @media (max-width: 640px) { .cline { padding: 12px; border-radius: var(--radius); gap: 12px; } .cline__tools { gap: 8px; margin-top: 9px; } .cline__act { padding: 8px 12px; } .cline__total { font-size: 1.08rem; } .summary { padding: 18px; border-radius: var(--radius); } .summary__row--total b { font-size: 1.3rem; } .pay__box { padding: 13px 12px; gap: 11px; } .pay__ico { width: 34px; height: 34px; } .receipt { gap: 20px; } .receipt__eta { margin-top: 16px; padding: 10px 15px; font-size: .84rem; } .zonebox { flex-wrap: wrap; } } /* ========================================================================== 11. Account ========================================================================== */ @media (max-width: 640px) { .acct-hero { padding: 20px 18px 22px; gap: 14px; } .acct-hero__avatar { width: 56px; height: 56px; border-radius: 17px; font-size: 1.15rem; } .acct-hero__id h1 { font-size: 1.5rem; } .acct-hero__actions .btn { flex: 1 1 auto; justify-content: center; } .p-card__head { padding: 14px 16px; } .p-card__body { padding: 16px; } /* Thumb, order number, status, total and a chevron on one 320px line left the number two characters wide. The spacer already sits exactly where the row wants to break, so it stops pushing and becomes the break. */ .p-listrow { flex-wrap: wrap; gap: 9px 10px; padding: 13px 16px; } .p-listrow .p-spacer { flex: 0 0 100%; height: 0; margin: 0; } .p-listrow > svg:last-child { margin-left: auto; } } /* ========================================================================== 12. Forms and tap targets -------------------------------------------------------------------------- iOS Safari zooms the whole page in on any control it focuses that is set below 16px, and it does not zoom back out — which is the other reason the site "would not sit inside the screen". Every control is pinned to 16px for the width range where that behaviour applies. ========================================================================== */ @media (max-width: 1024px) { .p-input, .p-select, .p-textarea, .qty input, .srch input, .news__form input, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea { font-size: 16px; } .p-input, .p-select, .p-textarea { padding: 12px 14px; border-radius: 12px; } .p-select { padding-right: 38px; } /* 44px is the smallest square a thumb hits reliably. */ .fopt { padding: 10px 10px; } .fswitch { padding-block: 6px; } .qty--sm button { width: 34px; height: 34px; } .qty--sm input { width: 38px; height: 34px; font-size: 16px; } .citem__x { width: 34px; height: 34px; } .p-pager a, .p-pager span { min-width: 40px; height: 40px; } .faq__item summary { padding: 16px 16px; } .socials a { width: 42px; height: 42px; } /* The range thumb is drawn by the platform and is too small by default. */ .range { height: 28px; } } /* ========================================================================== 13. Overlays — search, cart drawer, video, lightbox, toast ========================================================================== */ @media (max-width: 640px) { .ovl { padding: 14px var(--pad) 14px; } .ovl__panel { border-radius: var(--radius); } .srch { padding: 12px 14px; } .srch__body { max-height: 62vh; } .shit { grid-template-columns: 46px minmax(0, 1fr) auto; padding: 11px 14px; } .shit__art { width: 46px; height: 38px; } /* A drawer that reaches the bottom bezel needs to clear the home bar. */ .cart { width: 100%; border-left: 0; } .cart__head { padding: 16px 18px; } .cart__items { padding: 12px 16px; } .cart__foot { padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)); } .vid { padding: 12px; } .vid__head { padding: 13px 15px; } .vid__ctrl { gap: 9px; padding: 11px 12px; } .vid__btn { width: 34px; height: 34px; } .vid__big { width: 62px; height: 62px; } .vid__big svg { width: 24px; height: 24px; } .vid__foot { padding: 13px 15px; } .vid__chapters { scrollbar-width: none; } .vid__chapters::-webkit-scrollbar { display: none; } .toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 28px); padding: 11px 16px; } .lb__foot { padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)); } } /* ========================================================================== 14. Footer ========================================================================== */ @media (max-width: 640px) { .footer { padding-block: 40px calc(26px + env(safe-area-inset-bottom, 0px)); } .footer__grid { gap: 26px; } .footer p { margin-top: 12px; } .footer h4 { margin-bottom: 12px; } .footer__base { margin-top: 30px; padding-top: 18px; gap: 12px; } /* Five payment chips need ~288px; a 320px screen has 280px of column. */ .pays { flex-wrap: wrap; } } /* ========================================================================== 15. Tablet — 641px to 1024px -------------------------------------------------------------------------- Wide enough that the phone card would look stranded, narrow enough that the desktop 268px minimum only ever resolves to two columns. ========================================================================== */ @media (min-width: 641px) and (max-width: 1024px) { .grid-products { grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 16px; } .card__media { aspect-ratio: 4 / 3; } .card__body { padding: 16px 16px 18px; } .bento { grid-auto-rows: 196px; } .perks { gap: 14px; } }