/*
 * JFA WooCommerce redesign (2026-09-30)
 * Deep restyle of shop loop + single product pages to match the
 * JustForAuto lifestyle design system (cream bg, ink text, acid/orange
 * accents, DM Mono labels, Manrope headings). Loaded after jfa-sections.
 */

/* ============ BASE ============ */
.woocommerce-page,
.single-product{background:var(--j-cream)}
.woocommerce-page .site-main,
.single-product .site-main{padding-bottom:40px}

/* breadcrumb */
.woocommerce .woocommerce-breadcrumb{
  margin:26px 0 0;padding:0;
  font:500 .68rem "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--j-ash)}
.woocommerce .woocommerce-breadcrumb a{color:var(--j-ash);text-decoration:none}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--j-orange)}
.woocommerce .woocommerce-breadcrumb .breadcrumb-separator{padding:0 6px;opacity:.6}

/* ============ GLOBAL WOO BUTTONS ============ */
.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 #respond input#submit.alt{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--j-acid);color:var(--j-ink);border:0;border-radius:2px;
  padding:15px 24px;font:500 .75rem "DM Mono",monospace;letter-spacing:.05em;
  text-transform:uppercase;line-height:1;cursor:pointer;transition:.2s ease;text-decoration:none}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,.woocommerce #respond input#submit.alt:hover{
  background:var(--j-orange);color:#fff;transform:translateY(-2px)}
.woocommerce a.button:disabled,.woocommerce button.button:disabled{opacity:.5;cursor:not-allowed}

/* notices */
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{
  border:0;border-left:3px solid var(--j-acid);border-radius:4px;background:#fff;
  color:var(--j-ink);padding:16px 20px;margin:24px 0;font-size:.92rem;
  box-shadow:0 8px 24px rgba(17,19,17,.06)}
.woocommerce .woocommerce-error{border-left-color:var(--j-orange)}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{color:var(--j-orange)}

/* star ratings */
.woocommerce .star-rating span::before,
.woocommerce p.stars a{color:var(--j-orange)}

/* on-sale badge */
.woocommerce span.onsale{
  background:var(--j-orange);color:#fff;font:500 .66rem "DM Mono",monospace;
  letter-spacing:.08em;text-transform:uppercase;border-radius:2px;
  min-width:auto;min-height:auto;line-height:1;padding:8px 12px;top:14px;left:14px;z-index:2}

/* ============ SHOP / CATEGORY LOOP ============ */
.woocommerce ul.products{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin:34px 0 0;padding:0;list-style:none;width:100%}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{
  float:none;width:auto;margin:0;padding:0 0 20px;
  background:#fff;border:1px solid var(--j-line);border-radius:14px;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.woocommerce ul.products li.product:hover{
  transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,19,17,.10);border-color:var(--j-acid)}
.woocommerce ul.products li.product a img{
  width:100%;aspect-ratio:1/1;object-fit:cover;margin:0 0 16px;border-radius:0;
  transition:transform .4s ease}
.woocommerce ul.products li.product:hover a img{transform:scale(1.04)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font:700 1.15rem/1.25 Manrope,Arial,sans-serif;letter-spacing:-.03em;
  padding:0 20px;color:var(--j-ink)}
.woocommerce ul.products li.product .price{
  font:700 1rem Manrope,Arial,sans-serif;color:var(--j-orange);padding:0 20px;margin:8px 0 14px}
.woocommerce ul.products li.product .price del{color:var(--j-ash);font-weight:400;font-size:.85em}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .button{margin:0 20px;padding:11px 18px;font-size:.68rem}
.woocommerce ul.products li.product .star-rating{margin:8px 20px 0;font-size:.8em}

/* result count + ordering */
.woocommerce .woocommerce-result-count{margin:26px 0 0;color:var(--j-ash);font-size:.85rem}
.woocommerce .woocommerce-ordering select{
  border:1px solid var(--j-line);border-radius:4px;background:#fff;padding:10px 12px;
  font:500 .75rem "DM Mono",monospace;color:var(--j-ink)}

/* pagination */
.woocommerce nav.woocommerce-pagination ul{border:0}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0 3px}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  border:1px solid var(--j-line);border-radius:4px;background:#fff;color:var(--j-ink);
  min-width:40px;padding:9px 0;text-align:center;font:500 .8rem "DM Mono",monospace}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--j-ink);color:#fff;border-color:var(--j-ink)}

/* ============ SINGLE PRODUCT ============ */
.woocommerce div.product{margin-top:26px}
.woocommerce div.product div.images{width:46%;margin-bottom:38px}
.woocommerce div.product div.summary{width:50%;margin-bottom:38px}

/* gallery */
.woocommerce div.product div.images .flex-viewport{
  border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--j-line)}
.woocommerce div.product div.images .flex-control-thumbs{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.woocommerce div.product div.images .flex-control-thumbs li{width:auto;float:none}
.woocommerce div.product div.images .flex-control-thumbs img{
  border-radius:8px;border:2px solid transparent;opacity:.55;transition:.2s ease}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover{
  opacity:1;border-color:var(--j-acid)}

/* title + price */
.woocommerce div.product .product_title{
  font:800 clamp(2rem,3.4vw,3rem)/.98 Manrope,Arial,sans-serif;
  letter-spacing:-.05em;color:var(--j-ink);margin:0 0 14px}
.woocommerce div.product p.price,.woocommerce div.product span.price{
  font:800 1.55rem Manrope,Arial,sans-serif;color:var(--j-ink);margin:0 0 8px}
.woocommerce div.product p.price del{color:var(--j-ash);font-weight:400;font-size:.72em}
.woocommerce div.product p.price ins{text-decoration:none;color:var(--j-orange)}
.woocommerce div.product .woocommerce-product-rating{margin-bottom:16px}
.woocommerce div.product .woocommerce-review-link{
  color:var(--j-ash);font:500 .72rem "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.woocommerce div.product .woocommerce-review-link:hover{color:var(--j-orange)}

/* short description + details */
.woocommerce div.product div.summary .woocommerce-product-details__short-description{
  color:#51564f;font-size:1rem;line-height:1.7;margin:18px 0;padding-top:18px;border-top:1px solid var(--j-line)}
.woocommerce div.product div.summary p{color:#51564f;line-height:1.7}

/* cart form */
.woocommerce div.product form.cart{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0;padding:22px 0;
  border-top:1px solid var(--j-line);border-bottom:1px solid var(--j-line)}
.woocommerce div.product form.cart div.quantity{
  display:inline-flex;align-items:center;margin:0 6px 0 0;float:none}
.woocommerce .quantity input[type="number"]{
  width:76px;height:48px;border:1px solid var(--j-line);border-radius:2px;background:#fff;
  padding:0 12px;font:600 1rem Manrope,Arial,sans-serif;color:var(--j-ink)}
.woocommerce div.product form.cart .button{padding:16px 30px;font-size:.75rem}
.woocommerce div.product form.cart.variations_form .button,
.woocommerce div.product form.cart.grouped_form .button{align-self:flex-start}
.woocommerce .variations select{
  border:1px solid var(--j-line);border-radius:4px;background:#fff;padding:10px 12px;
  font:500 .85rem Manrope,Arial,sans-serif;color:var(--j-ink)}

/* product meta */
.woocommerce div.product .product_meta{
  padding-top:18px;font:500 .72rem "DM Mono",monospace;letter-spacing:.06em;
  text-transform:uppercase;color:var(--j-ash);line-height:2.1}
.woocommerce div.product .product_meta a{color:var(--j-ash);text-decoration:none;border-bottom:1px solid var(--j-line)}
.woocommerce div.product .product_meta a:hover{color:var(--j-orange)}
.woocommerce div.product .product_meta .sku{color:var(--j-ink)}

/* stock */
.woocommerce div.product .stock{font:500 .75rem "DM Mono",monospace;letter-spacing:.05em;text-transform:uppercase;color:#3d7a3d}
.woocommerce div.product .out-of-stock{color:var(--j-orange)}

/* ============ TABS ============ */
.woocommerce div.product .woocommerce-tabs{clear:both;padding-top:8px}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;gap:6px;flex-wrap:wrap;border:0;margin:0 0 26px;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border:1px solid var(--j-line);border-radius:2px;background:#fff;margin: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.active{background:var(--j-ink);border-color:var(--j-ink)}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  padding:12px 18px;font:500 .72rem "DM Mono",monospace;letter-spacing:.05em;
  text-transform:uppercase;color:var(--j-ink)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--j-acid)}
.woocommerce div.product .woocommerce-tabs .panel{
  background:#fff;border:1px solid var(--j-line);border-radius:14px;padding:32px 34px;
  color:#4b514a;font-size:1rem;line-height:1.75;max-width:900px}
.woocommerce div.product .woocommerce-tabs .panel h2{
  font:700 1.4rem/1.2 Manrope,Arial,sans-serif;letter-spacing:-.03em;color:var(--j-ink);margin:0 0 16px}

/* shop_attributes table */
.woocommerce table.woocommerce-product-attributes{
  border:0;background:transparent}
.woocommerce table.woocommerce-product-attributes th,
.woocommerce table.woocommerce-product-attributes td{
  border:0;border-bottom:1px solid var(--j-line);padding:12px 14px;vertical-align:top}
.woocommerce table.woocommerce-product-attributes th{
  font:500 .72rem "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--j-ash)}
.woocommerce table.woocommerce-product-attributes td{font-size:.95rem;color:var(--j-ink)}

/* ============ RELATED / UPSELLS ============ */
.woocommerce .related.products,.woocommerce .upsells.products{clear:both;padding-top:20px}
.woocommerce .related.products>h2,.woocommerce .upsells.products>h2,
.woocommerce .cross-sells>h2{
  font:800 clamp(1.6rem,2.6vw,2.2rem)/1.05 Manrope,Arial,sans-serif;
  letter-spacing:-.05em;color:var(--j-ink);margin:34px 0 6px}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr)}
  .woocommerce div.product div.images,.woocommerce div.product div.summary{
    float:none;width:100%}
}
@media(max-width:560px){
  .woocommerce ul.products{grid-template-columns:1fr}
  .woocommerce div.product .woocommerce-tabs ul.tabs{gap:4px}
  .woocommerce div.product .woocommerce-tabs .panel{padding:22px 18px}
}