Segoe UI", Roboto, sans-serif; color: #111; line-height: 1.5; } .dough-freestyle :where(:not(span, a, strong, em, b, i, small, label, button, dt, dd, p, h1, h2, h3, h4, h5, h6, summary, time, mark, code, sup, sub, abbr, q, cite)) { min-width: 0; } /* Cart hidden state is runtime state, not design. The browser's UA rule loses to authored display values, * and cart markup naturally gives its panel, badge, empty state and images a display. Important is * deliberate: author CSS must never reinterpret application state. Kept cart-scoped so the authoring * audit still catches unrelated elements whose own display rule defeats their authored hidden state. */ .dough-freestyle [data-dough-cart][hidden], .dough-freestyle [data-dough-cart-count][hidden], .dough-freestyle [data-dough-cart-empty][hidden], .dough-freestyle [data-dough-cart-field="image"][hidden] { display: none !important; } /* The open state is runtime state too. Authors slide the drawer off-screen at rest and key the way back on a * selector they invented (`.is-open`, `[data-dough-state="open"]`) that the runtime never sets, so the shopper's * basket opened 105% off the edge (PROD 2026-10-18, "the cart button does nothing"). Whatever hid it, the * runtime's own marker brings it back; the resting transform still animates in. */ .dough-freestyle [data-dough-cart][data-dough-cart-shown] { transform: none !important; translate: none !important; opacity: 1 !important; visibility: visible !important; } /* Basket line controls are a platform contract with known roles, so like the quantity field below they get a full * default. The reset below inherits the text colour but keeps the UA's light button face, so an unstyled stepper or * remove button on a dark drawer painted white-on-light-grey: invisible (PROD 2026-10-27; 468 of 766 PROD cart pages * give their stepper buttons no class at all). Zero specificity, so any authored rule still wins. The stepper row is * keyed on holding both a delta button and the quantity slot and never the line's name, so a line card that skips * the wrapper keeps its own layout. */ :where(.dough-freestyle [data-dough-cart-qty-delta]) { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; padding: 0; border: 1px solid currentColor; border-radius: .375em; background: transparent; color: inherit; line-height: 1; cursor: pointer; } :where(.dough-freestyle :has(> [data-dough-cart-qty-delta]):has(> [data-dough-cart-field="quantity"]):not(:has(> [data-dough-cart-field="name"]))) { display: flex; align-items: center; gap: .5em; } :where(.dough-freestyle [data-dough-cart-field="quantity"]) { min-width: 1.5em; text-align: center; } :where(.dough-freestyle button[data-dough-cart-field="remove"]) { padding: 0; border: 0; background: transparent; color: inherit; font-size: .875em; text-decoration: underline; text-underline-offset: .2em; opacity: .8; cursor: pointer; } /* Browser-default reset, at ZERO specificity (:where) so any authored rule beats it without !important. * * Not cosmetic housekeeping - it is what decides how badly a page fails when the author sheet does not cover an * element. Measured 2026-08-20 at a 390px viewport, rendering a real generated page with its author CSS removed * (the restyle-collapse failure mode, see restyle-site.ts): WITHOUT this block the page renders 1024px wide and * scrolls sideways on every phone; WITH it, 393px and 390px on the two fixtures tried. Unstyled at its * intrinsic width is the whole 1024, which is also the owner's live report "on mobile the width is buggy, i see * the image going out of the phone" - so max-width here prevents a class that reaches healthy pages too, any * time an author forgets one image. * * On HEALTHY pages it is a no-op by measurement: across the 23 corpus pages every anchor and button is already * covered by the author sheet (or, for platform-injected markup, by the attribution rule below), and rendering * a full page with and without the block moved its height by 21px on one fixture and 0px on the other. * * Deliberately NOT reset, because each would change healthy pages rather than only broken ones: heading and * paragraph margins (a page relying on default spacing collapses into a wall of text), and list-style (prose * lists lose bullets the author intended). Those belong to the design, not to the platform. */ :where(.dough-freestyle a) { color: inherit; text-decoration: none; } :where(.dough-freestyle button, .dough-freestyle input, .dough-freestyle select, .dough-freestyle textarea) { font: inherit; color: inherit; } /* Cross-browser: Safari gives controls a 2px margin Chromium does not, so the same stepper sits differently per * engine. Checkbox and radio keep theirs, it is the gap to their label. Measured 2026-09-25 over 1084 corpus page * renders at 390px: controls moved on 5 pages vs 3 on an unchanged re-render, so a Chromium no-op. Two resets * were measured and rejected: letter-spacing inherit moved controls on 166 pages (buttons picking up a spaced * parent's tracking), and background or border on generic inputs would turn an unstyled email field invisible. */ :where(.dough-freestyle button, .dough-freestyle input:not([type=checkbox], [type=radio]), .dough-freestyle select, .dough-freestyle textarea) { margin: 0; } /* The quantity field is a platform contract with one known role, a counter between adjust-quantity buttons, so * unlike a generic input it can be fully unstyled: an author who styles the stepper but not the field otherwise * ships a white UA box with an inset border and spin arrows inside it. The runtime clamps 1-100 and the buttons * step it, so the native arrows are redundant. Zero specificity, so a designed field still wins: same corpus, 48 of * 528 quantity fields changed, every one a UA white box, and every authored border survived. */ :where(.dough-freestyle input[data-dough-quantity]) { appearance: textfield; -moz-appearance: textfield; background: transparent; border: 0; padding: 0; width: 3.5em; text-align: center; } :where(.dough-freestyle input[data-dough-quantity])::-webkit-inner-spin-button, :where(.dough-freestyle input[data-dough-quantity])::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* The stepper's SHAPE is the one thing the quantity contract never mentions (actions.ts asks only for an input * between two adjust-quantity buttons), so the author styles a wrapper and inherits the block default: 100% wide, * contents at flex-start. The result is a full-width bordered slab with its minus, field and plus stranded at its * left edge, and the field cannot take up the slack because the rule above pins it to 3.5em. Owner report 2026-10-08. Keyed on BOTH children * so it matches a stepper by construction and never a column that merely contains the input; zero specificity, so * a design that genuinely wants the control to span the column still wins by saying width: 100%. */ :where(.dough-freestyle :has(> input[data-dough-quantity]):has(> [data-dough-action="adjust-quantity"])) { width: max-content; max-width: 100%; } /* The buy row: a stepper and the buy button as the ONLY two children of one element are one control, so they sit on * one line at one height, the stepper at its own width and the button taking the rest. Authors wrote the row as a * wrapping flex with a wide button basis, or a column under a phone breakpoint, and five of seven product pages * shipped the stepper stranded on a line of its own above a full-width button of a different height (owner, * 2026-10-15: "really bad layout"); the two that read right were exactly this. Keyed on structure, so a row that also * holds a price or a wishlist is left to its author. !important and specificity 0-3-x because the defect IS the * authored rule, sometimes written !important itself inside the breakpoint. The button's side padding is trimmed * because a button that fills the row centres its label anyway: the authored 2-3em only ever cost room, and broke * "Add to Bag" onto two lines beside the stepper on a phone. When the label still cannot fit beside the stepper, * the button drops under it at full width instead of wrapping: the row may wrap, and the button's floor is its own * label (fit-content, capped at the row). The earlier floor of 0 plus text-wrap broke "Add to basket" onto two * lines in a 128px box at 390px and beat the author's own nowrap repair (2026-10-16). The label floor replaces an * authored px min-width too: a zero-specificity floor let 190-200px desktop floors push two buttons whose labels * fit beside the stepper onto a line of their own. * `> * > input`, not a nested :has(), which CSS forbids (the whole rule would be dropped). */ .dough-freestyle :has(> * > input[data-dough-quantity]):has(> [data-dough-action="buy"]):not(:has(> :nth-child(3))) { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: stretch !important; } .dough-freestyle :has(> * > input[data-dough-quantity]):has(> [data-dough-action="buy"]):not(:has(> :nth-child(3))) > :has(> input[data-dough-quantity]) { flex: none !important; width: auto !important; height: auto !important; } .dough-freestyle :has(> * > input[data-dough-quantity]):has(> [data-dough-action="buy"]):not(:has(> :nth-child(3))) > [data-dough-action="buy"] { flex: 1 1 0 !important; width: auto !important; min-width: fit-content !important; max-width: 100% !important; margin: 0 !important; padding-left: .75em !important; padding-right: .75em !important; } :where(.dough-freestyle img, .dough-freestyle svg, .dough-freestyle video) { max-width: 100%; } /* Intrinsic HTML height attributes must scale with responsive width. Authored crops/heights still win. */ :where(.dough-freestyle img) { height: auto; } .dough-freestyle { --dough-primary: #111111; --dough-secondary: #444444; --dough-fg: #111111; --dough-bg: #ffffff; --dough-muted: rgba(0,0,0,.6); --dough-border: rgba(0,0,0,.12); --dough-radius: 16px; --dough-space: 1rem; } /* Typographic craft the corpus never authors, so the platform guarantees it. Measured over 514 stored sites: * text-wrap 0/514, font-variant-numeric 0/514, ::selection 0/514, :focus-visible 4/514. Base sheet rather than * doctrine because a stylesheet rule needs no model cooperation and reaches every stored page retroactively, * where a prompt only nudges future generations. Zero specificity (:where) except where noted, so authored CSS * always wins. */ /* Headings only (h1-h3): balance evens out ragged two-to-four-line display lines. Never on paragraphs, where * balancing long-form text changes the measure the author designed. */ :where(.dough-freestyle h1, .dough-freestyle h2, .dough-freestyle h3) { text-wrap: balance; overflow-wrap: anywhere; } /* Running text: pretty only re-breaks the last lines to avoid a one-word orphan, so it keeps the authored measure * that balance would change. Not on controls, nav or labels, which the wrapped-label probe wants on one line. */ :where(.dough-freestyle p, .dough-freestyle li, .dough-freestyle dd, .dough-freestyle blockquote, .dough-freestyle figcaption) { text-wrap: pretty; } /* Tabular figures where digits align in columns: live price/number slots, stat blocks, spec tables. Only affects * digit glyphs, so a text-valued slot (productName) passes through untouched. NOT applied to all text: tabular * spacing in prose is a downgrade of a proportional face. */ :where(.dough-freestyle [data-dough-var], .dough-freestyle [data-dough-product-field="price"], .dough-freestyle .dough-stat__num, .dough-freestyle .dough-table th, .dough-freestyle .dough-table td) { font-variant-numeric: tabular-nums lining-nums; } /* Keyboard focus ring. Deliberately NOT zero specificity: the elements stay inside :where() but .dough-freestyle * and :focus-visible still count (0-2-0), so the ring survives the generic outline-none resets authored sheets * carry on *:focus (0-1-0) and button:focus (0-1-1), which would kill a :where()-wrapped ring outright. An * authored intentional .btn:focus-visible style ties at 0-2-0 and wins as the later sheet. currentColor rather * than a brand token: the local text color contrasts with the local background by construction, a token cannot * promise that. (No braces in this comment: topLevelRuleSelector slices at the first brace it sees.) */ .dough-freestyle :where(a, button, input, select, textarea, summary, [data-dough-action], [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Selection tint: a FIXED high-contrast pair, not the brand token. An authored --dough-primary can be a light * pastel and CSS cannot derive a readable text color from it, so brand-tinted selection cannot be guaranteed * legible on 514 unknown palettes; near-black behind white text reads on any of them. Zero specificity, so an * authored ::selection wins. */ :where(.dough-freestyle) ::selection { background: #111111; color: #ffffff; } .dough-freestyle .dough-card { border: 1px solid var(--dough-border); border-radius: var(--dough-radius); padding: calc(var(--dough-space) * 1.5); background: var(--dough-bg); } .dough-freestyle .dough-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--dough-space); } .dough-freestyle .dough-badge { display: inline-flex; align-items: center; gap: .35em; padding: .25em .7em; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--dough-primary); color: #fff; } .dough-freestyle .dough-pill { display: inline-flex; align-items: center; padding: .3em .9em; border-radius: 999px; border: 1px solid var(--dough-border); font-size: .85rem; } .dough-freestyle .dough-faq { border-bottom: 1px solid var(--dough-border); padding: var(--dough-space) 0; } .dough-freestyle .dough-faq__q { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1em; } .dough-freestyle .dough-faq__q::-webkit-details-marker { display: none; } .dough-freestyle .dough-faq__q::after { content: ''; flex: none; width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-.12em); } .dough-freestyle .dough-faq[open] .dough-faq__q::after { transform: rotate(-135deg) translateY(-.12em); } .dough-freestyle .dough-faq[open] .dough-faq__q { margin-bottom: .6em; } @media (prefers-reduced-motion: no-preference) { .dough-freestyle .dough-faq__q::after { transition: transform .25s ease; } } .dough-freestyle .dough-hero { display: grid; gap: calc(var(--dough-space) * 1.5); align-items: center; padding: calc(var(--dough-space) * 3) 0; } @media (min-width: 768px) { .dough-freestyle .dough-hero { grid-template-columns: 1fr 1fr; } } .dough-freestyle .dough-hero__media img { width: 100%; height: auto; border-radius: var(--dough-radius); display: block; } /* Gallery helpers are defaults, like the viewer below. Higher specificity overrode an authored column * with a two-track grid and forced cover cropping on a contain image (Lime Lark, DEV 2026-09-08). */ :where(.dough-freestyle .dough-gallery) { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--dough-space); } :where(.dough-freestyle .dough-gallery__item img) { width: 100%; height: 100%; object-fit: cover; border-radius: var(--dough-radius); display: block; } /* Product image viewer (data-dough-gallery). Every rule is wrapped in :where() so the whole block has * ZERO specificity and any authored selector beats it — the lesson from the variant-option ring, which * stacked a near-black outline on top of every well-styled site and could only be killed with * !important. The active-thumbnail rule survives that treatment (unlike the variant ring, which was * dropped entirely) because a strip with no current-photo indication is not merely unstyled, it is * unusable: the shopper cannot tell which image they are looking at. */ /* pan-y keeps vertical scrolling native while horizontal drags reach the swipe handler; pinch-zoom * keeps NATIVE page pinch working on the image (bare pan-y removed it, so a failed lightbox chunk * load left the shopper with no zoom at all). */ :where(.dough-freestyle [data-dough-gallery-main]) { display: block; width: 100%; height: auto; cursor: zoom-in; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-drag: none; } /* Size the stage in the authored layout. Capping only its image at 70vh leaves a full-width frame * around a narrower image and breaks galleries whose image fills the stage's height. */ /* align-items: center rather than the flex default of stretch. Reported twice by the owner as a recurring thumbnail * defect ("when the thumbnail are wide we should vertically center"), and the cause is the default: authors give the * rail flex:1 thumbs, one image resolves taller than its siblings, stretch grows every button to match, and each * button clips its image from the TOP because overflow: hidden crops from the start edge. Centring makes the rail * size to its content instead, so a wide thumb shows the middle of its picture. Still :where(), so an author who * genuinely wants stretched thumbs can say so. */ /* A rail with more thumbs than a phone is wide scrolls sideways, and a painted scrollbar under it is the worst-looking * part of the gallery (owner report 2026-09-23: "the carousel is horrible on mobile"). Browsers that draw classic * scrollbars (desktop, the builder preview, a narrow window) painted one under every overflowing rail. The rail * stays scrollable by touch, wheel and keyboard; the cut-off last thumb is what says there is more. Snap keeps a * swipe from stopping half-way through a thumb. */ :where(.dough-freestyle [data-dough-gallery-thumbs]) { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; overscroll-behavior-x: contain; } /* Authors routinely tag every thumb and forget the strip (DEV 2026-10-07: a .gallery-thumbnails rail with overflow-x: auto * and no strip attribute painted a classic Windows scrollbar under the rail). The element that directly holds the * thumbs IS the strip whatever it is called, so the scrollbar hiding keys off the thumbs, not the attribute. */ :where(.dough-freestyle [data-dough-gallery-thumbs], .dough-freestyle :has(> [data-dough-gallery-thumb])) { scrollbar-width: none; } :where(.dough-freestyle [data-dough-gallery-thumbs], .dough-freestyle :has(> [data-dough-gallery-thumb]))::-webkit-scrollbar { display: none; } :where(.dough-freestyle [data-dough-gallery-thumb]) { scroll-snap-align: start; flex: none; width: 4rem; height: 4rem; padding: 0; overflow: hidden; border: 1px solid var(--dough-border); border-radius: calc(var(--dough-radius) / 2); background: none; cursor: pointer; } /* A strip the author made a GRID packs at thumbnail size. `repeat(3, 1fr)` stood three 4rem thumbs at the left edge * of three third-width cells, so they read as scattered across the row (owner, 2026-10-15); the same grid with * full-width thumbs turned them into big tiles. Thumb-sized tracks (the 64-72px every flex strip uses) pack them with * the authored gap, at the start or centred if the strip says so, and a one-column rail still resolves to one track. * A flex strip ignores grid tracks, so this only ever touches a grid. Specificity 0-3-0 because the authored grid * rule is 0-2-0, which is the whole defect. */ .dough-freestyle [data-dough-gallery-thumbs][data-dough-gallery-thumbs], .dough-freestyle :has(> [data-dough-gallery-thumb]):has(> [data-dough-gallery-thumb]) { grid-template-columns: repeat(auto-fill, minmax(4rem, 4.5rem)); } /* A designed graphic with words in it (MEDIA_GRAPHIC_ATTR, the feature callout) is shown whole wherever it lands: a * cover crop in a frame of another shape cut its callouts mid-word, in a content slot and in the main viewer alike * (owner, 2026-10-15). Not :where(), because the authored frame's `object-fit: cover` is exactly what it overrides; * a thumbnail keeps its crop, since a 64px tile shows no words either way. Bottom-aligned because the frames that clip * are arches and top-rounded cards: in a portrait arch the slack goes above the graphic, so its top callout clears the * curve instead of sitting in it. */ .dough-freestyle img[data-dough-media-graphic][data-dough-media-graphic]:not([data-dough-gallery-thumb] img) { object-fit: contain; object-position: center bottom; } :where(.dough-freestyle [data-dough-gallery-thumb] img) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } :where(.dough-freestyle [data-dough-gallery-thumb][data-dough-active]) { border-color: var(--dough-primary); } /* The photo list of a strip-less carousel is DATA, not layout. the hidden attribute alone is a UA default that an author * rule on the container itself would beat, and the failure mode is the worst one available: a column of * full-size duplicate photographs under the viewer. So this one rule is deliberately NOT :where() and carries * !important, the same treatment the non-ready scrolly wrapper gets. */ .dough-freestyle [data-dough-gallery-photos] { display: none !important; } /* Photo-set entries are data even when their list wrapper is missing its marker. */ .dough-freestyle [data-dough-gallery-photo]:not([data-dough-gallery-main], [data-dough-gallery-thumb], [data-dough-gallery-thumb] *) { display: none !important; } /* Dots and arrows get a minimum usable default for the same reason the active-thumbnail rule does: a dot row * with no current-photo indication is not merely unstyled, it is unusable, and a 10px dot is not a tap target. * Zero specificity, so any authored look wins outright. */ :where(.dough-freestyle [data-dough-gallery-dots]) { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .75rem; } :where(.dough-freestyle [data-dough-gallery-dot]) { width: .5rem; height: .5rem; padding: 0; border: 1px solid var(--dough-primary); border-radius: 999px; background: none; cursor: pointer; } :where(.dough-freestyle [data-dough-gallery-dot][data-dough-active]) { background: var(--dough-primary); } :where(.dough-freestyle [data-dough-gallery-prev]), :where(.dough-freestyle [data-dough-gallery-next]) { cursor: pointer; min-width: 2.75rem; min-height: 2.75rem; } .dough-freestyle .dough-stat { text-align: center; } .dough-freestyle .dough-stat__num { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; line-height: 1; color: var(--dough-primary); } .dough-freestyle .dough-table { width: 100%; border-collapse: collapse; } .dough-freestyle .dough-table th, .dough-freestyle .dough-table td { padding: .75em 1em; border-bottom: 1px solid var(--dough-border); text-align: left; } /* A safety net, not a layout: no min-width on the table, which forced every wrapped table to scroll on a phone. */ .dough-freestyle .dough-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } [data-dough-action], [data-dough-click] { cursor: pointer; } /* No platform default for the selected state of plan/variant options: the page's own CSS owns it. * A baseline outline in --dough-primary stacked a second (usually near-black) ring on top of the * authored highlight on every well-styled site, and authors could only kill it with !important. * Sites that forget the attribute are caught at authoring time by collectCapabilityStyleWarnings. * Rating stars are the exception below: they need chrome stripped to read as glyphs at all. */ /* Rating-star default: strip button chrome and show empty vs. filled via color, so an unstyled star * rating still renders as a usable control. Low specificity so any authored star rule wins. */ .dough-freestyle [data-dough-action="select-rating"] { border: 0; background: none; padding: 0 .05em; line-height: 1; color: var(--dough-border); } .dough-freestyle [data-dough-action="select-rating"][data-dough-selected="true"] { color: var(--dough-primary); } /* The platform star rating (rating-input.ts): outline stars that fill up to the hovered one and stay filled to the * picked one. The author brands it with color and font-size on the placeholder, so that rule is zero-specificity; * the button reset sits at 0-3-0 because a page's own button rule (a filled pill, width:100% in a form) would * otherwise turn every star into a button. Hover only where a pointer hovers, so a tap leaves no stuck preview. */ :where(.dough-freestyle [data-dough-rating-input]) { display: inline-flex; gap: .2em; font-size: 1.75rem; color: var(--dough-primary); } .dough-freestyle [data-dough-rating-input] > [data-dough-action="select-rating"] { all: unset; display: inline-grid; place-items: center; padding: .05em; border-radius: 4px; color: inherit; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .dough-freestyle [data-dough-rating-input] > [data-dough-action="select-rating"]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .dough-freestyle [data-dough-rating-input] svg { width: 1em; height: 1em; fill: transparent; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; transition: fill .15s ease, transform .15s ease; } .dough-freestyle [data-dough-rating-input] > [data-dough-selected="true"] svg { fill: currentColor; } @media (hover: hover) { .dough-freestyle [data-dough-rating-input]:hover > [data-dough-action="select-rating"] svg { fill: transparent; } .dough-freestyle [data-dough-rating-input] > [data-dough-action="select-rating"]:hover svg, .dough-freestyle [data-dough-rating-input] > [data-dough-action="select-rating"]:has(~ :hover) svg { fill: currentColor; } .dough-freestyle [data-dough-rating-input] > [data-dough-action="select-rating"]:hover svg { transform: scale(1.15); } } @media (prefers-reduced-motion: reduce) { .dough-freestyle [data-dough-rating-input] svg { transition: none; } } /* Reviews "load more": the runtime injects one when the author didn't write it, so it needs to be * legible unstyled. Low specificity and no color of its own beyond the theme border, so an authored * button keeps its own look. Block display + auto margins center it under the list either way. */ .dough-freestyle [data-dough-reviews-more] { display: block; margin: var(--dough-space) auto 0; padding: .6em 1.4em; border: 1px solid var(--dough-border); border-radius: var(--dough-radius); background: none; color: inherit; font: inherit; } .dough-freestyle [data-dough-reviews-more][hidden] { display: none; } /* Catalogue browsing (catalog-browse.ts): paged/filtered cards and the controls the runtime toggles. */ .dough-freestyle [data-dough-product-id][hidden], .dough-freestyle [data-dough-catalog-clear][hidden], .dough-freestyle [data-dough-catalog-clear]:not([data-dough-catalog-ready]), .dough-freestyle [data-dough-catalog-no-results][hidden], .dough-freestyle [data-dough-catalog-no-results]:not([data-dough-catalog-ready]), .dough-freestyle [data-dough-catalog-more][hidden], .dough-freestyle [data-dough-catalog-more]:not([data-dough-catalog-ready]), .dough-freestyle [data-dough-catalog-all][hidden], .dough-freestyle [data-dough-catalog-all]:not([data-dough-catalog-ready]) { display: none !important; } .dough-freestyle [data-dough-catalog-search]:not([data-dough-catalog-ready]), .dough-freestyle [data-dough-catalog-sort]:not([data-dough-catalog-ready]), .dough-freestyle [data-dough-catalog-count]:not([data-dough-catalog-ready]) { visibility: hidden; } .dough-freestyle [data-dough-catalog-sentinel] { height: 1px; margin-top: -1px; pointer-events: none; } :where(.dough-freestyle select[data-dough-catalog-sort], .dough-freestyle button[data-dough-catalog-sort]) { font: inherit; font-size: .875rem; line-height: 1.4; color: inherit; min-height: 2.75rem; max-width: 100%; padding: .65rem 1rem; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: .5rem; background-color: transparent; cursor: pointer; } :where(.dough-freestyle select[data-dough-catalog-sort]) { width: auto; } :where(.dough-freestyle [data-dough-catalog-sort]:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; } :where(.dough-freestyle button[data-dough-catalog-sort]:hover, .dough-freestyle button[data-dough-catalog-sort][aria-pressed="true"]) { background-color: color-mix(in srgb, currentColor 10%, transparent); border-color: currentColor; } :where(.dough-freestyle [data-dough-catalog-sort]:disabled) { opacity: .5; cursor: not-allowed; } @supports (appearance: base-select) { :where(.dough-freestyle select[data-dough-catalog-sort]), :where(.dough-freestyle select[data-dough-catalog-sort])::picker(select) { appearance: base-select; } :where(.dough-freestyle select[data-dough-catalog-sort]) { gap: 1rem; align-items: center; } :where(.dough-freestyle select[data-dough-catalog-sort])::picker(select) { font: inherit; color: var(--dough-fg, CanvasText); background: var(--dough-bg, Canvas); padding: .375rem; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: .625rem; box-shadow: 0 .5rem 1.5rem #0002; margin-block: .375rem; } :where(.dough-freestyle select[data-dough-catalog-sort] option) { padding: .625rem .75rem; border-radius: .25rem; } :where(.dough-freestyle select[data-dough-catalog-sort] option:hover, .dough-freestyle select[data-dough-catalog-sort] option:checked) { background: color-mix(in srgb, currentColor 10%, transparent); } } /* Review card the runtime authors when a data-dough-reviews container has no template card (an edit emptied it, * or the author never wrote one). Same bar as the load-more fallback: legible unstyled, theme border, no colour * of its own. Kept plain on purpose so the audit's "no template card" warning stays worth fixing. */ .dough-freestyle [data-dough-review-fallback] { display: grid; gap: .35em; padding: 1em 1.2em; margin: 0 0 var(--dough-space); border: 1px solid var(--dough-border); border-radius: var(--dough-radius); font: inherit; color: inherit; } .dough-freestyle [data-dough-review-fallback] > p { margin: 0; } .dough-freestyle [data-dough-review-fallback] > time { font-size: .85em; opacity: .7; } /* Email-capture popup: platform-default overlay so a popup is a usable, dismissable, mobile-friendly * modal even before the author styles it. Applied only when shown (:not([hidden]) — the runtime toggles * the hidden attribute, and this keeps the hidden state working) and at low specificity, so both the * hidden attribute and any authored popup CSS still win. */ .dough-freestyle [data-dough-action="popup-capture"]:not([hidden]) { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--dough-space); background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .dough-freestyle [data-dough-action="popup-capture"]:not([hidden]) > * { position: relative; width: 100%; max-width: 26rem; max-height: 90vh; overflow: auto; background: var(--dough-bg); color: var(--dough-fg); border-radius: var(--dough-radius); padding: calc(var(--dough-space) * 1.5); } /* Mobile: full-screen takeover, ENFORCED. Geometry uses !important on purpose: authored cards carry * inline styles (max-width, border-radius, border) that would otherwise beat any stylesheet rule and * leave a floating card. The platform mandates the full-bleed frame; the author keeps the look * (colors, typography, padding). */ @media (max-width: 640px) { .dough-freestyle [data-dough-action="popup-capture"]:not([hidden]) { padding: 0 !important; } .dough-freestyle [data-dough-action="popup-capture"]:not([hidden]) > * { width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; display: flex; flex-direction: column; justify-content: center; } .dough-freestyle [data-dough-action="popup-capture"]:not([hidden]) [data-dough-popup-close] { top: max(.75rem, env(safe-area-inset-top)); right: .75rem; z-index: 1; } } /* Platform footer attribution (authored or write-gate-injected): quiet by default, and it must LOSE to * every authored rule. Hence :where() (zero specificity): a plain .dough-freestyle [data-dough-attribution] * selector is 0-2-0 and beat the site's own .footer-attribution a at 0-1-1, forcing near-black text onto * a dark footer (the attribution was present but invisible). And color: inherit rather than a fixed token, * so the line adapts to whatever the footer around it uses instead of assuming a light background. */ /* Platform legal row (terms + privacy, write-gate-injected). Same reasoning as the attribution below it: quiet, * inheriting the footer's own colour, and at ZERO specificity so any authored footer rule wins. Without this the * links rendered as unstyled anchors below the copyright line, which is exactly how they were reported. */ :where(.dough-freestyle .dough-legal-row) { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0; padding: var(--dough-space) 0 0; font-size: .75rem; letter-spacing: .02em; color: inherit; opacity: .7; } :where(.dough-freestyle .dough-legal-link) { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; } :where(.dough-freestyle [data-dough-attribution]) { display: block; padding: var(--dough-space) 0; text-align: center; font-size: .75rem; letter-spacing: .02em; color: inherit; opacity: .75; text-decoration: none; } /* Close affordance (authored or runtime-injected): a 44px tap target in the card's top-right corner. */ .dough-freestyle [data-dough-popup-close] { position: absolute; top: .5rem; right: .5rem; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--dough-muted); font-size: 1.6rem; line-height: 1; cursor: pointer; } /* Scroll reveal (data-dough-reveal). FAIL-OPEN by construction: the hide-at-rest rules only apply * once the runtime stamps [data-dough-motion] on the wrapper — which it never does without JS, with * reduced motion on, or in the screenshot-review capture — so crawlers, no-JS visitors and the * visual reviewer always see the complete resting page. Sibling of the CLAUDE.md rule that an * animation may never be what makes content visible. */ @media (prefers-reduced-motion: no-preference) { .dough-freestyle[data-dough-motion] [data-dough-reveal] { transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .dough-freestyle[data-dough-motion] [data-dough-reveal]:not([data-dough-revealed]) { opacity: 0; } .dough-freestyle[data-dough-motion] [data-dough-reveal="fade-up"]:not([data-dough-revealed]) { transform: translateY(24px); } .dough-freestyle[data-dough-motion] [data-dough-reveal="scale-in"]:not([data-dough-revealed]) { transform: scale(.94); } .dough-freestyle[data-dough-motion] [data-dough-reveal="slide-left"]:not([data-dough-revealed]) { transform: translateX(-32px); } .dough-freestyle[data-dough-motion] [data-dough-reveal="slide-right"]:not([data-dough-revealed]) { transform: translateX(32px); } } /* Scrollytelling. Same fail-open gate: without [data-dough-scrolly-ready] (runtime-set) the wrapper * is a normal section and the steps read stacked in document flow. When the runtime drives it, the * stage pins for the wrapper's height and the steps stack in one grid cell, crossfading on * data-dough-active. Steps must be DIRECT children of the stage (grid-area needs grid items). */ /* The author's OWN height on the wrapper, neutralized whenever the runtime is not driving it. This is the one * place fail-open cannot be left to the author: the docs ask for a scroll-through wrapper, models write a tall * value themselves (measured 2026-08-21: a 200vh and a 220vh authored min-height on two of three builds), and an * ungated one is multiple viewports of empty void with no JS, under reduced motion, and in the review capture, * which is exactly how BOTH of those builds were graded 3/10 and discarded, taking the whole run with them. * important is used because the author's class selector outranks this one and the point is that it cannot be * overridden; scoped to the not-ready state so it never touches the driven one. Same principle as the contrast * auto-fix: a model loop must not be paid to satisfy a check code can satisfy itself. */ /* Progress starts at 0 for every wrapper, always, JS or no JS. Author CSS reads this variable in calc(), and a * calc() over an UNSET variable is an invalid declaration that the browser drops, so without this default a * progress-driven rule renders as no rule at all: transforms, offsets and opacities silently vanish and the section * looks broken. Declared here rather than hoped for from the runtime, which is the same fail-open reasoning as the * reveal resting state. */ .dough-freestyle [data-dough-scrolly] { --dough-scrolly-progress: 0; } .dough-freestyle [data-dough-scrolly]:not([data-dough-scrolly-ready]) { min-height: 0 !important; height: auto !important; } .dough-freestyle [data-dough-scrolly][data-dough-scrolly-ready] { min-height: 220vh; } .dough-freestyle [data-dough-scrolly][data-dough-scrolly-ready] [data-dough-scrolly-stage] { position: sticky; top: 0; min-height: 100vh; min-height: 100dvh; overflow: hidden; display: grid; align-content: center; } .dough-freestyle [data-dough-scrolly][data-dough-scrolly-ready] [data-dough-scrolly-step] { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .45s ease, transform .45s ease; } .dough-freestyle [data-dough-scrolly][data-dough-scrolly-ready] [data-dough-scrolly-step][data-dough-active] { opacity: 1; transform: none; pointer-events: auto; } /* Ticker band (data-dough-ticker). Two states, and the RESTING one carries as much weight as the driven * one: the harness renders its review screenshot as a plain document with no runtime (document.ts), so a * resting row that stopped at its own content width would show the reviewer exactly the half-empty band * this capability exists to remove. At rest the row therefore spans the band and spreads its items; * that is also what a crawler and a reduced-motion reader get, and it reads as a deliberate row of * phrases rather than a stalled animation. * * Only when the runtime has repeated the items past the band width and measured the cycle stride * (--dough-ticker-shift) does the row become a max-content track and travel. Animating that MEASURED * distance rather than a percentage is what makes the wrap seamless at any width, and the repeats are * what stop a short band travelling through blank track. Both were the reported bug when the model * hand-authored this (2026-08-25). */ .dough-freestyle [data-dough-ticker] { overflow: hidden; } .dough-freestyle [data-dough-ticker] [data-dough-ticker-track] { display: flex; flex-wrap: nowrap; min-width: 100%; overflow: visible !important; } :where(.dough-freestyle [data-dough-ticker] [data-dough-ticker-track]) { align-items: center; gap: 2rem; justify-content: space-between; } .dough-freestyle [data-dough-ticker] [data-dough-ticker-track] > * { flex: 0 0 auto !important; } .dough-freestyle [data-dough-ticker][data-dough-ticker-ready] [data-dough-ticker-track] { width: max-content; min-width: 0; justify-content: flex-start; will-change: transform; } @media (prefers-reduced-motion: no-preference) { .dough-freestyle [data-dough-ticker][data-dough-ticker-ready] [data-dough-ticker-track] { animation: dough-ticker-travel var(--dough-ticker-duration, 30s) linear infinite; } } @keyframes dough-ticker-travel { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--dough-ticker-shift, 0px))); } } /* Pointer tilt: the runtime writes the transform per frame; the transition smooths entry/reset. */ .dough-freestyle [data-dough-tilt] { will-change: transform; transform-style: preserve-3d; transition: transform .12s ease-out; } /* Ambient canvas layer: injected as the section's first child, painted behind its content * (isolation creates the stacking context that keeps z-index:-1 inside the section). */ .dough-freestyle [data-dough-effect] { position: relative; isolation: isolate; } .dough-freestyle .dough-effect-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } /* Runtime-owned product viewer. Dialog top-layer placement escapes generated stacking contexts. */ .dough-freestyle .dough-lightbox { position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; z-index: 1200; background: #fff; color: #171717; font: 14px/1.4 system-ui, sans-serif; overscroll-behavior: contain; overflow: hidden; } .dough-freestyle .dough-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } .dough-freestyle .dough-lightbox::backdrop { background: #fff; } .dough-freestyle .dough-lightbox [hidden] { display: none !important; } .dough-freestyle .dough-lightbox button { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; margin: 0; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: #171717; font: inherit; line-height: 1; cursor: pointer; box-shadow: none; transform: none; touch-action: manipulation; } .dough-freestyle .dough-lightbox button:hover { background: #f5f5f5; } .dough-freestyle .dough-lightbox button:focus-visible { outline: 2px solid #171717; outline-offset: 3px; } .dough-freestyle .dough-lightbox button:disabled { opacity: .35; cursor: default; } .dough-freestyle .dough-lightbox__header { display: flex; align-items: center; gap: 0; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); } .dough-freestyle .dough-lightbox__count { margin-right: auto; color: #626262; font-size: 12px; font-variant-numeric: tabular-nums; } .dough-freestyle .dough-lightbox .dough-lightbox__close { font-size: 22px; font-weight: 300; } .dough-freestyle .dough-lightbox__stage { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; touch-action: none; cursor: zoom-in; } .dough-freestyle .dough-lightbox__stage[data-zoomed="true"] { cursor: grab; } .dough-freestyle .dough-lightbox__stage[data-zoomed="true"]:active { cursor: grabbing; } .dough-freestyle .dough-lightbox .dough-lightbox__image { display: block; flex: none; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: contain; user-select: none; -webkit-user-drag: none; transform-origin: center; will-change: transform; } .dough-freestyle .dough-lightbox .dough-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); border-radius: 50%; background: rgba(255,255,255,.88); font-size: 28px; font-weight: 300; z-index: 1; } .dough-freestyle .dough-lightbox__nav--prev { left: max(12px, env(safe-area-inset-left)); } .dough-freestyle .dough-lightbox__nav--next { right: max(12px, env(safe-area-inset-right)); } .dough-freestyle .dough-lightbox__status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; padding: 56px; background: #fff; color: #626262; text-align: center; cursor: default; } .dough-freestyle .dough-lightbox .dough-lightbox__retry { text-decoration: underline; text-underline-offset: 4px; } .dough-freestyle .dough-lightbox__footer { min-width: 0; padding: 12px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); } .dough-freestyle .dough-lightbox__caption { margin: 0 auto 8px; max-width: 65ch; max-height: 3em; overflow: auto; color: #626262; text-align: center; font: 12px/1.5 system-ui, sans-serif; } .dough-freestyle .dough-lightbox__thumbs { display: flex; gap: 8px; width: max-content; max-width: 100%; margin: 0 auto; padding: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; } .dough-freestyle .dough-lightbox .dough-lightbox__thumb { width: 48px; height: 52px; min-width: 48px; padding: 0 0 6px; overflow: hidden; border-bottom: 1px solid transparent; } .dough-freestyle .dough-lightbox .dough-lightbox__thumb[aria-pressed="true"] { border-bottom-color: #171717; } .dough-freestyle .dough-lightbox__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; } /* Gesture help stays available to assistive technology without a permanent instructional row. */ .dough-freestyle .dough-lightbox__hint { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 767px), (hover: none) and (pointer: coarse) { .dough-freestyle .dough-lightbox .dough-lightbox__nav { display: none; } } @media (max-height: 500px) { .dough-freestyle .dough-lightbox__caption, .dough-freestyle .dough-lightbox__hint { display: none; } .dough-freestyle .dough-lightbox__footer { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom)); } .dough-freestyle .dough-lightbox .dough-lightbox__thumb { width: 44px; height: 44px; min-width: 44px; } } /* Platform variant picker (product-commerce.ts insertFallbackGroups): rendered only for an axis the layout gave no * picker. currentColor and inherit so it takes the section's own text color and type rather than a brand token * the design may never have declared. A colour axis draws as swatches with its caption kept for screen readers. */ .dough-freestyle .dough-variant-fallback { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1rem; } .dough-freestyle .dough-variant-fallback__label { font-size: .85rem; font-weight: 600; } .dough-freestyle .dough-variant-fallback__options { display: flex; flex-wrap: wrap; gap: .5rem; } .dough-freestyle .dough-variant-fallback__option { min-width: 44px; min-height: 44px; padding: .5em 1em; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; opacity: .7; } .dough-freestyle .dough-variant-fallback__option[data-dough-selected="true"] { opacity: 1; box-shadow: inset 0 0 0 2px currentColor; } .dough-freestyle .dough-variant-fallback__option[aria-disabled="true"] { opacity: .35; cursor: not-allowed; } .dough-freestyle .dough-variant-fallback[data-dough-axis-kind="color"] .dough-variant-fallback__option { width: 44px; padding: 0; background: var(--dough-option-color, transparent); } .dough-freestyle .dough-variant-fallback[data-dough-axis-kind="color"] .dough-variant-fallback__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* A colour option the layout left as an empty control (product-commerce.ts markSwatch) is the swatch itself: floored * at a 44px tap target, its shade painted as a disc OVER the layout's own background, so the selected state the layout * draws with that background still shows as the ring around it. Half the box, so a dot the layout already draws in * the same shade merely grows. A min-* floor never shrinks an authored larger size. */ .dough-freestyle [data-dough-swatch] { min-width: 44px !important; min-height: 44px !important; background-image: radial-gradient(circle closest-side, var(--dough-option-color, transparent) 0 48%, transparent 53%) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important; } /* An option photo the render put in (product-commerce.ts insertOptionPhoto). "fill" is the whole chip: a swatch-sized * square with the chip's own corners, the chip shrink-wrapped to it. Sized off the chip's width instead, a bare * control the layout let stretch (a block button, a flex/grid item with no width) drew each option as a disc the * column's full width (Rebound 100 electrolytes, 2026-10-19). "thumb" sits ahead of the label like the standard * page's pill. A dot the layout drew inside the chip yields to the photo, which identifies the option where the dot cannot. */ .dough-freestyle [data-dough-action="select-variant"]:has(> img[data-dough-option-photo="fill"]) { width: fit-content !important; height: auto !important; flex: none !important; } .dough-freestyle img[data-dough-option-photo="fill"] { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: inherit; } .dough-freestyle img[data-dough-option-photo="thumb"] { display: inline-block; width: 1.75em; height: 1.75em; object-fit: cover; border-radius: 4px; flex: none; vertical-align: middle; margin-inline-end: .4em; } .dough-freestyle [data-dough-action="select-variant"]:has(> img[data-dough-option-photo]) > :empty:not(img) { display: none !important; }/* An option the render marked unavailable: the layout rarely styles that state, and a sold-out option that looks * live is a tap that silently does nothing (prod FnG24wQu: 7 of 8 shades disabled, all at full strength). */ .dough-freestyle [data-dough-action="select-variant"][aria-disabled="true"] { opacity: .4; cursor: not-allowed; } /* Dimmed by the runtime only because the choice on another axis rules it out: still a live pick, the other axes follow it. */ .dough-freestyle [data-dough-action="select-variant"][data-dough-unoffered] { cursor: pointer; } /* An option that cannot pair with the current pick (markUnavailableOptions). It still takes a click, so it keeps its * pointer: reaching a colour from a size it lacks is how a shopper gets there. */ .dough-freestyle [data-dough-action="select-variant"][data-dough-unavailable] { opacity: .45; text-decoration: line-through; } .dough-freestyle select[data-dough-action="select-variant"] option[data-dough-unavailable] { color: GrayText; } /* An option the layout left text-less gets its label as a real span (renderProductCommerce). A layout that drew the * label itself with generated content (content: attr(data-variant-value)) would then print it twice, so the * generated one yields to the span. */ .dough-freestyle [data-dough-action="select-variant"]:has([data-dough-option-text])::before, .dough-freestyle [data-dough-action="select-variant"]:has([data-dough-option-text])::after { content: none !important; } /* A frequency picker shows only in subscribe mode (commerce-state.ts CADENCE_GROUP_ATTR); the author's own display * rule on the picker must not bring a hidden one back. */ .dough-freestyle [data-dough-cadence-group][hidden] { display: none !important; } /* Platform plan choice (product-commerce.ts planFallback): rendered only where a subscribable product's layout has no * toggle. Two selectable cards in the store buy-box shape: a radio mark, the plan name with its real saving, the * plan's own price (the compare-at struck beside the subscription price), the frequency chips inside the subscription * card. Every colour derives from currentColor, so it takes the section's own ink, surface and type; color-mix tints * fall back to the plain currentColor line where unsupported. Selection reads off the button the runtime marks. */ .dough-freestyle .dough-plan-fallback { display: grid; gap: .5rem; margin: 0 0 1rem; } .dough-freestyle .dough-plan-fallback__card { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 24%, transparent); border-radius: 12px; transition: border-color .15s ease, background-color .15s ease; } .dough-freestyle .dough-plan-fallback__card:hover { border-color: color-mix(in srgb, currentColor 55%, transparent); } .dough-freestyle .dough-plan-fallback__card:has(> [data-dough-selected="true"]) { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; background-color: color-mix(in srgb, currentColor 5%, transparent); } .dough-freestyle .dough-plan-fallback__option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; width: 100%; height: auto; min-height: 52px; margin: 0; padding: .75em 1em; border: 0; border-radius: 11px; background: transparent; color: inherit; font: inherit; line-height: 1.3; text-align: left; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; } .dough-freestyle .dough-plan-fallback__mark { width: 1.125rem; height: 1.125rem; border: 1.5px solid currentColor; border-radius: 50%; } .dough-freestyle .dough-plan-fallback__option[data-dough-selected="true"] .dough-plan-fallback__mark { background: radial-gradient(circle, currentColor 0 40%, transparent 46%); } .dough-freestyle .dough-plan-fallback__name { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-weight: 600; } .dough-freestyle .dough-plan-fallback__badge { padding: .2em .6em; border-radius: 999px; background-color: color-mix(in srgb, currentColor 12%, transparent); font-size: .7em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .dough-freestyle .dough-plan-fallback__prices { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 .5rem; text-align: right; white-space: nowrap; } .dough-freestyle .dough-plan-fallback__compare { font-size: .875em; opacity: .55; } .dough-freestyle .dough-plan-fallback__price { font-weight: 700; } /* Frequency chips: inside the subscription card (indented under its name) or after an authored toggle. */ .dough-freestyle .dough-plan-cadence { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; margin: -.25rem 0 .75rem; font-size: .875rem; } .dough-freestyle .dough-plan-fallback__card > .dough-plan-cadence { margin: 0; padding: 0 1em .875em calc(1.875rem + 1em); } .dough-freestyle .dough-plan-fallback__card > .dough-plan-fallback__option:has(+ .dough-plan-cadence:not([hidden])) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dough-freestyle .dough-plan-fallback__card > .dough-plan-cadence:not([hidden]) { padding-top: .625em; } @media (max-width: 480px) { .dough-freestyle .dough-plan-cadence__label { flex-basis: 100%; } .dough-freestyle .dough-plan-fallback__card > .dough-plan-cadence { padding-left: 1em; } } .dough-freestyle .dough-plan-cadence__label { opacity: .7; } .dough-freestyle .dough-plan-cadence__options { display: flex; flex-wrap: wrap; gap: .375rem; } .dough-freestyle .dough-plan-cadence__option { width: auto; height: auto; min-height: 36px; margin: 0; padding: .25em .875em; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; background: transparent; color: inherit; font: inherit; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; white-space: nowrap; } .dough-freestyle .dough-plan-cadence__option[data-dough-selected="true"] { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; background-color: color-mix(in srgb, currentColor 8%, transparent); font-weight: 600; } /* The live selling-unit label is sized to its words: an authored badge on a block element stretched into a bar * across the whole buy column (owner, 2026-10-14). Empty for a single item, where a styled badge would draw an * empty pill. (0-2-0 beats an authored single-class rule; an authored width at higher specificity still wins.) */ .dough-freestyle [data-dough-var="sellingUnit"] { width: fit-content; max-width: 100%; } /* The selling unit the catalogue fill prints inside a card's price ("Pack of 24", fillProductGrid): secondary to the * price it qualifies, in whatever type the author gave the price, and never split from it across lines. */ .dough-freestyle [data-dough-card-unit] { display: inline-block; font-size: .72em; font-weight: 400; letter-spacing: normal; opacity: .8; white-space: nowrap; } /* A value this product does not have resolves EMPTY (no selling unit for a single item, no discount, no reviews yet, * every value on the store page), and an authored badge around it painted an empty pill beside the price (owner, * 2026-10-14 and 2026-10-15, recurring). So an empty value is not drawn, and neither is the element it is the only * content of: "Save " or "Only left" with the number missing says nothing, and CSS sees its words as * text nodes, which these selectors ignore by design. An icon beside the value does not keep its badge alive. A value * the runtime fills later (price, total) reappears the moment it has text. A control is never the badge: a buy button * reading "Add to cart " stays whatever its value says. */ .dough-freestyle [data-dough-var]:empty { display: none; } .dough-freestyle :has(> [data-dough-var]:empty):not(:has(> :not([data-dough-var]:empty):not([data-dough-icon]):not(svg))):not(a):not(button):not([role="button"]):not([data-dough-action]):not([data-dough-click]) { display: none; } /* A purchase control's label and its live value are separate spans, and minified markup has no space between them, so * "Order Now" and the injected price printed as one word ("Order Now$58.00", polish scans 2026-11-02). The value, and a * separator just before it, keep a gap of their own whatever the authored whitespace or flex gap. */ .dough-freestyle [data-dough-action="buy"] > [data-dough-var]:not(:first-child), .dough-freestyle [data-dough-action="buy"] > :not(:first-child):has(+ [data-dough-var]), .dough-freestyle [data-dough-action="select-plan"] > [data-dough-var]:not(:first-child) { margin-inline-start: .4em; }

Basecamp 360 Card Binder

Zero bent corners in packed bags

A rigid polypropylene trade album built to protect full collections from heavy pressure and rough travel.

$18.99

Color

Secure checkout Payments by Stripe

Rigid polypropylene covers resist pack compression and stop creasing
Side-loading pockets prevent cards from sliding loose during movement
Integrated elastic band locks outer covers shut against jostling
Nine-pocket page grid keeps trade stock cleanly organized and visible

On the trail

Take the game outdoors.

Everyday backpacks create relentless pressure points against binders, turning flexible covers into bent corners. The Basecamp shell uses rigid polypropylene across the exterior to absorb that squeeze before it reaches card stock. Inside, the pages mirror that defensive build with side-loading sleeves. Because each card inserts horizontally toward the spine, vertical movement inside your bag cannot work cards loose. Pull the integrated band over the cover to seal the package shut until game time.

Against standard soft trading card binders

Where it pulls ahead.

Pocket entry

Side-loading horizontal slots

Top-loading vertical openings

Cover rigidity

Rigid polypropylene shell

Flexible soft vinyl covers

Closure mechanism

Integrated elastic strap

Unsecured open edges

Last checks

Before it goes in your pack.

How do cards stay in place when the binder is turned upside down?

Pockets load horizontally from the side rather than the top. When the binder shifts or turns over in a pack, cards stay seated against the inner seam instead of sliding out.

How does the closure work when packing?

An integrated vertical elastic band stretches over the outer front cover, compressing the pages and keeping the shell firmly closed against outside friction.

What card size fits these sleeves?

The nine-pocket pages are sized for standard trading cards, holding single-loaded cards across every available slot.

From card players