/* =========================================================================
   Cart, checkout and account.

   Loaded on those three pages only, after main.css. `functions.php` drops the
   WooCommerce stylesheets wholesale, which leaves every form WooCommerce
   renders — checkout, login, addresses — at browser defaults: labels inline
   with their fields, inputs at their intrinsic size, a 20-character textarea.
   Nothing here restyles the catalogue; it dresses the markup WooCommerce owns
   in the same hairline monochrome as the rest of the theme.
   ========================================================================= */

/* ---------------------------------------------------------------- fields */

.woocommerce form .form-row {
  display: block;
  margin: 0 0 20px;
}

.woocommerce form label,
.woocommerce-EditAccountForm label,
.woocommerce-address-fields label {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-soft);
}
/* The checkbox rows read as a sentence, not as a field label. */
.woocommerce form .form-row label.checkbox,
.woocommerce form label.woocommerce-form__label-for-checkbox {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: 12.5px; letter-spacing: 0;
  text-transform: none; font-weight: 400; color: var(--ink);
}
.woocommerce form .required { color: var(--sale); text-decoration: none; border: 0; }
.woocommerce form .optional { color: var(--muted); font-weight: 400; }

.woocommerce-input-wrapper { display: block; width: 100%; }

.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="url"],
.woocommerce form input[type="password"],
.woocommerce form input[type="number"],
.woocommerce form select,
.woocommerce form textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: inherit; font-size: 14px; line-height: 1.4;
  outline: none;
  transition: border-color .16s var(--ease);
}
.woocommerce form .input-text:focus,
.woocommerce form input:focus,
.woocommerce form select:focus,
.woocommerce form textarea:focus { border-color: var(--ink); }

.woocommerce form input::placeholder,
.woocommerce form textarea::placeholder { color: var(--muted); }

/* WooCommerce renders order notes as a 2-row textarea. */
.woocommerce form textarea {
  min-height: 116px;
  resize: vertical;
}

/* Native select, drawn with the same chevron the shop toolbar uses. */
.woocommerce form select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230a0a0a' stroke-width='2'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
}

.woocommerce form .form-row.woocommerce-invalid .input-text,
.woocommerce form .form-row.woocommerce-invalid select { border-color: var(--sale); }
.woocommerce-error, .woocommerce form .woocommerce-error { color: var(--sale); }

/* Two-up only where there is room for two. Below that every field is its own
   row — a half-width "Postcode" beside a half-width "Town" on a 390px screen
   is how the default layout becomes unusable. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper,
.woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 18px;
}
.woocommerce form .form-row-wide,
.woocommerce form .form-row-full { grid-column: 1 / -1; }

@media (min-width: 620px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------------------------- headings */

.woocommerce h3,
.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3,
#order_review_heading {
  margin: 0 0 20px;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
}
.woocommerce-additional-fields { margin-top: 38px; }

/* --------------------------------------------------------------- buttons */

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
#place_order {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 28px;
  border: 1px solid var(--ink);
  background: var(--ink); color: #fff;
  font-family: inherit; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
#place_order:hover { background: #fff; color: var(--ink); }
.woocommerce .button:disabled,
.woocommerce .button[disabled] { opacity: .35; pointer-events: none; }

/* Secondary weight for the two that sit beside a primary action. */
.woocommerce .coupon .button,
.woocommerce button[name="update_cart"] {
  background: #fff; color: var(--ink); border-color: var(--line);
}
.woocommerce .coupon .button:hover,
.woocommerce button[name="update_cart"]:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ------------------------------------------------------------------ cart */

/* The chosen size, carried from the product page through to the order line. */
.product-name .variation,
.product-name dl.variation {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px;
  margin: 7px 0 0;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
}
.product-name .variation dt { margin: 0; font-weight: 500; }
.product-name .variation dd { margin: 0; }
.product-name .variation dd p { margin: 0; }

.woocommerce table.cart .product-name > a {
  font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink);
}
.woocommerce table.cart .product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  font-size: 20px; line-height: 1; color: var(--muted);
}
.woocommerce table.cart .product-remove a.remove:hover { color: var(--sale); }

.coupon { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.coupon input { flex: 1 1 180px; min-width: 0; }

.cart_totals table.shop_table th { border-bottom: 1px solid var(--line); font-weight: 600; }
.cart_totals table.shop_table td { border-bottom: 1px solid var(--line); text-align: right; }
.wc-proceed-to-checkout { margin-top: 20px; }
.wc-proceed-to-checkout .checkout-button { width: 100%; }

/* -------------------------------------------------------------- checkout */

.woocommerce-form-coupon-toggle .woocommerce-info,
.checkout_coupon { margin-bottom: 26px; }
.checkout_coupon { border: 1px solid var(--line); padding: 20px; }
@media (min-width: 620px) {
  .checkout_coupon { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
  .checkout_coupon .form-row { margin: 0; }
}

#order_review { border: 1px solid var(--line); padding: 24px; }
#order_review table.shop_table { font-size: 13px; }
#order_review table.shop_table th { border-bottom: 1px solid var(--ink); }
#order_review table.shop_table td { border-bottom: 1px solid var(--line); text-align: right; }
#order_review table.shop_table td.product-name { text-align: left; }
#order_review tfoot th { border-bottom: 1px solid var(--line); text-transform: uppercase; }
#order_review tfoot .order-total th,
#order_review tfoot .order-total td { border-bottom: 0; font-size: 15px; font-weight: 700; }

.wc_payment_methods { list-style: none; margin: 0 0 20px; padding: 0; }
.wc_payment_methods li { border-bottom: 1px solid var(--line-soft); padding: 14px 0; }
.wc_payment_methods li:last-child { border-bottom: 0; }
.wc_payment_methods label {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink);
}
.payment_box {
  margin: 12px 0 0; padding: 14px 16px;
  background: var(--bg-alt);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
}
.payment_box p:last-child { margin-bottom: 0; }

#payment { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.woocommerce-privacy-policy-text { font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 18px; }
.form-row.place-order { margin-bottom: 0; }
#place_order { width: 100%; }

/* Details on the left, the order and the payment choice held beside them —
   only once there is room for two columns that are both still readable. */
@media (min-width: 1024px) {
  form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    /* The details column spans both rows and is far the taller of the two.
       Without a `1fr` to absorb it, grid shares that height between the rows
       and pushes the order box away from the heading it belongs to. */
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    align-items: start;
  }
  form.checkout > * { grid-column: 1; }
  form.checkout > #customer_details { grid-row: 1 / span 2; }
  form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; }
  form.checkout > #order_review {
    grid-column: 2; grid-row: 2;
    align-self: start;
    position: sticky; top: calc(var(--nav-h) + 22px);
  }
}

/* Billing and shipping stack rather than sitting two-up, so each field set
   keeps the full measure for its own two-up rows. */
.col2-set .col-2 { margin-top: 38px; }

/* --------------------------------------------------------------- account */

.woocommerce-account .woocommerce { display: grid; gap: 34px; }
@media (min-width: 900px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 54px;
  }
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-MyAccount-navigation a {
  display: block; padding: 14px 0;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft);
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a { color: var(--ink); }

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
  border: 1px solid var(--line);
  padding: 28px;
  max-width: 460px;
}
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 10px; }
.woocommerce-LostPassword { margin: 14px 0 0; font-size: 12.5px; }
.woocommerce-LostPassword a { text-decoration: underline; text-underline-offset: 3px; }

.woocommerce-password-strength { margin-top: 8px; font-size: 12px; }

/* The reveal toggle is an empty span that WooCommerce's own stylesheet places
   inside the field and gives an eye to — both of which left with that sheet,
   so it was rendering as a grey square dropped below the input. */
.woocommerce .password-input,
.woocommerce-page .password-input { position: relative; display: block; }
.woocommerce .password-input .input-text { padding-right: 48px; }
.show-password-input {
  position: absolute; top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border: 0; background: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.6'%3E%3Cpath d='M1.5 12S5 5.5 12 5.5 22.5 12 22.5 12 19 18.5 12 18.5 1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px;
}
.show-password-input.display-password {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.6'%3E%3Cpath d='M1.5 12S5 5.5 12 5.5 22.5 12 22.5 12 19 18.5 12 18.5 1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- select2 */

/* WooCommerce still ships select2 for the country and state fields, and its
   own stylesheet survives the `woocommerce_enqueue_styles` filter. Left alone
   it renders a 28px rounded grey box in a column of 50px square ones — out of
   step to look at, and too short to tap. The dropdown is appended to <body>,
   so none of this can be nested under `.woocommerce`. */

.select2-container--default .select2-selection--single {
  height: 50px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 40px 0 15px;
  line-height: 48px;
  color: var(--ink);
  font-size: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--ink); }

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0; right: 12px; height: 48px; width: 12px;
}
/* The default arrow is a CSS triangle built out of borders. */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border: 0; margin: 0; padding: 0;
  top: 50%; left: 0; transform: translateY(-50%);
  width: 11px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%230a0a0a' stroke-width='2'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5'/%3E%3C/svg%3E") no-repeat center / 11px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  transform: translateY(-50%) rotate(180deg);
}

.select2-dropdown {
  border: 1px solid var(--ink);
  border-radius: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--line);
  padding: 10px 12px;
  font-family: inherit; font-size: 14px;
  outline: none;
}
.select2-container--default .select2-results__option {
  padding: 10px 15px;
  font-size: 13.5px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--ink); color: #fff;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
  background: var(--bg-alt); color: var(--ink);
}

/* --------------------------------------------------------- order received */

/* The checkout pages run on the full 1800px grid, which leaves this page's
   short lines stranded. It reads as a document, so it is capped like one. */
.thanks { max-width: 940px; padding-block: 4px 72px; }

.thanks__head { margin-bottom: 30px; }

.thanks__lede {
  margin: 0 0 6px;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.thanks__sub { margin: 0; color: var(--ink-soft); max-width: 60ch; }

.thanks__failed { margin: 0 0 24px; color: var(--sale); font-weight: 600; }

/* ------------------------------------------------------------ fact grid */

/* Order number, date, total, payment method: the details a customer reads
   back to us on the phone, so they are set as a spec block, not a list. */
.thanks__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.thanks__facts li {
  margin: 0;
  padding: 18px 20px;
  background: var(--bg);
}

.thanks__facts span {
  display: block;
  margin-bottom: 7px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted);
}

.thanks__facts strong {
  display: block;
  font-size: 15px; font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.thanks__facts .amount, .thanks__facts bdi { font-weight: 600; }

/* Gateway instructions — cash on delivery writes here. */
.thanks__note {
  margin: 0 0 40px;
  padding: 18px 22px;
  background: var(--bg-alt);
  border-left: 2px solid var(--ink);
}

.thanks__note p { margin: 0; color: var(--ink-soft); }
.thanks__note p + p { margin-top: 8px; }

/* -------------------------------------------------- order + customer tables */

.thanks .woocommerce-order-details,
.thanks .woocommerce-customer-details { margin-bottom: 44px; }

.thanks .woocommerce-order-details__title,
.thanks .woocommerce-customer-details h2,
.thanks .woocommerce-column__title,
.thanks__next h2 {
  margin: 0 0 16px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
}

.thanks .woocommerce-table--order-details {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
}

.thanks .woocommerce-table--order-details th,
.thanks .woocommerce-table--order-details td {
  padding: 16px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.thanks .woocommerce-table--order-details thead th {
  padding-block: 12px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted);
}

.thanks .woocommerce-table--order-details .product-total,
.thanks .woocommerce-table--order-details tfoot td { text-align: right; white-space: nowrap; }

.thanks .woocommerce-table--order-details .product-name a {
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

.thanks .woocommerce-table--order-details .product-name a:hover { border-color: var(--ink); }

/* Size and any other line-item meta, printed by WooCommerce as a nested list. */
.thanks .wc-item-meta {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.thanks .wc-item-meta li { display: flex; gap: 6px; }
.thanks .wc-item-meta strong { font-weight: 600; }
.thanks .wc-item-meta p { margin: 0; }

.thanks .woocommerce-table--order-details tfoot th {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft);
}

.thanks .woocommerce-table--order-details tfoot tr:last-child th,
.thanks .woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: 0;
  padding-top: 18px;
  font-size: 15px;
  color: var(--ink);
}

.thanks .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 34px;
}

.thanks address {
  font-style: normal;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------ next steps */

.thanks__next { border-top: 1px solid var(--line); padding-top: 34px; }

.thanks__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.thanks__steps li { counter-increment: step; }

.thanks__steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .13em;
  color: var(--muted);
}

.thanks__steps h3 {
  margin: 0 0 6px;
  font-size: 14px; font-weight: 600;
}

.thanks__steps p { margin: 0; color: var(--ink-soft); font-size: 13px; }

.thanks__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

@media (max-width: 600px) {
  .thanks { padding-bottom: 52px; }
  .thanks__facts { grid-template-columns: repeat(2, 1fr); }
  .thanks__actions .btn { width: 100%; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  /* main.css lifts every typing control to 16px so iOS does not zoom the page
     in on focus. The component rules above are more specific and land later,
     so they have to opt in again or they quietly undo it. */
  .woocommerce form .input-text,
  .woocommerce form input[type="text"],
  .woocommerce form input[type="email"],
  .woocommerce form input[type="tel"],
  .woocommerce form input[type="url"],
  .woocommerce form input[type="password"],
  .woocommerce form input[type="number"],
  .woocommerce form select,
  .woocommerce form textarea,
  .select2-container .select2-selection--single,
  .select2-container .select2-search__field,
  .select2-container--default .select2-selection--single .select2-selection__rendered,
  .select2-container--default .select2-search--dropdown .select2-search__field {
    font-size: 16px;
  }
}

@media (max-width: 760px) {
  #order_review { padding: 18px; }
  .checkout_coupon { padding: 16px; }
  .woocommerce-form-login,
  .woocommerce-form-register,
  .woocommerce-ResetPassword { padding: 20px; }

  /* One action per line: three controls sharing a 354px row is what made the
     coupon box wrap its own button labels. */
  .coupon { gap: 12px; }
  .coupon input,
  .coupon .button { flex: 1 1 100%; }

  /* A cart line becomes a card — shot on the left, everything describing the
     line stacked beside it. The generic label/value treatment that suits a
     totals table gives the product cell three flex children (label, title,
     size) fighting over ~160px, which is how it used to render. */
  .woocommerce table.cart tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 16px;
    padding: 18px 0;
  }
  /* Every cell below is addressed as `tr.cart_item > td.name` so it outranks
     this catch-all — matching on the cell class alone loses to it. */
  .woocommerce table.cart tr.cart_item > td { grid-column: 2; }

  .woocommerce table.cart tr.cart_item > td.product-thumbnail {
    grid-column: 1; grid-row: 1 / span 4;
    display: block; padding: 0;
  }
  .woocommerce table.cart tr.cart_item > td.product-thumbnail img { width: 100%; }

  /* Title and size read as a block, not as a label/value pair. */
  .woocommerce table.cart tr.cart_item > td.product-name {
    display: block;
    padding: 0 34px 4px 0;
  }
  .woocommerce table.cart tr.cart_item > td.product-name::before { content: none; }

  .woocommerce table.cart tr.cart_item > td.product-remove {
    position: absolute; top: 14px; right: 0;
    display: block; padding: 0;
  }

  /* The quantity stepper keeps its own width instead of stretching. */
  .woocommerce table.cart tr.cart_item > td.product-quantity .quantity { flex: none; }

  /* The actions row carries the coupon box, not a label/value pair. */
  .woocommerce table.cart td.actions { display: block; padding: 18px 0 4px; }
  .woocommerce table.cart td.actions::before { content: none; }
  .woocommerce table.cart td.actions > .button { width: 100%; margin-top: 12px; }

  /* The order line holds a title, a quantity and the chosen size. Spread
     across a flex row they each get a third of the width and all three wrap;
     stacked, the line reads in one go. */
  #order_review td.product-name { display: block; padding-right: 12px; }
  #order_review td.product-name::before { content: none; }
  #order_review td.product-name .product-quantity { margin-left: 6px; font-weight: 700; }

  /* The totals table labels every row twice — once in the `th` WooCommerce
     renders, once through the responsive `data-title`. */
  .cart_totals table.shop_table tr {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 10px 0;
  }
  .cart_totals table.shop_table th { padding: 0; border: 0; }
  .cart_totals table.shop_table td { display: block; padding: 0; border: 0; }
  .cart_totals table.shop_table td::before { content: none; }
}