/* ============================================================================
   Orris Bench: the store.

   WHY THIS FILE IS AS LONG AS IT IS. inc/woocommerce.php turns off
   WooCommerce's own three stylesheets, because they carry a second palette (a
   purple accent, a set of grays, its own radii and font sizes) into every page
   of the site, and docs/brand/identity.md section 9 allows exactly one source
   of color. Turning them off is a debt, and this file is the debt paid: the
   grid, the card, the product page, the gallery, the tabs, the reviews, the
   cart, the checkout, the account screens and the notices, all built on the
   tokens.

   No hex, no rgba, no invented size, same as theme.css. Loaded only on store
   pages, after theme.css.

   ONE DELIBERATE DIFFERENCE FROM EVERY OTHER STORE. There are no star ratings
   drawn as stars. WooCommerce draws them with an icon font of its own, which is
   a font request for a set of shapes that are not text; without that font its
   own markup falls back to the sentence it already contains, "Rated 4.50 out of
   5". This file styles that sentence rather than reinstating the font. An
   average over the handful of reviews an artisan house has is a number with no
   confidence interval behind it, and five drawn stars present it as though it
   had one.
   ============================================================================ */

/* ==========================================================================
   1. THE PRODUCT GRID
   ========================================================================== */

.woocommerce-products-header {
  margin-bottom: var(--ob-space-5);
}

.woocommerce-products-header__title {
  font-size: var(--ob-text-heading);
  line-height: var(--ob-leading-heading);
  font-weight: var(--ob-weight-bold);
}

.woocommerce-result-count,
.woocommerce-ordering {
  display: inline-block;
  margin: 0 0 var(--ob-space-4);
  color: var(--ob-text-muted);
  font-size: var(--ob-text-caption);
  line-height: var(--ob-leading-caption);
}

.woocommerce-ordering {
  float: right;
  max-width: var(--ob-measure-narrow);
}

ul.products {
  display: grid;
  gap: var(--ob-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  clear: both;
}

@media (min-width: 34em) {
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62em) {
  /* Three across at the widest, per inc/woocommerce.php: at four, a bottle
     photographed in portrait inside a 76 rem page becomes a thumbnail. */
  ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   THE CARD.

   A card is a panel with its own heading, so it takes the card radius and the
   one shadow this site has. The border does the bounding; the shadow is a
   whisper.
   -------------------------------------------------------------------------- */

li.product,
li.ob-card {
  /* The positioning context for the stretched title link below. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ob-space-2);
  padding: var(--ob-card-padding);
  background-color: var(--ob-surface-raised);
  border: var(--ob-border-width) solid var(--ob-border);
  border-radius: var(--ob-radius-card);
  box-shadow: var(--ob-shadow-card);
  transition: border-color var(--ob-motion-feedback) var(--ob-ease-out);
}

li.product:hover {
  /* The border warms and nothing moves. A card that lifts on hover is motion
     that answers none of the three questions motion is allowed to answer. */
  border-color: var(--ob-accent-hover);
}

li.product > a {
  color: inherit;
  text-decoration: none;
}

li.product img {
  width: 100%;
  border-radius: var(--ob-radius-panel);
  /* The theme crops product thumbnails to 4:5 in PHP; this is the guard for an
     image uploaded before that setting existed, so one old photograph cannot
     make one card taller than the rest of the row. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background-color: var(--ob-surface-sunken);
}

.woocommerce-loop-product__title {
  margin: var(--ob-space-2) 0 0;
  font-size: var(--ob-text-subhead);
  line-height: var(--ob-leading-subhead);
  font-weight: var(--ob-weight-semibold);
}

.woocommerce-loop-product__title a {
  color: var(--ob-text);
  text-decoration: none;
}

/* THE STRETCHED LINK.

   The product's title is the only link in the card (inc/woocommerce.php removes
   WooCommerce's card-wide anchor and says why), and this gives it the hit area
   of the whole card so that clicking the photograph still opens the product.

   One tab stop, one accessible name, the whole card clickable, and the markup
   stays a heading containing a link rather than a link containing a heading, an
   image and a price. */
.woocommerce-loop-product__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--ob-radius-card);
}

li.product:hover .woocommerce-loop-product__title a,
.woocommerce-loop-product__title a:focus-visible {
  color: var(--ob-accent-pressed);
  text-decoration: underline;
}

/* The ring is drawn around the card rather than around the two words of the
   title, because the stretched link IS the card and a ring that contradicted its
   own hit area tells the reader the wrong thing about what is focused.

   INSIDE @supports, and that is the load-bearing part. Moving the ring means
   removing it from the anchor, and a browser without :has() would then have no
   focus ring at all on the busiest link on the site. Wrapping both halves in the
   feature query means the pair moves together or neither moves, so the failure
   mode is a ring around the title text rather than no ring. */
@supports selector(:has(*)) {
  li.product:has(.woocommerce-loop-product__title a:focus-visible) {
    outline: var(--ob-focus-ring-width) solid var(--ob-focus-ring);
    outline-offset: var(--ob-focus-ring-offset);
  }

  .woocommerce-loop-product__title a:focus-visible {
    outline: none;
  }
}

/* The strength and the volume, printed under the name by
   orris_bench_loop_specifications(). The smallest useful version of the
   declaration panel: two figures that tell two bottles apart. */
.ob-card__spec {
  margin: 0;
  color: var(--ob-text-muted);
  font-size: var(--ob-text-caption);
  line-height: var(--ob-leading-caption);
  font-variant-numeric: tabular-nums;
}

.ob-card__sep {
  margin: 0 var(--ob-space-2);
}

.ob-badge--reduced {
  align-self: flex-start;
  background-color: var(--ob-accent-soft);
  /* Accent text on the accent tint is 4.45 and misses AA; the pressed tone on
     the same tint is 6.09. */
  color: var(--ob-accent-pressed);
}

/* ==========================================================================
   2. PRICE
   ========================================================================== */

.price {
  margin: 0;
  color: var(--ob-text);
  font-size: var(--ob-text-subhead);
  line-height: var(--ob-leading-subhead);
  font-weight: var(--ob-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* A price that has been reduced. The old figure is struck through and muted,
   the new one is the value: two figures at the same weight is a puzzle. */
.price del {
  margin-right: var(--ob-space-2);
  color: var(--ob-text-muted);
  font-weight: var(--ob-weight-regular);
  text-decoration: line-through;
}

.price ins {
  text-decoration: none;
}

.woocommerce-price-suffix,
.price small {
  display: block;
  margin-top: var(--ob-space-1);
  color: var(--ob-text-muted);
  font-size: var(--ob-text-caption);
  font-weight: var(--ob-weight-regular);
}

/* ==========================================================================
   3. THE PRODUCT PAGE
   ========================================================================== */

.ob-product {
  display: block;
}

.ob-product__top {
  display: grid;
  gap: var(--ob-space-5);
}

@media (min-width: 48em) {
  .ob-product__top {
    /* The gallery a little wider than the summary. A bottle is the thing being
       looked at; the summary is a column of facts and a button, and it reads
       better narrow. */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--ob-space-6);
    align-items: start;
  }
}

.ob-product__summary .product_title {
  margin-bottom: var(--ob-space-2);
  font-size: var(--ob-text-heading);
  line-height: var(--ob-leading-heading);
  font-weight: var(--ob-weight-bold);
}

.ob-product__summary .woocommerce-product-details__short-description {
  max-width: var(--ob-measure);
  margin: var(--ob-space-4) 0;
}

.product_meta {
  margin-top: var(--ob-space-5);
  padding-top: var(--ob-space-4);
  border-top: var(--ob-border-width) solid var(--ob-border);
  color: var(--ob-text-muted);
  font-size: var(--ob-text-caption);
  line-height: var(--ob-leading-caption);
}

.product_meta > span {
  display: block;
}

.product_meta .sku {
  font-family: var(--ob-font-mono);
}

/* --------------------------------------------------------------------------
   THE GALLERY.

   Zoom, lightbox and slider are WooCommerce's own scripts, declared in
   inc/woocommerce.php. What this needs to do is hold the shape while they load
   and keep the thumbnail strip from becoming a row of tiny squares on a phone.
   -------------------------------------------------------------------------- */

.woocommerce-product-gallery {
  position: relative;
}

/* WHAT HAPPENS TO THE GALLERY WITH NO JAVASCRIPT.

   WooCommerce prints the gallery with an inline style="opacity: 0" and its own
   script sets it back to 1 once the slider has initialized. That is a reasonable
   trade in a store whose CSS comes from WooCommerce; here it is worth naming,
   because a reader whose script did not arrive would get a product page with an
   invisible photograph and no way to know one exists.

   The scripting media feature answers exactly this question, so the fix is
   scoped to the case it fixes rather than being an unconditional override: with
   no scripting, the gallery is made visible and every image after the first is
   hidden, which is the same thing the slider would have shown. With scripting,
   WooCommerce's own behavior is left alone, including the fade, because
   overriding an inline style unconditionally would mean every reader saw a
   stacked column of photographs for the moment before the slider took over. */
@media (scripting: none) {
  .woocommerce-product-gallery {
    opacity: 1 !important;
  }

  .woocommerce-product-gallery__wrapper > *:not(:first-child) {
    display: none;
  }
}

.woocommerce-product-gallery__wrapper {
  margin: 0;
}

.woocommerce-product-gallery img {
  width: 100%;
  border-radius: var(--ob-radius-panel);
  background-color: var(--ob-surface-sunken);
}

.woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ob-space-2);
  margin: var(--ob-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
  cursor: pointer;
  border: var(--ob-border-width) solid transparent;
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
  border-color: var(--ob-border-field);
}

/* The zoom hint WooCommerce prints over the image. Kept as a real control with
   a visible boundary rather than a floating glyph. */
.woocommerce-product-gallery__trigger {
  position: absolute;
  top: var(--ob-space-3);
  right: var(--ob-space-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ob-touch-min);
  min-height: var(--ob-touch-min);
  background-color: var(--ob-surface-raised);
  color: var(--ob-accent);
  border: var(--ob-border-width) solid var(--ob-border-field);
  border-radius: var(--ob-radius-control);
  text-decoration: none;
  font-weight: var(--ob-weight-bold);
}

/* --------------------------------------------------------------------------
   ADD TO CART.
   -------------------------------------------------------------------------- */

form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ob-space-3);
  margin: var(--ob-space-5) 0;
}

.quantity {
  display: flex;
  flex-direction: column;
}

.quantity label {
  margin-bottom: var(--ob-space-1);
}

.quantity input.qty {
  width: calc(var(--ob-control-min-height) * 2.5);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

button.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ob-space-2);
  min-height: var(--ob-touch-min);
  padding: var(--ob-button-padding);
  background-color: var(--ob-surface-raised);
  color: var(--ob-text);
  border: var(--ob-border-width) solid var(--ob-border-field);
  border-radius: var(--ob-radius-control);
  font-size: var(--ob-text-body);
  font-weight: var(--ob-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--ob-motion-feedback) var(--ob-ease-out),
    color var(--ob-motion-feedback) var(--ob-ease-out),
    border-color var(--ob-motion-feedback) var(--ob-ease-out);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--ob-hover);
  color: var(--ob-accent-pressed);
  border-color: var(--ob-accent-hover);
}

/* ONE PRIMARY ACTION PER SCREEN, and on a product page it is this one.
   WooCommerce marks its own primary buttons with .alt, which is the checkout
   button, the place-order button and the add-to-cart button. */
button.single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--ob-accent);
  color: var(--ob-on-accent);
  border-color: transparent;
}

/* The accent button DARKENS on hover. Cream on --ob-accent-hover is 4.04 and
   fails AA; cream on --ob-accent-pressed is 7.48. */
button.single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
  background-color: var(--ob-accent-pressed);
  color: var(--ob-on-accent);
  border-color: transparent;
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce input.button:disabled {
  background-color: var(--ob-disabled);
  color: var(--ob-disabled-text);
  border-color: var(--ob-border);
  cursor: not-allowed;
}

.stock.out-of-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--ob-space-2);
  padding: var(--ob-pill-padding);
  border-radius: var(--ob-radius-pill);
  background-color: var(--ob-critical-soft);
  color: var(--ob-critical);
  font-size: var(--ob-text-caption);
  font-weight: var(--ob-weight-semibold);
}

.stock.in-stock {
  color: var(--ob-good);
  font-size: var(--ob-text-caption);
  font-weight: var(--ob-weight-semibold);
}

/* --------------------------------------------------------------------------
   RATINGS, AS THE SENTENCE THEY ALREADY ARE.

   WooCommerce's markup contains "Rated 4.50 out of 5" inside the element and
   then hides it behind an icon font. With that font gone the sentence shows,
   which is both honest and readable. See the note at the top of this file.
   -------------------------------------------------------------------------- */

.star-rating,
.woocommerce-product-rating {
  color: var(--ob-text-muted);
  font-size: var(--ob-text-caption);
  line-height: var(--ob-leading-caption);
  font-variant-numeric: tabular-nums;
}

.star-rating .rating,
.woocommerce-review__published-date {
  font-weight: var(--ob-weight-semibold);
  color: var(--ob-text);
}

.woocommerce-review-link {
  margin-left: var(--ob-space-2);
}

/* The rating selector in the review form: five links, one per score. */
p.stars {
  display: flex;
  gap: var(--ob-space-2);
  margin: 0 0 var(--ob-space-3);
}

p.stars a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ob-touch-min);
  min-height: var(--ob-touch-min);
  border: var(--ob-border-width) solid var(--ob-border-field);
  border-radius: var(--ob-radius-control);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

p.stars a:hover,
p.stars a.active {
  background-color: var(--ob-selected);
  color: var(--ob-accent-pressed);
  font-weight: var(--ob-weight-semibold);
}

/* ==========================================================================
   4. WHAT IS IN THIS BOTTLE

   The declaration panel. The most important block on the site, so it is a
   panel on the raised surface with real headings inside it, sitting between
   the summary and the tabs at the full width of the page rather than squeezed
   into the summary column.
   ========================================================================== */

.ob-bottle {
  margin: var(--ob-space-7) 0;
  padding: var(--ob-space-5);
  background-color: var(--ob-surface-raised);
  border: var(--ob-border-width) solid var(--ob-border-strong);
  border-radius: var(--ob-radius-panel);
}

@media (min-width: 48em) {
  .ob-bottle {
    padding: var(--ob-space-6);
  }
}

.ob-bottle__heading {
  margin-bottom: var(--ob-space-5);
  padding-bottom: var(--ob-space-3);
  border-bottom: var(--ob-border-width) solid var(--ob-border);
  font-size: var(--ob-text-title);
  line-height: var(--ob-leading-title);
  font-weight: var(--ob-weight-semibold);
}

.ob-bottle__part {
  margin-top: var(--ob-space-6);
}

.ob-bottle__subheading {
  margin-bottom: var(--ob-space-2);
  font-size: var(--ob-text-subhead);
  line-height: var(--ob-leading-subhead);
  font-weight: var(--ob-weight-semibold);
}

/* --------------------------------------------------------------------------
   THE FIGURES.

   Name above value on a phone, name beside value from the tablet width up. The
   name is muted and the value is not, because the value is what the reader came
   for and a label that competes with its own value is a label that has been
   given the wrong weight.
   -------------------------------------------------------------------------- */

.ob-facts {
  display: grid;
  gap: var(--ob-space-4);
  margin: 0;
}

@media (min-width: 34em) {
  .ob-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ob-space-4) var(--ob-space-6);
  }
}

.ob-facts__row {
  padding-bottom: var(--ob-space-3);
  border-bottom: var(--ob-border-width) solid var(--ob-border);
}

.ob-facts__term {
  color: var(--ob-text-muted);
  font-size: var(--ob-text-caption);
  line-height: var(--ob-leading-caption);
}

.ob-facts__value {
  margin: var(--ob-space-1) 0 0;
  font-size: var(--ob-text-title);
  line-height: var(--ob-leading-title);
  font-weight: var(--ob-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* A note under a figure: that a concentration is the planned figure rather than
   the measured one, or the sentence the bench wrote about it. It is a sentence
   about a number, so it drops back to the caption role and to the muted ink. */
.ob-fact__note {
  display: block;
  margin-top: var(--ob-space-1);
  max-width: var(--ob-measure-narrow);
  color: var(--ob-text-muted);
  font-size: var(--ob-text-caption);
  line-height: var(--ob-leading-caption);
  font-weight: var(--ob-weight-regular);
  font-variant-numeric: normal;
}

/* --------------------------------------------------------------------------
   THE INGREDIENT LIST.

   On the sunken tone, because it is a quotation of the carton rather than the
   page's own voice, and reading it as a block is how a customer checks it
   against the box in his hand.
   -------------------------------------------------------------------------- */

.ob-inci {
  max-width: var(--ob-measure-wide);
  margin: var(--ob-space-3) 0 0;
  padding: var(--ob-space-4);
  background-color: var(--ob-surface-sunken);
  border-radius: var(--ob-radius-panel);
  /* A single INCI name can be 40 characters with no space in it. Without this,
     one of them pushes a phone layout sideways, and the body of this site never
     scrolls sideways. */
  overflow-wrap: break-word;
  line-height: var(--ob-leading-body);
}

.ob-table--allergens {
  background-color: var(--ob-surface-raised);
}

.ob-address {
  max-width: var(--ob-measure-narrow);
  white-space: pre-line;
}

/* ==========================================================================
   5. TABS
   ========================================================================== */

.woocommerce-tabs {
  margin-top: var(--ob-space-7);
}

.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ob-space-1);
  margin: 0 0 var(--ob-space-5);
  padding: 0 0 var(--ob-space-1);
  list-style: none;
  border-bottom: var(--ob-border-width) solid var(--ob-border-strong);
}

.woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ob-touch-min);
  padding: var(--ob-row-padding);
  color: var(--ob-text);
  text-decoration: none;
  border-radius: var(--ob-radius-control) var(--ob-radius-control) 0 0;
}

.woocommerce-tabs ul.tabs li a:hover {
  background-color: var(--ob-hover);
  color: var(--ob-accent-pressed);
}

/* The open tab: a wash, a weight and a pipe. Three signals, because a tab that
   is only a different color is a tab a third of readers cannot find. */
.woocommerce-tabs ul.tabs li.active a {
  background-color: var(--ob-selected);
  font-weight: var(--ob-weight-semibold);
  box-shadow: inset 0 -2px 0 0 var(--ob-accent);
}

.woocommerce-Tabs-panel {
  max-width: var(--ob-measure);
}

.woocommerce-Tabs-panel h2 {
  font-size: var(--ob-text-subhead);
  line-height: var(--ob-leading-subhead);
}

.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
  padding: var(--ob-cell-padding);
  border-bottom: var(--ob-border-width) solid var(--ob-border);
  text-align: left;
}

.woocommerce-product-attributes th {
  color: var(--ob-text-muted);
  font-weight: var(--ob-weight-semibold);
  white-space: nowrap;
}

/* ==========================================================================
   6. REVIEWS
   ========================================================================== */

.woocommerce-Reviews .commentlist {
  margin: 0 0 var(--ob-space-5);
  padding: 0;
  list-style: none;
}

.woocommerce-Reviews .comment_container {
  padding: var(--ob-space-4) 0;
  border-bottom: var(--ob-border-width) solid var(--ob-border);
}

.woocommerce-review__author {
  font-weight: var(--ob-weight-semibold);
}

.woocommerce-Reviews .comment-form label {
  color: var(--ob-text-muted);
}

.woocommerce-noreviews {
  color: var(--ob-text-muted);
}

/* ==========================================================================
   7. RELATED, UPSELLS
   ========================================================================== */

.related,
.up-sells,
.cross-sells {
  margin-top: var(--ob-space-7);
  padding-top: var(--ob-space-5);
  border-top: var(--ob-border-width) solid var(--ob-border);
}

.related > h2,
.up-sells > h2,
.cross-sells > h2 {
  font-size: var(--ob-text-title);
  line-height: var(--ob-leading-title);
  margin-bottom: var(--ob-space-4);
}

/* ==========================================================================
   8. NOTICES

   A notice is a status, so it carries a soft ground, a border in its own tone
   and a word. WooCommerce prints the word; this styles it. Info is drawn in the
   caution family rather than in the accent family, because the accent means
   "this is the primary action" and the two ambers are a hair apart.
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  margin: 0 0 var(--ob-space-5);
  padding: var(--ob-space-4);
  border: var(--ob-border-width) solid var(--ob-border);
  border-radius: var(--ob-radius-panel);
  list-style: none;
}

.woocommerce-message {
  background-color: var(--ob-good-soft);
  border-color: var(--ob-good);
}

.woocommerce-info {
  background-color: var(--ob-caution-soft);
  border-color: var(--ob-caution);
}

.woocommerce-error {
  background-color: var(--ob-critical-soft);
  border-color: var(--ob-critical);
}

.woocommerce-error li + li {
  margin-top: var(--ob-space-2);
}

.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: var(--ob-space-3);
}

/* ==========================================================================
   9. THE CART
   ========================================================================== */

.woocommerce-cart-form {
  margin-bottom: var(--ob-space-6);
}

table.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--ob-space-5);
}

table.shop_table th {
  padding: var(--ob-table-header-padding);
  background-color: var(--ob-surface-sunken);
  color: var(--ob-text-muted);
  font-size: var(--ob-text-caption);
  font-weight: var(--ob-weight-semibold);
  text-align: left;
  border-bottom: var(--ob-border-width) solid var(--ob-border-strong);
}

table.shop_table td {
  padding: var(--ob-row-padding);
  border-bottom: var(--ob-border-width) solid var(--ob-border);
  vertical-align: middle;
}

table.shop_table .product-price,
table.shop_table .product-subtotal,
table.shop_table .amount {
  font-variant-numeric: tabular-nums;
}

table.shop_table .product-thumbnail img {
  width: calc(var(--ob-icon-well-size) * 2);
  border-radius: var(--ob-radius-control);
}

table.shop_table .product-remove a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ob-hit-min);
  min-height: var(--ob-hit-min);
  color: var(--ob-text-muted);
  text-decoration: none;
  border-radius: var(--ob-radius-control);
}

/* A destructive control stays quiet until it is hovered, because it is not the
   primary path. */
table.shop_table .product-remove a:hover {
  background-color: var(--ob-critical-soft);
  color: var(--ob-critical);
}

.cart-collaterals {
  display: grid;
  gap: var(--ob-space-5);
}

@media (min-width: 48em) {
  .cart-collaterals {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.cart_totals h2,
.woocommerce-checkout-review-order h3 {
  font-size: var(--ob-text-subhead);
  line-height: var(--ob-leading-subhead);
}

.cart_totals table,
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
}

.cart_totals th,
.cart_totals td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: var(--ob-cell-padding);
  border-bottom: var(--ob-border-width) solid var(--ob-border);
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.order-total td,
.order-total th {
  font-weight: var(--ob-weight-bold);
}

.coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ob-space-2);
  align-items: flex-end;
  margin-bottom: var(--ob-space-4);
}

.coupon input[type="text"] {
  max-width: calc(var(--ob-control-min-height) * 6);
}

/* ==========================================================================
   10. CHECKOUT
   ========================================================================== */

.woocommerce-checkout .col2-set {
  display: grid;
  gap: var(--ob-space-5);
}

@media (min-width: 48em) {
  .woocommerce-checkout .col2-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ob-space-6);
  }
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
  font-size: var(--ob-text-subhead);
  line-height: var(--ob-leading-subhead);
  margin-bottom: var(--ob-space-3);
}

.form-row {
  margin-bottom: var(--ob-space-4);
}

.form-row label {
  color: var(--ob-text-muted);
}

.required {
  color: var(--ob-critical);
  text-decoration: none;
}

.woocommerce-input-wrapper {
  display: block;
}

#payment {
  margin-top: var(--ob-space-5);
  padding: var(--ob-space-4);
  background-color: var(--ob-surface-raised);
  border: var(--ob-border-width) solid var(--ob-border);
  border-radius: var(--ob-radius-panel);
}

#payment ul.payment_methods {
  margin: 0 0 var(--ob-space-4);
  padding: 0;
  list-style: none;
}

#payment ul.payment_methods li + li {
  margin-top: var(--ob-space-3);
  padding-top: var(--ob-space-3);
  border-top: var(--ob-border-width) solid var(--ob-border);
}

#payment .payment_box {
  margin-top: var(--ob-space-2);
  padding: var(--ob-space-3);
  background-color: var(--ob-surface-sunken);
  border-radius: var(--ob-radius-control);
  font-size: var(--ob-text-caption);
  line-height: var(--ob-leading-caption);
}

.woocommerce-terms-and-conditions-wrapper {
  margin: var(--ob-space-4) 0;
  font-size: var(--ob-text-caption);
  line-height: var(--ob-leading-caption);
}

.woocommerce-privacy-policy-text {
  color: var(--ob-text-muted);
  font-size: var(--ob-text-caption);
  line-height: var(--ob-leading-caption);
}

/* ==========================================================================
   11. MY ACCOUNT
   ========================================================================== */

.woocommerce-account .woocommerce {
  display: grid;
  gap: var(--ob-space-5);
}

@media (min-width: 48em) {
  .woocommerce-account .woocommerce {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: var(--ob-space-6);
    align-items: start;
  }
}

.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--ob-border-width) solid var(--ob-border);
  border-radius: var(--ob-radius-panel);
  overflow: hidden;
}

.woocommerce-MyAccount-navigation li + li {
  border-top: var(--ob-border-width) solid var(--ob-border);
}

.woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  min-height: var(--ob-touch-min);
  padding: var(--ob-row-padding);
  color: var(--ob-text);
  text-decoration: none;
}

.woocommerce-MyAccount-navigation a:hover {
  background-color: var(--ob-hover);
  color: var(--ob-accent-pressed);
}

.woocommerce-MyAccount-navigation .is-active a {
  background-color: var(--ob-selected);
  font-weight: var(--ob-weight-semibold);
  box-shadow: inset 2px 0 0 0 var(--ob-accent);
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-EditAccountForm {
  max-width: var(--ob-measure-narrow);
}

.woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: var(--ob-space-2);
}

/* ==========================================================================
   12. BREADCRUMB, PAGINATION
   ========================================================================== */

.ob-breadcrumb {
  margin-bottom: var(--ob-space-4);
  color: var(--ob-text-muted);
  font-size: var(--ob-text-caption);
  line-height: var(--ob-leading-caption);
}

.ob-breadcrumb a {
  color: var(--ob-accent);
}

.ob-breadcrumb__sep {
  margin: 0 var(--ob-space-2);
  color: var(--ob-border-strong);
}

.woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ob-space-2);
  margin: var(--ob-space-6) 0 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.woocommerce-pagination li {
  list-style: none;
}