/* ==========================================================================
   Wine Club — chapter page (docs/PAGINA-CAPITULO.md). Loaded only on chapter
   pages. No animation yet: each effect arrives in its own commit, measured.
   Stage positions come from the Figma frames 5:6 (phone, 390×600) and 5:2
   (desktop, 864×900), in percent of the stage, so the final photographs
   drop into the same places.
   ========================================================================== */

.wclub-main--product { padding-block: 0 7rem; }
@media (min-width: 60em) { .wclub-main--product { padding-block: 0 var(--wp--preset--spacing--70); } }

/* ---------------------------------------------------------------- layout */
.wclub-chapter {
	display: grid; grid-template-columns: minmax(0, 1fr);
	max-width: var(--wclub-frame); box-sizing: border-box; margin-inline: auto;
}
.wclub-chapter__panel { padding: var(--wp--preset--spacing--40) var(--wclub-gutter) var(--wp--preset--spacing--50); }
.wclub-chapter__story { padding: 0 var(--wclub-gutter); }
@media (min-width: 60em) {
	.wclub-chapter {
		grid-template-columns: minmax(0, 3fr) minmax(22rem, 2fr);
		column-gap: clamp(2rem, 4vw, 4rem);
		padding: var(--wp--preset--spacing--40) var(--wclub-gutter) 0;
	}
	.wclub-chapter__stagecol { grid-column: 1; grid-row: 1; }
	.wclub-chapter__story { grid-column: 1; grid-row: 2; padding: 0; }
	.wclub-chapter__panel { grid-column: 2; grid-row: 1 / span 2; padding: 0; }
}
/* The purchase panel stays in view while the stage and the story scroll. When it is taller
   than the screen, chapter.js sets a negative top so it sticks once its bottom shows. */
@media (min-width: 60em) {
	.wclub-chapter__sticky { position: sticky; top: 1.5rem; }
}

/* ---------------------------------------------------------------- the stage */
.wclub-stage {
	position: relative; margin: 0; overflow: hidden; isolation: isolate;
	aspect-ratio: 390 / 600; background: var(--wclub-pedra);
}
.wclub-stage img { position: absolute; display: block; max-width: none; height: auto; }
.wclub-stage .wclub-stage__bg { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wclub-stage__box { left: -17.95%; top: 32.67%; width: 102.56%; }
.wclub-stage__bottle--1 { left: 32.56%; top: 29.27%; width: 63.08%; }
.wclub-stage__bottle--2 { left: 59.71%; top: 39.34%; width: 49.8%; }
/* Shadows are drawn, not photographed: soft ellipses in Earth that seat the box and the bottles on the linen. */
.wclub-stage__shadow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(61, 47, 35, var(--a)), rgba(61, 47, 35, 0)); }
.wclub-stage__shadow--box-soft { left: 7.62%; top: 82%; width: 63.54%; height: 8%; --a: .24; }
.wclub-stage__shadow--box { left: 12.76%; top: 85.83%; width: 48.41%; height: 3%; --a: .42; }
.wclub-stage__shadow--b1-soft { left: 50.44%; top: 81.83%; width: 31.54%; height: 3.01%; --a: .28; }
.wclub-stage__shadow--b1 { left: 54.64%; top: 82.72%; width: 20.18%; height: 1.23%; --a: .5; }
.wclub-stage__shadow--b2 { left: 74.94%; top: 82.31%; width: 21.03%; height: 2.05%; --a: .24; }
@media (min-width: 36em) {
	.wclub-stage { aspect-ratio: 864 / 900; }
	.wclub-stage__box { left: -4.63%; top: 27.78%; width: 74.07%; }
	.wclub-stage__bottle--1 { left: 43.98%; top: 25.09%; width: 45.14%; }
	.wclub-stage__bottle--2 { left: 64.94%; top: 35.73%; width: 35.64%; }
	.wclub-stage__shadow--box-soft { left: 13.83%; top: 80.4%; width: 45.89%; height: 8.53%; }
	.wclub-stage__shadow--box { left: 17.55%; top: 84.49%; width: 34.96%; height: 3.2%; }
	.wclub-stage__shadow--b1-soft { left: 56.77%; top: 80.63%; width: 22.57%; height: 3.18%; }
	.wclub-stage__shadow--b1 { left: 59.78%; top: 81.57%; width: 14.44%; height: 1.3%; }
	.wclub-stage__shadow--b2 { left: 75.83%; top: 81.14%; width: 15.05%; height: 2.17%; }
}
/* One composed photograph instead of the layers (Core: "Palco: fotografia única", only when nothing
   on the stage changes). The stage takes the photograph's own proportions: nothing is cropped. */
.wclub-stage.is-photo { aspect-ratio: auto; }
.wclub-stage.is-photo .wclub-stage__photo { position: static; width: 100%; height: auto; }
/* One bottle on the stage, two when the pack has two wines. */
.wclub-stage:not(.is-two) :is(.wclub-stage__bottle--2, .wclub-stage__shadow--b2) { display: none; }

/* ---------------------------------------------------------------- the panel */
.wclub-chapter__head { display: flex; align-items: baseline; gap: .75rem; margin: 0; font-size: inherit; line-height: 1; }
.wclub-chapter__number {
	font-family: var(--wp--preset--font-family--fraunces); font-weight: 400;
	font-size: clamp(6rem, 4rem + 6vw, 9rem); line-height: .8; letter-spacing: -.02em;
	font-variation-settings: "SOFT" 0, "WONK" 1;
}
.wclub-chapter__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;
}
.wclub-chapter__pack {
	margin: 1.25rem 0 .75rem;
	font-family: var(--wp--preset--font-family--fraunces); line-height: 1.05; letter-spacing: -.012em;
	font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem); font-variation-settings: "SOFT" 0, "WONK" 1;
	text-wrap: balance;
}
.wclub-chapter__sentence { margin: 0 0 1.5rem; max-width: 34rem; font-size: var(--wp--preset--font-size--lead); line-height: 1.5; }

/* ---------------------------------------------------------------- the pack form (markup from Wine Club Core) */
.wclub-pack { display: grid; gap: 1.25rem; }
.wclub-pack fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wclub-pack legend { padding: 0; margin-bottom: .25rem; font-size: 1rem; font-weight: 500; }
.wclub-pack__help { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--small); color: var(--wclub-fg-2); }
.wclub-pack .wclub-pack__format { grid-template-columns: 1fr 1fr; }
.wclub-pack__from { font-variant-numeric: tabular-nums; }
/* Second bottle only in the two-wine pack (works without JavaScript too). */
.wclub-pack:has(input[name="wclub_format"][value="1"]:checked) .wclub-pack__slot[data-slot="2"] { display: none; }
.wclub-pack__filter { display: flex; gap: .5rem; margin: 0 0 .5rem; }
.wclub-pack__filter button {
	min-height: 44px; padding: 0 .9rem; border: 1px solid var(--wclub-earth); border-radius: 0;
	background: transparent; color: var(--wclub-earth); font: inherit; font-size: .9375rem; cursor: pointer;
}
.wclub-pack__filter button[aria-pressed="true"] { background: var(--wclub-earth); color: var(--wclub-champanhe); }

/* The wine carousel: a radio group (arrow keys change the wine, Tab leaves). Native scroll-snap. */
.wclub-pack__wines {
	display: flex; gap: .5rem; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--wclub-muted) var(--wclub-pedra); /* a full rail, so it never reads as the selection bar */
	padding: .25rem .125rem 1.25rem;
}
.wclub-pack__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wclub-pack__wines > label { flex: 0 0 7.75rem; scroll-snap-align: start; cursor: pointer; }
.wclub-pack__wines > label[hidden] { display: none; }
.wclub-wine {
	position: relative;
	display: flex; flex-direction: column; gap: .15rem; box-sizing: border-box; height: 100%;
	padding: 2.75rem .5rem .75rem; border-top: 2px solid transparent; /* every card keeps room for Susana's mark, so the bottles line up */
	font-size: .875rem; line-height: 1.35;
}
.wclub-wine:has(.wclub-wine__pick) { border-top-color: var(--wclub-wine); } /* Susana's choice: a thin Wine rule above */
.wclub-wine__bottle { display: block; height: 8rem; margin-bottom: .5rem; }
/* The selected bottle comes forward; the others step back. Only the bottle: the text keeps full contrast. */
.wclub-wine__bottle img { display: block; height: 100%; width: auto; margin-inline: auto; transform: scale(.85); transform-origin: 50% 100%; opacity: .5; }
.wclub-pack__radio:checked + label .wclub-wine__bottle img, .wclub-pack__wines--single .wclub-wine__bottle img { transform: none; opacity: 1; }
.wclub-pack__radio:checked + label .wclub-wine { box-shadow: inset 0 -3px 0 var(--wclub-earth); }
.wclub-pack__radio:focus-visible + label { outline: 2px solid var(--wclub-focus); outline-offset: 2px; }
.wclub-pack__radio:disabled + label { cursor: not-allowed; }
.wclub-pack__radio:disabled + label .wclub-wine__bottle img { opacity: .25; }
.wclub-wine__pick { position: absolute; top: .4rem; left: .5rem; right: .5rem; font-size: .875rem; line-height: 1.2; color: var(--wclub-wine); } /* Wine on Champanhe: 5.0 */
.wclub-wine__name { font-weight: 500; font-size: .9375rem; }
.wclub-wine__sub { color: var(--wclub-fg-2); }
.wclub-wine__delta { font-weight: 500; font-variant-numeric: tabular-nums; }
.wclub-wine__out { font-weight: 500; }
.wclub-pack__wines--single { overflow: visible; }
/* One wine: no carousel, the bottle beside its card. */
.wclub-pack__wines--single .wclub-wine {
	display: grid; grid-template-columns: 4.5rem 1fr; grid-auto-rows: min-content; column-gap: 1rem; row-gap: .15rem; align-content: center;
	flex: 1 1 auto; padding: .75rem 0 0;
}
.wclub-pack__wines--single .wclub-wine__bottle { grid-column: 1; grid-row: 1 / span 5; height: 7.5rem; margin: 0; }
.wclub-pack__wines--single .wclub-wine > :not(.wclub-wine__bottle) { grid-column: 2; }
.wclub-pack__wines--single .wclub-wine__pick { position: static; margin-bottom: .25rem; }

.wclub-pack__total {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	margin: 0; padding-top: 1rem; border-top: 1px solid var(--wclub-line); font-weight: 500;
}
.wclub-pack__amount { font-size: var(--wp--preset--font-size--heading-3); font-variant-numeric: tabular-nums; }
/* Before its month the chapter is on pre-sale: said in full colour, above the total. */
.wclub-pack__presale { margin: 0; font-size: var(--wp--preset--font-size--small); }
.wclub-pack__presale strong { font-weight: 600; }
.wclub-pack__notes, .wclub-pack__legal { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wclub-fg-2); }
.wclub-pack__actions { margin: 0; }
.wclub-pack__add { width: 100%; }

/* ---------------------------------------------------------------- disclosures: "E o que mais vem na caixa?" and the sheets */
.wclub-more, .wclub-sheet { border-top: 1px solid var(--wclub-line); }
.wclub-more { margin-top: 1.5rem; }
.wclub-more summary, .wclub-sheet summary {
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	min-height: 48px; cursor: pointer; list-style: none; font-weight: 500;
}
.wclub-more summary::-webkit-details-marker, .wclub-sheet summary::-webkit-details-marker { display: none; }
.wclub-more summary::after, .wclub-sheet summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; }
:is(.wclub-more, .wclub-sheet)[open] summary::after { content: "−"; }
.wclub-more p { margin: 0 0 1rem; }

/* ---------------------------------------------------------------- the story */
.wclub-chapter__story { display: grid; gap: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--60); }
.wclub-chapter__section > * { margin: 0 0 1rem; max-width: 40rem; }
.wclub-chapter__section h2 { margin-bottom: 1.25rem; }
.wclub-marks { list-style: none; padding: 0; display: grid; gap: 1rem; }
.wclub-marks li { padding-top: .75rem; border-top: 1px solid var(--wclub-line); }
.wclub-marks strong { display: block; font-family: var(--wp--preset--font-family--fraunces); font-weight: 400; font-size: 1.375rem; }
.wclub-boxlist { padding-left: 1.1rem; }
.wclub-boxlist li + li { margin-top: .35rem; }
.wclub-sheets { gap: 0; }
.wclub-sheet__title { margin: 0 0 .75rem; font-size: 1.125rem; }
.wclub-facts { display: grid; grid-template-columns: minmax(7.5rem, max-content) 1fr; gap: .4rem 1rem; margin: 0 0 1.25rem; }
.wclub-facts dt { color: var(--wclub-fg-2); }
.wclub-facts dd { margin: 0; }
/* The wine's e-label (ingredients, nutrition declaration): small Inter headings, not display type. */
.wclub-sheet__sub { margin: 1.5rem 0 .5rem; font-family: var(--wp--preset--font-family--inter); font-size: 1rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.wclub-sheet__text { margin: 0 0 1rem; max-width: 40rem; }

/* ---------------------------------------------------------------- a wine or a book on its own (no price, no button:
   until the cave opens it is sold only inside a chapter; Wine Club Core inc/alone.php) */
.wclub-alone {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40);
	max-width: var(--wclub-frame); box-sizing: border-box; margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--wclub-gutter) var(--wp--preset--spacing--60);
}
.wclub-alone__media { display: grid; place-items: center; padding: var(--wp--preset--spacing--40) var(--wclub-gutter); background: var(--wclub-sun); }
.wclub-alone__img { display: block; width: auto; height: auto; max-width: 100%; }
.wclub-alone.is-wine .wclub-alone__img { max-height: min(60vh, 30rem); }
.wclub-alone.is-book .wclub-alone__img { max-height: min(55vh, 26rem); box-shadow: 0 12px 28px rgba(34, 34, 34, .18); }
.wclub-alone__text > * { margin: 0 0 1rem; max-width: 40rem; }
.wclub-alone__title { font-size: var(--wp--preset--font-size--heading-2); line-height: 1.1; margin-bottom: .5rem; }
.wclub-alone__sub { color: var(--wclub-fg-2); }
.wclub-alone__in { margin-block: var(--wp--preset--spacing--40); padding-block: 1.25rem; border-block: 1px solid var(--wclub-line); }
.wclub-alone__in p { margin: 0 0 .75rem; }
.wclub-alone__in .wclub-btn { margin-top: .5rem; }
.wclub-alone__note { color: var(--wclub-fg-2); }
.wclub-alone__sheet { margin-top: var(--wp--preset--spacing--40); }
.wclub-alone__h2 { font-size: var(--wp--preset--font-size--heading-3); line-height: 1.2; margin: 0 0 1rem; }
@media (min-width: 60em) {
	.wclub-alone { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
	.wclub-alone.no-media { grid-template-columns: minmax(0, 1fr); } /* No photo yet: the text alone. */
	.wclub-alone__media { position: sticky; top: var(--wp--preset--spacing--40); min-height: min(75vh, 40rem); }
	.wclub-alone.is-wine .wclub-alone__img { max-height: min(70vh, 36rem); }
}

/* ---------------------------------------------------------------- the buy bar (phones) */
.wclub-buybar {
	position: fixed; inset: auto 0 0; z-index: 30;
	display: flex; align-items: center; gap: .75rem;
	padding: .625rem var(--wclub-gutter) calc(.625rem + env(safe-area-inset-bottom, 0px));
	background: var(--wclub-champanhe); border-top: 1px solid var(--wclub-line);
}
.wclub-buybar__what { font-family: var(--wp--preset--font-family--fraunces); font-size: 1.125rem; white-space: nowrap; }
.wclub-buybar__total { margin-inline-start: auto; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wclub-buybar .wclub-btn { padding-inline: 1rem; }
@media (min-width: 60em) { .wclub-buybar { display: none; } }
@media (max-width: 22.5em) { .wclub-buybar__what { display: none; } }

/* ---------------------------------------------------------------- store notices (WooCommerce) */
.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-error, .woocommerce-info {
	display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 1.25rem; padding: .875rem 1rem;
	border: 0; border-left: 3px solid var(--wclub-earth); background: var(--wclub-sun); color: var(--wclub-earth);
	list-style: none;
}
.wc-block-components-notice-banner.is-error, .woocommerce-error { border: 3px solid var(--wclub-wine); background: var(--wclub-champanhe); }
.wc-block-components-notice-banner > svg { flex: none; width: 1.25rem; height: 1.25rem; fill: currentColor; }
.wc-block-components-notice-banner a, .woocommerce-message a { color: var(--wclub-earth); }

/* ---------------------------------------------------------------- the subscription page (inc/product.php; form from Wine Club Core) */
.wclub-sub { display: grid; gap: 1.25rem; }
.wclub-sub fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.wclub-sub legend { padding: 0; margin-bottom: .25rem; font-size: 1rem; font-weight: 500; }
.wclub-sub .wclub-sub__what { grid-template-columns: 1fr 1fr; }
.wclub-sub__option {
	display: flex; flex-direction: column; gap: .2rem; margin: 0; padding: 1rem; box-sizing: border-box;
	border: 1px solid var(--wclub-earth); color: var(--wclub-earth);
}
.wclub-sub__option strong { font-weight: 500; }
.wclub-sub__option.is-on { box-shadow: inset 0 0 0 2px var(--wclub-earth); }
.wclub-sub__option.is-later { border-color: var(--wclub-pedra); color: var(--wclub-fg-2); } /* fg-2 on Champanhe: 5.3 */
.wclub-sub__option span { font-size: var(--wp--preset--font-size--small); }
.wclub-sub .wclub-choices label span { font-size: var(--wp--preset--font-size--small); font-variant-numeric: tabular-nums; }
.wclub-sub__terms { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wclub-earth); }
/* The first box, chosen before paying; the gift's later months only with "É para oferecer". */
.wclub-sub .wclub-sub__first { grid-template-columns: 1fr 1fr; }
/* Only one month to choose (November: December's pre-sale; after the cut-off day): the whole width. */
.wclub-sub .wclub-sub__first.is-single > label:not([data-wclub-offer-only]) { grid-column: 1 / -1; }
.wclub-sub:not(:has(input[name="wclub_offer"]:checked)) [data-wclub-offer-only] { display: none; }

/* The twelve boxes: the commitment lights up as many. */
.wclub-boxes { margin-top: 1.75rem; }
.wclub-boxes__title { margin: 0 0 .75rem; font-size: var(--wp--preset--font-size--small); color: var(--wclub-fg-2); }
.wclub-boxes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: .375rem; }
@media (min-width: 36em) { .wclub-boxes__list { grid-template-columns: repeat(12, 1fr); } }
.wclub-boxes__list li {
	display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--wclub-pedra);
	font-family: var(--wp--preset--font-family--fraunces); font-size: .875rem; color: var(--wclub-fg-2);
}
.wclub-boxes__list li.is-on { background: var(--wclub-earth); border-color: var(--wclub-earth); color: var(--wclub-champanhe); }

/* "Como funciona": I, II, III. */
.wclub-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.wclub-steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding-top: .75rem; border-top: 1px solid var(--wclub-line); }
.wclub-steps__n { font-family: var(--wp--preset--font-family--fraunces); font-size: 1.375rem; line-height: 1.2; }

/* "É para oferecer" (Wine Club Core: wclub_offer_fields_html). Works without JavaScript. */
.wclub-sub__gift { display: grid; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--wclub-line); }
.wclub-sub__gift > .wclub-check { display: grid; grid-template-columns: 1.5rem 1fr; gap: .75rem; align-items: center; min-height: 44px; margin: 0; }
.wclub-sub__gift .wclub-check input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--wclub-wine); }
.wclub-sub__gift .wclub-check label { font-weight: 500; cursor: pointer; }
.wclub-sub__giftmore { display: grid; gap: 1rem; }
.wclub-sub__gift:not(:has(> .wclub-check input:checked)) .wclub-sub__giftmore { display: none; }
.wclub-sub__giftmore .wclub-check { display: grid; grid-template-columns: 1.5rem 1fr; gap: .75rem; align-items: center; min-height: 44px; margin: 0; }
.wclub-sub__giftmore .wclub-check label { font-weight: 400; }
.wclub-sub .wclub-field { display: grid; gap: .4rem; margin: 0; }
.wclub-sub .wclub-field label { font-weight: 500; }
.wclub-sub textarea {
	box-sizing: border-box; width: 100%; min-height: 48px; padding: .65rem .75rem; border: 0; border-bottom: 1px solid var(--wclub-earth); border-radius: 0;
	background: var(--wclub-sun); color: var(--wclub-earth); font: inherit;
}
.wclub-sub .wclub-hint { margin: 0; }
/* The price: per month for oneself, the total at once for a gift. */
.wclub-sub__pay { display: grid; gap: .75rem; }
.wclub-sub:has(input[name="wclub_offer"]:checked) .wclub-sub__pay--monthly,
.wclub-sub:not(:has(input[name="wclub_offer"]:checked)) .wclub-sub__pay--offer { display: none; }