/* Outlaw Bullets: store-only additions for WordPress (assets/css/wc.css), loaded after site.css and the page
   stylesheet (css/pages/shop.css, product.css or cart.css) on the WooCommerce views only. Everything else is
   the static design's CSS, unchanged. WooCommerce's own stylesheets are not loaded (inc/woocommerce/store.php). */

/* ---------- what shows when: the server draws the right view, so it holds without JavaScript too ---------- */
html:not(.js) [data-cart-state="full"] .cart-view--full { display: block; }
html:not(.js) [data-checkout-state="full"] .checkout-layout { display: grid; }
html:not(.js) [data-received-state="order"] .received-layout { display: grid; }
html:not(.js) [data-received-state="order"] .received-order,
html:not(.js) [data-received-state="order"] .received-next,
html:not(.js) [data-received-state="order"] .received-lede { display: block; }

/* the cart's "Update cart" button: only without JavaScript (js/wc-cart.js saves each change as it happens) */
.cart-update { margin: var(--sp-4) 0 0; display: flex; justify-content: flex-end; }
.js .cart-update { display: none; }

/* a cart or buy box request in flight */
[aria-busy="true"] .btn--primary,
.cart-page[aria-busy="true"] .cart-table,
.cart-page[aria-busy="true"] .cart-totals { opacity: .6; transition: opacity .15s; }

/* ---------- WooCommerce notices (woocommerce/notices/*.php) in the design's notice style ---------- */
.wc-notice { max-width: 46rem; margin: 0 0 var(--sp-6); font-size: var(--fs-body); }
.wc-notice > p { margin: 0; }
.wc-notice__list { list-style: none; margin: 0; padding: 0; }
.wc-notice__list li + li { margin-top: var(--sp-2); }
.wc-notice .button,
.wc-notice .restore-item { font-weight: 700; color: var(--red); }
.product-notices .wc-notice { margin: 0 0 var(--sp-5); }
.shop-filter + .wc-notice,
.wrap > .wc-notice:first-child { margin-top: var(--sp-6); }

/* checkout: WooCommerce's own error group is read into the design's error summary by js/wc-checkout.js */
.js .checkout-form .woocommerce-NoticeGroup-checkout.ob-read { display: none; }
.woocommerce-NoticeGroup-checkout,
.woocommerce-NoticeGroup-updateOrderReview { margin: 0 0 var(--sp-6); }

/* WooCommerce's blockUI overlay while the checkout updates or places the order */
.blockUI.blockOverlay { background: var(--paper, #f1e7cf) !important; opacity: .6 !important; }

/* ---------- checkout section 4: the payment gateway's own fields (woocommerce/checkout/payment.php) ---------- */
.checkout-pay__methods { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.checkout-pay__method {               /* the design's .checkout-placeholder frame: a fine rule inside a 2px one */
  padding: var(--sp-5);
  border: 2px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -7px;
  border-radius: var(--r);
  background: var(--paper-hi);
}
.checkout-pay__method > .input-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.checkout-pay__label { display: flex; align-items: center; gap: var(--sp-3); font-weight: 700; }
.checkout-pay__methods--many .checkout-pay__label { cursor: pointer; min-height: var(--tap, 44px); }
.checkout-pay__methods--many .input-radio:checked + .checkout-pay__label { color: var(--red); }
.checkout-pay__methods--many .input-radio:focus-visible + .checkout-pay__label { outline: 3px solid var(--red); outline-offset: 3px; }
.checkout-pay__icon { flex: none; width: 1.75rem; height: 1.75rem; fill: var(--ink-2); }
.checkout-pay__box { margin-top: var(--sp-3); }
.checkout-pay__box > :last-child { margin-bottom: 0; }
.checkout-pay__box p { margin: 0 0 var(--sp-3); color: var(--ink-2); }
/* gateway card fields (Authorize.Net and the like): the design's inputs */
.checkout-pay__box input[type="text"],
.checkout-pay__box input[type="tel"],
.checkout-pay__box input[type="number"],
.checkout-pay__box select {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--sp-3);
  border: 2px solid var(--ink);
  background: var(--paper-hi);
  font: inherit;
}
.checkout-pay__box .form-row { margin: 0 0 var(--sp-3); }
.checkout-pay__box label { display: block; font-weight: 700; margin-bottom: var(--sp-1); }

/* the order review block WooCommerce re-renders: no box of its own */
.ob-review { display: contents; }

/* ---------- order received: WooCommerce's overview adds the order number and payment method to the static
   page's date / email / total, so from 37.5em it runs in rows of three instead of one squeezed row. A six-track
   grid keeps every row full width: three items span 2 tracks each; a second row of two spans 3 each, a lone
   fourth item all 6. No column gap (the items pad instead), so the dotted rule above row 2 runs edge to edge. */
@media (min-width: 37.5em) {
  .received-overview.woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
  }
  .received-overview.woocommerce-order-overview li { grid-column: span 2; padding-inline-end: var(--sp-6); }
  .received-overview.woocommerce-order-overview li:nth-child(4):nth-last-child(2),
  .received-overview.woocommerce-order-overview li:nth-child(5):last-child { grid-column: span 3; }
  .received-overview.woocommerce-order-overview li:nth-child(4):last-child { grid-column: span 6; }
  .received-overview.woocommerce-order-overview li:nth-child(n+4) { border-top: 1px dotted var(--rule-strong); }
}

/* the privacy policy text / terms checkbox beside Place order (checkout/terms.php; empty until a Privacy
   Policy or Terms page is published) */
.checkout-place .woocommerce-terms-and-conditions-wrapper:not(:has(p, input, .woocommerce-terms-and-conditions)) { display: none; }
.checkout-place .woocommerce-terms-and-conditions-wrapper { font-size: var(--fs-note); line-height: 1.5; }
.checkout-place .woocommerce-privacy-policy-text p { margin: 0; }
.checkout-place .woocommerce-terms-and-conditions-wrapper .form-row { margin: var(--sp-3) 0 0; }
.checkout-place .woocommerce-form__label-for-checkbox { display: flex; gap: var(--sp-3); align-items: flex-start; min-height: var(--tap); cursor: pointer; }
.checkout-place .woocommerce-form__input-checkbox { width: 1.375rem; height: 1.375rem; margin: 2px 0 0; flex: none; accent-color: var(--red); }
.checkout-place .woocommerce-terms-and-conditions { max-height: 12rem; overflow: auto; padding: var(--sp-3); border: 1px solid var(--rule-strong); margin-bottom: var(--sp-3); }
.checkout-place .required { color: var(--red); text-decoration: none; }