/* ==========================================================================
   WooCommerce Styles
   ========================================================================== */

.wc-block-components-drawer {
  background: transparent;
}

.wc-block-components-drawer {
  border-color: var(--border);
}

.wc-block-components-drawer__screen-overlay {
  background-color: color-mix(in oklab, #000 50%, transparent);
}

#coming-soon-footer-banner {
  background-color: var(--card);
  border-top-color: var(--border);
}

/* ==========================================================================
WooCommerce Inputs Styles
========================================================================== */
.wc-block-components-text-input,
.wc-blocks-components-select__container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Core floats the label into the field and lifts it with `top:6px` plus a
   scale once the field is active or autofilled. The label is stacked above
   the field here, so both must be cleared - `top` included, since core's
   `.is-active label` outranks the static label rule below and would otherwise
   push the label 6px down as soon as the field takes a value. */
.wc-block-components-form
  .wc-block-components-text-input
  input:-webkit-autofill
  + label,
.wc-block-components-form .wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:-webkit-autofill + label,
.wc-block-components-text-input.is-active label {
  top: unset;
  transform: none;
}

.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-text-input label,
.wc-blocks-components-select .wc-blocks-components-select__label {
  position: relative;
  top: unset;
  left: unset;
  transform: none;
  max-width: none;
  order: -1;
  font-size: 0.875rem;
  color: var(--foreground);
  line-height: calc(1.25 / 0.875);
  margin: 0;
}

.wc-block-components-address-form__address_2-toggle {
  font-size: 0.875rem;
}

.wc-blocks-components-select .wc-blocks-components-select__container {
  height: unset;
  background: unset;
  border-radius: unset;
}

.wc-blocks-components-select .wc-blocks-components-select__container svg {
  display: none;
}

.wc-block-components-checkbox__mark {
  display: none;
}

/* ==========================================================================
WooCommerce Product Grid
========================================================================== */

/* The grid stretches each list item, but the bordered card inside it is only
   as tall as its content, so cards in a row end at different heights whenever
   a product omits a price. Fill the cell and push the button to the bottom so
   every card in a row shares the same baseline. The card itself is a vertical
   flex layout, set on the block in the template-product-loop pattern. */
.wc-block-product-template .wc-block-product > .wp-block-group {
  height: 100%;
}

.wc-block-product-template
  .wc-block-product
  > .wp-block-group
  > .wc-block-components-product-button {
  margin-top: auto;
}

/* Core centres the add-to-cart button while the title and price start at the
   card's left edge. The button wrapper is a flex column, so its horizontal
   placement comes from align-items rather than justify-content. */
.wc-block-product-template .wc-block-components-product-button {
  align-items: flex-start;
}

/* ==========================================================================
WooCommerce Single Product
========================================================================== */

/* Core separates the quantity field from the add-to-cart button with a 4px
   margin, which reads as touching next to the taller themed controls. */
.wp-block-woocommerce-add-to-cart-form form.cart {
  gap: 0.75rem;
}

.wp-block-woocommerce-add-to-cart-form form.cart .quantity {
  margin-right: 0;
}

/* ==========================================================================
WooCommerce Cart Items Block
========================================================================== */

/* WooCommerce paints the drawer background as an inline style bound through the
   Interactivity API (`data-wp-style--background-color` in MiniCartContents.php),
   resolved once to a literal colour when the page renders. Toggling dark mode
   client side never revisits that state, so the panel keeps the background of
   whichever mode the page loaded in while the text keeps following the live
   variables - white text on a white panel, or black on black.

   Point the background back at the variable so it tracks the toggle. The
   `!important` is required rather than stylistic: nothing outranks an inline
   style, and this value comes from theme.json anyway
   (`styles.blocks.woocommerce/mini-cart-contents.color.background`). */
.wp-block-woocommerce-mini-cart-contents {
  background-color: var(--wp--preset--color--background) !important;
}

/* Same inline-style problem as the drawer above, and worse: WooCommerce writes
   the badge colours inline from a server-resolved literal
   (`$product_count_color` in MiniCart.php), so in dark mode the badge is
   painted #0a0a0a on a #0a0a0a header - an invisible pill with a floating
   digit. That is wrong on load, not only after toggling. `!important` restores
   the intended inverted pill in both modes. */
.wc-block-mini-cart__badge {
  background-color: var(--foreground) !important;
  color: var(--background) !important;
}

.wc-block-mini-cart__footer {
  border-color: var(--border);
}

.wc-block-components-drawer:after,
.wc-block-mini-cart__footer:after {
  border-color: var(--border);
  opacity: 1;
}

.wp-block-woocommerce-mini-cart-title-block.wc-block-mini-cart__title {
  font-size: 1rem;
}

/* Core fixes the selector at 107px, which is narrower than the themed 30px
   bordered buttons; the plus button then overflows onto the remove icon.
   Size the selector to its content and space the parts explicitly instead. */
.wc-block-components-quantity-selector {
  border: none;
  width: auto;
  gap: 0.25rem;
  overflow: visible;
}

.wc-block-components-quantity-selector:after {
  display: none;
}

.wc-block-components-quantity-selector
  .wc-block-components-quantity-selector__button {
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  opacity: 1;
  background-color: var(--background);
  box-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
  width: 30px;
  height: 30px;
}

.dark
  .wc-block-components-quantity-selector
  .wc-block-components-quantity-selector__button {
  background-color: color-mix(in oklab, var(--input) 30%, transparent);
}

.wc-block-components-quantity-selector
  input.wc-block-components-quantity-selector__input {
  height: unset;
  background-color: transparent;
}

.wc-block-components-quantity-selector
  input.wc-block-components-quantity-selector__input:focus {
  outline: none;
  box-shadow: none;
}

.dark
  .wc-block-components-quantity-selector
  input.wc-block-components-quantity-selector__input {
  background-color: transparent;
}

.wc-block-cart-items__row {
  background-color: var(--card);
  color: var(--card-foreground);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a),
    0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  padding: 0 !important;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.wc-block-cart-items__row:last-child {
  margin-bottom: 0;
}

.wc-block-cart-items__row .wc-block-cart-item__product,
.wc-block-cart-items__row .wc-block-cart-item__total {
  padding: 1rem !important;
}

/* Inset the thumbnail so it does not sit flush against the row border, and
   round it so a square image never collides with the card's rounded corner. */
.wc-block-cart-items__row .wc-block-cart-item__image {
  padding: 1rem 0 1rem 1rem !important;
}

.wc-block-cart-items__row .wc-block-cart-item__image img {
  border-radius: calc(var(--radius) - 2px);
}

/* The product cell already carries the row's left padding via the image cell. */
.wc-block-cart-items__row .wc-block-cart-item__product {
  padding-left: 1rem !important;
}
.wc-block-cart-items__row .wc-block-components-product-metadata {
  color: var(--muted-foreground);
}
.wc-block-cart-items__row .wc-block-components-product-price__regular {
  font-weight: 400;
  color: var(--muted-foreground);
}

.wc-block-cart-items__header {
  display: none;
}

.is-large table.wc-block-cart-items .wc-block-cart-items__row {
  display: grid;
  grid-template-columns: 80px 132px;
}

.is-large
  table.wc-block-cart-items
  .wc-block-cart-items__row
  .wc-block-cart-item__image {
  grid-column-start: 1;
  grid-row-start: 1;
}

.is-large
  table.wc-block-cart-items
  .wc-block-cart-items__row
  .wc-block-cart-item__product {
  grid-column-end: 4;
  grid-column-start: 2;
  grid-row-start: 1;
  justify-self: stretch;
}

.is-large
  table.wc-block-cart-items
  .wc-block-cart-items__row
  .wc-block-cart-item__total {
  grid-row-start: 1;
}

.wc-block-cart__main .wc-block-cart-items {
  border: 0;
}

.wc-block-cart table.wc-block-cart-items,
.wc-block-cart table.wc-block-cart-items td,
.wc-block-cart table.wc-block-cart-items th {
  margin-bottom: 0;
}

.wc-block-cart__main .wc-block-cart-items td {
  border: 0;
}

@container (max-width: 699px) {
  .wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title {
    display: block;
    margin: 0;
  }
}

.wc-block-components-order-summary
  .wc-block-components-order-summary-item__quantity {
  box-shadow: none;
  border: 1px solid var(--border);
  padding: 0;
  font-size: 0.75rem;
}

/* The badge paints itself with `background: currentColor`, so it follows the
   theme and inverts correctly. The number inside does not: WooCommerce colours
   it `var(--wp--preset--color--base, #fff)`, and this palette has no `base`
   colour, so it always lands on the hard-coded white. That reads fine on the
   dark badge in light mode and disappears entirely on the light badge in dark
   mode. Point it at the background colour, which is what the badge inverts
   against in both modes.

   The class is doubled to clear WooCommerce's own (0,2,1) rule for the span
   without depending on stylesheet order - the block styles are enqueued on
   demand and can load after the theme's. */
.wc-block-components-order-summary.wc-block-components-order-summary
  .wc-block-components-order-summary-item__quantity
  span {
  color: var(--background);
}

.wc-block-components-order-summary
  .wc-block-components-order-summary-item__image
  > img {
  border-radius: calc(var(--radius) - 2px);
}

/* ==========================================================================
WooCommerce Cart/Checkout Block Styles
========================================================================== */

.wc-block-components-sidebar-layout.wc-block-cart,
.wc-block-components-sidebar-layout.wc-block-checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing) * 8);
}

@media (min-width: 64rem) {
  .wc-block-components-sidebar-layout.wc-block-cart,
  .wc-block-components-sidebar-layout.wc-block-checkout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wc-block-components-sidebar-layout.wc-block-cart .wc-block-components-main,
  .wc-block-components-sidebar-layout.wc-block-checkout
    .wc-block-components-main {
    grid-column: span 2 / span 2;
  }
}

.wc-block-components-sidebar-layout.wc-block-cart > *,
.wc-block-components-sidebar-layout.wc-block-checkout > * {
  width: 100%;
}

/* In the editor Gutenberg wraps a block's children in containers of its own, so
   the main and sidebar columns stop being grid items of the sidebar layout and
   everything collapses into the first column - the canvas then shows an
   arrangement the front end never renders. `display: contents` hands the two
   columns back to the grid. Both class names exist only inside the editor, so
   this rule matches nothing on the front end.

   The selector is doubled to outrank wc-blocks-editor-style.css, which lays the
   same wrapper out as a flex row. WooCommerce builds the canvas with flex and
   the front end with grid; left alone, the two disagree and the editor previews
   an arrangement the shopper never sees. Handing both back to the grid is what
   lets one set of layout rules serve the canvas and the front end alike. */
.wc-block-components-sidebar-layout.wc-block-components-sidebar-layout
  > .block-editor-inner-blocks,
.wc-block-components-sidebar-layout.wc-block-components-sidebar-layout
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  display: contents;
}

.wc-block-components-sidebar-layout .wc-block-components-main {
  padding: 0;
}

.wc-block-cart .wc-block-components-sidebar,
.wp-block-woocommerce-checkout-order-summary-block {
  height: fit-content;
  background-color: var(--card);
  box-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a),
    0 1px 2px -1px var(--tw-shadow-color, #0000001a);
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  padding: calc(var(--spacing) * 6);
}

/* ==========================================================================
WooCommerce Coupon Form Styles
========================================================================== */

.wc-block-components-totals-coupon__form {
  align-items: flex-end;
}

.wc-block-components-totals-coupon__form
  .wc-block-components-totals-coupon__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: calc(var(--spacing) * 9);
  padding-left: calc(var(--spacing) * 4);
  padding-right: calc(var(--spacing) * 4);
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--input);
  background-color: var(--background);
  color: var(--foreground);
  transition-property: color, background-color, border-color;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}

.wc-block-components-totals-coupon__form
  .wc-block-components-totals-coupon__button:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.wc-block-components-totals-coupon__form
  .wc-block-components-totals-coupon__button:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.wc-block-components-totals-coupon__form
  .wc-block-components-totals-coupon__button:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.dark
  .wc-block-components-totals-coupon__form
  .wc-block-components-totals-coupon__button {
  background-color: color-mix(in oklab, var(--input) 30%, transparent);
  border-color: var(--input);
}

.dark
  .wc-block-components-totals-coupon__form
  .wc-block-components-totals-coupon__button:hover {
  background-color: var(--accent);
}

/* ==========================================================================
Order Summary Block Styles
========================================================================== */

.wc-block-cart .wc-block-cart__totals-title {
  text-transform: none;
  padding: 0;
  font-size: 1rem;
}

.wc-block-components-totals-wrapper {
  border-color: var(--border);
}

.wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
  border-color: var(--border);
}

.wp-block-woocommerce-cart-order-summary-coupon-form-block {
  font-size: 0.875rem;
}

.wp-block-woocommerce-cart-order-summary-coupon-form-block
  .wc-block-components-panel__button[aria-expanded="false"] {
  margin-bottom: 0;
}

.wc-block-components-totals-coupon .wc-block-components-panel__button {
  margin-bottom: 0.5rem;
}

.wc-block-cart__submit {
  margin-bottom: 0;
}

.wc-block-components-radio-control--highlight-checked:after {
  border-color: var(--border);
}

.wc-block-components-radio-control--highlight-checked
  .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked
  label.wc-block-components-radio-control__option--checked-option-highlighted {
  box-shadow: inset 0 0 0 1px currentColor;
  z-index: 1;
}

.wc-block-components-radio-control-accordion-content {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.wc-block-checkout__actions
  .wc-block-checkout__actions_row
  .wc-block-components-checkout-place-order-button {
  padding: 5px 1rem;
}

.wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
  border-color: var(--border);
}

/* ==========================================================================
WooCommerce Checkout Block Styles
========================================================================== */

.wp-block-woocommerce-checkout-order-summary-block
  .wc-block-components-checkout-order-summary__title {
  margin-top: 0;
  padding: 0;
  border: none;
}

.wp-block-woocommerce-checkout-order-summary-block
  .wc-block-components-checkout-order-summary__title
  .wc-block-components-checkout-order-summary__title-text {
  margin: 0;
}

.wc-block-components-order-summary,
.wc-block-components-sidebar .slot-wrapper .wc-block-components-panel,
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar .wc-block-components-totals-coupon,
.wc-block-components-sidebar .wc-block-components-totals-item {
  padding: 0;
}

@media screen and (max-width: 699px) {
  .wp-block-woocommerce-checkout-order-summary-block
    .wc-block-components-checkout-order-summary__title
    .wc-block-components-checkout-order-summary__title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.wp-block-woocommerce-checkout-order-summary-block
  .wc-block-components-checkout-order-summary__content.is-open {
  border: none;
}

.wc-block-components-checkout-order-summary__content
  .wc-block-components-totals-wrapper:last-child {
  padding-bottom: 0;
}

.wp-block-woocommerce-checkout-order-summary-block
  .checkout-order-summary-block-fill {
  border: none;
}

.checkout-order-summary-block-fill-wrapper {
  margin-bottom: calc(var(--spacing) * 6);
}

.wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper
  .wc-block-components-order-summary,
.wp-block-woocommerce-checkout-order-summary-block
  .checkout-order-summary-block-fill
  .wc-block-components-totals-coupon,
.wp-block-woocommerce-checkout-order-summary-block
  .checkout-order-summary-block-fill
  .wc-block-components-totals-item {
  padding: 0;
}

.wp-block-woocommerce-checkout-order-summary-totals-block {
  border-color: var(--border);
}

@container (max-width: 699px) {
  .wp-block-woocommerce-checkout-order-summary-block.checkout-order-summary-block-fill-wrapper {
    padding-bottom: calc(var(--spacing) * 6);
  }
}

.checkout-order-summary-block-fill
  .wc-block-components-totals-wrapper:last-child {
  padding-bottom: 0;
}

.wc-block-components-order-summary .wc-block-components-order-summary-item {
  border-bottom: 1px solid var(--border);
}

.wc-block-components-order-summary .wc-block-components-order-summary-item:last-child {
  border-bottom: none;
}