/* =========================================================================
   EDIUSFA — WOOCOMMERCE BRIDGE
   Minimal mapping layer between WooCommerce's native output and the
   design system. The page templates render design markup directly; this
   file covers the native surfaces that bypass them (widgets, totals
   tables, payment boxes, star ratings, price del/ins).
   Cascade position: after footer.css, before the page layer.
   ========================================================================= */

/* ---- generic Woo scope ---- */

/* The wrapper <main class="woo-main"> hosts the shortcode pages that run
 * through woocommerce_content() (cart / checkout / my account). Their
 * overrides bring their own .container; this constraint is the safety net
 * that keeps ANY other Woo output inside the standard 1280px column
 * (the user-approved containment pattern). Container-in-container is a
 * visual identity (same max-width, border-box), so the designed pages
 * render pixel-identically. */
.woo-main{max-width:var(--container);margin-inline:auto}

.woocommerce ul.products{margin:0}
.woocommerce .woocommerce-result-count{margin:0}
.woocommerce .woocommerce-breadcrumb{display:none} /* design .crumbs renders instead */

/* ---- native price del/ins → design atoms ---- */
.woocommerce .price del,
.woocommerce .price ins{
  text-decoration:none;font-weight:inherit;background:none;padding:0;
}
.woocommerce .price del{font-size:var(--fs-2xs);color:var(--text-subtle);text-decoration:line-through}
.woocommerce .price del bdi{text-decoration:line-through}
.woocommerce .price ins{font-size:17px;font-weight:800;color:var(--secondary)}
.woocommerce ul.products li.product .price{font-size:17px;font-weight:800;color:var(--secondary)}
.woocommerce ul.products li.product .price del{display:block;font-size:var(--fs-2xs);color:var(--text-subtle)}
.woocommerce ul.products li.product .price ins{text-decoration:none}

/* ---- star ratings → design .stars palette ---- */
.woocommerce .star-rating{color:#E8A33D}
.woocommerce p.stars a{color:#E8A33D}

/* ---- shop tables (totals / order review / addresses) ---- */
.woocommerce table.shop_table{
  width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding:12px 14px;border-bottom:1px solid var(--border);
  text-align:start;font-size:var(--fs-sm);
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td{font-weight:700}
.woocommerce table.shop_table .amount{font-weight:800;color:var(--secondary)}
.woocommerce table.shop_table img{width:64px;border-radius:var(--r-xs)}

/* ---- forms inside Woo surfaces ---- */
.woocommerce form .form-row{margin-bottom:14px}
.woocommerce form .form-row label{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);margin-bottom:6px}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width:100%;border:1.5px solid var(--border-strong);border-radius:var(--r-sm);
  padding:11px 14px;font-size:var(--fs-sm);background:var(--surface);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  border-color:var(--primary);outline:none;
  box-shadow:0 0 0 3px rgba(14,115,128,.14);
}
.woocommerce form .form-row .required{color:var(--danger)}
.woocommerce form .form-row.woocommerce-invalid input{border-color:var(--danger)}

/* ---- payment gateway boxes (.pay-method alignment) ---- */
.woocommerce-checkout #payment{
  background:none;border-radius:var(--r-md);
}
.woocommerce-checkout #payment ul.payment_methods{
  display:grid;gap:10px;padding:0;margin:0;list-style:none;
  border:0;
}
.woocommerce-checkout #payment ul.payment_methods li{
  display:block;background:var(--surface);
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--surface-muted);border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--text-muted);
  margin:0 0 12px;padding:12px 14px;
}
.woocommerce-checkout #payment div.payment_box::before{display:none}
.woocommerce-checkout #payment div.form-row{padding:0}
#place_order{width:100%}

/* ---- buttons inside Woo surfaces → design .btn language ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 24px;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:700;line-height:1.5;
  border:1.5px solid transparent;white-space:nowrap;
  background:var(--primary);color:#fff;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{background:var(--primary-hover);color:#fff}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{background:var(--primary)}
.woocommerce a.button:disabled,
.woocommerce button.button:disabled{opacity:.45;cursor:not-allowed}
.woocommerce a.button.wc-forward,
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-info a.button{
  background:none;color:var(--primary-ink);padding:6px 10px;font-size:var(--fs-sm);
}

/* ---- my-account tables ---- */
.woocommerce-account .woocommerce .shop_table th,
.woocommerce-account .woocommerce .shop_table td{font-size:var(--fs-sm)}
.woocommerce-account .orders-table .button{font-size:var(--fs-sm);padding:8px 14px}

/* ---- addresses block ---- */
.woocommerce-account .woocommerce-Addresses .title h3{
  font-size:var(--fs-md);font-weight:800;margin-bottom:8px;
}

/* ---- quantity input (native contexts) mirrors .qty ---- */
.woocommerce .quantity .qty{
  width:64px;border:1.5px solid var(--border-strong);border-radius:var(--r-sm);
  padding:8px;text-align:center;font-size:var(--fs-sm);
}

/* ---- onsale flash → design .badge-sale (native loop fallback) ---- */
.woocommerce span.onsale{
  background:var(--secondary);color:#fff;font-size:10.5px;font-weight:700;
  padding:4px 9px;border-radius:var(--r-full);min-width:0;min-height:0;line-height:1.6;
  position:absolute;top:10px;inset-inline-start:10px;z-index:2;margin:0;
}

/* ---- checkout login toggle ---- */
.co-login-foot{margin-top:12px;display:flex;align-items:center;gap:10px}
.login-form{margin-top:12px;border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:18px;background:var(--surface)}

/* ---- thankyou ---- */
.woocommerce-thankyou-order-received,
.woocommerce .woocommerce-thankyou-order-received{
  font-size:var(--fs-lg);font-weight:800;color:var(--success);
}

/* ---- password strength meter (Woo native) → design meter palette ---- */
.woocommerce-password-strength{font-size:var(--fs-2xs);font-weight:700;margin-top:6px}
.woocommerce-password-strength.short{color:var(--danger)}
.woocommerce-password-strength.bad{color:var(--warning)}
.woocommerce-password-strength.good{color:var(--primary-ink)}
.woocommerce-password-strength.strong{color:var(--success)}

/* ---- hidden guard (QA lesson from the source project) ---- */
[hidden]{display:none!important}