/* Xtoys.UK storefront — ported from theme 2 "Bright Retail", recoloured to the logo. */ :root{ --bg:#ffffff; --alt:#f5f7fa; --line:#e2e7ee; --text:#101418; --muted:#646d7a; --red:#d84315; --red-d:#b23600; --navy:#222831; --blue:#f59e0b; --cyan:#ffc061; /* Brand orange at ~15% over white — reads as the same colour family but stays quiet enough to outline a card without competing with the product photo. #d84315 itself clears WCAG AA (4.8:1) on white, so it is safe as link text and as a button fill under white, not just as decoration. */ --red-soft:#ffe3d3; /* Darkened from #0a8a48, which failed WCAG AA at 4.43:1 even on plain white, and 3.96–4.13:1 on the pale green tints it sits on in .flash, .pill-ok, .badge-ok and .verified — all at 11–13.5px, so none of them qualify as large text. #07713b clears 5.4:1 on every one of those backgrounds, and white-on-green (.confirm .tick, .timeline) improves from 4.43 to 6.11. */ --green:#07713b; --amber:#f5a623; } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{max-width:100%} .wrap{max-width:1320px;margin:0 auto;padding:0 20px} /* ---------- header ---------- */ /* Bold throughout, white throughout. At 12px on a navy bar, regular weight reads as thin and washed even at 13.9:1 contrast — weight does more for legibility here than colour does, and the colour was already maxed. */ .top{background:var(--navy);color:#fff;font-size:12px;font-weight:700} /* gap is not optional here: space-between alone left the items touching once they were direct children, because the row is nearly full at desktop width and there was no whitespace between inline flex items to fall back on. flex-wrap:nowrap plus the ellipsis below keeps it one line at any width down to the 768px breakpoint, where the whole bar is hidden anyway. */ .top .wrap{display:flex;justify-content:space-between;align-items:center;height:36px; gap:26px;flex-wrap:nowrap;overflow:hidden} /* Every item is a direct child of the row, so space-between spreads them edge to edge. Wrapping three of them in a .pills div made the bar two flex items: one label hard left, a cluster hard right, and a gap in the middle. White, matching the text beside it. #dbe6ef before this, #b4c6d6 before that. The first change was an accessibility fix — #b4c6d6 was 4.0:1 on the navy, under the 4.5:1 minimum. This one was not: #dbe6ef already measured 10.97:1 and passed comfortably, it simply READ as grey next to white, which is a saturation problem rather than a contrast one. White is 13.9:1. */ .top .wrap > a{color:#fff;font-weight:700;white-space:nowrap} /* The leading label is the only thing here that may be truncated — every other item is a link that has to stay clickable and readable in full. */ .top .wrap > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .top .wrap > a:hover{color:var(--cyan)} /* The star sits on the text baseline rather than the box's, or it rides high against the cap height and looks like a stray glyph. */ .top-trustpilot{display:inline-flex;align-items:center;gap:5px} .top-trustpilot svg{color:#00b67a} /* Trustpilot's own green, on their star only */ /* Social icons: same size as the text they sit beside, and a target big enough to hit — a 16px icon with no padding is well under the 24px minimum a touch target should be. */ .socials{display:inline-flex;align-items:center;gap:6px;margin-left:4px} .social{display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:6px;color:inherit;transition:background .15s,color .15s} .social:hover{background:rgba(255,255,255,.14);color:#fff} .social:focus-visible{outline:2px solid var(--cyan);outline-offset:2px} .socials-footer{margin:14px 0 0} .socials-footer .social{width:32px;height:32px} /* body > header, NOT a bare `header`. As an element selector this pinned EVERY
on the site: the article title block on a blog post, the page title on /returns, /faqs, /delivery, /about, /privacy, /terms, the brand page head and the blog index head — ten of them, each covering the content beneath it as you scrolled. The site header is the only one that should stick. */ body > header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:25;background:#fff} .bar{display:flex;align-items:center;gap:22px;height:78px} .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px; border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;padding:0;flex:none} .hamburger span{display:block;width:20px;height:2px;background:var(--navy);margin:0 auto;border-radius:2px;transition:.2s} body.nav-open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.nav-open .hamburger span:nth-child(2){opacity:0} body.nav-open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .logo{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--navy)} .logo img{width:34px;height:34px;display:block} .logo b{font-weight:800} .logo span{color:var(--red)} .search{flex:1;display:flex;border:2px solid var(--navy);border-radius:8px;overflow:hidden;max-width:640px} .search input{flex:1;border:0;padding:12px 16px;font-size:16px;outline:none;font-family:inherit;min-width:0} .search button{background:var(--navy);color:#fff;border:0;padding:0 22px;font-size:15px;cursor:pointer;flex:none} .acts{display:flex;gap:26px;font-size:12px;text-align:center;color:var(--navy);font-weight:600} /* Account / Wishlist / Basket were var(--muted) — 5.24:1 at 12px, which scrapes past the WCAG minimum but reads as washed-out grey. These are primary navigation, not secondary text: navy at 600 weight takes them to 12.6:1. */ .acts .act{display:block} .acts b{display:block;font-size:19px;color:var(--navy);margin-bottom:2px} .navbar{background:var(--alt);border-bottom:1px solid var(--line)} .navbar .wrap{display:flex;gap:2px;height:46px;align-items:center;overflow-x:auto} .navbar a{font-size:14px;font-weight:600;padding:8px 14px;border-radius:6px;white-space:nowrap} .navbar a:hover,.navbar a[aria-current]{background:#fff;color:var(--red)} /* Account/Wishlist live in the drawer only; the header icons cover desktop. */ .nav-drawer-only{display:none} /* ---------- hero ---------- */ .hero{background:linear-gradient(100deg,#fff2f1,#e9f6fd)} /* The wrap is a single column: the SLIDER spans it and each SLIDE is the two-column copy/products grid. It used to be the two-column grid itself with one fixed product panel on the right, which cannot work now that the products change with the slide. */ .hero .wrap{padding:16px 20px} .flag{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:5px;margin-bottom:18px} h1{font-size:50px;line-height:1.06;letter-spacing:-.035em;margin-bottom:16px} h1 span{color:var(--red)} /* The sale clause is the only part that drops on a phone — one

either way, because two in the DOM leaves the page with no single subject. */ .hero-sale{display:inline} .hero-search{display:none} /* mobile-only in-hero search; shown at ≤768 */ /* The home page's h1, at every width. Modest on desktop: it states what the shop is, above a slider whose own headings are promotions (h2) and change with the stock. Enlarged on ≤768, where it is the only heading in the hero. */ .hero-h1{font-size:15px;line-height:1.3;font-weight:700;color:var(--navy); margin:0 0 10px;letter-spacing:-.01em} .lede{color:var(--muted);font-size:15px;line-height:1.5;margin-bottom:14px;max-width:46ch} .btn{display:inline-block;padding:15px 30px;border-radius:8px;font-weight:700;font-size:15px; border:0;cursor:pointer;font-family:inherit} .btn-p{background:var(--red);color:#fff;box-shadow:0 8px 20px -8px rgba(213,18,26,.75)} .btn-p:hover{background:var(--red-d)} .btn-o{border:2px solid var(--navy);color:var(--navy);margin-left:10px} .hero-art{background:#fff;border-radius:16px;padding:14px;box-shadow:0 24px 60px -30px rgba(10,46,77,.45)} /* Three products from the slide's brand. Images only — no name, no price — both are one click away on the product page. */ .hero-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .hero-pick{display:block;border:1px solid var(--line);border-radius:10px;padding:8px; transition:border-color .15s,transform .15s} .hero-pick:hover{border-color:var(--navy);transform:translateY(-2px)} /* Tall enough that the panel fills the hero rather than floating in the middle of it. Three portrait tiles read as a shop window; three squat ones read as an afterthought. */ .hero-pick img{width:100%;border-radius:8px;display:block;height:172px;object-fit:contain} /* A brand whose stock has not landed yet. Dashed, muted, and clearly a placeholder rather than a product that failed to load. */ .hero-pick-empty{display:flex;align-items:center;justify-content:center; border-style:dashed;background:var(--alt);min-height:188px} .hero-pick-empty:hover{border-color:var(--line);transform:none} .hero-pick-empty span{font-size:12px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--muted)} /* The one link out of the hero, and the reason it earns its place for search: it passes the home page's authority to the three brand pages that are actually competing for " UK". */ /* The product names under the lede. Compact, but real links — this is the crawlable text the hero previously lacked entirely. */ .hero-names{list-style:none;margin:0 0 12px;padding:0} .hero-names li{margin:0 0 3px} .hero-names a{font-size:13.5px;line-height:1.4;color:var(--navy); /* One line each: these names run past 50 characters and a wrapped list reads as a paragraph rather than a list of products. */ display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hero-names a:hover{color:var(--red);text-decoration:underline} .hero-link{display:inline-block;font-weight:700;font-size:15px;color:var(--red)} .hero-link:hover{text-decoration:underline} /* ---------- hero slider ---------- */ /* Slides are stacked and cross-faded, never display:none and never inserted by JS — a slide a crawler cannot see is a slide that never gets indexed, which is how heroes like this usually lose rankings rather than gain them. The grid keeps all three in one cell so the hero cannot change height as it rotates; a jumping hero is a CLS penalty on the largest element on the page. */ /* Two rows: the stacked slides, then the dots. The dots used to share the slides' single cell with align-self:end, which worked while a slide was two short paragraphs and collided with the brand link the moment slides grew. */ .hero-slider{display:grid;grid-template-rows:1fr auto;gap:12px} /* Each slide is itself the two-column copy/products grid, stacked in the slider's single cell so the hero cannot change height as it rotates — a jumping hero is a CLS penalty on the largest element on the page. */ .hero-slide{grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;gap:40px; align-items:center;opacity:0;visibility:hidden;transition:opacity .45s ease; pointer-events:none; /* Height held here, not on the heading: brand names differ in length, so without this the hero resized mid-rotation. On the slide it costs nothing visually, because the product panel is the tall side anyway. */ min-height:265px} .hero-slide.is-on{opacity:1;visibility:visible;pointer-events:auto} /* Sized on the CLASS, not the tag. Slide 1 is an h1 and slides 2-3 are h2s — one h1 per page — so they were inheriting the global h1 (50px) and h2 (28px) rules and the hero visibly changed size as it rotated. The heading level is a document-structure decision and must not leak into how the slide looks. */ /* No min-height here. Reserving three lines to stop the hero resizing left a short heading floating above a visible gap — the fix for one problem became a worse-looking one. The height is held on the SLIDE instead (below), so the hero still cannot jump while each heading sits directly on top of its own copy. */ .hero-title{font-size:34px;line-height:1.1;letter-spacing:-.03em;margin-bottom:10px} .hero-title em{font-style:normal;color:var(--red)} .hero-dots{grid-row:2;display:flex;gap:8px} .hero-dots button{width:26px;height:5px;border:0;border-radius:99px;padding:0;cursor:pointer; background:rgba(10,46,77,.22);transition:background .2s} .hero-dots button[aria-selected="true"]{background:var(--red)} /* Keyboard users must be able to see which dot they are on. */ .hero-dots button:focus-visible{outline:2px solid var(--navy);outline-offset:3px} /* Anyone who has asked their OS not to animate gets slide 1, still, with working dots. prefers-reduced-motion is an accessibility requirement, not a preference to style around. */ @media (prefers-reduced-motion:reduce){ .hero-slide{transition:none} } /* ---------- trust ---------- */ .trust{border-bottom:1px solid var(--line)} .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:20px} .trust div{display:flex;gap:11px;align-items:center;font-size:13px;color:var(--muted)} .trust b{display:block;color:var(--text);font-size:13.5px} .trust .ic{width:36px;height:36px;border-radius:8px;background:#fdeeed;color:var(--red); display:grid;place-items:center;font-size:17px;flex:none} /* ---------- sections ---------- */ section{padding:32px 0} .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} h2{font-size:28px;letter-spacing:-.02em} /* Section headings read as pill labels in the brand navy, paired with the red "See all" link on the right. */ /* h1 as well as h2: the brands page carries its heading at level 1 — it is the page's own title, not a section label — and must still look like the others. */ .head h1,.head h2{display:inline-block;background:var(--navy);color:#fff;font-size:13.5px;font-weight:800; letter-spacing:.05em;text-transform:uppercase;padding:8px 18px;border-radius:999px;line-height:1; box-shadow:0 6px 14px -9px rgba(10,46,77,.75)} .head a{color:var(--red);font-weight:700;font-size:14px} /* 4 per row → 8 categories show as 2 rows; square, larger cards. */ /* Two rows of six. The tiles are square, so six across keeps the whole range visible without scrolling past three rows of mostly-white cards. */ .cats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} /* Home "Our Range": 5-across so its ten tiles make two clean rows. Two-class selector so it wins over the .cats breakpoints below without editing each. */ .cats.cats-home{grid-template-columns:repeat(5,1fr)} /* The category directory (/categories): one block per parent, its children as tiles. Reuses .cats and .cat so a tile looks the same here as on the home page — two visual languages for the same object is how a shop starts to feel assembled from parts. */ .cat-group{padding:6px 0 30px} .cat-group .head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px} .cat-group .head h2{font-size:22px;margin:0} .cat-group .head h2 a{color:inherit} .cat-group .head h2 a:hover{color:var(--red)} .cat-group .head > a{font-size:13.5px;color:var(--muted);white-space:nowrap} .cat-group .head > a:hover{color:var(--red)} /* A soft red outline, not the near-white --line: at this tile size the pale grey border disappeared and the cards read as one connected block. */ .cat{border:2px solid var(--red-soft);border-radius:12px;text-align:center;transition:.16s; aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:0;overflow:hidden} .cat:hover{border-color:var(--red);box-shadow:0 10px 22px -12px rgba(213,18,26,.3);transform:translateY(-2px)} .cat .ic{width:64px;height:64px;border-radius:50%;background:var(--alt); display:grid;place-items:center;font-size:30px;margin:auto} /* The favicon fallback: the shop's mark inside the same circle, sized to sit with a little breathing room rather than filling the disc edge to edge. */ .cat .ic-logo img{width:40px;height:40px;object-fit:contain;display:block} /* The name sits in a solid navy footer rather than floating as dark text over the collage, where product photos pushed right up against it. */ .cat b{align-self:stretch;margin-top:auto;background:linear-gradient(160deg,var(--navy),#082439); color:#fff;border-top:3px solid var(--red-soft);font-size:13.5px;font-weight:700; letter-spacing:.2px;line-height:1.25;padding:9px 8px;min-height:42px; display:flex;align-items:center;justify-content:center} .cat:hover b{background:linear-gradient(160deg,var(--red),var(--red-d));border-top-color:var(--red)} /* Step down before the tiles get too small to read: 6 → 4 → 3 → 2. Twelve divides evenly by all four, so every layout ends on a full row. */ @media(max-width:1200px){.cats{grid-template-columns:repeat(4,1fr)}} /* ---------- product cards ---------- */ /* Cards are sized by WIDTH, not by a fixed column count. repeat(4,1fr) made a card as wide as whatever container it landed in, so the same card was 236px on a category page (grid narrowed by the filter sidebar) and 307px on the home page and under "You might also like" — 30% bigger, for no reason other than the absence of a sidebar. Sizing by width makes every grid on the site render the same card and simply fit more of them across when there is more room: category stays 4-up, home and related go 5-up. */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px} /* The home page rows show a denser 6-across grid on desktop (smaller cards), so a featured category's six products form one clean row. Scoped to .is-home so the brand/listing grids keep their own column counts. */ .is-home .grid{grid-template-columns:repeat(6,1fr);gap:14px} .card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;transition:.16s;position:relative; display:flex;flex-direction:column} .card:hover{box-shadow:0 16px 34px -18px rgba(10,46,77,.5);transform:translateY(-2px)} .thumb{aspect-ratio:1;background:#fff;position:relative;display:block} /* feed photography is shot on white — contain, never crop */ .thumb img{width:100%;height:100%;object-fit:contain;display:block;padding:8px} .tag{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-size:10px;font-weight:800; padding:4px 8px;border-radius:4px;letter-spacing:.05em;text-transform:uppercase} .wish{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:#fff; display:grid;place-items:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,.15);color:var(--muted)} .card .body{padding:14px;display:flex;flex-direction:column;flex:1} .brand{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;font-weight:700} .card h3{font-size:13.5px;font-weight:500;line-height:1.4;margin-bottom:8px;min-height:38px;color:#1b2330} .rate{font-size:11.5px;color:var(--muted);margin-bottom:9px} .rate i{color:var(--amber);font-style:normal;letter-spacing:.5px} .price{display:flex;align-items:baseline;gap:8px;margin-bottom:4px} .price b{font-size:18px;color:var(--red)} .price s{font-size:12px;color:var(--muted)} .stock{font-size:11.5px;color:var(--green);font-weight:600;margin-bottom:10px} .stock.out{color:var(--muted)} .add{width:100%;padding:10px;border:0;border-radius:7px;background:var(--navy);color:#fff; font-weight:700;font-size:13px;cursor:pointer;font-family:inherit} /* The auto margin has to go on whichever element is the FLEX CHILD of .body. It used to sit on .add, but an in-stock card wraps that button in a
— so the form was the flex child, the button's margin did nothing, and the buttons floated at whatever height the product name left them. The out-of-stock card has no form, hence both selectors. */ .card .body > form, .card .body > .add{margin-top:auto} .card .body > form .add{margin-top:0} .add:hover{background:var(--red)} .add:disabled{background:var(--line);color:var(--muted);cursor:not-allowed} /* ---------- listing ---------- */ /* Category header. The banner is optional, so both of these have to look deliberate on their own — the page must not depend on either existing. */ .cat-banner{width:100%;height:auto;max-height:260px;object-fit:cover; border-radius:12px;margin:6px 0 4px;display:block} /* Held to a reading measure like every other block of prose on the site; run the full 1200px and it is 160 characters a line. */ .cat-intro{max-width:75ch;margin:18px 0 4px;color:var(--muted);line-height:1.75;font-size:14.5px} /* Spacing set explicitly: the site's reset zeroes p margins, so without this two paragraphs of category copy butt together and read as one. */ .cat-intro p{margin:0 0 12px} .cat-intro ul,.cat-intro ol{margin:0 0 12px;padding-left:20px} .cat-intro li{margin:3px 0} .cat-intro h3{font-size:15px;font-weight:700;color:var(--navy);margin:18px 0 6px} .cat-intro a{color:var(--red);text-decoration:underline} .cat-intro > *:first-child{margin-top:0} .cat-intro > *:last-child{margin-bottom:0} .listing{display:grid;grid-template-columns:250px 1fr;gap:32px;padding:20px 0 40px} /* The filter panel is a
. On desktop it is always open and the disclosure toggle is hidden, so it looks and behaves exactly as the plain sidebar did; the collapsing only exists for the narrow layout below. */ /* 98px, not 20px: the site header is position:sticky at top:0 with a 78px bar, so a 20px offset parked this 58px underneath it and the first heading in the panel was permanently hidden. The account sidebar already uses 96px, which is how you can tell 20px predates the sticky header. */ .filter-panel{align-self:start;position:sticky;top:98px} .filter-panel > summary{display:none} /* Safari and Chrome each add their own marker, through different selectors. */ .filter-panel > summary::-webkit-details-marker{display:none} .filter-panel > summary::marker{content:""} /* Sticky and self-alignment moved to .filter-panel, which is now the grid item. */ .filters{border:1px solid var(--line);border-radius:10px;padding:18px} .filters h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:16px 0 10px;color:var(--muted)} .filters h4:first-child{margin-top:0} .filters label{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-bottom:7px;cursor:pointer} /* Long brand lists scroll inside the sidebar rather than pushing it down the page. */ .filters .facet{max-height:220px;overflow-y:auto;padding-right:4px} .filters .money{display:flex;gap:8px;align-items:center} /* min-width:0 — a flex item defaults to min-width:auto, which for a number input resolves to its intrinsic size (roughly 100–140px with spinners). Two of those plus the dash exceeded the ~262px available at 320px and pushed the sidebar wide. Every other flex input on the site already guards this. */ .filters .money input{width:100%;min-width:0;border:1px solid var(--line);border-radius:6px;padding:8px;font-size:13px;font-family:inherit} .filters .apply{width:100%;margin-top:16px;padding:10px;border:0;border-radius:7px;background:var(--navy); color:#fff;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit} .filters .clear{display:block;text-align:center;margin-top:10px;font-size:12.5px;color:var(--muted)} .toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:16px;flex-wrap:wrap} /* The listing heading is an

now — it is what the page is about. Sized to what it looked like as an

, because the global h1 is the 50px hero rule and a category name at that size dwarfs the products underneath it. */ .toolbar h1{font-size:28px;letter-spacing:-.02em;line-height:1.2;margin:0} .toolbar select{border:1px solid var(--line);border-radius:7px;padding:9px 12px;font-size:13.5px;font-family:inherit;background:#fff} .crumbs{font-size:12.5px;color:var(--muted);padding:12px 0 0} .crumbs a:hover{color:var(--red)} .empty{border:1px dashed var(--line);border-radius:10px;padding:56px 20px;text-align:center;color:var(--muted)} .pager{display:flex;gap:6px;justify-content:center;margin-top:36px;flex-wrap:wrap} .pager a,.pager span{border:1px solid var(--line);border-radius:7px;padding:8px 13px;font-size:13.5px} .pager .on{background:var(--navy);color:#fff;border-color:var(--navy)} .pager .off{color:var(--muted);opacity:.5} /* ---------- product detail ---------- */ .pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:22px 0 40px} /* Page body beside a sidebar, rather than a third column inside the product grid. As a third column the sidebar set the grid ROW height: a 640px rail against a ~340px gallery+buy row left a 300px hole between the images and the description tabs, and no amount of margin would close it because the row was simply that tall. Out here the sidebar spans the gallery AND the tabs, the tabs sit straight under the images, and the sidebar is free to be whatever height it likes. align-items:start stops the two columns stretching to match each other, and position:sticky keeps the rail in view while the description is read. */ @media(min-width:1100px){ .pdp-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:34px;align-items:start} .pdp{gap:34px} /* Not sticky, deliberately. It was, briefly: but the sidebar is 640px against a page body of 750-870px, so it had barely 230px of travel even with the description expanded — an extra wrapper element and two rules to make the rail creep a fraction of a screen. Plain flow is simpler and honest. */ } .gallery .main{border:1px solid var(--line);border-radius:12px;background:#fff;aspect-ratio:1;display:grid;place-items:center;overflow:hidden} .gallery .main img{width:100%;height:100%;object-fit:contain;padding:20px} /* Rail beside the image. The rail column is fixed at 72px and the main image takes the rest, so the photo keeps its square aspect and the rail matches its height exactly — which is what makes "does this overflow?" a real question rather than a guess. */ .gallery.has-rail{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:start} .thumb-rail{display:flex;flex-direction:column;gap:6px;min-width:0; /* Matches the square main image beside it. */ height:0;min-height:100%} .gallery .thumbs{display:flex;flex-direction:column;gap:10px;flex:1; /* auto, not hidden: a hidden box is not a scroll container, so even scrollTop set from script stayed at 0 and the arrows did nothing. The scrollbar itself is suppressed below — the arrows are the control, and a native bar beside 72px thumbnails is all bar and no thumbnail. */ overflow-y:auto;overflow-x:hidden; /* No scroll-behavior:smooth. With it set, scrollBy() from the arrow buttons was accepted and then silently discarded — the rail never moved. Instant is the honest trade: a thumbnail strip that jumps 3 images is fine; one that animates beautifully and does not scroll is not. */ scrollbar-width:none} .gallery .thumbs::-webkit-scrollbar{width:0;height:0} /* The thumbnail is now a