/* Shared components: page banner, product grid and card, post card, article, 404. Values come from tokens.css. */

/* Page banner (N6, Owl 2026-10-21): one component for Shop, Sale, categories, brands and hubs.
   Desktop: copy left, image half the width (aspect 1.85, at least 365 px). Tablet (≤ 1100 px): 420 px.
   Phone (≤ 760 px): no photo (Owl, 2026-10-22, as the Codex pages), then eyebrow, H1 and one line of text.
   Wide screens: the height stops at --banner-desktop-max; the photo crops in. */
.banner { background: var(--color-cream); margin-bottom: var(--space-6); }
.banner__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: var(--banner-desktop-min); }
.banner__copy {
	grid-column: 1; grid-row: 1; align-self: center; min-width: 0;
	padding: 34px 38px 34px max(4vw, calc((100vw - 1320px) / 2));
}
.banner__image { grid-column: 2; grid-row: 1; position: relative; width: 100%; min-width: 0; min-height: var(--banner-desktop-min); max-height: var(--banner-desktop-max); aspect-ratio: var(--banner-desktop-aspect); } /* width 100%: at the height limit the photo keeps the full half and crops in */
.banner__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner__logo { display: block; width: auto; max-width: 160px; height: auto; max-height: var(--banner-logo-height); margin-bottom: var(--space-4); }
.banner__title { margin: 0; font-size: var(--text-2xl); letter-spacing: -.7px; line-height: 1.2; }
.banner__text { max-width: 520px; margin: var(--space-3) 0 0; font-size: 14px; color: var(--color-ink); }
.banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin: var(--space-5) 0 0; }
.banner__tagline { margin: var(--space-3) 0 0; color: var(--color-ink-strong); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: -.5px; line-height: 1.3; }
.banner--rich .banner__text { margin-top: var(--space-4); }
.banner--display .banner__title { color: var(--color-ink-strong); font-family: var(--font-display); font-size: var(--banner-display); font-weight: var(--weight-regular); letter-spacing: 0; line-height: 1.05; text-transform: uppercase; } /* the logo lettering (Owl, 2026-10-22) */
.banner--no-image .banner__inner { grid-template-columns: 1fr; min-height: 0; }
.banner--no-image .banner__copy { padding-block: var(--space-6); }

@media (max-width: 1100px) {
	.banner__inner { height: var(--banner-tablet-height); min-height: 0; }
	.banner__image { min-height: 0; aspect-ratio: auto; }
	.banner__copy { padding: var(--space-5) var(--space-5) var(--space-5) 4vw; }
	.banner--no-image .banner__inner { height: auto; }
}
@media (max-width: 760px) {
	.banner { margin-bottom: var(--space-5); }
	.banner__inner { display: block; height: auto; }
	.banner__image { display: none; } /* phones: no photo, as the Codex pages (Owl, 2026-10-22; replaces N6's photo band) */
	.banner__copy { padding: var(--space-4) 5% var(--space-5); }
	.banner__title { font-size: 25px; }
	.banner__text { font-size: var(--text-sm); }
	.banner--display .banner__title { font-size: var(--banner-display-phone); }
	.banner__tagline { font-size: 19px; }
	.banner--rich .banner__text, .banner--rich .banner__actions { display: none; } /* N6: eyebrow, H1, one line */
}

/* Product grid and card (one card for every product list) */
/* ul.products only: WooCommerce also puts "products" on the section around related and upsell lists. */
ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) 22px; list-style: none; margin: 0; padding: 0; }
ul.products::before, ul.products::after { display: none !important; }
.product-card { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0 !important; width: auto !important; float: none !important; }
/* The Codex shop pages' card (Owl, D7, 2026-10-22): a light photo box with no frame line; the white product photo
   blends into it (multiply). */
.product-card__picture {
	position: relative; display: block; aspect-ratio: var(--picture-aspect); overflow: hidden;
	background: var(--color-cream); border-radius: var(--radius);
}
.product-card__picture img { width: 100%; height: 100%; padding: 6% 7%; object-fit: contain; mix-blend-mode: multiply; transition: transform .25s; }
/* WooCommerce's ".woocommerce ul.products li.product a img { height: auto }" would let a square photo overflow the box. */
.woocommerce ul.products li.product-card a.product-card__picture img { height: 100%; margin: 0; }
.product-card:hover .product-card__picture img { transform: scale(1.04); }
.product-card__badge {
	position: absolute; left: var(--space-3); top: var(--space-3); z-index: 1;
	padding: 4px var(--space-2); border-radius: 3px; background: var(--color-surface); color: var(--color-red);
	font-size: 11px; font-weight: var(--weight-bold); letter-spacing: .3px; text-transform: uppercase;
}
.product-card__badge--bfo { color: var(--color-ink-strong); }
.product-card__body { display: flex; flex-direction: column; flex: 1; padding-top: var(--space-3); }
.product-card__brand { margin: 0 0 var(--space-1); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 1px; text-transform: uppercase; }
.product-card__title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: 1.5; letter-spacing: 0; }
/* A long model code ("Q2100N/Q2200N/Q2800N+") breaks inside the card, not past the screen (known issue #141). */
.product-card__title { overflow-wrap: anywhere; }
.product-card__title a:hover { color: var(--color-red); }
.product-card__price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin-top: var(--space-3); }
.product-card .price { color: var(--color-ink-strong); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: -.4px; }
.product-card .price del { color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-regular); letter-spacing: 0; margin-right: var(--space-1); }
.product-card .price ins { text-decoration: none; }
.savings { color: var(--color-red); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.product-card__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); font-size: var(--text-xs); }
.product-card__more { color: var(--color-ink-strong); font-size: var(--text-link); font-weight: var(--weight-regular); text-decoration: underline; text-underline-offset: 4px; } /* the Codex card link: small, light */
.product-card__more:hover { color: var(--color-red); }

/* The card's add (Owl's review, 22 Oct: no full-width button): WooCommerce's loop link after the card body (BC-016
   M1), shown as a cart icon on the photo box's bottom-right corner, with its helper text above it on hover. W5 prints it
   for products that can be bought (simple: the add, "Add to cart"; variable and composite: "See options", a link). It shows when the
   card is hovered or the link has keyboard focus, and always on touch screens. The card is the size container: the
   photo box is the card's width divided by --picture-aspect (a number). WooCommerce's own CSS styles
   ".woocommerce ul.products li.product .button" (display, margin), so these rules carry .woocommerce too. */
ul.products li.product-card { container-type: inline-size; }
ul.products li.product-card > a.product-card__action,
.woocommerce ul.products li.product-card > a.product-card__action {
	position: absolute; z-index: 2;
	top: calc(100cqi / var(--picture-aspect) - var(--card-action-size) - var(--card-action-inset)); right: var(--card-action-inset);
	display: flex; align-items: center; justify-content: center;
	width: var(--card-action-size); min-width: 0; height: var(--card-action-size); min-height: 0; margin: 0; padding: 0;
	border: var(--line); border-radius: 50%; background: var(--color-surface); color: var(--color-ink-strong);
	box-shadow: 0 2px 8px rgba(36, 36, 39, .12); opacity: 0; transition: opacity .15s, background-color .15s, color .15s, border-color .15s;
}
ul.products li.product-card:hover > a.product-card__action,
ul.products li.product-card > a.product-card__action:focus-visible { opacity: 1; }
ul.products li.product-card > a.product-card__action:hover,
.woocommerce ul.products li.product-card > a.product-card__action:hover { border-color: var(--color-red); background: var(--color-red); color: var(--color-on-red); }
.product-card__action .icon { width: 20px; height: 20px; }
.product-card__tip {
	position: absolute; right: 0; bottom: calc(100% + var(--space-2));
	padding: var(--space-1) var(--space-2); border-radius: var(--radius); background: var(--color-ink-strong); color: var(--color-on-red);
	font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.4; white-space: nowrap;
	opacity: 0; pointer-events: none; transition: opacity .15s;
}
.product-card__action:hover .product-card__tip, .product-card__action:focus-visible .product-card__tip { opacity: 1; }
ul.products li.product-card > a.product-card__action.loading { opacity: .6; }
ul.products li.product-card > a.product-card__action.loading::after,
ul.products li.product-card > a.product-card__action.added::after { content: none; }
@media (hover: none) {
	ul.products li.product-card > a.product-card__action,
	.woocommerce ul.products li.product-card > a.product-card__action { opacity: 1; }
}

/* Stock state (one component: card, product page, cart) */
.stock-state { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--weight-semibold); }
.stock-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stock-state--in { color: var(--color-success); }
.stock-state--backorder { color: var(--color-warning); }
.stock-state--bfo { color: var(--color-ink-strong); }
.stock-state--out { color: var(--color-muted); }

@media (max-width: 1100px) {
	ul.products { gap: var(--space-5) var(--space-4); }
}
@media (max-width: 760px) {
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) 13px; }
	.product-card__title { font-size: 13.2px; }
	.product-card .price { font-size: 20px; }
	.product-card__bottom { flex-direction: column; align-items: flex-start; }
	.product-card__badge { left: var(--space-2); top: var(--space-2); font-size: 9.5px; }
}

/* Post grid and card (magazine lists, search results) */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.post-card__picture { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--color-cream); }
.post-card__picture img { width: 100%; height: 100%; object-fit: cover; }
.post-card__meta { margin: var(--space-3) 0 var(--space-1); color: var(--color-muted); font-size: var(--text-xs); }
.post-card__title { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.post-card__excerpt { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 1100px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .post-grid { grid-template-columns: 1fr; } }

/* Article (single post) */
.article { max-width: 860px; }
.article__header { padding: var(--space-3) 0 var(--space-5); }
.article__title { font-size: var(--text-2xl); margin: 0; }
.article__image { margin: 0 0 var(--space-6); }
.article__image img { width: 100%; border-radius: var(--radius); }
.article__comments { max-width: 860px; margin-top: var(--space-7); }

/* Page article */
.page-article { padding-bottom: var(--space-5); }

/* Term description below the products (N7: products first) */
.term-description { margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--line); }

/* 404 and nothing found */
.not-found { max-width: 640px; padding: var(--space-7) 0; }
.not-found__text { margin-top: var(--space-3); color: var(--color-muted); }
.not-found__search { margin: var(--space-5) 0; }
.not-found__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.nothing-found { max-width: 560px; padding: var(--space-5) 0; color: var(--color-muted); }

/* Accordion (one component: guides, FAQs, term descriptions, old Flatsome accordions and tabs). No script. */
.accordion { margin-block: var(--space-5); }
.accordion__title { margin: 0 0 var(--space-3); font-size: var(--text-lg); }
.accordion__item { border-top: var(--line); }
.accordion__item:last-child { border-bottom: var(--line); }
.accordion__summary {
	display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0;
	cursor: pointer; list-style: none; font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-ink-strong);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::after { content: "+"; margin-left: auto; flex-shrink: 0; font-size: 22px; font-weight: var(--weight-regular); line-height: 1; }
.accordion__item[open] > .accordion__summary::after { content: "−"; }
.accordion__summary:hover { color: var(--color-red); }
.accordion__body { padding: 0 0 var(--space-5); }
.accordion__body > :last-child { margin-bottom: 0; }

/* Quantity field with − and + (one component: product page, cart; woocommerce/global/quantity-input.php, shell.js).
   WooCommerce's own CSS floats the field and sets the input width, so these rules use two classes. */
.quantity.quantity--steps {
	display: inline-flex; align-items: stretch; float: none; margin: 0;
	height: var(--control-height); border: var(--line); border-radius: var(--radius); background: var(--color-surface);
}
.quantity--steps .quantity__step {
	flex: 0 0 auto; width: 34px; padding: 0; border: 0; background: var(--color-cream); color: var(--color-ink-strong);
	font-size: var(--text-md); line-height: 1;
}
.quantity--steps .quantity__step:first-of-type { border-radius: var(--radius) 0 0 var(--radius); border-right: var(--line); }
.quantity--steps .quantity__step:last-of-type { border-radius: 0 var(--radius) var(--radius) 0; border-left: var(--line); }
.quantity--steps .quantity__step:hover { color: var(--color-red); }
.quantity--steps .quantity__step:disabled { color: var(--color-muted); cursor: default; }
.quantity.quantity--steps .qty {
	width: 3.2em; min-height: 0; height: 100%; padding: 0 var(--space-1); border: 0; border-radius: 0;
	text-align: center; font-size: var(--text-base); -moz-appearance: textfield; appearance: textfield;
}
.quantity--steps .qty::-webkit-outer-spin-button, .quantity--steps .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity--steps .qty:focus { box-shadow: none; }
.quantity.quantity--steps:focus-within { border-color: var(--color-ink-strong); }

/* Dialog shell (one component: lightbox, 3D viewer, output calculator, W5's options dialog). A native <dialog>:
   bc_dialog() prints it (inc/template-tags.php), shell.js opens and closes it, returns the focus and locks the page
   scroll. Title = h2. */
.dialog {
	width: min(var(--dialog-width), calc(100vw - 2 * var(--space-4))); max-height: calc(100dvh - 2 * var(--space-4));
	padding: 0; border: 0; border-radius: var(--radius); background: var(--color-surface); color: var(--color-ink);
	box-shadow: var(--shadow-panel); overflow: hidden;
}
.dialog--wide { --dialog-width: var(--dialog-width-wide); }
.dialog::backdrop { background: var(--color-backdrop); }
.dialog__panel { display: flex; flex-direction: column; max-height: calc(100dvh - 2 * var(--space-4)); }
.dialog__head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-bottom: var(--line); }
.dialog__title { margin: 0; font-size: var(--text-md); letter-spacing: 0; }
.dialog__close {
	display: inline-grid; place-items: center; flex: 0 0 auto; width: var(--control-height); height: var(--control-height);
	margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-3)) calc(-1 * var(--space-2)) auto;
	padding: 0; border: 0; border-radius: var(--radius); background: none; color: var(--color-ink-strong);
}
.dialog__close:hover { background: var(--color-cream); color: var(--color-red); }
.dialog__body { flex: 1 1 auto; min-height: 0; padding: var(--space-5); overflow: auto; overscroll-behavior: contain; }
html.has-open-dialog { overflow: hidden; }
@media (max-width: 760px) {
	.dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; margin: auto 0 0; border-radius: var(--radius) var(--radius) 0 0; }
	.dialog__panel { max-height: 100dvh; }
	.dialog__head { padding: var(--space-3) var(--space-4); }
	.dialog__body { padding: var(--space-4); }
}

/* The four round seals (one component: product page, shop pages; template-parts/components/seals.php). The Google
   seal is the store rating (theme setting), never a product rating. */
.seals { display: flex; justify-content: center; align-items: center; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.seals__item { flex: 0 1 var(--seal-size); min-width: 0; max-width: var(--seal-size); aspect-ratio: 1; }
.seals__link { display: block; border-radius: 50%; }
.seals__link:hover { opacity: .8; }
.seals__link:focus-visible { outline-offset: 4px; }
.seal { display: block; width: 100%; height: 100%; overflow: visible; font-family: var(--font-sans); }
.seal__ring { fill: var(--color-surface); stroke: var(--color-ink-strong); stroke-width: 2.2; }
.seal__core, .seal__dot { fill: var(--color-ink-strong); }
.seal__arc { fill: var(--color-ink-strong); font-size: 14px; font-weight: var(--weight-semibold); }
.seal__big { fill: var(--color-on-red); font-weight: var(--weight-heavy); }
.seal__small { fill: var(--color-on-red); font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: .8px; }
.seal__icon { fill: none; stroke: var(--color-on-red); stroke-width: 2.3; stroke-linejoin: round; }
.seal__icon--solid { fill: var(--color-on-red); stroke: none; }
.seal__icon-cut { fill: var(--color-ink-strong); }
.seal__wheel { fill: var(--color-on-red); stroke: var(--color-ink-strong); stroke-width: 2; }
@media (max-width: 760px) {
	.seals { gap: var(--space-2); }
	.seals__item { flex-basis: var(--seal-size-phone); max-width: var(--seal-size-phone); }
}
@media (max-width: 360px) {
	.seals { gap: 6px; }
	.seals__item { flex-basis: var(--seal-size-small); max-width: var(--seal-size-small); }
}

/* Comments */
.comments__list { list-style: none; padding: 0; }
.comments__list .comment { padding: var(--space-4) 0; border-bottom: var(--line); }