/* ========================================================================== Base — layout container, section rhythm, shared button. Scoped to .tds-* classes or to body.tds-theme so nothing here can leak into cart / checkout / my-account markup we do not own. ========================================================================== */ /* --- The shell ----------------------------------------------------------- Storefront wraps the header and the page content in .col-full; our own sections use .tds-container. Giving both the SAME max-width, gutter and box model is what puts the logo, the category bar and the homepage sections on one vertical line. Storefront's own .col-full is content-box with the width applied at some breakpoints and margin gutters at others. Restating it once as border-box reproduces the identical geometry at every width while making it a single number we can widen -- see the token comment in tokens.css. ------------------------------------------------------------------------ */ .tds-container, body.tds-theme .col-full { box-sizing: border-box; width: 100%; max-width: var(--tds-shell); margin-inline: auto; padding-inline: var(--tds-shell-pad); } /* A container nested inside the shell must not add a second gutter. That extra 16px was why the homepage sections sat inside the header's edges. */ body.tds-theme .col-full .tds-container { max-width: none; padding-inline: 0; } /* --- Horizontal overflow ------------------------------------------------- The real causes are fixed where they happen: the product grid (product-card.css), the gallery (product-single.css), long unbreakable titles (product-card.css) and the rail arrows below. This is only the last-resort net for markup this theme does not own — a plugin widget, an embed, a pasted table in a page. NOTE: `overflow-x: clip` was tried here first and does NOT work. Chrome only propagates `hidden` from to the viewport; a `clip` value is dropped, the page still scrolled sideways, and the net silently did nothing. Measured, not assumed — keep `hidden`. ------------------------------------------------------------------------ */ body.tds-theme { overflow-x: hidden; max-width: 100%; } .tds-section { margin-block: var(--tds-section-gap); } .tds-section:first-child { margin-top: var(--tds-space-4); } .tds-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tds-space-4); margin-bottom: var(--tds-space-4); } .tds-section__title { font-family: var(--tds-font); font-size: var(--tds-fs-lg); font-weight: 800; line-height: var(--tds-lh-tight); color: var(--tds-ink); margin: 0; } .tds-section__more { font-size: var(--tds-fs-base); font-weight: 700; color: var(--tds-primary); text-decoration: none; white-space: nowrap; } .tds-section__more:hover, .tds-section__more:focus-visible { color: var(--tds-primary-ink); text-decoration: underline; } /* --- Buttons ------------------------------------------------------------- Only OUR buttons. Storefront's .button (used by add-to-cart and checkout) is deliberately not restyled here. ------------------------------------------------------------------------ */ .tds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--tds-space-2); min-height: 44px; /* touch target */ padding: 10px 22px; border: 0; border-radius: var(--tds-radius-sm); font-family: var(--tds-font); font-size: var(--tds-fs-base); font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; } .tds-btn--primary { background: var(--tds-primary); color: var(--tds-white); } .tds-btn--primary:hover, .tds-btn--primary:focus-visible { background: var(--tds-primary-ink); color: var(--tds-white); } /* --- Horizontal rail ----------------------------------------------------- Shared by the header category bar, the homepage series rail and the shop category chips. Scroll-snapped, keyboard reachable, no JS required. assets/js/rail.js only adds optional arrow buttons on wide screens. ------------------------------------------------------------------------ */ .tds-rail { display: flex; gap: var(--tds-space-3); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: var(--tds-space-2); } .tds-rail > * { scroll-snap-align: start; flex: 0 0 auto; } .tds-rail::-webkit-scrollbar { height: 8px; } .tds-rail::-webkit-scrollbar-thumb { background: var(--tds-line); border-radius: 4px; } .tds-rail::-webkit-scrollbar-track { background: transparent; } /* A rail scrolls inside itself; it must never widen its parent. */ .tds-rail { max-width: 100%; min-width: 0; overscroll-behavior-x: contain; } /* Rail with JS arrows attached. */ .tds-rail-wrap { position: relative; max-width: 100%; min-width: 0; } .tds-rail-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; border: 1px solid var(--tds-line); border-radius: var(--tds-radius-pill); background: var(--tds-white); box-shadow: var(--tds-shadow); color: var(--tds-ink); font-size: var(--tds-fs-md); line-height: 1; cursor: pointer; display: none; } .tds-rail-arrow[hidden] { display: none !important; } /* Kept inside the wrapper: a negative offset bled past the content edge and was one of the elements producing a page-level horizontal scrollbar. */ .tds-rail-arrow--prev { left: 0; } .tds-rail-arrow--next { right: 0; } @media (min-width: 1024px) and (hover: hover) { .tds-rail-arrow { display: block; } } /* --- Accessibility -------------------------------------------------------- */ body.tds-theme :is(.tds-btn, .tds-chip, .tds-cat, .tds-itype, .tds-slide, .tds-catbar__link):focus-visible { outline: 2px solid var(--tds-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { body.tds-theme * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }