/* ---------------------------------------------------------------------
   NN Search and Bag - ticket 10
   The house look for two screens the shop plugin draws in its own grey:
   the catalogue search results and the one shared bag (the classic cart
   table). Every value reads the child theme's tokens, and the two
   wordings sit side by side in the PHP, not here.
   ------------------------------------------------------------------ */

/* =====================================================================
   1. Notices - the line after every bag action
   Add to bag, quantity change, removal and the one-artwork refusal all
   speak through the shop plugin's notices. They read as house lines: an
   ivory card with a hairline edge and a three-pixel spine, no icon font,
   no shop pink.
   ================================================================== */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.single-product .woocommerce-message,
body.single-product .woocommerce-info,
body.single-product .woocommerce-error,
body.search-results .woocommerce-message,
body.search-results .woocommerce-info,
body.search-results .woocommerce-error {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.4rem;
  background-color: var(--color-ivory, #F4F1EA);
  border: 1px solid var(--color-border, #E8E1D6);
  border-left: 3px solid var(--color-charcoal, #20201F);
  border-radius: 0;
  color: var(--color-charcoal, #20201F);
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-body-md-size, 14px);
  line-height: var(--type-body-md-leading, 1.6);
  list-style: none;
}

body.woocommerce-cart .woocommerce-error,
body.single-product .woocommerce-error,
body.search-results .woocommerce-error {
  border-left-color: var(--color-error, #B42318);
}

body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-message::after,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-info::after,
body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-cart .woocommerce-error::after,
body.single-product .woocommerce-message::before,
body.single-product .woocommerce-message::after,
body.single-product .woocommerce-info::before,
body.single-product .woocommerce-info::after,
body.single-product .woocommerce-error::before,
body.single-product .woocommerce-error::after,
body.search-results .woocommerce-message::before,
body.search-results .woocommerce-message::after {
  content: none;
  display: none;
}

body.woocommerce-cart .woocommerce-message:focus,
body.woocommerce-cart .woocommerce-info:focus,
body.woocommerce-cart .woocommerce-error:focus,
body.single-product .woocommerce-message:focus,
body.single-product .woocommerce-info:focus,
body.single-product .woocommerce-error:focus {
  outline: none;
}

body.woocommerce-cart .woocommerce-error li,
body.single-product .woocommerce-error li {
  margin: 0;
}

/* The "View cart" link inside a notice is a small outlined button, not a
   floating block. */
body.woocommerce-cart .woocommerce-message .button,
body.single-product .woocommerce-message .button {
  float: none;
  display: inline-block;
  margin: 0 0 0 .75rem;
  padding: .45rem .95rem;
  background-color: transparent;
  border: 1px solid var(--color-charcoal, #20201F);
  border-radius: 2px;
  color: var(--color-charcoal, #20201F);
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-label-sm-size, 11px);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.4;
}

body.woocommerce-cart .woocommerce-message .button:hover,
body.single-product .woocommerce-message .button:hover {
  background-color: var(--color-charcoal, #20201F);
  color: var(--color-ivory, #F4F1EA);
}

/* =====================================================================
   2. The bag - two columns on a wide screen
   The bag list takes the wide column; the totals sit beside it instead
   of under a half-empty page. Below 1000px the totals drop underneath.
   ================================================================== */
@media (min-width: 1180px) {
  body.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(320px, 1fr);
    gap: 2.5rem 3rem;
    align-items: start;
  }

  body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
  body.woocommerce-cart .woocommerce > .nn-bag-empty,
  body.woocommerce-cart .woocommerce > .cross-sells,
  body.woocommerce-cart .woocommerce > .cart-empty {
    grid-column: 1 / -1;
  }

  body.woocommerce-cart .woocommerce > form.woocommerce-cart-form {
    grid-column: 1;
    width: auto;
    float: none;
  }

  body.woocommerce-cart .woocommerce > .cart-collaterals {
    grid-column: 2;
    float: none;
    width: auto;
    margin: 0;
  }
}

body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
  margin: 0;
}

/* =====================================================================
   3. The bag list - rows, not a spreadsheet
   ================================================================== */
body.woocommerce-cart table.shop_table.cart {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-border, #E8E1D6);
  border-collapse: collapse;
  border-radius: 0;
  background-color: transparent;
  font-family: var(--font-body, sans-serif);
  color: var(--color-charcoal, #20201F);
}

body.woocommerce-cart table.shop_table.cart thead th {
  padding: .9rem .75rem;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border, #E8E1D6);
  color: var(--color-stone, #A79D91);
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-label-sm-size, 11px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
}

body.woocommerce-cart table.shop_table.cart thead th.product-remove,
body.woocommerce-cart table.shop_table.cart thead th.product-thumbnail {
  width: 1px;
  padding-left: 0;
}

body.woocommerce-cart table.shop_table.cart tbody td {
  padding: 1.35rem .75rem;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border, #E8E1D6);
  vertical-align: middle;
  font-size: var(--type-body-md-size, 14px);
  color: var(--color-charcoal, #20201F);
}

body.woocommerce-cart table.shop_table.cart tbody td.product-remove {
  padding-left: 0;
  width: 1px;
  white-space: nowrap;
}

body.woocommerce-cart table.shop_table.cart tbody td.product-thumbnail {
  width: 96px;
  padding-left: 0;
}

body.woocommerce-cart table.shop_table.cart tbody td.product-thumbnail a {
  display: block;
  width: 84px;
}

body.woocommerce-cart table.shop_table.cart tbody td.product-thumbnail img {
  display: block;
  width: 84px;
  height: 84px;
  object-fit: cover;
  background-color: var(--color-sand, #E8E1D6);
  border-radius: 0;
}

body.woocommerce-cart table.shop_table.cart td.product-name a {
  display: inline-block;
  color: var(--color-charcoal, #20201F);
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-body-lg-size, 16px);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

body.woocommerce-cart table.shop_table.cart td.product-name a:hover,
body.woocommerce-cart table.shop_table.cart td.product-name a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.woocommerce-cart table.shop_table.cart td.product-name a span {
  color: var(--color-stone, #A79D91);
}

body.woocommerce-cart table.shop_table.cart td.product-price,
body.woocommerce-cart table.shop_table.cart td.product-subtotal {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

body.woocommerce-cart table.shop_table.cart td.product-subtotal {
  font-weight: 600;
}

/* The remove link reads as a small word, not a cross. */
body.woocommerce-cart a.remove.nn-sb-remove,
body.woocommerce-cart .woocommerce a.nn-sb-remove {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  color: var(--color-stone, #A79D91);
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-label-sm-size, 11px);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  color: var(--color-stone, #A79D91) !important;
}

body.woocommerce-cart a.remove.nn-sb-remove:hover,
body.woocommerce-cart a.remove.nn-sb-remove:focus,
body.woocommerce-cart .woocommerce a.nn-sb-remove:hover,
body.woocommerce-cart .woocommerce a.nn-sb-remove:focus {
  color: var(--color-charcoal, #20201F) !important;
  background: none;
  border-bottom-color: var(--color-charcoal, #20201F);
}

body.woocommerce-cart a.nn-sb-remove::before {
  content: none;
  display: none;
}

/* The quantity field. */
body.woocommerce-cart .quantity .qty {
  width: 4.75rem;
  height: 2.85rem;
  padding: 0 .5rem;
  background-color: var(--color-ivory, #F4F1EA);
  border: 1px solid var(--color-border, #E8E1D6);
  border-radius: 2px;
  color: var(--color-charcoal, #20201F);
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-body-md-size, 14px);
  text-align: center;
}

body.woocommerce-cart .quantity .qty:focus {
  outline: 2px solid var(--color-charcoal, #20201F);
  outline-offset: 1px;
}

/* An artwork is one of one: the field is a fixed line, not a control. */
body.woocommerce-cart .nn-sb-oneof {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
}

body.woocommerce-cart .nn-sb-oneof__number {
  font-size: var(--type-body-md-size, 14px);
  font-variant-numeric: tabular-nums;
  color: var(--color-charcoal, #20201F);
}

body.woocommerce-cart .nn-sb-oneof__note {
  font-size: var(--type-label-sm-size, 11px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-stone, #A79D91);
}

/* The coupon and the update control share one quiet row. */
body.woocommerce-cart table.shop_table.cart td.actions {
  padding: 1.25rem .25rem;
  border-bottom: 0;
  background-color: transparent;
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  float: none;
  margin: 0;
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon .input-text {
  width: 12rem !important;
  height: 2.85rem;
  margin: 0;
  padding: 0 .8rem;
  background-color: var(--color-ivory, #F4F1EA);
  border: 1px solid var(--color-border, #E8E1D6);
  border-radius: 2px;
  color: var(--color-charcoal, #20201F);
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-body-md-size, 14px);
}

body.woocommerce-cart table.shop_table.cart td.actions .coupon .input-text::placeholder {
  color: var(--color-stone, #A79D91);
}

body.woocommerce-cart table.shop_table.cart td.actions .button {
  margin: 0;
  height: 2.85rem;
  padding: 0 1.35rem;
  background-color: transparent;
  border: 1px solid var(--color-charcoal, #20201F);
  border-radius: 2px;
  color: var(--color-charcoal, #20201F);
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-label-sm-size, 11px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

body.woocommerce-cart table.shop_table.cart td.actions .button:hover {
  background-color: var(--color-charcoal, #20201F);
  color: var(--color-ivory, #F4F1EA);
}

body.woocommerce-cart table.shop_table.cart td.actions button[name="update_cart"] {
  float: right;
  height: 2.85rem;
  padding: 0 1.6rem;
  border-radius: 2px;
}

body.woocommerce-cart table.shop_table.cart td.actions button[name="update_cart"]:disabled {
  background-color: var(--color-sand, #E8E1D6);
  color: var(--color-stone, #A79D91);
  border-color: var(--color-border, #E8E1D6);
}

/* =====================================================================
   4. The totals panel
   ================================================================== */
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  margin: 0;
  padding: 1.6rem 1.75rem 1.75rem;
  background-color: var(--color-sand, #E8E1D6);
  border-radius: 2px;
  font-family: var(--font-body, sans-serif);
  color: var(--color-charcoal, #20201F);
}

body.woocommerce-cart .cart_totals h2 {
  margin: 0 0 1rem;
  padding: 0;
  font-size: var(--type-label-md-size, 12px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-charcoal, #20201F);
}

body.woocommerce-cart .cart_totals table.shop_table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  border-radius: 0;
  background-color: transparent;
}

body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
  padding: .85rem 0;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(32, 32, 31, .12);
  font-size: var(--type-body-md-size, 14px);
  color: var(--color-charcoal, #20201F);
  vertical-align: top;
}

body.woocommerce-cart .cart_totals table.shop_table th {
  width: 42%;
  padding-right: 1rem;
  font-weight: 400;
}

body.woocommerce-cart .cart_totals table.shop_table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.woocommerce-cart .cart_totals table.shop_table td[data-title]::before {
  content: none;
  display: none;
}

body.woocommerce-cart .cart_totals tr.order-total td {
  white-space: nowrap;
}

body.woocommerce-cart .cart_totals tr.order-total th,
body.woocommerce-cart .cart_totals tr.order-total td {
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-charcoal, #20201F);
  border-bottom: 0;
  font-size: var(--type-body-lg-size, 16px);
  font-weight: 600;
}

body.woocommerce-cart .cart_totals .woocommerce-shipping-calculator p {
  margin: .6rem 0 0;
}

body.woocommerce-cart .cart_totals .shipping-calculator-button {
  border: 0;
  border-bottom: 1px solid var(--color-stone, #A79D91);
  font-size: var(--type-label-sm-size, 11px);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-stone, #A79D91);
  border-radius: 0;
  padding: 0 0 2px;
  background: none;
  color: var(--color-charcoal, #20201F);
}

/* The shop plugin's icon font leaves a small glyph after the words. */
body.woocommerce-cart .shipping-calculator-button::after,
body.woocommerce-cart .woocommerce-shipping-calculator p button::after {
  content: none;
  display: none;
}

body.woocommerce-cart .cart_totals .shipping-calculator-button:hover {
  background: none;
  color: var(--color-charcoal, #20201F);
  border-bottom-color: var(--color-charcoal, #20201F);
}

/* The honest total: the mark on the figure, the plain line underneath. */
body.woocommerce-cart .nn-sb-total-mark {
  padding-left: .15rem;
  font-size: .8em;
  vertical-align: super;
  color: var(--color-charcoal, #20201F);
}

body.woocommerce-cart .nn-sb-total-note {
  margin: 1rem 0 0;
  font-size: var(--type-body-sm-size, 12px);
  line-height: 1.55;
  color: var(--color-charcoal, #20201F);
}

body.woocommerce-cart .wc-proceed-to-checkout {
  padding: 1.25rem 0 0;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1.05rem 1rem;
  background-color: var(--color-charcoal, #20201F);
  border: 1px solid var(--color-charcoal, #20201F);
  border-radius: 2px;
  color: var(--color-ivory, #F4F1EA);
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-label-lg-size, 12px);
  font-weight: 600;
  letter-spacing: var(--type-label-lg-tracking, .1em);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}

body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--color-ivory, #F4F1EA);
  color: var(--color-charcoal, #20201F);
}

/* =====================================================================
   5. The empty bag and the empty search - one house panel
   ================================================================== */
.nn-bag-empty,
.nn-sb-none {
  max-width: 44rem;
  margin: 0 0 3rem;
  padding: 2.25rem 2rem;
  background-color: var(--color-sand, #E8E1D6);
  border-radius: 2px;
  font-family: var(--font-body, sans-serif);
  color: var(--color-charcoal, #20201F);
}

.nn-bag-empty__title {
  margin: 0;
  padding: 0;
  font-size: var(--type-headline-md-size, 24px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-charcoal, #20201F);
}

.nn-bag-empty__note,
.nn-sb-none__note {
  margin: .9rem 0 0;
  font-size: var(--type-body-md-size, 14px);
  line-height: 1.65;
  color: var(--color-charcoal, #20201F);
}

.nn-bag-empty__lead {
  margin: 1.6rem 0 .75rem;
  font-size: var(--type-label-sm-size, 11px);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-stone, #A79D91);
}

.nn-sb-none__lead {
  margin: 0;
  font-size: var(--type-headline-sm-size, 18px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-charcoal, #20201F);
}

.nn-sb-worlds {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nn-sb-worlds a {
  display: inline-block;
  padding-bottom: 2px;
  color: var(--color-charcoal, #20201F);
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-label-sm-size, 11px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--color-stone, #A79D91);
}

.nn-sb-worlds a:hover,
.nn-sb-worlds a:focus {
  border-bottom-color: var(--color-charcoal, #20201F);
}

.nn-sb-none {
  margin: 0 0 3rem;
}

/* =====================================================================
   6. The search results screen
   The grid is the shop plugin's own; only the quiet furniture above it
   is dressed here, so the count and the sort control read as house type.
   ================================================================== */
body.search-results .shop-search-results .woocommerce-result-count {
  padding: .7rem 0;
  color: var(--color-stone, #A79D91);
  font-family: var(--font-body, sans-serif);
  font-size: var(--type-label-sm-size, 11px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* =====================================================================
   7. Narrow screens
   Below 860px the bag rows become cards: picture on the left, name and
   price on the right, quantity and line total underneath, remove at the
   top right. The totals panel sits under the list, full width.
   ================================================================== */
@media (max-width: 1179px) {
  body.woocommerce-cart .cart-collaterals {
    margin-top: 2.5rem;
  }
}

@media (max-width: 860px) {
  body.woocommerce-cart table.shop_table.cart {
    display: block;
    border-top: 0;
  }

  body.woocommerce-cart table.shop_table.cart thead {
    display: none;
  }

  body.woocommerce-cart table.shop_table.cart tbody {
    display: block;
  }

  body.woocommerce-cart table.shop_table.cart tr.cart_item {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name remove"
      "thumb qty subtotal";
    gap: .35rem 1rem;
    align-items: start;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--color-border, #E8E1D6);
  }

  /* The shop plugin's phone rules hide the picture and right-align every
     cell with !important; the bag keeps its picture and reads from the
     left, so these three lines have to answer in the same voice. */
  body.woocommerce-cart table.shop_table.cart tr.cart_item td {
    display: block;
    padding: 0;
    border: 0;
    background-color: transparent;
    text-align: left !important;
  }

  body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal {
    text-align: right !important;
  }

  body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-thumbnail {
    display: block !important;
  }

  body.woocommerce-cart table.shop_table.cart tr.cart_item td::before {
    content: none;
    display: none;
  }

  body.woocommerce-cart .woocommerce table.shop_table.cart td.product-remove,
  body.woocommerce-cart .woocommerce table.shop_table.cart td.product-thumbnail,
  body.woocommerce-cart .woocommerce table.shop_table.cart td.product-quantity,
  body.woocommerce-cart .woocommerce table.shop_table.cart td.product-price,
  body.woocommerce-cart .woocommerce table.shop_table.cart td.product-subtotal {
    width: auto;
  }

  body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
    grid-area: thumb;
    width: auto;
  }

  body.woocommerce-cart table.shop_table.cart td.product-name {
    grid-area: name;
    align-self: start;
  }

  body.woocommerce-cart table.shop_table.cart td.product-remove {
    grid-area: remove;
    justify-self: end;
    align-self: start;
    width: auto;
  }

  body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price {
    display: none !important;
  }

  body.woocommerce-cart table.shop_table.cart td.product-quantity {
    grid-area: qty;
    align-self: center;
    margin-top: .35rem;
  }

  body.woocommerce-cart table.shop_table.cart td.product-subtotal {
    grid-area: subtotal;
    justify-self: end;
    align-self: center;
    margin-top: .35rem;
    white-space: nowrap;
  }

  body.woocommerce-cart table.shop_table.cart tr td.actions {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.25rem 0 0;
  }

  body.woocommerce-cart table.shop_table.cart td.actions .coupon {
    width: 100%;
  }

  body.woocommerce-cart table.shop_table.cart td.actions .coupon .input-text {
    flex: 1 1 8rem;
    width: auto;
    min-width: 0;
  }

  body.woocommerce-cart table.shop_table.cart td.actions button[name="update_cart"] {
    float: none;
    width: 100%;
  }

  body.woocommerce-cart .cart_totals {
    padding: 1.35rem 1.25rem 1.5rem;
  }

  /* The totals keep their row labels on a phone: three bare figures in a
     column say nothing. */
  body.woocommerce-cart .cart_totals table.shop_table,
  body.woocommerce-cart .cart_totals table.shop_table tbody {
    display: table;
    width: 100%;
  }

  body.woocommerce-cart .cart_totals table.shop_table tbody {
    display: table-row-group;
  }

  body.woocommerce-cart .cart_totals table.shop_table tr {
    display: table-row;
  }

  body.woocommerce-cart .cart_totals table.shop_table th {
    display: table-cell;
    vertical-align: top;
  }

  body.woocommerce-cart .cart_totals table.shop_table td {
    display: table-cell;
    padding-left: .5rem;
    text-align: right;
    vertical-align: top;
  }

  body.woocommerce-cart .cart_totals table.shop_table td::before {
    content: none;
    display: none;
  }

  .nn-bag-empty,
  .nn-sb-none {
    padding: 1.6rem 1.25rem;
  }

  .nn-sb-worlds {
    gap: .5rem 1.25rem;
  }
}