/* ══════════════════════════════════════════════════════════════════
   ASAS — WooCommerce Overrides  v2.0
   ══════════════════════════════════════════════════════════════════ */

/* ── Shared page wrapper ── */
.asas-woo-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}

/* ── WooCommerce page title bar ── */
.asas-woo-page-header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border-solid);
  padding: 28px 0;
}
.asas-woo-page-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 6px;
}
.woocommerce-breadcrumb {
  font-size: 13px;
  color: var(--text3);
  margin: 0;
}
.woocommerce-breadcrumb a { color: var(--text2); }
.woocommerce-breadcrumb a:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   MY ACCOUNT — the real fix
   WC renders:
     .asas-account-page-wrap
       .woocommerce                  ← grid container
         .woocommerce-MyAccount-navigation   ← col 1
         .woocommerce-MyAccount-content      ← col 2
   ══════════════════════════════════════════════════════════════════ */

.asas-account-page-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

/* The .woocommerce div WC injects — this is the ONLY grid target */
.asas-account-page-wrap > .woocommerce {
  display: grid !important;
  grid-template-columns: 210px 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

/* ── Sidebar nav ── */
.woocommerce-MyAccount-navigation {
  background: var(--surface);
  border: 1px solid var(--border-solid);
  border-radius: 12px;
  overflow: hidden;
  position: sticky;
  top: 74px;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 6px;
}
.woocommerce-MyAccount-navigation ul li {
  margin: 0;
}
.woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text2);
  text-decoration: none;
  transition: background .12s, color .12s;
}
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--bg2);
  color: var(--text);
}
/* Active item */
.woocommerce-MyAccount-navigation ul li.is-active > a,
.woocommerce-MyAccount-navigation ul li.current-menu-item > a {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 600;
}
/* ASAS AI tab */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--asas-dashboard > a {
  color: var(--accent);
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--asas-dashboard > a:hover,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--asas-dashboard.is-active > a {
  background: var(--accent-bg);
}
/* Logout */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a {
  color: #C0392B;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout > a:hover {
  background: rgba(192,57,43,.07);
  color: #C0392B;
}

/* ── Content area ── */
.woocommerce-MyAccount-content {
  background: var(--surface);
  border: 1px solid var(--border-solid);
  border-radius: 12px;
  padding: 28px 32px;
  min-height: 300px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text2);
}
.woocommerce-MyAccount-content p { margin: 0 0 1em; }
.woocommerce-MyAccount-content p:last-child { margin-bottom: 0; }
.woocommerce-MyAccount-content a { color: var(--accent); font-weight: 500; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--serif);
  color: var(--text);
  margin: 0 0 16px;
}

/* Orders table */
.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-top: 8px;
}
.woocommerce-orders-table thead th {
  background: var(--bg2);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text3);
  border-bottom: 2px solid var(--border-solid);
}
.woocommerce-orders-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-solid);
  vertical-align: middle;
}
.woocommerce-orders-table tbody tr:last-child td { border-bottom: none; }
.woocommerce-orders-table .button {
  font-size: 12px !important;
  padding: 6px 12px !important;
}

/* Order status marks */
.woocommerce-orders-table .woocommerce-orders-table__cell-order-status mark,
.wc-bacs-bank-details,
mark.order-status {
  background: none !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  font-style: normal;
}
.woocommerce-orders-table mark.completed   { background: #F0FDF4 !important; color: #166534 !important; }
.woocommerce-orders-table mark.processing  { background: #EFF6FF !important; color: #1E40AF !important; }
.woocommerce-orders-table mark.cancelled   { background: rgba(192,57,43,.08) !important; color: #C0392B !important; }
.woocommerce-orders-table mark.on-hold     { background: #FFFBEB !important; color: #92400E !important; }
.woocommerce-orders-table mark.pending     { background: #F5F3FF !important; color: #5B21B6 !important; }

/* ── Notices ── */
.woocommerce-message,
.woocommerce-info {
  background: var(--accent-bg);
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 20px;
  list-style: none;
}
.woocommerce-error {
  background: rgba(192,57,43,.07);
  border-left: 4px solid #C0392B;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: 14px;
  list-style: none;
  margin-bottom: 20px;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  background: var(--accent, #7C3AED) !important;
  color: #ffffff !important;            /* MUST be #ffffff not var() to avoid inheritance */
  border-radius: 999px !important;
  font-family: var(--sans, var(--asas-font), sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  border: none !important;
  transition: background .18s, box-shadow .18s !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover {
  background: var(--accent-h, #6D28D9) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(124,58,237,.35) !important;
  transform: translateY(-1px) !important;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--accent, #7C3AED) !important;
  color: #ffffff !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--accent-h, #6D28D9) !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   FORMS (checkout, edit-account, addresses)
   ══════════════════════════════════════════════════════════════════ */
.woocommerce form .form-row label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  display: block;
  margin-bottom: 4px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1.5px solid var(--border-solid);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 14.5px;
  padding: 9px 13px;
  color: var(--text);
  background: var(--surface);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
  outline: none;
}

/* ══════════════════════════════════════════════════════════════════
   SHOP / PRODUCT GRID
   ══════════════════════════════════════════════════════════════════ */

/* ── Shop page dedicated wrap ── */
.asas-shop-wrap {
  padding: 40px 0 72px;
  background: var(--bg);
}
.asas-shop-wrap .asas-container .woocommerce {
  width: 100%;
}
/* WC injects .woocommerce div — ensure it fills container */
.asas-shop-wrap .woocommerce,
.asas-shop-wrap .woocommerce-page {
  width: 100% !important;
}
/* Top bar: result count + ordering */
.woocommerce-result-count {
  font-size: 13.5px;
  color: var(--text2);
  margin: 0;
  padding: 12px 0;
  float: left;
}
.woocommerce-ordering {
  float: right;
  margin: 8px 0;
}
.woocommerce-ordering select {
  border: 1px solid var(--border-solid);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

/* ── Shop page wrapper ── */
.woocommerce-page .woocommerce:not(.asas-account-page-wrap .woocommerce),
.woocommerce .woocommerce-notices-wrapper ~ * {
  max-width: 1140px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px;
  padding-right: 24px;
}
/* Shop title & ordering bar */
.woocommerce-result-count,
.woocommerce-ordering {
  font-size: 13.5px;
  color: var(--text2);
}
.woocommerce-ordering select {
  border: 1px solid var(--border-solid);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}
/* Override WooCommerce default column count */
/* Force 4-column grid regardless of WC columns-N class */
.woocommerce ul.products,
.woocommerce ul.products.columns-1,
.woocommerce ul.products.columns-2,
.woocommerce ul.products.columns-3,
.woocommerce ul.products.columns-4,
.woocommerce ul.products.columns-5 {
  grid-template-columns: repeat(4, 1fr) !important;
}
/* Strip WC inline width/float */
.woocommerce ul.products li.product { width: auto !important; float: none !important; }

/* Product grid */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 24px 0 0 !important;
  margin: 0 !important;
  width: 100% !important;
  clear: both !important;
}
.woocommerce ul.products li.product {
  background: var(--surface);
  border: 1px solid var(--border-solid);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  transform: translateY(-3px);
}
/* Product image — consistent 16:9 aspect */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: block;
  text-decoration: none;
}
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-bottom: 1px solid var(--border-solid);
  display: block;
}
/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  padding: 18px 18px 6px;
  margin: 0;
  line-height: 1.3;
}
/* Price */
.woocommerce ul.products li.product .price {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  padding: 4px 18px 14px;
  display: block;
  line-height: 1.4;
}
.woocommerce ul.products li.product .price del {
  font-size: 14px;
  color: var(--text3);
  font-weight: 400;
  display: block;
}
/* Add to cart button */
.woocommerce ul.products li.product .button {
  display: block !important;
  margin: auto 18px 18px !important;
  text-align: center !important;
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 11px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .15s !important;
  text-decoration: none !important;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--accent-h) !important;
  color: #fff !important;
}
/* Sale badge */
.woocommerce ul.products li.product .onsale {
  background: var(--accent);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  min-height: auto;
  line-height: 1.4;
  top: 12px;
  left: 12px;
}

/* Single product */
.woocommerce div.product .product_title { font-family:var(--serif); font-size:28px; font-weight:500; }
.woocommerce div.product p.price { font-size:24px; color:var(--accent); font-weight:500; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom:2px solid var(--border-solid); padding:0; margin:0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background:transparent; border:none; border-bottom:2px solid transparent; margin-bottom:-2px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color:var(--accent); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family:var(--sans); font-size:14px; font-weight:500; color:var(--text2); padding:10px 18px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color:var(--accent); }

/* Ratings / sale / price */
.woocommerce .star-rating span::before { color:var(--accent); }
.woocommerce span.onsale { background:var(--accent); color:#fff; border-radius:20px; font-size:11px; font-weight:600; padding:4px 10px; min-height:auto; line-height:1.4; }
.woocommerce .price ins { text-decoration:none; color:var(--accent); }
.woocommerce .price del { color:var(--text3); font-size:.85em; }

/* Cart / Checkout tables */
.woocommerce table.shop_table { border:1px solid var(--border-solid); border-radius:12px; overflow:hidden; }
.woocommerce table.shop_table th { background:var(--bg2); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text2); border-bottom:2px solid var(--border-solid); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; }
.woocommerce table.shop_table tfoot tr th,
.woocommerce table.shop_table tfoot tr td { font-weight:500; }

/* Subscriptions */
.subscription-details { font-size:13.5px; color:var(--text2); }
.woocommerce-subscriptions-table { font-size:14px; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .asas-account-page-wrap > .woocommerce {
    grid-template-columns: 1fr !important;
  }
  .woocommerce-MyAccount-navigation {
    position: static;
  }
  .woocommerce-MyAccount-content {
    padding: 20px;
  }
}

/* ── Payment Methods page — Add payment method button ─────────── */
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content input.button,
.woocommerce-MyAccount-content input[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content button.button {
  background: #7C3AED !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  border: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  transition: background .18s !important;
}
.woocommerce-MyAccount-content a.button:hover,
.woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button:hover {
  background: #6D28D9 !important;
  color: #ffffff !important;
}

/* Override the generic MyAccount content link color on buttons specifically */
.woocommerce-MyAccount-content a.button {
  color: #ffffff !important;
}