/* ============================================================================
   WooCommerce in the new style.

   EVERY SELECTOR HERE IS A REAL WOOCOMMERCE CLASS, not one invented for the
   mockup. WooCommerce renders through the active theme, so when the new theme
   goes on, the product, cart and checkout pages already carry this markup --
   this file is what makes them match the rest of the site rather than merely
   inherit its header and font. Drop it into the theme as woocommerce.css and
   the shop follows, without touching a product, a price or an order.

   WHAT IS DELIBERATELY NOT STYLED HERE: rttheme19's own additions. The
   quantity spinners it injects (.rt-plus, .ui-icon-minus/.ui-icon-plus) and
   its .social_share_holder are the old theme's, not WooCommerce's, and they
   go with it. Anything keyed on them would be styling something that will not
   exist.

   Tokens come from site.css. Nothing is redefined here.
   ========================================================================= */

/* ---- shared shop furniture ------------------------------------------------ */

.woocommerce-notices-wrapper:empty{display:none}

/* The bare class is the right selector, and it is what the new theme will need.
   rttheme19 writes the same rule as ".woocommerce .woocommerce-message" and
   ".woocommerce-page .woocommerce-message" though, which is one class more
   specific, so on the LIVE shop it wins no matter how late this file loads --
   confirmed on the cart page 2026-09-29, where the notice kept the old theme's
   heavy black box. Hence the second block: it exists only to out-rank rttheme19
   and can be deleted the day that theme goes. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error{
  list-style:none;margin:0 0 28px;padding:16px 20px;border-radius:4px;
  border:1px solid var(--line);border-top-width:1px;background:var(--mist);
  font-size:15px}
.woocommerce-message,
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message{border-left:3px solid var(--red)}
.woocommerce-error,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error{
  border-left:3px solid var(--red);background:#fdf3f2}

/* The one button shape, so Add to cart, Update cart and Proceed to checkout
   are recognisably the same control as Get a quote everywhere else. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  display:inline-block;font-family:var(--body);font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px;border:1px solid var(--line);border-radius:3px;
  background:var(--paper);color:var(--ink);cursor:pointer;transition:.15s}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{border-color:var(--red);color:var(--red)}

/* .alt is WooCommerce's own marker for the primary action on a page: Add to
   cart, and Proceed to checkout. One red button per screen, as elsewhere. */
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt{
  background:var(--red);border-color:var(--red);color:#fff}
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover{
  background:var(--red-dk);border-color:var(--red-dk);color:#fff}

.woocommerce .button:disabled,
.woocommerce .button.disabled{opacity:.4;cursor:not-allowed}

/* Prices. WooCommerce wraps every amount in these, including inside tables. */
.woocommerce-Price-amount.amount{font-variant-numeric:tabular-nums;white-space:nowrap}
.woocommerce-Price-currencySymbol{font-size:.72em;vertical-align:.12em;margin-right:1px}

/* ---- single product ------------------------------------------------------ */

.woocommerce div.product{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:56px;align-items:start}
@media (max-width:860px){.woocommerce div.product{grid-template-columns:1fr;gap:34px}}

.woocommerce div.product .woocommerce-product-gallery{
  margin:0;background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:26px;position:relative}
.woocommerce div.product .woocommerce-product-gallery__wrapper{margin:0}
.woocommerce div.product .woocommerce-product-gallery__image img{
  display:block;width:100%;height:auto;border-radius:3px}

/* WooCommerce's own sale flash. Kept because it is real and it earns a corner. */
.woocommerce span.onsale{
  position:absolute;top:16px;left:16px;z-index:2;margin:0;
  background:var(--red);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:3px}

.woocommerce div.product .summary.entry-summary{margin:0}

.woocommerce div.product .product_title.entry-title{
  font-family:var(--disp);font-size:clamp(30px,4vw,44px);line-height:1.06;
  text-transform:uppercase;margin:0 0 18px}

.woocommerce div.product p.price{
  font-family:var(--disp);font-size:34px;line-height:1;color:var(--ink);
  margin:0 0 6px}
.woocommerce div.product p.price del{color:var(--muted);font-size:.6em;margin-right:10px}
.woocommerce div.product p.price ins{text-decoration:none;color:var(--red)}
.woocommerce div.product .price-note{
  font-size:13px;color:var(--muted);margin:0 0 26px}

.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:16.5px;line-height:1.65;color:var(--ink);margin:0 0 30px;max-width:58ch}
.woocommerce div.product .woocommerce-product-details__short-description ul{
  margin:16px 0 0;padding-left:20px}
.woocommerce div.product .woocommerce-product-details__short-description li{margin-bottom:7px}

.woocommerce div.product .stock.in-stock{
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#1d7a3d;margin:0 0 22px}
.woocommerce div.product .stock.out-of-stock{
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 22px}

.woocommerce div.product form.cart{
  display:flex;gap:12px;align-items:stretch;margin:0 0 28px;flex-wrap:wrap}
.woocommerce div.product form.cart .quantity{display:flex}
.woocommerce .quantity input.qty{
  width:78px;padding:14px 10px;text-align:center;font-family:var(--body);
  font-size:16px;border:1px solid var(--line);border-radius:3px;background:var(--paper)}
.woocommerce .quantity input.qty:focus{outline:2px solid var(--red);outline-offset:-1px}
.woocommerce div.product form.cart .single_add_to_cart_button{flex:0 0 auto}

.woocommerce div.product .product_meta{
  font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px}
.woocommerce div.product .product_meta > span{display:block;margin-bottom:6px}
.woocommerce div.product .product_meta a{color:var(--muted)}
.woocommerce div.product .product_meta a:hover{color:var(--red)}

/* Tabs: description, additional information, reviews. */
.woocommerce div.product .woocommerce-tabs{grid-column:1/-1;margin-top:8px}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0;
  border-bottom:1px solid var(--line)}
.woocommerce div.product .woocommerce-tabs ul.tabs li{margin:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:15px 22px;text-decoration:none;font-size:12.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  border-bottom:3px solid transparent;margin-bottom:-1px}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--ink);border-bottom-color:var(--red)}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--ink)}
.woocommerce div.product .woocommerce-tabs .panel{padding:30px 0 0;max-width:74ch}
.woocommerce div.product .woocommerce-tabs .panel h2{display:none}

.woocommerce table.shop_attributes{width:100%;border-collapse:collapse;font-size:15px}
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td{
  text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.woocommerce table.shop_attributes th{width:34%;font-weight:600;color:var(--muted)}
.woocommerce table.shop_attributes td p{margin:0}

/* ---- product grids: shop, related, upsells ------------------------------- */

.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  list-style:none;margin:0;padding:0}
@media (max-width:1000px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.woocommerce ul.products{grid-template-columns:1fr}}

.woocommerce ul.products li.product{
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;display:flex;flex-direction:column;transition:.15s}
.woocommerce ul.products li.product:hover{border-color:rgba(12,14,17,.3)}
.woocommerce ul.products li.product a img{display:block;width:100%;height:auto;margin:0}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--body);font-size:16px;font-weight:700;line-height:1.35;
  margin:0;padding:18px 20px 0}
.woocommerce ul.products li.product .price{
  display:block;font-family:var(--disp);font-size:22px;color:var(--ink);
  padding:8px 20px 0}
.woocommerce ul.products li.product .button{
  margin:16px 20px 20px;text-align:center}
.woocommerce ul.products li.product a{text-decoration:none;color:inherit}

.woocommerce .related > h2,
.woocommerce .upsells > h2{
  font-family:var(--disp);font-size:26px;text-transform:uppercase;
  margin:0 0 26px;padding-bottom:12px;border-bottom:3px solid var(--red)}

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

.woocommerce table.shop_table{
  width:100%;border-collapse:collapse;margin:0 0 34px;font-size:15px}
.woocommerce table.shop_table th{
  text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);padding:0 14px 12px 0;
  border-bottom:1px solid var(--line)}
.woocommerce table.shop_table td{
  padding:20px 14px 20px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.woocommerce table.shop_table td.product-thumbnail{width:96px;padding-right:20px}
.woocommerce table.shop_table td.product-thumbnail img{
  display:block;width:80px;height:auto;border:1px solid var(--line);border-radius:3px}
.woocommerce table.shop_table td.product-name a{
  color:var(--ink);text-decoration:none;font-weight:600}
.woocommerce table.shop_table td.product-name a:hover{color:var(--red)}
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal{font-variant-numeric:tabular-nums}
.woocommerce table.shop_table td.product-subtotal{font-weight:700}
.woocommerce table.shop_table td.product-remove{width:34px;padding-right:0}

/* The remove cross. Quiet until wanted, and red when it is -- it throws work
   away, so it should not be the most confident thing in the row. */
.woocommerce a.remove{
  display:block;width:24px;height:24px;line-height:22px;text-align:center;
  border-radius:50%;font-size:18px;text-decoration:none;color:var(--muted);
  border:1px solid var(--line);transition:.15s}
.woocommerce a.remove:hover{background:var(--red);border-color:var(--red);color:#fff}

.woocommerce table.cart td.actions{padding:26px 0 0;border-bottom:0}
.woocommerce table.cart td.actions .coupon{display:flex;gap:10px;float:left}
.woocommerce table.cart td.actions .coupon .input-text{
  width:200px;padding:14px 14px;font-family:var(--body);font-size:15px;
  border:1px solid var(--line);border-radius:3px}
.woocommerce table.cart td.actions .button[name="update_cart"]{float:right}
.woocommerce table.cart td.actions::after{content:"";display:block;clear:both}

.woocommerce .cart-collaterals{display:flex;justify-content:flex-end}
.woocommerce .cart_totals{
  width:100%;max-width:420px;background:var(--mist);
  border:1px solid var(--line);border-radius:6px;padding:28px}
.woocommerce .cart_totals h2{
  font-family:var(--disp);font-size:22px;text-transform:uppercase;margin:0 0 18px}
.woocommerce .cart_totals table.shop_table{margin:0 0 22px}
.woocommerce .cart_totals table.shop_table th{
  border-bottom:0;padding:10px 0;text-transform:none;font-size:15px;
  font-weight:600;color:var(--ink);letter-spacing:0}
.woocommerce .cart_totals table.shop_table td{
  border-bottom:0;padding:10px 0;text-align:right}
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td{
  border-top:1px solid var(--line);padding-top:16px;font-size:20px;font-weight:700}
.woocommerce .cart_totals tr.order-total td{font-family:var(--disp)}
.woocommerce .cart_totals .wc-proceed-to-checkout{padding:0}
.woocommerce .cart_totals a.checkout-button{display:block;text-align:center;width:100%}

.woocommerce .woocommerce-shipping-destination{font-size:13px;color:var(--muted)}

.woocommerce .cart-empty{font-size:18px;margin:0 0 24px}
.woocommerce .return-to-shop{margin:0}

/* ---- the cart on a phone -------------------------------------------------
   Five columns of tabular data do not fit a phone: measured at 532px against a
   375px viewport, so the whole page scrolled sideways. WooCommerce puts a
   data-title on every cart cell for exactly this case, so each row becomes a
   card and the attribute labels the value.

   Scoped to table.cart -- the items table only. The totals table is also a
   shop_table but it is two narrow columns inside a 420px box and reads fine
   as it is; touching it would be a regression. */
@media (max-width:768px){
  .woocommerce table.shop_table.cart thead{display:none}
  .woocommerce table.shop_table.cart,
  .woocommerce table.shop_table.cart tbody,
  .woocommerce table.shop_table.cart tr,
  .woocommerce table.shop_table.cart td{display:block;width:auto}

  .woocommerce table.shop_table.cart tr.cart_item{
    position:relative;min-height:116px;padding:18px 0 18px 96px;
    border-bottom:1px solid var(--line)}
  .woocommerce table.shop_table.cart tr.cart_item td{
    border-bottom:0;padding:2px 34px 2px 0;text-align:left}

  /* Thumbnail and remove cross come out of the flow and sit either side of the
     row, which is what the 96px left and 34px right padding above is for. */
  .woocommerce table.shop_table.cart td.product-thumbnail{
    position:absolute;left:0;top:18px;width:80px;padding:0}
  .woocommerce table.shop_table.cart td.product-remove{
    position:absolute;right:0;top:18px;width:24px;padding:0}

  .woocommerce table.shop_table.cart td[data-title]:before{
    content:attr(data-title) ": ";font-size:11.5px;font-weight:700;
    letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
  .woocommerce table.shop_table.cart td.product-name{
    font-size:17px;font-weight:600;margin-bottom:4px}
  .woocommerce table.shop_table.cart td.product-name:before{content:none}

  /* The actions row floats a 200px coupon field against an Update button. */
  .woocommerce table.cart td.actions{padding:22px 0 0}
  .woocommerce table.cart td.actions .coupon{float:none;margin-bottom:14px}
  .woocommerce table.cart td.actions .coupon .input-text{width:100%;min-width:0}
  .woocommerce table.cart td.actions .button[name="update_cart"]{float:none;width:100%}

  .woocommerce .cart-collaterals{display:block}
  .woocommerce .cart_totals{max-width:none}
}