/*
 * WooCommerce pages (product, cart, checkout, order received) on the graphite ground. WooCommerce's block styles assume a
 * light page, so fields, panels and notices are restyled here with the theme.json tokens.
 */
body {
	--sk-field-bg: var(--wp--preset--color--raise);
	--sk-field-border: color-mix(in srgb, var(--wp--preset--color--line) 70%, var(--wp--preset--color--dim));
}

/* Form fields: text, select, combobox, textarea, quantity */
body :is(.wc-block-components-text-input, .wc-block-components-combobox, .wc-blocks-components-select, .wc-block-components-textarea, .wc-block-components-form) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
body .wc-block-components-textarea,
body .quantity input.qty,
body input.sk-qty,
body .wc-block-components-quantity-selector,
body :is(.woocommerce, .wc-block-components-form) :is(input.input-text, select, textarea) {
	background-color: var(--sk-field-bg) !important;
	color: var(--wp--preset--color--text) !important;
	border: 1px solid var(--sk-field-border) !important;
	border-radius: var(--wp--custom--radius--field) !important;
	box-shadow: none !important;
}
/* The field colour above also colours a placeholder (WooCommerce's textarea rule passes it on as currentColor), which then
 * reads as text the buyer typed: hints take the labels' dim colour. The class in :is() outweighs WooCommerce's rule. */
body :is(input, textarea, .wc-block-components-textarea)::placeholder { color: var(--wp--preset--color--dim); opacity: 1; }
body :is(.wc-block-components-text-input, .wc-block-components-combobox, .wc-blocks-components-select) :is(input, select):focus,
body .wc-block-components-textarea:focus,
body .quantity input.qty:focus,
body input.sk-qty:focus {
	border-color: var(--wp--preset--color--gold) !important;
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--gold) 40%, transparent) !important;
	outline-offset: 0 !important;
}
body :is(.wc-block-components-text-input, .wc-block-components-combobox, .wc-blocks-components-select, .wc-block-components-textarea) label,
body .wc-blocks-components-select__label {
	color: var(--wp--preset--color--dim) !important;
}
/* The select sits in a container with its own light background and smaller radius, which showed as light corners. */
body .wc-blocks-components-select .wc-blocks-components-select__container { background: transparent; border-radius: var(--wp--custom--radius--field); }
body .wc-blocks-components-select .wc-blocks-components-select__expand { fill: var(--wp--preset--color--text); }
body .wc-blocks-components-select__select option { background: var(--wp--preset--color--raise); color: var(--wp--preset--color--text); }
body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { background: transparent !important; border: 0 !important; color: var(--wp--preset--color--text) !important; }
body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { color: var(--wp--preset--color--text); }
body .wc-block-components-text-input.has-error input,
body .wc-block-components-combobox.has-error input { border-color: var(--wp--preset--color--danger) !important; }
body .wc-block-components-validation-error { color: var(--wp--preset--color--danger); }

/* Checkboxes and radio buttons */
body .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"],
body .wc-block-components-radio-control__input {
	background-color: var(--sk-field-bg) !important;
	border: 1px solid var(--sk-field-border) !important;
}
body .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--wp--preset--color--gold); }
body .wc-block-components-radio-control__input:checked::before { background: var(--wp--preset--color--gold) !important; }
/* Delivery and payment options: each option is a card of its own with one border, gold when chosen. WooCommerce frames
   the whole group and draws the chosen option's frame inside it, so the two lines doubled where they met. */
body .wc-block-components-radio-control--highlight-checked { display: flex; flex-direction: column; gap: 8px; border: 0 !important; box-shadow: none !important; }
body .wc-block-components-radio-control--highlight-checked::after { display: none !important; }
body .wc-block-components-radio-control--highlight-checked > :is(.wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option) {
	margin: 0 !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--radius--field);
	box-shadow: none !important;
}
body .wc-block-components-radio-control--highlight-checked > :is(.wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option)::after { display: none !important; }
body .wc-block-components-radio-control--highlight-checked > :is(.wc-block-components-radio-control__option--checked-option-highlighted, .wc-block-components-radio-control-accordion-option--checked-option-highlighted) { border-color: var(--wp--preset--color--gold) !important; }
body .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option > .wc-block-components-radio-control__option { border: 0 !important; box-shadow: none !important; }
/* An option's logo, on a white tile so dark marks stay readable (functions.php names the file per option). */
body .wc-block-components-radio-control__label::before { display: inline-block; vertical-align: middle; box-sizing: border-box; width: 64px; height: 28px; padding: 5px 8px; margin: -5px 12px -5px 0; border-radius: 4px; background: #fff center / contain no-repeat; background-origin: content-box; }
body .wc-block-components-radio-control__description,
body .wc-block-components-radio-control__secondary-label { color: var(--wp--preset--color--dim); }
/* The ING Pay plugin centres its option's description under a gap; it starts at the left like bank transfer's. */
body .imoje-payment-method-container { margin-top: 0; }
body .imoje-payment-method-container__title { display: block; padding-bottom: 0; }

/* Panels, lines and secondary text */
body :is(.wc-block-components-sidebar-layout, .wc-block-cart, .wc-block-checkout) { color: var(--wp--preset--color--text); }
body .wp-block-woocommerce-checkout-order-summary-block,
body .wc-block-components-totals-wrapper,
body .wc-block-components-panel,
body .wc-block-cart-items,
body .wc-block-cart-items td,
body .wc-block-cart-items th,
body .wc-block-components-order-summary-item,
body .wc-block-components-checkout-step,
body .wc-block-components-checkout-order-summary__title,
body .wc-block-components-sidebar .wc-block-components-panel,
body .wp-block-woocommerce-checkout-actions-block,
body .wc-block-checkout__terms { border-color: var(--wp--preset--color--line) !important; }
body .wp-block-woocommerce-checkout-order-summary-block { background: var(--wp--preset--color--raise); border-radius: var(--wp--custom--radius--card); }
/* Below desktop width WooCommerce shows the order summary twice: folded at the top of the checkout, and again above
   the order button. Only the one above the button stays, with its panel inside its own border rather than behind the
   heading and the space before the button. */
body .wc-block-checkout__sidebar:not(.is-large) { display: none; }
body .checkout-order-summary-block-fill-wrapper { background: none; }
body .checkout-order-summary-block-fill { background: var(--wp--preset--color--raise); border-radius: var(--wp--custom--radius--card); }
body :is(.wc-block-components-product-metadata, .wc-block-components-checkout-step__description, .wc-block-components-totals-item__description, .wc-block-checkout__terms, .wc-block-components-address-card) { color: var(--wp--preset--color--dim); }
body .wc-block-components-order-summary-item__quantity { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--on-gold); border-color: var(--wp--preset--color--ground); box-shadow: none; }
body .wc-block-components-product-name { color: var(--wp--preset--color--text); font-weight: 600; }
body .wc-block-cart-items__row .wc-block-components-product-name { color: var(--wp--preset--color--gold); }
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: var(--wp--preset--font-size--lg); font-weight: 700; }
body .wc-block-components-title.wc-block-components-title { font-size: var(--wp--preset--font-size--lg); font-weight: 700; letter-spacing: var(--wp--custom--letter-spacing--heading); }
body .wc-block-components-checkout-step__heading { margin-top: var(--wp--preset--spacing--m); }
body .wc-block-components-address-card { background: var(--wp--preset--color--raise); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--field); }
/* Required fields: a star after the field's name, explained under the page title (patterns/required-note.php). */
body .wc-block-components-text-input:has(> input[required]) > label::after,
body .wc-blocks-components-select:has(select[required]) label::after { content: " *"; color: var(--wp--preset--color--gold); }
.sk-required-note { margin-top: calc(-1 * var(--wp--preset--spacing--xs, 8px)); color: var(--wp--preset--color--dim); font-size: var(--wp--preset--font-size--sm); }
.sk-required-note span { color: var(--wp--preset--color--gold); }

/* The cart has not asked for a courier yet: its totals say "Wysyłka", free, without naming one. */
body .wp-block-woocommerce-cart .wc-block-components-totals-shipping__via { display: none; }

/* The order summary's product names link to the products (assets/js/checkout.js) and look like the cart's. */
body .wc-block-components-order-summary-item .sk-summary-link { color: inherit; text-decoration: none; }
body .wc-block-components-order-summary-item .sk-summary-link:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); }

/* Guest checkout is the only kind there is: the shop has no accounts, so the notice says nothing. */
body .wc-block-checkout__guest-checkout-notice { display: none; }

body .wc-block-components-address-card__edit,
body .wc-block-components-checkout-return-to-cart-button { color: var(--wp--preset--color--gold); }

/* Buttons from WooCommerce blocks follow the theme's pill button */
body :is(.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .single_add_to_cart_button, .wp-block-button__link) {
	background: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--on-gold) !important;
	border: 0 !important;
	border-radius: var(--wp--custom--radius--pill) !important;
	font-weight: 700;
}
body :is(.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .single_add_to_cart_button):hover { background: var(--wp--preset--color--text) !important; }
body .wc-block-components-button:not(.is-link) .wc-block-components-button__text { color: inherit; }
/* The order button while the checkout is incomplete (mu-plugins/superkomputery/order-gate.php): outlined instead of filled,
 * still clickable, and its label stays readable because the law requires that wording on it. */
body .wc-block-components-checkout-place-order-button.sk-order-incomplete,
body .wc-block-components-checkout-place-order-button.sk-order-incomplete:hover { background: var(--wp--preset--color--raise) !important; color: var(--wp--preset--color--dim) !important; box-shadow: inset 0 0 0 1px var(--wp--preset--color--line); opacity: 1 !important; cursor: pointer !important; }
.sk-order-hint { margin: 10px 0 0; text-align: center; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--dim); }
body .wc-block-components-button.is-link { color: var(--wp--preset--color--gold); }

/* Notices */
body :is(.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-info, .woocommerce-error) {
	background: var(--wp--preset--color--raise) !important;
	color: var(--wp--preset--color--text) !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-left: 3px solid var(--wp--preset--color--gold) !important;
	border-radius: var(--wp--custom--radius--field);
}
body .wc-block-components-notice-banner.is-error { border-left-color: var(--wp--preset--color--danger) !important; }
body .wc-block-components-notice-banner > svg { background: transparent !important; fill: var(--wp--preset--color--gold) !important; }
body .wc-block-components-notice-banner.is-error > svg { fill: var(--wp--preset--color--danger) !important; }
body .wc-block-components-notice-banner a { color: var(--wp--preset--color--gold); }

/* Checkout: the way back to the cart */
.sk-back { margin: 0 0 var(--wp--preset--spacing--xs); }
.sk-back a { display: inline-flex; align-items: center; gap: 6px; }

/* Product page */
.sk-product { gap: var(--wp--preset--spacing--l) !important; padding-top: var(--wp--preset--spacing--s); }
.sk-product__summary > * + * { margin-block-start: var(--wp--preset--spacing--s); }
.sk-product__title { font-size: var(--wp--preset--font-size--xxl); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin-block-start: 8px !important; text-wrap: balance; }
.sk-product .wc-block-components-product-price, .sk-product__price { font-size: var(--wp--preset--font-size--xl) !important; font-weight: 700; color: var(--wp--preset--color--text); line-height: 1; margin-block-start: var(--wp--preset--spacing--m) !important; }
.sk-product__tax { color: var(--wp--preset--color--dim); font-size: var(--wp--preset--font-size--xs); margin-block-start: 6px !important; }
.sk-product__excerpt { color: color-mix(in srgb, var(--wp--preset--color--text) 88%, var(--wp--preset--color--ground)); max-width: 52ch; }
.sk-product__excerpt p { margin: 0; }
.sk-product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: var(--wp--preset--spacing--s) 0 0; padding: 0; }
.sk-product form.cart::before, .sk-product form.cart::after { content: none !important; } /* WooCommerce's clearfix (its rule outranks this one) would be a flex item, and the gap after it would push the quantity right */
.sk-product .quantity input.qty { width: 4.5em; height: 46px; margin: 0; text-align: center; padding: 0 8px; }
.sk-product .single_add_to_cart_button { padding: 13px 28px !important; font-size: var(--wp--preset--font-size--base) !important; }
.sk-product .stock { margin: var(--wp--preset--spacing--s) 0 0; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--dim) !important; display: inline-flex; align-items: center; gap: 7px; }
.sk-product .stock.in-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--stock); }
.sk-product .woocommerce-product-gallery { margin: 0; }
.sk-product .woocommerce-product-gallery__wrapper, .sk-product .flex-viewport { background: var(--sk-photo-bg); border-radius: var(--wp--custom--radius--card); overflow: hidden; }
.sk-product .woocommerce-product-gallery__image { aspect-ratio: 1; display: flex !important; align-items: center; justify-content: center; }
.sk-product .woocommerce-product-gallery__image a { display: contents; }
.sk-product .woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: contain; }
.sk-product .flex-control-thumbs { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; padding: 0; margin: 14px 0 0 !important; overflow: visible !important; } /* WooCommerce's overflow: hidden would clip the outline below */
.sk-product .flex-control-thumbs li { width: 72px !important; }
.sk-product .flex-control-thumbs img { aspect-ratio: 1; object-fit: contain; background: var(--sk-photo-bg); padding: 4px; box-sizing: border-box; opacity: 1 !important; cursor: pointer; border-radius: var(--wp--custom--radius--field); outline: 2px solid transparent; outline-offset: 2px; }
/* On white, dimming would turn a thumbnail grey: the current one is marked by a gold outline instead. */
.sk-product .flex-control-thumbs img:hover { outline-color: var(--wp--preset--color--line); }
.sk-product .flex-control-thumbs img.flex-active { outline-color: var(--wp--preset--color--gold); }
.sk-product__details { margin-top: var(--wp--preset--spacing--l); }
.sk-product__details .wc-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; padding: 0 !important; margin: 0 0 var(--wp--preset--spacing--m) !important; border-bottom: 1px solid var(--wp--preset--color--line); }
.sk-product__details .wc-tabs li { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
/* WooCommerce's tab styles are more specific (.woocommerce div.product .woocommerce-tabs ul.tabs li.active a): they would grey
   every tab, the open one too, and draw a pale line of their own under the row. */
.sk-product__details .wc-tabs::before, .sk-product__details .wc-tabs li::before, .sk-product__details .wc-tabs li::after { display: none !important; }
.sk-product__details .wc-tabs a { display: block; padding: 10px 0; color: var(--wp--preset--color--dim) !important; text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sk-product__details .wc-tabs li.active a { color: var(--wp--preset--color--text) !important; border-bottom-color: var(--wp--preset--color--gold); }
.sk-product__details .wc-tabs a:hover { color: var(--wp--preset--color--text) !important; }
.sk-product__details .woocommerce-Tabs-panel { max-width: 760px; }
.sk-product__details .woocommerce-Tabs-panel > h2:first-child { display: none; }
.sk-product__details table.shop_attributes { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--sm); }
.sk-product__details table.shop_attributes :is(th, td) { border-bottom: 1px solid var(--wp--preset--color--line); padding: 9px 12px 9px 0; text-align: left; vertical-align: top; font-weight: 400; }
.sk-product__details table.shop_attributes th { color: var(--wp--preset--color--dim); width: 38%; }
.sk-product__details table.shop_attributes p { margin: 0; }

/* Phone: one column, the gallery first */
@media (max-width: 781px) {
	.sk-product { flex-direction: column; }
	.sk-product > .wp-block-column { flex-basis: 100% !important; }
}
.sk-product .quantity { margin: 0 !important; }

/* Catalogue (/produkty/): one card per product; a coming-soon card is dimmed and has no price */
.sk-catalogue__lede { color: var(--wp--preset--color--dim); font-size: var(--wp--preset--font-size--md); margin: 0 0 var(--wp--preset--spacing--l); }
/* Rows the cards share through subgrid: photo, title, text, price, stock, buy form, link. A card's parts therefore start at the
   same height as its neighbours' (the stock lines and the "Szczegóły" links line up), whatever each one holds. */
.sk-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); grid-auto-rows: auto; gap: var(--wp--preset--spacing--m); }
.sk-card { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; background: var(--wp--preset--color--raise); border: var(--sk-line); border-radius: var(--wp--custom--radius--card); overflow: hidden; }
.sk-card__media { position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--sk-photo-bg); }
/* The makers' photos are on white, so every picture box is a white panel: a photo of any shape sits in it whole, without a seam.
   Two classes, to outrank WooCommerce's `.woocommerce-page img { height: auto }`. */
.sk-card .sk-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; display: block; }
.sk-card__mark { width: 64px; height: 64px; fill: var(--wp--preset--color--line); }
.sk-card__body { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 10px; align-items: start; padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--s) var(--wp--preset--spacing--m); }
.sk-card__title { margin: 0; font-size: var(--wp--preset--font-size--lg); font-weight: 700; letter-spacing: var(--wp--custom--letter-spacing--heading); line-height: var(--wp--custom--line-height--heading); }
.sk-card__title a { color: var(--wp--preset--color--text); text-decoration: none; }
.sk-card__title a:hover { color: var(--wp--preset--color--gold); }
.sk-card__text { margin: 0; color: var(--wp--preset--color--dim); font-size: var(--wp--preset--font-size--sm); }
.sk-card__price { padding-top: 6px; }
.sk-card__actions { display: flex; flex-wrap: wrap; align-items: center; align-self: stretch; gap: 12px 18px; }
.sk-card .sk-btn { padding: 11px 24px; }
.sk-card--soon .sk-card__title { color: color-mix(in srgb, var(--wp--preset--color--text) 80%, var(--wp--preset--color--ground)); }
.sk-stock--soon::before { background: var(--wp--preset--color--gold); }

/* Empty cart: the header's cart icon in a round frame above WooCommerce's message, in place of its sad face (a mask on the
   heading's ::before, so the mask is cleared and the icon is a background). --sk-empty-cart-icon is the frame's diameter; the icon is
   half of it. The stroke colour in the data URI is --wp--preset--color--gold (#cbb48c), which a background image cannot read as a variable. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon { --sk-empty-cart-icon: 112px; }
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	content: ""; display: block; box-sizing: border-box; width: var(--sk-empty-cart-icon); height: var(--sk-empty-cart-icon); margin: 0 auto var(--wp--preset--spacing--m);
	border: 1px solid var(--wp--preset--color--line); border-radius: 50%; background-color: var(--wp--preset--color--raise);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbb48c' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.6l2.4 11.2a1.5 1.5 0 0 0 1.5 1.2h8.4a1.5 1.5 0 0 0 1.5-1.1l1.6-6.3H6.1'/%3E%3Ccircle cx='9.5' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 50%;
	-webkit-mask: none; mask: none;
}

/* Buy control (catalogue cards): quantity, then "Dodaj do koszyka" */
.sk-buy__form { display: flex; align-items: center; gap: 10px; }
.sk-qty { width: 4.5em; height: 46px; box-sizing: border-box; text-align: center; padding: 0 8px; font: inherit; }

/* A coming-soon product's page: the label and the question in place of the buy form */
.sk-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-block-start: var(--wp--preset--spacing--m) !important; }
.sk-product .sk-note { color: var(--wp--preset--color--dim); font-size: var(--wp--preset--font-size--sm); }

/* Order received (templates/order-confirmation.html): the line under the heading reads like a page lede, and what to do
   next (the ING Pay button, or the bank details) comes right after the order's number and total. */
body .wc-block-order-confirmation-status p { font-size: var(--wp--preset--font-size--md) !important; color: var(--wp--preset--color--dim); margin-top: 0; }
body .sk-received__next { margin-block: var(--wp--preset--spacing--m); }
/* The additional fields as a two-column list framed like the totals table; WooCommerce's narrow-screen rules for it
   drop the padding and cut the frame. */
body .wc-block-components-additional-fields-list { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; margin: 0; border: 1px solid var(--wp--preset--color--line) !important; border-radius: var(--wp--custom--radius--field); }
body .wc-block-components-additional-fields-list :is(dt, dd) { margin: 0 !important; padding: 14px 16px !important; border: 0 !important; border-top: 1px solid var(--wp--preset--color--line) !important; width: auto !important; }
body .wc-block-components-additional-fields-list :is(dt, dd):first-of-type { border-top: 0 !important; }
body .wc-block-components-additional-fields-list dd { text-align: right; }