/* ============================================================
   YGIS — WooCommerce ↔ design bridge
   Styles WooCommerce's own markup (checkout, my-account, notices,
   forms, buttons) into the design system so every shop flow matches
   the source 1:1. Loaded after site.css + components.css.
   ============================================================ */

/* ---- WC buttons → design .btn ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.wc-block-components-button,
.wp-element-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
	background: var(--ink); color: var(--paper);
	padding: 0.92em 1.5em; border-radius: 999px;
	font-family: var(--font-display); font-weight: 500; font-size: 0.92rem;
	letter-spacing: -0.01em; border: 1px solid transparent; cursor: pointer;
	transition: transform .4s var(--ease), background .3s, color .3s, box-shadow .3s;
	white-space: nowrap; line-height: 1.2;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover { transform: translateY(-2px); background: var(--ink); color: var(--paper); }
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.wc-block-components-button.contained {
	background: var(--green); color: var(--green-ink);
}
.woocommerce button.button.alt:hover { box-shadow: 0 8px 28px oklch(0.8 var(--accent-c) var(--accent-h) / 0.4); }

/* full-width submit on checkout/account forms */
#place_order, .woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"],
.woocommerce-Address .button { width: 100%; }

/* ---- WC inputs → design .input ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection,
.woocommerce form .form-row select,
.woocommerce-input-wrapper input,
.woocommerce table.cart td.actions .coupon .input-text {
	width: 100%; background: var(--paper);
	border: 1px solid var(--line); border-radius: 10px;
	padding: 0.85em 1em; font-size: 1rem; min-height: 0;
	transition: border-color .2s, box-shadow .2s; box-shadow: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none; border-color: var(--green-deep);
	box-shadow: 0 0 0 3px oklch(0.8 var(--accent-c) var(--accent-h) / 0.25);
}
.woocommerce form .form-row label,
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.woocommerce-account-fields label {
	font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--muted); margin-bottom: 0.4em;
	display: block; float: none; text-align: left; width: auto;
}
/* WC 10 makes each .form-row its own grid (label lands in a side cell) —
   force the design's stacked label-over-input layout */
.woocommerce form .form-row {
	margin: 0 0 16px; padding: 0; float: none; width: 100%;
	display: flex; flex-direction: column; align-items: stretch;
}

/* two-column field rows, matching the design's .form-row grid */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
}
.woocommerce form .form-row-wide,
.woocommerce form .form-row.notes,
.woocommerce form .form-row[id*="address_1"],
.woocommerce form .form-row[id*="address_2"],
.woocommerce form .form-row[id*="country"],
.woocommerce form .form-row[id*="email"] { grid-column: 1 / -1; }
.woocommerce form .form-row-first { grid-column: 1; }
.woocommerce form .form-row-last { grid-column: 2; }
@media (max-width: 560px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper,
	.woocommerce-additional-fields__field-wrapper,
	.woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { grid-column: 1; }
}

/* radio / checkbox inputs — small, brand-accented (kills the giant dark dot) */
.woocommerce input[type="radio"],
.woocommerce input[type="checkbox"] {
	width: 16px; height: 16px; accent-color: var(--green-deep);
	vertical-align: middle; margin-right: 8px;
}
.woocommerce #order_review .wc_payment_method label { display: inline; font-family: var(--font-body); font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.woocommerce #order_review .wc_payment_methods { list-style: none; margin: 14px 0 0; }
.woocommerce #order_review .wc_payment_method { padding: 8px 0; }
.woocommerce #order_review .payment_box { font-size: 0.82rem; color: var(--muted); padding: 8px 0 0 24px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.6; padding: 0; }
.select2-container .select2-selection--single { height: auto; }

/* ---- Checkout layout → design .shop-layout + .summary ---- */
.woocommerce-checkout form.checkout {
	display: grid; grid-template-columns: 1fr 380px;
	gap: clamp(28px, 4vw, 56px); align-items: start;
}
.woocommerce-checkout #customer_details { float: none; width: auto; grid-column: 1; grid-row: 1; }
/* heading folds into the summary card (design's "Order summary" title) */
.woocommerce-checkout #order_review_heading { display: none; }
.woocommerce-checkout #order_review {
	float: none; width: auto; margin: 0;
	grid-column: 2; grid-row: 1; align-self: start;
	background: var(--paper-2); border: 1px solid var(--line-soft);
	border-radius: var(--radius); padding: 26px;
	position: sticky; top: calc(var(--header-h) + 24px);
}
.woocommerce-checkout #order_review::before {
	content: "Order summary";
	display: block;
	font-family: var(--font-display); font-weight: 500;
	font-size: 1.3rem; line-height: 1.05; letter-spacing: -0.02em;
	margin-bottom: 18px;
}
.woocommerce-checkout h3 { font-size: 1.2rem; margin-bottom: 16px; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { float: none; width: auto; }
.woocommerce-checkout #order_review table.shop_table { border: 0; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	border: 0; border-bottom: 1px solid var(--line-soft); padding: 9px 0; font-size: 0.95rem;
}
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
	border-top: 1px solid var(--line); border-bottom: 0; padding-top: 16px;
	font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
}
@media (max-width: 880px) {
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
	.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1; }
	.woocommerce-checkout #order_review { grid-column: 1; grid-row: 2; position: static; }
}

/* ---- My Account ----
   Layout is owned by the myaccount/my-account.php override (design .acct-grid
   + .acct-nav + .acct-card from components.css). Here: only content-level
   styling for WC endpoint internals (forms, order tables) rendered inside
   .woocommerce-MyAccount-content. */
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 { font-size: 1.2rem; margin-bottom: 16px; }
.woocommerce-MyAccount-content fieldset { border: 0; padding: 0; margin: 18px 0 0; }
.woocommerce-MyAccount-content fieldset legend {
	font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; margin-bottom: 12px;
}
.woocommerce-MyAccount-content form,
.woocommerce-MyAccount-content .woocommerce-address-fields {
	background: var(--paper); border: 1px solid var(--line-soft);
	border-radius: var(--radius); padding: 26px;
}
.woocommerce-MyAccount-content form .form-row { margin-bottom: 16px; }
.woocommerce-Addresses .woocommerce-Address { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 26px; margin-bottom: 20px; }
.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }

/* login / register forms */
.woocommerce form.login, .woocommerce form.register {
	border: 1px solid var(--line-soft); border-radius: var(--radius);
	padding: clamp(26px, 4vw, 44px); background: var(--paper);
}
.woocommerce .col2-set#customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 720px) { .woocommerce .col2-set#customer_login { grid-template-columns: 1fr; } }

/* ---- WC notices → design language ---- */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noticed {
	border-radius: 12px; border: 1px solid var(--line-soft);
	font-size: 0.9rem; padding: 14px 18px 14px 44px; position: relative;
	background: var(--paper-2); color: var(--ink); list-style: none;
}
.woocommerce-message { border-left: 3px solid var(--green); }
.woocommerce-error { border-left: 3px solid oklch(0.68 0.19 25); }
.woocommerce-info { border-left: 3px solid var(--green-deep); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: var(--green-deep); left: 16px; top: 16px; }
.woocommerce-message a.button, .woocommerce-error a.button, .woocommerce-info a.button {
	padding: 0.45em 1em; font-size: 0.8rem; float: right;
}

/* ---- tables (orders, downloads, addresses) ---- */
.woocommerce table.shop_table {
	border: 1px solid var(--line-soft); border-radius: var(--radius);
	border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.woocommerce table.shop_table thead th {
	background: var(--paper-2); font-family: var(--font-mono);
	font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--muted); padding: 15px 20px; border: 0;
}
.woocommerce table.shop_table tbody td { padding: 15px 20px; border-top: 1px solid var(--line-soft); font-size: 0.9rem; }

/* WC quantity input in cart fallbacks */
.woocommerce .quantity .qty {
	width: 64px; text-align: center; border: 1px solid var(--line);
	border-radius: 8px; padding: 0.5em; font-family: var(--font-mono);
}

/* coupon row on cart */
.woocommerce table.cart td.actions .coupon { display: flex; gap: 10px; align-items: center; }

/* pagination */
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 6px; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1px solid var(--line); border-radius: 8px; padding: 0.5em 0.9em;
	font-family: var(--font-mono); font-size: 0.8rem;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* hide default WC product-gallery / breadcrumb leftovers we don't use */
.single-product .product .woocommerce-product-gallery,
.single-product .product > .summary,
.single-product .product > .woocommerce-tabs,
.single-product .related.products { display: none; }
.single-product .product { margin: 0; }

/* generic prose links in legal/account */
.prose a { color: var(--green-deep); }

/* keep WP admin bar from covering sticky header */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* ============================================================
   Real product photography (June 2026) — square product shots.
   The source design used procedural textures that filled any aspect;
   real photos are square (vial centred), so square containers show the
   full vial (cap→base) with object-fit:cover and no cropping.
   ============================================================ */
.pcard__img { aspect-ratio: 1 / 1; }
.pdp__hero { aspect-ratio: 1 / 1; }
@media (max-width: 820px) { .pdp__hero { aspect-ratio: 1 / 1; } }

/* Overlaid catalog code / lot sit on light photos now → darken for legibility,
   with a soft light halo so they also read on the darker fallback placeholder. */
.pcard__code,
.pdp__hero .pdp__code {
  color: var(--muted);
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.55);
}

/* PDP gallery: per-size thumbnails (one real image per vial size). */
.pdp__thumb img { transition: opacity .2s; }

/* ============================================================
   Box-of-10 packaging notes (June 2026).
   ============================================================ */
.pcard__pack {
  margin-top: 8px;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.pdp__pack {
  margin: 4px 0 20px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}


/* ================= CHECKOUT — debranded payment + promo (2026-06-18) ================= */

/* On-brand payment block (overrides the default purple #payment background) */
.woocommerce #payment,
.woocommerce-checkout #payment {
	background: var(--paper-2) !important;
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 16px 18px;
}
.woocommerce #payment ul.payment_methods {
	border-bottom: 1px solid var(--line);
}
.woocommerce #payment div.payment_box {
	background: var(--paper) !important;
	color: var(--muted);
	border-radius: 10px;
	margin: 8px 0 4px;
}
.woocommerce #payment div.payment_box::before {
	border-bottom-color: var(--paper) !important;
}

/* Hide the SHKeeper logo image */
.woocommerce #payment li.payment_method_shkeeper img {
	display: none !important;
}
/* Hide the static "Pay with crypto." line, but only when the currency dropdown is
   present — so genuine error messages stay visible if the list can't load. */
.woocommerce #payment li.payment_method_shkeeper .payment_box:has( #shkeeper_crypto_options ) > p:not(.form-row) {
	display: none !important;
}
/* SHKeeper currency dropdown → match the design's selects */
#shkeeper_crypto_options {
	width: 100%; max-width: 320px; font: inherit;
	padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
	background: var(--paper); color: var(--ink);
}

/* Promo code field inside the order summary */
.ro-promo { margin: 0 0 18px; }
.ro-promo__label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ro-promo__row { display: flex; gap: 8px; }
.ro-promo__input {
	flex: 1; min-width: 0; padding: 11px 12px; font: inherit;
	border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink);
}
.ro-promo__input:focus { outline: none; border-color: var(--green-deep); box-shadow: 0 0 0 3px oklch(0.8 var(--accent-c) var(--accent-h) / 0.25); }
.ro-promo__btn {
	flex: none; padding: 11px 18px; font: inherit; font-weight: 600; cursor: pointer;
	border: 1px solid var(--ink); border-radius: 10px; background: var(--ink); color: var(--paper);
	transition: opacity .15s ease;
}
.ro-promo__btn:hover { opacity: 0.88; }
.ro-promo__btn[disabled] { opacity: 0.5; cursor: default; }
.ro-promo__msg { margin-top: 8px; font-size: 0.8rem; min-height: 1em; }
.ro-promo__msg.is-error { color: #f07167; }
.ro-promo__msg.is-ok { color: var(--green-deep); }

/* "Save 5%" chip beside the Crypto payment method (checkout list only — never
   touches the stored order title or emails, unlike a gateway_title filter) */
.woocommerce #payment label[for="payment_method_shkeeper"]::after,
.woocommerce-checkout #payment label[for="payment_method_shkeeper"]::after {
	content: "Save 5%";
	display: inline-block;
	vertical-align: middle;
	margin-left: 9px;
	padding: 0.3em 0.6em;
	font-family: var(--font-mono);
	font-size: 0.58rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 6px;
	background: var(--green);
	color: var(--green-ink);
}

/* Thank-you crypto pay widget container */
.ro-thankyou-pay { max-width: 520px; margin: 8px auto 24px; }
.ro-thankyou-pay img, .ro-thankyou-pay canvas { max-width: 240px; height: auto; }

/* Bank-transfer (BACS) instructions + WC account-details block, on brand. The
   account numbers come from WC's own "Our bank details" section, so the gateway
   instructions carry only the steps (no duplicated field placeholders). */
.ro-thankyou-pay--offline > p {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--muted);
	margin: 0 0 12px;
}
.ro-thankyou-pay .woocommerce-bacs-bank-details {
	margin-top: 16px;
	padding: 16px 18px;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: 12px;
}
.ro-thankyou-pay .wc-bacs-bank-details-heading {
	font-family: var(--font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 6px;
}
.ro-thankyou-pay .wc-bacs-bank-details-account-name {
	font-family: var(--font-display);
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--ink);
	margin: 0 0 12px;
}
.ro-thankyou-pay ul.wc-bacs-bank-details {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ro-thankyou-pay ul.wc-bacs-bank-details li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 10px 0;
	border-top: 1px solid var(--line);
	font-size: 0.85rem;
	color: var(--muted);
}
.ro-thankyou-pay ul.wc-bacs-bank-details li:first-child {
	border-top: none;
}
.ro-thankyou-pay ul.wc-bacs-bank-details li strong {
	font-family: var(--font-mono);
	font-weight: 500;
	color: var(--ink);
	text-align: right;
}

/* ---- Narrow-screen running total ----
   Below 880px the order summary sits beneath the whole address form, so this
   mirrors the total up to where the buyer can see it while filling the form in.
   Hidden on wider screens, where the sticky summary already shows it. */
.ro-mtotal { display: none; }
@media (max-width: 880px) {
	.woocommerce-checkout .ro-mtotal {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		margin: 0 0 20px;
		padding: 13px 16px;
		background: var(--paper-2);
		border: 1px solid var(--line);
		border-radius: 12px;
	}
	.woocommerce-checkout .ro-mtotal[hidden] { display: none; }
	.ro-mtotal__l {
		font-family: var(--font-mono);
		font-size: 0.62rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--muted);
	}
	.ro-mtotal__v {
		font-family: var(--font-display);
		font-weight: 600;
		font-size: 1.25rem;
		color: var(--ink);
	}
}