/* ==========================================================================
   Wine Club — base styles v0.1.0 (visual system v1.3)
   Tokens come from theme.json (--wp--preset--*). This file holds the base,
   type roles, header, footer and components. Mobile first. No animation:
   each effect arrives in its own commit, measured before and after.

   Contrast (WCAG 2.2 AA, computed):
   · Earth on Champanhe 11.0 · on Pedra 7.9 · on Sun 9.1        → any text
   · Wine on Champanhe 5.0                                       → text OK
     Wine on Pedra 3.6 · on Sun 4.1 · on Darkness 2.7            → never small text
   · Borra on Pedra 7.1                                          → links on Pedra
   · Muted on Champanhe 5.3 · on Sun 4.4 · on Pedra 3.8          → Champanhe only
   · Champanhe on Crepúsculo 7.5 · on Darkness 13.6
   · Sun on Crepúsculo 6.2 · on Darkness 11.3                    → secondary text on dark
   ========================================================================== */

:root {
	--wclub-champanhe: var(--wp--preset--color--champanhe);
	--wclub-pedra: var(--wp--preset--color--pedra);
	--wclub-sun: var(--wp--preset--color--sun);
	--wclub-earth: var(--wp--preset--color--earth);
	--wclub-muted: var(--wp--preset--color--muted);
	--wclub-wine: var(--wp--preset--color--wine);
	--wclub-borra: var(--wp--preset--color--borra);
	--wclub-crepusculo: var(--wp--preset--color--crepusculo);
	--wclub-darkness: var(--wp--preset--color--darkness);
	/* Vinha: only for a state that is going well (a subscription's "Ativa"). Not in the brand's palette. */
	--wclub-vinha: #3A4F25;       /* text and ring: 6.9:1 on Vinha claro, 7.7:1 on Champanhe */
	--wclub-vinha-claro: #DDE3CF; /* the tag's background */
	--wclub-gutter: var(--wp--custom--gutter, 1.5rem);
	--wclub-wide: var(--wp--style--global--wide-size, 80rem);
	/* The full width of a row, its side gutters included: the header, the footer and every page's
	   content use this one measure, so the content lines up with the logo (Ricardo, 10 Nov 2026).
	   Always with box-sizing: border-box and padding-inline: var(--wclub-gutter). */
	--wclub-frame: calc(var(--wclub-wide) + 4 * var(--wclub-gutter));
	/* Contextual colours: light by default, flipped inside dark sections */
	--wclub-fg: var(--wclub-earth);
	--wclub-fg-2: var(--wclub-muted);
	--wclub-line: rgba(61, 47, 35, .28);
	--wclub-link: var(--wclub-wine);
	--wclub-link-hover: var(--wclub-borra);
	--wclub-focus: var(--wclub-wine);
}

/* ---------------------------------------------------------------- base */
body {
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
/* Automatic hyphens only in long running text. Short interface copy, names,
   addresses and legal lines never break inside a word. */
.wclub-prose p, .wclub-prose li { hyphens: auto; -webkit-hyphens: auto; }
/* Headings never break inside a word. */
h1, h2, h3, h4, .wclub-display, .wclub-h2, .wclub-h3,
.wp-block-heading.wp-block-heading, .wp-block-post-title.wp-block-post-title {
	hyphens: manual; -webkit-hyphens: manual;
	overflow-wrap: normal; word-break: normal;
}
h1, h2, h3, h4, .wclub-display, .wclub-h2, .wclub-h3 {
	text-wrap: balance;
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 400;
	font-optical-sizing: auto;
	font-variation-settings: "SOFT" 0, "WONK" 0;
	letter-spacing: -.012em;
}
/* WONK only from H2 size up. Smaller headings stay upright, whatever their tag. */
h1, h2, .wclub-display, .wclub-h2 { font-variation-settings: "SOFT" 0, "WONK" 1; }
p, li { text-wrap: pretty; }
img { height: auto; max-width: 100%; }
.wp-site-blocks > * + * { margin-block-start: 0; }
a:where(:not(.wp-element-button, .wclub-btn)) { color: var(--wclub-link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:where(:not(.wp-element-button, .wclub-btn)):hover { color: var(--wclub-link-hover); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wclub-focus);
	outline-offset: 2px;
}
.wclub-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
::selection { background: var(--wclub-earth); color: var(--wclub-champanhe); }

/* ---------------------------------------------------------------- type roles */
.wclub-display { font-size: var(--wp--preset--font-size--display); line-height: .98; margin: 0; }
.wclub-h2 { font-size: var(--wp--preset--font-size--heading-2); line-height: 1.05; margin: 0; }
.wclub-h3 { font-size: var(--wp--preset--font-size--heading-3); line-height: 1.2; margin: 0; }
.wclub-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; max-width: 36rem; }
.wclub-small { font-size: var(--wp--preset--font-size--small); }
.wclub-muted { color: var(--wclub-fg-2); }
.wclub-label { font-size: var(--wp--preset--font-size--small); letter-spacing: .02em; color: var(--wclub-fg-2); margin: 0 0 1rem; }
.wclub-label::before {
	content: ""; display: inline-block; width: 2.25rem; height: 1px;
	margin-inline-end: .75rem; vertical-align: middle;
	background: var(--wclub-fg); /* the text colour of the section */
}
/* Chapter number: Fraunces with WONK, very large, the name beside it */
.wclub-chapnum { display: flex; align-items: baseline; gap: 1rem; margin: 0; }
.wclub-chapnum__number {
	font-family: var(--wp--preset--font-family--fraunces); font-weight: 400;
	font-size: clamp(6rem, 4rem + 6vw, 9rem); line-height: .8;
	font-variation-settings: "SOFT" 0, "WONK" 1;
}
.wclub-chapnum__name {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: var(--wp--preset--font-size--heading-3);
	font-variation-settings: "SOFT" 0, "WONK" 0;
}
/* Prices: weight 500 and tabular figures, so digits do not dance when they change */
.wclub-price {
	display: flex; justify-content: space-between; gap: 1rem; max-width: 24rem;
	padding-top: .75rem; border-top: 1px solid var(--wclub-line);
	font-weight: 500; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- buttons */
.wclub-btn, .wp-element-button, .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	min-height: 44px; padding: .9rem 1.5rem; border: 1px solid transparent; border-radius: 0;
	background: var(--wclub-wine); color: var(--wclub-champanhe);
	font: 500 1rem/1.25 var(--wp--preset--font-family--inter); letter-spacing: .01em;
	text-decoration: none; cursor: pointer;
}
.wclub-btn:hover, .wp-element-button:hover, .wp-block-button__link:hover { background: var(--wclub-borra); color: var(--wclub-champanhe); }
.wclub-btn--secondary { background: transparent; color: var(--wclub-fg); border-color: currentColor; }
.wclub-btn--secondary:hover { background: var(--wclub-sun); color: var(--wclub-earth); border-color: var(--wclub-sun); }
.wclub-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* ---------------------------------------------------------------- sections and panels */
.wclub-panel, .wclub-card { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
.wclub-panel > :first-child, .wclub-card > :first-child { margin-top: 0; }
.wclub-panel > :last-child, .wclub-card > :last-child { margin-bottom: 0; }
/* Structural card: Sun. Labels and errors in Earth (Muted 4.4 and Wine 4.1 fail on Sun). */
.wclub-card, .wp-block-group.is-style-wclub-card {
	background: var(--wclub-sun); color: var(--wclub-earth);
	--wclub-fg: var(--wclub-earth); --wclub-fg-2: var(--wclub-earth); --wclub-line: rgba(61, 47, 35, .35);
	--wclub-link: var(--wclub-earth); --wclub-link-hover: var(--wclub-borra); --wclub-focus: var(--wclub-wine);
}
.wp-block-group.is-style-wclub-card { padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); }
/* Dark context: Crepúsculo and Darkness sections, the footer */
.is-style-wclub-dusk, .is-style-wclub-night, .wclub-footer {
	--wclub-fg: var(--wclub-champanhe);
	--wclub-fg-2: var(--wclub-sun);
	--wclub-line: rgba(242, 236, 231, .24);
	--wclub-link: var(--wclub-champanhe);
	--wclub-link-hover: var(--wclub-sun);
	--wclub-focus: var(--wclub-champanhe);
	color: var(--wclub-fg);
}
.is-style-wclub-dusk { background: var(--wclub-crepusculo); }
.is-style-wclub-night, .wclub-footer { background: var(--wclub-darkness); }
/* Primary button on dark: inverted (Wine sits at 1.5:1 on Crepúsculo) */
:is(.is-style-wclub-dusk, .is-style-wclub-night, .wclub-footer) :is(.wclub-btn, .wp-element-button, .wp-block-button__link):not(.wclub-btn--secondary) {
	background: var(--wclub-champanhe); color: var(--wclub-earth);
}
:is(.is-style-wclub-dusk, .is-style-wclub-night, .wclub-footer) :is(.wclub-btn, .wp-element-button, .wp-block-button__link):hover {
	background: var(--wclub-sun); color: var(--wclub-earth); border-color: var(--wclub-sun);
}

/* ---------------------------------------------------------------- header */
.wclub-header { position: relative; z-index: 20; background: var(--wclub-champanhe); border-bottom: 1px solid var(--wclub-line); }
.wclub-bar {
	display: flex; align-items: center; gap: .5rem .75rem;
	max-width: var(--wclub-frame); box-sizing: border-box;
	margin-inline: auto; padding: .5rem var(--wclub-gutter);
}
.wclub-brand {
	display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: .45rem;
	min-height: 44px; padding-block: .5rem; box-sizing: border-box;
	margin-inline-end: auto; color: var(--wclub-fg); text-decoration: none;
}
.wclub-brand:hover { color: var(--wclub-fg); }
.wclub-brand__name {
	font-family: var(--wp--preset--font-family--fraunces); font-size: clamp(1.375rem, 1.2rem + .5vw, 1.5rem); line-height: 1; white-space: nowrap;
	font-variation-settings: "SOFT" 0, "WONK" 0; letter-spacing: -.012em;
}
.wclub-brand__by { font-size: var(--wp--preset--font-size--small); color: var(--wclub-fg-2); }
.wclub-bar__cart, .wclub-bar__account, .wclub-bar__back, .wclub-bar__toggle {
	display: inline-flex; align-items: center; justify-content: center; column-gap: .5rem;
	min-height: 44px; min-width: 44px; padding-inline: .25rem; box-sizing: border-box;
	color: var(--wclub-fg); text-decoration: none; white-space: nowrap;
}
a.wclub-bar__cart:hover, a.wclub-bar__account:hover, a.wclub-bar__back:hover, .wclub-bar__toggle:hover .wclub-bar__label,
.wclub-bar__account[aria-current="page"] .wclub-bar__label { color: var(--wclub-fg); text-decoration: underline; text-underline-offset: .35em; }
.wclub-bar__toggle { background: transparent; border: 0; border-radius: 0; font: inherit; cursor: pointer; }
/* Icons (decided 5 Nov 2026): 24 px, the text colour; the cart's number sits on its box, square like the buttons */
.wclub-bar__icon { position: relative; display: inline-flex; flex-shrink: 0; }
.wclub-icon { display: block; width: 1.5rem; height: 1.5rem; }
.wclub-bar__toggle .wclub-icon--close, .wclub-bar__toggle[aria-expanded="true"] .wclub-icon--menu { display: none; }
.wclub-bar__toggle[aria-expanded="true"] .wclub-icon--close { display: block; }
.wclub-bar__count {
	position: absolute; top: -.4rem; right: -.55rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .2rem; box-sizing: border-box;
	background: var(--wclub-earth); color: var(--wclub-champanhe);
	font-size: .6875rem; font-weight: 600; line-height: 1.125rem; text-align: center; font-variant-numeric: tabular-nums;
}
.wclub-bar__count[hidden] { display: none; }
.wclub-bar__cart { column-gap: .9rem; } /* Room for the number beside the word */
@media (forced-colors: active) { .wclub-bar__count { border: 1px solid CanvasText; } }
/* Phones: the icons alone, each a 44 px target; the words stay for screen readers */
@media (max-width: 47.99em) {
	.wclub-bar__cart, .wclub-bar__account, .wclub-bar__toggle { padding-inline: 0; }
	.wclub-bar__cart .wclub-bar__label, .wclub-bar__account .wclub-bar__label, .wclub-bar__toggle .wclub-bar__label {
		position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
}
.wclub-bar__menu { display: none; }
.wclub-bar__menu.is-open {
	/* Under the icons, at the right edge, at most 18rem wide: the choices sit near the button that
	   opened them (Ricardo, 6 Nov 2026), not across the screen. */
	display: block; position: absolute; top: 100%; right: var(--wclub-gutter); left: auto;
	width: min(18rem, calc(100% - 2 * var(--wclub-gutter))); box-sizing: border-box;
	padding: .5rem 1.25rem 1rem;
	background: var(--wclub-champanhe); border: 1px solid var(--wclub-earth); border-top: 0;
}
.wclub-bar__menu.is-open .wclub-nav a { justify-content: flex-end; text-align: right; }
.wclub-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wclub-nav a { display: flex; align-items: center; min-height: 44px; color: var(--wclub-fg); text-decoration: none; white-space: nowrap; hyphens: manual; -webkit-hyphens: manual; }
.wclub-nav a:hover, .wclub-nav .current-menu-item > a { color: var(--wclub-fg); text-decoration: underline; text-underline-offset: .35em; }
/* No JS: the menu is simply shown under the bar */
html:not(.wclub-js) .wclub-bar { flex-wrap: wrap; }
html:not(.wclub-js) .wclub-bar__toggle { display: none; }
html:not(.wclub-js) .wclub-bar__menu { display: block; order: 3; width: 100%; }
html:not(.wclub-js) .wclub-nav { flex-direction: row; flex-wrap: wrap; column-gap: 1.5rem; }

/* Full menu only where five items fit on one line beside the brand and the cart */
@media (min-width: 70em) {
	.wclub-bar { gap: 2rem; padding-block: 1rem; }
	.wclub-brand { flex-shrink: 0; }
	.wclub-bar__toggle { display: none; }
	.wclub-bar__menu, .wclub-bar__menu.is-open { display: block; position: static; width: auto; padding: 0; background: none; border: 0; flex: 0 1 auto; min-width: 0; }
	.wclub-bar__menu.is-open .wclub-nav a { justify-content: flex-start; text-align: left; }
	/* A longer menu (the staging links) wraps onto a second line rather than pushing the cart off the screen */
	.wclub-nav { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; column-gap: 1.5rem; row-gap: 0; }
}

/* ---------------------------------------------------------------- footer */
.wclub-foot {
	display: grid; gap: 2.5rem;
	max-width: var(--wclub-frame); box-sizing: border-box;
	margin-inline: auto; padding: var(--wp--preset--spacing--60) var(--wclub-gutter) var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
}
.wclub-foot p { margin: 0 0 .5rem; }
.wclub-brand--small .wclub-brand__name { font-size: 1.375rem; }
.wclub-foot__tagline { color: var(--wclub-fg-2); }
.wclub-foot__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.wclub-foot__title {
	margin: 0 0 .5rem; font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small); letter-spacing: .02em; color: var(--wclub-fg-2);
	font-variation-settings: normal;
}
.wclub-foot__list { list-style: none; margin: 0; padding: 0; }
.wclub-foot__list a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: .3em; }
.wclub-foot__legal { color: var(--wclub-fg-2); border-top: 1px solid var(--wclub-line); padding-top: 1.5rem; }
.wclub-foot__legal strong { color: var(--wclub-fg); font-weight: 500; }
@media (min-width: 60em) {
	.wclub-foot { grid-template-columns: minmax(16rem, 1fr) 2fr; }
	.wclub-foot__legal { grid-column: 1 / -1; }
	.wclub-foot__list { font-size: 1rem; } /* functional text: 16px minimum on desktop */
}

/* ---------------------------------------------------------------- forms */
.wclub-form { display: grid; gap: 1.5rem; }
.wclub-field label, .wclub-choices legend { display: block; margin-bottom: .4rem; font-size: 1rem; }
.wclub-optional, .wclub-hint { color: var(--wclub-fg-2); }
.wclub-hint { margin: .4rem 0 0; font-size: var(--wp--preset--font-size--small); }
.wclub-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
	display: block; width: 100%; min-height: 48px; box-sizing: border-box;
	padding: .65rem .75rem; border: 0; border-bottom: 1px solid var(--wclub-earth); border-radius: 0;
	background: var(--wclub-champanhe); color: var(--wclub-earth); font: inherit; font-size: 1rem;
}
.wclub-form textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.wclub-form select {
	appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
	background: var(--wclub-champanhe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233D2F23' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .9rem center;
}
.wclub-form ::placeholder { color: var(--wclub-muted); opacity: 1; } /* Muted on the Champanhe field: 5.3 */
.wclub-field-row { display: grid; gap: 1.5rem; }
@media (min-width: 36em) { .wclub-field-row { grid-template-columns: 1fr 1fr; } }
.wclub-field--error :is(input, select, textarea) {
	border-bottom: 3px solid var(--wclub-wine) !important; box-shadow: inset 3px 0 0 var(--wclub-wine);
}
.wclub-error { margin: 0 0 .4rem; color: var(--wclub-earth); font-size: 1rem; font-weight: 600; }
.wclub-error::before { content: "! "; }
.wclub-summary {
	border: 3px solid var(--wclub-wine); background: var(--wclub-champanhe); color: var(--wclub-earth);
	padding: 1rem 1.25rem; margin-bottom: 1.5rem; scroll-margin-top: 2rem;
}
.wclub-summary__title { margin: 0 0 .5rem; font-weight: 600; }
.wclub-summary ul { margin: 0; padding-left: 1.1rem; }
.wclub-summary a { color: var(--wclub-wine); } /* on Champanhe: 5.0 */
.wclub-summary a:hover { color: var(--wclub-borra); }
.wclub-check { display: grid; grid-template-columns: 1.5rem 1fr; gap: .25rem .75rem; align-items: start; }
.wclub-check input { width: 1.5rem; height: 1.5rem; margin: .15rem 0 0; }
.wclub-check label { margin: 0; font-size: 1rem; }
/* Checkboxes drawn by the theme: square, like every field (visual system: no rounded corners). The
   browser's own box is rounded and changes with the system. 24px, an Earth border, Wine with a white
   tick when ticked. In Windows' high-contrast mode the browser's own box comes back. */
:is(.wclub-shop, .wclub-check, .wclub-form) input[type="checkbox"] {
	-webkit-appearance: none; appearance: none; flex: none;
	width: 1.5rem; height: 1.5rem; margin: 0; border: 2px solid var(--wclub-earth); border-radius: 0;
	background: var(--wclub-champanhe) no-repeat center / 1rem 1rem; cursor: pointer;
}
:is(.wclub-shop, .wclub-check, .wclub-form) input[type="checkbox"]:checked {
	border-color: var(--wclub-wine); background-color: var(--wclub-wine);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E");
}
:is(.wclub-shop, .wclub-check, .wclub-form) input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
@media (forced-colors: active) {
	:is(.wclub-shop, .wclub-check, .wclub-form) input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; }
}
/* Option cards (radio): the selected one gets a thicker Earth border, not only a colour */
.wclub-choices { border: 0; margin: 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 36em) { .wclub-choices { grid-template-columns: repeat(3, 1fr); } }
.wclub-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wclub-choices label {
	display: flex; flex-direction: column; gap: .2rem; min-height: 44px; margin: 0;
	padding: 1rem; box-sizing: border-box; cursor: pointer;
	background: var(--wclub-champanhe); color: var(--wclub-earth);
	border: 1px solid rgba(61, 47, 35, .45); font-variant-numeric: tabular-nums;
}
.wclub-choices strong { font-weight: 500; }
.wclub-choices input:checked + label { border-color: var(--wclub-earth); box-shadow: inset 0 0 0 2px var(--wclub-earth); }
.wclub-choices input:focus-visible + label { outline: 2px solid var(--wclub-focus); outline-offset: 2px; }
.wclub-choice__tag { font-size: var(--wp--preset--font-size--small); color: var(--wclub-wine); } /* Wine on Champanhe: 5.0 */

/* ---------------------------------------------------------------- cards, products, grid */
.wclub-grid { display: grid; gap: 1.5rem; }
@media (min-width: 48em) { .wclub-grid { grid-template-columns: 1fr 1fr; } }
.wclub-product { display: flex; flex-direction: column; gap: .35rem; }
.wclub-product > * { margin: 0; }
.wclub-product__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--wclub-pedra); margin-bottom: .5rem; }
.wclub-product__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wclub-product__media--cutout img { object-fit: contain; padding: 10%; box-sizing: border-box; }
.wclub-product__tag { font-size: var(--wp--preset--font-size--small); color: var(--wclub-fg-2); }
.wclub-product__title { font-size: var(--wp--preset--font-size--heading-3); line-height: 1.2; }
.wclub-product__price { font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- shelf (horizontal, native scroll-snap) */
.wclub-shelf {
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: 0;
	scrollbar-width: thin; scrollbar-color: var(--wclub-earth) transparent;
	padding-block: .25rem 1.25rem;
}
.wclub-shelf:focus-visible { outline-offset: -2px; }
.wclub-shelf__list { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.wclub-shelf__list > li { flex: 0 0 min(78vw, 18rem); scroll-snap-align: start; }

/* ---------------------------------------------------------------- the closed cellar door (inc/door.php)
   The scene covers its box like object-fit: cover, so the leaves keep their
   place on the wall at any screen size. Landscape: 3:2 scene; portrait: the
   central 1:2 column. Leaves first, wall on top (it covers their edges).  */
.wclub-door { position: absolute; inset: 0; overflow: hidden; background: var(--wclub-pedra); }
.wclub-door__scene {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: max(100vw, 150vh); width: max(100vw, 150svh); aspect-ratio: 3 / 2;
}
.wclub-door__scene img { position: absolute; display: block; max-width: none; }
.wclub-door__wall { inset: 0; width: 100%; height: 100%; }
.wclub-door__leaf--l { left: 37.969%; top: 17.656%; width: 12.031%; height: 68.359%; }
.wclub-door__leaf--r { left: 49.74%; top: 17.656%; width: 11.927%; height: 68.359%; }
@media (orientation: portrait) {
	.wclub-door__scene { width: max(100vw, 50vh); width: max(100vw, 50svh); aspect-ratio: 1 / 2; }
	.wclub-door__leaf--l { left: 14.25%; top: 17.875%; width: 35.375%; height: 67.938%; }
	.wclub-door__leaf--r { left: 49.625%; top: 17.875%; width: 35%; height: 67.938%; }
}

/* ---------------------------------------------------------------- entering: the door opens (decided 3 Nov 2026)
   On "Sim, entrar" the Core adds .wclub-age-opening for --wclub-age-exit ms. The question and the shade
   fade, the leaves swing in from their hinges and the camera walks through the doorway into the page
   behind (the layer goes transparent, so the doorway shows the real page). transform and opacity only;
   the leaves and the scene move together for about 0.35 s (approved exception, docs/SEQUENCIA-GARRAFEIRA.md).
   Reduced motion: a short fade. Cart, checkout and account: none (QA-PERFORMANCE). */
.wclub-age { --wclub-age-exit: 250ms; }
.wclub-age-opening .wclub-age { animation: wclub-out .25s ease-out both; }
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .wclub-age { --wclub-age-exit: 0ms; }
@media (prefers-reduced-motion: no-preference) {
	.wclub-age { --wclub-age-exit: 1500ms; }
	/* Ready before the click, so the first frame has nothing to draw. */
	.wclub-age .wclub-door__scene, .wclub-age .wclub-door__leaf { will-change: transform; }
	.wclub-age-opening .wclub-age { animation: none; background: transparent; }
	.wclub-age-opening .wclub-age__inner { animation: wclub-out .3s ease-out both; }
	.wclub-age-opening .wclub-age__bg::after { animation: wclub-out .4s ease-out both; }
	.wclub-age-opening .wclub-door { background: transparent; animation: wclub-out .45s ease-in 1.05s both; }
	.wclub-age-opening .wclub-door__scene {
		--wclub-door-walk: 6; perspective: 120vmax; perspective-origin: 49.8% 51.8%; transform-origin: 49.8% 51.8%;
		animation: wclub-door-walk .8s cubic-bezier(.55, 0, .7, .4) .7s both;
	}
	.wclub-age-opening .wclub-door__leaf { backface-visibility: hidden; animation: .9s cubic-bezier(.55, .05, .25, 1) .15s both; }
	.wclub-age-opening .wclub-door__leaf--l { transform-origin: 0 50%; animation-name: wclub-leaf-l; }
	.wclub-age-opening .wclub-door__leaf--r { transform-origin: 100% 50%; animation-name: wclub-leaf-r; }
}
@media (prefers-reduced-motion: no-preference) and (orientation: portrait) {
	/* The doorway is most of the phone's width: a shorter walk crosses it. */
	.wclub-age-opening .wclub-door__scene { --wclub-door-walk: 2.8; perspective-origin: 49.4% 51.8%; transform-origin: 49.4% 51.8%; }
}
@keyframes wclub-out { to { opacity: 0; } }
@keyframes wclub-leaf-l { to { transform: rotateY(82deg); } }
@keyframes wclub-leaf-r { to { transform: rotateY(-82deg); } }
@keyframes wclub-door-walk {
	from { transform: translate(-50%, -50%) scale(1); }
	to { transform: translate(-50%, -50%) scale(var(--wclub-door-walk)); }
}

/* ---------------------------------------------------------------- pages */
.wclub-main { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70); }
.wclub-main--wide { padding-block: 0; }
/* Side gutter: no content touches the screen's edges (Ricardo, 9 Nov 2026: a plain product page
   did, on a phone). Every page keeps --wclub-gutter (20 px on a phone, up to 48 px) on each side,
   like the header and the footer; only the chapter's stage images run edge to edge. A block drawn
   inside a "default" layout (single-product, front page) brings its own: .wclub-container. */
.wclub-container, .wclub-simple-product {
	box-sizing: border-box; max-width: var(--wclub-frame);
	margin-inline: auto; padding-inline: var(--wclub-gutter);
}
/* A plain product (a wine or a book on its own, the gift, a test product). */
.wclub-simple-product { display: grid; gap: 1.25rem; justify-items: start; }
.wclub-simple-product > * { margin: 0; }
.wclub-simple-product img { display: block; width: 100%; max-width: 32rem; height: auto; }
.wclub-simple-product .price { font-size: 1.25rem; font-weight: 500; }
.wclub-simple-product form.cart { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.wclub-simple-product form.cart .quantity { display: flex; } /* the number box as tall as the button */
.wclub-simple-product form.cart .qty { width: 5rem; min-height: 48px; box-sizing: border-box; padding: 0 .75rem; border: 1px solid var(--wclub-earth); border-radius: 0; background: var(--wclub-sun); color: var(--wclub-earth); font: inherit; }
.wclub-page-title { font-size: var(--wp--preset--font-size--heading-2); margin-block-end: var(--wp--preset--spacing--50); }
.wclub-prose { max-width: 42rem; }
.wclub-prose h2 { font-size: var(--wp--preset--font-size--heading-3); font-variation-settings: "SOFT" 0, "WONK" 0; margin-block-start: var(--wp--preset--spacing--50); }
.wclub-notfound h1 { font-size: var(--wp--preset--font-size--heading-2); margin-block: 0 var(--wp--preset--spacing--40); }

/* ---------------------------------------------------------------- style guide (internal page) */
.wclub-guia {
	max-width: var(--wclub-frame); box-sizing: border-box;
	margin-inline: auto; padding: var(--wp--preset--spacing--60) var(--wclub-gutter) var(--wp--preset--spacing--70);
}
.wclub-guia__intro { padding-bottom: var(--wp--preset--spacing--50); }
.wclub-guia__section { display: grid; gap: 1.25rem; padding-block: var(--wp--preset--spacing--50); border-top: 1px solid var(--wclub-line); }
.wclub-guia__section > * { margin: 0; }
.wclub-guia__title { font-size: var(--wp--preset--font-size--heading-3); line-height: 1.2; font-variation-settings: "SOFT" 0, "WONK" 0; }
.wclub-guia__note { color: var(--wclub-fg-2); font-size: var(--wp--preset--font-size--small); }
.wclub-guia__form { max-width: 40rem; }
.wclub-swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); font-size: var(--wp--preset--font-size--small); }
.wclub-swatch__chip { display: block; height: 4rem; margin-bottom: .5rem; border: 1px solid var(--wclub-line); }