/* Cart and Checkout - visual integration only.
 *
 * Both pages are the native WooCommerce Blocks cart/checkout (the Page
 * content is the `woocommerce/cart` / `woocommerce/checkout` block, not a
 * shortcode or a theme template override) rendered through the theme's own
 * generic page.php - the same "real Page, no template override" pattern
 * already used for other simple pages. All WooCommerce functionality
 * (quantity handling, remove, coupons, shipping-method selection, payment
 * method selection, validation, notices) is left completely alone; this
 * file only restyles WooCommerce Blocks' own existing class names.
 *
 * Every rule is scoped under body.woocommerce-cart / body.woocommerce-checkout
 * (WooCommerce's own body classes, present only on these two pages) so
 * nothing here can leak onto any other page. Loaded only when is_cart() or
 * is_checkout() (see functions.php) - never enqueued elsewhere.
 *
 * page.php's own .site-container/.content-page wrapper already gives both
 * pages the sitewide page margins and top/bottom rhythm, so no outer page
 * width is added here - except one exception directly below.
 */

body.woocommerce-cart .content-page h1,
body.woocommerce-checkout .content-page h1 {
  font-size: 24px;
  line-height: 1.2;
}

/* .content-page__body's own 640px max-width (content.css - var(--measure-text),
   sized for long-form article text on generic Pages) was capping the
   Cart/Checkout block to that same width on every viewport, which forced
   WooCommerce Blocks' own responsive layout permanently into its
   single-column "is-medium" mode (collapsed order-summary accordion) even
   on a full desktop screen - never reaching its own wider two-column
   sidebar layout. This is the one exception to "no outer width changes"
   above: removing the cap here lets WooCommerce Blocks make its own
   responsive layout decision from the real available width, exactly as it
   would on an unconstrained page. Scoped to these two body classes only -
   every other page using .content-page__body (About, the generic Page
   fallback) keeps its existing 640px reading measure untouched. */
body.woocommerce-cart .content-page__body,
body.woocommerce-checkout .content-page__body {
  max-width: none;
}

/* ---------------------------------------------------------------------
   Shared: step/section headings, field labels, muted secondary text
   --------------------------------------------------------------------- */

body.woocommerce-cart .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-cart .wc-block-cart__totals-title,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-16);
}

body.woocommerce-cart .wc-block-components-checkout-step,
body.woocommerce-checkout .wc-block-components-checkout-step,
body.woocommerce-checkout fieldset.wc-block-components-checkout-step {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-48);
}

body.woocommerce-cart label,
body.woocommerce-checkout label,
body.woocommerce-checkout .wc-blocks-components-select__label {
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

body.woocommerce-cart .wc-block-components-panel__button,
body.woocommerce-checkout .wc-block-components-panel__button {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Text inputs / selects - thin underline only, no boxed background.
   Only surface properties (background/border/color) are touched here -
   WooCommerce Blocks' own floating-label positioning/transition logic is
   left completely untouched so the label-float interaction keeps working.
   WooCommerce Blocks' own CSS targets these same elements with
   `input[type=email]` etc. at specificity (0,3,1) - including its own
   :focus state, which re-asserts a white background - so every selector
   below is written to match that same shape (plus this file's body-class
   scope) rather than a single generic `input` selector, which would
   simply lose the cascade and appear to do nothing. */
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type=email],
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type=number],
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type=password],
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type=tel],
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type=text],
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type=url],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=email],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=number],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=password],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=tel],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=text],
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=url],
body.woocommerce-checkout .wc-block-components-textarea,
body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-sans);
  box-shadow: none;
}

body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select option {
  color: var(--color-background);
}

body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type=email]:focus,
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type=number]:focus,
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type=password]:focus,
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus,
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type=text]:focus,
body.woocommerce-cart .wc-block-components-form .wc-block-components-text-input input[type=url]:focus,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=email]:focus,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=number]:focus,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=password]:focus,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=tel]:focus,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=text]:focus,
body.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type=url]:focus,
body.woocommerce-checkout .wc-block-components-textarea:focus,
body.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
  background-color: transparent;
  outline: none;
  box-shadow: none;
  border: none;
  border-bottom: 2px solid #d58a4e;
  color: var(--color-text);
}

body.woocommerce-checkout .wc-blocks-components-select__container svg {
  fill: var(--color-text-muted);
}

/* ---------------------------------------------------------------------
   Saved-address card and shipping/payment radio options - thin rules
   instead of boxed cards, no shadows/gradients/rounded containers.
   --------------------------------------------------------------------- */

body.woocommerce-checkout .wc-block-components-address-card {
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  padding: var(--space-16) 0;
  box-shadow: none;
}

body.woocommerce-checkout .wc-block-components-address-card__edit {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
}

body.woocommerce-cart .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-16) 0;
}

/* Both controls use appearance:none plus a hand-drawn circle/checkmark
   (not the browser's native radio/checkbox rendering), so `accent-color`
   has no effect on them - background/border/the checked-dot color all
   need to be set explicitly, again matching WooCommerce Blocks' own
   selector shape so this actually wins the cascade. */
body.woocommerce-cart .wc-block-components-radio-control .wc-block-components-radio-control__input,
body.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input {
  background-color: transparent;
  border-color: var(--color-border-subtle);
}

body.woocommerce-cart .wc-block-components-radio-control .wc-block-components-radio-control__input:checked,
body.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
  border-color: #d58a4e;
}

body.woocommerce-cart .wc-block-components-radio-control .wc-block-components-radio-control__input:checked:before,
body.woocommerce-checkout .wc-block-components-radio-control .wc-block-components-radio-control__input:checked:before {
  background: #d58a4e;
}

body.woocommerce-cart .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox],
body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox] {
  background-color: transparent;
  border-color: var(--color-border-subtle);
}

body.woocommerce-cart .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked,
body.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked {
  background-color: transparent;
  border-color: #d58a4e;
}

body.woocommerce-cart .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-payment-method-label {
  color: var(--color-text);
  font-family: var(--font-sans);
}

body.woocommerce-checkout .wc-block-components-checkbox__mark {
  fill: #d58a4e;
}

body.woocommerce-checkout .wc-block-components-checkbox__label,
body.woocommerce-checkout .wc-block-checkout__terms {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: none;
}

/* ---------------------------------------------------------------------
   Cart items table
   --------------------------------------------------------------------- */

body.woocommerce-cart .wc-block-cart-items {
  border: none;
  width: 100%;
}

body.woocommerce-cart .wc-block-cart-items__header th {
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  font-weight: 400;
}

body.woocommerce-cart .wc-block-cart-items__row {
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Product image stays clearly visible - a modest increase over the
   component's small 80px default, still within its own 300px source so
   it never looks soft. */
body.woocommerce-cart .wc-block-cart-item__image img {
  width: 120px;
  height: 120px;
  display: block;
}

body.woocommerce-cart .wc-block-components-product-name {
  color: var(--color-text);
  font-family: var(--font-sans);
}

body.woocommerce-cart .wc-block-cart-item__prices,
body.woocommerce-cart .wc-block-cart-item__total,
body.woocommerce-cart .price {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
}

body.woocommerce-cart .wc-block-components-product-details {
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
}

/* Quantity stepper - thin outline, no filled buttons */
body.woocommerce-cart .wc-block-components-quantity-selector {
  border: 1px solid var(--color-border-subtle);
  background: none;
  border-radius: 0;
}

body.woocommerce-cart .wc-block-components-quantity-selector__input {
  background: none;
  color: var(--color-text);
  font-family: var(--font-sans);
}

body.woocommerce-cart .wc-block-components-quantity-selector__button {
  background: none;
  color: var(--color-text-muted);
}

body.woocommerce-cart .wc-block-components-quantity-selector__button:hover:not(:disabled) {
  color: var(--color-text);
}

body.woocommerce-cart .wc-block-cart-item__remove-link {
  background: none;
  border: none;
  color: var(--color-text-muted);
}

body.woocommerce-cart .wc-block-cart-item__remove-link:hover {
  color: var(--color-text);
}

body.woocommerce-cart .wc-block-cart-item__remove-link svg path {
  fill: currentColor;
}

/* ---------------------------------------------------------------------
   Totals / order summary (cart sidebar and checkout order review)
   --------------------------------------------------------------------- */

body.woocommerce-cart .wc-block-components-totals-item,
body.woocommerce-checkout .wc-block-components-totals-item {
  color: var(--color-text);
  font-family: var(--font-sans);
  border-top: none;
  padding: var(--space-8) 0;
}

body.woocommerce-cart .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-item__label {
  color: var(--color-text-muted);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  font-weight: 400;
}

body.woocommerce-cart .wc-block-components-totals-item__description,
body.woocommerce-checkout .wc-block-components-totals-item__description {
  color: var(--color-text-muted);
  font-size: var(--nav-font-size);
}

body.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  color: var(--color-text);
  font-size: 14px;
}

body.woocommerce-cart .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wc-block-components-totals-wrapper {
  border-top: 1px solid var(--color-border-subtle);
}

/* The order-summary sidebar box has a full 1px border on all four sides
   by default (a boxed card) - replaced with a single left-hand divider
   rule, consistent with "thin rules rather than boxes" everywhere else
   on this page. On narrow/mobile widths the same block instead renders as
   a collapsible accordion (.wc-block-components-checkout-order-summary__title
   is the trigger row) with its own separate 1px rounded-box border - that
   one is replaced with a plain bottom rule instead of a left divider,
   since there is no second column to separate from at that width. */
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
  border: none;
  border-radius: 0;
}

/* The left-hand divider only makes sense once the sidebar actually sits
   beside the main column (WooCommerce Blocks' own "is-large"/desktop
   layout) - at narrower widths it renders as a stacked accordion instead,
   where a left border would just be a stray vertical mark. */
@media (min-width: 768px) {
  body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
    border-left: 1px solid var(--color-border-subtle);
    padding-left: var(--space-32);
  }
}

body.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
}

/* ---------------------------------------------------------------------
   Buttons - restrained pill, matching Contact/Prints language
   --------------------------------------------------------------------- */

body.woocommerce-cart .wc-block-components-button,
body.woocommerce-checkout .wc-block-components-button {
  background-color: var(--color-text);
  color: var(--color-background);
  border: none;
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: var(--nav-font-size);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: uppercase;
  padding: var(--space-16) var(--space-32);
  min-height: 44px;
}

body.woocommerce-cart .wc-block-components-button:hover,
body.woocommerce-checkout .wc-block-components-button:hover {
  background-color: var(--color-text);
  color: var(--color-background);
  opacity: 0.85;
}

body.woocommerce-cart .wc-block-components-button:focus-visible,
body.woocommerce-checkout .wc-block-components-button:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: var(--space-4);
}

/* ---------------------------------------------------------------------
   Notices (validation errors, success messages)
   --------------------------------------------------------------------- */

body.woocommerce-cart .wc-block-components-notice-banner,
body.woocommerce-checkout .wc-block-components-notice-banner {
  background: none;
  border: none;
  border-left: 2px solid var(--color-text);
  border-radius: 0;
  color: var(--color-text);
  font-family: var(--font-sans);
}

body.woocommerce-cart .wc-block-components-notice-banner.is-error,
body.woocommerce-checkout .wc-block-components-notice-banner.is-error {
  border-left-color: #c1584f;
}

body.woocommerce-cart .wc-block-components-notice-banner svg,
body.woocommerce-checkout .wc-block-components-notice-banner svg {
  fill: currentColor;
}