/*
Theme Name: Bellcorpus BR
Theme URI: https://bellcorpus.com.br
Description: Child theme of Ollie for the Brazilian Bellcorpus catalogue site. Design tokens live in theme.json. Catalogue only -- no cart, no WooCommerce.
Author: serm
Template: ollie
Version: 0.1.0
Requires at least: 6.8
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bellcorpusbr
*/

/* Deliberately short. Colours, typography, spacing and buttons are declared in
   theme.json so they reach the block editor and the front end identically.
   A rule belongs here only when theme.json genuinely cannot express it.

   DERIVED FROM ../bellcorpususa/theme/bellcorpususa/style.css (DECISIONS #12
   and #13: take the US design as-is). Every WooCommerce rule in that file was
   DROPPED -- roughly two thirds of it -- because this site has no cart, no
   price blocks, no filters and no add-to-cart. Carrying them over would have
   been dead CSS written against markup that never renders. */

/* ===========================================================================
   OLLIE PALETTE ALIASES -- do not delete

   theme.json sets defaultPalette:false and declares our own ten colours, which
   REMOVES every slug Ollie is written against. Ollie's stylesheets make dozens
   of colour-variable references to main, tertiary, secondary, border-light,
   primary and contrast. None of those slugs exist here, so each declaration
   computes to transparent or to an inherited colour -- SILENTLY, because an
   undefined CSS variable is not an error.

   Measured on the US store: all six resolved to an empty string. Keeping the
   parent's names pointing at our colours is the fix. They live here rather
   than in theme.json's palette so the editor colour picker still offers the
   ten colours we designed, not sixteen with seven duplicates.
   =========================================================================== */
:root {
	--wp--preset--color--main: var(--wp--preset--color--plum);
	--wp--preset--color--primary: var(--wp--preset--color--plum);
	--wp--preset--color--contrast: var(--wp--preset--color--plum);
	--wp--preset--color--secondary: var(--wp--preset--color--muted);
	--wp--preset--color--tertiary: var(--wp--preset--color--blush);
	--wp--preset--color--border-light: var(--wp--preset--color--border);
	--wp--preset--color--border-dark: var(--wp--preset--color--muted);

	/* WhatsApp green. NOT in theme.json's palette on purpose: it is another
	   company's brand colour used to identify a channel, not one of ours, and
	   it has no business in the editor's colour picker beside blush and plum.
	   It was previously typed as #1f7a50 in three places in this file; the
	   header pill and the card's quick pill would have made it five. */
	--bell-wa: #1F7A50;
	--bell-wa-dark: #17603D;

	/* Direction A geometry, SYSTEM.md "Grid geometry". 1280px of content
	   inside 40px sides at 1440. Kept here rather than in theme.json's
	   layout.wideSize, which is 1200 and governs every other template. */
	--bell-wrap: 1360px;
	--bell-pad: 40px;
	--bell-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* WordPress prints this class itself on some blocks but does not guarantee the
   rule on a block theme with no block-library-theme stylesheet loaded. Our own
   labels depend on it. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Uppercase, wide-tracked eyebrow label used above headings -- T1, SYSTEM.md
   "three eyebrow tiers". This is the DEFAULT: a <p> eyebrow above a section
   head. The footer's three column headings are the other half of this
   class's former double duty and take .bell-eyebrow--t2 instead (T2). */
.is-style-eyebrow {
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.20em;
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 600px) {
	.is-style-eyebrow {
		font-size: 12px;
	}
}

/* The frozen "button / CTA" row: 13, 600, 1.00, 0.12em, upper -- the same
   as .bell-btn, so a block button and a theme button read as one. */
.wp-block-button__link {
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transition: background-color 150ms ease, color 150ms ease;
}

/* Footer sits on plum-dark. theme.json's elements.link colour is global and
   resolves to plum, nearly invisible on that background, and a per-block link
   colour cannot target "inside the footer template part". */
.wp-site-blocks footer .has-plum-dark-background-color a,
.wp-site-blocks footer .has-ink-background-color a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.wp-site-blocks footer .has-plum-dark-background-color a:hover,
.wp-site-blocks footer .has-ink-background-color a:hover {
	color: var(--wp--preset--color--blush-deep);
	text-decoration: underline;
}

.wp-site-blocks footer .wp-block-list.is-style-plain {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

/* :not(.is-style-eyebrow) because this rule outranks the T1 eyebrow's own
   colour and was silently repainting the 404's eyebrow muted. The body copy
   is what wants muting here, not every paragraph on the page. */
.error404 .wp-block-post-content p:not(.is-style-eyebrow),
.error404 main p:not(.is-style-eyebrow) {
	color: var(--wp--preset--color--muted);
}

/* ===========================================================================
   THE CARD AND THE GRID -- DIRECTION A. DECISIONS.md #22, SYSTEM.md sections
   "Grid geometry" and "Card anatomy".

   THE IDEA: the grid IS the hero. The photograph is the card's edge -- no
   border, no shadow, no radius, nothing between one garment and the next but
   an 8px gutter. What replaced: a bordered white box with a 3:4 blush panel
   and a shadow on hover, which read as a row of tiles rather than a row of
   photographs.

   RADIUS REVERSED 2026-09-22, DECISIONS.md #23 -- Leonisa's rounded frame.
   The 10px/5px radius lives on .bell-card__media, the MASK (already
   overflow:hidden), never on the <img>: a contain photograph does not
   reach its own box edges, so an image-level radius would leave a square
   corner showing. research/leonisa/RADIUS.md has the measurement.

   Geometry measured in a browser, not computed (SYSTEM.md):

     viewport  content  cols  col gap  row gap  card    image (4:5)  image share
       1440     1280      4      8       40      314    314 x 393       74%
       1024      976      3      8       40      320    320 x 400       74%
        768      720      3      8       40      235    235 x 293       68%
        390      366      2      6       26      180    180 x 225       64%
   =========================================================================== */

.bell-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 8px;
	align-items: start;
}

/* minmax(0, 1fr) everywhere: a long unbroken product name would otherwise
   raise a column's min-content width and push the grid past its container,
   which is what the mega menu did before it was fixed. */
@media (max-width: 1199px) {
	.bell-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.bell-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 6px;
	}
}

.bell-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* THE PHOTO FRAME. 4:5, anchored at 50% 10% so a full-length portrait crops
   at mid-thigh rather than through the face. The ground is --photo, sampled
   from the archive's own studio backdrop (#E1D7D8-#EDDDDD) so a CONTAINED
   photograph reads as studio wall rather than as a pink panel. */
.bell-card__frame {
	position: relative;
	aspect-ratio: 4 / 5;
}

.bell-card__media {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--wp--preset--color--photo);
}

@media (max-width: 600px) {
	.bell-card__media {
		border-radius: 5px;
	}
}

.bell-card__media:hover {
	text-decoration: none;
}

/* The layers are STACKED and cross-faded on opacity. Swapping `src` would
   flash white while the new file downloads; swapping `display` cannot be
   transitioned at all. */
.bell-card__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: 50% 10%;
	opacity: 0;
	transition: opacity 260ms var(--bell-ease), transform 600ms var(--bell-ease);
}

/* Hover zoom -- research/BACKLOG.md 7c. Guarded on pointer
   capability, not just hover support: some Android WebViews emulate
   `(hover: hover)` on long-press, which would leave the effect stuck for a
   touch visitor. Applies to every stacked photo layer uniformly; only the
   opacity:1 layer is visible, so it cannot fight the colour/angle
   cross-fade above. */
@media (hover: hover) and (pointer: fine) {
	.bell-card__media:hover img {
		transform: scale(1.05);
	}
}

/* `contain`, from the photograph's own aspect ratio -- see
   bellcorpusbr_fit_class(). 46 of the 136 photographs are wider than 0.85 and
   ARE the thing at the edge of the frame: arm sleeves, a facial mask, a chin
   strap, contention plates. `cover` once cropped the arms clean off 1024
   MANGAS PARA LIPOASPIRACAO and left a page for arm sleeves showing only a
   bra. This is a correctness rule, not a taste one. */
.bell-card__media img.is-contain {
	object-fit: contain;
	object-position: 50% 50%;
	padding: 10px;
}

/* No padding when there is a blurred fill behind: the 10px gap draws a hard
   rectangle exactly where the fill is trying to make the join invisible. */
.bell-card__media:has(.bell-card__fill) img.is-contain {
	padding: 0;
}

/* WIDER THAN THE FRAME, filled rather than letterboxed. Uniform scale, no
   distortion -- `cover` never stretches one axis. Anchored at the CENTRE, not
   the card's usual 50%/10%: a wide photograph's subject sits in the middle,
   and all 18 affected photographs measured within 5% of dead centre. */
.bell-card__media img.is-wide {
	object-fit: cover;
	object-position: 50% 50%;
}

/* The letterbox fill -- see bellcorpusbr_card(). A blurred, over-scaled copy
   of the SAME photograph sits behind a contained one, so the empty part of
   the frame is that photograph's own backdrop rather than a flat #EAE0E1 slab
   that disagrees with it. It is emitted only where there is a letterbox.
   `scale(1.12)` hides the blur's soft edge; the brightness lift keeps the
   product in front from sinking into it. */
.bell-card__fill {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.12);
	filter: blur(26px) saturate(0.92);
	opacity: 1;
}

/* Every real photograph layer sits ABOVE the fill. Without this the opacity
   cross-fade would reveal the blur instead of the next photograph. */
.bell-card__media img.is-default,
.bell-card__media img.is-alt,
.bell-card__media img[class*="bell-ph--"] {
	z-index: 1;
}

.bell-card__media img.is-default {
	opacity: 1;
}

/* ANGLE ON HOVER. Not a Spanx behaviour -- theirs does nothing on photo hover
   -- but 58 of our 70 products already own a back or side photograph that
   nobody has ever seen. */
.bell-card__media:has(img.is-alt):hover img.is-default,
.bell-card__media:has(img.is-alt):focus-visible img.is-default {
	opacity: 0;
}
/* ...and ONLY when there is one: a card with a single photograph keeps it on
   hover instead of fading to its blurred fill (26 cards did, 2026-09-24). */

.bell-card__media:hover img.is-alt,
.bell-card__media:focus-visible img.is-alt {
	opacity: 1;
}

/* COLOUR ON HOVER *OR* FOCUS, which is the one place this improves on the
   reference. Spanx swaps on swatch hover only, so a keyboard user gets
   nothing (measured, research/spanx/NOTES.md 3a). `:has()` lets one rule
   serve both; browsers without it show the default photograph and a working
   link, which is exactly what Spanx gives a keyboard user today. */
.bell-card:has(.bell-sw--bege:is(:hover, :focus-visible)) .bell-card__media img,
.bell-card:has(.bell-sw--chocolate:is(:hover, :focus-visible)) .bell-card__media img,
.bell-card:has(.bell-sw--preto:is(:hover, :focus-visible)) .bell-card__media img,
.bell-card:has(.bell-sw--floral:is(:hover, :focus-visible)) .bell-card__media img,
.bell-card:has(.bell-sw--branca:is(:hover, :focus-visible)) .bell-card__media img,
.bell-card:has(.bell-sw--onca:is(:hover, :focus-visible)) .bell-card__media img {
	opacity: 0;
}

.bell-card:has(.bell-sw--bege:is(:hover, :focus-visible)) .bell-card__media img.bell-ph--bege,
.bell-card:has(.bell-sw--chocolate:is(:hover, :focus-visible)) .bell-card__media img.bell-ph--chocolate,
.bell-card:has(.bell-sw--preto:is(:hover, :focus-visible)) .bell-card__media img.bell-ph--preto,
.bell-card:has(.bell-sw--floral:is(:hover, :focus-visible)) .bell-card__media img.bell-ph--floral,
.bell-card:has(.bell-sw--branca:is(:hover, :focus-visible)) .bell-card__media img.bell-ph--branca,
.bell-card:has(.bell-sw--onca:is(:hover, :focus-visible)) .bell-card__media img.bell-ph--onca {
	opacity: 1;
}

/* A swatch with NO photograph of its own holds the default photograph rather
   than fading to an empty frame. 38 of 70 products are in that position --
   a gap in the photography, not in the code (DECISIONS.md #22). Last in the
   cascade so it beats the blanket `opacity: 0` above. */
.bell-card:has(.bell-sw--nophoto:is(:hover, :focus-visible)) .bell-card__media img.is-default {
	opacity: 1;
}

/* 8 of the 70 products have no photograph. FLAGGED, never hidden -- the
   owner's instruction is that every product goes up. */
.bell-card__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	color: var(--wp--preset--color--muted);
	font-size: 12.5px;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-align: center;
}

/* ---- badge and quick pill ------------------------------------------------ */
.bell-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 8px;
	border-radius: 3px;
	background: rgb(255 255 255 / 92%);
	color: var(--wp--preset--color--plum);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bell-badge--care {
	background: var(--wp--preset--color--form);
	color: #fff;
}

/* EVERYDAY PRODUCTS ONLY. A regulated card is never given one -- no pill, no
   wa.me href, no message -- so BELLCORPUSBR_WHATSAPP cannot reach it whatever
   it is set to. Same fail-closed property bellcorpusbr_cta() has.

   It sits OUTSIDE .bell-card__media in the markup, because a link inside a
   link is invalid and browsers recover by closing the outer one. */
.bell-quick {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px 0 10px;
	border-radius: 999px;
	background: rgb(255 255 255 / 94%);
	color: var(--bell-wa);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-decoration: none;
	box-shadow: 0 2px 8px rgb(53 18 42 / 15%);
	transition: background-color 150ms var(--bell-ease), color 150ms var(--bell-ease);
}

.bell-quick .bell-icon {
	width: 16px;
	height: 16px;
}

.bell-quick:hover,
.bell-quick:focus-visible {
	background: var(--bell-wa);
	color: #fff;
	text-decoration: none;
}

/* ---- swatches, ABOVE the name -------------------------------------------- */
/* Spanx's order, and it is the right one: colour is a primary attribute of a
   garment sold in three of them. Each swatch is a REAL LINK, so touch and
   keyboard have an action -- hover is a pointer affordance and cannot be the
   only way to reach a colour. */
.bell-card__sw {
	display: flex;
	gap: 6px;
	min-height: 28px;
	padding: 8px 2px 0;
}

.bell-sw {
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid rgb(53 18 42 / 18%);
	border-radius: 3px;
	box-shadow: 0 0 0 2px transparent;
	transition: box-shadow 150ms var(--bell-ease);
}

.bell-sw:hover,
.bell-sw:focus-visible {
	outline: none;
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp--preset--color--plum);
}

/* Sampled from the photographs, not from fabric. CHOCOLATE IS A GUESS: it is
   darker than the "choc" photographs, which are tan. Somebody holding a
   garment should set it. */
.bell-sw--bege { background: #D9B4A8; }
.bell-sw--chocolate { background: #8B5E4B; }
.bell-sw--preto { background: #1E1A1A; }
.bell-sw--branca { background: #F4F1EE; }
.bell-sw--floral { background: #C8657C; }
.bell-sw--onca { background: #A98A5A; }

/* ---- card body ----------------------------------------------------------- */
.bell-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 4px 2px 0;
}

.bell-card__eyebrow {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bell-card__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 450;
	line-height: 1.35;
	color: var(--wp--preset--color--plum);
}

.bell-card__name a {
	color: inherit;
	text-decoration: none;
}

.bell-card__name a:hover {
	text-decoration: underline;
}

/* Prices are DATA, so they are set in the body face with tabular figures,
   never in the display serif. Playfair's old-style numerals sit at different
   heights (the 3, 5 and 8 drop below the baseline), which reads beautifully in
   a headline and badly in a column of prices a visitor is comparing.
   DECISIONS.md #20.

   Most products have no published price, and inventing one would bind the
   seller under CDC Art. 30. "Preco sob consulta" is the honest default. */
.bell-card__price {
	margin: 1px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--plum);
}

.bell-card__price--ask {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: normal;
	color: var(--wp--preset--color--muted);
}

/* The RANGE, not a count. "10 tamanhos" says nothing a shopper can act on;
   "Mini Mini a EG56" tells a plus-size customer in four words that this
   company makes something for her. */
.bell-card__sizes {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
}

.bell-card a:focus-visible {
	outline: 2px solid var(--wp--preset--color--plum);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	/* At 390 the card is half the width of the reference's mobile card, so the
	   name is clamped to two lines and the size note is dropped -- that is what
	   keeps the photograph at 64% of the card. Below that the grid stops
	   reading as photo-led, which is the whole direction. */
	.bell-card__name {
		font-size: 15px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.bell-card__sizes {
		display: none;
	}

	.bell-card__price {
		font-size: 17px;
	}

	/* Must be restated here. .bell-card__price--ask and .bell-card__price have
	   equal specificity, so the raised mobile price above was overriding the
	   ask variant's 13px. */
	.bell-card__price--ask {
		font-size: 13px;
	}

	/* .bell-card__eyebrow needs no override here -- its base is now 10px,
	   the same constant T3 uses at every viewport. */

	.bell-quick {
		height: 30px;
		padding: 0 9px;
	}

	.bell-quick span {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bell-card__media img,
	.bell-sw,
	.bell-quick {
		transition-duration: 0.01ms;
	}

	.bell-card__media:hover img {
		transform: none;
	}

	.bell-lightbox,
	.bell-lightbox::backdrop {
		transition: none;
	}
}

/* ===========================================================================
   PRODUCT PAGE -- DIRECTION A. DECISIONS.md #22, SYSTEM.md "Produto".

   Left 7/12: every photograph STACKED, the first full width and the rest two
   across, each with a caption chip. What it replaces: one large image plus a
   60px thumbnail rail whose thumbnails were anchors to `?foto=<n>` -- a full
   page load to look at a second angle. 58 of 70 products carry more than one
   photograph and the catalogue holds 197.

   Right 5/12, sticky: eyebrow, H1, price, description, colour radios, ten
   size chips plus "Sob medida" and "Nao sei", the "Vai no pedido" line, the CTA,
   and facts plus assurance in a closed <details> (UX review 2026-09-24).

   STILL NO JAVASCRIPT anywhere on this page.
   =========================================================================== */

.bell-pdp {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 48px;
	align-items: start;
	padding-top: 16px;
}

/* ---- the stacked gallery ------------------------------------------------- */
.bell-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.bell-gallery figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--photo);
}

.bell-gallery figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 8%;
}

/* Same correctness rule as the card: 46 of the 136 photographs are wider than
   0.85 and ARE the thing at the edge of the frame. */
.bell-gallery figure img.is-contain {
	object-fit: contain;
	padding: 16px;
}

/* 7c: native popover lightbox on the PDP gallery. Zero JS (DECISIONS.md #18).
   Owner B shipped the .bell-gal__trigger / .bell-lightbox markup in
   bellcorpusbr_gallery(); this is the CSS owed to it (dist/handoff-lightbox-css.md). */
.bell-gal__trigger {
	all: unset;
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

.bell-gal__trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--plum);
	outline-offset: -2px;
}

.bell-lightbox {
	position: relative;
	margin: auto;
	border: 0;
	padding: 0;
	max-width: min(92vw, 1200px);
	max-height: 92vh;
	background: transparent;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 240ms ease, transform 240ms ease, overlay 240ms ease allow-discrete, display 240ms ease allow-discrete;
}

.bell-lightbox:popover-open {
	opacity: 1;
	transform: scale(1);
}

@starting-style {
	.bell-lightbox:popover-open {
		opacity: 0;
		transform: scale(0.96);
	}
}

.bell-lightbox::backdrop {
	background: rgb(0 0 0 / 70%);
	opacity: 0;
	transition: opacity 240ms ease, overlay 240ms ease allow-discrete, display 240ms ease allow-discrete;
}

.bell-lightbox:popover-open::backdrop {
	opacity: 1;
}

@starting-style {
	.bell-lightbox:popover-open::backdrop {
		opacity: 0;
	}
}

.bell-lightbox img {
	display: block;
	max-width: 100%;
	max-height: 92vh;
	object-fit: contain;
	margin: 0 auto;
}

.bell-lightbox__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: rgb(255 255 255 / 92%);
	color: var(--wp--preset--color--plum);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.bell-gal--first {
	order: -2;
	grid-column: 1 / -1;
	max-height: 760px;
}

/* The lightbox's only affordance used to be `cursor: zoom-in`, which touch
   never shows. A wordless magnifier on the hero says "this opens" without
   becoming a caption (BACKLOG.md 6a removed those). Same glyph as
   bellcorpusbr_icon('search') plus a "+"; decoration only -- the button's
   aria-label already names the action. The disc is ::before and the glyph a
   MASK on ::after, so its colour is a token the slate register can swap. */
.bell-gal--first .bell-gal__trigger::before,
.bell-gal--first .bell-gal__trigger::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	pointer-events: none;
}

.bell-gal--first .bell-gal__trigger::before {
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
}

.bell-gal--first .bell-gal__trigger::after {
	background: var(--wp--preset--color--plum);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.bell-gallery--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--photo);
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	letter-spacing: 0.06em;
}

/* CHOOSING A COLOUR MOVES ITS PHOTOGRAPHS TO THE FRONT OF THE TILES, with no
   script: the radios live in the buy column and `:has()` reaches across the
   grid.

   It NEVER takes the hero slot. The default photograph is the front view by
   definition (photo-roles.json), while a colour photograph can be any angle --
   on 1002 BL the pre-checked Bege is a BACK view, and promoting it opened a
   bojo-liso page on a shot where the bojo cannot be seen. So the hero is
   `.bell-gal--first`, unconditionally, and the colour figure only reorders
   among the tiles below it: the hero carries `order: -2` so a promoted
   `order: -1` tile lands after it, not above it.

   Browsers without `:has()` keep the default order, and every photograph is
   still visible. That is the honest degradation for a stacked gallery; it
   would not be for a carousel. */
.bell-pdp:has(#bc-cor-bege:checked) .bell-gallery .bell-ph--bege,
.bell-pdp:has(#bc-cor-chocolate:checked) .bell-gallery .bell-ph--chocolate,
.bell-pdp:has(#bc-cor-preto:checked) .bell-gallery .bell-ph--preto,
.bell-pdp:has(#bc-cor-floral:checked) .bell-gallery .bell-ph--floral,
.bell-pdp:has(#bc-cor-branca:checked) .bell-gallery .bell-ph--branca,
.bell-pdp:has(#bc-cor-onca:checked) .bell-gallery .bell-ph--onca {
	order: -1;
}

/* UNDER THREE PHOTOGRAPHS, EVERY FIGURE GOES FULL WIDTH. Hero-plus-halves
   with only two photographs leaves one half-width tile beside an empty cell,
   and two is the COMMON case here (34 of 70 products have an alt angle and
   most stop there). Sibling counting, so no data and no PHP. */
.bell-gallery:has(figure:nth-child(2):last-child) figure {
	grid-column: 1 / -1;
	max-height: 760px;
}

.bell-gallery__dots {
	display: none;
}

/* ---- the buy column ------------------------------------------------------ */
.bell-buy {
	position: sticky;
	top: 24px;
}

.bell-buy__eyebrow {
	margin: 0 0 10px;
	color: var(--wp--preset--color--ink-soft);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.20em;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.bell-buy__eyebrow {
		font-size: 12px;
	}
}

.bell-buy__h1 {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 40px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--plum);
}

@media (max-width: 1199px) {
	.bell-buy__h1 {
		font-size: 34px;
	}
}

/* Prices are DATA: body face, tabular figures, never the display serif.
   DECISIONS.md #20. */
.bell-buy__price {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--plum);
}

@media (max-width: 1199px) {
	.bell-buy__price {
		font-size: 28px;
	}
}

.bell-buy__price--ask {
	font-size: 20px;
	font-weight: 500;
}

.bell-buy__pricenote {
	margin: 0 0 20px;
	color: var(--wp--preset--color--muted);
	font-size: 12.5px;
	line-height: 1.4;
}

.bell-buy__desc {
	margin-bottom: 26px;
	font-size: 16px;
	line-height: 1.6;
}

.bell-buy__desc p {
	margin: 0 0 12px;
}

/* ---- options ------------------------------------------------------------- */
.bell-opt {
	margin-bottom: 22px;
}

.bell-opt__label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 10px;
	color: var(--wp--preset--color--muted);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bell-opt__hint {
	letter-spacing: 0.04em;
	text-transform: none;
}

/* The chosen colour's NAME, echoed beside the label. Hidden by default and
   revealed by :has(:checked), so the control says what it is set to without a
   script. Without :has() no name shows and the swatches still work. */
.bell-cor-nome {
	display: none;
	color: var(--wp--preset--color--plum);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
}

.bell-pdp:has(#bc-cor-bege:checked) .bell-cor-nome--bege,
.bell-pdp:has(#bc-cor-chocolate:checked) .bell-cor-nome--chocolate,
.bell-pdp:has(#bc-cor-preto:checked) .bell-cor-nome--preto,
.bell-pdp:has(#bc-cor-floral:checked) .bell-cor-nome--floral,
.bell-pdp:has(#bc-cor-branca:checked) .bell-cor-nome--branca,
.bell-pdp:has(#bc-cor-onca:checked) .bell-cor-nome--onca {
	display: inline;
}

/* The radio stays FOCUSABLE -- only its box is hidden -- so every option is
   reachable by keyboard. display:none would drop it out of the tab order and
   make the size chips unusable without a pointer. */
.bell-opt input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.bell-opt__sw {
	display: flex;
	gap: 14px;
}

/* `width: auto` is NOT redundant. The parent theme ships a bare
   `label { width: 100%; display: block }`, which a class selector outranks --
   but only for the properties the class actually declares. Neither of these
   declared a width, so every size chip and every colour swatch label stretched
   to the full column and the ten sizes stacked into a ten-row tower. */
.bell-swl {
	display: inline-flex;
	width: auto;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.bell-swl .bell-sw {
	width: 32px;
	height: 32px;
}

.bell-swl span:last-child {
	color: var(--wp--preset--color--muted);
	font-size: 12px;
}

input:checked + .bell-swl .bell-sw,
input:focus-visible + .bell-swl .bell-sw {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp--preset--color--plum);
}

input:checked + .bell-swl span:last-child {
	color: var(--wp--preset--color--plum);
	font-weight: 600;
}

.bell-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bell-chip {
	display: inline-flex;
	width: auto;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--plum);
	font-size: 14px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

input:checked + .bell-chip {
	border-color: var(--wp--preset--color--plum);
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--surface);
}

input:focus-visible + .bell-chip {
	outline: 2px solid var(--wp--preset--color--plum);
	outline-offset: 3px;
}

/* Made to measure is a ROUTE, not a size, so it is a dashed link out of the
   form rather than a radio that would be submitted as one. */
.bell-chip--made {
	border-style: dashed;
}

.bell-comoescolher {
	margin-top: 10px;
	color: var(--wp--preset--color--muted);
	font-size: 13.5px;
}

.bell-comoescolher summary {
	color: var(--wp--preset--color--plum);
	font-weight: 500;
	cursor: pointer;
}

.bell-comoescolher p {
	margin-top: 6px;
}

/* ---- the two contact routes ---------------------------------------------- */
/* WhatsApp is the primary CTA for ordinary products (DECISIONS #3). */
.bell-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	padding: 0 24px;
	border: 1px solid var(--bell-wa);
	border-radius: 4px;
	background: var(--bell-wa);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms var(--bell-ease);
}

.bell-cta:hover {
	background: var(--bell-wa-dark);
	border-color: var(--bell-wa-dark);
	color: #fff;
	text-decoration: none;
}

/* The 12 regulated products CANNOT use WhatsApp: its Commerce Policy bars
   Regulated Verticals from the free Business App outright (DECISIONS #10).
   A different COLOUR as well as a different destination, so the difference is
   visible and not just a changed href. Both routes used to be plum, which made
   the one visual difference between "you may message this on WhatsApp" and
   "you may not" invisible. */
.bell-cta--care {
	border-color: var(--wp--preset--color--form);
	background: var(--wp--preset--color--form);
}

.bell-cta--care:hover {
	background: #243845;
	border-color: #243845;
}

/* The everyday products while BELLCORPUSBR_WHATSAPP is empty: same form as the
   regulated route, but NOT the same reason, so it does not borrow --care's
   clinical framing. Fill in the constant and this class stops being emitted. */
.bell-cta--form {
	border-color: var(--wp--preset--color--plum);
	background: var(--wp--preset--color--plum);
}

.bell-cta--form:hover {
	background: var(--wp--preset--color--plum-dark);
	border-color: var(--wp--preset--color--plum-dark);
}

.bell-alert {
	display: flex;
	gap: 12px;
	margin-bottom: 22px;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--blush-deep);
	border-left: 4px solid var(--wp--preset--color--plum);
	background: var(--wp--preset--color--blush);
	color: var(--wp--preset--color--plum);
	font-size: 13.5px;
	line-height: 1.55;
}

.bell-alert .bell-icon {
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.bell-ctanote {
	margin: 12px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 12.5px;
	line-height: 1.5;
}

.bell-ctaalt {
	margin: 10px 0 0;
	font-size: 13px;
}

.bell-ctaalt a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- reassurance and facts ----------------------------------------------- */
.bell-assure {
	display: grid;
	gap: 10px;
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--border);
	list-style: none;
}

.bell-assure li {
	display: flex;
	gap: 10px;
	font-size: 14px;
	line-height: 1.45;
}

.bell-assure .bell-icon {
	color: var(--wp--preset--color--plum);
	margin-top: 2px;
}

.bell-facts {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 13.5px;
}

.bell-facts div {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 12px;
	padding: 6px 0;
}

.bell-facts dt {
	padding-top: 3px;
	color: var(--wp--preset--color--muted);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bell-facts dd {
	margin: 0;
	line-height: 1.45;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
	.bell-pdp {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.bell-buy {
		position: static;
	}

	/* The gallery becomes a scroll-snap carousel: no script, every photograph
	   reachable by swipe, and the dots are plain anchors so a keyboard can
	   reach them too. */
	.bell-gallery {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin: 0 calc(-1 * var(--bell-pad));
		padding: 0 var(--bell-pad);
		scrollbar-width: none;
	}

	.bell-gallery::-webkit-scrollbar {
		display: none;
	}

	/* HEIGHT-driven, not width-driven: at 82% of the width the frame's height
	   followed the viewport's width and was unbounded on a tablet. The width
	   follows from aspect-ratio, so the photograph keeps its framing and the
	   next one still peeks in from the right. MEASURED at 390x844: this is
	   NOT what keeps the CTA low -- header + crumb are 216px and the buy
	   column from eyebrow to CTA is 575px (the size chips alone 199), so the
	   CTA cannot reach the first screen by shrinking photographs. */
	.bell-gallery figure {
		flex: 0 0 auto;
		height: min(34svh, 280px);
		scroll-snap-align: start;
		max-height: none;
	}

	.bell-gal--first {
		grid-column: auto;
	}

	.bell-gallery__dots {
		display: flex;
		justify-content: center;
		gap: 6px;
		margin-top: 10px;
	}

	.bell-gallery__dots a {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--wp--preset--color--blush-deep);
	}

	.bell-pdp--reg .bell-gallery__dots a {
		background: var(--wp--preset--color--form-border);
	}
}

@media (max-width: 600px) {
	.bell-buy__h1 {
		font-size: 28px;
	}

	.bell-buy__price {
		font-size: 26px;
	}

	.bell-facts div {
		grid-template-columns: 96px 1fr;
	}

	.bell-opt__sw {
		gap: 10px;
	}

	.bell-chip {
		flex: 0 0 auto;
		min-width: 50px;
		height: 42px;
		padding: 0 10px;
		font-size: 13px;
	}

	/* COMPACT BUY COLUMN ON A PHONE. Measured at 390x844 before this: header
	   + crumb 216px, and the buy column from eyebrow to CTA 575px, so the CTA
	   sat at y=1179 whatever the photographs did. Boxes change here, never
	   type (the scale is frozen).

	   1. The ten sizes are ONE swipeable row, not three wrapped rows. The
	      hint beside the label already says there are ten, and the cut chip
	      at the right edge says the row scrolls. The vertical padding keeps
	      the focus outline (offset 3 + width 2) inside the scroller. */
	.bell-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0 calc(-1 * var(--bell-pad));
		padding: 6px var(--bell-pad);
		scroll-padding-inline: var(--bell-pad);
		scrollbar-width: none;
	}

	.bell-chips::-webkit-scrollbar {
		display: none;
	}

	/* 2. The description follows the CTA instead of preceding the options.
	      It describes; it does not decide anything the options need. */
	.bell-buy {
		display: flex;
		flex-direction: column;
	}

	.bell-buy__desc {
		order: 1;
		margin: 22px 0 0;
	}

	.bell-buy__desc p:last-child {
		margin-bottom: 0;
	}

	/* 4. "Como escolher o tamanho" follows the CTA too. The size block is
	      flattened with `display: contents` (a plain div, no semantics lost)
	      so its details can be ordered past the button. On a regulated
	      product the notice is a direct child of the form ahead of the CTA,
	      so it stays with it (DECISIONS.md #10, #19). */
	.bell-opts {
		display: flex;
		flex-direction: column;
	}

	.bell-opts > .bell-opt {
		margin-bottom: 16px;
	}

	.bell-opts > .bell-opt:has(.bell-chips) {
		display: contents;
	}

	.bell-opts .bell-chips {
		margin-bottom: 16px;
	}

	/* wpautop() leaves an EMPTY <p> in this form and wraps the CTA button in
	   another (the shortcode trap in AGENTS.md). Block layout collapsed their
	   margins to nothing; a flex column does not collapse margins, so they
	   cost 42px here until zeroed. */
	.bell-opts > p:not([class]) {
		margin: 0;
	}

	.bell-opts .bell-comoescolher {
		order: 1;
		margin-top: 14px;
	}

	/* 3. No caption under each swatch: the CHOSEN colour's name is already
	      echoed beside "Cor:", and each label keeps its name for a screen
	      reader, visually hidden rather than removed. */
	.bell-swl span:last-child {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ===========================================================================
   CONTACT FORM
   =========================================================================== */

.bell-contato {
	max-width: 620px;
}

.bell-field {
	margin: 0 0 18px;
}

.bell-field label {
	display: block;
	margin-bottom: 7px;
	color: var(--wp--preset--color--muted);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bell-field input,
.bell-field textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--plum);
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 1.5;
	/* Without this the UA default wins and the box overflows its column. */
	box-sizing: border-box;
}

.bell-field textarea {
	resize: vertical;
}

.bell-field input:focus,
.bell-field textarea:focus {
	outline: 2px solid var(--wp--preset--color--plum);
	outline-offset: 1px;
}

/* The form's submit is a <button>, so it needs the resets an <a> did not. */
.bell-form button.bell-cta {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
}

.bell-lgpd {
	margin: 4px 0 24px;
	color: var(--wp--preset--color--muted);
	font-size: 12.5px;
	line-height: 1.6;
}

/* role="status" on an element that is already in the document announces on
   change, so the message must be visible as well as announced. */
.bell-aviso {
	margin: 0 0 24px;
	padding: 14px 16px;
	border-left: 4px solid var(--wp--preset--color--plum);
	background: var(--wp--preset--color--blush);
	color: var(--wp--preset--color--plum);
	font-size: 14px;
	line-height: 1.55;
}

/* Colour is not the only signal -- the wording differs too, because a visitor
   who cannot distinguish these two greens still has to know which happened. */
.bell-aviso--ok {
	border-left-color: #1f7a50;
}

.bell-aviso--erro {
	border-left-color: #a3324c;
}

/* minmax(0, ...), as on the wide grid, and it must be HERE: this block is
   later in the file than the PDP's own 900px block, so it wins. A bare 1fr has
   an `auto` minimum, and once the mobile gallery's figures took definite
   widths the column grew to the snap strip's full width -- the page scrolled
   sideways by 261px at 390. */
@media (max-width: 900px) {
	.bell-pdp {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

/* After the rule above, on purpose: equal specificity, so source order
   decides. Part of the phone buy-column compaction. */
@media (max-width: 600px) {
	.bell-pdp {
		gap: 16px;
	}
}

/* ------------------------------------------------------------------ */
/* Category strip -- [bc_categorias] on /catalogo/ and both taxonomy   */
/* archives. Two rows: garment type, then linha.                      */
/* ------------------------------------------------------------------ */
.bell-cats {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 8px;
	margin: 0 0 14px;
}

.bell-cats__label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
	margin-right: 4px;
}

@media (max-width: 600px) {
	.bell-cats__label {
		font-size: 12px;
	}
}

.bell-cats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bell-cats__item {
	display: inline-block;
	padding: 6px 13px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--plum);
	font-size: 13px;
	line-height: 1.3;
	text-decoration: none;
}

.bell-cats__item:hover,
.bell-cats__item:focus {
	background: var(--wp--preset--color--blush);
	border-color: var(--wp--preset--color--blush-deep);
}

/* The current term is marked by BACKGROUND and by aria-current, not by colour
   alone -- the strip is the only way to tell which archive you are on once the
   heading has scrolled away. */
.bell-cats__item.is-current {
	background: var(--wp--preset--color--plum);
	border-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--base);
}

.bell-cats__count {
	font-size: 11px;
	opacity: 0.6;
	margin-left: 2px;
}

/* The strip is the primary navigation on a phone, so it keeps its full wrap
   rather than becoming a horizontal scroller that hides half the categories. */
@media (max-width: 600px) {
	.bell-cats {
		gap: 8px 6px;
	}

	.bell-cats__item {
		padding: 5px 11px;
		font-size: 12px;
	}
}

/* ===========================================================================
   THE CATALOGUE -- DIRECTION A.  DECISIONS.md #22, SYSTEM.md "Catalogo".

   WHAT REPLACED WHAT. #18 built a 288px filter column measured off
   bellcorpususa.com/shop/. At a 1280px content width that column plus its
   48px gutter costs 336px, which is exactly the difference between three grid
   columns and four -- and the fourth column is the whole premise of the
   direction the owner chose. The rail becomes a sticky row of `<details>`
   pills and the grid runs full width under it.

   THE ENGINE IS UNCHANGED. bellcorpusbr_facet_group() still renders every
   facet, so counts still respect the other active filters, exhausted facets
   are still shown at 40% rather than removed, every row is still a LINK that
   toggles one query-string value, unpriced products still sort last in both
   directions, and there is still no JavaScript beyond the sort select's
   onchange (which degrades to a visible submit button).

   What is genuinely given up: a visitor who wants every facet visible at once
   no longer gets that. Inside a panel the counts and the greying survive; the
   simultaneity does not.
   =========================================================================== */

/* SYSTEM.md's wrapper: 1360px INCLUDING its gutters, so the content is 1280
   at 1440 and 976 at 1024. The block templates pass no padding of their own --
   theirs would add to this rather than replace it. */
.bell-wrap {
	max-width: var(--bell-wrap);
	margin: 0 auto;
	padding: 0 var(--bell-pad);
}

/* ---- crumb and page head ------------------------------------------------- */
.bell-crumb {
	margin: 0;
	padding: 22px 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bell-crumb a {
	color: inherit;
	text-decoration: none;
}

.bell-crumb a:hover {
	color: var(--wp--preset--color--plum);
	text-decoration: underline;
}

.bell-pagehead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px;
	padding: 8px 0 24px;
}

/* THE H1 THE CATALOGUE DID NOT HAVE. Its template opened with an <h2> and no
   <h1> at all, on the most important page of the site. */
.bell-pagehead__h1 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 56px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--plum);
}

.bell-pagehead__count {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.bell-pagehead__sub {
	flex-basis: 100%;
	margin: 0;
	color: var(--wp--preset--color--plum);
	font-size: 20px;
	font-weight: 300;
	line-height: 1.5;
}

@media (max-width: 1199px) {
	.bell-pagehead__sub {
		font-size: 19px;
	}
}

/* The 390 value MUST sit after the 1199 one. Both queries match at 390 and
   the selectors have identical specificity, so source order decides -- and
   the 17px written up in the 600px block near .bell-buy__price was silently
   losing to the 19px above. verify-type.py caught it. */
@media (max-width: 600px) {
	.bell-pagehead__sub {
		font-size: 17px;
	}
}

/* ---- category tile row --------------------------------------------------- */
.bell-tiles {
	padding-bottom: 24px;
}

/* Scrolls horizontally with snap rather than wrapping: eleven tiles wrapping
   to three rows would push the first product below the fold, which is the
   fold this direction exists to fill with product. */
.bell-tiles__row {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 6px;
	scrollbar-width: thin;
}

.bell-tile {
	flex: 0 0 118px;
	scroll-snap-align: start;
	display: block;
	text-decoration: none;
}

.bell-tile:hover {
	text-decoration: none;
}

.bell-tile__img {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--photo);
	transition: border-color 150ms var(--bell-ease);
}

@media (max-width: 600px) {
	.bell-tile__img {
		border-radius: 5px;
	}
}

.bell-tile__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
}

.bell-tile__img img.is-contain {
	object-fit: contain;
	padding: 8px;
}

/* Same rule as the card: a tile is a fixed 4:5 box, so fill it. Centre-
   anchored because a wide photograph's subject is in the middle. */
.bell-tile__img img.is-wide {
	object-fit: cover;
	object-position: 50% 50%;
}

/* And the same letterbox fill for the two tiles that must stay contained
   (Faixas and Acessorios -- their photographs are wider than their garments'
   frames). Without it those two read as broken beside nine filled tiles. */
.bell-tile__fill {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.12);
	filter: blur(14px) saturate(0.92);
}

.bell-tile__img img.is-contain,
.bell-tile__img img.is-wide {
	position: relative;
	z-index: 1;
}

.bell-tile__img:has(.bell-tile__fill) img.is-contain {
	padding: 0;
}

/* All 4 Plaquetas are unphotographed. The tile says so rather than being
   dropped from the row -- the category exists and is browsable. */
.bell-tile__img--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	color: var(--wp--preset--color--muted);
	font-size: 11px;
	line-height: 1.4;
	text-align: center;
}

.bell-tile:hover .bell-tile__img,
.bell-tile:focus-visible .bell-tile__img {
	border-color: var(--wp--preset--color--plum);
}

/* The current tile is marked by a 2px frame AND aria-current, never by colour
   alone -- it is the only thing saying which category you are in once the
   heading has scrolled away. */
.bell-tile[aria-current="page"] .bell-tile__img {
	border-width: 2px;
	border-color: var(--wp--preset--color--plum);
}

.bell-tile__name {
	display: block;
	margin-top: 8px;
	color: var(--wp--preset--color--plum);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
}

/* SYSTEM.md lists this among the sixteen roles needing an explicit
   line-height but gives it no number of its own -- it is not an eyebrow
   tier member (no uppercase, no tracking). Matched to its sibling
   .bell-tile__name, already correct at 1.3, rather than invented. */
.bell-tile__count {
	display: block;
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	line-height: 1.3;
}

.bell-tile--care .bell-tile__name {
	color: var(--wp--preset--color--form);
}

.bell-tile--care[aria-current="page"] .bell-tile__img {
	border-color: var(--wp--preset--color--form);
}

/* ---- the sticky filter bar ----------------------------------------------- */
.bell-bar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.bell-bar__row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 60px;
	max-width: var(--bell-wrap);
	margin: 0 auto;
	padding: 0 var(--bell-pad);
}

.bell-bar__filters {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.bell-bar__right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.bell-bar__count {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.bell-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--plum);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	list-style: none;
}

/* Safari still draws the disclosure triangle unless BOTH are suppressed. */
.bell-pill::-webkit-details-marker {
	display: none;
}

.bell-pill::marker {
	content: "";
}

.bell-pill:hover {
	border-color: var(--wp--preset--color--plum);
	text-decoration: none;
}

.bell-pill--on {
	border-color: var(--wp--preset--color--plum);
	background: var(--wp--preset--color--blush);
}

.bell-pill__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--wp--preset--color--plum);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

.bell-pill--clear {
	border-style: dashed;
}

.bell-facet {
	position: relative;
}

.bell-facet[open] > .bell-pill {
	border-color: var(--wp--preset--color--plum);
}

.bell-facet[open] > .bell-pill .bell-icon--down {
	transform: rotate(180deg);
}

.bell-facet__panel {
	position: absolute;
	left: 0;
	top: calc(100% + 8px);
	z-index: 25;
	min-width: 280px;
	max-height: 70vh;
	overflow-y: auto;
	padding: 12px 6px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	box-shadow: 0 20px 40px -20px rgb(53 18 42 / 40%);
}

/* ---- the facet rows themselves, UNCHANGED markup ------------------------- */
/* bellcorpusbr_facet_group() still emits these. Only their container moved. */
.bell-filtro__grupo + .bell-filtro__grupo {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.bell-filtro__titulo {
	margin: 0 0 8px;
	padding: 0 10px;
	font-family: var(--wp--preset--font-family--body, inherit);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.bell-filtro__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bell-filtro__lista li + li {
	margin-top: 1px;
}

.bell-filtro__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 3px;
	color: var(--wp--preset--color--plum);
	font-size: 14px;
	line-height: 1.35;
	text-decoration: none;
}

.bell-filtro__item:hover {
	background: var(--wp--preset--color--blush);
	text-decoration: none;
}

/* The box is decoration -- the control is the whole link, and its state is
   carried in aria-label, because a link cannot honestly be a checkbox. */
.bell-filtro__box {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 1px solid var(--wp--preset--color--blush-deep);
	border-radius: 3px;
	background: var(--wp--preset--color--surface);
}

.bell-filtro__item:hover .bell-filtro__box,
.bell-filtro__item:focus-visible .bell-filtro__box {
	border-color: var(--wp--preset--color--plum);
}

.bell-filtro__item.is-checked .bell-filtro__box {
	border-color: var(--wp--preset--color--plum);
	background-color: var(--wp--preset--color--plum);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.5l3 3 6-6' fill='none' stroke='%23FFFCFE' stroke-width='1.8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* Checked rows are also bolder, so the state does not rest on colour alone. */
.bell-filtro__item.is-checked .bell-filtro__nome {
	font-weight: 600;
}

.bell-filtro__nome {
	flex: 1 1 auto;
}

.bell-filtro__count {
	flex: 0 0 auto;
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* A facet that would return nothing stays visible and greyed. A list that
   changes LENGTH as boxes are ticked is disorienting, and the row still tells
   the visitor the category exists. */
.bell-filtro__item.is-dead {
	cursor: default;
	opacity: 0.4;
}

.bell-filtro__nota {
	margin: 10px 0 0;
	padding: 0 10px;
	color: var(--wp--preset--color--muted);
	font-size: 11.5px;
	line-height: 1.5;
}

/* ---- price and sort ------------------------------------------------------ */
.bell-preco {
	padding: 6px 10px 10px;
}

.bell-preco__campos {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.bell-preco__campo {
	flex: 1 1 0;
	min-width: 0;
}

.bell-preco__campo input {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--plum);
	font-family: inherit;
	font-size: 14px;
	text-align: center;
}

.bell-preco__ate {
	color: var(--wp--preset--color--muted);
}

.bell-ordenar {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bell-ordenar select {
	appearance: none;
	height: 38px;
	padding: 0 34px 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background-color: var(--wp--preset--color--surface);
	/* Inline chevron: one fewer request than an icon font, and it cannot
	   arrive after the control it belongs to. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2347233D' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	color: var(--wp--preset--color--plum);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}

.bell-ordenar__ok,
.bell-preco__ok {
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--plum);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--plum);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.bell-ordenar__ok:hover,
.bell-preco__ok:hover {
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--base);
}

.bell-vazio {
	padding: 40px 0;
	color: var(--wp--preset--color--muted);
}

/* ---- buttons ------------------------------------------------------------- */
/* .bell-btn is the general control; .bell-cta above stays the full-width
   product CTA. They are separate because the CTA carries the WhatsApp /
   care-register split that DECISIONS.md #10 requires, and a general button
   must not be able to inherit it by accident. */
.bell-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 28px;
	border: 1px solid var(--wp--preset--color--plum);
	border-radius: 4px;
	background: var(--wp--preset--color--plum);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms var(--bell-ease), border-color 150ms var(--bell-ease),
		color 150ms var(--bell-ease);
}

.bell-btn:hover {
	background: var(--wp--preset--color--plum-dark);
	border-color: var(--wp--preset--color--plum-dark);
	color: #fff;
	text-decoration: none;
}

.bell-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--plum);
}

.bell-btn--ghost:hover {
	background: var(--wp--preset--color--blush);
	border-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--plum);
}

.bell-btn--pill {
	border-radius: 999px;
}

.bell-btn--wa {
	background: var(--bell-wa);
	border-color: var(--bell-wa);
}

.bell-btn--wa:hover {
	background: var(--bell-wa-dark);
	border-color: var(--bell-wa-dark);
}

.bell-btn--care {
	background: var(--wp--preset--color--form);
	border-color: var(--wp--preset--color--form);
}

.bell-btn--care:hover {
	background: #243845;
	border-color: #243845;
}

/* ---- carregar mais ------------------------------------------------------- */
/* CUMULATIVE, so the label is honest: page/2/ renders products 1-48, not
   25-48. See the block comment on [bc_catalogo]. */
.bell-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 48px 0 32px;
}

.bell-more__count {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.bell-more .bell-btn {
	min-width: 300px;
}

.bell-more__rest {
	letter-spacing: 0.06em;
	opacity: 0.75;
}

/* ---- the two contact channels -------------------------------------------- */
.bell-band {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 48px;
}

.bell-channel {
	padding: 36px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
}

/* DEMOTED to the subsection H3 role (SYSTEM.md): this heads one of two
   contact-route CARDS inside a section, not a section itself. Playfair
   24/22/20, 500, 1.25. */
.bell-channel h2 {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--wp--preset--color--plum);
}

@media (max-width: 1199px) {
	.bell-channel h2 {
		font-size: 22px;
	}
}

@media (max-width: 600px) {
	.bell-channel h2 {
		font-size: 20px;
	}
}

.bell-channel p {
	margin: 0 0 20px;
	color: var(--wp--preset--color--muted);
	font-size: 15px;
}

.bell-channel--wa {
	border-top: 4px solid var(--bell-wa);
}

.bell-channel--care {
	border-top: 4px solid var(--wp--preset--color--form);
	border-color: var(--wp--preset--color--form-border);
	background: var(--wp--preset--color--form-soft);
}

.bell-channel--care h2 {
	color: var(--wp--preset--color--form);
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 999px) {
	.bell-pagehead__h1 {
		font-size: 44px;
	}
}

@media (max-width: 860px) {
	/* The bar scrolls horizontally below this width, and a panel whose
	   containing block is INSIDE that scrolling box is clipped by it. So the
	   facet stops being a containing block and the panel positions against
	   the sticky bar itself, which sits outside the scroller: unclipped, and
	   always directly under the bar. It used to be `fixed` at top 64px, which
	   put it UNDER the header (z-index 30 over the bar's 20) whenever the
	   page was not scrolled. */
	.bell-bar__filters {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.bell-bar__filters::-webkit-scrollbar {
		display: none;
	}

	.bell-facet {
		position: static;
	}

	.bell-facet__panel {
		position: absolute;
		left: var(--bell-pad);
		right: var(--bell-pad);
		top: calc(100% + 8px);
		min-width: 0;
	}

	.bell-bar__count {
		display: none;
	}

	.bell-band {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.bell-pagehead__h1 {
		font-size: 32px;
	}

	.bell-tile {
		flex-basis: 108px;
	}

	.bell-tiles__row {
		margin: 0 calc(-1 * var(--bell-pad));
		padding: 0 var(--bell-pad) 6px;
	}

	.bell-bar__row {
		min-height: 54px;
	}

	.bell-pill {
		height: 36px;
		padding: 0 12px;
	}

	.bell-ordenar select {
		height: 36px;
		font-size: 12.5px;
	}

	.bell-channel {
		padding: 24px 18px;
	}

	.bell-more .bell-btn {
		min-width: 0;
		width: 100%;
	}
}

/* ==================================================================== */
/* THE CARE REGISTER -- DECISIONS.md #19.                               */
/*                                                                      */
/* One brand, two registers. Everything keeps plum, Playfair and Inter, */
/* so it stays unmistakably the same company. What changes on the 12     */
/* regulated products is the SURFACE: blush gives way to a cool slate.   */
/*                                                                      */
/* The split is driven by bellcorpusbr_is_regulated(), which reads the   */
/* same derived sem_whatsapp set as the CTA routing and the therapeutic  */
/* linha. So the colour, the contact route and the category can never    */
/* disagree about which products these are -- and a visitor sees "this   */
/* is a different kind of product" before reading a word.                */
/*                                                                      */
/* #12 and #13 both recorded the worry that the inherited US fashion     */
/* identity makes a long-established manufacturer read as a lingerie     */
/* boutique on exactly the post-surgical pages where credibility matters */
/* most, and both overruled it on cost. This is the cheap answer to it.  */
/* ==================================================================== */

/* ---- the CTA split, which was previously invisible ----------------- */
/* Both routes used to be plum. While BELLCORPUSBR_WHATSAPP is empty the
   everyday fallback (.bell-cta--form) and the regulated route
   (.bell-cta--care) therefore rendered IDENTICALLY -- so the one visual
   difference between a product you may message on WhatsApp and one you may
   not was a changed href. The care route is slate now. */
.bell-cta--care {
	border-color: var(--wp--preset--color--form);
	background: var(--wp--preset--color--form);
}

/* ---- product page ------------------------------------------------- */
.bell-pdp--reg .bell-gallery figure,
.bell-pdp--reg .bell-gallery--empty {
	background: var(--wp--preset--color--form-soft);
}

.bell-pdp--reg .bell-buy__eyebrow,
.bell-pdp--reg .bell-buy__price--ask {
	color: var(--wp--preset--color--form);
}

.bell-pdp--reg input:checked + .bell-chip {
	background: var(--wp--preset--color--form);
	border-color: var(--wp--preset--color--form);
}

.bell-pdp--reg input:checked + .bell-swl .bell-sw,
.bell-pdp--reg input:focus-visible + .bell-swl .bell-sw {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp--preset--color--form);
}

.bell-pdp--reg .bell-assure .bell-icon {
	color: var(--wp--preset--color--form);
}

.bell-pdp--reg .bell-gal--first .bell-gal__trigger::after {
	background: var(--wp--preset--color--form);
}

.bell-pdp--reg .bell-chip {
	border-color: var(--wp--preset--color--form-border);
	background: var(--wp--preset--color--form-soft);
}

.bell-pdp--reg .bell-facts dt {
	color: #4A6270;
}

.bell-pdp--reg .bell-facts > div {
	border-color: var(--wp--preset--color--form-border);
}

/* The post-surgical notice reads as guidance, not as a warning: slate rather
   than the blush it inherited, and it keeps the 4px left rule so it is still
   legible as a callout without colour. */
.bell-pdp--reg .bell-alert {
	border-color: var(--wp--preset--color--form-border);
	border-left-color: var(--wp--preset--color--form);
	background: var(--wp--preset--color--form-soft);
	color: #22323C;
}

/* ---- catalogue card ------------------------------------------------ */
/* The regulated card's photo frame sits on the care surface rather than the
   studio-backdrop ground, so the register is visible before the badge is
   read. The badge itself is .bell-badge--care, declared with the card. */
.bell-card--reg .bell-card__media {
	background: var(--wp--preset--color--form-soft);
}

.bell-card--reg .bell-card__price {
	color: var(--wp--preset--color--form);
}

.bell-card--reg .bell-sw:hover,
.bell-card--reg .bell-sw:focus-visible {
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp--preset--color--form);
}

.bell-card--reg .bell-card__media:focus-visible {
	outline-color: var(--wp--preset--color--form);
}

/* The WORDS are the accessible half of the signal: the register is also a
   colour, and colour alone is not a label. Under Direction A they moved from
   a pill under the title into `.bell-badge--care`, top-left ON the photograph
   -- so the label is read at the same moment the slate ground is seen,
   instead of a line and a half later.  */

/* ---- the therapeutic linha archive --------------------------------- */
/* The register belongs to the LINE, not only to a product page. */
.bell-reg-page .bell-filtro__item.is-checked .bell-filtro__box {
	border-color: var(--wp--preset--color--form);
	background-color: var(--wp--preset--color--form);
}

.bell-reg-page .bell-cats__item.is-current,
.bell-reg-page .bell-filtro__item.is-checked {
	color: var(--wp--preset--color--form);
}

/* Every card on that archive is regulated by definition, so the per-card
   badge would repeat 12 times. One statement at the top of the page instead. */
.bell-reg-page .bell-badge--care {
	display: none;
}

/* The crumb band and the page head take the care register too, so the line
   is recognisable before a single card is read. */
.bell-reg-page .bell-crumb,
.bell-reg-page .bell-crumb a {
	color: #4A6270;
}

.bell-reg-page .bell-pagehead__h1 {
	color: var(--wp--preset--color--form);
}

.bell-reg-page .bell-bar {
	border-color: var(--wp--preset--color--form-border);
}

.bell-reg-page .bell-pill--on {
	border-color: var(--wp--preset--color--form);
	background: var(--wp--preset--color--form-soft);
}

.bell-reg-page .bell-pill__n {
	background: var(--wp--preset--color--form);
}

/* ---- related products --------------------------------------------- */
.bell-relacionados {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.bell-relacionados__titulo {
	margin: 0 0 24px;
}

.bell-pdp--reg + .bell-relacionados {
	border-top-color: var(--wp--preset--color--form-border);
}

@media (max-width: 600px) {
	.bell-relacionados {
		margin-top: 44px;
		padding-top: 28px;
	}
}

/* Home page sections -- supports theme/bellcorpusbr/templates/front-page.html
   Ported from mocks/modern-home.html (the approved design). Classes are all
   prefixed bell-home- so they cannot collide with the catalogue/PDP/contact
   classes already in style.css. This file is NOT enqueued on its own -- the
   maintainer merges it into style.css. ASCII only, by repo contract. */

/* hero */
.bell-home-eyebrow-invert {
	color: rgba(255, 255, 255, 0.78);
}

.bell-home-hero-photo {
	position: relative;
}

.bell-home-hero-photo::before {
	content: "";
	position: absolute;
	inset: 18px -18px -18px 18px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	pointer-events: none;
}

.bell-home-hero-photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 12%;
}

.bell-home-hero-photo figcaption {
	position: absolute;
	left: 16px;
	bottom: 16px;
	margin: 0;
	background: rgba(53, 18, 42, 0.86);
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.06em;
	padding: 8px 12px;
}

.bell-home-btn-light {
	background: #fff;
	color: var(--wp--preset--color--plum-dark);
	border-color: #fff;
}

.bell-home-btn-light:hover {
	background: var(--wp--preset--color--blush);
	color: var(--wp--preset--color--plum-dark);
}

.bell-home-btn-outline-light {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.55);
}

.bell-home-btn-outline-light:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

/* facts strip (inside the hero, on plum-dark) */
.bell-home-facts {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	margin-top: 40px;
}

.bell-home-facts .wp-block-column {
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: 22px;
	padding-bottom: 4px;
}

.bell-home-facts .wp-block-column:first-child {
	border-left: 0;
}

.bell-home-fact-num {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 34px;
	color: #fff;
}

.bell-home-fact-label {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 600px) {
	.bell-home-facts .wp-block-column {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		padding-top: 18px;
	}
	.bell-home-facts .wp-block-column:first-child {
		border-top: 0;
	}
}

/* section head "more" link */
.bell-home-more {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--plum);
	border-bottom: 1px solid var(--wp--preset--color--plum);
	padding-bottom: 3px;
	white-space: nowrap;
}

/* linhas -- "para quem e a peca" */
.bell-home-linha {
	position: relative;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
}

.bell-home-linha img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
	margin: 0;
}

.bell-home-linha-count {
	display: block;
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--plum);
}

.bell-home-linha--form {
	border-color: var(--wp--preset--color--form-border);
}

.bell-home-linha--form .bell-home-linha-count {
	color: var(--wp--preset--color--form);
}

.bell-home-linha-ribbon {
	position: absolute;
	z-index: 1;
	top: 14px;
	left: 14px;
	margin: 0;
	background: var(--wp--preset--color--form);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 7px 10px;
	border-radius: 4px;
}

/* sizes ladder */
.bell-home-sizes {
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.bell-home-ladder {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bell-home-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bell-home-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	font-size: 14px;
}

.bell-home-chip--plus {
	border-color: var(--wp--preset--color--plum);
	background: var(--wp--preset--color--blush);
}

.bell-home-chip--made {
	border-style: dashed;
	color: var(--wp--preset--color--ink);
}

.bell-home-ladder-note {
	margin: 0;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

.bell-home-ladder-legend {
	display: flex;
	justify-content: space-between;
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.bell-home-ladder-legend p {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 420px) {
	.bell-home-chip {
		min-width: 48px;
		height: 40px;
		padding: 0 10px;
		font-size: 13px;
	}
}

/* how it works */
.bell-home-step-num {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 40px;
	color: var(--wp--preset--color--blush-deep);
}

/* factory band */
.bell-home-factory-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 28px;
}

.bell-home-factory-list li {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	padding-top: 16px;
}

@media (max-width: 600px) {
	.bell-home-factory-list {
		grid-template-columns: 1fr;
	}
}

/* contact channels */
.bell-home-channel {
	height: 100%;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 34px;
}

.bell-home-channel--form {
	border-color: var(--wp--preset--color--form-border);
	background: var(--wp--preset--color--form-soft);
}

/* ---- headings on the dark bands ----------------------------------- */
/* theme.json sets `styles.elements.heading.color` to plum globally, which
   wins over the colour a group passes down to its children. So the home
   page's plum-dark hero rendered a plum H1 ON a plum-dark background -- the
   headline was there, at full size, and essentially unreadable. It shipped
   that way because block markup cannot be rendered without WordPress, so the
   only way to catch it was to look at the page.
   Scoped to the background classes rather than to a section class, so any
   future dark band inherits the fix instead of repeating the bug. */
.has-plum-background-color h1,
.has-plum-background-color h2,
.has-plum-background-color h3,
.has-plum-background-color h4,
.has-plum-dark-background-color h1,
.has-plum-dark-background-color h2,
.has-plum-dark-background-color h3,
.has-plum-dark-background-color h4,
.has-ink-background-color h1,
.has-ink-background-color h2,
.has-ink-background-color h3,
.has-ink-background-color h4 {
	color: var(--wp--preset--color--base);
}

/* The image caption in the hero sits on the same dark band. */
.has-plum-background-color .wp-element-caption,
.has-plum-dark-background-color .wp-element-caption {
	color: var(--wp--preset--color--blush-deep);
}

/* ===========================================================================
   DIRECTION A -- HEADER AND NAVIGATION.  DECISIONS.md #22, SYSTEM.md section
   "Page architecture" item 2. Markup comes from [bc_header] in functions.php.

   THE DEFECT THIS FIXES. `wp:navigation` with no menu assigned lists every
   PAGE alphabetically, so the live primary nav was four legal pages and no
   route into the catalogue. It also wrapped to THREE ROWS on a 768px tablet,
   measured at 228px of header before any content.

   Every number below is from SYSTEM.md, which read them back out of a browser
   with getBoundingClientRect() rather than estimating them.
   =========================================================================== */

.bell-icon {
	width: 18px;
	height: 18px;
	flex: none;
}

.bell-icon--down {
	width: 10px;
	height: 6px;
}

/* T2 structural label. Hoisted OUT of the mobile drawer's media query: the
   heading is in the DOM at every width and only the DRAWER is mobile, so
   scoping its type to a breakpoint made it a tier member that stopped being
   one above 999px. verify-type.py caught it at 1440. */
.bell-drawer__h {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ---- announcement strip -------------------------------------------------- */
/* T2, SYSTEM.md's exhaustive eyebrow-tier assignment names this role
   ".bell-anuncio", a selector that does not exist anywhere in this theme --
   the announcement strip has always been .bell-strip. Same role, applied
   under the class that is actually in the markup. */
.bell-strip {
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* ---- the header row ------------------------------------------------------ */
.bell-hdr {
	position: relative;
	z-index: 30;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Three columns, not a flex row with space-between: the nav has to sit at the
   OPTICAL centre of the header regardless of how wide the logo or the tools
   are, and space-between centres it only when those two happen to match. */
.bell-hdr__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	min-height: 74px;
	max-width: var(--bell-wrap);
	margin: 0 auto;
	padding: 0 var(--bell-pad);
}

.bell-logo {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 27px;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--wp--preset--color--plum);
	text-decoration: none;
}

.bell-logo:hover {
	text-decoration: none;
}

.bell-logo small {
	display: block;
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ---- nav ----------------------------------------------------------------- */
.bell-nav {
	position: relative;
	display: flex;
	justify-content: center;
}

/* DIRECT CHILD, not a descendant. `.bell-nav ul` also matches the three
   nested lists inside the mega menu, which lives inside this nav -- so the
   category list became a horizontal flex row 1100px wide, blew the grid track
   sizing out, and pushed the panel past the right edge of the page. */
.bell-nav > ul {
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* static, so the mega menu positions against .bell-nav and can be wider than
   the item that opens it. */
.bell-nav__item {
	position: static;
	margin: 0;
}

.bell-nav__link {
	display: inline-block;
	padding: 26px 0 24px;
	border-bottom: 2px solid transparent;
	color: var(--wp--preset--color--plum);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.bell-nav__link:hover,
.bell-nav__item:focus-within > .bell-nav__link,
.bell-nav__link[aria-current="page"] {
	text-decoration: none;
	border-bottom-color: var(--wp--preset--color--plum);
}

/* The care register reaches the NAV, not only the product page: the label for
   the post-surgical line reads in slate wherever it appears. DECISIONS #19. */
.bell-nav__link--care {
	color: var(--wp--preset--color--form);
}

.bell-nav__link--care:hover,
.bell-nav__link--care[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--form);
}

/* ---- mega menu ----------------------------------------------------------- */
/* Opens on :hover AND on :focus-within. Spanx's equivalent is hover-only,
   which gives a keyboard user nothing at all (measured, research/spanx). The
   `visibility` transition is delayed on the way OUT and not on the way in, so
   the panel is not focusable while invisible. */
.bell-mega {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, -6px);
	width: min(980px, calc(100vw - 48px));
	max-width: calc(100vw - 48px);
	padding: 32px;
	display: grid;
	/* minmax(0, Xfr), NOT a bare Xfr. `1fr` is shorthand for `minmax(auto,
	   1fr)`, and that auto floor is the column's MIN-CONTENT width -- so a
	   column whose content refuses to compress stops behaving as a fraction
	   and simply takes the room it wants.

	   That is how the overflow above became a PAGE-WIDE one rather than a
	   clipped panel: the declared `1.1fr 1fr 1fr 220px` computed to
	   1110px 329px 489px 220px, a 2148px grid inside a 980px box, and the menu
	   ran 1026px past the right edge of the viewport. An absolutely positioned
	   element contributes to scrollWidth even while `visibility: hidden`, so
	   the whole page scrolled sideways with the menu shut.

	   The selector bug is fixed; this stays because it is what CONTAINS the
	   next piece of stubborn content instead of letting it escape the panel. */
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) 220px;
	gap: 32px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-top: 0;
	box-shadow: 0 24px 48px -24px rgb(53 18 42 / 35%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 200ms var(--bell-ease), transform 200ms var(--bell-ease),
		visibility 0s linear 200ms;
}

.bell-nav__item:hover > .bell-mega,
.bell-nav__item:focus-within > .bell-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

.bell-mega__h {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.bell-mega__h2 {
	margin-top: 22px;
}

.bell-mega ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bell-mega li {
	margin: 0;
}

.bell-mega ul a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	font-size: 14px;
	text-decoration: none;
}

.bell-mega ul a span {
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.bell-mega__care {
	color: var(--wp--preset--color--form);
}

.bell-mega__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bell-mega__chips span {
	padding: 4px 8px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	font-size: 12px;
}

.bell-mega__chips .is-plus {
	background: var(--wp--preset--color--blush);
	border-color: var(--wp--preset--color--blush-deep);
}

.bell-mega__chips .is-made {
	border-style: dashed;
}

.bell-mega__tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--photo);
}

.bell-mega__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 10%;
}

.bell-mega__tile img.is-contain {
	object-fit: contain;
	padding: 10px;
}

.bell-mega__tile figcaption {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	padding: 8px 10px;
	background: rgb(53 18 42 / 86%);
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
}

/* ---- tools --------------------------------------------------------------- */
.bell-hdr__tools {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
}

.bell-search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	min-width: 200px;
	padding: 0 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

.bell-search input {
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--plum);
	font: inherit;
	outline: none;
}

.bell-search .bell-icon {
	width: 16px;
	height: 16px;
}

.bell-search:focus-within {
	border-color: var(--wp--preset--color--plum);
}

/* The site-level WhatsApp pill. It renders on all 70 pages including the 12
   regulated ones -- the owner's call, DECISIONS.md #22. It carries no SKU and
   no product name, so it is a contact control rather than product messaging.
   The PRODUCT-level WhatsApp controls stay suppressed on those pages. */
.bell-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--bell-wa);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 150ms var(--bell-ease);
}

.bell-wa:hover {
	background: var(--bell-wa-dark);
	color: #fff;
	text-decoration: none;
}

.bell-wa .bell-icon {
	width: 16px;
	height: 16px;
}

.bell-menubtn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--plum);
	cursor: pointer;
}

.bell-menubtn .bell-icon {
	width: 20px;
	height: 20px;
}

/* ---- the mobile drawer --------------------------------------------------- */
/* A checkbox plus a sibling selector, not JavaScript -- the same mechanism the
   catalogue's filter disclosure already uses. The input stays FOCUSABLE and
   keeps its label, so the control is reachable by keyboard; only its box is
   hidden. Hiding it with display:none would take it out of the tab order and
   the menu would be unreachable without a pointer. */
.bell-nav__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bell-drawer,
.bell-scrim {
	display: none;
}

.bell-nav__toggle:focus-visible ~ .bell-hdr__row .bell-menubtn--open {
	outline: 2px solid var(--wp--preset--color--plum);
	outline-offset: 2px;
}

/* ---- responsive ---------------------------------------------------------- */
/* THE TWO BREAKPOINTS BELOW ARE MEASURED, not inherited. SYSTEM.md collapses
   the mock at 860 and the plan asked for ~1100; both are wrong for the real
   nav, which carries six Portuguese labels rather than the mock's six English
   ones. Measured on the live page, watching where .bell-hdr__tools crosses the
   right edge:

       1200  full-size nav fits          overflow 0
       1101  full-size nav does NOT      overflow 93
       1090  shrunk nav fits             overflow 0
        960  shrunk nav, 7px to spare    overflow 0
        900  shrunk nav does NOT         overflow 53

   So the shrink starts at 1199 and the drawer takes over below 1000, which
   leaves ~24px of margin at the narrowest width that still shows the nav
   rather than the 7px that 960 would have. */
@media (max-width: 1199px) {
	:root {
		--bell-pad: 24px;
	}

	.bell-hdr__row {
		grid-template-columns: auto 1fr auto;
	}

	.bell-nav ul {
		gap: 18px;
	}

	.bell-nav__link {
		font-size: 11.5px;
	}

	.bell-search {
		min-width: 0;
		width: 150px;
	}

	.bell-wa span {
		display: none;
	}

	.bell-wa {
		width: 40px;
		padding: 0;
		justify-content: center;
	}
}

/* Below 1000px the six labels stop fitting beside the logo and the tools --
   see the measurements above. This also clears the defect the critique found
   by a wide margin: the old nav wrapped to THREE ROWS on a 768px tablet and
   stood 228px tall before any content. */
@media (max-width: 999px) {
	.bell-hdr__row {
		grid-template-columns: auto 1fr;
		min-height: 64px;
	}

	.bell-nav,
	.bell-search {
		display: none;
	}

	.bell-menubtn {
		display: inline-flex;
	}

	.bell-wa {
		width: 44px;
		height: 44px;
	}

	.bell-wa .bell-icon {
		width: 20px;
		height: 20px;
	}

	.bell-drawer {
		display: block;
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 40;
		width: min(360px, 88vw);
		padding: 20px;
		overflow-y: auto;
		background: var(--wp--preset--color--surface);
		box-shadow: -20px 0 40px -20px rgb(53 18 42 / 40%);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 240ms var(--bell-ease), visibility 0s linear 240ms;
	}

	.bell-nav__toggle:checked ~ .bell-drawer {
		transform: translateX(0);
		visibility: visible;
		transition-delay: 0s;
	}

	.bell-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 39;
		background: rgb(53 18 42 / 38%);
		opacity: 0;
		visibility: hidden;
		transition: opacity 240ms var(--bell-ease), visibility 0s linear 240ms;
	}

	.bell-nav__toggle:checked ~ .bell-scrim {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	.bell-drawer__top {
		display: flex;
		justify-content: flex-end;
	}

	.bell-drawer__h {
		margin: 22px 0 8px;
	}

	.bell-drawer ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.bell-drawer li a {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 0;
		border-bottom: 1px solid var(--wp--preset--color--border);
		font-size: 15px;
		text-decoration: none;
	}

	.bell-drawer li a span {
		color: var(--wp--preset--color--muted);
		font-size: 12px;
	}

	/* The mega menu is a pointer affordance. On a touch screen the first tap
	   would open it and swallow the link, so it is removed rather than left to
	   fight the drawer. */
	.bell-mega {
		display: none;
	}
}

@media (max-width: 600px) {
	:root {
		--bell-pad: 12px;
	}

	.bell-strip__more {
		display: none;
	}

	.bell-logo {
		font-size: 22px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.bell-mega,
	.bell-drawer,
	.bell-scrim {
		transition-duration: 0.01ms;
	}
}

/* ===========================================================================
   HOME -- DIRECTION A hero and category strip. SYSTEM.md "Home" items 3-4.
   Markup from [bc_home_topo].

   The hero is a STATIC SPLIT, not a carousel: a manufacturer selling by
   WhatsApp has one message, not five campaigns, and the hero's job is to
   route. Its headline is real TEXT -- the reference's is an image, which costs
   the H1, the SEO and the screen reader.
   =========================================================================== */

/* ---- section rhythm, SYSTEM.md "Spacing, radii, borders, shadows" ------- */
/* The six full-width front-page.html sections each hardcoded an inline
   padding-top/padding-bottom of 80px (56px for one), with no reduction at
   any width -- an unbroken column of identical gaps that swallowed the
   alternating base/surface/plum backgrounds meant to tell one section from
   the next. Horizontal padding stays inline per section; this class governs
   only the vertical rhythm, and only it is responsive. */
.bell-section {
	padding-top: 48px;
	padding-bottom: 48px;
}

@media (max-width: 600px) {
	.bell-section {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}

.bell-hero {
	display: grid;
	grid-template-columns: 5fr 7fr;
	background: var(--wp--preset--color--blush);
}

.bell-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px 56px 56px;
}

.bell-hero__eyebrow {
	margin: 0 0 18px;
	color: var(--wp--preset--color--ink-soft);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.20em;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.bell-hero__eyebrow {
		font-size: 12px;
	}
}

.bell-hero__h1 {
	margin: 0 0 20px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 68px;
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--plum);
}

.bell-hero__lead {
	max-width: 46ch;
	margin: 0 0 30px;
	font-size: 18px;
	line-height: 1.55;
}

.bell-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 26px;
}

.bell-hero__note {
	max-width: 44ch;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 1.5;
}

/* ---- the category strip -------------------------------------------------- */
.bell-catstrip {
	padding: 32px 0 24px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.bell-catstrip__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin-bottom: 18px;
}

/* ---- THE ONE SECTION H2, SYSTEM.md "Type scale". Three identities
   (six block H2s in front-page.html, .bell-catstrip__h2,
   .bell-relacionados__titulo) collapsed into one: Playfair 38/32/28,
   400, 1.10, -0.03em (DECISIONS #31). .bell-h2 is the class added to the six block
   headings (front-page.html); the other two keep their own selectors
   for their context-specific margin only. ------------------------- */
.bell-h2,
.bell-catstrip__h2,
.bell-relacionados__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 1199px) {
	.bell-h2,
	.bell-catstrip__h2,
	.bell-relacionados__titulo {
		font-size: 32px;
	}
}

@media (max-width: 600px) {
	.bell-h2,
	.bell-catstrip__h2,
	.bell-relacionados__titulo {
		font-size: 28px;
	}
}

.bell-catstrip__h2 {
	margin: 0;
}

.bell-seelink {
	padding-bottom: 2px;
	border-bottom: 1px solid var(--wp--preset--color--plum);
	color: var(--wp--preset--color--plum);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
}

.bell-seelink:hover {
	color: var(--wp--preset--color--plum-dark);
	text-decoration: none;
}

.bell-catstrip .bell-tiles {
	padding-bottom: 0;
}

@media (max-width: 860px) {
	.bell-hero {
		grid-template-columns: 1fr;
	}

	/* Copy FIRST on a phone (UX review 2026-09-24 item 8): the old order put
	   the photograph above it and the H1 landed at y=783 on an 844px screen. */
	.bell-hero__copy {
		padding: 28px 24px 24px;
	}
}

@media (max-width: 1100px) {
	.bell-hero__h1 {
		font-size: 52px;
	}

	.bell-hero__copy {
		padding: 44px 36px;
	}
}

@media (max-width: 600px) {
	.bell-hero__h1 {
		font-size: 38px;
	}

	.bell-hero__lead {
		font-size: 16px;
	}

	.bell-hero__ctas .bell-btn {
		flex: 1 1 100%;
	}
}


/* ==========================================================================
   GUIA -- the article section (DECISIONS.md #27). Labels reuse the FROZEN
   tiers of mocks/dirA/SYSTEM.md exactly (T1 13/600/0.20em, T2 11.5/500/0.12em)
   rather than inventing a fourth.
   ========================================================================== */
.bell-guia__lede {
	color: var(--wp--preset--color--muted);
	font-size: 1.125rem;
	line-height: 1.6;
	max-width: 640px;
}
.bell-guia__head { margin-bottom: 28px; }

/* category pills */
.bell-guia .bell-guia__cats {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 0 0 36px;
}
.bell-guia__cats li { margin: 0; }
.bell-guia__cats a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--plum-dark);
	font-size: 0.875rem;
	text-decoration: none;
}
.bell-guia__cats a:hover,
.bell-guia__cats .current-cat a {
	background: var(--wp--preset--color--plum);
	border-color: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--base);
}

/* the card grid */
.bell-guia .bell-guia__grid {
	gap: 40px 28px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.bell-guia__grid > li { margin: 0; }
.bell-guia__thumb { margin: 0 0 14px; overflow: hidden; border-radius: 10px; background: var(--wp--preset--color--photo); }
.bell-guia__thumb img { transition: transform .4s ease; }
@media (hover: hover) and (pointer: fine) {
	.bell-guia__grid > li:hover .bell-guia__thumb img { transform: scale(1.04); }
}
.bell-guia__eyebrow {
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 6px;
}
.bell-guia__eyebrow a { color: inherit; text-decoration: none; }
.bell-guia__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	line-height: 1.25;
	margin: 0 0 8px;
}
.bell-guia__title a { color: var(--wp--preset--color--plum-dark); text-decoration: none; }
.bell-guia__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bell-guia__excerpt { color: var(--wp--preset--color--muted); font-size: 0.9375rem; line-height: 1.55; }
.bell-guia__excerpt .wp-block-post-excerpt__more-text { display: none; }

@media (max-width: 1024px) {
	.bell-guia .bell-guia__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.bell-guia .bell-guia__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.bell-guia.wp-block-group { padding-left: 20px !important; padding-right: 20px !important; }
}

/* the article */
.bell-guia--single .bell-guia__eyebrow {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.20em;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 14px;
}
.bell-guia__h1 { margin: 0 0 14px; }
.bell-guia--single .bell-guia__lede { margin: 0 0 10px; }
.bell-guia--single .bell-guia__lede .wp-block-post-excerpt__more-text { display: none; }
.bell-guia__date { color: var(--wp--preset--color--ink-soft); font-size: 0.875rem; margin-bottom: 28px; }
.bell-guia__hero { margin: 0 0 40px; }
.bell-guia__hero img { border-radius: 10px; }
.bell-guia__credit {
	margin-top: 8px;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-soft);
	text-align: left;
}
.bell-guia__credit a { color: inherit; }
/* 17/1.75 reading size kept (owner, 2026-09-24); the colour is INK, per #31. */
.bell-guia__body { font-size: 1.0625rem; line-height: 1.75; color: var(--wp--preset--color--ink); }
/* The frozen "section H2" row: 38 / 32 / 28, 400, 1.10, -0.03em. */
.bell-guia__body h2 { font-family: var(--wp--preset--font-family--display); font-size: 38px; font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; margin: 48px 0 14px; }
@media (max-width: 999px) { .bell-guia__body h2 { font-size: 32px; } }
@media (max-width: 600px) { .bell-guia__body h2 { font-size: 28px; } }
.bell-guia__body h3 { font-size: 1.1875rem; line-height: 1.35; margin: 32px 0 10px; }
.bell-guia__body a { color: var(--wp--preset--color--plum); text-underline-offset: 3px; }
.bell-guia__body ul, .bell-guia__body ol { padding-left: 1.3em; }
.bell-guia__body li { margin-bottom: 6px; }
.bell-guia__body blockquote {
	margin: 32px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--wp--preset--color--blush-deep);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--plum);
}
.bell-guia__notice {
	margin: 0 0 32px;
	padding: 16px 20px;
	border-radius: 8px;
	background: var(--wp--preset--color--form-soft);
	border: 1px solid var(--wp--preset--color--form-border);
	color: var(--wp--preset--color--form);
	font-size: 0.9375rem;
	line-height: 1.55;
}
/* Fontes -- written into the content by scripts/build-guia.py */
.bell-guia__fontes {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}
.bell-guia__fontes h2 { font-size: 1.125rem; margin: 0 0 12px; }
.bell-guia__fontes li { margin-bottom: 10px; }
.bell-guia__back { margin-top: 48px; font-size: 0.9375rem; }
.bell-guia__back a { color: var(--wp--preset--color--plum); }

/* ===========================================================================
   UX REVIEW 2026-09-24 -- DECISIONS.md #30, mocks/ux-2026-09-24/SPEC.md.
   Item numbers refer to that spec. Boxes change here, never the frozen type
   scale: every font-size below is a value SYSTEM.md already assigns.
   =========================================================================== */

/* ---- 11: the hero's media fills the right column ------------------------- */
.bell-hero__media {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 4px;
	min-height: 620px;
	background: var(--wp--preset--color--photo);
}

.bell-hero__photo,
.bell-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
}

@media (max-width: 860px) {
	.bell-hero__media {
		min-height: 0;
		height: 300px;
	}
}

/* ---- 2: controls named by where they go --------------------------------- */
/* The header pill while it opens the FORM: plum outline, not WhatsApp green. */
.bell-hdr__tools--form .bell-wa {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--plum);
	color: var(--wp--preset--color--plum);
}

.bell-hdr__tools--form .bell-wa:hover {
	background: var(--wp--preset--color--blush);
	color: var(--wp--preset--color--plum);
}

.bell-quick--form {
	color: var(--wp--preset--color--plum);
}

/* ---- 7: search on a phone ------------------------------------------------ */
.bell-hdr__msearch {
	display: none;
}

@media (max-width: 999px) {
	.bell-hdr__msearch {
		display: block;
		padding: 0 16px 12px;
		background: var(--wp--preset--color--surface);
	}

	.bell-hdr__row .bell-search {
		display: none;
	}
}

.bell-search--wide {
	display: flex;
	width: 100%;
	max-width: none;
}

.bell-search--wide input {
	width: 100%;
	min-height: 44px;
}

/* ---- 12, 13: the card ---------------------------------------------------- */
.bell-card__eyebrow b {
	color: var(--wp--preset--color--plum);
	font-weight: 700;
}

/* Up to three lines, so "bojo liso" and "bojo rendado" are both readable. */
.bell-card__name {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* A 44px hit area around the same-looking 20px swatch and pill. */
.bell-sw {
	position: relative;
}

.bell-card__sw {
	gap: 12px;
}

.bell-sw::after {
	content: "";
	position: absolute;
	inset: -12px -6px;
}

.bell-quick::after {
	content: "";
	position: absolute;
	inset: -5px;
}

.bell-quick {
	position: absolute;
}

/* ---- 20: strips keep a gutter on a phone -------------------------------- */
@media (max-width: 600px) {
	.bell-tiles__row {
		scroll-padding-inline: 16px;
		padding-inline: 16px;
	}
}

/* ---- 10: the home page, denser ------------------------------------------ */
/* The three linha cards become horizontal: photo left, words right. */
.bell-home-linha {
	display: grid;
	grid-template-columns: 132px 1fr;
	height: 100%;
}

.bell-home-linha .wp-block-image {
	grid-row: 1 / span 2;
	margin: 0;
}

.bell-home-linha .wp-block-image a,
.bell-home-linha .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 176px;
	object-fit: cover;
	object-position: 50% 15%;
}

.bell-home-linha-ribbon {
	grid-column: 2;
	justify-self: start;
	margin: 14px 0 0 22px;
	position: static;
}

.bell-home-linha > .wp-block-group {
	grid-column: 2;
	padding: 18px 20px !important;
	align-self: center;
}

@media (max-width: 781px) {
	.wp-block-columns:has(> .wp-block-column > .bell-home-linha) {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		margin-inline: -16px;
		padding-inline: 16px;
		scrollbar-width: none;
	}

	.wp-block-columns:has(> .wp-block-column > .bell-home-linha) > .wp-block-column {
		flex: 0 0 84% !important;
		scroll-snap-align: start;
	}

	.bell-home-linha {
		grid-template-columns: 104px 1fr;
	}

	.bell-home-linha .wp-block-image img {
		min-height: 150px;
	}
}

/* The three steps: a list, not three tall boxes. */
.bell-home-steps > .wp-block-column > .wp-block-group {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	padding: 20px 0 !important;
	border-width: 1px 0 0 !important;
	background: transparent !important;
}

.bell-home-steps .bell-home-step-num {
	grid-row: 1 / span 2;
	margin: 0;
	font-size: 34px;
	line-height: 1;
}

.bell-home-steps h3 {
	margin: 0 0 6px !important;
}

@media (max-width: 781px) {
	.bell-home-steps {
		gap: 0 !important;
	}

	.bell-home-steps > .wp-block-column > .wp-block-group {
		padding: 16px 0 !important;
	}
}

/* ---- 4: the published size examples -------------------------------------- */
.bell-exemplos {
	margin-top: 20px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	overflow: hidden;
}

.bell-exemplos table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.bell-exemplos th,
.bell-exemplos td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
}

.bell-exemplos th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bell-exemplos td:last-child {
	font-weight: 600;
}

.bell-exemplos__nota {
	margin: 0;
	padding: 10px 14px 12px;
	color: var(--wp--preset--color--muted);
	font-size: 12.5px;
	line-height: 1.5;
}

.bell-comoescolher .bell-exemplos {
	margin: 10px 0;
}

/* ---- 1, 3, 5, 9, 16: the product page ----------------------------------- */
.bell-echo {
	display: none;
	margin-left: 4px;
	color: var(--wp--preset--color--plum);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
}

.bell-sum .bell-echo {
	margin-left: 0;
	font-size: inherit;
	letter-spacing: 0;
}

.bell-sum {
	margin: 4px 0 14px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--wp--preset--color--blush);
	font-size: 14px;
	line-height: 1.45;
}

.bell-chip--plus {
	background: var(--wp--preset--color--blush);
	border-color: var(--wp--preset--color--blush-deep);
}

.bell-detalhes {
	margin-top: 18px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
}

.bell-detalhes > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: 0 16px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	list-style: none;
}

.bell-detalhes > summary::-webkit-details-marker {
	display: none;
}

.bell-detalhes > summary::after {
	content: "+";
	color: var(--wp--preset--color--muted);
	font-size: 20px;
}

.bell-detalhes[open] > summary::after {
	content: "\2212";
}

.bell-detalhes > .bell-facts,
.bell-detalhes > .bell-assure {
	margin: 0 16px 16px;
}

.bell-stickybar {
	display: none;
}

/* 18: a contained photograph at its own ratio -- no frame, no grey band. */
.bell-gallery {
	align-items: start;
}

.bell-gallery figure.bell-gal--own img.is-contain {
	padding: 0;
	object-fit: contain;
}

@media (max-width: 600px) {
	/* 5: sizes WRAP again -- EG50 to EG56 and "Sob medida" were off-screen
	   to the right of a one-row scroller. Four to a row. */
	.bell-chips {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		overflow: visible;
		margin: 0;
		padding: 0;
	}

	.bell-chip {
		min-width: 0;
		height: 44px;
		padding: 0 4px;
	}

	/* 9: the gallery is FULL-BLEED, one photograph per swipe. */
	.bell-gallery {
		gap: 0;
		margin: 0 calc(-1 * var(--bell-pad));
		padding: 0;
	}

	.bell-gallery figure {
		flex: 0 0 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
	}

	/* 9: price and CTA stay under the thumb. */
	.bell-stickybar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		gap: 12px;
		align-items: center;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--wp--preset--color--border);
		background: var(--wp--preset--color--surface);
		box-shadow: 0 -4px 16px rgba(71, 35, 61, 0.08);
	}

	.bell-stickybar__price {
		flex: none;
		line-height: 1.2;
	}

	.bell-stickybar__price small {
		display: block;
		color: var(--wp--preset--color--muted);
		font-size: 12px;
	}

	.bell-stickybar__price strong {
		font-size: 17px;
		font-variant-numeric: tabular-nums;
	}

	.bell-stickybar .bell-cta {
		flex: 1;
		margin: 0;
	}

	.single-produto .wp-site-blocks {
		padding-bottom: 76px;
	}
}

/* ---- 14: land on the first new card, below the sticky filter bar -------- */
#mais {
	scroll-margin-top: 96px;
}

/* ---- 15: the sort button is visible -------------------------------------- */
.bell-ordenar {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* T2, the same control as "Aplicar" (.bell-preco__ok) -- SYSTEM.md. */
.bell-ordenar .bell-ordenar__ok {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--plum);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--plum);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* ---- 1, 4, 12, 17: /contato/ --------------------------------------------- */
.bell-contato,
.bell-contato .bell-form {
	margin-left: 0;
	padding-left: 0;
}

.bell-field input,
.bell-field textarea,
.bell-field select {
	min-height: 48px;
}

.bell-field select {
	width: 100%;
	padding: 0 36px 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--plum);
	font: inherit;
	font-size: 16px;
}

.bell-field__opt {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.bell-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.bell-field__nota {
	margin: -6px 0 14px;
	color: var(--wp--preset--color--muted);
	font-size: 12.5px;
}

.bell-pedido {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 18px;
	margin: 0 0 20px;
	padding: 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
}

.bell-pedido--reg {
	border-color: var(--wp--preset--color--form-border);
	background: var(--wp--preset--color--form-soft);
}

.bell-pedido__img {
	width: 96px;
	height: 120px;
	object-fit: cover;
	object-position: 50% 10%;
	border-radius: 6px;
}

.bell-pedido__ref {
	margin: 2px 0 4px;
	color: var(--wp--preset--color--muted);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bell-pedido__ref b {
	color: var(--wp--preset--color--plum);
}

.bell-pedido__nome {
	margin: 0 0 10px;
	font-size: 16px;
}

.bell-pedido__nome a {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 600px) {
	.bell-pedido {
		grid-template-columns: 72px 1fr;
		gap: 14px;
	}

	.bell-pedido__img {
		width: 72px;
		height: 90px;
	}

	.bell-pedido .bell-field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ---- 6: the search page -------------------------------------------------- */
.bell-busca {
	padding-bottom: 80px;
}

.bell-busca__eyebrow {
	margin: 32px 0 8px;
	color: var(--wp--preset--color--ink-soft);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.20em;
	text-transform: uppercase;
}

.bell-busca__form {
	max-width: 560px;
	margin-top: 18px;
}

.bell-busca__ok {
	min-height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.bell-busca__h {
	margin: 48px 0 18px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
}

.bell-busca__posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.bell-busca__post {
	display: grid;
	gap: 8px;
	padding: 20px 22px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--plum);
	text-decoration: none;
}

.bell-busca__cat {
	color: var(--wp--preset--color--muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bell-busca__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	line-height: 1.25;
}

.bell-busca__vazio {
	display: grid;
	justify-items: center;
	gap: 14px;
	margin-top: 40px;
	padding: 40px 24px;
	border: 1px dashed var(--wp--preset--color--blush-deep);
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
	text-align: center;
}

.bell-busca__vazio .bell-busca__h {
	margin: 0;
}

.bell-busca__vazio p {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.bell-busca__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.bell-busca__chips .bell-chip {
	text-decoration: none;
}

@media (max-width: 781px) {
	.bell-busca__posts {
		grid-template-columns: 1fr;
	}
}

/* ---- 21: the Guia -------------------------------------------------------- */
/* The newest article is featured: two columns wide on a wide screen. */
@media (min-width: 782px) {
	.bell-guia .bell-guia__grid > li:first-child {
		grid-column: span 2;
	}

	.bell-guia .bell-guia__grid > li:first-child .bell-guia__title {
		font-size: 34px;
	}
}

.bell-guia-rel {
	max-width: 1080px;
	margin: 64px auto 0;
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--border);
}

/* The frozen "subsection H3" row: 24 / 22 / 20, 400, 1.25, -0.02em. */
.bell-guia-rel__h {
	margin: 0 0 20px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

@media (max-width: 999px) {
	.bell-guia-rel__h {
		font-size: 22px;
	}
}

@media (max-width: 600px) {
	.bell-guia-rel__h {
		font-size: 20px;
	}
}

.bell-guia-rel__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.bell-guia-rel__item {
	display: grid;
	gap: 10px;
	color: var(--wp--preset--color--plum);
	text-decoration: none;
}

.bell-guia-rel__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}

.bell-guia-rel__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	line-height: 1.25;
}

@media (max-width: 781px) {
	.bell-guia-rel__grid {
		grid-template-columns: 1fr;
	}
}

/* "Fale conosco" is longer than "WhatsApp" and wrapped onto two lines at 1440;
   the placeholder was cut to "Buscar nome ou". Measured live, 2026-09-24. */
.bell-wa span {
	white-space: nowrap;
}

.bell-hdr__row .bell-search input::placeholder {
	font-size: 13px;
}

/* the product's own clip, last in the gallery */
.bell-gallery figure.bell-gal--video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--wp--preset--color--photo);
}


/* ---- final check, 2026-09-24 (playwright-cli on the live site) ----------- */
/* 17: WordPress centres every child of the constrained post content with
   margin-inline: auto !important, so the 620px form sat 70px right of the
   H1. Left-align that page's content column instead. */
.wp-block-post-content:has(> .bell-contato) > * {
	margin-left: 0 !important;
}

/* 12: the swatch row paints ABOVE the photo and the text, or their boxes take
   the taps meant for the swatch's 44px hit area. The pill's area is 44 tall. */
.bell-card__sw {
	position: relative;
	z-index: 3;
}

.bell-quick::after {
	inset: -7px -5px;
}

/* 13: four lines on a phone -- 1001 TCBR, 1004 and 1004 PRO need them. */
@media (max-width: 600px) {
	.bell-card__name {
		-webkit-line-clamp: 4;
	}
}

/* 46px tall, so sub-pixel rounding never shaves it under 44. */
.bell-sw::after {
	inset: -13px -6px;
}

/* ---- every category row is CIRCLES (DECISIONS #23, #30, #34) -------------
   Home AND catalogue: #23's reference, Leonisa, puts them on its collection
   pages, and on /catalogo/ a row of 4:5 tiles read as a row of small product
   cards above the product grid. Every photograph FILLS its circle; a few carry
   a focus point in --foco (scripts/set-circle-focus.py). Plaquetas has no
   photograph at all: its "Foto em producao" disc. */
.bell-tiles .bell-tile__img {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

.bell-tiles .bell-tile__img img,
.bell-tiles .bell-tile__img img.is-contain,
.bell-tiles .bell-tile__img img.is-wide {
	object-fit: cover;
	object-position: var(--foco, 50% 12%);
	padding: 0;
}

.bell-tiles .bell-tile__fill {
	display: none;
}

.bell-tiles .bell-tile__img--empty span {
	padding: 0 10px;
	text-align: center;
}

/* Words sit centred under a circle. Balance evens the two-line names
   ("Corseletes e espartilhos"). */
.bell-tiles .bell-tile {
	text-align: center;
}

.bell-tiles .bell-tile__name {
	text-wrap: balance;
}

/* ONE row, built by ONE function (bellcorpusbr_cat_tiles) on home and
   catalogue alike: the 11 fill a 1280 wrap (11 x 92 + 10 x 12 = 1132 minimum).
   Narrower screens scroll. */
@media (min-width: 601px) {
	.bell-tiles .bell-tile {
		flex: 1 0 92px;
	}
}

/* Leonisa's mobile size: small discs, so the first products stay high. The
   DISC is fixed; the column may widen for a long word ("Modeladores") without
   making its circle bigger than its neighbours'. */
@media (max-width: 600px) {
	.bell-tiles .bell-tile {
		flex: 0 0 auto;
		min-width: 70px;
	}

	.bell-tiles .bell-tile__img {
		width: 70px;
		margin-inline: auto;
		border-radius: 50%;
	}

}

/* ===========================================================================
   TYPE OPTION A -- DECISIONS #31, mocks/type-2026-09-24/, SYSTEM.md revised.
   Serif at 400 with tighter tracking, light sans, quiet prices, INK for text
   and PLUM as the accent. Appended LAST: equal-specificity rules are decided
   by source order (AGENTS.md), and every value here is SYSTEM.md's table.
   =========================================================================== */

/* ---- text is ink; plum stays on the logo, buttons, links and the hero's
   italic line. The care register's slate rules are more specific and win. */
.bell-card__name,
.bell-card__name a,
.bell-card__price,
.bell-card__eyebrow b,
.bell-buy__h1,
.bell-buy__price,
.bell-pagehead__h1,
.bell-pagehead__sub,
.bell-hero__h1,
.bell-tile__name,
.bell-pill,
.bell-filtro__item,
.bell-preco__campo input,
.bell-ordenar select,
.bell-channel h2,
.bell-home-linha-count,
.bell-nav__link,
.bell-search input,
.bell-cor-nome,
.bell-echo,
.bell-chip,
.bell-comoescolher summary,
.bell-cats__item,
.bell-field input,
.bell-field textarea,
.bell-field select,
.bell-pedido__ref b,
.bell-busca__post,
.bell-guia-rel__item {
	color: var(--wp--preset--color--ink);
}

/* ---- display --------------------------------------------------------------- */
.bell-hero__h1 {
	font-size: 64px;
	line-height: 1;
	letter-spacing: -0.035em;
}

.bell-hero__h1 em {
	font-style: italic;
	color: var(--wp--preset--color--plum);
}

@media (max-width: 1100px) {
	.bell-hero__h1 {
		font-size: 52px;
	}
}

@media (max-width: 600px) {
	.bell-hero__h1 {
		font-size: 40px;
	}
}

.bell-pagehead__h1 {
	letter-spacing: -0.03em;
}

.bell-buy__h1 {
	letter-spacing: -0.025em;
}

.bell-channel h2 {
	font-weight: 400;
	letter-spacing: -0.02em;
}

.bell-logo {
	font-weight: 400;
	letter-spacing: -0.02em;
}

/* ---- the sans ---------------------------------------------------------------- */
.bell-hero__lead {
	font-weight: 300;
	letter-spacing: -0.01em;
}

.bell-card__name,
.bell-card__name a {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

/* :not(--ask) -- "Preco sob consulta" carries .bell-card__price too, and keeps
   its own 13px row (verify-type caught this). */
.bell-card__price:not(.bell-card__price--ask) {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
}

.bell-buy__price {
	font-weight: 500;
}

@media (max-width: 600px) {
	.bell-card__name,
	.bell-card__name a,
	.bell-card__price:not(.bell-card__price--ask) {
		font-size: 15px;
	}
}

/* the nav leaves T2: 13 / 400 / 0.10em, in ink */
.bell-nav__link {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.1em;
}

/* T1 is lighter and narrower: 12 / 500 / 0.16em */
.bell-hero__eyebrow,
.bell-buy__eyebrow,
.bell-cats__label,
p.is-style-eyebrow,
.bell-busca__eyebrow {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
}

/* ---- footer column headings: serif, not a T2 label ----------------------- */
.bell-ftr__h {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-transform: none;
}

@media (max-width: 600px) {
	.bell-ftr__h {
		font-size: 20px;
	}
}


/* The 13px nav (#31) no longer fits beside the search box below 1280px:
   measured 68px of overflow at 1200 and 35 at 1024. The search moves to its
   own row under the bar -- the row phones already use -- instead of the nav
   shrinking, because the nav size is a frozen row. */
@media (max-width: 1279px) {
	.bell-hdr__msearch {
		display: block;
		padding: 0 24px 12px;
		background: var(--wp--preset--color--surface);
	}

	.bell-hdr__row .bell-search {
		display: none;
	}
}

/* The mega menu is centred under the whole BAR, not under the nav: with the
   wider 13px nav, centring on the nav pushed its right edge 32px past a
   1024px viewport, and a hidden absolute panel still widens the page. */
.bell-hdr__row {
	position: relative;
}

.bell-nav,
.bell-nav ul,
.bell-nav__item--mega {
	position: static;
}

/* ---- THE HERO MOSAIC (DECISIONS #33, the owner's option C4) ----------------
   On the clips' own warm cream -- the old pink hero clashed with their studio
   backdrop (#FAF2E7 against #FAEAEF). A large tile that plays by itself, and
   two small tiles at EXACTLY 4:5, the clips' shape, so nothing is cropped (the
   squarer tile of the first mock cut the heads off the before/after). */
.bell-hero {
	background: #F8F0E6;
	grid-template-columns: 1fr 1.25fr;
}

.bell-hero__media--mosaic {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 267px;
	grid-template-rows: 334px 334px;
	gap: 12px;
	align-self: center;
	min-height: 0;
	padding: 40px max(var(--bell-pad), calc((100vw - 1280px) / 2)) 40px 0;
	background: transparent;
}

.bell-hero__tile {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background: #FAF2E7;
}

.bell-hero__tile--big {
	grid-row: 1 / span 2;
	border-radius: 14px;
}

.bell-hero__tile .bell-hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	cursor: pointer;
}

.bell-hero__tile--small .bell-hero__video {
	object-position: 50% 0%;
}

.bell-hero__tile .bell-hero__video:focus-visible {
	outline: 2px solid var(--wp--preset--color--plum);
	outline-offset: -3px;
}

.bell-hero__cap {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgb(255 255 255 / 92%);
	color: var(--wp--preset--color--ink);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.06em;
	text-decoration: none;
}

a.bell-hero__cap:hover {
	text-decoration: underline;
}

.bell-hero__toggle {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: rgb(255 255 255 / 92%);
	color: var(--wp--preset--color--ink);
	font: 500 11px/1 var(--wp--preset--font-family--body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

.bell-hero__toggle-play,
.is-paused .bell-hero__toggle-pause {
	display: none;
}

.is-paused .bell-hero__toggle-play {
	display: inline;
}

@media (max-width: 1100px) {
	.bell-hero {
		grid-template-columns: 1fr 1.1fr;
	}

	.bell-hero__media--mosaic {
		grid-template-columns: minmax(0, 1fr) 200px;
		grid-template-rows: 250px 250px;
	}
}

@media (max-width: 860px) {
	.bell-hero {
		grid-template-columns: 1fr;
	}

	.bell-hero__media--mosaic {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 8px;
		height: auto;
		padding: 0 var(--bell-pad) 20px;
	}

	.bell-hero__tile--big {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 4 / 5;
		max-height: 460px;
		border-radius: 8px;
	}

	.bell-hero__tile--small {
		aspect-ratio: 4 / 5;
		border-radius: 6px;
	}
}


/* ---- headings inside PAGE content (legal pages, quem somos, contato) ------
   The 2026-09-24 audit: they rendered theme.json's element sizes (40 / 30.8
   fluid, no tracking), off the frozen scale. Scoped to body.page so the Guia's
   own .bell-guia__body headings (posts) keep theirs. */
body.page .wp-block-post-content h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 38px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

body.page .wp-block-post-content h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

@media (max-width: 999px) {
	body.page .wp-block-post-content h2 {
		font-size: 32px;
	}

	body.page .wp-block-post-content h3 {
		font-size: 22px;
	}
}

@media (max-width: 600px) {
	body.page .wp-block-post-content h2 {
		font-size: 28px;
	}

	body.page .wp-block-post-content h3 {
		font-size: 20px;
	}
}