/**
 * Shop screens (artboards 02–06): product page layout, WooCommerce Cart and
 * Checkout blocks, order confirmation, My Account. Component styles of the
 * shop blocks live in popcorn-core (assets/css/*.css).
 *
 * Tokens only; logical properties only (the order summary sits on the right
 * in LTR and on the left in RTL automatically).
 *
 * @package popcorn
 */

/* Archives ---------------------------------------------------------------- */
.pc-shop-archive__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding-block-end: var(--space-9);
}

.pc-archive-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Product page ------------------------------------------------------------ */
.pc-product-page__summary,
.pc-product-page__sections {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

.pc-product-page__sections {
	padding-block: var(--space-7) var(--space-9);
}

.pc-product-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-7);
	align-items: start;
}

.pc-product-summary {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-inline-size: 0;
}

.pc-product-summary > * {
	margin-block: 0;
}

.pc-product-title {
	font-family: var(--font-heading);
	font-size: var(--font-size-display);
	line-height: var(--line-height-display);
}

.pc-product-intro,
.pc-product-intro p {
	margin: 0;
	color: var(--color-ink-muted);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}

.pc-product-sections {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5);
}

.pc-product-sections > .pc-product-section--benefits,
.pc-product-sections > .pc-product-section--age_breakdown,
.pc-product-sections > .pc-product-section--shipping {
	grid-column: 1 / -1;
}

.pc-product-reviews {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.pc-product-reviews__heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
}

.pc-product-reviews .wc-block-product-review-template,
.pc-product-reviews ol {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-review {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.pc-review__meta {
	color: var(--color-ink-muted);
	font-size: var(--font-size-small);
}

/* Marigold stars everywhere WooCommerce prints a rating. */
.pc-shop .star-rating span::before,
.pc-shop .wc-block-components-product-rating__stars span::before,
.pc-shop .stars a,
.pc-shop .wc-block-product-review-rating .star-rating span::before,
.pc-shop .comment-form-rating .stars a {
	color: var(--color-brand);
}

.pc-shop .star-rating::before {
	color: var(--color-line);
}

.pc-product-reviews textarea,
.pc-product-reviews input[type="text"],
.pc-product-reviews input[type="email"] {
	inline-size: 100%;
	padding: var(--space-3) var(--space-4);
	border: var(--border-width-field) solid var(--color-ink-muted);
	border-radius: var(--radius-input);
	background-color: var(--color-surface);
	color: var(--color-ink);
	font: inherit;
}

.pc-product-reviews :is(input, textarea):focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

.pc-product-reviews .form-submit input[type="submit"],
.pc-product-reviews .wp-block-button__link {
	padding: var(--space-3) var(--space-6);
	border: var(--border-width-strong) solid var(--color-ink);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-ink);
	font-weight: 700;
	cursor: pointer;
}

@media (max-width: 781px) {
	.pc-product-hero,
	.pc-product-sections {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-5);
	}

	.pc-product-title {
		font-size: var(--font-size-h1);
		line-height: var(--line-height-h1);
	}

	.pc-product-stock__price .pc-price {
		font-size: var(--font-size-h1);
		line-height: var(--line-height-h1);
	}
}

/* Cart and checkout (WooCommerce blocks) ---------------------------------- */
.pc-cart-page,
.pc-checkout-page {
	padding-block-end: var(--space-9);
}

.pc-shop--calm .wc-block-components-sidebar-layout {
	gap: var(--space-6);
}

.pc-shop--calm .wc-block-components-main > *,
.pc-shop--calm .wc-block-cart-items,
.pc-shop--calm .wc-block-checkout__form > fieldset,
.pc-shop--calm .wc-block-components-checkout-step {
	color: var(--color-ink);
}

/* White panels on Peach. */
.pc-shop--calm .wc-block-components-sidebar .wc-block-components-totals-wrapper:first-child,
.pc-shop--calm .wc-block-cart__sidebar,
.pc-shop--calm .wc-block-checkout__sidebar,
.pc-shop--calm .wc-block-components-checkout-step {
	border-radius: var(--radius-card);
}

.pc-shop--calm .wc-block-cart__sidebar,
.pc-shop--calm .wc-block-checkout__sidebar {
	align-self: flex-start;
	padding: var(--space-5);
	border: var(--border-width) solid var(--color-line);
	background-color: var(--color-card);
	box-shadow: var(--shadow-soft);
}

.pc-shop--calm .wc-block-components-checkout-step {
	margin-block-end: var(--space-5);
	padding: var(--space-5);
	border: var(--border-width) solid var(--color-line);
	background-color: var(--color-card);
}

.pc-shop--calm .wc-block-components-checkout-step__title,
.pc-shop--calm .wc-block-cart__totals-title,
.pc-shop--calm .wc-block-components-title {
	font-family: var(--font-heading);
	font-size: var(--font-size-h3);
	font-weight: 700;
	color: var(--color-ink);
	text-transform: none;
}

.pc-shop--calm .wc-block-cart-items {
	border-collapse: separate;
	border-spacing: 0 var(--space-3);
}

.pc-shop--calm .wc-block-cart-items__row {
	background-color: var(--color-card);
}

.pc-shop--calm .wc-block-cart-items__row > td:first-child {
	border-start-start-radius: var(--radius-card);
	border-end-start-radius: var(--radius-card);
}

.pc-shop--calm .wc-block-cart-items__row > td:last-child {
	border-start-end-radius: var(--radius-card);
	border-end-end-radius: var(--radius-card);
}

.pc-shop--calm .wc-block-cart-item__image img,
.pc-shop--calm .wc-block-components-order-summary-item__image img {
	border-radius: var(--radius-input);
	background-color: var(--color-surface);
}

.pc-shop--calm .wc-block-components-product-name {
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--color-ink);
	text-decoration: none;
}

/* Inputs: surface fill, 12px radius, ink-muted 1.5px border, focus ring. */
.pc-shop--calm .wc-block-components-text-input input,
.pc-shop--calm .wc-block-components-combobox .components-combobox-control input,
.pc-shop--calm .wc-blocks-components-select .wc-blocks-components-select__select,
.pc-shop--calm .wc-block-components-textarea,
.pc-shop--calm .wc-block-components-quantity-selector {
	border: var(--border-width-field) solid var(--color-ink-muted);
	border-radius: var(--radius-input);
	background-color: var(--color-surface);
	color: var(--color-ink);
}

.pc-shop--calm .wc-block-components-quantity-selector {
	border-radius: var(--radius-pill);
	background-color: var(--color-card);
}

.pc-shop--calm .wc-block-components-text-input label,
.pc-shop--calm .wc-blocks-components-select__label {
	color: var(--color-ink-muted);
}

.pc-shop--calm .wc-block-components-text-input input:focus,
.pc-shop--calm .wc-blocks-components-select__select:focus {
	outline: none;
	box-shadow: var(--focus-ring);
}

.pc-shop--calm .wc-block-components-validation-error,
.pc-shop--calm .wc-block-components-validation-error p {
	color: var(--color-error);
}

.pc-shop--calm .wc-block-components-radio-control__option,
.pc-shop--calm .wc-block-components-radio-control-accordion-option {
	color: var(--color-ink);
}

.pc-shop--calm .wc-block-components-radio-control__input:checked {
	border-color: var(--color-ink);
}

.pc-shop--calm .wc-block-components-radio-control__input:checked::before {
	background-color: var(--color-ink);
}

/* The one Rumba button on cart (Checkout) and checkout (Place order). */
.pc-shop--calm .wc-block-cart__submit-button,
.pc-shop--calm .wc-block-components-checkout-place-order-button {
	min-block-size: calc(var(--touch-target) + var(--space-3));
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--color-cta);
	box-shadow: var(--shadow-cta);
	color: var(--color-on-dark);
	font-family: var(--font-body);
	font-size: var(--font-size-button);
	line-height: var(--line-height-button);
	font-weight: 700;
	text-decoration: none;
}

.pc-shop--calm .wc-block-cart__submit-button:hover,
.pc-shop--calm .wc-block-components-checkout-place-order-button:hover {
	background-color: var(--color-cta-strong);
	transform: translateY(-1px);
}

.pc-shop--calm .wc-block-cart__submit-button:focus-visible,
.pc-shop--calm .wc-block-components-checkout-place-order-button:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Other WooCommerce buttons (coupon apply, calculator) stay secondary. */
.pc-shop--calm .wc-block-components-totals-coupon__button,
.pc-shop--calm .wc-block-components-shipping-calculator-address__button {
	border: var(--border-width-strong) solid var(--color-ink);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-ink);
	font-weight: 700;
}

.pc-shop--calm .wc-block-components-totals-item__value,
.pc-shop--calm .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--color-ink);
	font-weight: 700;
}

.pc-shop--calm .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-heading);
	font-size: var(--font-size-price);
}

.pc-shop--calm .wc-block-components-sale-badge {
	border-color: var(--color-cta-strong);
	color: var(--color-cta-strong);
	background-color: var(--color-card);
}

.pc-shop--calm main a:not(.wc-block-cart__submit-button):not(.wp-block-button__link) {
	color: var(--color-ink);
}

/* Cart extras inside the order summary. */
.pc-cart-extras {
	list-style: none;
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	color: var(--color-ink);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: var(--space-4) 0 0;
	padding: var(--space-4);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-input);
	background-color: var(--color-bg);
}

.pc-cart-extras__item {
	position: relative;
	padding-inline-start: var(--space-5);
}

.pc-cart-extras__item::before {
	content: "✓" / "";
	position: absolute;
	inset-inline-start: 0;
	color: var(--color-trust);
	font-weight: 700;
}

.pc-cart-extras__item--free {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-inline-start: 0 !important;
	font-weight: 600;
}

.pc-cart-extras__item--free::before {
	display: none;
}

.pc-cart-extras__bar {
	display: block;
	block-size: 6px;
	overflow: hidden;
	border-radius: var(--radius-pill);
	background-color: var(--color-line);
}

.pc-cart-extras__bar > span {
	display: block;
	block-size: 100%;
	background-color: var(--color-trust);
}

/* Empty cart. */
.pc-empty-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-7);
	text-align: center;
}

.pc-empty-cart > * {
	margin-block: 0;
}

.pc-empty-cart__more {
	margin-block: var(--space-7) var(--space-4);
	font-family: var(--font-heading);
}

/* Checkout header. */
.pc-checkout-page .pc-page-title,
.pc-cart-page .pc-page-title {
	font-family: var(--font-heading);
	font-size: var(--font-size-display);
	line-height: var(--line-height-display);
}

/* Order confirmation ------------------------------------------------------- */
.pc-order-confirmation {
	padding-block-end: var(--space-9);
}

.pc-thanks-details {
	gap: var(--space-5);
}

.pc-thanks-details__heading {
	margin-block: 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--font-size-h3);
}

.pc-order-confirmation .wc-block-order-confirmation-totals table {
	inline-size: 100%;
	border-collapse: collapse;
}

.pc-order-confirmation .wc-block-order-confirmation-totals :is(th, td) {
	padding-block: var(--space-2);
	border-block-end: var(--border-width) solid var(--color-line);
	text-align: start;
}

/* My Account ---------------------------------------------------------------- */
.pc-account .woocommerce {
	display: grid;
	grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
	gap: var(--space-6);
}

.pc-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding: var(--space-3);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-card);
	background-color: var(--color-card);
	list-style: none;
}

.pc-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-input);
	color: var(--color-ink);
	text-decoration: none;
}

.pc-account .woocommerce-MyAccount-navigation .is-active a {
	background-color: var(--color-surface);
	font-weight: 700;
}

.pc-account .woocommerce-MyAccount-content,
.pc-account .woocommerce-form-login,
.pc-account .woocommerce-form-register {
	padding: var(--space-5);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-card);
	background-color: var(--color-card);
}

.pc-account .woocommerce :is(input.input-text, select, textarea) {
	inline-size: 100%;
	padding: var(--space-3) var(--space-4);
	border: var(--border-width-field) solid var(--color-ink-muted);
	border-radius: var(--radius-input);
	background-color: var(--color-surface);
	color: var(--color-ink);
	font: inherit;
}

.pc-account .woocommerce .button {
	padding: var(--space-3) var(--space-6);
	border: var(--border-width-strong) solid var(--color-ink);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-ink);
	font-weight: 700;
}

@media (max-width: 781px) {
	.pc-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Review form: fields stay inside the card; rating stars in Marigold. */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
}
.comment-form-rating .stars a,
.comment-form-rating .stars a::before,
.wc-block-components-review-rating-stars,
.star-rating span::before {
	color: var(--color-brand);
}

/* Cart/checkout: breathing room under the header; inputs use the surface token like the rest of the site. */
.pc-shop--calm main > :first-child {
	margin-block-start: var(--space-7);
}
.wc-block-components-text-input input[type],
.wc-block-components-textarea,
.wc-block-components-form .wc-block-components-text-input input {
	background-color: var(--color-surface);
	border: 1.5px solid var(--color-ink-muted);
	border-radius: var(--radius-input);
}
.wc-block-components-text-input input[type]:focus {
	box-shadow: var(--focus-ring);
	outline: none;
}

/* Classic WooCommerce forms (My Account login/register, lost password) use the shared field look. */
.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form select,
.woocommerce form textarea {
	box-sizing: border-box;
	max-inline-size: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1.5px solid var(--color-ink-muted);
	border-radius: var(--radius-input);
	background-color: var(--color-surface);
	color: var(--color-ink);
	font: inherit;
}
.woocommerce form .input-text:focus,
.woocommerce form input:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus {
	box-shadow: var(--focus-ring);
	outline: none;
}