/*
Theme Name: Clock it Club Child
Description: Child theme for Clock it Club. Thin, mostly unfilled chrome on a faded blue canvas: one-pixel lines, outlined controls, line icons, two filled primaries. Phone-first app shell with a bottom tab bar; a top nav from 720px. Every visual value is a custom property in assets/tokens.css.
Template: generatepress
Version: 4.0.0
Text Domain: clockit-child
*/

/* No literal color, font, size, radius, shadow, spacing or component dimension in this file:
   they are all tokens from assets/tokens.css, which loads first. What is literal here: 0, 1,
   100%, 50%, auto, fr and other layout keywords, unitless flex, grid and line-clamp counts,
   z-index, the one media query breakpoint (720px), the 1px clip values of the standard
   visually-hidden technique, the chevron's half turn, 1em, and the font file URLs.
   Phone first: the base rules are the 375px layout and the media query only adds to it.

   What is filled, and nothing else: the two primaries (coral for the Amazon cart buttons,
   near-black for Go), a control in its active state, the three verdict pills, the hero block,
   the place tiles, the count badge and the toast. Everything else is a one-pixel line. */

/* Fonts: self-hosted woff2, SIL Open Font License 1.1 (assets/fonts/OFL-*.txt). The design
   asks for 400, 500 and 600. The files on disk are 500, 700 and 800, so until SemiBold and
   Regular files are added, 400 to 600 are drawn from the Medium files (the lighter of the two
   neighbors of 600, which is the direction the design goes) and 700 from Bold. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("assets/fonts/PlusJakartaSans-Medium.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("assets/fonts/PlusJakartaSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("assets/fonts/PlusJakartaSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("assets/fonts/PlusJakartaSans-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/fonts/DMSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/fonts/DMSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/fonts/DMSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/fonts/DMSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ==========================================================================
   Base
   ========================================================================== */
body {
	background: var(--ck-bg);
	color: var(--ck-fg);
	font-family: var(--ck-body);
	font-size: var(--ck-text-lg);
	font-weight: var(--ck-w-regular);
	line-height: var(--ck-lh-body);
	/* Room for the fixed tab bar. */
	padding-bottom: calc(var(--ck-tabbar-room) + env(safe-area-inset-bottom, 0px));
}
/* GeneratePress paints its own containers. The canvas shows through all of them. */
.site, .site-content, .site-header, .site-footer, .inside-article, .separate-containers .inside-article { background: transparent; }
.ck-main h1, .ck-main h2, .ck-main h3 {
	font-family: var(--ck-display);
	font-weight: var(--ck-w-head);
	letter-spacing: var(--ck-ls-head);
	line-height: var(--ck-lh-head);
	margin: 0;
	color: var(--ck-head);
	text-wrap: balance;
}
:where(.ck-main) p { margin: 0 0 var(--ck-space-5); }
.ck-header a, .ck-main a, .ck-footer a, .ck-tabbar a { color: inherit; text-decoration: none; }
.ck-main p a:not([class]), .ck-main li > a:not([class]) { text-decoration: underline; }
.ck-header :focus-visible, .ck-main :focus-visible, .ck-footer :focus-visible, .ck-tabbar :focus-visible {
	outline: var(--ck-focus) solid var(--ck-head);
	outline-offset: var(--ck-focus-offset);
}
/* The hidden attribute always wins over a display rule below. */
.ck-main [hidden], .ck-header [hidden], .ck-tabbar [hidden] { display: none !important; }

/* Visually hidden, still read aloud and still focusable. */
.screen-reader-text, .ck-var-radio {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	white-space: nowrap;
	word-wrap: normal !important;
}

.ck-wrap { max-width: var(--ck-wrap); margin: 0 auto; padding: 0 var(--ck-gutter); }
/* GeneratePress containers: our templates span the full content width. */
.site.grid-container { max-width: var(--ck-wrap); }
.site-content { display: block; }
.ck-main { padding: 0 var(--ck-gutter); min-width: 0; }
.ck-main [id] { scroll-margin-top: var(--ck-space-7); }

.ck-sub { color: var(--ck-muted); font-size: var(--ck-text-md); margin: var(--ck-space-1) 0 0; }
.ck-row { display: flex; gap: var(--ck-space-3); flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.ck-row li { margin: 0; }
.ck-main .ck-none { margin: 0; padding: var(--ck-space-6) 0; color: var(--ck-muted); font-size: var(--ck-text-md); }

/* Icons: Lucide line icons from the page's sprite, drawn in the color of the text beside them. */
.ck-ico { width: var(--ck-ico); height: var(--ck-ico); flex: none; fill: none; stroke: currentColor; stroke-width: var(--ck-ico-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ck-sprite { position: absolute; }

/* Eyebrows and small labels: the one place capitals are used. */
.ck-main .ck-eyebrow, .ck-card__brand, .ck-hrow__b {
	font-family: var(--ck-body);
	font-size: var(--ck-text-label);
	font-weight: var(--ck-w-semi);
	letter-spacing: var(--ck-ls-label);
	line-height: var(--ck-lh-body);
	text-transform: uppercase;
	color: var(--ck-muted);
	margin: 0;
}

/* ==========================================================================
   Pills, chips, round buttons, primaries
   ========================================================================== */
/* A pill is a label, never a control. Only the three verdict pills are filled. */
.ck-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--ck-space-1);
	border: var(--ck-border) solid transparent;
	border-radius: var(--ck-pill);
	padding: var(--ck-pill-pad);
	background: transparent;
	color: var(--ck-head);
	font-family: var(--ck-body);
	font-weight: var(--ck-w-semi);
	font-size: var(--ck-text-label);
	line-height: var(--ck-lh-snug);
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	margin: 0;
}
.ck-pill > .ck-ico { width: var(--ck-pill-ico); height: var(--ck-pill-ico); }
.ck-pill--buy { background: var(--ck-buy-fill); color: var(--ck-buy-ink); }
.ck-pill--fair { background: var(--ck-fair-fill); color: var(--ck-fair-ink); }
.ck-pill--wait { background: var(--ck-wait-fill); color: var(--ck-wait-ink); }
.ck-pill--line, .ck-pill--none { border-color: var(--ck-head); }
/* Over a photo an outlined pill sits on white, so it reads on any picture. */
.ck-ph .ck-pill--line, .ck-ph .ck-pill--none { background: var(--ck-surface); }

/* A chip is the secondary control: a link, a filter, a toggle, a tab, a variant, a secondary
   button. One-pixel near-black outline, no fill. On, it fills near-black. 36px to look at,
   44px to tap (the pseudo-element). */
.ck-main .ck-chip, .ck-header .ck-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ck-space-2);
	min-height: var(--ck-control);
	padding: var(--ck-control-pad);
	border: var(--ck-border) solid var(--ck-head);
	border-radius: var(--ck-pill);
	background: transparent;
	color: var(--ck-head);
	font-family: var(--ck-body);
	font-size: var(--ck-text-control);
	font-weight: var(--ck-w-semi);
	letter-spacing: var(--ck-ls-control);
	line-height: var(--ck-lh-none);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.ck-chip::after { content: ""; position: absolute; left: 0; right: 0; top: calc((var(--ck-control) - var(--ck-touch)) / 2); bottom: calc((var(--ck-control) - var(--ck-touch)) / 2); }
.ck-main .ck-chip--tall { min-height: var(--ck-touch); }
.ck-chip--tall::after { content: none; }
.ck-main .ck-chip:hover, .ck-header .ck-chip:hover { box-shadow: var(--ck-shadow-ring); }
.ck-main .ck-chip.is-on, .ck-main .ck-chip[aria-pressed="true"], .ck-main .ck-chip[aria-selected="true"] { background: var(--ck-head); color: var(--ck-on-fill); }
/* A row of chips: one line that scrolls sideways on a phone, wraps from 720px. The padding
   keeps focus rings and the 44px tap areas inside the scroller. */
.ck-chiprow { display: flex; gap: var(--ck-space-3); overflow-x: auto; scrollbar-width: none; list-style: none; margin: calc(-1 * var(--ck-space-1)); padding: var(--ck-space-1); }
.ck-chiprow::-webkit-scrollbar { display: none; }
.ck-chiprow > li { margin: 0; flex: none; }
.ck-chiprow > .ck-chip { flex: none; }

/* Round buttons: "+", the rail arrows, the "?" and the dismiss "x", the header tools. */
.ck-main .ck-round, .ck-header .ck-round {
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--ck-round);
	height: var(--ck-round);
	min-height: 0;
	padding: 0;
	border: var(--ck-border) solid var(--ck-head);
	border-radius: var(--ck-pill);
	background: transparent;
	color: var(--ck-head);
	line-height: var(--ck-lh-none);
	cursor: pointer;
}
.ck-round::after { content: ""; position: absolute; inset: calc((var(--ck-round) - var(--ck-touch)) / 2); }
.ck-main .ck-round:hover, .ck-header .ck-round:hover { box-shadow: var(--ck-shadow-ring); }
.ck-main .ck-round:disabled { opacity: var(--ck-off-opacity); box-shadow: none; cursor: default; }

/* The two primaries. Coral: the Amazon cart buttons. Near-black: Go. */
.ck-main .ck-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ck-space-3);
	min-height: var(--ck-btn);
	border: 0;
	border-radius: var(--ck-pill);
	padding: var(--ck-btn-pad);
	background: var(--ck-coral);
	color: var(--ck-on-coral);
	font-family: var(--ck-body);
	font-weight: var(--ck-w-semi);
	font-size: var(--ck-text-md);
	letter-spacing: var(--ck-ls-control);
	line-height: var(--ck-lh-snug);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.ck-main .ck-btn--full { width: 100%; }
.ck-main .ck-btn:hover { box-shadow: var(--ck-shadow-ring); }
.ck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ck-space-3); }
.ck-actions--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ck-main .ck-actions .ck-chip { padding-left: var(--ck-space-3); padding-right: var(--ck-space-3); }
/* Haul buttons do nothing without the script, so they show only once it has run. */
.ck-main .ck-haul-add, .ck-main .ck-share, .ck-sharebox, .ck-main .ck-guide__open, .ck-main .ck-guide__x, .ck-arrows, .ck-tabs, .ck-modes { display: none; }
.ck-js .ck-main .ck-haul-add.ck-chip, .ck-js .ck-main .ck-share { display: inline-flex; }
.ck-js .ck-main .ck-haul-add.ck-round, .ck-js .ck-main .ck-guide__open, .ck-js .ck-main .ck-guide__x { display: inline-grid; }
.ck-js .ck-sharebox { display: grid; }
.ck-js .ck-tabs, .ck-js .ck-modes { display: flex; }
/* "+" and "Add to haul": a plus until the product is in the haul, then a check. */
.ck-add__check, [aria-pressed="true"] > .ck-add__plus { display: none; }
[aria-pressed="true"] > .ck-add__check { display: block; }

/* ==========================================================================
   Header: wordmark, the desktop nav, search and haul. On a phone the nav is
   the tab bar and only the wordmark and the haul button show.
   ========================================================================== */
.ck-header__in { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ck-space-3) var(--ck-space-5); padding-top: var(--ck-space-5); padding-bottom: var(--ck-space-5); }
.ck-wordmark { display: inline-flex; align-items: center; gap: var(--ck-space-2); min-height: var(--ck-touch); color: var(--ck-head); text-decoration: none; }
.ck-wordmark__name { font-family: var(--ck-display); font-weight: var(--ck-w-wordmark); font-size: var(--ck-text-wordmark); letter-spacing: var(--ck-track-word); line-height: var(--ck-lh-none); white-space: nowrap; }
.ck-wordmark__club { font-family: var(--ck-display); font-weight: var(--ck-w-wordmark); font-size: var(--ck-text-2xs); letter-spacing: var(--ck-track-tag); text-transform: uppercase; line-height: var(--ck-lh-none); border: var(--ck-border) solid var(--ck-head); border-radius: var(--ck-pill); padding: var(--ck-space-1) var(--ck-space-2); }
.ck-hnav { display: none; flex-wrap: wrap; gap: 0 var(--ck-space-6); }
.ck-header .ck-hnav a { display: inline-flex; align-items: center; gap: var(--ck-space-1); min-height: var(--ck-touch); font-size: var(--ck-text-sm); font-weight: var(--ck-w-semi); letter-spacing: var(--ck-ls-control); white-space: nowrap; box-shadow: none; }
.ck-header .ck-hnav a:hover, .ck-header .ck-hnav a[aria-current] { text-decoration: underline; text-underline-offset: var(--ck-space-2); }
.ck-header__tools { display: flex; gap: var(--ck-space-4); align-items: center; }
.ck-header .ck-toolbtn--search { display: none; }
/* The haul count: a small near-black badge. */
.ck-count { position: absolute; top: calc(-1 * var(--ck-space-2)); right: calc(-1 * var(--ck-space-2)); z-index: 1; min-width: var(--ck-badge); height: var(--ck-badge); border-radius: var(--ck-pill); background: var(--ck-head); color: var(--ck-on-fill); font-size: var(--ck-text-2xs); font-weight: var(--ck-w-semi); line-height: var(--ck-lh-none); display: grid; place-items: center; padding: 0 var(--ck-space-1); }

/* Bottom tab bar: Home, Browse, Haul, Search. */
.ck-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 8;
	background: var(--ck-surface);
	border-top: var(--ck-border) solid var(--ck-line-canvas);
	padding: var(--ck-space-2) var(--ck-space-3) calc(var(--ck-space-2) + env(safe-area-inset-bottom, 0px));
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.ck-tabbar a { position: relative; display: grid; justify-items: center; align-content: center; gap: var(--ck-space-1); min-height: var(--ck-touch); padding: var(--ck-space-1) 0; border-radius: var(--ck-r-card); font-size: var(--ck-text-label); font-weight: var(--ck-w-semi); letter-spacing: var(--ck-ls-control); color: var(--ck-muted); }
.ck-tabbar a[aria-current] { color: var(--ck-head); }
.ck-tabbar .ck-ico { width: var(--ck-ico-tab); height: var(--ck-ico-tab); }
.ck-tabbar .ck-count { top: 0; right: calc(50% - var(--ck-ico-tab)); }

/* Toast: what the haul script says back. */
.ck-toast { position: fixed; left: 50%; bottom: calc(var(--ck-toast-lift) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ck-head); color: var(--ck-on-fill); padding: var(--ck-space-4) var(--ck-space-7); border-radius: var(--ck-pill); font-weight: var(--ck-w-semi); font-size: var(--ck-text-sm); z-index: 20; opacity: 0; pointer-events: none; transition: opacity var(--ck-fade); max-width: calc(100% - 2 * var(--ck-gutter)); text-align: center; }
.ck-toast.is-on { opacity: 1; }

/* ==========================================================================
   Hero and search. The hero is the one color block of the home page: lemon,
   never white on white and never pink. At 375px it comes to about 260px tall. From
   720px it is one row, about 200px tall.
   ========================================================================== */
.ck-hero { background: var(--ck-lemon); border-radius: var(--ck-r-block); padding: var(--ck-space-6); display: grid; gap: var(--ck-space-5); }
.ck-hero__words { display: grid; gap: var(--ck-space-2); min-width: 0; }
.ck-hero__find { display: grid; gap: var(--ck-space-4); min-width: 0; }
.ck-main .ck-hero h1 { font-size: var(--ck-h-hero); }
.ck-main .ck-hero__sub { margin: 0; font-size: var(--ck-text-md); color: var(--ck-hero-ink); }
.ck-search { display: flex; align-items: center; gap: var(--ck-space-3); background: var(--ck-surface); border: var(--ck-border) solid var(--ck-head); border-radius: var(--ck-pill); padding: var(--ck-space-1) var(--ck-space-1) var(--ck-space-1) var(--ck-space-6); margin: 0; }
.ck-search:focus-within { outline: var(--ck-focus) solid var(--ck-head); outline-offset: var(--ck-focus-offset); }
.ck-main .ck-search input[type="search"] { flex: 1; min-width: 0; min-height: var(--ck-control); border: 0; outline: 0; padding: 0; background: transparent; color: var(--ck-fg); font-family: var(--ck-body); font-size: var(--ck-text-lg); font-weight: var(--ck-w-regular); }
.ck-search input[type="search"]::placeholder { color: var(--ck-muted); opacity: 1; }
.ck-main .ck-search button { min-height: var(--ck-control); border: 0; border-radius: var(--ck-pill); background: var(--ck-go); color: var(--ck-on-fill); padding: var(--ck-control-pad); font-family: var(--ck-body); font-size: var(--ck-text-control); font-weight: var(--ck-w-semi); letter-spacing: var(--ck-ls-control); line-height: var(--ck-lh-none); cursor: pointer; }
.ck-brands { display: flex; gap: var(--ck-space-3); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.ck-brands li { margin: 0; flex: none; }

/* ==========================================================================
   Sections sit straight on the canvas, a hairline between them.
   ========================================================================== */
.ck-band { margin-top: var(--ck-band-gap); padding-top: var(--ck-band-gap); border-top: var(--ck-border) solid var(--ck-line-canvas); }
.ck-band--first { border-top: 0; padding-top: 0; margin-top: var(--ck-space-6); }
.ck-sechead { display: flex; align-items: center; justify-content: space-between; gap: var(--ck-space-5); margin-bottom: var(--ck-space-5); }
.ck-sechead__t { min-width: 0; }
.ck-main .ck-sechead h2, .ck-main .ck-results__all { font-size: var(--ck-h-section); }
.ck-main .ck-sechead h2 { display: flex; align-items: center; gap: var(--ck-space-3); }
.ck-sechead h2 > .ck-ico, .ck-pagehead h1 > .ck-ico { width: var(--ck-ico-lg); height: var(--ck-ico-lg); }
.ck-sechead__side { display: flex; align-items: center; gap: var(--ck-space-4); flex: none; }
.ck-arrows { gap: var(--ck-space-3); }

/* Place tiles: four in one row. Our own photo fills the tile, the tile's color lies over it
   at 60% (a plain overlay), the name with its icon is centered on top in near-black. Only
   these photos take an overlay. Product photos are never tinted. */
.ck-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ck-space-3); margin: 0; padding: 0; list-style: none; }
.ck-tiles li { margin: 0; min-width: 0; }
.ck-main .ck-tile { position: relative; display: grid; place-items: center; aspect-ratio: var(--ck-tile-ratio); border-radius: var(--ck-r-card); overflow: hidden; background: var(--ck-tint); color: var(--ck-head); }
.ck-tile--lemon { --ck-tint: var(--ck-lemon); }
.ck-tile--gum { --ck-tint: var(--ck-gum); }
.ck-tile--sky { --ck-tint: var(--ck-sky); }
.ck-tile--mint { --ck-tint: var(--ck-mint); }
.ck-tile--lav { --ck-tint: var(--ck-lav); }
.ck-tile__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(1); }
.ck-tile__tint { position: absolute; inset: 0; background: var(--ck-tint); opacity: var(--ck-tile-tint); }
.ck-tile__label { position: relative; display: inline-flex; align-items: center; gap: var(--ck-space-2); max-width: calc(100% - 2 * var(--ck-space-3)); padding: var(--ck-tile-pill-pad); border: var(--ck-border) solid var(--ck-head); border-radius: var(--ck-pill); background: var(--ck-surface); color: var(--ck-head); white-space: nowrap; }
.ck-tile__label > .ck-ico { width: var(--ck-ico); height: var(--ck-ico); flex: none; }
.ck-main .ck-tile__name { font-family: var(--ck-body); font-size: var(--ck-text-tile); font-weight: var(--ck-w-semi); letter-spacing: 0; line-height: var(--ck-lh-snug); }
.ck-main .ck-tile:hover { box-shadow: var(--ck-shadow-hover); }

/* The switch of the home page: place tabs, then the Best deals / Trending toggle. */
.ck-switch__bar { display: grid; gap: var(--ck-space-4); margin-bottom: var(--ck-space-5); }

/* ==========================================================================
   Rails, grids, cards
   ========================================================================== */
.ck-railwrap { min-width: 0; }
.ck-rail { display: flex; gap: var(--ck-grid-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--ck-gutter); padding: var(--ck-focus) var(--ck-gutter) var(--ck-space-1); margin: 0 calc(-1 * var(--ck-gutter)); scrollbar-width: none; }
.ck-rail::-webkit-scrollbar { display: none; }
.ck-main .ck-rail:focus-visible { outline-offset: calc(-1 * var(--ck-focus)); border-radius: var(--ck-r-card); }
.ck-rail .ck-card { flex: 0 0 calc((100% - var(--ck-rail-gaps) * var(--ck-grid-gap)) / var(--ck-rail-cards)); scroll-snap-align: start; }
/* Pagination dots: built by the script under a rail that overflows. Phone only. */
.ck-dots { display: flex; justify-content: center; margin-top: var(--ck-space-1); }
.ck-main .ck-dot { display: grid; place-items: center; width: var(--ck-dot-hit); height: var(--ck-dot-hit); min-height: 0; padding: 0; border: 0; border-radius: var(--ck-pill); background: transparent; cursor: pointer; }
.ck-dot::before { content: ""; box-sizing: border-box; width: var(--ck-dot); height: var(--ck-dot); border: var(--ck-border) solid var(--ck-head); border-radius: var(--ck-pill); }
.ck-dot[aria-current]::before { background: var(--ck-head); }
.ck-grid { display: grid; grid-template-columns: repeat(var(--ck-grid-cols), minmax(0, 1fr)); gap: var(--ck-grid-gap); }

/* A card: white, one-pixel border, 8px inside. Every card in a row is the same height: the
   brand is one line, the name is two lines at a fixed height, the price sits at the bottom. */
.ck-card { position: relative; display: flex; min-width: 0; margin: 0; background: var(--ck-surface); border: var(--ck-border) solid var(--ck-line-canvas); border-radius: var(--ck-r-card); }
.ck-card:hover { border-color: var(--ck-head); box-shadow: var(--ck-shadow-hover); }
.ck-main .ck-card__link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ck-space-1); padding: var(--ck-card-pad); border-radius: var(--ck-r-card); }
/* The image area: the product photo on white, shown exactly as it is served. No filter, no
   blend, no tint, no crop, and no well around it. */
.ck-ph { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 100%; aspect-ratio: var(--ck-card-ratio); overflow: hidden; background: var(--ck-surface); margin-bottom: var(--ck-space-1); }
/* Out of flow, so a tall photo can never stretch its box: every card in a row keeps one height. */
.ck-ph__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.ck-ph--page .ck-ph__img { inset: var(--ck-space-7); width: calc(100% - 2 * var(--ck-space-7)); height: calc(100% - 2 * var(--ck-space-7)); }
.ck-ph .ck-pill { z-index: 1; }
.ck-ph .ck-pill--top { position: absolute; top: 0; left: 0; }
.ck-ph .ck-pill--bottom { position: absolute; bottom: 0; left: 0; }
/* On a phone the Trending or Popular pill is words only, so it clears the "+". */
.ck-ph .ck-pill--top > .ck-ico { display: none; }
.ck-ph--page { aspect-ratio: 1 / 1; padding: var(--ck-space-7); margin: 0; border: var(--ck-border) solid var(--ck-line-canvas); border-radius: var(--ck-r-card); overflow: hidden; }
.ck-ph--thumb { width: var(--ck-haul-thumb); height: var(--ck-haul-thumb); aspect-ratio: auto; margin: 0; }
.ck-card__brand { display: block; min-height: calc(1em * var(--ck-lh-body)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-main .ck-card__name { font-family: var(--ck-body); font-weight: var(--ck-w-body); font-size: var(--ck-text-sm); line-height: var(--ck-lh-snug); letter-spacing: 0; color: var(--ck-fg); min-height: calc(var(--ck-name-lines) * 1em * var(--ck-lh-snug)); display: -webkit-box; -webkit-line-clamp: var(--ck-name-lines); line-clamp: var(--ck-name-lines); -webkit-box-orient: vertical; overflow: hidden; text-wrap: initial; }
.ck-price { display: flex; align-items: baseline; gap: var(--ck-space-2); margin-top: auto; padding-top: var(--ck-space-1); min-height: calc(var(--ck-text-price) * var(--ck-lh-body)); font-variant-numeric: tabular-nums; }
.ck-price > span[aria-hidden] { display: flex; align-items: baseline; gap: var(--ck-space-2); }
.ck-price b { font-family: var(--ck-display); font-weight: var(--ck-w-head); font-size: var(--ck-text-price); letter-spacing: var(--ck-ls-num); line-height: var(--ck-lh-none); color: var(--ck-head); }
.ck-price s, .ck-price--none { color: var(--ck-muted); font-size: var(--ck-text-sm); }
/* "+": add to haul. A real button over the photo, outside the card's link. */
.ck-main .ck-add { position: absolute; top: var(--ck-card-pad); right: var(--ck-card-pad); background: var(--ck-surface); }
.ck-main .ck-add[aria-pressed="true"] { background: var(--ck-head); color: var(--ck-on-fill); }
/* Brand tiles: a name on white, in a rail. */
.ck-main .ck-brandtile { flex: none; display: grid; place-items: center; width: var(--ck-brandtile-w); height: var(--ck-brandtile-h); padding: var(--ck-space-3); background: var(--ck-surface); border: var(--ck-border) solid var(--ck-line-canvas); border-radius: var(--ck-r-card); font-family: var(--ck-display); font-weight: var(--ck-w-head); font-size: var(--ck-text-md); line-height: var(--ck-lh-snug); text-align: center; color: var(--ck-head); scroll-snap-align: start; }
.ck-main .ck-brandtile:hover { border-color: var(--ck-head); box-shadow: var(--ck-shadow-hover); }

/* ==========================================================================
   Page headers, the results region, empty state, pagination
   ========================================================================== */
/* A page header: a white block across the page. Eyebrow, name, one line, and on a results
   page the filter chips on a second row under a hairline. */
.ck-pagehead { background: var(--ck-surface); border: var(--ck-border) solid var(--ck-line-canvas); border-radius: var(--ck-r-block); padding: var(--ck-space-6); display: grid; gap: var(--ck-space-2); min-width: 0; }
.ck-pagehead__row { display: flex; align-items: center; justify-content: space-between; gap: var(--ck-space-5); min-width: 0; }
.ck-main .ck-pagehead h1 { display: flex; align-items: center; gap: var(--ck-space-3); min-width: 0; font-size: var(--ck-h-product); overflow-wrap: anywhere; }
.ck-main .ck-pagehead__line { margin: 0; color: var(--ck-muted); font-size: var(--ck-text-md); }
.ck-pagehead .ck-search { margin-top: var(--ck-space-3); }
/* The chips: every group on one row that scrolls sideways on a phone, a hairline between
   groups. It reaches the edges of the header. */
.ck-filters { display: flex; gap: var(--ck-space-5); overflow-x: auto; scrollbar-width: none; }
.ck-filters::-webkit-scrollbar { display: none; }
.ck-pagehead .ck-filters { margin: var(--ck-space-3) calc(-1 * var(--ck-space-6)) calc(-1 * var(--ck-space-1)); padding: var(--ck-space-5) var(--ck-space-6) var(--ck-space-1); border-top: var(--ck-border) solid var(--ck-line); }
.ck-filters__group { display: flex; gap: var(--ck-space-3); flex: none; margin: 0; padding: 0; list-style: none; }
.ck-filters__group li { margin: 0; flex: none; }
.ck-filters__group + .ck-filters__group { padding-left: var(--ck-space-5); border-left: var(--ck-border) solid var(--ck-line); }
.ck-results { transition: opacity var(--ck-fade); }
.ck-results[aria-busy="true"] { opacity: var(--ck-busy-opacity); }
.ck-results > .ck-grid, .ck-pagehead + .ck-grid { margin-top: var(--ck-space-6); }
.ck-main .ck-results__count { margin: var(--ck-space-6) 0 0; font-size: var(--ck-text-sm); color: var(--ck-muted); }
.ck-main .ck-results__count a { color: var(--ck-head); font-weight: var(--ck-w-semi); text-decoration: underline; margin-left: var(--ck-space-3); }
.ck-main .ck-results__all { margin-top: var(--ck-band-gap); padding-top: var(--ck-band-gap); border-top: var(--ck-border) solid var(--ck-line-canvas); }
.ck-main .ck-results__after { margin: var(--ck-band-gap) 0 0; padding-top: var(--ck-space-6); border-top: var(--ck-border) solid var(--ck-line-canvas); }
.ck-main .ck-extlink { display: inline-flex; align-items: center; gap: var(--ck-space-2); min-height: var(--ck-touch); font-size: var(--ck-text-sm); font-weight: var(--ck-w-semi); text-decoration: underline; text-underline-offset: var(--ck-space-1); }
.ck-empty { border: var(--ck-border) solid var(--ck-line-canvas); border-radius: var(--ck-r-block); background: var(--ck-surface); padding: var(--ck-space-9) var(--ck-space-6); text-align: center; display: grid; gap: var(--ck-space-4); justify-items: center; margin-top: var(--ck-space-6); }
.ck-main .ck-empty h2 { font-size: var(--ck-h-section); }
.ck-main .ck-empty p { margin: 0; }
.ck-pagination { margin: var(--ck-band-gap) 0 0; }
.ck-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ck-space-3); }
.ck-main .ck-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ck-touch); min-height: var(--ck-touch); padding: var(--ck-control-pad); border: var(--ck-border) solid var(--ck-head); border-radius: var(--ck-pill); font-size: var(--ck-text-control); font-weight: var(--ck-w-semi); letter-spacing: var(--ck-ls-control); }
.ck-main .ck-pagination .page-numbers.current { background: var(--ck-head); color: var(--ck-on-fill); }
.ck-main .ck-pagination .page-numbers.dots { border-color: transparent; }

/* ==========================================================================
   Product page
   ========================================================================== */
.ck-pp { display: grid; gap: var(--ck-band-gap); min-width: 0; }
/* The two columns. This grid is the photo's sticky parent and nothing else is in it, so the
   photo lets go where the columns end, before "As listed by the brand" and the rails. */
.ck-pp__cols { position: relative; display: grid; gap: var(--ck-space-7); min-width: 0; }
.ck-pp__media { position: static; min-width: 0; }
.ck-pp__main { display: grid; gap: var(--ck-space-6); min-width: 0; align-content: start; }
.ck-pp__title { display: grid; gap: var(--ck-space-3); }
.ck-pp__more { display: grid; gap: var(--ck-space-6); min-width: 0; }
.ck-main .ck-pp h1 { font-size: var(--ck-h-product); overflow-wrap: anywhere; }
.ck-main .ck-meta { display: flex; gap: var(--ck-space-3); flex-wrap: wrap; align-items: center; margin: 0; }
.ck-main .ck-meta__brand { display: inline-flex; align-items: center; min-height: var(--ck-touch); }
.ck-main .ck-meta__brand:hover { text-decoration: underline; }
.ck-variants { display: flex; gap: var(--ck-space-3); flex-wrap: wrap; }
/* One photo and one Price check box per variant. The radios at the top of the grid pick. */
.ck-pp__shot, .ck-check__block { display: none; }
.ck-pp--single .ck-pp__shot, .ck-pp--single .ck-check__block { display: block; }
#ck-var-0:checked ~ .ck-pp__media .ck-pp__shot--0,
#ck-var-1:checked ~ .ck-pp__media .ck-pp__shot--1,
#ck-var-2:checked ~ .ck-pp__media .ck-pp__shot--2,
#ck-var-3:checked ~ .ck-pp__media .ck-pp__shot--3,
#ck-var-4:checked ~ .ck-pp__media .ck-pp__shot--4,
#ck-var-0:checked ~ .ck-pp__main .ck-check__block--0,
#ck-var-1:checked ~ .ck-pp__main .ck-check__block--1,
#ck-var-2:checked ~ .ck-pp__main .ck-check__block--2,
#ck-var-3:checked ~ .ck-pp__main .ck-check__block--3,
#ck-var-4:checked ~ .ck-pp__main .ck-check__block--4 { display: block; }
#ck-var-0:checked ~ .ck-pp__main label[for="ck-var-0"],
#ck-var-1:checked ~ .ck-pp__main label[for="ck-var-1"],
#ck-var-2:checked ~ .ck-pp__main label[for="ck-var-2"],
#ck-var-3:checked ~ .ck-pp__main label[for="ck-var-3"],
#ck-var-4:checked ~ .ck-pp__main label[for="ck-var-4"] { background: var(--ck-head); color: var(--ck-on-fill); }
#ck-var-0:focus-visible ~ .ck-pp__main label[for="ck-var-0"],
#ck-var-1:focus-visible ~ .ck-pp__main label[for="ck-var-1"],
#ck-var-2:focus-visible ~ .ck-pp__main label[for="ck-var-2"],
#ck-var-3:focus-visible ~ .ck-pp__main label[for="ck-var-3"],
#ck-var-4:focus-visible ~ .ck-pp__main label[for="ck-var-4"] { outline: var(--ck-focus) solid var(--ck-head); outline-offset: var(--ck-focus-offset); }

/* Price check: a white box with a one-pixel sky border. */
.ck-check { background: var(--ck-surface); border: var(--ck-border) solid var(--ck-sky); border-radius: var(--ck-r-block); padding: var(--ck-space-6); display: grid; gap: var(--ck-space-3); }
.ck-main .ck-check p { margin: 0; }
.ck-main .ck-check__big { font-family: var(--ck-display); font-weight: var(--ck-w-head); font-size: var(--ck-text-big); letter-spacing: var(--ck-ls-num); line-height: var(--ck-lh-none); font-variant-numeric: tabular-nums; color: var(--ck-head); }
.ck-check__usual { color: var(--ck-muted); font-size: var(--ck-text-md); }
.ck-check__line { font-weight: var(--ck-w-body); font-size: var(--ck-text-md); }
.ck-main .ck-check .ck-cart, .ck-main .ck-check .ck-btn { margin-top: var(--ck-space-3); }
.ck-main .ck-check__see { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ck-touch); font-size: var(--ck-text-sm); font-weight: var(--ck-w-semi); text-decoration: underline; text-underline-offset: var(--ck-space-1); }
/* Under the box: who the price is from when it is not Amazon, and when it was checked. */
.ck-main .ck-check__after, .ck-ago { font-size: var(--ck-text-sm); color: var(--ck-muted); }
.ck-main .ck-check__after { margin: var(--ck-space-4) 0 0; }

/* Folds: hairlines between them, a chevron at the right that turns when open. */
.ck-fold { border-top: var(--ck-border) solid var(--ck-line); }
.ck-fold:last-child { border-bottom: var(--ck-border) solid var(--ck-line); }
.ck-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ck-space-5); min-height: var(--ck-touch); font-size: var(--ck-text-sm); font-weight: var(--ck-w-semi); letter-spacing: var(--ck-ls-control); color: var(--ck-head); cursor: pointer; list-style: none; }
.ck-fold > summary::-webkit-details-marker { display: none; }
.ck-fold[open] > summary .ck-ico { transform: rotate(180deg); }
.ck-fold[open] { padding-bottom: var(--ck-space-5); }
/* The price history fold sits on the canvas, under the Price check box. */
.ck-fold--hist, .ck-fold--hist:last-child { margin-top: var(--ck-space-4); border-color: var(--ck-line-canvas); }
/* The chart is the plugin's SVG. The theme only colors it: each stretch of the line by the
   call that price would earn, in words on the page already, so color is not carrying it alone. */
.ck-hist { display: block; width: 100%; height: auto; font-family: var(--ck-body); }
.ck-hist-wrap--wide { display: none; }
.ck-hist__seg { fill: none; stroke-width: var(--ck-hist-stroke); }
.ck-hist__seg--buy { stroke: var(--ck-hist-buy); }
.ck-hist__seg--fair { stroke: var(--ck-hist-fair); }
.ck-hist__seg--wait { stroke: var(--ck-hist-wait); }
.ck-hist__axis { fill: var(--ck-muted); font-size: var(--ck-text-label); }
.ck-hist__label { fill: var(--ck-head); font-size: var(--ck-text-control); font-weight: var(--ck-w-semi); }
.ck-hist__dot--now { fill: var(--ck-head); }
.ck-hist__dot--low { fill: var(--ck-surface); stroke: var(--ck-head); }

/* "As listed by the brand": quoted from the Amazon listing, never our own words. */
.ck-quoted { background: var(--ck-surface); border: var(--ck-border) solid var(--ck-line-canvas); border-radius: var(--ck-r-block); padding: var(--ck-space-6); font-size: var(--ck-text-md); display: grid; gap: var(--ck-space-4); min-width: 0; }
.ck-main .ck-quoted__body { margin: 0; padding: 0; border: 0; background: none; font-family: var(--ck-body); font-size: var(--ck-text-md); font-style: normal; color: var(--ck-fg); min-width: 0; }
.ck-quoted__attrs { margin-bottom: var(--ck-space-5); }
.ck-quoted__list { margin: 0; padding-left: var(--ck-space-7); display: grid; gap: var(--ck-space-1); }
.ck-quoted__list li { margin: 0; overflow-wrap: anywhere; }
.ck-main .ck-fold p { margin: 0 0 var(--ck-space-3); overflow-wrap: anywhere; }
.ck-main .ck-quoted__foot { margin: 0; font-size: var(--ck-text-sm); color: var(--ck-muted); }

/* Video (markup from the plugin): a thumbnail with a play button. */
.ck-video { border: var(--ck-border) solid var(--ck-line-canvas); border-radius: var(--ck-r-block); overflow: hidden; background: var(--ck-surface); }
.ck-video .ck-module__head, .ck-video .ck-module__foot { padding: var(--ck-space-5) var(--ck-space-6); margin: 0; font-size: var(--ck-text-sm); }
.ck-main .ck-video .ck-module__title { font-family: var(--ck-body); font-size: var(--ck-text-md); font-weight: var(--ck-w-semi); letter-spacing: 0; color: var(--ck-fg); }
.ck-video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--ck-head); }
.ck-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ck-main .ck-video__play { position: absolute; inset: 0; display: block; color: var(--ck-on-fill); overflow: hidden; }
.ck-video__thumb { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ck-video__button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: var(--ck-btn); height: var(--ck-btn); border-radius: var(--ck-pill); background: var(--ck-head); color: var(--ck-on-fill); }
.ck-video__title { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--ck-space-3) var(--ck-space-6); background: var(--ck-head); color: var(--ck-on-fill); font-weight: var(--ck-w-semi); font-size: var(--ck-text-sm); }

/* ==========================================================================
   Haul
   ========================================================================== */
/* The guide card: what a haul is. With the script it shows only when it is switched on. */
.ck-guide { position: relative; background: var(--ck-surface); border: var(--ck-border) solid var(--ck-line-canvas); border-radius: var(--ck-r-card); padding: var(--ck-space-6); margin-top: var(--ck-space-6); display: grid; gap: var(--ck-space-4); }
.ck-js .ck-guide:not(.is-on) { display: none; }
.ck-main .ck-guide p { margin: 0; font-size: var(--ck-text-md); padding-right: var(--ck-touch); }
.ck-main .ck-guide__x { position: absolute; top: var(--ck-space-4); right: var(--ck-space-4); }
.ck-guide__list { display: grid; gap: var(--ck-space-3); margin: 0; padding: 0; list-style: none; }
.ck-guide__list li { display: flex; align-items: center; gap: var(--ck-space-4); margin: 0; font-size: var(--ck-text-md); font-weight: var(--ck-w-body); color: var(--ck-head); }

.ck-haul-list { display: grid; gap: var(--ck-space-3); margin: var(--ck-space-6) 0 0; padding: 0; list-style: none; }
.ck-hrow { display: grid; grid-template-columns: var(--ck-haul-thumb) minmax(0, 1fr) auto; gap: var(--ck-space-5); align-items: center; background: var(--ck-surface); border: var(--ck-border) solid var(--ck-line-canvas); border-radius: var(--ck-r-card); padding: var(--ck-space-4); margin: 0; }
.ck-hrow__main { display: grid; gap: var(--ck-space-1); justify-items: start; min-width: 0; }
.ck-main .ck-hrow__n { font-weight: var(--ck-w-body); font-size: var(--ck-text-md); line-height: var(--ck-lh-snug); overflow-wrap: anywhere; }
.ck-hrow__side { display: grid; justify-items: end; gap: var(--ck-space-2); }
.ck-hrow__p { font-family: var(--ck-display); font-weight: var(--ck-w-head); font-size: var(--ck-text-price); letter-spacing: var(--ck-ls-num); font-variant-numeric: tabular-nums; color: var(--ck-head); }
.ck-main .ck-hrow__x { min-height: var(--ck-touch); border: 0; background: transparent; color: var(--ck-muted); font-family: var(--ck-body); font-size: var(--ck-text-sm); font-weight: var(--ck-w-semi); padding: 0; cursor: pointer; text-decoration: underline; }
.ck-main .ck-total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--ck-space-6) 0 var(--ck-space-2); margin: 0; font-size: var(--ck-text-md); font-weight: var(--ck-w-semi); }
.ck-total b { font-family: var(--ck-display); font-weight: var(--ck-w-head); font-size: var(--ck-text-total); letter-spacing: var(--ck-ls-num); font-variant-numeric: tabular-nums; color: var(--ck-head); }
.ck-total__usual { color: var(--ck-muted); font-weight: var(--ck-w-regular); }
.ck-main .ck-total__note { margin: var(--ck-space-4) 0 0; color: var(--ck-muted); font-size: var(--ck-text-sm); }
.ck-sharebox { background: var(--ck-surface); border: var(--ck-border) solid var(--ck-line-canvas); border-radius: var(--ck-r-block); padding: var(--ck-space-6); gap: var(--ck-space-4); margin-top: var(--ck-space-6); }
.ck-main .ck-sharebox p { margin: 0; }
.ck-main .ck-sharebox__link { border: var(--ck-border) solid var(--ck-line); border-radius: var(--ck-pill); padding: var(--ck-space-4) var(--ck-space-6); font-size: var(--ck-text-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: var(--ck-touch); }
.ck-main .ck-cart { margin-top: var(--ck-space-3); }
.ck-main .ck-haul__more { margin: var(--ck-space-7) 0 0; }

/* ==========================================================================
   Prose pages (About, How It Works, Affiliate Disclosure, Privacy, Contact)
   ========================================================================== */
.ck-prose { max-width: var(--ck-prose); background: var(--ck-surface); border: var(--ck-border) solid var(--ck-line-canvas); border-radius: var(--ck-r-block); padding: var(--ck-space-7) var(--ck-space-6); }
.ck-main .ck-prose h1 { font-size: var(--ck-h-product); margin-bottom: var(--ck-space-6); }
.ck-main .ck-prose h2 { font-size: var(--ck-h-section); margin: var(--ck-band-gap) 0 var(--ck-space-3); }
.ck-prose ul { margin: 0 0 var(--ck-space-5); padding-left: var(--ck-space-7); }
.ck-prose li { margin: 0 0 var(--ck-space-3); }
.ck-prose .ck-lede { font-size: var(--ck-text-price); color: var(--ck-hero-ink); }
.ck-prose .ck-calls { padding: 0; list-style: none; }
.ck-calls li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ck-space-3) var(--ck-space-5); }

/* ==========================================================================
   Footer, on the soft gray. The Associate disclosure is on every page.
   ========================================================================== */
.ck-footer { margin-top: var(--ck-space-10); background: var(--ck-footer); border-radius: var(--ck-r-block); padding: var(--ck-space-8) var(--ck-space-6); display: grid; gap: var(--ck-space-5); }
.ck-footer p { margin: 0; }
.ck-footer__tag { font-family: var(--ck-display); font-size: var(--ck-h-section); font-weight: var(--ck-w-head); letter-spacing: var(--ck-ls-head); line-height: var(--ck-lh-head); color: var(--ck-head); }
.ck-footer__nav { display: flex; flex-wrap: wrap; gap: 0 var(--ck-space-6); font-weight: var(--ck-w-semi); font-size: var(--ck-text-sm); }
.ck-footer__nav a, .ck-footer__soon, .ck-footer .ck-brands a { display: inline-flex; align-items: center; min-height: var(--ck-touch); }
.ck-footer__nav a:hover, .ck-footer .ck-brands a:hover { text-decoration: underline; }
.ck-footer__soon { color: var(--ck-muted); }
.ck-footer .ck-brands { gap: 0 var(--ck-space-6); padding-top: var(--ck-space-3); border-top: var(--ck-border) solid var(--ck-line-canvas); font-size: var(--ck-text-sm); color: var(--ck-muted); }
.ck-footer__small { font-size: var(--ck-text-sm); color: var(--ck-muted); }

/* ==========================================================================
   From 720px: the top nav for the tab bar, the hero in one row, five cards
   across, arrows for dots, the product page in two columns.
   ========================================================================== */
@media (min-width: 720px) {
	body { padding-bottom: var(--ck-tabbar-room-lg); }
	.ck-hnav { display: flex; }
	.ck-header .ck-toolbtn--search { display: inline-grid; }
	.ck-tabbar { display: none; }
	.ck-toast { bottom: var(--ck-toast-lift-lg); }

	.ck-hero { grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--ck-space-10); padding: var(--ck-space-8) var(--ck-space-10); min-height: var(--ck-hero-lg); }
	.ck-main .ck-hero h1 { font-size: var(--ck-h-hero-lg); }
	.ck-main .ck-hero__sub { font-size: var(--ck-text-lg); }
	.ck-chiprow { flex-wrap: wrap; overflow: visible; }

	.ck-main .ck-sechead h2, .ck-main .ck-results__all, .ck-main .ck-empty h2, .ck-main .ck-prose h2, .ck-footer__tag { font-size: var(--ck-h-section-lg); }
	.ck-main .ck-pagehead h1, .ck-main .ck-pp h1, .ck-main .ck-prose h1 { font-size: var(--ck-h-product-lg); }
	.ck-js .ck-arrows { display: inline-flex; }
	.ck-dots { display: none; }

	.ck-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ck-space-6); }
	/* Hero chips: all four on one row. The icons go to make room. */
	.ck-hero .ck-chiprow { flex-wrap: nowrap; gap: var(--ck-space-2); }
	.ck-hero .ck-chip > .ck-ico { display: none; }
	.ck-hist-wrap--narrow { display: none; }
	.ck-hist-wrap--wide { display: block; }
	.ck-main .ck-tile { aspect-ratio: var(--ck-tile-ratio-lg); }
	.ck-switch__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ck-space-4) var(--ck-space-8); }

	.ck-rail .ck-card { flex-basis: calc((100% - var(--ck-rail-gaps-lg) * var(--ck-grid-gap)) / var(--ck-rail-cards-lg)); }
	.ck-grid { grid-template-columns: repeat(var(--ck-grid-cols-lg), minmax(0, 1fr)); }
	.ck-ph .ck-pill--top > .ck-ico { display: block; }

	.ck-pagehead { padding: var(--ck-space-8); }
	.ck-pagehead .ck-filters { margin-left: calc(-1 * var(--ck-space-8)); margin-right: calc(-1 * var(--ck-space-8)); padding-left: var(--ck-space-8); padding-right: var(--ck-space-8); }
	.ck-filters { flex-wrap: wrap; overflow: visible; row-gap: var(--ck-space-4); }
	.ck-pagehead .ck-search { max-width: var(--ck-prose); }

	/* Two columns. The photo is sticky inside the column grid only: it stops at the grid's
	   end, so it never rides over what comes after. The header scrolls away with the page,
	   so the offset is the gap alone. */
	.ck-pp__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--ck-space-9); }
	.ck-pp__media { position: sticky; top: var(--ck-sticky-top); align-self: start; z-index: 0; }
	.ck-ph--page { aspect-ratio: auto; height: var(--ck-pp-photo-max); }
	.ck-quoted, .ck-prose { padding: var(--ck-space-8); }
	.ck-actions--three { max-width: var(--ck-prose); }
}

/* The only motion: the toast and the results region fade, a rail scrolls to its page. */
@media (prefers-reduced-motion: reduce) {
	.ck-toast, .ck-results { transition: none; }
}