/* Charcoal Spit Roasters — WooCommerce brand layer
   Brings shop, product, cart, checkout and account onto the same design system as
   the rest of the site: ash ground, Archivo at expanded width, square geometry,
   ember accent. Loaded by csr-performance.php on WooCommerce pages only. */

.woocommerce-page,
.woocommerce,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
  --ash:#c7c2ba; --paper:#edeae4; --char:#1c1a18; --char-2:#2b2825;
  --steel:#6e7378; --ember:#c4501b;
  --disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

/* ---------------------------------------------------------------- ground */
body.woocommerce-page,
body.woocommerce,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account { background:#c7c2ba; color:#1c1a18; }

.woocommerce-page .wp-site-blocks,
.woocommerce .wp-site-blocks { background:#c7c2ba; }

/* ------------------------------------------------------------ typography */
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3,
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.woocommerce-page .wp-block-post-title,
.woocommerce div.product .product_title {
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 120;
  font-weight:700; letter-spacing:-.02em; line-height:1.02; color:#1c1a18;
}
.woocommerce div.product .product_title { font-size:clamp(28px,4vw,46px); }

/* breadcrumb + result count + sorting read as instrument labels, not body copy */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-result-count {
  font-family:"IBM Plex Mono",ui-monospace,monospace !important;
  font-size:12px !important; line-height:1.5 !important;
  letter-spacing:.1em; text-transform:uppercase; color:#6e7378;
}
.woocommerce .woocommerce-breadcrumb a { color:#6e7378; text-decoration:none;
  border-bottom:1px solid rgba(28,26,24,.25); }
.woocommerce .woocommerce-breadcrumb a:hover { color:#c4501b; border-bottom-color:#c4501b; }

/* ------------------------------------------------------------- the badge */
/* stock badge is an olive circle; make it a square ember chip */
.woocommerce span.onsale,
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge .wc-block-components-product-sale-badge {
  background:#c4501b !important; color:#fff !important;
  border-radius:0 !important; border:0 !important;
  font-family:"IBM Plex Mono",ui-monospace,monospace !important;
  font-size:11px !important; letter-spacing:.16em !important; text-transform:uppercase;
  padding:7px 12px !important; min-height:0 !important; min-width:0 !important;
  line-height:1.2 !important; top:0 !important; left:0 !important; right:auto !important;
  margin:0 !important; position:absolute;
}
.wc-block-components-product-sale-badge__text { font-size:11px !important; }

/* ------------------------------------------------------------- controls */
/* nothing in this design is a pill */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce .wp-block-button__link, .wc-block-components-button,
.wc-block-components-button:not(.is-link),
.woocommerce-page .wp-element-button, .woocommerce .wp-element-button,
.woocommerce div.product form.cart .button {
  border-radius:0 !important;
  background:#1c1a18; color:#edeae4;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:400;
  padding:16px 28px; border:1px solid #1c1a18; line-height:1.2;
  transition:background .2s, border-color .2s, color .2s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .wc-block-components-button:hover,
.woocommerce div.product form.cart .button:hover {
  background:#c4501b !important; border-color:#c4501b !important; color:#fff !important;
}

/* form fields */
.woocommerce input[type=text], .woocommerce input[type=email], .woocommerce input[type=tel],
.woocommerce input[type=password], .woocommerce input[type=number], .woocommerce textarea,
.woocommerce select, .woocommerce .select2-container .select2-selection,
.wc-block-components-text-input input, .woocommerce-page select,
.woocommerce .quantity .qty {
  border-radius:0 !important;
  border:1px solid rgba(28,26,24,.32); background:#edeae4; color:#1c1a18;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif; font-size:16px;
  padding:12px 14px;
}
.woocommerce input:focus-visible, .woocommerce select:focus-visible,
.woocommerce textarea:focus-visible { outline:2px solid #c4501b; outline-offset:2px; }

.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__input { border-radius:0 !important; }

/* ---------------------------------------------------------- product grid */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product { background:#edeae4; padding:0 0 22px; position:relative; }
.woocommerce ul.products li.product a img { margin:0 0 18px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 115; font-weight:600; font-size:19px;
  letter-spacing:-.01em; padding:0 20px; color:#1c1a18;
}
.woocommerce ul.products li.product .price { padding:0 20px; display:block; }
.woocommerce ul.products li.product .button { margin:16px 20px 0; display:inline-block; }

/* ------------------------------------------------------------- pricing */
.woocommerce div.product p.price, .woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.wc-block-components-product-price {
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  color:#1c1a18; font-size:16px; font-weight:500;
}
.woocommerce div.product p.price { font-size:22px; }
.woocommerce div.product p.price del, .woocommerce ul.products li.product .price del,
.wc-block-components-product-price__regular {
  color:#6e7378; font-weight:400; opacity:1; text-decoration:line-through;
}
.woocommerce div.product p.price ins, .woocommerce ul.products li.product .price ins,
.wc-block-components-product-price__value--on-sale { color:#c4501b; text-decoration:none; }

/* --------------------------------------------------------------- tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { padding:0; margin:0 0 28px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-bottom:1px solid rgba(28,26,24,.22); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius:0 !important; background:transparent; border:0;
  border-bottom:2px solid transparent; margin:0 26px 0 0; padding:0 0 10px;
}
.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-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#6e7378; font-weight:400;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color:#c4501b; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color:#1c1a18; }

/* ------------------------------------------------- notices / cart totals */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner {
  border-radius:0 !important; border-top:0; border-left:3px solid #c4501b;
  background:#edeae4; color:#1c1a18;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
}
.woocommerce-message::before, .woocommerce-info::before { color:#c4501b; }

.woocommerce table.shop_table, .woocommerce-cart table.cart,
.woocommerce .cart_totals table { border-radius:0 !important; border-color:rgba(28,26,24,.2); }
.woocommerce table.shop_table th {
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#6e7378; font-weight:400;
}

/* ------------------------------------------------------------ related */
.woocommerce div.product .related > h2, .woocommerce div.product .upsells > h2 {
  font-variation-settings:"wdth" 118; font-size:clamp(22px,3vw,34px); margin-bottom:26px;
}

/* --------------------------------------------------------- tap targets */
@media (max-width:640px){
  .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
  .wc-block-components-button, .woocommerce div.product form.cart .button { width:100%; text-align:center; }
}

/* ------------------------------------------- Product Collection block */
/* the shop archive is the block template (li.wc-block-product inside
   .wc-block-product-template), not the classic ul.products list */
.wc-block-product-template { gap:clamp(14px,2vw,24px) !important; }
.woocommerce li.wc-block-product,
.woocommerce-page li.wc-block-product {
  background:#edeae4; padding:0 0 22px; position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.woocommerce li.wc-block-product:hover { transform:translateY(-4px); box-shadow:0 16px 34px rgba(28,26,24,.18); }
.woocommerce li.wc-block-product .wc-block-components-product-image { margin:0 0 16px; }
.woocommerce li.wc-block-product .wp-block-post-title,
.woocommerce li.wc-block-product .wc-block-components-product-title {
  padding:0 20px; margin:0 0 8px;
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 115; font-weight:600; font-size:18px;
  letter-spacing:-.01em; line-height:1.2;
}
.woocommerce li.wc-block-product .wp-block-post-title a { color:#1c1a18; text-decoration:none; }
.woocommerce li.wc-block-product .wp-block-post-title a:hover { color:#c4501b; }
.woocommerce li.wc-block-product .wp-block-woocommerce-product-price,
.woocommerce li.wc-block-product .wc-block-components-product-price { padding:0 20px; display:block; }
.woocommerce li.wc-block-product .wp-block-woocommerce-product-button { padding:14px 20px 0; }
.woocommerce li.wc-block-product .wc-block-components-product-button__button { width:100%; text-align:center; }

/* the gallery zoom button ships as a 36px circle; square it and give it a real
   tap target so it matches everything else */
.woocommerce div.product .woocommerce-product-gallery__trigger {
  border-radius:0 !important;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:#1c1a18; color:#edeae4; border:1px solid #1c1a18;
}
.woocommerce div.product .woocommerce-product-gallery__trigger:hover {
  background:#c4501b; border-color:#c4501b;
}