/*
 * Vochti — WooCommerce.
 *
 * The cart and the checkout are rooms in the same house. Woo's defaults are
 * built to be neutral; this makes them quiet instead.
 */

.woocommerce, .woocommerce-page{
  --ivory:#F4F0E7; --bone:#E7E0D3; --espresso:#29251F; --walnut:#4A3325;
  --oxide:#87503C; --olive:#5D624E; --brass:#9A835A;
  --rule:rgba(41,37,31,.16);
  --ease:cubic-bezier(.16,.84,.44,1);
  background:var(--ivory); color:var(--espresso);
  font-family:'Archivo',system-ui,sans-serif;
}

.woocommerce .woocommerce-breadcrumb{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.5; margin-bottom:34px;
}

.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce .product_title,
.woocommerce .cart_totals h2,
.woocommerce-checkout h3{
  font-family:'Fraunces',Georgia,serif; font-weight:300; letter-spacing:-.01em; line-height:1.06;
}
.woocommerce .product_title{ font-size:clamp(30px,3.6vw,44px); }

/* prices read as a fact, not as an offer */
.woocommerce .price,
.woocommerce .amount,
.woocommerce-Price-amount{
  font-family:'Fraunces',Georgia,serif; font-weight:300; color:var(--espresso);
}
.woocommerce .price del{ opacity:.4; }
.woocommerce .price ins{ text-decoration:none; }

/* buttons: the same square, quiet button the rest of the house uses */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order{
  background:var(--espresso); color:var(--ivory); border:0; border-radius:0;
  padding:16px 26px; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:500; line-height:1; transition:background .35s ease, color .35s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover{
  background:var(--brass); color:var(--espresso);
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled{ opacity:.35; }

/* notices carry information, not decoration */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background:var(--bone); border-top:1px solid var(--espresso); color:var(--espresso);
  border-radius:0; padding:18px 22px; font-size:13.5px;
}
.woocommerce-message::before,
.woocommerce-info::before{ color:var(--olive); }
.woocommerce-error{ border-top-color:var(--oxide); }
.woocommerce-error::before{ color:var(--oxide); }

/* the archive, in case Woo's own loop is used instead of the Vochti grid */
.woocommerce ul.products{ gap:30px 24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.woocommerce ul.products::before, .woocommerce ul.products::after{ display:none; }
.woocommerce ul.products li.product{ width:auto; margin:0; float:none; text-align:left; }
.woocommerce ul.products li.product img{ aspect-ratio:4/5; object-fit:cover; margin-bottom:16px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Fraunces',serif; font-weight:300; font-size:17px; padding:0; margin:0 0 5px;
}
.woocommerce ul.products li.product .price{ font-size:15px; }
.woocommerce span.onsale{
  background:var(--oxide); color:var(--ivory); border-radius:0; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; min-height:0; min-width:0; padding:6px 12px; line-height:1;
}

/* single product */
.woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0; margin:0 0 24px; border-bottom:1px solid var(--rule); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none; border:0; border-radius:0; margin:0 30px 0 0; padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.45;
  padding:16px 0; border-bottom:1px solid transparent; font-weight:500;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ opacity:1; border-bottom-color:var(--espresso); }

.woocommerce div.product form.cart div.quantity{ margin-right:14px; }
.woocommerce .quantity input.qty{
  border:1px solid var(--rule); border-radius:0; background:none; height:52px; width:70px;
  font-family:'Fraunces',serif; font-size:16px;
}

/* the stock line is the most important sentence on a one-off object */
.woocommerce div.product .stock{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--olive); font-weight:500;
}
.woocommerce div.product .stock.out-of-stock{ color:var(--oxide); }

/* cart and checkout */
.woocommerce table.shop_table{
  border:0; border-radius:0; border-collapse:collapse;
}
.woocommerce table.shop_table th{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.5;
  font-weight:500; border-bottom:1px solid var(--rule); padding:14px 12px;
}
.woocommerce table.shop_table td{ border-top:1px solid var(--rule); padding:20px 12px; }
.woocommerce table.shop_table img{ width:74px; }
.woocommerce a.remove{ color:var(--oxide) !important; font-weight:400; }
.woocommerce a.remove:hover{ background:var(--oxide); color:var(--ivory) !important; }

.woocommerce-cart .cart-collaterals .cart_totals{ float:none; width:100%; max-width:420px; margin-left:auto; }
.woocommerce-cart table.cart td.actions .coupon .input-text{
  border:1px solid var(--rule); border-radius:0; padding:14px; width:180px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single{
  border:0; border-bottom:1px solid var(--rule); border-radius:0; background:none;
  padding:12px 0; font:inherit; font-size:15px; height:auto; color:var(--espresso);
}
.woocommerce form .form-row label{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.5; margin-bottom:6px;
}
.woocommerce form .form-row input.input-text:focus{ outline:0; border-bottom-color:var(--espresso); }

.woocommerce-checkout #payment{ background:var(--bone); border-radius:0; }
.woocommerce-checkout #payment div.payment_box{ background:rgba(41,37,31,.05); border-radius:0; }
.woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:rgba(41,37,31,.05); }

.woocommerce-order,
.woocommerce-thankyou-order-received{
  font-family:'Fraunces',serif; font-weight:300; font-size:26px;
}

/* right to left */
[dir="rtl"] .woocommerce ul.products li.product{ text-align:right; }
[dir="rtl"] .woocommerce-cart .cart-collaterals .cart_totals{ margin-left:0; margin-right:auto; }
[dir="rtl"] .woocommerce div.product .woocommerce-tabs ul.tabs li{ margin:0 0 0 30px; }
[dir="rtl"] .woocommerce div.product form.cart div.quantity{ margin-right:0; margin-left:14px; }
[dir="rtl"] .woocommerce .price,
[dir="rtl"] .woocommerce .amount{ direction:ltr; unicode-bidi:embed; display:inline-block; }

@media (max-width:1040px){
  .woocommerce ul.products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .woocommerce ul.products{ grid-template-columns:1fr 1fr; gap:22px 14px; }
}
